:root{--bg:#14110d;--card:#1d1812;--rule:#3a3126;--ivory:#efe6d2;--dim:#b9ad94;--muted:#8a7f6a;--brass:#c19a54;--felt:#59795c;--light:#c9b48a;--dark:#7a5a3a;--bad:#b5523b;--blue:#6fb7d6}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ivory);font-family:Georgia,'Times New Roman',serif}
button{font:inherit;cursor:pointer}
#app{max-width:980px;margin:0 auto;padding:10px 14px 16px}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.brand{font-size:20px;font-weight:600}.brand em{color:var(--brass)}
.hbtns{display:flex;gap:8px}
.ghost,.primary,.link{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.06em;border-radius:3px;padding:8px 12px}
.ghost{background:transparent;color:var(--dim);border:1px solid var(--rule)}.ghost:hover{color:var(--ivory);border-color:var(--brass)}
.primary{background:var(--brass);color:#14110d;border:0;font-weight:700}.primary:disabled{opacity:.35;cursor:default}
.link{background:none;border:0;color:var(--muted);text-decoration:underline;padding:6px 0}
.task{background:var(--card);border-left:3px solid var(--brass);padding:10px 14px;margin:0 0 12px;font-size:17px;line-height:1.4}
.timer{float:right;font-size:18px;letter-spacing:.04em;color:var(--ivory)}
.task .tier{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);display:block;margin-bottom:2px}
.main{display:grid;grid-template-columns:minmax(0,min(420px,max(260px,calc(100vh - 110px)))) minmax(220px,1fr);gap:18px;align-items:start}
@media(max-width:720px){.main{grid-template-columns:1fr}}
.boardwrap{width:100%}
.board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;border:2px solid var(--rule);user-select:none;touch-action:none;position:relative}
.sq{position:relative;display:flex;align-items:center;justify-content:center;container-type:size}
.sq.l{background:#d9cca6}.sq.d{background:#8b7348}
.sq.sel{box-shadow:inset 0 0 0 4px #f0d27a}
.sq.last::before{content:"";position:absolute;inset:0;background:rgba(240,210,122,.28)}
.sq.target{box-shadow:inset 0 0 0 4px #4fbf6a,inset 0 0 0 60px rgba(79,191,106,.16)}
.sq.mine{box-shadow:inset 0 0 0 4px #3d9bff}
.sq.target.mine{box-shadow:inset 0 0 0 4px #4fbf6a,inset 0 0 0 8px #3d9bff,inset 0 0 0 60px rgba(79,191,106,.16)}
.tg{position:absolute;left:50%;transform:translateX(-50%);z-index:3;pointer-events:none;font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-size:clamp(8px,2.3cqw,12px);letter-spacing:.04em;line-height:1;padding:2px 4px;border-radius:3px;color:#0d0b08;white-space:nowrap}
.tg.mv{background:#3d9bff;bottom:2%}.tg.goal{background:#4fbf6a;top:2%}
.sq.hint::after{content:"";width:28%;height:28%;border-radius:50%;background:rgba(20,17,13,.35);position:absolute}
.sq.hint.cap::after{width:88%;height:88%;background:none;border:5px solid rgba(20,17,13,.35)}
.piece{font-size:min(9.5vw,60px);line-height:1;cursor:grab;z-index:1;font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Apple Symbols","DejaVu Sans",sans-serif}
@container (min-width:1px){.piece{font-size:78cqh}}
.piece.w{color:#ffffff;-webkit-text-stroke:3.2px #14100b;paint-order:stroke fill;text-shadow:0 2px 2px rgba(0,0,0,.35)}
.piece.b{color:#0b0805;-webkit-text-stroke:3px #f6efdc;paint-order:stroke fill}
.ghost-piece{position:fixed;pointer-events:none;z-index:50;transform:translate(-50%,-50%);font-size:64px}
.files{display:grid;grid-template-columns:repeat(8,1fr);font-family:ui-monospace,monospace;font-size:11px;color:var(--muted);text-align:center;margin-top:3px}
.status{font-family:ui-monospace,monospace;font-size:13px;color:var(--dim);line-height:1.6;margin-bottom:8px}
.status b{color:var(--ivory)}
.moves{font-family:ui-monospace,monospace;font-size:13px;min-height:54px;max-height:140px;overflow:auto;background:var(--card);padding:8px 10px;line-height:1.7;color:var(--ivory)}
.moves .n{color:var(--muted)}.moves .mine{color:var(--blue)}
.btns{display:flex;gap:8px;margin:10px 0}
.msg{min-height:44px;font-size:15px;line-height:1.4}.msg.good{color:#8fcf96}.msg.warn{color:#e8c65e}.msg.bad{color:#e08a76}
.tries{font-size:22px;letter-spacing:3px;margin:6px 0}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:100;padding:14px}
.modal.hidden{display:none}
.card{background:var(--card);border:1px solid var(--rule);padding:18px 20px;max-width:440px;width:100%;position:relative;max-height:90vh;overflow:auto}
.card.small{width:auto;text-align:center}
.x{position:absolute;top:4px;right:8px;background:none;border:0;color:var(--muted);font-size:24px}
.card h3{margin:0 0 10px;font-size:20px}
.stat{display:flex;gap:18px;margin-bottom:10px}.stat div{text-align:center}.stat b{font-size:24px;display:block}.stat span{font-size:11px;color:var(--muted);font-family:ui-monospace,monospace}
.bar{display:flex;align-items:center;gap:8px;font-family:ui-monospace,monospace;font-size:12px;margin:3px 0}.bar i{display:block;height:14px;background:var(--felt);min-width:3px}
.row{padding:5px 0;border-bottom:1px solid var(--rule);font-size:15px}
.promo{display:flex;gap:10px;margin-top:10px}.promo button{font-size:38px;background:var(--dark);border:1px solid var(--rule);color:#fbf6e8;border-radius:4px;width:64px;height:64px;font-family:"Segoe UI Symbol","Noto Sans Symbols 2","DejaVu Sans",sans-serif}

.info{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.6;color:var(--dim);margin:-2px 0 8px}.info b{color:var(--ivory)}.info small{color:var(--muted);font-size:11px}
#app{padding-top:6px}.task{margin:4px 0 10px;padding:8px 14px;font-size:16px}

.hidden{display:none!important}
#splash{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:50;text-align:center}
.sp-in{padding:24px}
.sp-logo{width:96px;height:96px;margin:0 auto 18px;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);box-sizing:border-box;border:3px solid var(--brass);border-radius:8px;overflow:hidden;animation:sp-pulse 1.8s ease-in-out infinite}
.sp-logo i{display:block}
.sp-brand{font-size:30px;font-weight:700}.sp-brand em{color:var(--brass)}
.sp-tag{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:6px 0 22px}
.sp-load{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--dim);font-size:15px}
.sp-spin{width:16px;height:16px;border:2px solid var(--rule);border-top-color:var(--brass);border-radius:50%;animation:sp-spin .8s linear infinite}
.sp-err p{color:var(--dim);margin:0 0 14px;max-width:320px;line-height:1.4}
.sp-err button{padding:8px 22px;font-size:15px;cursor:pointer}
@keyframes sp-spin{to{transform:rotate(360deg)}}
@keyframes sp-pulse{50%{transform:scale(.94);opacity:.85}}
.sq.check{background-image:radial-gradient(circle at 50% 50%,rgba(255,40,40,.95) 0,rgba(235,30,30,.75) 38%,rgba(200,20,20,.0) 74%)}
.chk{color:#ff6b5e;font-weight:700}
.eggmap{max-width:340px;display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;gap:2px;background:#14110d;border:2px solid #c19a54;margin:10px 0}
.eggmap i{display:flex;align-items:center;justify-content:center;font:700 16px ui-monospace,monospace;font-style:normal;color:#14110d}
.eggcap{font-size:13px;color:var(--muted);margin:0}.brand{user-select:none}
.piece.tip,.piece.tipped{display:inline-block;transform-origin:50% 90%}
.piece.tip{animation:tip 1.1s .3s cubic-bezier(.5,0,.8,1) forwards}
.piece.tipped{transform:rotate(-88deg) translateX(6%)}
@keyframes tip{0%{transform:rotate(0)}25%{transform:rotate(-8deg)}100%{transform:rotate(-88deg) translateX(6%)}}
.tear{position:absolute;font-size:22cqh;left:58%;top:8%;opacity:0;animation:tear 1.2s 1.2s ease-in forwards;z-index:3}
@keyframes tear{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(120%)}}
.eggcard{margin-top:10px;background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--brass);padding:10px 12px;font-size:14px;line-height:1.4;opacity:0;animation:eggfade .6s 1.6s forwards}
.eggcard.seen{animation:none;opacity:1}
.eggcard b{display:block;font:11px ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:3px}
@keyframes eggfade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.piece.tip{animation:none;transform:rotate(-88deg) translateX(6%)}.tear{display:none}.eggcard{animation:none;opacity:1}}
.rk{position:absolute;left:3px;top:2px;font:700 11px ui-monospace,monospace;line-height:1;pointer-events:none;z-index:2}
.sq.l .rk{color:#8b7348}.sq.d .rk{color:#d9cca6}