@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
*{image-rendering:pixelated}
body{background:#000;font-family:'Press Start 2P',monospace}
.game-shell{background:#000}
.topbar{height:48px;background:#050508;border-bottom:3px solid #fff;padding:0 16px}
.brand-mark{width:28px;height:28px;clip-path:none;background:#7effd4;color:#08100d;font:14px 'Press Start 2P'}
.brand strong{font:12px 'Press Start 2P';letter-spacing:0}.brand small{display:none}
.chapter span{font:7px 'Press Start 2P';color:#f9f871}.chapter strong{font:9px 'Press Start 2P';letter-spacing:0}
.icon-btn{border:2px solid #fff;border-radius:0;width:30px;height:30px;font-size:14px}
.vignette{box-shadow:inset 0 0 0 4px #000}
.hero-card,.wizard-card{background:#000;border:3px solid #fff;backdrop-filter:none;clip-path:none;box-shadow:5px 5px 0 #000}
.portrait{border:0;background:#000;font-family:'Press Start 2P'}
.hero-card small,.wizard-card small{font:7px 'Press Start 2P';letter-spacing:0;color:#fff}
.wizard-card p{font:9px/1.45 'Press Start 2P';color:#f9f871}
.heart-row{font-family:'Press Start 2P';font-size:12px}
.dash-label{display:none}.objective{background:#000;border:3px solid #fff;padding:8px 12px}
.objective span{font:7px 'Press Start 2P';letter-spacing:0;color:#f9f871}.objective strong{font:8px/1.5 'Press Start 2P'}
.controls-hint{font:7px 'Press Start 2P';color:#fff}.controls-hint kbd{font:7px 'Press Start 2P';border:2px solid #fff;border-radius:0;background:#000}
.overlay{background:#000}.crest{clip-path:none;border:4px solid #fff;background:#09090e;font-family:'Press Start 2P'}
.eyebrow,.tiny{font-family:'Press Start 2P';line-height:1.6}.start-screen h1{font-family:'Press Start 2P';font-size:clamp(38px,7vw,82px);text-shadow:6px 6px 0 #5b2b82}
.start-screen h1 span{color:#7effd4}.lede{font:13px/1.8 'Press Start 2P';max-width:760px}
.primary-btn{font:9px 'Press Start 2P';border:3px solid #fff;background:#000;color:#fff;box-shadow:5px 5px 0 #7effd4}.primary-btn:hover{background:#fff;color:#000;filter:none}
.toast:has(.talk){bottom:86px}.talk{font:12px/1.7 'Press Start 2P';border:4px solid #fff;background:#000;box-shadow:none}.talk small,.talk em,.talk b{font-family:'Press Start 2P'}
.end-screen h2{font-family:'Press Start 2P';font-size:28px;line-height:1.5}.score-line strong{font-family:'Press Start 2P'}
@media(max-width:720px){.topbar{height:42px}.hero-card{min-width:170px}.lede{font-size:9px}.start-screen h1{font-size:34px}.talk{font-size:9px}.objective{max-width:180px}}
.battle-mode .hero-card,.battle-mode .wizard-card,.battle-mode .objective,.battle-mode .controls-hint,.battle-mode .boss-hud{display:none}
.battle-mode canvas{cursor:none}

/* Smooth presentation pass: keep the chunky art, remove scaling and UI jitter. */
canvas{image-rendering:auto;filter:saturate(1.04) contrast(1.02);transition:filter .3s ease}
.hero-card,.wizard-card,.objective,.boss-hud,.talk,.unlock-card,.shop-card,.practice-picker-card{transition:opacity .24s ease,transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease}
.hero-card,.wizard-card,.objective{border-radius:4px;box-shadow:0 8px 24px #0009,0 0 18px #7effd40b}
.talk,.unlock-card,.shop-card,.practice-picker-card{border-radius:5px}
.boss-track,.dash-track{overflow:hidden;border-radius:999px}.boss-track div,.dash-track div{transition:width .28s cubic-bezier(.2,.8,.2,1)}
.icon-btn,.primary-btn,.practice-launch,.practice-grid button,.equipment-row button{transition:transform .18s cubic-bezier(.2,.8,.2,1),filter .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
.icon-btn:hover,.primary-btn:hover,.practice-launch:hover,.practice-grid button:hover,.equipment-row button:hover{transform:translateY(-2px) scale(1.015)}
.overlay:not(.hidden){animation:smoothOverlayIn .26s cubic-bezier(.2,.8,.2,1)}
@keyframes smoothOverlayIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.topbar{background:linear-gradient(#0d0a12,#030305)!important;box-shadow:0 5px 0 #000,0 8px 22px #000b}.talk{box-shadow:0 6px 0 #000,0 0 0 2px #5b5365;animation:dialogueIn .16s ease-out}@keyframes dialogueIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}