/* Sandbox-only surfaces (battlev3.html?sandbox=...); shared battle styling is untouched. */
#sbx-panel, #sbx-panel-toggle, #sbx-end, #sbx-turn-timer {
    --sbx-gold:#e3c893; --sbx-ice:#99caff; --sbx-red:#ff8a8a; --sbx-line:#849cb43b;
    --sbx-bg:#0b1424f5; --sbx-card:#12203a; --sbx-text:#f5f6fc; --sbx-muted:#9fb1cc;
    color:var(--sbx-text); font-family:Outfit,Montserrat,sans-serif; box-sizing:border-box;
}
#sbx-panel *, #sbx-end * { box-sizing:border-box; }
.sbx-eyebrow { color:var(--sbx-gold); letter-spacing:.18em; font-size:10px; font-weight:600; }
.sbx-muted { color:var(--sbx-muted); font-size:12px; }

#sbx-panel select, #sbx-panel input[type="number"] {
    width:100%; min-width:0; background:#081120; color:var(--sbx-text); border:1px solid #849cb466; border-radius:6px; padding:6px 8px; font:inherit; font-size:13px;
}

/* ---------- In-battle panel ---------- */
#sbx-panel-toggle {
    position:fixed; right:0; top:50%; z-index:960; transform:translateY(-50%);
    writing-mode:vertical-rl; padding:16px 8px; border:1px solid #e3c89366; border-right:0; border-radius:10px 0 0 10px;
    background:linear-gradient(180deg,#17294a,#0c1629); color:var(--sbx-gold); font:700 11px Outfit,sans-serif; letter-spacing:.3em; cursor:pointer;
    box-shadow:-6px 0 20px #0006; transition:right .25s ease;
}
#sbx-panel-toggle:hover { color:#fff; }
#sbx-panel-toggle.sbx-open { right:min(400px,100vw); }
#sbx-panel {
    position:fixed; top:0; right:0; bottom:0; z-index:959; width:min(400px,100vw);
    display:flex; flex-direction:column; background:var(--sbx-bg); border-left:1px solid var(--sbx-line);
    box-shadow:-14px 0 40px #0008; backdrop-filter:blur(8px);
    transform:translateX(100%); visibility:hidden; transition:transform .25s ease, visibility .25s;
}
#sbx-panel.sbx-open { transform:none; visibility:visible; }
@media (max-width:480px) { #sbx-panel-toggle.sbx-open { right:calc(100vw - 34px); } }
.sbx-panel-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--sbx-line); }
.sbx-panel-head h3 { margin:4px 0 0; font-size:17px; font-weight:600; }
.sbx-panel-body { flex:1; overflow-y:auto; padding:10px 12px 40px; scrollbar-width:thin; scrollbar-color:#607695 transparent; }
.sbx-section { border:1px solid var(--sbx-line); border-radius:10px; margin-bottom:8px; background:#101d34b3; }
.sbx-section > summary { cursor:pointer; padding:11px 14px; font-weight:600; font-size:14px; list-style:none; display:flex; align-items:center; gap:8px; }
.sbx-section > summary::-webkit-details-marker { display:none; }
.sbx-section > summary::before { content:'▸'; color:var(--sbx-gold); transition:transform .15s; }
.sbx-section[open] > summary::before { transform:rotate(90deg); }
.sbx-section-body { padding:4px 14px 14px; display:grid; gap:8px; }
.sbx-section-body h5 { margin:8px 0 0; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--sbx-gold); font-weight:600; }
.sbx-section-body h5 small { text-transform:none; letter-spacing:0; color:var(--sbx-muted); font-weight:400; }
.sbx-badge { margin-left:auto; font-size:10px; background:#e3c89326; color:var(--sbx-gold); border:1px solid #e3c89366; padding:2px 7px; border-radius:99px; font-weight:600; }
.sbx-note { margin:0; font-size:12px; color:var(--sbx-muted); line-height:1.5; }
.sbx-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sbx-row > label:not(.sbx-check) { display:grid; gap:3px; flex:1 1 100%; font-size:12px; color:var(--sbx-muted); }
.sbx-row-split > * { flex:1 1 0 !important; min-width:0; }
.sbx-inline { display:grid; gap:3px; width:100%; }
.sbx-label { font-size:12px; color:var(--sbx-muted); min-width:38px; }
.sbx-check { display:flex; gap:8px; align-items:center; font-size:13px; cursor:pointer; }
.sbx-check input { accent-color:var(--sbx-gold); width:16px; height:16px; }
.sbx-range input[type="range"] { flex:1; accent-color:var(--sbx-gold); min-width:80px; }
.sbx-range input[type="number"] { flex:1; }
.sbx-range output { font-size:12px; min-width:74px; text-align:right; color:#dbe5f5; font-variant-numeric:tabular-nums; }
.sbx-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 12px; border-radius:7px; border:1px solid #849cb466; background:#162845; color:var(--sbx-text); font:500 13px Outfit,sans-serif; cursor:pointer; text-decoration:none; text-align:center; }
.sbx-btn:hover:not(:disabled) { border-color:var(--sbx-gold); }
.sbx-btn:disabled { opacity:.4; cursor:default; }
.sbx-btn-primary { background:linear-gradient(180deg,#f3dba8,#c9a25c); color:#1b1307; border:0; font-weight:700; width:100%; }
.sbx-btn-danger { border-color:#ff8a8a66; color:#ffc1c1; }
.sbx-btn-small { padding:6px 10px; font-size:12px; }
.sbx-icon-btn { background:none; border:1px solid var(--sbx-line); color:var(--sbx-text); width:30px; height:30px; border-radius:6px; cursor:pointer; font-size:18px; line-height:1; flex:none; }
.sbx-icon-btn:disabled { opacity:.3; cursor:default; }
.sbx-seg { display:flex; flex:1; border:1px solid #849cb466; border-radius:7px; overflow:hidden; }
.sbx-seg button { flex:1; padding:7px 0; background:#0d1a30; color:var(--sbx-text); border:0; border-right:1px solid #849cb433; font:600 13px Outfit,sans-serif; cursor:pointer; }
.sbx-seg button:last-child { border-right:0; }
.sbx-seg button.is-active { background:var(--sbx-gold); color:#1b1307; }
.sbx-team-block h4 { margin:6px 0; font-size:13px; font-weight:600; }
.sbx-team-slot { display:grid; grid-template-columns:1fr 1fr 30px; gap:5px; margin-bottom:8px; padding:8px; border:1px solid var(--sbx-line); border-radius:8px; }
.sbx-team-slot select[data-team-field="heroId"] { grid-column:1 / 3; }
.sbx-team-slot .sbx-icon-btn { grid-column:3; grid-row:1; }
.sbx-hero-head { display:flex; gap:10px; align-items:center; }
.sbx-hero-head img { width:44px; height:44px; border-radius:8px; object-fit:cover; border:1px solid var(--sbx-line); }
.sbx-hero-head div { display:grid; }
.sbx-hero-head small { color:var(--sbx-muted); font-size:12px; }
.sbx-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.sbx-stat-grid label { display:grid; gap:3px; font-size:11px; color:var(--sbx-muted); }
.sbx-stat-grid label.is-overridden { color:var(--sbx-gold); }
.sbx-stat-grid label.is-overridden input { border-color:#e3c893aa; }
.sbx-effect-add { flex-wrap:nowrap; }
.sbx-effect-add select { flex:2; }
.sbx-effect-add input { flex:0 0 64px; width:64px !important; }
.sbx-effect-add .sbx-btn { flex:none; }
.sbx-chips, .sbx-effects { display:flex; flex-wrap:wrap; gap:5px; }
.sbx-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 4px 3px 3px; border:1px solid var(--sbx-line); border-radius:99px; background:#0d1a30; font-size:12px; }
.sbx-chip img { width:20px; height:20px; border-radius:50%; object-fit:cover; }
.sbx-chip.is-debuff { border-color:#ff8a8a55; }
.sbx-chip.is-buff { border-color:#8affb455; }
.sbx-chip button { background:none; border:0; color:var(--sbx-muted); cursor:pointer; font-size:14px; line-height:1; padding:0 3px; }
.sbx-chip button:hover { color:var(--sbx-red); }
.sbx-order { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.sbx-order li { display:grid; grid-template-columns:28px 1fr 26px 26px; gap:6px; align-items:center; padding:4px 6px; border-radius:7px; border:1px solid var(--sbx-line); border-left:3px solid var(--sbx-ice); font-size:13px; }
.sbx-order li.is-enemy { border-left-color:var(--sbx-red); }
.sbx-order li.is-current { background:#e3c8931f; border-color:#e3c89399; }
.sbx-order li.is-done { opacity:.45; }
.sbx-order li img { width:28px; height:28px; border-radius:6px; object-fit:cover; }
.sbx-order li span { display:flex; justify-content:space-between; gap:6px; min-width:0; }
.sbx-order li small { color:var(--sbx-muted); }
.sbx-order li button { height:26px; background:#0d1a30; border:1px solid var(--sbx-line); color:var(--sbx-text); border-radius:5px; cursor:pointer; }
.sbx-order li button:disabled { opacity:.25; cursor:default; }

/* ---------- Timer + end overlay ---------- */
#sbx-turn-timer { position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:958; padding:6px 16px; border-radius:99px; background:#0b1424e6; border:1px solid #e3c89388; color:var(--sbx-gold); font:700 15px Outfit,sans-serif; font-variant-numeric:tabular-nums; pointer-events:none; }
#sbx-turn-timer.sbx-timer-low { color:#ffb0b0; border-color:#ff8a8a; }
#sbx-turn-timer[hidden], #sbx-end[hidden] { display:none; }
#sbx-end { position:fixed; inset:0; z-index:970; display:grid; place-items:center; background:#02060dc4; padding:16px; }
.sbx-end-box { width:min(460px,100%); text-align:center; background:#0c182c; border:1px solid #e3c89366; border-radius:14px; padding:26px 22px; box-shadow:0 30px 80px #000a; }
.sbx-end-box h2 { margin:10px 0; font-size:26px; font-weight:600; }
.sbx-end-box p { color:var(--sbx-muted); margin:0 0 18px; line-height:1.5; }
.sbx-end-actions { display:grid; gap:8px; }