:root{--bg: #10121c;--panel: #1c2140;--panel-light: #2a3160;--ink: #e8e6d8;--ink-dim: #9a9ac0;--gold: #f5c542;--hp: #e0455e;--hp-low: #ff2a4d;--xp: #46b6ff;--mana: #55d97f;--shadow: #05060c;--pixel: "Press Start 2P", "Courier New", monospace;--read: Georgia, "Iowan Old Style", "Palatino Linotype", serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--pixel);image-rendering:pixelated}body{background-image:radial-gradient(circle at 50% 0%,#1a1e35,#0b0d16 70%)}#app{max-width:920px;margin:0 auto;min-height:100%;padding:12px;display:flex;flex-direction:column;gap:12px}.panel{background:var(--panel);border:4px solid #000;box-shadow:inset 0 0 0 2px var(--panel-light),inset 0 0 0 6px #0c0e1a,0 4px 0 var(--shadow);padding:12px 14px}#stage{position:relative;aspect-ratio:2 / 1;border:4px solid #000;box-shadow:inset 0 0 0 2px var(--panel-light);overflow:hidden;background:#05060c}#background{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:fill;image-rendering:auto}.fighters{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:flex-end;justify-content:space-between;padding:0 4% 2%}.sprite{image-rendering:pixelated}.hero-wrap,.monster-wrap{position:relative;height:100%;display:flex;align-items:flex-end;animation:bob 1.6s ease-in-out infinite}.monster-wrap{animation-delay:.5s}#hero{height:90%;width:auto;transform-origin:bottom center;animation:breathe 2.8s ease-in-out infinite}#monster{height:90%;width:auto}#hero.attacking{animation:jab .45s ease-in-out infinite}#hero.hurt{animation:recoil .4s ease-out}#monster.taking-damage{animation:shake .18s steps(2) infinite;filter:brightness(1.3) drop-shadow(0 0 4px var(--hp))}#monster-hp{position:absolute;bottom:93%;left:50%;transform:translate(-50%);width:100%;min-width:96px;height:12px;background:#000;border:2px solid #000;box-shadow:inset 0 0 0 1px var(--panel-light)}#monster-hp-fill{height:100%;width:100%;background:var(--hp);transition:width .12s linear}#floaters{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.floater{position:absolute;bottom:60px;font-size:12px;text-shadow:2px 2px 0 #000;animation:rise .9s ease-out forwards}.floater-monster{color:var(--gold);right:60px;left:auto!important}.floater-player{color:var(--hp-low);left:60px!important}.floater-level{color:var(--mana);left:50%!important;transform:translate(-50%);font-size:14px}#hud{font-size:10px;display:flex;flex-direction:column;gap:9px}.hud-row{display:flex;align-items:center;gap:10px}.hud-top{justify-content:flex-start}#hero-name{color:var(--gold)}#level-label{color:var(--ink-dim)}#debuff-tag{color:var(--hp-low);margin-left:auto}.bar-row{display:flex;align-items:center;gap:10px}.bar-label{width:54px;color:var(--ink-dim)}.bar{flex:1;height:16px;background:#000;border:2px solid #000;box-shadow:inset 0 0 0 1px var(--panel-light);overflow:hidden}.fill{height:100%;transition:width .12s linear}.bar.life .fill{background:linear-gradient(var(--hp),#a02038)}.bar.life .fill.low{background:var(--hp-low);animation:pulse .6s steps(2) infinite}.bar.xp .fill{background:linear-gradient(var(--xp),#1c6fb0)}.bar.goal .fill{background:linear-gradient(var(--mana),#2f8f4f)}.bar.goal .fill.done{background:linear-gradient(var(--gold),#b8901f)}.bar-num{width:34px;text-align:right}.bar-num-wide{width:52px;text-align:right;color:var(--mana)}#goal-progress{color:var(--mana)}#goal-input{width:58px}input[type=number]{font-family:var(--pixel);font-size:8px;color:var(--ink);background:#0c0e1a;border:2px solid #000;box-shadow:inset 0 0 0 1px var(--panel-light);padding:5px 4px}#pips{display:flex;gap:6px}.pip{padding:4px 6px;font-size:8px;color:var(--ink-dim);background:#0c0e1a;border:2px solid #000;box-shadow:inset 0 0 0 1px #33385f;opacity:.5}.pip.lit{color:var(--ink);opacity:1;box-shadow:inset 0 0 0 1px var(--mana)}.pip.current{color:var(--bg);background:var(--gold)}.pip b{color:var(--gold);font-weight:400;margin-left:2px}.pip.current b{color:var(--bg)}.controls{flex-wrap:wrap;font-size:8px}.bg-label{color:var(--ink-dim);display:flex;align-items:center;gap:6px}select,.btn{font-family:var(--pixel);font-size:8px;color:var(--ink);background:var(--panel-light);border:2px solid #000;box-shadow:0 2px 0 var(--shadow);padding:6px 8px;cursor:pointer}.btn:active{transform:translateY(2px);box-shadow:none}.spacer{flex:1}#word-count{color:var(--ink-dim)}#editor-wrap{flex:1;display:flex;min-height:240px;padding:0}#book{flex:1;resize:none;border:none;outline:none;background:#14162a;color:var(--ink);font-family:var(--read);font-size:18px;line-height:1.7;padding:20px 22px;caret-color:var(--gold)}#book::placeholder{color:var(--ink-dim);font-family:var(--read);font-style:italic}#overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#05060ce6;display:flex;align-items:center;justify-content:center;padding:20px;z-index:10}.overlay-inner{max-width:640px;width:100%;text-align:center}.title{font-size:22px;color:var(--gold);text-shadow:3px 3px 0 #000;margin:6px 0 12px;letter-spacing:2px}.win .title{color:var(--mana)}.lose .title{color:var(--hp-low)}.tagline{font-size:10px;line-height:1.9;color:var(--ink-dim);margin-bottom:20px}.hint{font-size:9px;color:var(--ink-dim);margin-top:16px}.hero-cards{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.hero-card{flex:1 1 200px;max-width:240px;background:var(--panel-light);border:3px solid #000;box-shadow:0 4px 0 var(--shadow);color:var(--ink);font-family:var(--pixel);padding:16px 12px;cursor:pointer;transition:transform .1s}.hero-card:hover{transform:translateY(-3px);box-shadow:0 7px 0 var(--shadow)}.hero-card h3{color:var(--gold);font-size:12px;margin:8px 0}.hero-card .blurb{font-size:8px;line-height:1.7;color:var(--ink-dim);min-height:44px}.hero-card .stats{list-style:none;padding:0;margin:10px 0 0;font-size:8px;line-height:2;text-align:left}.hero-card .stats b{color:var(--xp);float:right}.hero-card-art{height:88px;width:auto}.result-stats{list-style:none;padding:0;margin:0 auto 20px;font-size:10px;line-height:2.4;max-width:340px;text-align:left}.result-stats span{color:var(--gold);display:inline-block;min-width:70px}.result-actions{display:flex;gap:12px;justify-content:center;margin-top:16px}.btn-primary{color:var(--bg);background:var(--gold);font-size:10px;padding:10px 14px}.hidden{display:none!important}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.02,1.035)}}@keyframes jab{0%{transform:translate(0) scale(1)}35%{transform:translate(18px) scale(1.06,.95)}55%{transform:translate(11px) scale(1)}to{transform:translate(0) scale(1)}}@keyframes shake{0%{transform:translate(-4px)}to{transform:translate(4px)}}@keyframes recoil{0%{transform:translate(0);filter:none}25%{transform:translate(-12px) rotate(-4deg);filter:brightness(2) sepia(1) hue-rotate(-40deg) saturate(4)}to{transform:translate(0);filter:none}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes rise{0%{transform:translateY(0);opacity:1}to{transform:translateY(-46px);opacity:0}}