@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Rajdhani:wght@500;600;700&display=swap');
:root{--gold:#e6bd63;--cream:#eee9db;--muted:#97958a;--ink:#10120f;--mono:'DM Mono',monospace;--display:'Rajdhani',sans-serif}*{box-sizing:border-box}body{margin:0;background:#11130f;color:var(--cream);font-family:Manrope,Arial,sans-serif;min-height:100vh;background-image:radial-gradient(ellipse at 50% 0%,#25261d 0,transparent 58%)}button{font:inherit}.app{max-width:1440px;margin:auto;padding:0 48px}.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12}.brand{color:#eae7dc;text-decoration:none;display:flex;gap:13px;align-items:center;font:700 17px var(--display);letter-spacing:3px}.brand-mark{font-size:22px;color:var(--gold);border:1px solid #dbb55d66;width:34px;height:34px;text-align:center;line-height:32px}.brand-gold{color:var(--gold)}.top-actions{display:flex;align-items:center;gap:12px}.status,.eyebrow{font:500 10px var(--mono);letter-spacing:1.8px;color:#a8a496}.status{margin-right:14px}.status i,.fighter-tag i{display:inline-block;background:#9bb57b;width:6px;height:6px;border-radius:50%;margin-right:9px;box-shadow:0 0 10px #b6db83}.icon-btn{border:1px solid #ffffff20;background:#ffffff05;color:#c5c1b3;height:35px;width:38px;cursor:pointer;font-size:17px}.icon-btn:hover{color:var(--gold);border-color:#d9b76088}.game-shell{padding-top:27px}.arena{height:min(57vw,580px);min-height:430px;max-height:580px;position:relative;overflow:hidden;background:#25281b;border:1px solid #ffffff1b;isolation:isolate}#scene{position:absolute;inset:0;width:100%;height:100%;z-index:-2}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#10120f8c 0%,transparent 26%,transparent 70%,#10120f9c 100%),linear-gradient(90deg,#10120f36,transparent 28%,transparent 75%,#10120f4a)}.scanline{position:absolute;inset:0;opacity:.12;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,#0b0d0b 4px)}.hud-top{position:absolute;top:24px;left:30px;right:30px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start}.hud-top strong{display:block;font:600 21px var(--display);letter-spacing:1px;margin-top:5px}.hud-top strong b{color:var(--gold);font-weight:500}.hud-objective{text-align:center;width:210px;justify-self:center}.hud-objective strong{font-size:23px}.hud-objective small{font:500 12px var(--mono);color:#c1bdaf}.hud-health{text-align:right}.meter{height:3px;background:#ffffff28;margin-top:8px;overflow:hidden}.enemy-meter{width:130px;margin:8px auto 0}.health-meter{width:110px;margin-left:auto}.meter i{display:block;height:100%;width:100%;transition:width .35s;background:var(--gold);box-shadow:0 0 8px #e6bd63}.health-meter i{background:#c9d291}.fighter-tag{position:absolute;bottom:53px;color:#eee9db;font:500 10px var(--mono);letter-spacing:1.5px}.fighter-tag small{color:#a8a496;font-size:9px;margin-left:8px}.hero-tag{left:7%}.shield-status,.hero-tag em{font-style:normal;color:#dc8069;font-size:8px;letter-spacing:1px;margin-left:14px;padding:4px 6px;border:1px solid #dc806966}.hero-tag em.active{color:#8bd6c2;border-color:#8bd6c288;box-shadow:0 0 10px #8bd6c244}.enemy-tag{right:7%}.enemy-tag i{background:#df8465;box-shadow:0 0 10px #df8465}.arena-bottom{position:absolute;bottom:16px;left:30px;right:30px;display:flex;justify-content:space-between;color:#c1bcab;font:10px var(--mono);letter-spacing:1.4px}.arena-bottom span:last-child{color:#d1b56c}.combat-callout{position:absolute;top:47%;left:50%;transform:translate(-50%,-50%);font:700 26px var(--display);letter-spacing:5px;color:#f4d276;text-shadow:0 0 15px #efb544;opacity:0;pointer-events:none}.combat-callout.show{animation:callout .8s ease-out}@keyframes callout{0%{opacity:0;transform:translate(-50%,-25%) scale(.8)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-90%) scale(1.15)}}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#090b09b0;backdrop-filter:blur(3px);z-index:4;transition:opacity .4s}.overlay.hidden{opacity:0;pointer-events:none}.overlay-card{text-align:center;margin-top:8px}.sigil{font-size:33px;color:var(--gold);margin-bottom:13px}.overlay-card h1{font:700 66px/.95 var(--display);letter-spacing:7px;margin:12px 0;color:#f3efdf}.overlay-card h1 span{color:var(--gold)}.overlay-card p{font-size:14px;line-height:1.9;color:#bbb9ad;margin:15px 0 26px}.primary-btn{cursor:pointer;background:var(--gold);border:0;color:#171610;padding:15px 25px;font:700 11px var(--mono);letter-spacing:1.1px;transition:.2s}.primary-btn:hover{background:#f2d587;transform:translateY(-2px)}.primary-btn span{font-size:17px;margin-left:22px}.overlay-foot{font:9px var(--mono);letter-spacing:1.2px;color:#99978d;margin-top:24px}.overlay-foot b{color:var(--gold);margin:0 8px}.typing-panel{background:linear-gradient(110deg,#171a16ed,#131612f2);border:1px solid #ffffff20;border-top:2px solid #d4ae5c;margin-top:10px;padding:17px 30px 13px;position:relative;transition:border-color .2s}.typing-panel.error{border-top-color:#d97963;animation:shake .22s}@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}.typing-top{display:flex;justify-content:space-between;align-items:center}.typing-hint{font:10px var(--mono);letter-spacing:1px;color:#77796f;margin-left:13px}.metrics{display:flex;gap:25px}.metrics span{display:flex;align-items:baseline;gap:6px}.metrics b{font:500 14px var(--mono);color:#e0c373}.metrics small{font:9px var(--mono);letter-spacing:1px;color:#797b72}.story-window{height:108px;display:block;overflow:hidden;position:relative;scroll-behavior:smooth}.story-text{font:500 clamp(23px,3vw,35px)/1.55 var(--display);letter-spacing:.3px;white-space:normal;color:#a4a78b;word-break:normal;padding:0 2px}.done{color:#f3efe4}.remaining{color:#a2a48a;opacity:.75}.caret{display:inline-block;width:2px;height:1.05em;background:#e9c86d;vertical-align:-.13em;margin:0 1px;animation:blink 1s steps(2,start) infinite;box-shadow:0 0 9px #f1cb60}@keyframes blink{to{visibility:hidden}}.typing-bottom{display:flex;justify-content:space-between;font:9px var(--mono);letter-spacing:1px;color:#77796f}.typing-bottom b{font-weight:400;color:#aaa99b}.key-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);margin-right:4px}#keyboard{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;left:-9999px}footer{display:flex;justify-content:space-between;padding:16px 2px;color:#77776d;font:9px var(--mono);letter-spacing:1.2px}footer b{color:#bca65e;font-weight:400}
@media(max-width:700px){.app{padding:0 14px}.topbar{height:62px}.status{display:none}.game-shell{padding-top:14px}.arena{height:55vh;min-height:380px}.hud-top{top:15px;left:14px;right:14px}.eyebrow{font-size:8px;letter-spacing:1px}.hud-top strong{font-size:16px}.hud-objective{width:130px}.enemy-meter{width:90px}.health-meter{width:75px}.fighter-tag{bottom:42px;font-size:8px}.fighter-tag small{display:block;margin:3px 0 0}.arena-bottom{left:14px;right:14px;font-size:8px}.typing-panel{padding:14px 14px 12px}.typing-hint{display:none}.metrics{gap:10px}.metrics small{font-size:7px}.metrics b{font-size:11px}.story-window{height:112px}.story-text{font-size:25px}.typing-bottom{font-size:8px}footer{font-size:7px}.overlay-card h1{font-size:52px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
