/* ---------- sandbox ---------- */
#sec-sandbox{flex-direction:column}
#orderbar{display:flex;gap:10px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--panel2);min-height:52px}
#orderbar .lbl{color:var(--dim);font-size:10px;letter-spacing:.12em;margin-right:4px;flex-shrink:0}
.echips{display:flex;gap:8px;align-items:center;flex-shrink:0}
/* player party: floating panel over the battlefield */
#pparty{position:absolute;left:12px;top:10px;z-index:4;display:none;flex-direction:column;gap:10px;padding:10px;background:rgba(11,14,23,.78);border:1px solid var(--line)}
#pparty.on{display:flex}
.prow{display:flex;align-items:center;gap:9px}
.prow .chip{width:40px;height:40px;font-size:19px;flex-shrink:0}
.phb{width:74px;height:6px;background:#3a2030;border:1px solid rgba(7,9,15,.9);position:relative}
.phb i{display:block;height:100%;background:var(--acid)}
.phb em{position:absolute;inset:0;pointer-events:none}
.prow.off .phb i{background:#556}
/* battle log */
#blogToggle{position:absolute;right:12px;bottom:10px;z-index:4;background:rgba(11,14,23,.85);border:1px solid var(--line);color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:5px 12px;cursor:pointer}
#blogToggle:hover{color:var(--sky);border-color:var(--sky)}
#blog{position:absolute;right:12px;bottom:40px;width:280px;max-height:46%;display:none;flex-direction:column;background:rgba(11,14,23,.9);border:1px solid var(--line);z-index:4}
#blog.on{display:flex}
#blogBody{overflow-y:auto;padding:7px 10px;font-size:11px;line-height:1.75;color:var(--text)}
.ble{white-space:normal}
.ble.rnd{color:var(--sky);letter-spacing:.08em;margin-top:2px}
.ble.dim{color:var(--dim)}
.chip{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;border:2px solid var(--line);position:relative;opacity:.85}
.chip.player{border-color:var(--acid)}
.chip.enemy{border-color:var(--threat)}
.chip.cur{opacity:1;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--sky);transform:scale(1.1)}
.chip.hoverable{cursor:help}
.chip.hoverable:hover{opacity:1;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--threat)}
.chip.done{opacity:.28;filter:grayscale(.85)}
.chip.dead{opacity:.12;filter:grayscale(1)}
.chip .hpq{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);font-size:9px;background:var(--bg);padding:0 3px;color:var(--dim)}
.chip .stq{position:absolute;top:-7px;right:-7px;font-size:11px}
#roundlbl{margin-left:auto;color:var(--dim);font-size:11px;letter-spacing:.1em;align-self:center}
#sbstage{flex:1;position:relative;background:radial-gradient(ellipse at 50% 30%, rgba(95,199,224,.06), transparent 60%),var(--bg);overflow:hidden}
#sbstage canvas{position:absolute;inset:0;width:100%;height:100%}
#actionbar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line);background:var(--panel2);min-height:64px}
#curinfo{display:flex;align-items:center;gap:10px;min-width:220px}
#curinfo .ic{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px}
#curinfo .st{font-size:11px;color:var(--dim);line-height:1.5}
#abbar{display:flex;gap:8px;flex:1}
.abbtn{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--panel);border:1px solid var(--line);padding:5px 10px;cursor:pointer;min-width:64px}
.abbtn .aic{font-size:18px}
.abbtn .anm{font-size:10px;color:var(--dim);max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.abbtn:hover{border-color:var(--sky)}
.abbtn.sel{border-color:var(--sky);background:#12222b}
.abbtn.off{opacity:.35;pointer-events:none}
#turnbtns{display:flex;flex-direction:column;gap:5px;flex-shrink:0}
#endturn{background:var(--panel);border:1px solid var(--threat);color:var(--threat);font-family:var(--mono);font-weight:700;letter-spacing:.08em;padding:9px 20px;cursor:pointer}
#endturn:hover{background:var(--threat);color:var(--bg)}
#undomove{background:var(--panel);border:1px solid var(--sky);color:var(--sky);font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.08em;padding:6px 20px;cursor:pointer}
#undomove:hover:not(:disabled){background:var(--sky);color:var(--bg)}
#undomove:disabled{opacity:.3;border-color:var(--line);color:var(--dim);cursor:default}
#sbmsg{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:rgba(11,14,23,.85);border:1px solid var(--line);padding:6px 14px;font-size:12px;color:var(--sky);pointer-events:none;z-index:3;white-space:nowrap}
#tagtip{position:fixed;display:none;background:rgba(11,14,23,.94);border:1px solid var(--line);padding:8px 10px;font-size:11px;line-height:1.5;color:var(--text);pointer-events:none;z-index:60;max-width:240px;box-shadow:0 6px 20px rgba(0,0,0,.55)}
#tagtip .tt2{color:var(--dim);margin-top:3px}

/* game over overlay */
#overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:18px;background:rgba(7,9,15,.82);z-index:10}
#overlay.on{display:flex}
#overlay .big{font-size:42px;font-weight:700;letter-spacing:.2em}
#overlay .big.win{color:var(--acid);text-shadow:0 0 30px rgba(168,224,95,.4)}
#overlay .big.lose{color:var(--threat);text-shadow:0 0 30px rgba(255,93,115,.4)}
#overlay button{background:none;border:1px solid var(--text);color:var(--text);font-family:var(--mono);font-size:14px;padding:10px 26px;cursor:pointer;letter-spacing:.1em}
#overlay button:hover{border-color:var(--acid);color:var(--acid)}