/* 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(:disabled){transform:translateY(-2px);border-color:var(--td-hi)}
.town:disabled{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(20px,5vw,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}