@font-face{font-family:"Press Start 2P";src:url(/fonts/PressStart2P.ttf) format("truetype");font-display:swap}
:root{--ink:#fff;--gold:#eac058;--red:#fe5f55;--redd:#a73a34;--blue:#009dff;--blued:#0a5a99;--panel:#26363a;--panel2:#1a2528;--line:#0c1517;--acid:#d9ff62;--cream:#f5ecd7;--muted:#8fa3a6}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#0b0f12;color:var(--ink);font-family:"Press Start 2P",ui-monospace,Menlo,monospace;-webkit-font-smoothing:none}
button{font:inherit;color:inherit}
.hidden{display:none!important}
canvas#game{position:fixed;inset:0;width:100%;height:100%;image-rendering:pixelated}

#crt{position:fixed;inset:0;z-index:100;pointer-events:none;background:repeating-linear-gradient(to bottom,#0000 0,#0000 2px,#0000002e 3px),radial-gradient(ellipse at center,#0000 55%,#000000a8 100%);mix-blend-mode:multiply}
#crt:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#ff00001a,#0000 30%,#0000 70%,#0000ff1a)}

#hud{position:fixed;inset:0;z-index:10;pointer-events:none}
#hud *{pointer-events:none}
#hud button{pointer-events:auto}
.xpbar{position:absolute;left:0;right:0;top:0;height:22px;background:#0c1517;border-bottom:3px solid #000}
#xpfill{height:100%;width:0;background:linear-gradient(#5fd3ff,#009dff);box-shadow:0 0 14px #009dff99;transition:width .15s}
#lv{position:absolute;right:12px;top:5px;font-size:10px;text-shadow:2px 2px 0 #000}
#timer{position:absolute;left:50%;top:34px;transform:translateX(-50%);font-size:24px;text-shadow:0 3px 0 #000,0 0 18px #0009}
.hudL{position:absolute;left:14px;top:34px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.chip{background:var(--panel);border:3px solid var(--line);border-radius:8px;box-shadow:0 4px 0 #000a;padding:8px 10px;font-size:10px}
.chip.dim{color:var(--gold);font-size:8px}
.hudR{position:absolute;right:14px;top:34px;display:flex;flex-direction:column;gap:6px;align-items:flex-end;font-size:11px;text-shadow:2px 2px 0 #000}
.hudR .row{display:flex;gap:10px;align-items:baseline}
.lab{color:var(--muted);font-size:8px}
#combo{margin-top:6px;font-size:26px;color:var(--gold);text-shadow:0 4px 0 #6b4a00,0 0 16px #eac05866;transform-origin:right center}
#combo.pop{animation:pop .22s cubic-bezier(.2,2,.4,1)}
@keyframes pop{0%{transform:scale(1.8) rotate(-6deg)}100%{transform:none}}
.mini{margin-top:6px;background:var(--panel);border:3px solid var(--line);border-radius:6px;padding:6px 8px;font-size:8px;cursor:pointer;box-shadow:0 3px 0 #000a}
.mini:hover{background:#34494e}

.inputDock{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:min(560px,calc(100vw - 24px))}
.inputShell{display:flex;align-items:center;background:var(--panel2);border:4px solid var(--line);border-radius:12px;box-shadow:0 6px 0 #000a,0 0 0 3px #3a5258;padding-left:14px}
.prompt{color:var(--gold);font-size:16px}
.typebox{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font:16px "Press Start 2P",monospace;padding:16px 14px;caret-color:var(--acid);letter-spacing:1px}
.hint{text-align:center;color:#7c9094;font-size:8px;margin-top:12px;text-shadow:1px 1px 0 #000}
.inputShell.bad{animation:bad .18s;border-color:var(--red)}
@keyframes bad{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

.screen{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px;background:#04080acc;overflow:auto;text-align:center}
.screen>*{flex-shrink:0}
.screen{align-items:center;justify-content:safe center}
.title{margin:0;font-size:clamp(34px,8vw,84px);line-height:1.1;letter-spacing:2px;text-shadow:0 6px 0 #000,0 12px 0 #0007}
.title span{display:inline-block;animation:bob 1.8s ease-in-out infinite}
.title .r{color:var(--red)}
.title.small{font-size:clamp(24px,5vw,50px)}
.title.small .r{display:inline-block;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-10px) rotate(1.5deg)}}
.sub{margin:0;color:#c8d6d8;font-size:11px;line-height:1.8;max-width:620px;text-shadow:2px 2px 0 #000}
.banner{font-size:clamp(16px,3vw,28px);color:var(--ink);background:var(--blue);border:4px solid #000;border-radius:10px;padding:14px 22px;box-shadow:0 6px 0 var(--blued);margin:0;text-shadow:2px 2px 0 #0007}
.banner.red{background:var(--red);box-shadow:0 6px 0 var(--redd)}
.keys{color:#7c9094;font-size:8px;text-shadow:1px 1px 0 #000}
.row-btn{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

.btn{background:var(--red);border:4px solid #000;border-radius:12px;padding:16px 28px;font-size:14px;cursor:pointer;box-shadow:0 7px 0 var(--redd);text-shadow:2px 2px 0 #0006;transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translateY(-2px);box-shadow:0 9px 0 var(--redd)}
.btn:active{transform:translateY(6px);box-shadow:0 1px 0 var(--redd)}
.btn.blue{background:var(--blue);box-shadow:0 7px 0 var(--blued)}
.btn.blue:hover{box-shadow:0 9px 0 var(--blued)}
.btn.blue:active{box-shadow:0 1px 0 var(--blued)}

.hand{display:flex;gap:26px;justify-content:center;align-items:center;flex-wrap:wrap;perspective:900px}
.cardwrap{animation:deal .55s cubic-bezier(.2,1.3,.4,1) backwards,idle 3.4s ease-in-out .6s infinite;animation-delay:var(--d,0s),calc(.6s + var(--d,0s))}
@keyframes deal{from{transform:translateY(110vh) rotate(28deg) scale(.8)}to{transform:none}}
@keyframes idle{0%,100%{transform:translateY(0) rotate(var(--r0,-1deg))}50%{transform:translateY(-9px) rotate(var(--r1,1deg))}}
.card{--c:var(--blue);position:relative;width:200px;height:290px;border-radius:16px;background:var(--cream);border:5px solid var(--c);box-shadow:0 12px 0 #0007,0 0 0 4px #000;color:#1c2426;padding:12px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;text-align:center;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .1s,box-shadow .15s;transform-style:preserve-3d;font:inherit}
.card:hover{box-shadow:0 22px 0 #0007,0 0 0 4px #000,0 0 40px var(--c)}
.card.sel{outline:6px solid var(--gold);outline-offset:4px}
.card .tag{background:var(--c);color:#fff;font-size:8px;padding:6px 10px;border-radius:6px;text-shadow:1px 1px 0 #0006;letter-spacing:1px}
.card .art{height:96px;width:100%;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#fff,#e5d6b4);border:3px solid #0002;border-radius:10px}
.card .glyph{font-size:34px;color:var(--c);text-shadow:3px 3px 0 #0003}
.card canvas{image-rendering:pixelated}
.card h3{margin:0;font-size:11px;line-height:1.4}
.card p{margin:0;font-size:8px;line-height:1.8;color:#3b4a4d}
.card .stat{font-size:7px;line-height:1.7;color:#55676a}
.card .num{position:absolute;left:-12px;top:-12px;background:#000;color:#fff;font-size:10px;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;border:3px solid var(--gold)}
.card.mage,.card.archer{width:232px;height:372px}
.card.mage{--c:#8a4fff}
.card.archer{--c:#2fae5a}
.card.up0{--c:#fe5f55}
.card.up1{--c:#009dff}
.card.up2{--c:#eaa308}

#intro{background:#04080a44}
#skills{position:absolute;left:14px;bottom:26px;display:flex;flex-wrap:wrap;gap:6px;max-width:min(300px,28vw);align-content:flex-end}
.sk{--c:#fff;display:flex;align-items:center;gap:5px;background:var(--panel2);border:3px solid var(--c);border-radius:6px;padding:4px 6px;font-size:8px;box-shadow:0 3px 0 #000a}
.sk b{color:var(--c);font-weight:400}
.card .rk{color:var(--c);font-size:8px;margin-top:auto;letter-spacing:1px}
@media (max-width:640px){.card,.card.mage,.card.archer{width:150px;height:300px}.hand{gap:12px}.hudR .row:nth-child(n+2){display:none}}

#bossnote{position:absolute;left:50%;top:68px;transform:translateX(-50%);font-size:9px;color:var(--gold);text-shadow:2px 2px 0 #000;white-space:nowrap}
.warn{position:fixed;left:0;right:0;top:28%;z-index:15;pointer-events:none;text-align:center;font-size:clamp(16px,3.4vw,34px);color:#fff;background:#d6342acc;border-top:4px solid #000;border-bottom:4px solid #000;padding:18px 10px;text-shadow:3px 3px 0 #000}
.warn.go{animation:warn .5s steps(2) 4,warnin .3s ease-out}
@keyframes warn{50%{background:#7a1410cc}}
@keyframes warnin{from{transform:scaleY(0)}to{transform:none}}