@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  --gold: #d6b66b;
  --gold-bright: #ffe6a2;
  --ink: #06101b;
  --panel: rgba(5, 12, 22, 0.82);
  --line: rgba(199, 178, 119, 0.46);
  --green: #66ed8a;
  --cyan: #67d8ff;
  --violet: #b46cff;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #03070d; }
body { font-family: Inter, system-ui, sans-serif; color: #f5f2e8; user-select: none; }
button, kbd { font: inherit; }

#game-shell { position: fixed; inset: 0; overflow: hidden; background: #071424; }
#game { width: 100%; height: 100%; display: block; image-rendering: pixelated; cursor: crosshair; outline: none; }
#hud { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
#hud.active { opacity: 1; }

.glass-panel {
  background: linear-gradient(135deg, rgba(8,17,29,.9), rgba(3,8,15,.72));
  border: 1px solid var(--line);
  box-shadow: 0 0 0 1px rgba(0,0,0,.75), inset 0 0 22px rgba(75,125,151,.08), 0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(3px);
}

.player-frame { position: absolute; left: 14px; top: 12px; width: 270px; height: 68px; display: flex; align-items: center; padding: 7px 10px 7px 66px; clip-path: polygon(4% 0, 100% 0, 97% 100%, 3% 100%, 0 50%); }
.player-frame.damaged { animation:playerDamaged .32s ease-out; }
.portrait { position: absolute; left: 5px; top: 4px; width: 56px; height: 56px; border: 2px solid #bda56a; border-radius: 50%; background: radial-gradient(circle at 54% 40%, #f7d2aa 0 12%, #d8a87a 13% 20%, transparent 21%), linear-gradient(145deg,#eeddaa 0 32%,#9d7547 33% 38%,#263c27 39%); box-shadow: 0 0 0 2px #17281d,0 0 18px rgba(120,229,135,.3); }
.portrait:before { content:""; position:absolute; left:7px; top:15px; width:28px; height:34px; background:#f1c69d; clip-path:polygon(30% 0,85% 8%,100% 50%,70% 100%,28% 92%,0 46%); }
.portrait:after { content:""; position:absolute; left:4px; top:5px; width:42px; height:32px; background:#f2deaa; clip-path:polygon(0 0,100% 0,81% 30%,95% 70%,55% 54%,28% 100%,20% 38%); }
.portrait-ear { position:absolute; z-index:3; right:2px; top:22px; width:18px; height:10px; background:#f4cda8; clip-path:polygon(0 40%,100% 0,34% 100%); transform:rotate(-8deg); }
.player-info { flex: 1; }
.name-row { font-family: Cinzel, serif; display:flex; align-items:center; justify-content:space-between; font-size:13px; letter-spacing:.08em; margin-bottom:4px; }
.name-row span { font-family: Inter,sans-serif; color:#c5cfda; font-size:10px; letter-spacing:0; }
.meter { height: 11px; position:relative; margin:3px 0; border:1px solid #0b0f12; background:#071018; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); overflow:hidden; }
.meter i { display:block; height:100%; width:100%; transition:width .2s; }
.meter.hp i { background:linear-gradient(#ff6c55,#9e1224 60%,#680915); }
.meter.mana i { background:linear-gradient(#54caff,#176ca7 60%,#103c72); }
.meter em { position:absolute; inset:0; text-align:center; font-style:normal; font-size:8px; line-height:10px; text-shadow:0 1px 2px #000; }

.party-list { position:absolute; left:15px; top:88px; width:174px; display:grid; gap:4px; }
.party-member { height:36px; display:flex; align-items:center; gap:6px; text-shadow:0 1px 2px #000; }
.party-member .mini-portrait { width:32px; height:32px; border:1px solid #a88d53; background:radial-gradient(circle at 52% 35%,#e5ae87 0 20%,transparent 21%),linear-gradient(135deg,#59402e,#132136); position:relative; }
.party-member .mage { box-shadow:inset 0 0 16px #853ce0; }
.party-member .rogue { box-shadow:inset 0 0 16px #3b4e8c; }
.party-member .healer { box-shadow:inset 0 0 16px #2b9a5a; }
.party-member div { flex:1; font-size:10px; }
.party-member b,.party-member small { display:block; }
.party-member small { color:#8fa0b3; font-size:8px; }
.party-member i { display:block; margin-top:3px; width:100%; height:4px; background:linear-gradient(90deg,#cb2634 0 86%,#17202b 86%); border:1px solid #020408; }

.zone-title { position:absolute; top:18px; left:50%; transform:translateX(-50%); width:430px; text-align:center; font-family:Cinzel,serif; text-shadow:0 2px 5px #000; }
.zone-title:before,.zone-title:after { content:""; display:inline-block; vertical-align:middle; width:62px; height:1px; margin:0 12px; background:linear-gradient(90deg,transparent,var(--gold)); }
.zone-title:after { background:linear-gradient(90deg,var(--gold),transparent); }
.zone-title span { font-size:18px; letter-spacing:.13em; }
.zone-title small { display:block; margin-top:6px; color:#b8c7d9; font-size:9px; letter-spacing:.25em; }

.map-panel { position:absolute; right:14px; top:12px; width:196px; padding:5px 7px 7px; }
.map-head { display:flex; justify-content:space-between; font-size:8px; margin-bottom:4px; color:#dce6ef; }
#minimap { width:180px; height:72px; display:block; border:1px solid rgba(202,180,118,.35); background:#07131d; image-rendering:pixelated; }
.quest-panel { position:absolute; right:14px; top:112px; width:236px; padding:8px 10px 9px; font-size:9px; }
.quest-panel header { font-family:Cinzel,serif; letter-spacing:.12em; padding-bottom:7px; margin-bottom:5px; border-bottom:1px solid rgba(214,182,107,.28); }
.quest-panel div { margin:6px 0; }
.quest-panel b { display:block; color:#e4bd51; font-size:9px; }
.quest-panel span { display:flex; justify-content:space-between; padding-left:13px; color:#c3cbd3; font-size:8px; margin-top:2px; }
.quest-panel strong { color:#fff; }
.quest-panel.quest-progress { animation:questProgress .58s ease-out; }

.chat { position:absolute; left:14px; bottom:95px; width:274px; height:106px; padding:6px 8px; font-size:8px; overflow:hidden; }
.chat nav { display:flex; gap:14px; border-bottom:1px solid rgba(255,255,255,.15); padding-bottom:4px; margin-bottom:4px; color:#8896a6; }
.chat nav b { color:white; }
.chat p { margin:3px 0; white-space:nowrap; }
.chat i { color:#5dc7ed; font-style:normal; }

.action-dock { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:5px; align-items:flex-end; padding:0 0 15px; pointer-events:auto; }
.ability { position:relative; width:54px; height:54px; border:1px solid #ad9860; background:linear-gradient(#102031,#050a10); box-shadow:0 0 0 2px rgba(0,0,0,.8),inset 0 0 12px rgba(99,233,140,.15); }
.ability.ultimate { width:64px; height:64px; border-radius:50%; border-color:#e7c665; box-shadow:0 0 0 3px rgba(17,9,3,.8),0 0 20px rgba(116,248,118,.35),inset 0 0 20px #174a27; }
.ability kbd { position:absolute; z-index:3; left:3px; top:2px; color:#fff; font-size:8px; background:rgba(0,0,0,.55); border:0; padding:1px 3px; }
.ability b { position:absolute; top:57px; left:50%; transform:translateX(-50%); font-size:6px; letter-spacing:.04em; color:#aeb8c5; white-space:nowrap; text-shadow:0 1px 2px #000; }
.ability.ultimate b { top:66px; color:#ddc276; }
.ability .icon { position:absolute; inset:4px; overflow:hidden; background:radial-gradient(circle,#bbff98 0 8%,#3bd465 9% 18%,#0d572e 45%,#061b15 70%); }
.ability .icon:before,.ability .icon:after { content:""; position:absolute; background:#d9ffc9; box-shadow:0 0 6px #5bff79; }
.ability .icon:before { width:34px; height:3px; left:7px; top:22px; transform:rotate(-22deg); }
.ability .icon:after { width:9px; height:9px; border-radius:50%; right:6px; top:15px; }
.ability .power { background:radial-gradient(circle,#fff2aa,#dc9d28 25%,#453018 60%,#0d1117 75%); }
.ability .volley:before { width:3px;height:32px;left:15px;top:7px;box-shadow:8px 2px 5px #5bff79,16px -2px 5px #5bff79;transform:rotate(18deg); }
.ability .thorn:before { width:38px;height:16px;left:4px;top:22px;clip-path:polygon(0 100%,18% 20%,28% 100%,44% 0,55% 100%,72% 30%,82% 100%,100% 40%,100% 100%); }
.ability .wind { background:radial-gradient(circle,#e6ffff,#4bdde7 18%,#14536c 45%,#081721 70%); }
.ability .gale-barrage { background:radial-gradient(circle,#efffd5 0 7%,#69efa0 12% 24%,#167252 45%,#071b1a 72%); }
.ability .gale-barrage:before { width:35px;height:2px;left:6px;top:22px;transform:rotate(-16deg);background:#dfffc8;box-shadow:0 -8px 5px #68ff9e,0 8px 5px #68ff9e; }
.ability .gale-barrage:after { width:8px;height:8px;right:5px;top:18px;background:#efffd7;box-shadow:0 0 9px #66f49a; }
.ability .spirit { background:radial-gradient(circle,#f0fff2,#6aff91 22%,#107b47 45%,#071b22 70%); }
.ability .wrath { border-radius:50%; background:radial-gradient(circle,#fffdd2 0 8%,#87ff82 12% 25%,#287f3d 30% 45%,#071b11 67%); }
.ability .wrath:before { transform:rotate(-45deg); left:9px; top:27px; width:40px; }
.ability .cooldown { position:absolute; inset:0; background:rgba(2,6,10,.74); transform-origin:bottom; transform:scaleY(0); transition:transform .05s linear; }
.ability.cooling .cooldown { transform:scaleY(var(--cooldown, .5)); }
.ability.ready { animation:readyPulse .48s ease; z-index:2; }
.ability-tooltip { position:absolute; z-index:20; left:50%; bottom:calc(100% + 14px); width:248px; padding:10px 11px 9px; color:#cbd6dd; background:linear-gradient(180deg,rgba(7,16,24,.97),rgba(2,7,12,.97)); border:1px solid rgba(194,164,91,.72); box-shadow:0 0 0 1px #020507,0 10px 28px rgba(0,0,0,.62),inset 0 1px rgba(255,236,174,.06); transform:translate(-50%,7px); opacity:0; visibility:hidden; transition:opacity .12s ease,transform .12s ease,visibility .12s; pointer-events:none; text-align:left; font-family:Inter,sans-serif; line-height:1.35; }
.ability-tooltip:after { content:""; position:absolute; left:50%; top:100%; width:9px; height:9px; background:#030912; border-right:1px solid rgba(194,164,91,.72); border-bottom:1px solid rgba(194,164,91,.72); transform:translate(-50%,-4px) rotate(45deg); }
.ability-tooltip strong,.ability-tooltip em,.ability-tooltip small { display:block; position:relative; z-index:1; }
.ability-tooltip strong { color:#ead99f; font-family:Cinzel,serif; font-size:11px; letter-spacing:.09em; }
.ability-tooltip em { margin-top:6px; color:#c8d1d7; font-size:9px; font-style:normal; }
.ability-tooltip small { margin-top:7px; padding-top:6px; color:#7ff09c; border-top:1px solid rgba(190,164,96,.2); font-size:8px; letter-spacing:.05em; }
.ability:hover .ability-tooltip,.ability:focus-visible .ability-tooltip { opacity:1; visibility:visible; transform:translate(-50%,0); }
.ability:focus-visible { outline:1px solid #f0d477; outline-offset:3px; }
@keyframes readyPulse { 0%{filter:brightness(1);transform:translateY(0)}45%{filter:brightness(2.05) drop-shadow(0 0 8px #8aff9b);transform:translateY(-4px) scale(1.05)}100%{filter:brightness(1);transform:translateY(0)} }
.xp-row { position:absolute; left:0; right:0; bottom:0; height:9px; display:flex; align-items:center; gap:5px; font-size:7px; }
.xp-row > i { flex:1; height:5px; background:#070b10; border:1px solid #334a52; }
.xp-row em { display:block; height:100%; width:62%; background:linear-gradient(90deg,#2c8e5a,#69e898); }

.currency { position:absolute; right:17px; bottom:17px; display:flex; gap:5px; align-items:center; font-size:10px; text-shadow:0 1px 2px #000; }
.currency .coin { color:#ffc943; font-size:15px; }.currency .essence{color:#63ffad;font-size:14px;margin-left:10px;}
.controls-hint { position:absolute; bottom:93px; left:50%; transform:translateX(-50%); padding:6px 12px; color:rgba(220,232,240,.66); font-size:8px; letter-spacing:.08em; background:rgba(3,8,14,.45); border-radius:2px; transition:opacity 1s; }
.controls-hint b { color:#e7cf91; margin-left:8px; }

.target-frame { position:absolute; top:83px; left:50%; transform:translateX(-50%); width:205px; text-align:center; padding:5px 8px 7px; font-family:Cinzel,serif; }
.target-frame.target-hit { animation:targetHit .2s ease-out; }
.target-frame b { font-size:10px; letter-spacing:.1em; }.target-frame span{font-size:8px;color:#aab8c6;margin-left:7px}.target-frame div{height:5px;background:#18070a;margin-top:5px;border:1px solid #050404}.target-frame i{display:block;height:100%;width:100%;background:#c32a33;}
.boss-frame { position:absolute; top:74px; left:50%; transform:translateX(-50%); width:510px; text-align:center; font-family:Cinzel,serif; text-shadow:0 2px 3px #000; }
.boss-frame small { display:block; font-size:7px; letter-spacing:.3em; color:#e0bd65; }.boss-frame b{font-size:17px;letter-spacing:.13em}.boss-frame em{display:block;font-style:normal;font-size:7px;color:#cbd1d7;margin:2px}.boss-frame div{height:10px;background:#16070d;border:1px solid #c89a56;box-shadow:0 0 0 1px #000}.boss-frame i{display:block;height:100%;width:100%;background:linear-gradient(#ff6654,#9b1027);transition:width .2s;}
.event-toast { position:absolute; top:25%; left:50%; transform:translate(-50%,-50%); width:430px; padding:14px; text-align:center; background:linear-gradient(90deg,transparent,rgba(3,9,13,.86) 18% 82%,transparent); text-shadow:0 2px 5px #000; animation:eventIn 4.8s ease both; }
.event-toast small,.event-toast span{display:block;font-size:8px;letter-spacing:.23em;color:#c6b37c}.event-toast b{display:block;font-family:Cinzel,serif;font-size:20px;letter-spacing:.1em;margin:5px}.event-toast span{color:#c9d3dc;letter-spacing:.08em}
@keyframes eventIn{0%{opacity:0;transform:translate(-50%,-35%)}10%,82%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-60%)}}
.hidden { display:none!important; }

@keyframes playerDamaged {
  0% { filter:brightness(1); transform:translateX(0); }
  18% { filter:brightness(2.1) drop-shadow(0 0 9px rgba(255,53,70,.8)); transform:translateX(-5px); }
  42% { transform:translateX(4px); }
  68% { transform:translateX(-2px); }
  100% { filter:brightness(1); transform:translateX(0); }
}
@keyframes targetHit {
  0% { filter:brightness(1); transform:translateX(-50%) scale(1); }
  45% { filter:brightness(2.25) drop-shadow(0 0 7px rgba(255,95,110,.72)); transform:translateX(-50%) scale(1.035); }
  100% { filter:brightness(1); transform:translateX(-50%) scale(1); }
}
@keyframes questProgress {
  0% { filter:brightness(1); }
  40% { filter:brightness(1.8) drop-shadow(0 0 8px rgba(232,192,73,.65)); }
  100% { filter:brightness(1); }
}

#hud[data-class="ranger"] .action-dock { box-shadow:inset 0 -1px rgba(107,238,135,.2); }
#hud[data-class="rogue"] .action-dock { box-shadow:inset 0 -1px rgba(186,104,245,.28); }
#hud[data-class="rogue"] .ability { border-color:#9b71be; box-shadow:0 0 0 2px rgba(0,0,0,.78),inset 0 0 12px rgba(177,78,236,.2); }
#hud[data-class="rogue"] .ability.ultimate { border-color:#c79be8; box-shadow:0 0 0 2px rgba(17,9,3,.82),0 0 15px rgba(177,78,236,.32),inset 0 0 16px #35144e; }

#start-screen { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:radial-gradient(circle at 50% 43%,rgba(12,44,56,.16),rgba(2,5,10,.74)); text-shadow:0 3px 12px #000; transition:opacity .7s,visibility .7s; }
#start-screen.dismissed { opacity:0; visibility:hidden; }
.start-crest { color:#badb9d; font-size:40px; filter:drop-shadow(0 0 15px #4daa65); margin-bottom:12px; }
.eyebrow { margin:0 0 12px; color:#c2b483; font-size:9px; letter-spacing:.35em; }
h1 { margin:0; font-family:Cinzel,serif; font-size:58px; line-height:.88; letter-spacing:.08em; font-weight:600; }
h1 span { color:#d8c287; font-size:.75em; letter-spacing:.22em; }
.intro { width:min(560px,82vw); color:#cbd4dc; font-family:Cinzel,serif; font-size:12px; line-height:1.7; }
#enter-button { pointer-events:auto; margin-top:14px; padding:13px 32px; border:1px solid #c4a968; color:#fff4cf; font-family:Cinzel,serif; font-weight:600; letter-spacing:.14em; background:linear-gradient(#294733,#14251e); box-shadow:0 0 25px rgba(87,211,110,.18),inset 0 0 20px rgba(101,203,128,.1); cursor:pointer; }
#enter-button:hover { filter:brightness(1.25); transform:translateY(-1px); }
.start-controls { margin-top:22px; color:#8d9aa4; font-size:8px; letter-spacing:.12em; }

#loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:#050b13; font-family:Cinzel,serif; font-size:10px; letter-spacing:.2em; transition:opacity .5s,visibility .5s; }
#loading.ready { opacity:0; visibility:hidden; }
#loading span { width:34px; height:34px; border:2px solid rgba(208,184,112,.2); border-top-color:#8fe69c; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Compact MMO HUD pass, keyed to the restrained framing in references 6–7. */
:root { --panel:rgba(3,9,15,.76); --line:rgba(190,164,96,.52); }
.glass-panel { background:linear-gradient(180deg,rgba(4,11,17,.82),rgba(2,7,12,.67)); border-color:var(--line); box-shadow:0 0 0 1px rgba(0,0,0,.72),inset 0 1px rgba(255,232,164,.05),0 5px 16px rgba(0,0,0,.28); backdrop-filter:blur(1.5px); }
.player-frame { left:11px; top:10px; width:246px; height:62px; padding:6px 9px 6px 60px; clip-path:polygon(3% 0,100% 0,98% 100%,2% 100%,0 50%); }
.portrait { left:5px; top:4px; width:52px; height:52px; border-width:1px; box-shadow:0 0 0 2px #17281d,0 0 12px rgba(120,229,135,.22); }
.name-row { font-size:12px; margin-bottom:3px; }
.meter { height:9px; }
.meter em { font-size:7px; line-height:8px; }
.party-list { left:12px; top:82px; width:158px; gap:3px; }
.party-member { height:32px; gap:5px; padding-right:3px; background:linear-gradient(90deg,rgba(2,7,12,.72),rgba(2,7,12,.12)); }
.party-member .mini-portrait { width:29px; height:29px; }
.zone-title { top:14px; width:400px; }
.zone-title span { font-size:16px; letter-spacing:.14em; }
.zone-title small { margin-top:4px; font-size:8px; color:#aebcca; }
.map-panel { right:11px; top:10px; width:190px; padding:4px 5px 5px; }
.quest-panel { right:11px; top:105px; width:222px; padding:7px 9px 8px; }
.chat { left:11px; bottom:11px; width:286px; height:112px; }
.action-dock { bottom:10px; gap:5px; padding:5px 7px 19px; background:linear-gradient(90deg,transparent,rgba(2,7,11,.66) 10% 90%,transparent); }
.ability { width:48px; height:48px; box-shadow:0 0 0 2px rgba(0,0,0,.78),inset 0 0 10px rgba(99,233,140,.13); }
.ability.ultimate { width:52px; height:52px; border-radius:3px; box-shadow:0 0 0 2px rgba(17,9,3,.82),0 0 13px rgba(116,248,118,.22),inset 0 0 14px #174a27; }
.ability kbd,.ability.ultimate kbd { left:50%; top:49px; transform:translateX(-50%); color:#e8edf0; font-size:8px; background:none; padding:1px 3px; text-shadow:0 1px 2px #000; }
.ability b,.ability.ultimate b { display:none; }
.xp-row { left:7px; right:7px; height:8px; }
.currency { right:17px; bottom:18px; padding:5px 8px; font-size:9px; background:rgba(2,7,11,.48); border-top:1px solid rgba(190,164,96,.2); }
.controls-hint { bottom:84px; padding:5px 10px; color:rgba(220,232,240,.58); font-size:7px; background:rgba(3,8,14,.34); }

.class-select { display:flex; gap:10px; margin:12px 0 0; pointer-events:auto; }
.class-card { width:210px; padding:9px 12px; color:#aeb9c3; border:1px solid rgba(185,160,94,.38); background:linear-gradient(180deg,rgba(6,14,21,.76),rgba(2,7,11,.76)); cursor:pointer; text-align:left; transition:filter .15s,border-color .15s,transform .15s; }
.class-card b,.class-card span { display:block; }
.class-card b { font-family:Cinzel,serif; color:#eee5ca; font-size:11px; letter-spacing:.12em; }
.class-card span { margin-top:3px; font-size:7px; letter-spacing:.1em; }
.class-card:hover { filter:brightness(1.22); transform:translateY(-1px); }
.class-card.selected { border-color:#d8b960; box-shadow:inset 0 0 18px rgba(108,218,116,.12),0 0 14px rgba(0,0,0,.32); }
.class-card[data-class="rogue"].selected { border-color:#b37be2; box-shadow:inset 0 0 18px rgba(158,76,225,.16),0 0 14px rgba(0,0,0,.32); }

.portrait.ranger-portrait { background:#07140c url("assets/ui/elaria-portrait-v1.png") 59% 27% / 148% auto no-repeat; }
.portrait.rogue-portrait { background:#0a0910 url("assets/ui/rogan-portrait-v1.png") 58% 25% / 148% auto no-repeat; border-color:#a77bd0; box-shadow:0 0 0 2px #211a29,0 0 13px rgba(176,91,235,.3); }
.portrait.ranger-portrait:before,.portrait.ranger-portrait:after,.portrait.rogue-portrait:before,.portrait.rogue-portrait:after,.portrait.ranger-portrait .portrait-ear,.portrait.rogue-portrait .portrait-ear { display:none; }

.ability .rogue-blade,.ability .rogue-stealth,.ability .rogue-circuit,.ability .rogue-smoke,.ability .rogue-step,.ability .rogue-eviscerate,.ability .rogue-nightfall { background:radial-gradient(circle,#f0d7ff 0 6%,#9c50d6 12% 23%,#3b1858 42%,#080914 73%); }
.ability .rogue-blade:before,.ability .rogue-eviscerate:before { width:36px;height:3px;left:5px;top:22px;transform:rotate(-38deg);background:#f5e6ff;box-shadow:0 0 7px #bb67ff; }
.ability .rogue-blade:after,.ability .rogue-eviscerate:after { width:28px;height:3px;right:5px;top:23px;border-radius:0;transform:rotate(38deg);background:#d994ff; }
.ability .rogue-stealth:before,.ability .rogue-smoke:before { width:27px;height:18px;left:9px;top:15px;border-radius:50%;background:rgba(214,167,255,.22);border:2px solid #dca4ff;box-shadow:0 0 10px #8f45ca; }
.ability .rogue-stealth:after,.ability .rogue-smoke:after { width:7px;height:7px;right:18px;top:21px;background:#f5e9ff;box-shadow:0 0 7px #c568ff; }
.ability .rogue-circuit:before,.ability .rogue-step:before,.ability .rogue-nightfall:before { width:39px;height:3px;left:3px;top:22px;transform:rotate(-14deg);background:#efcfff;box-shadow:-8px 7px 5px #7e38ba,8px -7px 5px #c165ff; }
.ability .rogue-circuit:after,.ability .rogue-step:after,.ability .rogue-nightfall:after { width:8px;height:8px;right:4px;top:18px;background:#fff;border-radius:50%;box-shadow:0 0 10px #c35fff; }
.ability .rogue-throw { background:radial-gradient(circle,#f0d7ff 0 6%,#9c50d6 12% 23%,#3b1858 42%,#080914 73%); }
.ability .rogue-throw:before { width:35px;height:5px;left:5px;top:21px;transform:rotate(-18deg);background:#e5b0ff;clip-path:polygon(0 30%,70% 0,100% 50%,70% 100%,0 70%,18% 50%);box-shadow:0 0 7px #bb67ff; }
.ability .rogue-throw:after { width:4px;height:14px;left:7px;top:17px;background:#744092;border-radius:0;transform:rotate(-18deg); }

@media (max-width: 900px) {
  .quest-panel,.map-panel { transform:scale(.82); transform-origin:top right; }
  .player-frame,.party-list { transform:scale(.82); transform-origin:top left; }
  .chat { display:none; }
  .ability { width:44px;height:44px; }.ability.ultimate{width:52px;height:52px}.ability b{display:none}.action-dock{bottom:8px}.xp-row{bottom:-4px}
  .zone-title { transform:translateX(-50%) scale(.8); }
}


/* Developer sandbox: intentionally separate from the player HUD. */
#dev-panel { position:absolute; z-index:90; top:18px; left:18px; width:338px; max-height:calc(100vh - 36px); overflow:auto; padding:0 11px 10px; color:#d9e4e4; background:linear-gradient(180deg,rgba(3,12,17,.97),rgba(2,7,11,.96)); border:1px solid rgba(126,220,160,.52); box-shadow:0 0 0 1px rgba(0,0,0,.85),0 16px 42px rgba(0,0,0,.56),inset 0 1px rgba(226,255,235,.05); pointer-events:auto; user-select:none; backdrop-filter:blur(4px); }
#dev-panel header { position:sticky; z-index:2; top:0; display:flex; justify-content:space-between; align-items:center; margin:0 -11px; padding:10px 11px 9px; background:rgba(3,12,17,.98); border-bottom:1px solid rgba(126,220,160,.24); }
#dev-panel header small,#dev-panel header b { display:block; } #dev-panel header small { font-size:7px; letter-spacing:.22em; color:#78d79b; } #dev-panel header b { margin-top:2px; font-family:Cinzel,serif; font-size:12px; letter-spacing:.1em; color:#e5efe5; }
#dev-panel header button { width:28px; height:28px; padding:0; font-size:20px; line-height:22px; }
#dev-panel section { padding:8px 0 0; } #dev-panel h3 { margin:0 0 5px; color:#8aa39a; font-size:7px; letter-spacing:.17em; font-weight:700; }
.dev-stats { margin:9px 0 1px; padding:6px 7px; overflow:hidden; white-space:nowrap; color:#9ee8b9; background:#031008; border:1px solid rgba(110,220,148,.18); font:8px/1.2 monospace; }
.dev-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; } .dev-grid.two { grid-template-columns:repeat(2,1fr); } .dev-grid.enemy { grid-template-columns:repeat(3,1fr); }
#dev-panel button { min-height:28px; padding:5px 4px; border:1px solid rgba(178,194,184,.25); color:#c7d1ce; background:linear-gradient(#10201d,#07110f); font-size:8px; cursor:pointer; transition:filter .1s,border-color .1s,background .1s; }
#dev-panel button:hover { filter:brightness(1.3); border-color:rgba(146,239,177,.65); } #dev-panel button.active { color:#ecfff1; border-color:#66df91; background:linear-gradient(#1e5133,#0d281a); box-shadow:inset 0 0 10px rgba(96,235,143,.12); }
#dev-panel footer { margin-top:9px; padding-top:7px; border-top:1px solid rgba(126,220,160,.16); color:#6d837a; font-size:7px; letter-spacing:.04em; }
@media (max-width: 760px) { #dev-panel { left:8px; top:8px; width:min(338px,calc(100vw - 16px)); max-height:calc(100vh - 16px); } }

/* Equipment + inventory v1 */
#inventory-toggle { pointer-events:auto; margin-right:10px; padding:4px 7px; border:1px solid rgba(214,182,107,.55); background:rgba(4,11,17,.82); color:#e8d598; font-size:8px; font-weight:700; letter-spacing:.08em; cursor:pointer; }
#inventory-toggle:hover { filter:brightness(1.25); }
.inventory-panel { pointer-events:auto; position:absolute; z-index:96; left:50%; top:50%; transform:translate(-50%,-50%); width:min(720px,82vw); min-height:410px; padding:12px; background:linear-gradient(180deg,rgba(5,14,22,.97),rgba(2,7,12,.96)); box-shadow:0 0 0 1px #000,0 24px 80px rgba(0,0,0,.72),inset 0 1px rgba(255,235,175,.06); }
.inventory-panel header { display:flex; align-items:center; justify-content:space-between; padding:4px 5px 10px; border-bottom:1px solid rgba(214,182,107,.25); }
.inventory-panel header small,.inventory-panel header b { display:block; }
.inventory-panel header small { color:#8fa5ae; font-size:7px; letter-spacing:.28em; }
.inventory-panel header b { margin-top:2px; font-family:Cinzel,serif; color:#ead79d; font-size:14px; letter-spacing:.12em; }
.inventory-panel header button { width:28px;height:28px;border:1px solid rgba(214,182,107,.38);background:#07121a;color:#d7e1e7;cursor:pointer; }
.inventory-character { padding:10px 6px 7px; }
.inventory-character b { display:block; color:#e9eef1; font-family:Cinzel,serif; font-size:11px; }
.inventory-character span { display:block; margin-top:4px; color:#8fb6a1; font-size:9px; }
.character-stat-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:5px; padding:0 6px 8px; }
.character-stat-grid div { min-height:42px; padding:7px 8px; border:1px solid rgba(124,171,151,.2); background:linear-gradient(145deg,rgba(18,39,36,.72),rgba(4,14,18,.86)); }
.character-stat-grid small,.character-stat-grid b { display:block; }
.character-stat-grid small { color:#6f8e83; font-size:6px; letter-spacing:.13em; }
.character-stat-grid b { margin-top:5px; color:#d9f0df; font:700 11px/1 Cinzel,serif; }
.progression-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin:0 6px 4px; padding:7px; border-top:1px solid rgba(214,182,107,.16); border-bottom:1px solid rgba(214,182,107,.16); background:rgba(0,0,0,.14); }
.progression-summary span small,.progression-summary span b { display:block; }
.progression-summary small { color:#70848b; font-size:6px; letter-spacing:.12em; }
.progression-summary b { margin-top:3px; color:#d6c986; font-size:8px; }
.inventory-panel section { padding:7px 6px; }
.inventory-panel h3 { margin:0 0 7px; color:#a8b7bf; font-size:8px; letter-spacing:.16em; }
.inventory-panel h3 span { float:right; color:#6f838e; font-weight:500; }
.equipment-slots { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.equipment-slot { min-height:70px; padding:6px; border:1px solid rgba(121,151,156,.28); background:linear-gradient(#09151d,#050d13); text-align:left; color:#7f919b; cursor:pointer; overflow:hidden; }
.equipment-slot b,.equipment-slot small { display:block; }
.equipment-slot > small { text-transform:uppercase; font-size:6px; letter-spacing:.12em; color:#667b87; margin-bottom:7px; }
.equipment-slot b { color:#ced8dd; font-size:8px; line-height:1.15; }
.equipment-slot .item-stats { margin-top:5px; color:#7fc995; font-size:7px; }
.inventory-items { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; min-height:148px; align-content:start; }
.inventory-item { position:relative; min-height:68px; padding:7px; border:1px solid rgba(130,145,151,.3); background:linear-gradient(145deg,#0a151d,#050a0f); text-align:left; color:#cbd4d9; cursor:pointer; }
.inventory-item:hover,.equipment-slot:hover { filter:brightness(1.18); border-color:rgba(226,202,130,.55); }
.inventory-item strong,.inventory-item span,.inventory-item em { display:block; }
.inventory-item strong { font-family:Cinzel,serif; font-size:8px; line-height:1.2; }
.inventory-item span { margin-top:4px; color:#75c88f; font-size:7px; }
.inventory-item em { margin-top:4px; color:#72838b; font-size:6px; font-style:normal; line-height:1.2; }
.rarity-common { border-color:rgba(200,210,216,.34)!important; }.rarity-common strong{color:#d2d8dc!important}
.rarity-uncommon { border-color:rgba(102,232,135,.42)!important; }.rarity-uncommon strong{color:#66e887!important}
.rarity-rare { border-color:rgba(88,168,255,.5)!important; box-shadow:inset 0 0 13px rgba(38,113,190,.08); }.rarity-rare strong{color:#58a8ff!important}
.rarity-epic { border-color:rgba(189,105,255,.6)!important; box-shadow:inset 0 0 16px rgba(143,53,214,.13); }.rarity-epic strong{color:#bd69ff!important}
.inventory-empty { grid-column:1/-1; padding:28px; text-align:center; color:#5d707a; border:1px dashed rgba(111,135,143,.23); font-size:8px; letter-spacing:.08em; }
.inventory-panel footer { display:flex; justify-content:space-between; gap:16px; padding:9px 6px 2px; border-top:1px solid rgba(214,182,107,.16); color:#667983; font-size:7px; }
.inventory-panel footer b { color:#d8c382; }
#save-status { flex:none; color:#6ddd95; letter-spacing:.1em; }
#save-status.save-error { color:#ff746e; }
@media (max-width: 900px) { .character-stat-grid { grid-template-columns:repeat(3,1fr); } .progression-summary { grid-template-columns:repeat(2,1fr); } }

/* ── Title-screen actions, options panel, watch mode ───────────────────── */

.start-actions { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
.start-actions #enter-button { margin-top:0; }
#watch-button, #options-button, #credits-button {
  pointer-events:auto; padding:13px 22px; border:1px solid rgba(185,160,94,.5);
  color:#d6c79c; font-family:Cinzel,serif; font-weight:600; letter-spacing:.14em; font-size:11px;
  background:linear-gradient(180deg,rgba(8,18,26,.82),rgba(2,7,11,.82)); cursor:pointer;
  transition:filter .15s,border-color .15s,transform .15s,color .15s;
}
#watch-button:hover, #options-button:hover, #credits-button:hover { filter:brightness(1.3); border-color:#d8b960; color:#fff4cf; transform:translateY(-1px); }

.options-panel {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(560px,92vw); max-height:86vh; overflow-y:auto; z-index:40;
  padding:0 0 4px; pointer-events:auto; text-align:left;
  border:1px solid rgba(185,160,94,.42); box-shadow:0 24px 70px rgba(0,0,0,.66);
}
.options-panel.hidden { display:none; }
.options-panel > header {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid rgba(185,160,94,.28);
  background:linear-gradient(180deg,rgba(20,38,30,.7),rgba(4,10,14,.5));
}
.options-panel > header small { display:block; font-size:7px; letter-spacing:.22em; color:#8fa08c; }
.options-panel > header b { display:block; font-family:Cinzel,serif; font-size:15px; letter-spacing:.16em; color:#f2e6c4; }
.options-panel > header button {
  border:1px solid rgba(185,160,94,.4); background:rgba(3,8,12,.7); color:#d9cba2;
  width:26px; height:26px; font-size:14px; line-height:1; cursor:pointer;
}
.options-panel > header button:hover { color:#fff; border-color:#d8b960; }
.options-panel section { padding:12px 18px; border-bottom:1px solid rgba(140,120,70,.14); }
.options-panel section:last-of-type { border-bottom:0; }
.options-panel h3 { margin:0 0 8px; font-family:Cinzel,serif; font-size:9px; letter-spacing:.2em; color:#c0b083; }

.opt-row {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:7px 0; cursor:pointer;
}
.opt-row > span { display:block; font-size:10px; letter-spacing:.06em; color:#e2dcc8; }
.opt-row > span i { display:block; margin-top:2px; font-style:normal; font-size:7.5px; letter-spacing:.04em; color:#8b9689; line-height:1.5; }
.opt-row > span i b { color:#c6dcae; font-weight:600; }
.opt-row select, .opt-row input[type="range"] { flex:0 0 auto; }
.opt-row select {
  min-width:104px; padding:5px 7px; font-size:9px; letter-spacing:.1em;
  color:#e8dfc2; background:rgba(4,10,14,.9); border:1px solid rgba(185,160,94,.42); cursor:pointer;
}
.opt-row input[type="range"] { width:132px; accent-color:#7fd48c; cursor:pointer; }
.opt-row input[type="checkbox"] { width:15px; height:15px; accent-color:#7fd48c; cursor:pointer; }
.opt-note { margin:6px 0 0; font-size:7.5px; line-height:1.7; letter-spacing:.04em; color:#8b9689; }
.opt-note b { color:#c6dcae; }
.options-panel > footer {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 18px; border-top:1px solid rgba(185,160,94,.24);
}
.options-panel > footer span { font-size:7px; letter-spacing:.14em; color:#76837a; }
#opt-reset {
  padding:7px 14px; font-size:8px; letter-spacing:.14em; color:#d9cba2;
  background:rgba(4,10,14,.85); border:1px solid rgba(185,160,94,.4); cursor:pointer;
}
#opt-reset:hover { color:#fff4cf; border-color:#d8b960; }

.watch-banner {
  position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:30;
  display:flex; align-items:center; gap:10px; padding:7px 16px; pointer-events:none;
  border:1px solid rgba(185,160,94,.42); background:rgba(3,9,13,.72);
  box-shadow:0 6px 24px rgba(0,0,0,.5); animation:watch-pulse 2.6s ease-in-out infinite;
}
.watch-banner.hidden { display:none; }
.watch-banner b { font-family:Cinzel,serif; font-size:10px; letter-spacing:.2em; color:#f0dfa8; }
.watch-banner span { font-size:7.5px; letter-spacing:.1em; color:#9aa79a; }
.watch-banner kbd {
  padding:1px 4px; font-size:7px; color:#e8dfc2;
  border:1px solid rgba(185,160,94,.45); background:rgba(0,0,0,.45);
}
@keyframes watch-pulse { 0%,100% { border-color:rgba(185,160,94,.42); } 50% { border-color:rgba(127,212,140,.6); } }