:root{--bg: #06070b;--panel: rgba(10, 13, 20, .82);--line: rgba(255, 255, 255, .1);--text: #e8ecf4;--dim: #8a93a6;--gold: #f5c542;--gold-dim: #a8842a;--sky: #5c94fc;--font: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font);overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}.hidden{display:none!important}#boot{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;display:grid;place-content:center;justify-items:center;gap:6px;background:radial-gradient(circle at 50% 40%,#131a2c,#06070b 70%);animation:bootfade .5s ease .6s forwards}@keyframes bootfade{to{opacity:0;visibility:hidden}}.boot-mark{font-size:42px;color:var(--gold);text-shadow:0 0 24px rgba(245,197,66,.5)}.boot-title{font-size:22px;letter-spacing:.22em}.boot-title span{color:var(--gold)}.boot-sub{font-size:11px;color:var(--dim);letter-spacing:.3em}#stage{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#000;touch-action:none}#cards,.sheet,#hub,.ed-notes{touch-action:pan-y}#screen{display:block;image-rendering:pixelated;image-rendering:crisp-edges;background:#000;box-shadow:0 0 0 1px #ffffff0f,0 30px 90px #000000e6}#title{position:absolute;top:0;right:0;bottom:0;left:0;z-index:25;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"logo menu" "foot foot";align-items:center;padding:0 clamp(20px,4vw,68px) 0 clamp(16px,3vw,40px);background:radial-gradient(ellipse at 34% 30%,#06070b4d,#06070bc7);animation:hubin .5s ease both}.tt-inner{display:contents}.tt-logo{grid-area:logo;justify-self:center;display:grid;justify-items:center;gap:8px;text-align:center}.tt-mark{font-size:34px;color:var(--gold);text-shadow:0 0 28px rgba(245,197,66,.55);animation:markfloat 3.4s ease-in-out infinite}@keyframes markfloat{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.tt-logo h1{margin:0;font-size:clamp(28px,6vw,52px);font-weight:700;letter-spacing:.18em;color:var(--text);text-shadow:0 3px 0 rgba(0,0,0,.55),0 12px 40px rgba(0,0,0,.8)}.tt-logo h1 b{color:var(--gold)}.tt-sub{font-size:10px;letter-spacing:.32em;color:var(--dim)}.tt-menu{grid-area:menu;justify-self:end;display:grid;gap:9px;min-width:240px}.tt-item{padding:12px 26px;border-radius:10px;cursor:pointer;background:var(--panel);border:1px solid var(--line);color:var(--text);font-family:var(--font);font-size:13px;letter-spacing:.26em;transition:.16s ease}.tt-item:hover,.tt-item:focus-visible{border-color:var(--gold);color:var(--gold);background:#f5c5421a;transform:translate(-5px);outline:none}#tt-start{border-color:#f5c54280;color:var(--gold);font-weight:700}.tt-foot{grid-area:foot;justify-self:center;align-self:end;padding-bottom:max(20px,env(safe-area-inset-bottom));font-size:10px;letter-spacing:.18em;color:#5a6274;text-align:center}.tt-foot b{color:var(--dim)}.credits{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;display:grid;place-items:center;background:#040508b8}.credits-box{width:min(360px,86vw);padding:26px;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:12px}.credits-title{font-size:13px;letter-spacing:.34em;color:var(--gold);margin-bottom:14px}.credits-box p{font-size:11px;line-height:1.8;color:var(--dim);margin:0 0 12px}.credits-box p b{color:var(--text)}#hub{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;background:linear-gradient(180deg,#06070beb,#06070b8c 30%,#06070b8c,#06070bf2);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);padding:max(14px,env(safe-area-inset-top)) 18px 14px;animation:hubin .4s ease both}@keyframes hubin{0%{opacity:0;transform:translateY(6px)}}.hub-top{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px}.brand-mark{color:var(--gold);font-size:20px}.brand-text{letter-spacing:.22em;font-size:14px}.brand-text b{color:var(--gold);font-weight:700}.hub-tools{display:flex;gap:8px}.icon-btn{width:34px;height:34px;border-radius:8px;background:var(--panel);border:1px solid var(--line);color:var(--text);font-size:15px;cursor:pointer;transition:.15s}.icon-btn:hover{border-color:var(--gold-dim);color:var(--gold)}.hub-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start;padding:14px 0}.eyebrow{font-size:10px;letter-spacing:.3em;color:var(--dim);margin-bottom:10px}.editions{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}.ed-pick{display:grid;gap:3px;padding:9px 8px;text-align:left;cursor:pointer;background:var(--panel);border:1px solid var(--line);border-radius:9px;color:var(--dim);font-family:var(--font);transition:.15s}.ed-pick:hover{border-color:#f5c54273;color:var(--text)}.ed-pick.active{border-color:var(--gold);background:#f5c5421f;color:var(--gold)}.ed-era{font-size:9px;letter-spacing:.24em;opacity:.7}.ed-name{font-size:10.5px;letter-spacing:.1em;line-height:1.3}.ed-tagline{font-size:11px;color:var(--text);margin-bottom:6px}.ed-notes{margin:0 0 4px;padding-left:16px;list-style:none;font-size:10px;color:var(--dim);line-height:1.7}.ed-notes li{position:relative}.ed-notes li:before{content:"▸";position:absolute;left:-13px;color:var(--gold-dim)}#cards{display:grid;gap:10px;max-height:100%;overflow:auto;padding:2px 4px 2px 2px;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}.card{position:relative;display:block;padding:0;overflow:hidden;border-radius:10px;cursor:pointer;background:#0a0d14;border:1px solid var(--line);color:var(--text);font-family:var(--font);transition:.16s ease}.card:hover{border-color:#f5c54273;transform:translateY(-2px)}.card.active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 8px 26px #f5c54238}.card:focus-visible{outline:none;border-color:var(--gold)}.card-shot{position:relative;display:block}.card-img{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges}.card-cap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:baseline;gap:8px;padding:16px 10px 8px;background:linear-gradient(180deg,transparent,rgba(4,5,8,.88) 62%)}.card-no{font-size:13px;color:var(--gold);letter-spacing:.08em;flex:none}.card-name{font-size:10.5px;letter-spacing:.16em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card.locked{cursor:not-allowed}.card.locked .card-img{filter:grayscale(1) brightness(.3)}.card.locked .card-no,.card.locked .card-name{color:var(--dim)}.card.locked:hover{transform:none;border-color:var(--line)}.card-lock{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;justify-items:center;gap:5px;font-size:9px;letter-spacing:.3em;color:var(--dim);background:#04050859}.card-lock b{font-size:16px;font-weight:400}.hub-blurb{font-size:10.5px;color:var(--dim);line-height:1.6;margin:-6px 0 12px}.hub-right{display:grid;gap:10px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px}.panel-title{font-size:10px;letter-spacing:.3em;color:var(--dim);margin-bottom:10px}.meta{font-size:11px;color:var(--gold);margin-bottom:12px;letter-spacing:.1em}.row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:var(--dim);margin:8px 0}.row.check{justify-content:flex-start;gap:8px;cursor:pointer}.row input[type=range]{width:130px;accent-color:var(--gold)}.row input[type=checkbox]{accent-color:var(--gold);width:14px;height:14px}.row select{background:#11151f;color:var(--text);border:1px solid var(--line);border-radius:6px;padding:3px 6px;font-family:var(--font);font-size:11px}.heroes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.hero-pick{display:grid;justify-items:center;gap:5px;padding:8px 4px;background:#ffffff08;border:1px solid var(--line);border-radius:8px;cursor:pointer;transition:.15s;font-family:var(--font);color:var(--dim);font-size:9px;letter-spacing:.14em}.hero-pick:hover{border-color:#f5c54273;color:var(--text)}.hero-pick.active{border-color:var(--gold);background:#f5c5421f;color:var(--gold)}.hero-pick canvas{width:32px;height:32px;image-rendering:pixelated;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}.hero-blurb{font-size:10px;color:var(--dim);line-height:1.5;margin-top:10px;min-height:28px}.play-btn{width:100%;padding:13px;border-radius:10px;cursor:pointer;background:linear-gradient(180deg,var(--gold) 0%,#d9a92c 100%);color:#10130b;border:0;font-family:var(--font);font-weight:700;font-size:14px;letter-spacing:.24em;transition:.15s;box-shadow:0 6px 22px #f5c5423d}.play-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}.play-btn span{opacity:.55;margin-left:6px}.ghost-btn{width:100%;padding:11px;border-radius:10px;cursor:pointer;margin-top:8px;background:transparent;color:var(--dim);border:1px solid var(--line);font-family:var(--font);font-size:12px;letter-spacing:.18em;transition:.15s}.ghost-btn:hover{color:var(--text);border-color:var(--gold-dim)}.keys{font-size:10px;color:var(--dim);line-height:1.8;text-align:center}.keys b{color:var(--text);font-weight:600}.hub-foot{font-size:9.5px;color:#5a6274;letter-spacing:.12em;text-align:center}.sheet{position:absolute;top:0;right:0;bottom:0;left:0;z-index:26;display:flex;flex-direction:column;gap:14px;padding:max(14px,env(safe-area-inset-top)) 18px 16px;background:linear-gradient(180deg,#06070bf0,#06070bcc 40%,#06070bf5);animation:hubin .32s ease both;overflow:auto}.sheet-top{display:flex;align-items:center;gap:14px}.sheet-top h2{margin:0;font-size:15px;letter-spacing:.3em;color:var(--text);font-weight:700}.sheet-hint{margin-left:auto;font-size:10px;letter-spacing:.16em;color:#5a6274}.sheet-back{flex:none}.sheet-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;align-content:start}.note{font-size:10px;line-height:1.7;color:#5a6274;margin:10px 0 0}.hero-cards{flex:1;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));align-content:center}.hero-card{display:grid;justify-items:center;gap:8px;text-align:center;padding:20px 16px;cursor:pointer;border-radius:12px;background:var(--panel);border:1px solid var(--line);color:var(--text);font-family:var(--font);transition:.18s ease}.hero-card:hover{border-color:#f5c54273;transform:translateY(-3px)}.hero-card.active{border-color:var(--gold);background:#f5c5421a}.hero-card canvas{width:76px;height:76px;image-rendering:pixelated;filter:drop-shadow(0 5px 8px rgba(0,0,0,.65))}.hero-card.active canvas{animation:heroBob 2.2s ease-in-out infinite}@keyframes heroBob{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.hero-name{font-size:15px;letter-spacing:.2em}.hero-card.active .hero-name{color:var(--gold)}.hero-line{font-size:10.5px;color:var(--dim);line-height:1.5}.hero-power{margin-top:4px;padding-top:10px;width:100%;border-top:1px solid var(--line)}.hero-power-name{font-size:11px;letter-spacing:.2em;color:#8ad8ff}.hero-power-key{font-size:9px;letter-spacing:.16em;color:#5a6274;margin-left:6px}.hero-power-detail{font-size:10px;color:var(--dim);line-height:1.65;margin-top:6px}.hub-hero{font-size:11px;color:var(--dim);letter-spacing:.08em}.hub-hero b{color:var(--gold)}#pause{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;background:#040508b3}.pause-box{width:min(280px,80vw);padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:12px;text-align:center}.pause-title{font-size:15px;letter-spacing:.3em;margin-bottom:16px;color:var(--gold)}#touchpad{position:absolute;inset:auto 0 0 0;z-index:15;display:none;justify-content:space-between;align-items:flex-end;padding:0 16px max(16px,env(safe-area-inset-bottom));pointer-events:none}.pad-left,.pad-right{display:flex;gap:10px;pointer-events:auto}.pad{width:60px;height:60px;border-radius:14px;display:grid;place-items:center;background:#10141ea8;border:1px solid rgba(255,255,255,.14);color:var(--text);font-size:20px;font-family:var(--font);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;transition:transform .08s,background .08s}.pad:focus{outline:none}.pad.act{width:66px;height:66px;border-radius:50%;color:var(--gold);border-color:#f5c54259}.pad.alt{width:52px;height:52px;border-radius:50%;color:#8ad8ff;border-color:#8ad8ff59;align-self:center}.pad.down{background:#f5c54247;transform:scale(.94)}.pad.small{width:46px;height:46px;border-radius:50%;color:#8ad8ff;border-color:#8ad8ff52;font-size:17px;align-self:flex-end;margin-bottom:6px}@media (orientation: portrait) and (pointer: coarse){#stage{grid-template-rows:minmax(0,1fr) auto}#touchpad{position:static;justify-self:stretch;align-items:center;padding:12px 14px max(12px,env(safe-area-inset-bottom));background:linear-gradient(180deg,#06070b00,#06070beb 30%);border-top:1px solid var(--line)}.pad{width:56px;height:56px;font-size:19px;border-radius:13px}.pad-left{gap:8px}.pad-right{display:grid;grid-template-columns:repeat(2,auto);gap:8px;justify-items:center;align-items:center}.pad.act{width:64px;height:64px;font-size:21px}.pad.small,.pad.alt{width:50px;height:50px;align-self:center;margin-bottom:0}}#rotate{position:absolute;top:0;right:0;bottom:0;left:0;z-index:40;display:grid;place-items:center;background:#040508ed}.rotate-box{width:min(300px,84vw);padding:26px;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:12px}.rotate-icon{font-size:40px;color:var(--gold);margin-bottom:10px;animation:rotateHint 2.4s ease-in-out infinite}@keyframes rotateHint{0%,60%,to{transform:rotate(0)}30%{transform:rotate(90deg)}}.rotate-title{font-size:13px;letter-spacing:.28em;margin-bottom:12px}.rotate-box p{font-size:11px;line-height:1.7;color:var(--dim);margin:0 0 16px}#touch-hint{position:absolute;top:0;right:0;bottom:0;left:0;z-index:18;display:flex;pointer-events:none;animation:hintFade 5.5s ease forwards}@keyframes hintFade{0%,62%{opacity:1}to{opacity:0;visibility:hidden}}.hint-half{flex:1;display:grid;align-content:center;justify-items:center;gap:3px;font-family:var(--font);color:var(--text);background:#06070b8c}.hint-left{border-right:1px dashed rgba(255,255,255,.18)}.hint-half b{font-size:11px;letter-spacing:.2em;color:var(--gold);margin-top:8px}.hint-half span{font-size:10px;color:var(--dim)}@media (pointer: coarse){#touchpad{display:flex}.hub-body{grid-template-columns:1fr}.hub-right{order:-1}.keys{display:none}}@media (max-width: 780px){#title{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"logo" "menu" "foot";align-content:center;gap:26px;padding:0 20px;background:radial-gradient(ellipse at 50% 30%,#06070b4d,#06070bc7)}.tt-menu{justify-self:center}.tt-item:hover,.tt-item:focus-visible{transform:none}}@media (max-width: 820px){.hub-body{grid-template-columns:1fr;gap:12px}.editions{grid-template-columns:repeat(2,1fr)}.ed-notes{display:none}#cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}.hub-foot{display:none}}