:root{
  --bg:#f4f4f5; --surface:#ffffff; --ink:#27272a; --muted:#63636b; --line:#d4d4d8;
  --lilac:#8a5cd6; --lilac-soft:#f3edfc; --gold:#c98a12; --gold-soft:#fff3d6;
  --poison:#3f8a5a; --poison-soft:#e2f3e8; --warn:#c2410c; --warn-soft:#fde8dc;
  --cell:#ffffff; --cell-move:#ffffff; --cell-q:#ffffff; --cell-start:#27272a; --cell-start-ink:#fff;
  --t100:#ffffff; --t100i:#71717a; --t300:#ffffff; --t300i:#0e7490; --t400:#ffffff; --t400i:#1d4ed8;
  --t600:#ffffff; --t600i:#7e22ce; --movei:#15803d;
  color-scheme: light;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#18181b; --surface:#232326; --ink:#ececee; --muted:#a1a1aa; --line:#3f3f46;
    --lilac:#b48cf2; --lilac-soft:#2e2838; --gold:#f2b84b; --gold-soft:#3d3018;
    --poison:#7fd29b; --poison-soft:#1f3a2a; --warn:#fb8a5c; --warn-soft:#41231a;
    --cell:#232326; --cell-move:#232326; --cell-q:#232326; --cell-start:#ececee; --cell-start-ink:#18181b;
    --t100:#232326; --t100i:#a1a1aa; --t300:#232326; --t300i:#5fc4dc; --t400:#232326; --t400i:#8fb0ff;
    --t600:#232326; --t600i:#d4a5ff; --movei:#7dd3a8;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#18181b; --surface:#232326; --ink:#ececee; --muted:#a1a1aa; --line:#3f3f46;
  --lilac:#b48cf2; --lilac-soft:#2e2838; --gold:#f2b84b; --gold-soft:#3d3018;
  --poison:#7fd29b; --poison-soft:#1f3a2a; --warn:#fb8a5c; --warn-soft:#41231a;
  --cell:#232326; --cell-move:#232326; --cell-q:#232326; --cell-start:#ececee; --cell-start-ink:#18181b;
  --t100:#232326; --t100i:#a1a1aa; --t300:#232326; --t300i:#5fc4dc; --t400:#232326; --t400i:#8fb0ff;
  --t600:#232326; --t600i:#d4a5ff; --movei:#7dd3a8;
  color-scheme: dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif;line-height:1.6}
main{max-width:1120px;margin:0 auto;padding:20px 16px 48px}
h1{font-size:1.6rem;font-weight:900;margin:0 0 2px;letter-spacing:.02em}
.sub{color:var(--muted);margin:0 0 18px;font-size:.95rem}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--lilac);outline-offset:2px}

.drop{border:2px dashed var(--lilac);background:var(--lilac-soft);border-radius:18px;padding:16px 18px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.drop.over{background:var(--surface)}
.drop .msg{flex:1;min-width:220px}
.drop .msg b{display:block;font-size:1.05rem}
.drop .msg span{color:var(--muted);font-size:.9rem}
.drop img{max-height:84px;max-width:140px;border-radius:8px;border:1px solid var(--line)}
.btn{border:0;border-radius:999px;padding:9px 18px;font-weight:700;background:var(--lilac);color:#fff}
.btn.ghost{background:transparent;color:var(--lilac);border:2px solid var(--lilac)}
.btn:disabled{opacity:.5;cursor:default}
.rawbox{margin:4px 2px 0;font-size:.82rem;color:var(--muted)}
.rawbox textarea{display:block;width:100%;margin-top:6px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px;font-size:.75rem;font-family:ui-monospace,Consolas,monospace}
.rawbox .btn{margin-top:6px;padding:4px 14px;font-size:.85rem}
.share{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:12px;padding:12px;border:1.5px solid var(--line);border-radius:16px;background:var(--surface)}
.share[hidden]{display:none}
.share video{width:220px;max-width:100%;border-radius:10px;background:#000}
.shareCtl{display:flex;flex-direction:column;gap:8px;flex:1;min-width:220px;align-items:flex-start;font-size:.92rem}
.shareCtl .note{margin:0}
.cell.est{border-style:dashed;border-color:var(--warn)}
footer{margin-top:28px;font-size:.78rem;color:var(--muted)}
.status{min-height:1.6em;margin:10px 2px 0;font-size:.92rem;color:var(--muted)}
.status.err{color:var(--warn)}

.layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;margin-top:18px;align-items:start}
@media (max-width:860px){.layout{grid-template-columns:1fr}}

.boardwrap{overflow-x:auto}
.board{display:grid;grid-template-columns:repeat(11,minmax(30px,1fr));grid-template-rows:repeat(11,minmax(30px,auto));gap:3px;min-width:340px;aspect-ratio:1}
.cell{position:relative;border:1.5px solid var(--line);background:var(--cell);border-radius:7px;padding:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:clamp(.56rem,1.3vw,.78rem);font-weight:700;line-height:1.15;text-align:center;min-height:0}
.cell.move{background:var(--cell-move);color:var(--movei)}
.cell.question{background:var(--cell-q);color:var(--t300i)}
.cell.t100{background:var(--t100);color:var(--t100i)}
.cell.t300{background:var(--t300);color:var(--t300i)}
.cell.t400{background:var(--t400);color:var(--t400i)}
.cell.t600{background:var(--t600);color:var(--t600i)}
.cell.start{background:var(--cell-start);color:var(--cell-start-ink);border-color:var(--cell-start)}
.cell .v{font-size:1.08em}
.cell .tags{font-size:.86em;display:flex;gap:2px;flex-wrap:wrap;justify-content:center}
.cell.golden{border:2.5px solid var(--gold);background:var(--gold-soft)}
.cell.homunculus{border:2.5px solid var(--poison);background:var(--poison-soft)}
.cell.mystic{border:2.5px solid var(--lilac);background:var(--lilac-soft)}
.cell .was{font-size:.78em;text-decoration:line-through;text-decoration-color:var(--warn);color:var(--muted)}
.cell .mon{position:absolute;top:-10px;left:-7px;font-size:1.25rem;line-height:1;z-index:2;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.cell.prev{border-style:dashed}
.cell.check{border-color:var(--warn);background:var(--warn-soft)}
.cell.here::after{content:"";position:absolute;inset:-4px;border-radius:10px;border:3px solid var(--lilac);pointer-events:none}
.cell .step{position:absolute;top:-8px;right:-6px;background:var(--lilac);color:#fff;border-radius:999px;font-size:.78rem;min-width:1.4em;height:1.4em;display:grid;place-items:center;padding:0 3px;z-index:2}
.cell button.hit{position:absolute;inset:0;background:none;border:0;border-radius:7px}
.center{grid-column:2/11;grid-row:2/11;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:8px}
.dice{display:flex;gap:10px}
.die{display:flex;flex-direction:column;align-items:center;gap:3px}
.die input{width:3.1em;height:3.1em;text-align:center;font-size:1.35rem;font-weight:900;border-radius:12px;border:2px solid var(--lilac);background:var(--surface)}
.die label{font-size:.75rem;color:var(--muted)}
.minirow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center;font-size:.88rem}
.minirow input[type=number]{width:4.2em;padding:3px 6px;border-radius:8px;border:1.5px solid var(--line);background:var(--surface)}
.legend{font-size:.8rem;color:var(--muted);margin-top:8px;display:flex;gap:12px;flex-wrap:wrap}
.center .hint{font-size:.74rem;color:var(--muted);margin:-4px 0 0;max-width:24em;text-align:center;line-height:1.45}
.minirow input:disabled{opacity:.75}

.panel{background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:16px 18px}
.panel h2{font-size:1.1rem;margin:0 0 10px}
.orders{display:flex;flex-direction:column;gap:6px}
.order{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;border:1.5px solid transparent;background:var(--cell);text-align:left;width:100%}
.order.sel{border-color:var(--lilac)}
.order .seq{font-weight:900;font-size:1.05rem;white-space:nowrap}
.order .chips{display:flex;gap:4px;flex-wrap:wrap;font-size:.8rem}
.order .chip{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:0 6px}
.order .tot{font-weight:900;font-size:1.1rem;text-align:right;white-space:nowrap}
.order .tot small{display:block;font-size:.72rem;font-weight:700;color:var(--muted)}
.best-tag{font-size:.72rem;background:var(--lilac);color:#fff;border-radius:999px;padding:0 7px;margin-left:6px;vertical-align:2px}
.verdict{border-radius:12px;padding:10px 12px;background:var(--lilac-soft);margin-bottom:10px}
.verdict b{font-size:1.02rem}
table{width:100%;border-collapse:collapse;font-size:.86rem}
th,td{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left}
td.n,th.n{text-align:right}
.note{font-size:.8rem;color:var(--muted);margin:8px 0 0}
.stack{display:flex;flex-direction:column;gap:16px}

dialog{border:1.5px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);padding:0;max-width:340px;width:92vw}
dialog form{padding:18px}
dialog::backdrop{background:rgba(20,10,40,.45)}
dialog h3{margin:0 0 10px}
dialog .f{display:grid;grid-template-columns:7em 1fr;gap:8px;align-items:center;margin-bottom:8px;font-size:.92rem}
dialog input,dialog select{padding:4px 8px;border-radius:8px;border:1.5px solid var(--line);background:var(--bg)}
dialog .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}
@media (prefers-reduced-motion:no-preference){.order{transition:border-color .15s}}