Spaces:
Running
Running
| /* Townduel layout + themes (data-skin on <html>). (c) 2026 CyberMax. */ | |
| :root{--game:#5CF2FF;--game2:#FFC857} | |
| :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);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} | |