@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Noto+Serif+SC:wght@500;600;700;900&display=swap');

:root { --ink:#07100e; --paper:#e9ddbd; --muted:#9b9d8d; --spirit:#6ff2c3; --spirit-hot:#c9ffe9; --gold:#dda849; --blood:#d15341; --violet:#8750d3; --line:rgba(188,221,185,.2); }
* { box-sizing:border-box; }
html,body { width:100%;height:100%; }
body { margin:0;overflow:hidden;color:var(--paper);background:#030807;font-family:"Noto Serif SC",serif; }
button { color:inherit;font:inherit; }
.game-shell { position:relative;width:100vw;height:100dvh;min-height:600px;overflow:hidden;background:#07100e;isolation:isolate; }
#gameCanvas { position:absolute;z-index:0;inset:0;width:100%;height:100%;display:block; }
.world-vignette { position:absolute;z-index:2;inset:0;pointer-events:none;box-shadow:inset 0 0 160px 45px #010504,inset 0 -140px 120px -100px #000; }
.world-vignette::after { content:"";position:absolute;inset:0;opacity:.26;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); }
.corruption-glow { position:absolute;z-index:1;right:-10%;top:-25%;width:48vw;height:65vh;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(91,42,158,.24),transparent 68%);filter:blur(40px); }

.top-command { position:absolute;z-index:10;top:0;left:0;right:0;height:90px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 34px;background:linear-gradient(#050c0ae8 25%,transparent);pointer-events:none; }
.game-brand { display:flex;align-items:center;gap:13px; }
.brand-rune { width:45px;height:45px;display:grid;place-items:center;color:var(--spirit-hot);border:1px solid var(--spirit);box-shadow:inset 0 0 20px #6ff2c322,0 0 18px #6ff2c318;transform:rotate(45deg);font:800 19px Cinzel,serif; }
.game-brand small,.game-brand strong { display:block; }
.game-brand small { margin-bottom:4px;color:var(--spirit);font:700 8px Cinzel,serif;letter-spacing:.25em; }
.game-brand strong { font-size:20px;letter-spacing:.12em; }
.stage-heading { min-width:320px;text-align:center; }
.stage-heading span { display:block;color:var(--gold);font-size:9px;letter-spacing:.38em; }
.stage-heading strong { display:block;margin:2px 0 8px;font-size:19px;letter-spacing:.18em; }
.stage-heading i { display:block;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.top-actions { justify-self:end;display:flex;align-items:center;gap:18px;pointer-events:auto; }
.world-state { color:var(--muted);font-size:10px;letter-spacing:.1em; }
.world-state i { display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--spirit);box-shadow:0 0 12px var(--spirit); }
.icon-button { padding:9px 12px;color:var(--muted);background:#07100e99;border:1px solid var(--line);cursor:pointer; }
.icon-button:hover { color:var(--spirit);border-color:var(--spirit); }

.game-ui { position:absolute;z-index:9;background:linear-gradient(135deg,rgba(8,18,15,.96),rgba(6,12,10,.88));border:1px solid var(--line);box-shadow:0 16px 38px #0007; }
.game-ui::before { content:"";position:absolute;inset:4px;pointer-events:none;border:1px solid rgba(255,255,255,.035); }
.hero-status { top:106px;left:28px;width:350px;height:94px;display:grid;grid-template-columns:82px 1fr 55px;align-items:center;padding:8px 12px 8px 8px;clip-path:polygon(0 0,93% 0,100% 30%,100% 100%,0 100%); }
.hero-portrait { width:72px;height:76px;overflow:hidden;border:1px solid rgba(111,242,195,.4);background:radial-gradient(circle,#315143,#0a1612 70%); }
.hero-portrait img { width:142px;max-width:none;transform:translate(-33px,-5px);filter:drop-shadow(0 8px 12px #000); }
.hero-copy { padding:0 14px 0 12px; }
.hero-copy small,.hero-copy strong { display:block; }
.hero-copy small { color:var(--spirit);font-size:8px;letter-spacing:.2em; }
.hero-copy strong { margin:2px 0 9px;font-size:17px;letter-spacing:.14em; }
.health-row { display:flex;justify-content:space-between;color:var(--muted);font-size:9px; }
.health-row b { color:#fff;font-family:Cinzel,serif; }
.bar { height:5px;overflow:hidden;background:#020605;border:1px solid rgba(255,255,255,.08); }
.bar i { display:block;width:100%;height:100%;transition:width .2s ease; }
.vitality i { background:linear-gradient(90deg,#84362c,#e35e47);box-shadow:0 0 10px var(--blood); }
.spirit-level { text-align:center;border-left:1px solid var(--line); }
.spirit-level span { display:block;color:var(--muted);font-size:8px; }
.spirit-level strong { display:block;color:var(--gold);font:700 28px Cinzel,serif; }

.mission-card { top:106px;right:28px;width:310px;padding:17px 18px 14px; }
.mission-kicker,.mission-progress,.reward-preview { display:flex;align-items:center;justify-content:space-between; }
.mission-kicker span { color:var(--gold);font-size:9px;letter-spacing:.2em; }
.mission-kicker i { color:var(--spirit);font:700 7px Cinzel,serif; }
.mission-card h2 { margin:8px 0 2px;font-size:18px;letter-spacing:.09em; }
.mission-card>p { margin:0 0 12px;color:var(--muted);font-size:10px; }
.mission-progress { gap:12px; }.mission-progress .bar { flex:1; }.mission-progress .bar i { width:0;background:linear-gradient(90deg,#2a7c64,var(--spirit));box-shadow:0 0 10px var(--spirit); }
.mission-progress strong { min-width:45px;text-align:right;font:600 10px Cinzel,serif; }
.reward-preview { margin-top:12px;padding-top:9px;color:var(--muted);border-top:1px solid var(--line);font-size:8px; }.reward-preview b { color:var(--paper); }
.combo-display { position:absolute;z-index:8;top:46%;right:6%;text-align:right;opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s;text-shadow:0 3px 20px #000; }
.combo-display.show { opacity:1;transform:scale(1); }.combo-display strong { display:block;color:var(--spirit-hot);font:italic 800 62px/.8 Cinzel,serif; }.combo-display span { color:var(--gold);font-size:11px;letter-spacing:.4em; }

.combat-dock { left:50%;bottom:22px;min-width:680px;height:84px;transform:translateX(-50%);display:flex;align-items:stretch;padding:8px;border-top-color:rgba(111,242,195,.45); }
.controls-hint { width:86px;display:grid;place-content:center;text-align:center;border-right:1px solid var(--line); }.controls-hint small { margin-top:4px;color:var(--muted);font-size:8px;letter-spacing:.2em; }
kbd { padding:3px 6px;color:var(--paper);background:#020605cc;border:1px solid rgba(233,221,189,.28);font:600 9px Cinzel,serif; }
.ability { position:relative;min-width:190px;display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:10px;padding:6px 12px;text-align:left;background:transparent;border:0;border-right:1px solid var(--line);overflow:hidden; }
button.ability { cursor:pointer; }button.ability:hover { background:rgba(111,242,195,.06); }
.ability-icon { width:48px;height:48px;display:grid;place-items:center;color:var(--spirit-hot);background:radial-gradient(circle,#20473a,#08110e);border:1px solid var(--spirit);box-shadow:inset 0 0 18px #6ff2c320;font-size:25px;transform:rotate(45deg); }
.ability div strong,.ability div small { display:block; }.ability div strong { font-size:12px;letter-spacing:.08em; }.ability div small { color:var(--muted);font-size:8px; }
.ability--active .ability-icon { color:#eadbff;border-color:var(--violet);background:radial-gradient(circle,#47336c,#0f0a17); }
.cooldown-mask { position:absolute;inset:0;pointer-events:none;background:rgba(2,5,4,.72);transform:translateY(100%);transition:transform .1s linear; }
.combat-stats { min-width:178px;display:flex;align-items:center;justify-content:space-around;padding:0 8px; }.combat-stats span { text-align:center; }.combat-stats small,.combat-stats b { display:block; }.combat-stats small { color:var(--muted);font-size:7px;letter-spacing:.12em; }.combat-stats b { margin-top:5px;font:600 14px Cinzel,serif; }

.stage-banner { position:absolute;z-index:12;top:40%;left:50%;width:min(600px,80%);transform:translate(-50%,-50%);text-align:center;text-shadow:0 5px 22px #000;pointer-events:none;opacity:0; }
.stage-banner.show { animation:stageReveal 2.5s ease both; }.stage-banner::before,.stage-banner::after { content:"";display:inline-block;width:70px;height:1px;margin:0 16px 4px;background:linear-gradient(90deg,transparent,var(--gold)); }.stage-banner::after { transform:scaleX(-1); }
.stage-banner small { color:var(--spirit);letter-spacing:.5em; }.stage-banner strong { display:block;margin:5px 0;color:#fff4d6;font-size:clamp(42px,6vw,78px);letter-spacing:.2em; }.stage-banner span { color:var(--muted);font-size:12px;letter-spacing:.15em; }
@keyframes stageReveal { 0%{opacity:0;transform:translate(-50%,-35%) scale(.86)} 16%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-62%) scale(1.05)} }

.overlay-panel { position:absolute;z-index:30;inset:0;display:grid;place-items:center;padding:32px;opacity:0;visibility:hidden;background:radial-gradient(circle at 60%,rgba(18,38,31,.62),rgba(2,7,5,.96));backdrop-filter:blur(9px);transition:opacity .45s,visibility .45s; }
.overlay-panel.is-visible { opacity:1;visibility:visible; }.eyebrow { margin:0 0 9px;color:var(--spirit);font:700 10px Cinzel,serif;letter-spacing:.32em; }
.start-screen { grid-template-columns:minmax(420px,.9fr) minmax(520px,1.1fr);padding:6vh 8vw;background:radial-gradient(circle at 72% 48%,rgba(42,92,71,.48),transparent 36%),linear-gradient(90deg,rgba(2,7,5,.98) 0 40%,rgba(2,7,5,.68) 65%,rgba(2,7,5,.9)); }
.start-screen::before { content:"";position:absolute;inset:0;z-index:-1;opacity:.5;background:url('assets/fungal-arena.webp') center/cover;filter:saturate(.75) brightness(.55); }
.start-copy { max-width:620px;animation:introCopy .9s .15s both; }.start-copy h1 { margin:0;font-size:clamp(42px,5.2vw,74px);line-height:.98;letter-spacing:.06em;text-shadow:0 12px 50px #000; }.start-copy h1 span { display:block;color:var(--gold);font-size:.32em;letter-spacing:.35em; }
.story-lead { max-width:480px;margin:14px 0;color:#b6b8a5;font-size:13px;line-height:1.7; }
.hero-roster { width:min(520px,46vw);display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0; }
.hero-choice { height:58px;display:grid;grid-template-columns:48px 1fr;align-items:center;gap:8px;padding:4px;color:var(--muted);text-align:left;background:rgba(5,13,10,.78);border:1px solid var(--line);cursor:pointer;overflow:hidden;transition:color .18s,border-color .18s,background .18s,transform .18s; }
.hero-choice:hover { color:var(--paper);border-color:rgba(111,242,195,.55);transform:translateY(-2px); }.hero-choice.is-selected { color:var(--spirit-hot);border-color:var(--spirit);background:linear-gradient(90deg,rgba(111,242,195,.16),rgba(5,13,10,.9));box-shadow:inset 2px 0 var(--spirit),0 0 18px #6ff2c318; }
.hero-choice img { width:46px;height:50px;object-fit:cover;object-position:22% 18%;filter:drop-shadow(0 5px 6px #000); }.hero-choice span { display:block;min-width:0; }.hero-choice strong,.hero-choice small { display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.hero-choice strong { font-size:11px;letter-spacing:.08em; }.hero-choice small { color:var(--muted);font:600 7px Cinzel,serif;letter-spacing:.08em; }
.character-tags { display:flex;gap:8px; }.character-tags span { padding:5px 9px;color:var(--spirit);background:rgba(111,242,195,.06);border:1px solid rgba(111,242,195,.22);font-size:8px;letter-spacing:.1em; }
.start-actions { margin-top:14px; }.start-actions p { color:var(--muted);font-size:9px; }.primary-button { min-width:238px;padding:13px 20px;color:#06110d;background:linear-gradient(90deg,#61dbae,#93f3cf);border:0;cursor:pointer;font-weight:900;letter-spacing:.13em;box-shadow:0 0 40px #6ff2c328;transition:transform .2s,box-shadow .2s; }.primary-button i { margin-left:28px;font-style:normal; }.primary-button:hover { transform:translateY(-3px);box-shadow:0 0 55px #6ff2c34a; }
.hero-showcase { position:relative;width:100%;height:100%;min-height:640px;display:grid;place-items:center;animation:introHero 1.1s .1s both; }.hero-showcase>img { position:relative;z-index:2;width:min(690px,54vw);max-height:88vh;object-fit:contain;filter:drop-shadow(0 40px 35px #000) drop-shadow(0 0 35px #6ff2c326);animation:heroFloat 5s ease-in-out infinite;transition:opacity .18s,transform .25s; }
.spirit-ring { position:absolute;width:55vh;height:55vh;border:1px solid rgba(111,242,195,.25);border-radius:50%;box-shadow:0 0 80px #6ff2c312,inset 0 0 80px #6ff2c30d; }.spirit-ring::before,.spirit-ring::after { content:"";position:absolute;inset:12%;border:1px dashed rgba(221,168,73,.24);border-radius:50%; }.ring-one { animation:ringRotate 28s linear infinite; }.ring-two { width:43vh;height:43vh;border-style:dashed;animation:ringRotate 20s linear reverse infinite; }
.hero-nameplate { position:absolute;z-index:3;right:3%;bottom:8%;padding:12px 18px;text-align:right;background:rgba(3,9,7,.74);border-right:2px solid var(--gold);backdrop-filter:blur(7px); }.hero-nameplate small,.hero-nameplate strong,.hero-nameplate span { display:block; }.hero-nameplate small,.hero-nameplate span { color:var(--spirit);font:600 8px Cinzel,serif;letter-spacing:.22em; }.hero-nameplate strong { font:700 27px Cinzel,serif;letter-spacing:.12em; }
@keyframes introCopy { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:none} }@keyframes introHero { from{opacity:0;transform:translateX(50px) scale(.95)} to{opacity:1;transform:none} }@keyframes heroFloat { 50%{transform:translateY(-10px) rotate(.5deg)} }@keyframes ringRotate { to{transform:rotate(360deg)} }

.upgrade-wrap { width:min(1060px,100%);text-align:center; }.upgrade-wrap h2,.end-card h2 { margin:0;font-size:clamp(36px,5vw,64px);letter-spacing:.13em; }.upgrade-wrap>p:not(.eyebrow),.end-card>p:not(.eyebrow) { color:var(--muted); }
.upgrade-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px; }.upgrade-card { min-height:310px;position:relative;padding:30px 26px;color:var(--paper);text-align:left;overflow:hidden;background:linear-gradient(155deg,#17241e,#070c0a 65%);border:1px solid rgba(221,168,73,.4);cursor:pointer;transition:transform .22s,border-color .22s,box-shadow .22s; }.upgrade-card::before { content:attr(data-rune);position:absolute;right:-15px;bottom:-42px;color:rgba(111,242,195,.055);font:700 180px Cinzel,serif; }.upgrade-card::after { content:"";position:absolute;top:0;left:18%;right:18%;height:1px;background:var(--spirit);box-shadow:0 0 14px var(--spirit); }.upgrade-card:hover { transform:translateY(-9px);border-color:var(--spirit);box-shadow:0 25px 55px #000,inset 0 0 35px #6ff2c30c; }.upgrade-card small { color:var(--spirit);letter-spacing:.18em; }.upgrade-card h3 { margin:30px 0 13px;font-size:24px; }.upgrade-card p { color:var(--muted);line-height:1.7; }.upgrade-card strong { position:absolute;bottom:28px;color:var(--gold); }
.end-card { width:min(680px,100%);padding:50px;text-align:center;background:rgba(7,15,12,.88);border:1px solid rgba(221,168,73,.55);box-shadow:0 30px 90px #000; }.final-stats { display:flex;justify-content:center;gap:35px;margin:27px 0;color:var(--gold); }
.mobile-pad { display:none;position:absolute;z-index:16;left:20px;bottom:22px;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:4px; }.mobile-pad button { color:#fff;background:#07100ebb;border:1px solid var(--line);touch-action:none; }.mobile-pad [data-key="up"]{grid-column:2}.mobile-pad [data-key="left"]{grid-row:2;grid-column:1}.mobile-pad [data-key="down"]{grid-row:2;grid-column:2}.mobile-pad [data-key="right"]{grid-row:2;grid-column:3}

@media (max-width:900px),(pointer:coarse) {
  .game-shell{min-height:520px}.top-command{height:64px;padding:9px 14px;grid-template-columns:1fr auto}.stage-heading{position:absolute;left:50%;transform:translateX(-50%);min-width:170px}.stage-heading strong{font-size:13px}.stage-heading span{font-size:7px}.game-brand small,.game-brand strong,.top-actions .world-state{display:none}.brand-rune{width:34px;height:34px;font-size:14px}
  .hero-status{top:72px;left:10px;width:245px;height:75px;grid-template-columns:58px 1fr 42px}.hero-portrait{width:52px;height:58px}.hero-portrait img{width:105px;transform:translate(-26px,-4px)}.hero-copy strong{font-size:13px;margin-bottom:5px}.mission-card{top:72px;right:10px;width:210px;padding:11px}.mission-card>p,.reward-preview{display:none}.mission-card h2{font-size:13px}
  .combat-dock{min-width:0;width:auto;left:auto;right:12px;bottom:12px;transform:none;height:68px}.controls-hint,.ability--auto,.combat-stats{display:none}.ability{min-width:174px}.ability-icon{width:40px;height:40px}.mobile-pad{display:grid}.combo-display{right:4%}
  .start-screen{grid-template-columns:1fr;padding:20px}.start-copy{position:relative;z-index:4}.start-copy h1{font-size:42px}.hero-roster{width:min(520px,92vw)}.hero-showcase{position:absolute;inset:0;min-height:0;justify-items:end;opacity:.2!important}.hero-showcase>img{width:82vw}.hero-nameplate,.spirit-ring{display:none}
  .upgrade-grid{grid-template-columns:1fr;max-height:63vh;overflow:auto;padding:5px}.upgrade-card{min-height:190px}.upgrade-card strong{position:static;display:block;margin-top:15px}
}