/* 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}