@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Inter:wght@400;500;600&display=swap";:root{--bg-deep: #0B1426;--panel-glass: rgba(15, 24, 43, .55);--panel-glass-elev: rgba(22, 32, 53, .75);--gold-trim: #D4A650;--gold-trim-dim: rgba(212, 166, 80, .5);--gold-glow: rgba(212, 166, 80, .35);--text-parchment: #F5E6C8;--text-muted: rgba(245, 230, 200, .62);--hp-red: #C23B3B;--hp-bg: rgba(194, 59, 59, .25);--crit-orange: #F5A54A;--font-display: "Cinzel", "Georgia", serif;--font-body: "Inter", system-ui, sans-serif;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 24px;--sp-6: 32px;--sp-8: 48px;--sp-10: 64px;--r-sm: 4px;--r-md: 8px;--r-lg: 12px;--shadow-glow: 0 0 20px rgba(212, 166, 80, .25);--shadow-panel: 0 12px 40px rgba(0, 0, 0, .55);--t-fast: .15s ease-out;--t-med: .25s ease-out}html,body,#root{height:100%}body{margin:0;font-family:var(--font-body);color:var(--text-parchment);background:var(--bg-deep);overflow:hidden}.panel{background:var(--panel-glass);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);border:1px solid var(--gold-trim-dim);border-radius:var(--r-lg);box-shadow:var(--shadow-panel);padding:var(--sp-6);position:relative}.panel:before{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border:1px solid rgba(212,166,80,.15);border-radius:calc(var(--r-lg) - 3px);pointer-events:none}.panel__title{font-family:var(--font-display);font-weight:700;font-size:28px;letter-spacing:.08em;color:var(--gold-trim);text-align:center;margin:0 0 var(--sp-5);text-shadow:0 0 20px var(--gold-glow)}.btn{font-family:var(--font-display);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-parchment);background:linear-gradient(180deg,#d4a6502e,#d4a65014);border:1px solid var(--gold-trim-dim);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-5);cursor:pointer;transition:all var(--t-fast);font-size:14px}.btn:hover{background:linear-gradient(180deg,#d4a65059,#d4a65026);border-color:var(--gold-trim);color:var(--gold-trim);box-shadow:0 0 18px var(--gold-glow)}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline:2px solid var(--gold-trim);outline-offset:2px}.btn--hero{font-size:18px;padding:var(--sp-4) var(--sp-8);letter-spacing:.14em}.btn--ghost{background:transparent;border-color:#d4a6504d}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.input,.textarea{width:100%;font-family:var(--font-body);font-size:14px;color:var(--text-parchment);background:var(--panel-glass-elev);border:1px solid rgba(212,166,80,.25);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);transition:border-color var(--t-fast),box-shadow var(--t-fast);box-sizing:border-box}.input:focus,.textarea:focus{outline:none;border-color:var(--gold-trim);box-shadow:0 0 0 3px var(--gold-glow)}.input::placeholder,.textarea::placeholder{color:var(--text-muted);font-style:italic}.textarea{resize:vertical;min-height:90px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}.field-label{display:block;font-family:var(--font-display);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-trim);margin-bottom:var(--sp-2)}.battle-hud-top{position:absolute;top:var(--sp-4);left:var(--sp-4);right:var(--sp-4);z-index:5;display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,auto) minmax(0,1fr);gap:var(--sp-3);align-items:start;pointer-events:none}.fighter-hud{display:flex;flex-direction:column;gap:var(--sp-1);width:min(280px,100%)}.fighter-hud--player{justify-self:start;align-items:flex-start}.fighter-hud--opponent{justify-self:end;align-items:flex-end}.hp-bar-wrap{display:flex;flex-direction:column;width:100%;gap:3px}.hp-bar-wrap--left{align-items:flex-start}.hp-bar-wrap--right{align-items:flex-end}.hp-count{font-size:10px;color:var(--text-muted);font-variant-numeric:tabular-nums;font-family:var(--font-display);letter-spacing:.05em}.turn-indicator-cell{display:flex;justify-content:center;align-items:flex-start}.fighter-hud__name{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.1em;color:var(--gold-trim);text-shadow:0 2px 8px rgba(0,0,0,.9);margin-bottom:var(--sp-1)}.turn-indicator{font-family:var(--font-display);font-size:14px;color:var(--text-parchment);background:var(--panel-glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--gold-trim-dim);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-4);letter-spacing:.15em;white-space:nowrap}.stat-pill-row{display:flex;gap:var(--sp-2);margin-top:var(--sp-2)}.stat-pill{flex:1;background:var(--panel-glass-elev);border:1px solid rgba(212,166,80,.2);border-radius:var(--r-sm);padding:var(--sp-1) var(--sp-2);text-align:center;min-width:52px}.stat-pill__label{display:block;font-size:9px;letter-spacing:.15em;color:var(--gold-trim);text-transform:uppercase;font-weight:600}.stat-pill__value{display:block;font-size:14px;font-weight:600;color:var(--text-parchment);font-variant-numeric:tabular-nums}.hp-bar{width:100%;height:14px;background:var(--hp-bg);border:1px solid var(--gold-trim-dim);border-radius:999px;position:relative;overflow:hidden}.hp-bar__fill{height:100%;background:linear-gradient(180deg,#E55353 0%,var(--hp-red) 100%);box-shadow:inset 0 1px #ffffff40;transition:width .4s cubic-bezier(.2,.8,.2,1);border-radius:inherit}.hp-label{font-family:var(--font-display);font-weight:500;font-size:12px;letter-spacing:.1em;color:var(--text-parchment);margin-bottom:var(--sp-1);font-variant-numeric:tabular-nums}.float-number{position:absolute;font-family:var(--font-display);font-weight:700;font-size:22px;color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 0 12px rgba(194,59,59,.8);pointer-events:none;animation:float-up 1s ease-out forwards;font-variant-numeric:tabular-nums}.float-number--crit{color:var(--crit-orange);font-size:32px;text-shadow:-1.5px -1.5px 0 #000,1.5px -1.5px 0 #000,-1.5px 1.5px 0 #000,1.5px 1.5px 0 #000,0 0 18px var(--crit-orange)}.float-number--miss{color:#9ec3df;font-size:18px}@keyframes float-up{0%{transform:translateY(0);opacity:1}70%{opacity:1}to{transform:translateY(-36px);opacity:0}}.battle-stage{width:min(85vw,calc(85vh * 568 / 385));aspect-ratio:568 / 385;position:relative;border:1px solid var(--gold-trim-dim);border-radius:var(--r-md);box-shadow:var(--shadow-panel),var(--shadow-glow);overflow:hidden}.battle-stage canvas{display:block;width:100%;height:100%}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}