/* Townduel layout + themes (data-skin on <html>). (c) 2026 CyberMax. */
:root{--td-a:#1B2A4A;--td-b:#2C4A7A;--td-ink:#fff;--td-hi:#FFC845;--td-ok:#2FD3A0;--td-bad:#FF5C5C}
:root[data-skin=prairie]{--td-a:#3A2A14;--td-b:#7A5A26;--td-hi:#FFE08A}
:root[data-skin=coast]{--td-a:#0B3C49;--td-b:#118A92;--td-hi:#FFD6A5}
:root[data-skin=neon]{--td-a:#220B3A;--td-b:#5B1A8C;--td-hi:#5CF2FF}
:root[data-skin=paper]{--td-a:#EDE6D6;--td-b:#D9CDB4;--td-ink:#11141B;--td-hi:#E2581F}
.headline h1 .num{color:var(--muted);font-weight:700;font-size:.62em}
.tag{margin:0 0 12px}
.arena{margin-top:14px;background:linear-gradient(160deg,var(--td-a),var(--td-b));color:var(--td-ink);border-radius:24px;padding:18px 14px 16px;box-shadow:var(--shadow);min-height:360px;display:flex;flex-direction:column}
.dots{display:flex;gap:6px;justify-content:center}.dots i{width:22px;height:8px;border-radius:4px;background:rgba(255,255,255,.22)}
.dots i.ok{background:var(--td-ok)}.dots i.bad{background:var(--td-bad)}.dots i.cur{background:var(--td-hi)}
:root[data-skin=paper] .dots i{background:rgba(0,0,0,.15)}
.q{font-size:clamp(22px,5.6vw,30px);font-weight:900;text-align:center;margin:16px 0 14px;letter-spacing:-.01em;text-wrap:balance}
.duel{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch;flex:1}
.vs{align-self:center;font-weight:900;opacity:.7}
.town{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:150px;padding:14px 10px;border-radius:18px;border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:var(--td-ink);font:inherit;cursor:pointer;text-align:center;transition:transform .12s,background .2s,border-color .2s;touch-action:manipulation}
:root[data-skin=paper] .town{border-color:rgba(0,0,0,.18);background:rgba(255,255,255,.6)}
.town:hover:not([aria-disabled=true]){transform:translateY(-2px);border-color:var(--td-hi)}
.town[aria-disabled=true]{cursor:default}
.town .city{font-size:clamp(19px,4.8vw,26px);font-weight:900;line-height:1.1;overflow-wrap:anywhere}
.town .meta{opacity:.75;font-size:14px}
.town .val{font-size:clamp(17px,4.6vw,28px);font-weight:900;color:var(--td-hi);min-height:1.2em;font-variant-numeric:tabular-nums}
.town.right{border-color:var(--td-ok);background:rgba(47,211,160,.18)}
.town.wrong{border-color:var(--td-bad);background:rgba(255,92,92,.16)}
.reveal{text-align:center;color:var(--td-ink)!important;opacity:.85;min-height:1.6em;margin:12px 0 0;font-weight:700}
.done{margin:14px 0}.done h2{margin:0 0 4px}
.grid{font:24px/1.2 system-ui,"Apple Color Emoji","Segoe UI Emoji",sans-serif;letter-spacing:2px;margin:10px 0;white-space:pre}
.recap{font-size:14px;color:var(--muted);padding-left:22px}.recap li{margin:3px 0}.recap b{color:var(--ink)}
.under{justify-content:center;margin:14px 0}
.skins{justify-content:center;margin:8px 0}
.skins button{width:36px;height:36px;border-radius:50%;border:3px solid var(--line);cursor:pointer;position:relative}
.skins button[aria-pressed=true]{border-color:var(--ink)}
.skins button.locked::after{content:"🔒";position:absolute;right:-6px;bottom:-6px;font-size:12px}
@keyframes pop{0%{transform:scale(.9);opacity:0}100%{transform:scale(1);opacity:1}}.val.on{animation:pop .25s ease-out}

/* goal line, restart, tutorial hand, juice */
.arena-top{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.goal{flex:1;display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:700;opacity:.92;line-height:1.3}
.goal .streak{white-space:nowrap;background:rgba(255,255,255,.14);padding:3px 9px;border-radius:999px}
:root[data-skin=paper] .goal .streak{background:rgba(0,0,0,.08)}
.goal .beat{color:var(--td-hi)}
.restart{color:var(--td-ink);background:rgba(255,255,255,.14);border:0;border-radius:12px;width:38px;height:38px;font-size:20px;font-weight:900;cursor:pointer;flex:none}
.duel{position:relative}
.hand{position:absolute;left:22%;top:58%;font-size:44px;pointer-events:none;animation:hand 2.4s ease-in-out infinite;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));z-index:2}
@keyframes hand{0%,100%{left:20%;transform:scale(1)}20%{left:20%;transform:scale(.8)}30%{left:20%;transform:scale(1)}50%{left:68%;transform:scale(1)}70%{left:68%;transform:scale(.8)}80%{left:68%;transform:scale(1)}}
.fx-layer{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:50}
.shake{animation:shake .35s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@media (prefers-reduced-motion: reduce){.hand{animation:none;left:22%}.shake{animation:none}.val.on{animation:none}.node.cur{animation:none}}
/* level map */
.map{margin:14px 0}.map-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.map-head h2{margin:0}.map-head .btn{white-space:nowrap}
.map .pack{margin:16px 0}.map .pack h3{margin:0 0 8px;font-size:16px}.map .pack h3 small{font-weight:600;color:var(--muted)}
.nodes{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;position:relative}
.nodes::before{content:"";position:absolute;left:8%;right:8%;top:28px;height:4px;border-radius:2px;background:var(--line);z-index:0}
.node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border-radius:16px;border:2px solid var(--line);background:var(--card,#fff);color:var(--ink);font:inherit;cursor:pointer;min-height:64px;justify-content:center}
.node b{font-size:18px;font-weight:900}.node span{font-size:11px;color:#E8A400;letter-spacing:-1px;white-space:nowrap}
.node.done{border-color:var(--td-ok);background:color-mix(in srgb,var(--td-ok) 14%,transparent)}
.node.open{border-color:#E8A400}
.node.locked{opacity:.55}.node.locked span{color:var(--muted);letter-spacing:0}
.node.pass{border-style:dashed}.node.pass span{color:var(--muted);letter-spacing:0;font-weight:700}
.node.cur{box-shadow:0 0 0 3px #FFC84588;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px #FFC84533}}
#endless{margin-bottom:6px}
.chip small{font-weight:600;opacity:.75}
.game [hidden]{display:none!important}