:root{--bg:#1a1630;--panel:#2a2450;--ink:#f4ecd8;--acc:#ffcc33;--acc2:#4fd1c5;--lt:#ecd9b0;--dk:#a8744c;--bad:#ff5a5a}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:var(--bg) radial-gradient(circle at 50% 0,#3a2f6c,var(--bg) 70%) fixed;color:var(--ink);font:16px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
button,input,select{font:inherit;color:inherit}
button{background:var(--panel);border:2px solid #f4ecd8cc;box-shadow:0 3px 0 #000a;padding:.45em .8em;cursor:pointer;border-radius:10px;font-weight:600}
button:hover,button:focus-visible{background:#3d3570;outline:none}button:active{transform:translateY(2px);box-shadow:0 1px 0 #000}
button.on{background:var(--acc);color:#1a1630;border-color:#fff}button.big{background:linear-gradient(#5fe3d5,#2fb0a3);color:#102;font-weight:800}
button.sm{padding:.2em .6em;font-size:.85em;box-shadow:0 2px 0 #000a}
button:disabled{opacity:.5}
button.link{background:none;border:none;box-shadow:none;text-decoration:underline;padding:.3em}
input,select{background:#0e0b20;border:2px solid #f4ecd8aa;border-radius:8px;padding:.45em;width:100%}
.panel{max-width:480px;margin:0 auto;padding:16px}
#hero{display:flex;justify-content:center;gap:2px;margin-top:6px}#hero img{width:64px;height:64px;filter:drop-shadow(0 4px 4px #0008);animation:bob 1.6s ease-in-out infinite}
#hero img:nth-child(2n){animation-delay:-.8s}
@keyframes bob{50%{transform:translateY(-4px) scaleY(1.03)}}
h1{font:900 2.4em/1 "Arial Black",Impact,system-ui;text-align:center;margin:.15em 0 0;letter-spacing:.06em;text-shadow:0 4px 0 #000;color:var(--acc)}h1 span{color:var(--acc2)}
.sub{text-align:center;opacity:.85;margin-top:4px}
.box{background:linear-gradient(#2f2858,#251f48);border:2px solid #f4ecd855;border-radius:14px;box-shadow:0 6px 0 #0008;padding:12px;margin:14px 0}
.box h2{margin:0 0 10px;font-size:1.1em;color:var(--acc)}
.row{display:flex;gap:8px;align-items:flex-end}.row>*{flex:1}label{display:block;margin:8px 0}label.inline{display:flex;align-items:center;gap:8px}label.inline select{width:auto;flex:1}
.gear{flex:none!important;margin-bottom:8px}
#create{width:100%;margin-top:6px}#code{text-transform:uppercase;letter-spacing:.3em;text-align:center;font-size:1.3em;font-weight:bold}
.levels{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:8px}.levels button{padding:.4em .2em;display:flex;flex-direction:column;align-items:center;font-size:.85em}
.levels small{display:none}.levels button.on small{display:none}
.small{font-size:.85em;opacity:.8;margin:.5em 0 0}.credit{font-size:.72em;opacity:.6;text-align:center}.credit a{color:inherit}
.msg{color:var(--bad);text-align:center;min-height:1.2em}.back{color:var(--acc2);display:block;text-align:center}
#game{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
header{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#0e0b20;border-bottom:2px solid #000}
header .back{text-decoration:none;font-size:1.2em}.code b{color:var(--acc);letter-spacing:.1em;font-size:1.05em}
.main{flex:1;display:flex;gap:14px;padding:8px;justify-content:center;align-items:flex-start}
.boardcol{--sz:min(calc(100vw - 16px),calc(100dvh - 200px));width:var(--sz)}
@media(min-width:900px){.boardcol{--sz:min(calc(100vw - 360px),calc(100dvh - 120px),800px)}}
.frame{--pad:calc(var(--sz)*.03);padding:var(--pad);border-radius:calc(var(--sz)*.02);
 background:linear-gradient(135deg,#7a4a26,#4a2a14 40%,#6a3e1e 60%,#3a200e);box-shadow:0 8px 18px #000a,inset 0 0 0 2px #c08a4a66,inset 0 0 0 calc(var(--pad) - 3px) #0002}
#boardWrap{position:relative;width:calc(var(--sz) - 2*var(--pad));height:calc(var(--sz) - 2*var(--pad));box-shadow:0 0 0 2px #2a1608,0 0 0 4px #d8a85a66}
#board{display:grid;grid-template:repeat(8,1fr)/repeat(8,1fr);width:100%;height:100%;touch-action:none;user-select:none}
.sq{position:relative;display:flex;align-items:center;justify-content:center;
 background:radial-gradient(ellipse at var(--g) 30%,#fff3 0,transparent 60%),repeating-linear-gradient(97deg,#0000 0 7px,#7a4a2010 7px 9px,#0000 9px 15px),linear-gradient(160deg,#f3e2bc,#e2c896)}
.sq.d{background:radial-gradient(ellipse at var(--g) 70%,#fff1 0,transparent 60%),repeating-linear-gradient(95deg,#0000 0 6px,#3a1a0818 6px 8px,#0000 8px 13px),linear-gradient(160deg,#b98256,#94603a)}
.sq.last::before{content:"";position:absolute;inset:0;background:#ffd84a55}.sq.sel::before{content:"";position:absolute;inset:0;background:#4fd1c577}
.sq.hint::before{content:"";position:absolute;inset:0;background:#7bff7a77;animation:pulse 1s infinite}.sq.hintTo::before{content:"";position:absolute;inset:0;background:#7bff7a44}
.sq.wrong::before{content:"";position:absolute;inset:0;background:#ff3b3b88}
@keyframes pulse{50%{opacity:.4}}
.sq.chk::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,#ff3b3b 15%,#ff3b3b66 50%,transparent 72%)}
.sq.mv::after{content:"";position:absolute;width:26%;height:26%;background:#1a163066;border-radius:50%}
.sq.cap::after{content:"";position:absolute;inset:5%;border:calc(var(--sz)/150) solid #1a163066;border-radius:50%}
.sq .lbl{position:absolute;font-size:calc(var(--sz)/52);font-weight:800;opacity:.7;color:#3a2210;pointer-events:none;z-index:2}.sq.d .lbl{color:#f6e4c0}.sq .lbl.f{right:3px;bottom:1px}.sq .lbl.r{left:3px;top:1px}
.pc{position:relative;z-index:1;width:100%;height:100%;pointer-events:none;transform-origin:50% 88%}
body[data-set=classic] .pc{width:92%;height:92%}
.sq.sel .pc{animation:bob .9s ease-in-out infinite}
.drag{position:fixed;pointer-events:none;z-index:50;width:calc(var(--sz)/8);height:calc(var(--sz)/8);transform:translate(-50%,-55%) scale(1.25)}.drag .pc{filter:drop-shadow(0 8px 6px #0007)}
.player{overflow:hidden;display:flex;align-items:center;gap:8px;padding:5px 2px;min-height:38px}
.dot{width:12px;height:12px;border:2px solid #000;background:#555;flex:none;border-radius:50%}.dot.on{background:#5dff7a}
body[data-mode=solo] .dot,body[data-mode=puzzle] .dot{display:none}
.nm{font-weight:bold;flex:none;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* captured-piece tray: compact icons, fixed height, never grows into the board */
.caps{flex:1 1 0;min-width:0;height:26px;display:flex;flex-wrap:nowrap;align-items:center;overflow:hidden;font-size:13px;font-weight:bold;white-space:nowrap}
.player .caps .pc,body[data-set] .player .caps .pc{position:static;flex:none;width:24px!important;height:24px!important;max-width:24px;max-height:24px;margin-right:-9px;animation:none;transform:none}
.player .caps .pc:last-of-type{margin-right:4px}
@media(max-width:480px){.player .caps .pc,body[data-set] .player .caps .pc{width:20px!important;height:20px!important;max-width:20px;max-height:20px;margin-right:-8px}.caps{height:22px;font-size:12px}}
.clk{font-weight:bold;background:#0e0b20;padding:2px 8px;border:2px solid var(--ink);border-radius:6px}.clk:empty{display:none}.clk.run{color:var(--acc)}
aside{width:300px;display:flex;flex-direction:column;gap:10px}
.status{background:var(--panel);border:2px solid #f4ecd888;border-radius:10px;padding:10px;box-shadow:0 4px 0 #0008;font-weight:bold;min-height:2.6em}
.prompt{background:var(--acc);color:#1a1630;border-radius:10px;padding:10px;box-shadow:0 4px 0 #0008;font-weight:bold}
.prompt button{margin:6px 6px 0 0;background:#fff8e0;color:#1a1630;border-color:#000}
.puz{background:var(--panel);border-radius:10px;padding:10px;box-shadow:0 4px 0 #0008}.pzmsg{font-weight:800;margin:6px 0;font-size:1.1em}.pzmsg.bad{color:var(--bad)}.pzmsg.good{color:#7bff7a}
.tags{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}.tags span{background:var(--acc2);color:#102;border-radius:20px;padding:1px 8px;font-size:.85em;font-weight:700}
.puz a{color:var(--acc2)}
.actions{display:flex;flex-wrap:wrap;gap:8px}.actions button{flex:1 1 40%;font-size:.9em}
#moves{background:#0e0b20;border:2px solid #f4ecd855;border-radius:10px;margin:0;padding:8px 8px 8px 2.8em;max-height:40vh;overflow:auto;min-height:3em;font-family:ui-monospace,monospace}
#moves li{padding:1px 0}#moves li span{display:inline-block;width:6em}
.spec{opacity:.7;font-size:.85em;margin:0}
#promo{position:absolute;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;gap:8px;z-index:40}
#promo button{width:calc(var(--sz)/6);height:calc(var(--sz)/6);padding:4px;background:var(--lt)}#promo .pc{width:100%;height:100%}
#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--bad);color:#fff;padding:8px 14px;border-radius:10px;font-weight:bold;opacity:0;transition:opacity .3s;pointer-events:none;z-index:99}#toast.show{opacity:1}
.modal{position:fixed;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}.modal .box{width:min(420px,100%)}
@media(max-width:899px){.main{flex-direction:column;align-items:center}aside{width:var(--sz)}#moves{max-height:none;display:flex;flex-wrap:wrap;gap:0 10px;list-style-position:inside;padding:8px}#moves li span{width:auto;margin-right:6px}}
.skipzone{position:absolute;inset:0;z-index:35;cursor:pointer}
header .sm{white-space:nowrap}
[hidden]{display:none!important}