style.css

/* Kenwren layout + themes (data-skin on <html>). (c) 2026 CyberMax. */
:root{--k-a:#2A1B3D;--k-b:#5B2A86;--k-hi:#FFD166;--k-ink:#fff}
:root[data-skin=sunrise]{--k-a:#3D1F1B;--k-b:#C2412D;--k-hi:#FFE08A}
:root[data-skin=lagoon]{--k-a:#0B2E3A;--k-b:#14808A;--k-hi:#B8FFF0}
:root[data-skin=bubblegum]{--k-a:#3A1235;--k-b:#D9479A;--k-hi:#FFF1A8}
:root[data-skin=paper]{--k-a:#EFE7D6;--k-b:#DCCFB4;--k-hi:#C2412D;--k-ink:#11141B}
.stage{margin-top:8px;background:linear-gradient(160deg,var(--k-a),var(--k-b));color:var(--k-ink);border-radius:26px;padding:22px 18px;box-shadow:var(--shadow);min-height:420px}
.stage h1{color:var(--k-ink)}.stage h1 em{color:var(--k-hi);font-style:normal}
.stage h2{margin:6px 0 14px;font-size:clamp(22px,5.4vw,30px);text-wrap:balance}
.stage .muted{color:var(--k-ink);opacity:.78}
.kick{margin:0;color:var(--k-hi);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.lede{font-size:18px;opacity:.9;margin:6px 0 18px}
.btn.big{min-height:56px;font-size:19px;padding:12px 26px;background:var(--k-hi);color:#11141B}
.stage .btn.ghost{color:var(--k-ink);border-color:rgba(255,255,255,.35)}
:root[data-skin=paper] .stage .btn.ghost{border-color:rgba(0,0,0,.2)}
.how{display:flex;gap:10px;flex-wrap:wrap;list-style:none;padding:0;margin:22px 0 0}.how li{background:rgba(255,255,255,.1);border-radius:12px;padding:8px 12px;font-size:14px}
#name-form input,.linkbox input{flex:1;min-width:0;font:inherit;font-size:18px;padding:12px 14px;border-radius:12px;border:2px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:var(--k-ink)}
#name-form input::placeholder{color:var(--k-ink);opacity:.55}
:root[data-skin=paper] #name-form input,:root[data-skin=paper] .linkbox input{border-color:rgba(0,0,0,.2);background:#fff}
#packs{margin-top:14px}#packs .chip{background:rgba(255,255,255,.12);color:var(--k-ink);border-color:rgba(255,255,255,.3)}#packs .chip[aria-pressed=true]{background:var(--k-hi);color:#11141B;border-color:var(--k-hi)}
.bar{height:8px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}.bar i{display:block;height:100%;width:0;background:var(--k-hi);transition:width .25s}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 14px}
.opt{min-height:74px;padding:12px;border-radius:16px;border:2px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:var(--k-ink);font:inherit;font-weight:800;font-size:17px;cursor:pointer;touch-action:manipulation;transition:transform .1s,background .15s}
.opt:hover{transform:translateY(-2px);border-color:var(--k-hi)}.opt[aria-pressed=true]{background:var(--k-hi);color:#11141B;border-color:var(--k-hi)}
:root[data-skin=paper] .opt{border-color:rgba(0,0,0,.18);background:#fff}
@media (max-width:420px){.opts{grid-template-columns:1fr}.opt{min-height:56px}}
.linkbox{display:flex;gap:8px;margin:12px 0}
.score{font-size:72px;font-weight:900;margin:0;color:var(--k-hi);line-height:1}
.recap,.board{padding-left:24px}.recap li,.board li{padding:5px 0;border-bottom:1px solid rgba(255,255,255,.15)}.board li b{float:right}.board li.me{color:var(--k-hi);font-weight:800}
.stage a{color:var(--k-hi)}
.err{background:#FF5C5C;color:#fff;border-radius:10px;padding:8px 12px;font-weight:700}
.skins{justify-content:center;margin:10px 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}
.stage details{margin-top:14px}
#packs{flex-wrap:wrap!important;overflow:visible!important;margin:14px 0 0!important;padding:0!important}
/* solo mode: map, clue card, pips, stars, juice */
.stage{position:relative}
.solo-strip{margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18)}.solo-strip .kick{margin-bottom:8px}.solo-strip p.small{margin:8px 0 0}
.streak{font-weight:900;font-size:18px;background:rgba(255,255,255,.12);border-radius:999px;padding:6px 12px}
.hud{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-bottom:6px}.hud b{flex:1;text-align:center;font-size:15px}
.hud .btn.sm{min-width:44px}
.goal{margin:0 0 10px;font-size:15px;background:rgba(0,0,0,.18);border-radius:10px;padding:7px 10px}.goal .beat{color:var(--k-hi)}
:root[data-skin=paper] .goal{background:rgba(0,0,0,.06)}
.pips{display:flex;gap:6px;margin:0 0 10px}.pips i{flex:1;height:8px;border-radius:9px;background:rgba(255,255,255,.2)}.pips i.ok{background:#2FD3A0}.pips i.no{background:#FF5C5C}
.clue-card{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.22);border-radius:16px;padding:10px 14px;margin-bottom:10px}
:root[data-skin=paper] .clue-card{background:#fff;border-color:rgba(0,0,0,.12)}
.clue-card .who{margin:0 0 4px;font-size:18px}.clue-card #so-emoji{font-size:26px}
.clue-card ul{margin:0;padding-left:20px}.clue-card li{padding:2px 0;font-size:15px;transition:background .2s}
.clue-card li.now,.clue-card li.hint{background:rgba(255,209,102,.22);border-radius:6px;outline:2px solid var(--k-hi);outline-offset:1px}
.clue-card .hid{display:none;margin:0;font-size:28px;text-align:center}
.clue-card.hidden ul{display:none}.clue-card.hidden .hid{display:block}
.peek,.tbar{height:6px;border-radius:9px;background:rgba(255,255,255,.2);overflow:hidden;margin:8px 0}.peek i,.tbar i{display:block;height:100%;width:100%;background:var(--k-hi)}
.tbar i{background:#FF8A5C}
#so-ready{margin-top:6px}
#s-solo h2{margin:4px 0 10px;font-size:clamp(19px,4.6vw,24px)}
.opt.right{background:#2FD3A0!important;color:#11141B!important;border-color:#2FD3A0!important}.opt.wrong{background:#FF5C5C!important;color:#fff!important;border-color:#FF5C5C!important}
.opt.hint{border-color:var(--k-hi);box-shadow:0 0 0 3px rgba(255,209,102,.4)}
.opt:disabled{cursor:default}
.hand{position:absolute;left:0;top:0;font-size:38px;pointer-events:none;z-index:5;margin:-6px 0 0 -12px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
.stars{font-size:52px;letter-spacing:6px;line-height:1;margin:4px 0}.stars span{opacity:.25;display:inline-block}.stars span.on{opacity:.25}.stars span.pop{opacity:1;color:var(--k-hi);animation:pop .35s ease-out}
@keyframes pop{0%{transform:scale(.3)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
.grid{font-size:22px;letter-spacing:2px;margin:6px 0}
#s-done .row{margin-top:10px}
.pack h3{margin:14px 0 2px;font-size:17px}.pack h3 small{font-weight:600;opacity:.75}.passtag{background:linear-gradient(135deg,#FFB547,#FF6A3D);color:#11141B;border-radius:999px;padding:1px 8px;font-size:12px;font-weight:800}
.pack p.small{margin:0 0 8px}
.nodes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.node{display:flex;flex-direction:column;align-items:center;gap:0;padding:6px 2px;border-radius:14px;border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:var(--k-ink);font:inherit;cursor:pointer;min-height:70px;touch-action:manipulation}
:root[data-skin=paper] .node{background:#fff;border-color:rgba(0,0,0,.12)}
.node .nn{font-weight:900;font-size:14px}.node .em{font-size:22px;line-height:1.1}.node .st{font-size:11px;color:var(--k-hi);letter-spacing:1px}
.node.done{border-color:var(--k-hi)}.node.boss{border-style:dashed}.node.progress{opacity:.45}.node.pass{opacity:.8}
.node.cur{box-shadow:0 0 0 3px var(--k-hi);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(255,209,102,.35)}}
.shake{animation:shake .38s}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
canvas.fx{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:98}
@media (max-width:420px){.nodes{gap:6px}.node{min-height:64px}.stars{font-size:44px}}
@media (max-width:420px){.top nav{display:none}.top .icon{padding:8px 7px}}