/* /play/ demo (logged out): scene + resource bar + people + controls, the config modal and the result modal */
/* demo-only tokens (base tokens live in play.css) */
:root{--res-water:#2f7fc4; --res-food:#b8741f; --res-morale:#b0408a; --res-mid:#d9962a; --tl-dr-bg:#f7e2c4; --tl-dr-bd:#ebc58e; --tl-dr-ink:#7a4f10; --tl-lab:#8f5716; --card-on:#faf5ff; --hover-line:#c9a6ee; --over-a:rgba(242,244,247,.25); --over-b:rgba(43,22,72,.45);}
:root[data-theme="dark"]{--res-water:#6fb1ec; --res-food:#e6a452; --res-morale:#e27ab8; --res-mid:#e6a93f; --tl-dr-bg:#3a2a14; --tl-dr-bd:#6e5028; --tl-dr-ink:#f0c078; --tl-lab:#f0b56a; --card-on:#241a3a; --hover-line:#6d51a0; --over-a:rgba(14,19,29,.2); --over-b:rgba(8,6,20,.6);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--res-water:#6fb1ec; --res-food:#e6a452; --res-morale:#e27ab8; --res-mid:#e6a93f; --tl-dr-bg:#3a2a14; --tl-dr-bd:#6e5028; --tl-dr-ink:#f0c078; --tl-lab:#f0b56a; --card-on:#241a3a; --hover-line:#6d51a0; --over-a:rgba(14,19,29,.2); --over-b:rgba(8,6,20,.6);}}
.demo{display:grid;gap:14px}
.dm-head h1{margin:.1rem 0 .3rem;font-size:1.55rem;line-height:1.45}
.dm-head p{margin:0;color:var(--ink2);font-size:.92rem;max-width:760px}
.dm-kicker{display:inline-block;font-size:.74rem;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:.08rem .7rem}
.dm-card{padding:0;overflow:hidden}
.dm-hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.dm-res{background:var(--surface);padding:10px 12px 9px;display:grid;gap:2px;min-width:0}
.dm-res .lb{display:flex;align-items:center;gap:5px;font-size:.76rem;font-weight:700;color:var(--ink2)}
.dm-res b{font-size:1.45rem;line-height:1.2;font-variant-numeric:tabular-nums}
.dm-res small{font-size:.7rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-res .bar{display:block;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.dm-res .bar s{display:block;height:100%;width:0;border-radius:3px;background:currentColor;transition:width .25s}
.dm-water{color:var(--res-water)}.dm-food{color:var(--res-food)}.dm-morale{color:var(--res-morale)}
.dm-res b,.dm-res small{color:var(--ink)}.dm-res small{color:var(--muted)}
.dm-res .bar s.mid{background:var(--res-mid)}.dm-res .bar s.lo{background:var(--bad)}
.dm-res .tr{font-weight:700}.dm-res .tr.up{color:var(--good)}.dm-res .tr.down{color:var(--bad)}
.dm-score{background:linear-gradient(160deg,#2b1648,#5a1f96);color:#fff}
.dm-score .lb,.dm-score small{color:#e3d4fb}.dm-score b{color:#fff;font-size:1.6rem}
.dm-time{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.dm-clock{font-weight:700;font-size:.86rem;font-variant-numeric:tabular-nums;min-width:9.5rem}
.dm-speed{font:700 .74rem Vazirmatn,sans-serif;color:var(--gold-ink);background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:999px;padding:0 .55rem}
.dm-tl{position:relative;flex:1 1 260px;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:2px;padding-top:15px}
.dm-tl span{position:relative;z-index:1;height:16px;border-radius:4px;background:var(--surface2);border:1px solid var(--line);font-size:.62rem;line-height:14px;text-align:center;color:var(--muted)}
.dm-tl span.dr{background:var(--tl-dr-bg);border-color:var(--tl-dr-bd);color:var(--tl-dr-ink)}
.dm-tl .fill{position:absolute;z-index:2;right:0;bottom:0;height:16px;width:0;border-radius:4px;background:rgba(117,0,207,.22);box-shadow:inset -2px 0 0 var(--accent);pointer-events:none}
.dm-tl .lab{position:absolute;top:-1px;right:30%;width:40%;text-align:center;font-style:normal;font-size:.64rem;font-weight:700;color:var(--tl-lab);white-space:nowrap}
.dm-stage{position:relative;background:var(--scene-sky0)}
.dm-stage canvas{display:block;width:100%}
.dm-toast{position:absolute;top:10px;left:50%;transform:translate(-50%,-8px);max-width:calc(100% - 24px);background:rgba(28,36,51,.9);color:#fff;font-size:.84rem;font-weight:700;border-radius:12px;padding:.35rem .9rem;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;text-align:center}
.dm-toast.on{opacity:1;transform:translate(-50%,0)}
.dm-toast.warn{background:rgba(138,78,12,.96)}.dm-toast.bad{background:rgba(176,56,46,.94)}.dm-toast.good{background:rgba(38,120,70,.94)}
.dm-over{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,var(--over-a),var(--over-b));padding:16px}
.dm-over .in{background:var(--surface);color:var(--ink);border-radius:18px;padding:16px 18px;text-align:center;box-shadow:var(--shadow);max-width:420px;display:grid;gap:6px}
.dm-over b{font-size:1.15rem}.dm-over span{font-size:.82rem;color:var(--ink2)}
.dm-over .row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:6px}
.dm-people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.dm-p{display:flex;gap:8px;align-items:center;min-width:0;background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:6px 8px}
.dm-p .av{width:44px;height:44px;flex:none;border-radius:50%}
.dm-p .bd{display:grid;min-width:0;flex:1;gap:1px}
.dm-p b{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dm-p b small{font-weight:400;color:var(--muted);font-size:.7rem}
.dm-p .act{font-size:.74rem;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-p .mt{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.dm-p .mt i{display:block;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.dm-p .mt s{display:block;height:100%;background:var(--good);transition:width .25s}.dm-p .mt s.lo{background:var(--bad)}.dm-p .mt i.m s{background:var(--res-morale)}
.dm-p.dead{opacity:.6}.dm-p.dead .act{color:var(--bad);font-weight:700}
.dm-legend{margin:0;padding:0 12px 8px;font-size:.72rem;color:var(--muted);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.dm-legend i{display:inline-block;width:14px;height:5px;border-radius:3px;background:var(--good)}.dm-legend i.m{background:var(--res-morale);margin-inline-start:6px}
.dm-ctrl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px 12px;border-top:1px solid var(--line)}
.dm-ctrl .sp{flex:1}.dm-best{font-size:.78rem;color:var(--muted);font-weight:700}
.dm-live{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:.82rem;color:var(--ink2)}
.dm-live b{color:var(--ink)}
/* ---- dialogs ---- */
dialog.dmdlg{padding:0;width:min(820px,calc(100vw - 24px));max-height:calc(100dvh - 24px);border-radius:20px;overflow:hidden}
dialog.dmres{width:min(480px,calc(100vw - 24px))}
.dmc{display:flex;flex-direction:column;max-height:calc(100dvh - 24px)}
.dmc-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.dmc-hd h2{margin:0;font-size:1.05rem}.dmc-hd .sp{flex:1}
.dmc-hd .seg button:disabled{opacity:.45;cursor:not-allowed}
.dmc-x{border:0;background:none;font-size:1.05rem;color:var(--muted);cursor:pointer;border-radius:8px;padding:.2rem .5rem}.dmc-x:hover{background:var(--surface2)}
.dmc-bd{overflow-y:auto;padding:12px 16px;flex:1;min-height:0}
.dmc-lead{margin:0 0 6px;font-size:.86rem;color:var(--ink2)}
.dmc-msg{margin:0 0 6px;min-height:1.3em;font-size:.8rem;font-weight:700;color:var(--warn)}
.dmc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dmc-card{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"av nm" "sk sk" "nt nt";gap:4px 10px;text-align:start;font:inherit;color:inherit;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:9px 10px;cursor:pointer}
.dmc-card:hover{border-color:var(--hover-line)}
.dmc-card.on{border-color:var(--accent);background:var(--card-on);box-shadow:0 0 0 3px rgba(117,0,207,.12)}
.dmc-card .av{grid-area:av;width:44px;height:44px;border-radius:50%}
.dmc-card .nm{grid-area:nm;display:grid;align-content:center;min-width:0}.dmc-card .nm b{font-size:.9rem}.dmc-card .nm small{font-size:.72rem;color:var(--muted)}
.dmc-card .sk{grid-area:sk;display:flex;flex-wrap:wrap;gap:3px 12px}
.dmc-card .b{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;color:var(--ink2)}.dmc-card .b em{font-style:normal;min-width:2.4em}
.dots{display:inline-flex;gap:2px}.dots i{width:7px;height:7px;border-radius:2px;background:var(--line2)}.dots i.on{background:var(--accent)}
.dmc-card .nt{grid-area:nt;font-size:.72rem;color:var(--muted);line-height:1.6}
.dmc-card .ck{position:absolute;top:8px;inset-inline-end:10px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;color:transparent;background:var(--line2)}
.dmc-card.on .ck{background:var(--accent-strong);color:#fff}
.dmc-card:focus-visible,.opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.dmc-per{border:1px solid var(--line);border-radius:14px;padding:8px 12px 10px;margin:0 0 10px;min-width:0}
.dmc-per legend{display:flex;align-items:center;gap:8px;padding:0 6px}
.dmc-per legend .av{width:36px;height:36px;border-radius:50%}
.dmc-per legend span{display:grid}.dmc-per legend b{font-size:.92rem}.dmc-per legend small{font-size:.72rem;color:var(--muted)}
.dmc-g{display:grid;gap:4px;margin-top:6px}
.dmc-g .gt{font-size:.78rem;font-weight:700;color:var(--ink2)}
.dmc-g .opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{position:relative;cursor:pointer}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{display:inline-block;font-size:.8rem;font-weight:700;color:var(--ink2);background:var(--surface2);border:1px solid var(--line2);border-radius:999px;padding:.26rem .8rem}
.opt input:checked+span{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}
.opt:hover span{border-color:var(--hover-line)}
.dmc-g .hint{font-size:.72rem;color:var(--muted);min-height:1.2em}
.dmc-ft{display:flex;align-items:center;gap:8px;padding:10px 16px 14px;border-top:1px solid var(--line);flex-wrap:wrap}
.dmc-ft .sp{flex:1}
.dmr{display:grid}
.dmr-hd{padding:16px 20px 12px;color:#fff;background:linear-gradient(160deg,#2b1648,#5a1f96)}
.dmr-hd.good{background:linear-gradient(160deg,#1f5a3a,#2f8a4f)}.dmr-hd.bad{background:linear-gradient(160deg,#5a1f2a,#b0463c)}.dmr-hd.mid{background:linear-gradient(160deg,#5a3a10,#b8741f)}
.dmr-hd .k{font-size:.74rem;font-weight:700;opacity:.85}.dmr-hd h2{margin:.1rem 0 0;font-size:1.3rem}
.dmr-st{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:14px 18px 4px}
.dmr-st div{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:.4rem;text-align:center}
.dmr-st b{display:block;font-size:1.3rem;font-variant-numeric:tabular-nums}.dmr-st small{font-size:.7rem;color:var(--muted)}
.dmr-st .sc{background:var(--accent-soft);border-color:var(--accent-line)}.dmr-st .sc b{color:var(--accent)}
.dmr p{margin:.45rem 18px 0;font-size:.88rem;color:var(--ink2)}
.dmr .tip{background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:12px;padding:.45rem .7rem;color:var(--gold-ink)}
.dmr .rule,.dmr .bridge{font-size:.76rem;color:var(--muted)}
.dmr .btn.xl{margin:12px 18px 0;width:calc(100% - 36px)}
.dmr .row{display:flex;flex-wrap:wrap;gap:8px;padding:10px 18px 16px}.dmr .row .sp{flex:1}
@media (min-width:900px){.dmc-pers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start}.dmc-per{margin:0}}
@media (max-width:760px){
  .dm-head h1{font-size:1.25rem}
  .dm-hud{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dm-res{padding:7px 7px 6px}.dm-res .lb{font-size:.7rem;gap:3px}.dm-res .lb svg{width:13px;height:13px}
  .dm-res b,.dm-score b{font-size:1.08rem}.dm-res small{font-size:.62rem}.dm-res .tr .u,.dm-score small{display:none}
  .dm-people{gap:6px;padding:8px}
  .dm-p{flex-direction:column;align-items:stretch;text-align:center;padding:6px;gap:4px}
  .dm-p .av{width:34px;height:34px;align-self:center}
  .dm-p b small{display:none}.dm-p .act{white-space:normal;font-size:.68rem;line-height:1.5;min-height:2em}
  .dm-toast{font-size:.76rem;top:6px}
  .dmc-grid{grid-template-columns:1fr}
  .dm-tl .lab{right:25%;width:50%}
}
@media (max-width:420px){.dm-res b{font-size:1.2rem}.dm-ctrl .btn{padding:.45rem .7rem}.dm-best{flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.dm-toast,.dm-res .bar s,.dm-p .mt s{transition:none}}