:root {
  color-scheme: dark;
  --ink: #eef1e4;
  --muted: #a9b5a3;
  --deep: #07100c;
  --panel: rgba(10, 20, 15, 0.68);
  --panel-strong: rgba(9, 18, 13, 0.9);
  --line: rgba(222, 234, 206, 0.18);
  --gold: #d7b56c;
  --gold-bright: #f2d68c;
  --green: #88c77e;
  --green-bright: #a9e99f;
  --red: #c65d50;
  --blue: #7cb8c5;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  --ease: cubic-bezier(.2, .72, .18, 1);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--deep); }
body {
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  user-select: none;
  -webkit-user-select: none;
}
button { font: inherit; }
#app, #canvas-container, #canvas-container canvas { width: 100%; height: 100%; display: block; }
#canvas-container { position: fixed; inset: 0; background: radial-gradient(circle at 50% 45%, #1a2d20, #07100c 72%); }
#canvas-container canvas { outline: none; }
.hidden { opacity: 0 !important; pointer-events: none !important; }

#screen-fx, #screen-fx > * { position: fixed; inset: 0; pointer-events: none; }
#screen-fx { z-index: 4; }
#vignette {
  background: radial-gradient(circle at center, transparent 47%, rgba(1, 6, 4, .2) 72%, rgba(0, 3, 2, .78) 125%);
  transition: opacity .25s ease;
}
#damage-flash {
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 28%, rgba(152, 27, 18, .16) 70%, rgba(121, 10, 6, .58) 112%),
    linear-gradient(rgba(160, 31, 22, .08), rgba(160, 31, 22, .08));
  mix-blend-mode: screen;
}
#focus-mask {
  opacity: 0;
  background: radial-gradient(ellipse at center, transparent 54%, rgba(1, 5, 3, .035) 72%, rgba(0, 2, 1, .18) 108%);
  transition: opacity .18s ease;
}
#grain {
  opacity: .065;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(2) infinite;
}
#cinematic-top, #cinematic-bottom { height: 0; background: #020604; transition: height .55s var(--ease); }
#cinematic-bottom { top: auto; bottom: 0; }
body.focused #focus-mask { opacity: .72; }
body.focused #cinematic-top, body.focused #cinematic-bottom { height: 1.7vh; }
@keyframes grain { 0%,100%{transform:translate(0,0)}25%{transform:translate(-1%,1%)}50%{transform:translate(1%,-1%)}75%{transform:translate(.5%,1%)} }

.hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; transition: opacity .3s ease; }
.glass-panel {
  background: linear-gradient(135deg, rgba(15, 29, 21, .78), rgba(6, 14, 10, .54));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 14px 48px rgba(0,0,0,.2);
  backdrop-filter: blur(12px) saturate(1.12);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
}
.eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 800; }

#vitals { position: absolute; left: 24px; top: 22px; width: 318px; padding: 14px 16px 15px; clip-path: polygon(0 0, 96% 0, 100% 18%, 100% 100%, 0 100%); }
.identity-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.crest { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(216,183,107,.48); color: var(--gold-bright); font-family: Georgia, serif; font-size: 21px; transform: rotate(45deg); }
.crest::first-letter { transform: rotate(-45deg); }
.player-name { font-family: Georgia, "Songti SC", serif; font-size: 17px; letter-spacing: .12em; margin-top: 2px; }
#level-badge { margin-left: auto; border: 1px solid rgba(216,183,107,.36); color: var(--gold-bright); padding: 5px 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.bar-row { display: grid; grid-template-columns: 34px 1fr 64px; align-items: center; gap: 8px; margin-top: 7px; }
.bar-row.compact { margin-top: 6px; }
.bar-label, .bar-value { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .05em; }
.bar-value { text-align: right; font-variant-numeric: tabular-nums; }
.bar-track { position: relative; height: 8px; overflow: hidden; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.06); }
.bar-track::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent); transform:translateX(-100%); animation:barSheen 4s ease-in-out infinite; }
.bar-fill { height: 100%; width: 100%; transform-origin: left; transition: transform .22s ease-out; }
.hp-track .bar-fill { background: linear-gradient(90deg, #7fac6b, #b7dc8f); box-shadow: 0 0 12px rgba(139,201,116,.42); }
.xp-track { height: 5px; }
.xp-track .bar-fill { background: linear-gradient(90deg, #b38f52, #f0cf84); box-shadow: 0 0 10px rgba(224,188,107,.5); }
@keyframes barSheen { 0%,55%{transform:translateX(-100%)}80%,100%{transform:translateX(100%)} }

#mission-stats { position:absolute; top:22px; right:24px; display:flex; align-items:center; padding:11px 15px; gap:14px; }
.stat { min-width: 42px; text-align: center; }
.stat-label { display:block; color:var(--muted); font-size:9px; letter-spacing:.13em; margin-bottom:3px; }
.stat strong { font-family: Georgia, serif; font-size:17px; font-weight:500; color:#f0f0e6; font-variant-numeric:tabular-nums; }
.divider { width:1px; height:27px; background:var(--line); }

.wave-banner { position:absolute; top:86px; left:50%; transform:translate(-50%, -14px); text-align:center; padding:10px 34px 13px; opacity:0; transition: opacity .35s ease, transform .55s var(--ease); background:linear-gradient(90deg,transparent,rgba(7,15,11,.72) 28%,rgba(7,15,11,.72) 72%,transparent); }
.wave-banner:not(.hidden) { opacity:1; transform:translate(-50%,0); }
#wave-banner-title { font-family:Georgia,"Songti SC",serif; font-size:28px; letter-spacing:.12em; margin-top:3px; text-shadow:0 4px 20px #000; }
#wave-banner-subtitle { color:var(--muted); font-size:11px; letter-spacing:.08em; margin-top:2px; }

.raid-alert {
  position:absolute;
  top:148px;
  left:50%;
  display:flex;
  align-items:center;
  gap:12px;
  min-width:300px;
  padding:9px 20px 10px 14px;
  transform:translate(-50%,-8px);
  background:linear-gradient(90deg,rgba(37,8,6,.14),rgba(42,10,7,.84) 17%,rgba(31,10,7,.84) 83%,rgba(37,8,6,.14));
  border-top:1px solid rgba(244,105,73,.28);
  border-bottom:1px solid rgba(244,105,73,.22);
  box-shadow:0 12px 44px rgba(0,0,0,.32),0 0 32px rgba(197,55,36,.1);
  opacity:0;
  transition:opacity .2s ease,transform .3s var(--ease),filter .2s ease;
}
.raid-alert:not(.hidden) { opacity:1; transform:translate(-50%,0); }
.raid-alert.spawning { filter:saturate(1.25) brightness(1.08); }
.raid-compass {
  position:relative;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:0 0 42px;
  border:1px solid rgba(245,123,87,.48);
  border-radius:50%;
  background:radial-gradient(circle,rgba(216,66,42,.18),rgba(34,8,6,.72));
  box-shadow:inset 0 0 18px rgba(255,77,43,.14),0 0 18px rgba(206,49,31,.16);
}
.raid-compass::before,.raid-compass::after { content:""; position:absolute; background:rgba(242,119,86,.25); }
.raid-compass::before { width:1px; height:34px; }
.raid-compass::after { width:34px; height:1px; }
#raid-alert-arrow {
  position:relative;
  z-index:1;
  display:block;
  color:#ff9b78;
  font-size:25px;
  line-height:1;
  text-shadow:0 0 11px rgba(255,74,43,.85);
  transform-origin:50% 50%;
  transition:transform .08s linear;
}
.raid-copy { display:flex; flex-direction:column; min-width:220px; }
.raid-kicker { color:#ef775c; font-size:8px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; }
#raid-alert-title { margin-top:1px; color:#ffe2d4; font-family:Georgia,"Songti SC",serif; font-size:16px; letter-spacing:.08em; text-shadow:0 2px 10px #000; }
#raid-alert-subtitle { margin-top:2px; color:#c7aaa0; font-size:9px; letter-spacing:.06em; }
.raid-alert:not(.hidden) .raid-compass { animation:raidPulse .9s ease-in-out infinite alternate; }
@keyframes raidPulse { from{box-shadow:inset 0 0 14px rgba(255,77,43,.1),0 0 10px rgba(206,49,31,.1)} to{box-shadow:inset 0 0 24px rgba(255,77,43,.26),0 0 26px rgba(206,49,31,.3)} }

.boss-panel { position:absolute; top:101px; left:50%; width:min(520px,55vw); transform:translateX(-50%); opacity:1; transition:opacity .35s ease; }
.boss-heading { display:flex; justify-content:space-between; color:#e6d4bd; font-size:11px; font-weight:800; letter-spacing:.1em; text-shadow:0 2px 10px #000; }
.boss-track { height:8px; margin-top:6px; background:rgba(13,8,7,.7); border:1px solid rgba(220,146,107,.28); overflow:hidden; }
#boss-fill { width:100%; height:100%; transform-origin:left; background:linear-gradient(90deg,#8e352e,#df7857); box-shadow:0 0 16px rgba(218,95,69,.55); transition:transform .18s linear; }

#crosshair { --gap: 8px; --spread: 0px; position:absolute; left:50%; top:50%; width:48px; height:48px; transform:translate(-50%,-50%); opacity:.78; transition:opacity .12s ease; }
#crosshair .tick { position:absolute; display:block; background:rgba(236,240,221,.9); box-shadow:0 0 5px rgba(0,0,0,.8); transition:transform .08s linear, background .12s ease; }
.tick-top,.tick-bottom { width:1px; height:8px; left:23.5px; }
.tick-left,.tick-right { height:1px; width:8px; top:23.5px; }
.tick-top { top:calc(6px - var(--spread)); transform:translateY(calc(-1 * var(--spread))); }
.tick-bottom { bottom:calc(6px - var(--spread)); transform:translateY(var(--spread)); }
.tick-left { left:calc(6px - var(--spread)); transform:translateX(calc(-1 * var(--spread))); }
.tick-right { right:calc(6px - var(--spread)); transform:translateX(var(--spread)); }
.cross-dot { position:absolute; width:3px; height:3px; left:22.5px; top:22.5px; border-radius:50%; background:rgba(239,230,196,.88); box-shadow:0 0 5px #000; }
#crosshair.targeted .tick, #crosshair.targeted .cross-dot { background:var(--gold-bright); }
#crosshair.critical .tick, #crosshair.critical .cross-dot { background:#e48b73; }

#hit-marker { position:absolute; left:50%; top:50%; width:38px; height:38px; transform:translate(-50%,-50%) scale(.65); opacity:0; }
#hit-marker i { position:absolute; width:8px; height:1px; background:#f3ead7; left:15px; top:18px; box-shadow:0 0 4px #000; }
#hit-marker i:nth-child(1){ transform:translate(-9px,-9px) rotate(45deg); }
#hit-marker i:nth-child(2){ transform:translate(9px,-9px) rotate(-45deg); }
#hit-marker i:nth-child(3){ transform:translate(-9px,9px) rotate(-45deg); }
#hit-marker i:nth-child(4){ transform:translate(9px,9px) rotate(45deg); }
#hit-marker.show { animation:hit .22s ease-out; }
#hit-marker.crit i { background:#ef9a74; width:10px; }
@keyframes hit { 0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.18)} }

.target-panel { position:absolute; left:calc(50% + 38px); top:calc(50% + 24px); min-width:160px; padding:8px 10px; background:linear-gradient(90deg,rgba(4,10,7,.68),transparent); border-left:1px solid rgba(219,188,116,.54); opacity:1; transition:opacity .15s ease, transform .15s ease; }
.target-line { display:flex; justify-content:space-between; gap:22px; color:var(--gold); font-size:8px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
#target-name { font-family:Georgia,"Songti SC",serif; font-size:14px; margin:3px 0 5px; }
.target-hp-track { height:3px; background:rgba(255,255,255,.1); }
#target-hp-fill { height:100%; width:100%; transform-origin:left; background:#c36c56; transition:transform .12s ease; }
#target-zone { color:var(--muted); font-size:9px; margin-top:5px; }

.draw-panel { position:absolute; width:min(410px,42vw); left:50%; bottom:27px; transform:translateX(-50%); text-shadow:0 2px 10px #000; }
.draw-meta,.draw-caption { display:flex; justify-content:space-between; font-size:10px; color:var(--muted); letter-spacing:.06em; }
.draw-meta { margin-bottom:7px; }
#bow-state { color:#e4e8d8; font-weight:800; }
#draw-speed { font-variant-numeric:tabular-nums; color:var(--gold-bright); }
.draw-track { position:relative; height:7px; background:rgba(3,8,5,.7); border:1px solid rgba(235,238,218,.13); overflow:hidden; }
#draw-fill { position:absolute; inset:0; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,#709967,#d2b565 72%,#e8a25d); box-shadow:0 0 15px rgba(215,181,103,.4); }
.draw-sweetspot { position:absolute; left:82%; width:9%; top:0; bottom:0; border-left:1px solid rgba(255,255,255,.55); border-right:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.06); }
.draw-caption { margin-top:5px; font-size:8px; opacity:.75; }
#draw-caption-center { color:#d9dece; }

.ability-bar {
  position:absolute;
  left:50%;
  bottom:82px;
  display:flex;
  align-items:center;
  gap:8px;
  transform:translateX(-50%);
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.34));
}
.ability-slot {
  position:relative;
  display:grid;
  grid-template-columns:36px 1fr;
  align-items:center;
  width:162px;
  min-height:46px;
  padding:7px 10px 9px 7px;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(12,25,17,.82),rgba(4,11,7,.66));
  border:1px solid rgba(218,231,205,.15);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  backdrop-filter:blur(9px) saturate(1.1);
  transition:opacity .2s ease,border-color .2s ease,filter .2s ease,transform .2s var(--ease);
}
.ability-slot::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  background:radial-gradient(circle at 20% 50%,rgba(151,228,157,.22),transparent 45%);
  transition:opacity .2s ease;
}
.ability-slot.locked { opacity:.36; filter:saturate(.32); }
.ability-slot.ready { border-color:rgba(213,188,116,.4); }
.ability-slot.active { border-color:rgba(153,237,160,.72); filter:brightness(1.12) saturate(1.2); }
.ability-slot.active::before { opacity:1; animation:abilityGlow .72s ease-in-out infinite alternate; }
.ability-slot.armed { border-color:rgba(236,190,91,.7); filter:brightness(1.1) saturate(1.22); }
.ability-slot.armed::before { opacity:1; background:radial-gradient(circle at 20% 50%,rgba(236,182,73,.24),transparent 48%); animation:abilityGlow .72s ease-in-out infinite alternate; }
.ability-slot.cooldown { opacity:.66; }
.ability-key {
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border:1px solid rgba(240,221,166,.42);
  color:transparent;
  background:rgba(3,9,6,.72);
  font-family:Georgia,serif;
  font-size:13px;
  font-weight:800;
  line-height:1;
  transform:rotate(45deg);
  text-shadow:0 0 8px rgba(235,202,119,.55);
}
.ability-slot .ability-key::after { content:"Q"; display:block; color:#f0d893; line-height:1; transform:rotate(-45deg); }
#ability-may-king .ability-key::after { content:"E"; }
#ability-green-man .ability-key::after { content:"R"; color:#b6efa0; }
#ability-tree-spirit .ability-key::after { content:"F"; color:#c9f29b; }
.ability-copy { position:relative; z-index:1; min-width:0; }
.ability-copy strong { display:block; color:#e9ecdf; font-family:Georgia,"Songti SC",serif; font-size:12px; font-weight:500; letter-spacing:.08em; white-space:nowrap; }
.ability-copy small { display:block; margin-top:2px; overflow:hidden; color:#8f9d8e; font-size:8px; letter-spacing:.035em; text-overflow:ellipsis; white-space:nowrap; }
.ability-slot.active .ability-copy small { color:#a9e4ad; }
.ability-slot.armed .ability-copy small { color:#e2c37a; }
.ability-track { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.055); }
.ability-track span { display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left; transition:transform .1s linear; }
#ability-herne .ability-track span { background:linear-gradient(90deg,#5eae75,#b5e9a2); box-shadow:0 0 11px rgba(127,224,139,.62); }
#ability-may-king .ability-track span { background:linear-gradient(90deg,#9f7136,#f1d17b); box-shadow:0 0 11px rgba(231,181,79,.62); }
#ability-green-man .ability-track span { background:linear-gradient(90deg,#2f7438,#9be675); box-shadow:0 0 12px rgba(101,222,105,.68); }
#ability-tree-spirit .ability-track span { background:linear-gradient(90deg,#5a6d35,#d3f18a); box-shadow:0 0 12px rgba(156,231,112,.7); }
#ability-green-man.active { border-color:rgba(132,235,104,.76); box-shadow:0 0 22px rgba(76,188,75,.16); }
#ability-green-man.active::before { background:radial-gradient(circle at 20% 50%,rgba(102,222,100,.28),transparent 50%); }
#ability-tree-spirit.active { border-color:rgba(190,238,122,.76); box-shadow:0 0 22px rgba(127,201,80,.16); }
#ability-tree-spirit.active::before { background:radial-gradient(circle at 20% 50%,rgba(184,232,106,.24),transparent 50%); }
.ability-combo-sigil {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:64px;
  height:43px;
  color:#fff1a5;
  font-size:20px;
  text-shadow:0 0 12px rgba(255,231,118,.9),0 0 25px rgba(115,223,132,.55);
  opacity:1;
  transition:opacity .2s ease,width .25s var(--ease),transform .25s var(--ease);
  animation:comboPulse .66s ease-in-out infinite alternate;
}
.ability-combo-sigil.hidden { width:0; margin:0 -4px; transform:scale(.45); }
.ability-combo-sigil small { margin-top:-1px; color:#d8e9b6; font-size:7px; font-weight:900; letter-spacing:.12em; white-space:nowrap; }
.ability-bar.convergence .ability-slot { border-color:rgba(247,224,133,.7); box-shadow:0 0 20px rgba(122,219,137,.12),0 0 26px rgba(225,176,72,.1); }
@keyframes abilityGlow { from{filter:brightness(.88);opacity:.55}to{filter:brightness(1.35);opacity:1} }
@keyframes comboPulse { from{transform:scale(.9) rotate(-4deg)}to{transform:scale(1.08) rotate(4deg)} }

body.herne-active #crosshair .tick,body.herne-active #crosshair .cross-dot { background:#a9efad; box-shadow:0 0 8px rgba(110,231,132,.75); }
body.green-man-active #crosshair .tick,body.green-man-active #crosshair .cross-dot { background:#b6f39d; box-shadow:0 0 9px rgba(100,231,99,.9),0 0 19px rgba(42,139,54,.55); }
body.green-man-active #draw-fill { background:linear-gradient(90deg,#245e31,#61b954 58%,#c1f692); box-shadow:0 0 20px rgba(86,208,83,.62); }
body.green-man-active #focus-mask { opacity:.8; background:radial-gradient(ellipse at center,transparent 54%,rgba(53,121,49,.035) 72%,rgba(8,40,15,.2) 118%); }
body.may-king-active #draw-fill { background:linear-gradient(90deg,#856135,#e5b65d 55%,#fff0a0); box-shadow:0 0 20px rgba(239,190,84,.65); }
body.wild-hunt-convergence #crosshair .tick,body.wild-hunt-convergence #crosshair .cross-dot { background:#fff0a2; box-shadow:0 0 10px rgba(255,229,111,.92),0 0 18px rgba(101,230,128,.55); }
body.wild-hunt-convergence #focus-mask { opacity:.82; background:radial-gradient(ellipse at center,transparent 56%,rgba(83,135,74,.025) 74%,rgba(65,42,9,.16) 116%); }

.wind-panel { position:absolute; left:24px; bottom:22px; min-width:158px; padding:10px 12px; display:grid; grid-template-columns:34px 1fr; align-items:center; column-gap:8px; }
#wind-arrow { grid-row:1 / 3; font-size:24px; color:var(--blue); text-shadow:0 0 10px rgba(105,180,199,.55); transform-origin:center; transition:transform .4s ease; }
#wind-speed { font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
#wind-direction { grid-column:2; color:var(--muted); font-size:9px; margin-top:2px; }

.streak { position:absolute; right:25px; top:93px; text-align:right; transition:opacity .2s ease, transform .2s ease; }
.streak span { display:block; color:var(--gold-bright); font-family:Georgia,serif; font-size:31px; font-style:italic; text-shadow:0 3px 14px #000; }
.streak small { color:var(--muted); font-size:9px; letter-spacing:.14em; }
.skill-strip { position:absolute; right:24px; bottom:25px; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.skill-chip { display:flex; align-items:center; gap:7px; padding:5px 7px 5px 9px; background:rgba(5,12,8,.54); border-right:2px solid rgba(213,181,108,.65); color:#dce2d2; font-size:9px; letter-spacing:.05em; backdrop-filter:blur(6px); }
.skill-chip b { color:var(--gold-bright); }

#toast-stack { position:absolute; left:50%; top:31%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; }
.toast { padding:6px 13px; background:linear-gradient(90deg,transparent,rgba(5,12,8,.68),transparent); color:#e7eadf; font-size:11px; letter-spacing:.08em; text-shadow:0 2px 8px #000; animation:toastIn 2.5s ease forwards; }
.toast.gold { color:var(--gold-bright); }
.toast.red { color:#e5917d; }
@keyframes toastIn { 0%{opacity:0;transform:translateY(9px)}12%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)} }

#floating-layer { position:absolute; inset:0; overflow:hidden; }
.floating-text { position:absolute; left:0; top:0; transform:translate(-50%,-50%); font-family:Georgia,serif; font-weight:700; font-size:16px; color:#efe8d4; text-shadow:0 2px 4px #000,0 0 8px #000; white-space:nowrap; }
.floating-text.crit { color:#f0aa80; font-size:22px; }
.floating-text.xp { color:#d7c17e; font-size:13px; }
.floating-text.blocked { color:#a8c2c6; font-size:13px; }
.interaction-hint { position:absolute; left:50%; bottom:92px; transform:translateX(-50%); padding:6px 12px; color:var(--muted); background:rgba(5,12,8,.6); border:1px solid var(--line); font-size:10px; }

.overlay { position:fixed; inset:0; z-index:30; display:grid; place-items:center; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .45s ease, visibility .45s; background:rgba(2,7,4,.54); backdrop-filter:blur(5px); }
.overlay.active { opacity:1; visibility:visible; pointer-events:auto; }
.start-backdrop { position:absolute; inset:0; background:
  radial-gradient(circle at 50% 39%, rgba(70,101,67,.22), transparent 32%),
  linear-gradient(90deg, rgba(2,7,4,.88), rgba(2,7,4,.42) 50%, rgba(2,7,4,.88)),
  linear-gradient(0deg, rgba(2,7,4,.96), transparent 44%); }
.start-content { position:relative; width:min(880px,90vw); text-align:center; padding:32px; animation:introRise 1.1s var(--ease) both; }
.top-kicker { color:var(--gold); font-size:10px; font-weight:800; letter-spacing:.33em; margin-bottom:18px; }
h1 { margin:0; font-family:Georgia,"Songti SC",serif; line-height:.9; text-shadow:0 9px 42px rgba(0,0,0,.72); }
h1 span { display:block; font-size:clamp(54px,9vw,112px); font-weight:500; letter-spacing:.08em; }
h1 small { display:block; margin-top:17px; color:var(--gold-bright); font-size:clamp(20px,2.8vw,34px); font-weight:400; letter-spacing:.42em; transform:translateX(.2em); }
.lead { width:min(610px,80vw); margin:27px auto 23px; color:#cbd3c6; font-family:Georgia,"Songti SC",serif; font-size:15px; line-height:1.85; letter-spacing:.04em; }
.primary-button { position:relative; display:inline-flex; flex-direction:column; align-items:center; min-width:220px; padding:13px 34px 12px; border:1px solid rgba(232,203,133,.5); color:#10180f; background:linear-gradient(135deg,#f0d797,#c9a65c); box-shadow:0 12px 38px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.55); cursor:pointer; clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); transition:transform .2s var(--ease),filter .2s ease,box-shadow .2s ease; }
.primary-button:hover { transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 18px 44px rgba(0,0,0,.43),0 0 24px rgba(218,184,107,.18); }
.primary-button:active { transform:translateY(1px); }
.primary-button span { font-family:Georgia,"Songti SC",serif; font-size:16px; font-weight:700; letter-spacing:.14em; }
.primary-button small { margin-top:3px; font-size:8px; font-weight:800; letter-spacing:.12em; opacity:.62; }
.control-grid { width:min(760px,88vw); margin:28px auto 20px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.08); }
.control-grid > div { padding:10px 7px; background:rgba(6,14,9,.72); }
kbd { display:block; color:#e8e8dc; font-family:inherit; font-size:9px; font-weight:800; letter-spacing:.06em; white-space:nowrap; }
.control-grid span { display:block; margin-top:5px; color:var(--muted); font-size:8px; letter-spacing:.12em; }
.feature-row { display:flex; justify-content:center; flex-wrap:wrap; gap:7px 20px; color:#98a797; font-size:9px; letter-spacing:.08em; }
.feature-row span::before { content:"◇"; color:var(--gold); margin-right:6px; }
.browser-note { margin:19px 0 0; color:#657568; font-size:8px; letter-spacing:.08em; }
@keyframes introRise { from{opacity:0;transform:translateY(18px) scale(.99)}to{opacity:1;transform:none} }

.modal-card { position:relative; width:min(620px,90vw); padding:40px 42px; text-align:center; background:linear-gradient(145deg,rgba(14,27,19,.97),rgba(5,12,8,.97)); border:1px solid rgba(225,203,147,.2); box-shadow:var(--shadow); clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); }
.modal-card::before { content:""; position:absolute; inset:8px; border:1px solid rgba(255,255,255,.045); pointer-events:none; }
.modal-card.narrow { width:min(440px,90vw); }
.modal-card h2,.levelup-wrap h2 { margin:8px 0 10px; font-family:Georgia,"Songti SC",serif; font-size:36px; font-weight:500; letter-spacing:.08em; }
.modal-card p,.levelup-wrap > p { color:var(--muted); font-size:12px; line-height:1.7; }
.text-button { display:block; margin:16px auto 0; padding:8px 14px; border:0; color:#9dad9d; background:transparent; cursor:pointer; font-size:10px; letter-spacing:.12em; }
.text-button:hover { color:#e9e9df; }
.pause-help { display:flex; justify-content:center; gap:22px; margin-top:20px; color:#738175; font-size:9px; }
.pause-help kbd { display:inline; padding:2px 5px; border:1px solid rgba(255,255,255,.13); }

.levelup-wrap { width:min(1120px,94vw); text-align:center; padding:28px 0; }
.levelup-wrap h2 { font-size:42px; }
.upgrade-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px; perspective:1000px; }
.upgrade-card { position:relative; min-height:330px; padding:24px 22px 20px; text-align:left; overflow:hidden; color:var(--ink); background:linear-gradient(160deg,rgba(20,36,25,.98),rgba(7,16,11,.98)); border:1px solid rgba(216,186,113,.25); box-shadow:0 22px 70px rgba(0,0,0,.32); cursor:pointer; transition:transform .25s var(--ease),border-color .25s ease,box-shadow .25s ease; clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px); }
.upgrade-card::before { content:""; position:absolute; inset:0; opacity:.4; background:radial-gradient(circle at 50% 0%,rgba(216,183,106,.19),transparent 45%); }
.upgrade-card::after { content:""; position:absolute; inset:8px; border:1px solid rgba(255,255,255,.045); pointer-events:none; }
.upgrade-card:hover,.upgrade-card:focus-visible { transform:translateY(-9px) rotateX(1.2deg); border-color:rgba(239,209,135,.72); box-shadow:0 30px 80px rgba(0,0,0,.48),0 0 30px rgba(215,181,105,.1); outline:none; }
.card-index { position:absolute; top:13px; right:14px; display:grid; place-items:center; width:25px; height:25px; border:1px solid rgba(255,255,255,.16); color:#a8b3a4; font-size:10px; }
.card-rarity { position:relative; color:var(--gold); font-size:8px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; }
.card-active-key { position:relative; z-index:1; width:max-content; margin:9px auto -15px; padding:4px 8px; color:#dce6cf; background:rgba(6,16,10,.56); border:1px solid rgba(239,208,125,.24); font-size:8px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.card-active-key kbd { display:inline-grid; place-items:center; min-width:19px; height:19px; margin-right:5px; padding:0 4px; color:#f5dc8a; background:rgba(229,190,91,.09); border:1px solid rgba(244,216,140,.38); font-family:Georgia,serif; font-size:10px; box-shadow:inset 0 0 10px rgba(235,195,91,.08); }
.card-icon { position:relative; display:grid; place-items:center; width:72px; height:72px; margin:31px auto 21px; border:1px solid rgba(221,192,121,.25); transform:rotate(45deg); background:rgba(216,183,106,.055); }
.card-icon span { transform:rotate(-45deg); font-family:Georgia,"Songti SC",serif; font-size:29px; color:var(--gold-bright); }
.card-name { position:relative; margin:0; text-align:center; font-family:Georgia,"Songti SC",serif; font-size:24px; font-weight:500; letter-spacing:.08em; }
.card-level { position:relative; text-align:center; color:#91a091; font-size:9px; margin-top:5px; letter-spacing:.12em; }
.card-desc { position:relative; min-height:53px; margin:19px 0 0; color:#bdc8ba; font-size:11px; line-height:1.75; text-align:center; }
.card-effect { position:relative; margin-top:17px; padding-top:13px; border-top:1px solid rgba(255,255,255,.08); color:var(--gold-bright); font-size:10px; text-align:center; letter-spacing:.05em; }
.upgrade-card.rare { border-color:rgba(111,174,183,.32); }
.upgrade-card.rare .card-rarity,.upgrade-card.rare .card-icon span,.upgrade-card.rare .card-effect { color:#96d2d8; }
.upgrade-card.epic { border-color:rgba(183,126,205,.35); }
.upgrade-card.epic .card-rarity,.upgrade-card.epic .card-icon span,.upgrade-card.epic .card-effect { color:#d8a8e8; }
.upgrade-card.mythic { border-color:rgba(238,196,92,.55); box-shadow:0 22px 70px rgba(0,0,0,.32),0 0 32px rgba(136,211,123,.08); animation:mythicBorder 2.4s ease-in-out infinite alternate; }
@keyframes mythicBorder { from{filter:drop-shadow(0 0 0 rgba(235,205,105,0))}to{filter:drop-shadow(0 0 9px rgba(235,205,105,.12))} }
.upgrade-card.mythic::before { opacity:.8; background:radial-gradient(circle at 50% 0%,rgba(241,205,104,.26),rgba(100,186,108,.08) 34%,transparent 62%); }
.upgrade-card.mythic .card-rarity,.upgrade-card.mythic .card-icon span,.upgrade-card.mythic .card-effect { color:#f3dc8b; text-shadow:0 0 12px rgba(232,191,78,.32); }
.upgrade-card.mythic .card-icon { border-color:rgba(238,205,112,.48); box-shadow:0 0 26px rgba(117,205,122,.1); }

.gameover-card { width:min(670px,92vw); }
#gameover-quote { font-family:Georgia,"Songti SC",serif; font-style:italic; }
.result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:24px 0 27px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); }
.result-grid div { padding:13px 8px; background:rgba(7,15,10,.8); }
.result-grid span { display:block; color:var(--muted); font-size:8px; letter-spacing:.12em; }
.result-grid strong { display:block; margin-top:4px; color:#eee8d9; font-family:Georgia,serif; font-size:21px; font-weight:500; }

.corner-button { position:fixed; z-index:50; left:14px; bottom:12px; border:1px solid rgba(255,255,255,.1); padding:7px 9px; color:#6e7d71; background:rgba(3,9,6,.5); font-size:8px; letter-spacing:.08em; cursor:pointer; backdrop-filter:blur(8px); }
.corner-button.right { left:auto; right:14px; }
.corner-button:hover { color:#d5ddd1; border-color:rgba(255,255,255,.22); }
.loading { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:#8d9c8e; background:#07100c; opacity:0; visibility:hidden; transition:opacity .5s ease,visibility .5s; }
.loading.active { opacity:1; visibility:visible; }
.loading span { width:38px; height:38px; border:1px solid rgba(214,183,109,.18); border-top-color:var(--gold); border-radius:50%; animation:spin 1s linear infinite; }
.loading p { font-size:10px; letter-spacing:.16em; }
@keyframes spin { to{transform:rotate(360deg)} }

@media (max-width: 860px) {
  #vitals { left:12px; top:12px; transform:scale(.86); transform-origin:top left; }
  #mission-stats { right:12px; top:12px; transform:scale(.86); transform-origin:top right; }
  .control-grid { grid-template-columns:repeat(4,1fr); }
  .upgrade-cards { gap:9px; }
  .upgrade-card { min-height:310px; padding:18px 13px; }
  .card-name { font-size:19px; }
  .wind-panel { left:12px; bottom:12px; transform:scale(.86); transform-origin:bottom left; }
  .ability-bar { bottom:78px; transform:translateX(-50%) scale(.86); transform-origin:bottom center; }
}
@media (max-width: 680px) {
  .upgrade-cards { grid-template-columns:1fr; max-height:68vh; overflow:auto; padding:4px; }
  .upgrade-card { min-height:220px; }
  .card-icon { margin:18px auto 14px; width:54px; height:54px; }
  #mission-stats { display:none; }
  .draw-panel { width:70vw; }
  .skill-strip { display:none; }
  .ability-bar { bottom:83px; transform:translateX(-50%) scale(.7); }
  .control-grid { grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}

/* v1.4 sustained mythic forms */
#ability-may-king.active { border-color:rgba(250,213,119,.78); box-shadow:0 0 24px rgba(232,181,69,.18); }
#ability-may-king.active::before { background:radial-gradient(circle at 22% 50%,rgba(255,211,94,.3),transparent 52%); }
.ability-bar.verdant-convergence .ability-slot { border-color:rgba(189,232,111,.76); box-shadow:0 0 20px rgba(86,215,100,.15),0 0 28px rgba(239,192,72,.12); }
.ability-bar.triple-convergence .ability-slot { border-color:rgba(255,236,143,.88); box-shadow:0 0 22px rgba(108,235,127,.19),0 0 32px rgba(255,205,83,.18); }

body.may-king-active #draw-fill { background:linear-gradient(90deg,#856135,#e5b65d 55%,#fff0a0); box-shadow:0 0 20px rgba(239,190,84,.65); }
body.may-king-active #crosshair::before,
body.may-king-active #crosshair::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(255,221,125,.62);
  border-radius:50%;
  box-shadow:0 0 9px rgba(242,190,74,.35),inset 0 0 7px rgba(255,228,145,.12);
  pointer-events:none;
  transform:translate(-50%,-50%);
}
body.may-king-active #crosshair::before {
  width:34px;
  height:34px;
  border-style:dashed;
  animation:royalReticleSpin 3.2s linear infinite;
}
body.may-king-active #crosshair::after {
  width:44px;
  height:44px;
  border-color:rgba(255,225,142,.28);
  animation:royalReticleSpinReverse 4.8s linear infinite;
}
body.may-king-active #focus-mask { opacity:.8; background:radial-gradient(ellipse at center,transparent 58%,rgba(130,93,24,.025) 76%,rgba(45,28,4,.14) 118%); }
body.verdant-crown-convergence #crosshair .tick,
body.verdant-crown-convergence #crosshair .cross-dot { background:#e7f19a; box-shadow:0 0 10px rgba(218,239,111,.9),0 0 20px rgba(75,221,94,.58); }
body.verdant-crown-convergence #crosshair::before,
body.verdant-crown-convergence #crosshair::after { border-color:rgba(188,239,116,.58); box-shadow:0 0 10px rgba(84,225,102,.38),0 0 17px rgba(244,201,79,.22); }
body.verdant-crown-convergence #draw-fill { background:linear-gradient(90deg,#2d7138,#91c958 52%,#f3d778); box-shadow:0 0 22px rgba(109,222,92,.55),0 0 28px rgba(235,188,72,.25); }
body.verdant-crown-convergence #focus-mask { opacity:.82; background:radial-gradient(ellipse at center,transparent 56%,rgba(72,139,52,.025) 74%,rgba(28,54,13,.15) 118%); }
body.triple-convergence #crosshair .tick,
body.triple-convergence #crosshair .cross-dot { background:#fff4ab; box-shadow:0 0 12px rgba(255,238,141,.96),0 0 24px rgba(89,239,117,.7); }
body.triple-convergence #crosshair::before,
body.triple-convergence #crosshair::after { border-color:rgba(255,239,144,.72); box-shadow:0 0 12px rgba(255,213,91,.48),0 0 22px rgba(76,233,104,.36); }
@keyframes royalReticleSpin { from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)} }
@keyframes royalReticleSpinReverse { from{transform:translate(-50%,-50%) rotate(360deg)}to{transform:translate(-50%,-50%) rotate(0deg)} }


.admin-card {
  width:min(980px,92vw);
  max-height:86vh;
  overflow:auto;
}
.admin-card #admin-summary {
  margin:0 0 14px;
  color:#c9d7bc;
  font-size:12px;
  letter-spacing:.05em;
}
.admin-actions {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px;
  margin:14px 0 16px;
}
.admin-actions .primary-button,
.admin-actions .text-button {
  width:100%;
  min-height:42px;
  justify-content:center;
}
.admin-skill-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:10px;
  margin-top:12px;
}
.admin-skill-button {
  display:grid;
  grid-template-columns:38px 1fr auto;
  align-items:center;
  gap:9px;
  padding:9px 10px;
  color:#e5eadc;
  background:linear-gradient(135deg,rgba(12,27,17,.86),rgba(5,12,8,.72));
  border:1px solid rgba(223,235,202,.14);
  text-align:left;
  cursor:pointer;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  transition:transform .16s var(--ease),border-color .16s ease,filter .16s ease;
}
.admin-skill-button:hover { transform:translateY(-1px); border-color:rgba(219,199,127,.5); filter:brightness(1.08); }
.admin-skill-button:disabled { cursor:not-allowed; opacity:.42; filter:saturate(.35); }
.admin-skill-icon {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  color:#f1dd94;
  border:1px solid rgba(239,220,151,.38);
  background:rgba(3,8,5,.58);
  font-family:Georgia,"Songti SC",serif;
  font-weight:800;
}
.admin-skill-copy strong { display:block; font-size:12px; letter-spacing:.07em; }
.admin-skill-copy small { display:block; margin-top:2px; color:#8f9b8b; font-size:8px; letter-spacing:.05em; }
.admin-skill-button b { color:#e7d18d; font-size:10px; white-space:nowrap; }
.admin-skill-button.rarity-mythic { border-color:rgba(241,206,106,.34); background:linear-gradient(135deg,rgba(42,31,11,.88),rgba(7,16,9,.76)); }
.admin-skill-button.rarity-mythic .admin-skill-icon { color:#fff0a7; box-shadow:0 0 18px rgba(231,189,74,.16); }
.admin-skill-button.rarity-epic { border-color:rgba(165,133,218,.32); }
.admin-skill-button.rarity-rare { border-color:rgba(108,190,214,.28); }
.admin-note { color:#aebaa7; font-size:11px; line-height:1.65; }

@media (max-width: 980px) {
  .ability-slot { width:144px; }
  .ability-combo-sigil { width:44px; }
  .admin-skill-grid { grid-template-columns:1fr; }
}