@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap";:root{--ink:#0b0814;--night:#10123a;--panel-top:#1d2160;--panel-bottom:#10123a;--line:#f4f4f4;--gold:#f2c230;--text:#ece9ff;--narration:#b9b3ff;--muted:#8a86b8;--good:#6fd36a;--bad:#e2557a;--font-display:"Press Start 2P",ui-monospace,monospace;--font-body:"VT323",ui-monospace,monospace;--px:4px;--buncss-light: ;--buncss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--ink);color:var(--text);font-family:var(--font-display);-webkit-font-smoothing:none;-webkit-tap-highlight-color:transparent;margin:0}canvas{image-rendering:pixelated;image-rendering:crisp-edges}.panel{position:relative;background:linear-gradient(var(--panel-top),var(--panel-bottom));border:calc(var(--px)*.75)solid var(--line);box-shadow:0 0 0 calc(var(--px)*.75)var(--ink),inset 0 0 0 calc(var(--px)*.5)#0006;clip-path:polygon(var(--px)0,calc(100% - var(--px))0,100% var(--px),100% calc(100% - var(--px)),calc(100% - var(--px))100%,var(--px)100%,0 calc(100% - var(--px)),0 var(--px))}.btn{font:inherit;cursor:pointer;color:var(--ink);background:var(--gold);box-shadow:inset 0 -.3em 0 #0004,0 .3em 0 var(--ink);border:0;padding:.9em 1.2em;transition:transform 80ms steps(2,end)}.btn:active{transform:translateY(.2em);box-shadow:inset 0 -.1em #0004}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;transition-duration:1ms!important}}[hidden]{display:none!important}html{overflow-x:hidden}html:not(.ready) .hub{visibility:hidden}#world{position:fixed;z-index:0;display:block;top:0;left:0}.hub{position:relative;z-index:1;padding-bottom:calc(var(--px)*4);min-height:100svh}.masthead{text-align:center;padding:max(env(safe-area-inset-top),calc(var(--px)*3))16px calc(var(--px)*1)}.title{letter-spacing:.06em;color:#fff;text-shadow:3px 3px 0 var(--ink),-3px 3px 0 var(--ink),3px -3px 0 var(--ink),-3px -3px 0 var(--ink),6px 6px 0 var(--bad);margin:0;font-size:clamp(20px,3vw,42px);font-weight:400;line-height:1.3}.word{display:inline-block;white-space:nowrap}.word>span{display:inline-block;opacity:0;animation:.35s steps(4,end) forwards drop;animation-delay:calc(var(--i)*55ms + .2s)}@keyframes drop{0%{opacity:1;transform:translateY(-.9em)}to{opacity:1;transform:none}}.subtitle{margin:calc(var(--px)*2)auto 0;font-family:var(--font-body);color:var(--narration);text-shadow:2px 2px 0 var(--ink);opacity:0;animation:.4s steps(4,end) 1.1s forwards fade-in;max-width:36em;font-size:clamp(19px,1.7vw,26px);line-height:1.1}@keyframes fade-in{to{opacity:1}}.stage{position:relative;margin-top:calc(var(--px)*1)}.map{position:relative;height:calc(var(--px)*140);touch-action:manipulation;width:100%}.pin{position:absolute;pointer-events:none;background:0 0;border:0;margin:0;padding:0}.pin:focus-visible{outline:2px dashed var(--gold);outline-offset:2px}.hint{position:absolute;top:calc(var(--px)*133);text-align:center;letter-spacing:.08em;color:var(--text);text-shadow:2px 2px 0 var(--ink),-1px -1px 0 var(--ink);pointer-events:none;animation:1.2s step-end infinite blink;margin:0;font-size:9px;line-height:1.6;left:0;right:0}.tri{display:inline-block;vertical-align:-.05em;clip-path:polygon(0 0,100% 50%,0 100%);background:currentColor;width:.7em;height:.8em}.hint-coarse{display:none}@media (pointer:coarse){.hint-fine{display:none}.hint-coarse{display:inline}}@keyframes blink{50%{opacity:.35}}.stage>.card{position:absolute;z-index:3;padding:calc(var(--px)*3 + 6px)calc(var(--px)*2 + 10px)calc(var(--px)*2 + 8px);--accent:var(--gold);width:min(340px,100vw - 16px)}.card:before{content:"";position:absolute;height:calc(var(--px)*1.5);background:var(--accent);inset:0 0 auto}.card.is-open{animation:.18s steps(3,end) pop-in}@keyframes pop-in{0%{transform:translateY(8px)scale(.92);opacity:0}}.card-origin{letter-spacing:.08em;color:var(--muted);margin:0;font-size:9px;line-height:1.6}.card-origin:before{content:"";display:inline-block;vertical-align:-.1em;background:var(--accent);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);width:.9em;height:.9em;margin-right:.6em}.card-title{color:var(--accent);text-shadow:2px 2px 0 var(--ink);margin:8px 0 6px;font-size:14px;font-weight:400;line-height:1.55}.card-title .word>span{animation-duration:.2s;animation-delay:calc(var(--i)*14ms + 50ms)}.card-tagline{font-family:var(--font-body);color:var(--text);margin:0 0 12px;font-size:22px;line-height:1.05}.card-foot{display:flex;justify-content:space-between;align-items: center;gap:12px}.card-kind{letter-spacing:.1em;color:var(--muted);font-size:8px}.card-play{text-decoration:none;white-space:nowrap;font-size:12px}.card-play:focus-visible{outline:3px solid #fff;outline-offset:3px}.create-card:focus-visible{outline:3px solid #fff;outline-offset:3px}.roster{margin:calc(var(--px)*2)auto 0;max-width:1280px;padding:0 16px}.roster-heading{letter-spacing:.12em;color:var(--gold);margin:0 0 12px;font-size:10px;font-weight:400}.roster-heading:not(:first-child){margin-top:18px}.heroes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));list-style:none;gap:14px;margin:0;padding:0}.heroes-empty{font-family:var(--font-body);color:var(--narration);font-size:22px}.hero{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"pin title" "pin origin" "tagline tagline";color:var(--text);text-decoration:none;--accent:var(--gold);gap:4px 12px;height:100%;padding:14px 14px 12px;transition:transform 80ms steps(2,end)}.hero:hover,.hero.is-selected{border-color:var(--accent);outline:none;transform:translateY(-3px)}.hero:focus-visible{border-color:var(--accent);outline:none;transform:translateY(-3px)}.hero-pin{grid-area:pin;image-rendering:pixelated;align-self: start}.hero-title{grid-area:title;color:var(--accent);font-size:11px;line-height:1.5}.hero-origin{grid-area:origin;letter-spacing:.08em;color:var(--muted);font-size:8px;line-height:1.6}.hero-tagline{grid-area:tagline;font-family:var(--font-body);margin-top:6px;font-size:20px;line-height:1.05}.heroes-community .hero-title{font-size:10px}.create-card{display:flex;border-color:var(--gold);color:var(--text);text-decoration:none;align-items: center;gap:14px;margin-top:14px;padding:16px}.create-card:hover{transform:translateY(-3px)}.create-quill canvas{display:block;image-rendering:pixelated}.create-copy{display:grid;flex:1;gap:8px}.create-title{color:var(--gold);font-size:11px;line-height:1.5}.create-sub{font-family:var(--font-body);font-size:20px;line-height:1.05}.create-go{color:var(--gold);animation:1s step-end infinite blink;font-size:14px}@media (min-width:900px){.roster{display:grid;grid-template-columns:1fr minmax(240px,24%);align-items: start;column-gap:14px}.roster>:not(.create-card){grid-column:1}.create-card{grid-column:2;grid-row:1/span 4;flex-direction:column;align-self:stretch;align-items: flex-start;margin-top:0}.create-go{align-self: flex-end}.card-title{font-size:16px}}