/* VELSCOUR - UI styles */
:root {
  --gold: #d8b26a;
  --gold-dim: #8a6a34;
  --gold-bright: #ffe2a0;
  --blood: #a3120e;
  --panel: rgba(14, 9, 7, 0.94);
  --panel-2: rgba(28, 19, 14, 0.96);
  --line: #5c4424;
  --text: #e9dcc4;
  --text-dim: #a8977c;
  --common: #e8e8e8;
  --uncommon: #4fd65a;
  --rare: #4f8dff;
  --epic: #b45cff;
  --legendary: #ff9a2a;
  --mythic: #ff4058;
  --hud-w: min(96vw, 1180px, calc(100vh * 1.3));
  --hud-k: 0.148; /* bar height / width, set from assets/ui/hud.json by HUD.init */
  --font-head: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-body: "Alegreya Sans", "Segoe UI", Tahoma, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: #050303; color: var(--text); font-family: var(--font-body);
  user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none;
}
#app { position: fixed; inset: 0; overflow: hidden; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M2 2 L20 9 L12 12 L9 20 Z' fill='%23d8b26a' stroke='%23200' stroke-width='1.5'/></svg>") 2 2, crosshair; }
.hidden { display: none !important; }
button { font-family: var(--font-head); }

/* ------------------------------------------------------------------ buttons */
.btn {
  font-family: var(--font-head); font-weight: 700; letter-spacing: 1px; color: var(--gold-bright);
  background: linear-gradient(#3a2414, #1c0f08); border: 2px solid var(--gold-dim);
  border-radius: 4px; padding: 8px 18px; cursor: pointer; font-size: 15px; text-shadow: 0 1px 2px #000;
  box-shadow: inset 0 0 8px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.6);
}
.btn:hover { border-color: var(--gold); color: #fff; background: linear-gradient(#5a3418, #24120a); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn.red { background: linear-gradient(#5e1410, #2a0705); border-color: #8f2a20; }
.btn.big { font-size: 22px; padding: 12px 34px; }

/* ---------------------------------------------------------------------- HUD */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#hud-bar {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: var(--hud-w); height: calc(var(--hud-w) * var(--hud-k)); pointer-events: none;
}
/* the bar catches clicks only on its rail; above it, between the orbs, clicks reach the world */
#hud-rail { position: absolute; left: 0; right: 0; bottom: 0; top: 29%; z-index: 1; pointer-events: auto; }
#hud #hud-bar { pointer-events: none; }
#hud-img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
#xp-track { position: absolute; z-index: 1; background: #0d0806; left: 17.5%; width: 65%; top: 83.2%; height: 7%; overflow: hidden; }
#xp-fill { height: 100%; width: 0%; background: linear-gradient(#ffd36a, #c27b14 60%, #6b3a05); box-shadow: 0 0 8px #ffb43a; transition: width .25s; }
#xp-text { position: absolute; z-index: 4; left: 0; right: 0; top: 81%; text-align: center; font: 700 10px var(--font-head); color: var(--gold); text-shadow: 0 0 3px #000, 0 0 3px #000; pointer-events: none; opacity: 0; transition: opacity .2s; }
#hud-bar:hover #xp-text { opacity: 1; }
.orb-cover { position: absolute; z-index: 3; border-radius: 50%; overflow: hidden; pointer-events: none; }
.orb-empty { position: absolute; left: 0; right: 0; top: 0; height: 0%; background: linear-gradient(rgba(0,0,0,.86), rgba(5,0,0,.8)); transition: height .15s; box-shadow: 0 2px 6px rgba(255,255,255,.08); }
.orb-text { position: absolute; z-index: 4; font: 700 clamp(9px, 1.3vw, 14px) var(--font-head); color: #fff; text-shadow: 0 0 3px #000, 0 0 4px #000, 0 0 2px #000; text-align: center; pointer-events: none; white-space: nowrap; }
#hud-slots { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
#hud-slots .slot { pointer-events: auto; }
.slot { position: absolute; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.slot canvas, .slot img.icon { width: 100%; height: 100%; border-radius: 2px; image-rendering: auto; }
.slot .cd { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.72); pointer-events: none; }
.slot .cdtext { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 clamp(9px, 1.2vw, 14px) var(--font-head); color: #fff; text-shadow: 0 0 3px #000; pointer-events: none; }
.slot .count { position: absolute; right: 2px; bottom: 0; font: 700 clamp(9px, 1.1vw, 13px) var(--font-body); color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; pointer-events: none; }
.slot .nomana { position: absolute; inset: 0; background: rgba(20,40,160,.45); pointer-events: none; }
.slot.drop-target { outline: 2px solid var(--gold-bright); box-shadow: 0 0 12px var(--gold); }
.slot:hover { filter: brightness(1.2); }
.slot.flash { animation: slotflash .25s; }
@keyframes slotflash { from { filter: brightness(2.2); } to { filter: brightness(1); } }

/* MADNESS: fills over ~10 minutes in the dungeon; the hero (never auto-play) unleashes it */
#madness { position: absolute; left: 50%; bottom: 72%; transform: translateX(-50%); width: 34%; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; z-index: 6; }
#mad-track { position: relative; width: 100%; height: 9px; background: rgba(10,0,8,.8); border: 1px solid #5a1838; border-radius: 5px; overflow: hidden; box-shadow: 0 0 4px #000; }
#mad-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #5a0a3a, #c0104a 60%, #ff3070); transition: width .3s; }
#mad-text { position: absolute; inset: 0; text-align: center; font: 700 8px/9px var(--font-head); letter-spacing: 2px; color: #fff; text-transform: uppercase; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 3px #000; }
#madness.full #mad-fill { background: linear-gradient(90deg, #ff2050, #ff80b0, #c020ff); animation: madglow .8s ease-in-out infinite; }
#madness.on #mad-fill { background: linear-gradient(90deg, #c020ff, #ff2050); }
#madness-btn { pointer-events: auto; cursor: pointer; padding: 6px 22px; border: 2px solid #ff3070; border-radius: 6px; background: radial-gradient(#7a0828, #2a0010); color: #fff; font: 700 18px var(--font-head); letter-spacing: 3px; text-shadow: 0 0 6px #ff2050, 0 0 2px #000; box-shadow: 0 0 14px #ff2050, inset 0 0 10px #ff2050; animation: madpulse 1s ease-in-out infinite; }
#madness-btn:active { transform: scale(.95); }
@keyframes madpulse { 50% { box-shadow: 0 0 26px #ff3070, inset 0 0 16px #ff80b0; transform: scale(1.06); } }
@keyframes madglow { 50% { filter: brightness(1.5); } }
body.touch #madness-btn { padding: 8px 26px; font-size: 20px; }

#hud-top-left { position: absolute; left: 12px; top: 10px; pointer-events: none; text-shadow: 0 0 4px #000, 0 0 2px #000; }
#area-name { font: 700 20px var(--font-head); color: var(--gold-bright); letter-spacing: 1px; }
#area-sub { font: 400 14px var(--font-body); color: var(--text-dim); }
#buff-row { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; max-width: 50vw; }
#auto-status { margin-top: 6px; display: inline-block; padding: 2px 8px; border: 1px solid #2a6a8a; border-radius: 4px; background: rgba(4,20,30,.7); font: 700 12px var(--font-body); color: #8fe0ff; letter-spacing: .5px; text-shadow: 0 0 4px #000; max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbtn.on img { filter: drop-shadow(0 0 4px #2ab0ff) drop-shadow(0 0 2px #8fe0ff) hue-rotate(160deg) saturate(1.6) brightness(1.15); animation: autoglow 1.6s ease-in-out infinite; }
@keyframes autoglow { 50% { filter: drop-shadow(0 0 9px #4fd0ff) drop-shadow(0 0 3px #bff0ff) hue-rotate(160deg) saturate(1.8) brightness(1.3); } }
.buff { width: 30px; height: 30px; position: relative; border: 1px solid var(--gold-dim); border-radius: 3px; overflow: hidden; background: #000; }
.buff canvas { width: 100%; height: 100%; }
.buff span { position: absolute; bottom: 0; right: 1px; font: 700 10px var(--font-body); color: #fff; text-shadow: 0 0 2px #000; }
#hud-top-right { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
/* the minimap fills the open middle of the ring art, which overhangs it by about a fifth on every side */
#minimap-wrap { position: relative; width: 150px; aspect-ratio: 303 / 285.5; margin: 30px 32px 32px; }
#minimap { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; background: rgba(0,0,0,.6); cursor: pointer; }
#minimap-ring { position: absolute; width: 140%; pointer-events: none; filter: drop-shadow(0 2px 6px #000); }
#hud-buttons { display: flex; gap: 0; }
.hbtn { position: relative; width: 52px; height: 56px; border: 0; background: none; cursor: pointer; padding: 0; display: block; }
.hbtn img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 3px #000); transition: filter .12s, transform .12s; }
.hbtn:hover img { filter: drop-shadow(0 0 5px rgba(255,190,90,.75)) brightness(1.15); }
.hbtn:active img { transform: scale(.94); }
.hbtn .badge { top: -2px; right: 0; }
.badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #b0160f; color: #fff; font: 700 11px var(--font-body); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 6px #f22; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { transform: scale(1.15); } }
#boss-bar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: min(520px, 60vw); text-align: center; pointer-events: none; }
#boss-name { font: 900 18px var(--font-head); color: #ff6a3a; text-shadow: 0 0 6px #000, 0 0 10px #a00; letter-spacing: 2px; }
#boss-track { height: 14px; border: 2px solid #6a1a10; background: #1a0503; margin-top: 3px; border-radius: 2px; box-shadow: 0 0 10px #000; }
#boss-fill { height: 100%; width: 100%; background: linear-gradient(#ff3a20, #8a0a02); transition: width .15s; }
#boss-track { position: relative; }
.boss-mark { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: #ffd890; box-shadow: 0 0 4px #000; }
#boss-sub { font: 600 12px var(--font-body, sans-serif); color: #ffc8a0; text-shadow: 0 0 4px #000, 0 0 2px #000; margin-top: 2px; min-height: 14px; }
#boss-bar.warded #boss-fill { background: linear-gradient(#80c8ff, #1a4a8a); }
#boss-bar.warded #boss-sub { color: #a8d8ff; }
#center-msg { position: absolute; top: 24%; left: 0; right: 0; text-align: center; font: 900 clamp(22px, 4vw, 44px) var(--font-head); color: var(--gold-bright); text-shadow: 0 0 10px #000, 0 0 20px #a40; pointer-events: none; opacity: 0; transition: opacity .5s; letter-spacing: 3px; }
#center-msg small { display: block; font-size: .45em; color: var(--text); letter-spacing: 1px; }

/* hero stats plaque (top left) */
#hero-stats { pointer-events: auto; margin-top: 6px; width: max-content; min-width: 162px; padding: 5px 8px 6px; border: 1px solid #5c3a1c; border-radius: 3px;
  background: linear-gradient(180deg, rgba(34,10,6,.86), rgba(10,4,3,.86)); box-shadow: inset 0 0 10px #000, 0 0 0 1px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.7); }
#hero-stats .hs-row { display: flex; justify-content: space-between; align-items: baseline; line-height: 1.25; }
#hero-stats span { font: 700 10px var(--font-head); color: #a8876a; letter-spacing: 1.2px; text-transform: uppercase; }
#hero-stats b { font: 900 16px var(--font-head); color: #ffd98a; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 #000, 0 0 6px rgba(200,70,0,.55); }
#hero-stats .hs-avg b { color: #ff7a4a; text-shadow: 0 1px 0 #000, 0 0 8px rgba(255,40,0,.6); }
#hero-stats .hs-tally span { font-size: 9px; letter-spacing: .3px; white-space: nowrap; margin-right: 4px; }
#hero-stats .hs-tally b { font-size: 13px; color: #e8c890; }
#hero-stats .hs-first { margin-top: 3px; padding-top: 2px; border-top: 1px solid rgba(92,58,28,.6); }
#hs-spark { display: block; width: 100%; height: 18px; margin-top: 3px; border-top: 1px solid rgba(92,58,28,.6); image-rendering: pixelated; }

/* level-up banner */
#levelup { position: absolute; top: 9%; left: 0; right: 0; text-align: center; pointer-events: none; z-index: 5; }
#levelup.hidden { display: none; }
#levelup .lu-flash { position: fixed; inset: 0; opacity: 0; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 30%, rgba(40,0,0,.55) 65%, rgba(8,0,0,.9) 100%); }
#levelup .lu-burst { position: absolute; left: 50%; top: clamp(-34px, -3vw, -14px); width: min(640px, 84vw); height: clamp(130px, 17vw, 210px); margin-left: calc(min(640px, 84vw) / -2); opacity: 0;
  background: #c8902a; clip-path: polygon(50% 0%, 56% 18%, 66% 3%, 69% 21%, 82% 8%, 79% 27%, 97% 20%, 87% 38%, 100% 47%, 88% 56%, 99% 72%, 80% 70%, 85% 92%, 68% 78%, 62% 100%, 53% 82%, 43% 99%, 38% 79%, 22% 94%, 24% 72%, 3% 80%, 14% 60%, 0% 48%, 13% 39%, 2% 21%, 22% 26%, 18% 6%, 33% 20%, 37% 1%, 45% 19%); }
#levelup .lu-burst div { position: absolute; inset: 4px; clip-path: inherit;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 2px, rgba(0,0,0,0) 2px 4px), radial-gradient(ellipse at 50% 50%, #a8160a 0%, #5a0805 45%, #1c0302 80%); }
#levelup .lu-title { position: relative; display: inline-block; font: 900 clamp(36px, 6.4vw, 80px)/1 var(--font-head); letter-spacing: clamp(6px, 1.4vw, 18px); text-transform: uppercase; opacity: 0; color: #8a0c06; background: linear-gradient(#d8c8a8, #8a1008 55%, #2a0202); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 10px rgba(120,0,0,.9)); }
#levelup .lu-level { position: relative; margin-top: clamp(2px, .8vw, 10px); opacity: 0; }
#levelup .lu-level span { font: 700 clamp(12px, 1.5vw, 18px) var(--font-head); color: #c8a070; letter-spacing: 6px; text-transform: uppercase; vertical-align: middle; margin-right: 10px; text-shadow: 0 0 6px #000, 0 2px 0 #000; }
#levelup .lu-level b { display: inline-block; filter: drop-shadow(0 0 8px rgba(150,0,0,.9)); vertical-align: middle; font: 900 clamp(30px, 4.6vw, 58px)/1 var(--font-head); color: #ff3a20;
  text-shadow: 2px 2px 0 #0a0303, -2px 2px 0 #0a0303, 2px -2px 0 #0a0303, -2px -2px 0 #0a0303, 0 5px 0 #3a0403, 0 0 22px rgba(255,40,0,.7); }
#levelup .lu-level b.punch { animation: lu-punch .45s cubic-bezier(.2,1.6,.4,1); }
#levelup .lu-sub { position: relative; font: 700 clamp(11px, 1.4vw, 16px) var(--font-body); color: var(--text); letter-spacing: 1px; text-shadow: 0 0 4px #000, 0 0 2px #000; opacity: 0; margin-top: 2px; }
#levelup .lu-voice { position: relative; padding: 0 16px; margin-top: clamp(8px, 2vw, 22px); font: 900 clamp(14px, 2.1vw, 26px)/1.35 var(--font-head); letter-spacing: 2px; text-transform: uppercase; }
#lu-l1 { color: #b8a888; opacity: 0; text-shadow: 0 0 3px #000, 0 2px 0 #000, 0 0 14px rgba(160,20,0,.8); min-height: 1.35em; }
#lu-l2 { color: #b01810; opacity: 0; text-shadow: 0 0 3px #000, 0 2px 0 #000, 0 0 16px rgba(255,0,0,.75); min-height: 1.35em; animation: lu-flicker 2.3s steps(1) infinite; }
#levelup .lu-burst { display: none; }
#levelup .typing::after { content: ''; display: inline-block; width: .5em; height: .85em; margin-left: 3px; vertical-align: -.05em; background: currentColor; animation: lu-blink .3s steps(1) infinite; }
#levelup.play .lu-flash { animation: lu-flash 3.6s ease-in-out forwards; }
#levelup.play .lu-burst { animation: lu-burst .5s cubic-bezier(.2,1.5,.4,1) forwards, lu-pulse 1.2s .5s ease-in-out infinite alternate; }
#levelup.play .lu-title { animation: lu-bleed 1.1s .5s ease-out forwards; }
#levelup.play #lu-l1 { animation: lu-in 1.4s 1.6s forwards; }
#levelup.play #lu-l2 { animation: lu-in 1.4s 2.6s forwards, lu-flicker 2.3s 4s steps(1) infinite; }
/* Velscour's mood (src/data/taunts.js) colours the second line: dread is the blood-red flicker above */
#levelup[data-mood="mock"] #lu-l2 { color: #9cc838; text-shadow: 0 0 3px #000, 0 2px 0 #000, 0 0 14px rgba(110,190,0,.7); }
#levelup[data-mood="cheer"] #lu-l2 { color: #ffc838; text-shadow: 0 0 3px #000, 0 2px 0 #000, 0 0 16px rgba(255,150,0,.85); }
#levelup[data-mood="rage"] #lu-l2 { color: #ff3a14; text-shadow: 0 0 3px #000, 0 2px 0 #000, 0 0 12px rgba(255,40,0,.95), 0 0 26px rgba(255,90,0,.6); }
#levelup[data-mood="unhinged"] #lu-l2 { color: #c27cff; text-shadow: 0 0 3px #000, 0 2px 0 #000, 0 0 16px rgba(150,40,255,.8); }
#levelup[data-mood="sulk"] #lu-l2 { color: #86aed4; text-shadow: 0 0 3px #000, 0 2px 0 #000, 0 0 14px rgba(60,110,200,.7); }
#levelup.play[data-mood="mock"] #lu-l2 { animation: lu-in 1.4s 2.6s forwards, lu-sneer 1.6s 4s ease-in-out infinite; }
#levelup.play[data-mood="cheer"] #lu-l2 { animation: lu-in 1.4s 2.6s forwards, lu-glow .9s 4s ease-in-out infinite alternate; }
#levelup.play[data-mood="rage"] #lu-l2 { animation: lu-in .5s 2.6s forwards, lu-rage .14s 2.6s linear infinite; }
#levelup.play[data-mood="unhinged"] #lu-l2 { animation: lu-in 1.4s 2.6s forwards, lu-wobble 2.2s 4s ease-in-out infinite; }
#levelup.play[data-mood="sulk"] #lu-l2 { animation: lu-in 2s 2.6s forwards, lu-droop 3s 4.6s ease-in-out infinite alternate; }
#levelup.play .lu-level { animation: lu-bleed 1s .9s ease-out forwards; }
#levelup.play .lu-sub { animation: lu-in .8s 1.3s forwards; }
#levelup.play.out .lu-burst, #levelup.play.out .lu-title, #levelup.play.out .lu-level, #levelup.play.out .lu-sub, #levelup.out .lu-voice { animation: lu-out 1.2s forwards; }
@keyframes lu-flash { 0% { opacity: 0; } 15% { opacity: 1; } 70% { opacity: .8; } 100% { opacity: 0; } }
@keyframes lu-bleed { 0% { opacity: 0; filter: blur(10px) drop-shadow(0 0 10px rgba(120,0,0,.9)); transform: scale(1.12); } 100% { opacity: 1; transform: none; } }
@keyframes lu-burst { 0% { opacity: 0; transform: scale(.1) rotate(-30deg); } 100% { opacity: .92; transform: scale(1) rotate(-3deg); } }
@keyframes lu-pulse { from { opacity: .92; transform: scale(1) rotate(-3deg); } to { opacity: .8; transform: scale(1.04) rotate(-1deg); } }
@keyframes lu-slam { 0% { opacity: 0; transform: scale(3.2) skewX(-8deg); } 55% { opacity: 1; transform: scale(.9) skewX(-8deg); } 78% { transform: scale(1.07) skewX(-8deg); } 100% { opacity: 1; transform: scale(1) skewX(-8deg); } }
@keyframes lu-shake { 0%, 100% { translate: 0 0; } 20% { translate: -6px 3px; } 40% { translate: 5px -4px; } 60% { translate: -4px -2px; } 80% { translate: 3px 3px; } }
@keyframes lu-punch { 0% { transform: scale(1.3); filter: blur(4px); } 100% { transform: scale(1); } }
@keyframes lu-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes lu-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes lu-blink { 50% { opacity: 0; } }
@keyframes lu-rage { 0%, 100% { translate: 0 0; } 25% { translate: -3px 1px; } 50% { translate: 2px -2px; } 75% { translate: -1px 2px; } }
@keyframes lu-sneer { 0%, 100% { rotate: 0deg; } 25% { rotate: -1.5deg; } 75% { rotate: 1.5deg; } }
@keyframes lu-glow { from { scale: 1; filter: brightness(1); } to { scale: 1.05; filter: brightness(1.3); } }
@keyframes lu-wobble { 0%, 100% { scale: 1 1; rotate: 0deg; } 20% { scale: 1.06 .94; rotate: 1deg; } 45% { scale: .95 1.05; rotate: -2deg; } 70% { scale: 1.03 .98; rotate: 1.5deg; } }
@keyframes lu-droop { from { translate: 0 0; opacity: 1; } to { translate: 0 3px; opacity: .75; } }
@keyframes lu-flicker { 0%, 100% { opacity: 1; } 31% { opacity: .55; } 33% { opacity: 1; } 71% { opacity: .7; } 72% { opacity: 1; } }
#log { position: absolute; left: 12px; bottom: calc(var(--hud-w) * var(--hud-k) + 10px); width: min(420px, 60vw); pointer-events: none; font-size: 14px; display: flex; flex-direction: column; gap: 2px; }
#log div { text-shadow: 0 0 3px #000, 0 0 3px #000; animation: logfade 6s forwards; }
@keyframes logfade { 0% { opacity: 0; transform: translateX(-10px); } 5% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* ------------------------------------------------------------------- panels */
#panels { position: absolute; left: 0; right: 0; top: 0; bottom: calc(var(--hud-w) * var(--hud-k)); pointer-events: none; display: flex; align-items: flex-start; justify-content: center; gap: 10px; padding: 10px; }
.panel {
  pointer-events: auto; background: var(--panel); border: 2px solid var(--line); border-radius: 6px;
  box-shadow: 0 0 0 1px #000, 0 6px 30px rgba(0,0,0,.9), inset 0 0 40px rgba(0,0,0,.6);
  max-height: 100%; display: flex; flex-direction: column; min-width: 0; position: relative;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--line); background: linear-gradient(#2a1a10, #140c08); border-radius: 6px 6px 0 0; }
.panel-head h2 { margin: 0; font: 700 18px var(--font-head); color: var(--gold-bright); letter-spacing: 2px; }
.panel-close { background: none; border: 1px solid var(--gold-dim); color: var(--gold); width: 28px; height: 28px; border-radius: 4px; cursor: pointer; font-size: 16px; line-height: 1; }
.panel-body { padding: 10px; overflow: auto; min-height: 0; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.tabs { display: flex; gap: 4px; padding: 6px 10px 0; flex-wrap: wrap; }
.tab { font: 700 13px var(--font-head); color: var(--text-dim); background: #1a110b; border: 1px solid var(--line); border-bottom: none; padding: 6px 12px; border-radius: 4px 4px 0 0; cursor: pointer; }
.tab.active { color: var(--gold-bright); background: #33200f; }
.gold-text { color: #ffd34a; font-weight: 700; }
.dim { color: var(--text-dim); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 6px; }

/* inventory */
.inv-wrap { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.paperdoll { display: grid; grid-template-columns: repeat(4, 64px); grid-template-rows: repeat(4, 64px); gap: 6px; position: relative; padding: 6px; background: radial-gradient(#2a1a10, #0d0805); border: 1px solid var(--line); border-radius: 4px; }
.paperdoll .portrait { display: flex; align-items: flex-end; justify-content: center; opacity: .9; pointer-events: none; }
.paperdoll .portrait img { max-height: 132px; max-width: 64px; object-fit: contain; filter: drop-shadow(0 0 6px #000); }
.eslot { position: relative; border: 1px solid #4a3620; background: rgba(0,0,0,.55); border-radius: 3px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.eslot .lbl { position: absolute; bottom: 1px; left: 0; right: 0; text-align: center; font-size: 9px; color: #6d5a40; pointer-events: none; text-transform: uppercase; }
.bag { display: grid; grid-template-columns: repeat(10, 44px); grid-auto-rows: 44px; gap: 3px; }
.bslot { position: relative; border: 1px solid #3a2a18; background: rgba(0,0,0,.5); border-radius: 2px; cursor: pointer; }
.bslot.sel, .eslot.sel { outline: 2px solid var(--gold-bright); }
.bslot.drop-target, .eslot.drop-target { outline: 2px dashed var(--gold); }
.stash-panel .stash-grid { grid-template-columns: repeat(7, 44px); max-height: min(60vh, 470px); overflow-y: auto; padding-right: 4px; }
.itemicon { position: absolute; inset: 2px; display: flex; align-items: center; justify-content: center; border-radius: 2px; }
.itemicon canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.itemicon .stack { position: absolute; right: 1px; bottom: 0; font: 700 11px var(--font-body); color: #fff; text-shadow: 0 0 3px #000; }
.itemicon .upg { position: absolute; left: 1px; top: 0; font: 700 10px var(--font-body); color: #ffd34a; text-shadow: 0 0 3px #000; }
.itemicon .socks { position: absolute; left: 1px; bottom: 1px; display: flex; gap: 1px; }
.itemicon .socks i { width: 5px; height: 5px; border-radius: 50%; background: #111; border: 1px solid #777; }
.itemicon .socks i.f { background: #ffd; border-color: #fff; }
.r0 { border-color: #555 !important; } .r1 { border-color: #2c7a33 !important; background: rgba(20,60,20,.35) !important; }
.r2 { border-color: #2d4f99 !important; background: rgba(20,30,80,.35) !important; } .r3 { border-color: #6a2d99 !important; background: rgba(50,15,80,.4) !important; }
.r4 { border-color: #b8641a !important; background: rgba(90,40,5,.45) !important; box-shadow: inset 0 0 10px rgba(255,140,30,.35); }
.r5 { border-color: #c0203a !important; background: rgba(90,5,20,.5) !important; box-shadow: inset 0 0 12px rgba(255,50,80,.45); }
.c0 { color: var(--common); } .c1 { color: var(--uncommon); } .c2 { color: var(--rare); } .c3 { color: var(--epic); } .c4 { color: var(--legendary); } .c5 { color: var(--mythic); }
.item-detail { width: 280px; min-height: 120px; border: 1px solid var(--line); background: rgba(0,0,0,.45); padding: 8px; border-radius: 4px; font-size: 14px; }
.stats-grid { display: grid; grid-template-columns: auto auto; gap: 2px 14px; font-size: 13px; }
.stats-grid .v { text-align: right; color: var(--gold-bright); }
.attr-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 3px 0; border-bottom: 1px solid rgba(92,68,36,.35); }
.attr-row b { color: var(--gold-bright); min-width: 36px; text-align: right; }
.plus { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--gold); background: #3a2a0a; color: var(--gold-bright); font-weight: 700; cursor: pointer; padding: 0; }

/* tooltip */
#tooltip { position: fixed; z-index: 50; pointer-events: none; max-width: 320px; background: rgba(8,5,4,.96); border: 1px solid var(--gold-dim); border-radius: 4px; padding: 8px 10px; font-size: 14px; box-shadow: 0 4px 20px #000; }
.tt-name { font: 700 16px var(--font-head); }
.tt-base { color: var(--text-dim); font-size: 13px; margin-bottom: 4px; }
.tt-line { color: #8fb4ff; }
.tt-leg { color: var(--legendary); margin-top: 4px; }
.tt-gem { color: #c8f0ff; }
.tt-sep { border-top: 1px solid #3a2a18; margin: 5px 0; }
.tt-price { color: #ffd34a; margin-top: 4px; }
.cmp-up { color: #5f5; } .cmp-down { color: #f55; }

/* skills */
.tree { display: grid; grid-template-columns: repeat(4, 64px); gap: 16px 22px; padding: 10px 14px; position: relative; justify-content: center; }
.tree-row-lbl { position: absolute; left: 0; font-size: 10px; color: var(--text-dim); }
.snode { position: relative; width: 64px; height: 64px; border: 2px solid #4a3620; border-radius: 6px; background: #000; cursor: pointer; }
.snode canvas { width: 100%; height: 100%; border-radius: 4px; }
.snode.locked canvas { filter: grayscale(1) brightness(.35); }
.snode.avail { border-color: var(--gold); box-shadow: 0 0 10px rgba(255,200,80,.5); }
.snode.has { border-color: #c9a050; }
.snode.sel { outline: 2px solid #fff; }
.snode .lvl { position: absolute; right: -6px; bottom: -6px; background: #140c06; border: 1px solid var(--gold-dim); border-radius: 8px; padding: 0 5px; font: 700 11px var(--font-body); color: var(--gold-bright); }
.snode .link { position: absolute; left: 50%; top: -18px; width: 2px; height: 16px; background: #5c4424; }
.snode.has .link { background: var(--gold); }
.skill-detail { width: 300px; border: 1px solid var(--line); background: rgba(0,0,0,.45); padding: 10px; border-radius: 4px; font-size: 14px; }
.skill-detail h3 { margin: 0 0 2px; font: 700 18px var(--font-head); color: var(--gold-bright); }
.skill-detail .tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 8px; background: #2a1a0e; border: 1px solid var(--line); margin-right: 4px; color: var(--text-dim); }
.assign-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.assign-row button { min-width: 34px; padding: 4px 6px; font-size: 11px; }
.book-list { display: flex; flex-direction: column; gap: 6px; }
.book-item { display: flex; gap: 10px; align-items: center; padding: 6px; border: 1px solid #3a2a18; border-radius: 4px; background: rgba(0,0,0,.35); cursor: grab; }
.book-item canvas { width: 48px; height: 48px; border-radius: 4px; border: 1px solid var(--gold-dim); flex: none; }
.book-item .meta { flex: 1; min-width: 0; }
.book-item .meta b { color: var(--gold-bright); font-family: var(--font-head); }
.book-item .meta p { margin: 2px 0 0; font-size: 12px; color: var(--text-dim); }

/* vendors */
.shop-grid { display: grid; grid-template-columns: repeat(8, 44px); grid-auto-rows: 44px; gap: 3px; }
.vendor-wrap { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.vendor-greet { font-style: italic; color: var(--text-dim); margin-bottom: 8px; max-width: 520px; }
.service-box { border: 1px solid var(--line); padding: 8px; border-radius: 4px; background: rgba(0,0,0,.35); margin-bottom: 8px; }

/* -------------------------------------------------------------------- screens */
#screens { position: absolute; inset: 0; pointer-events: none; }
.screen { position: absolute; inset: 0; pointer-events: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(40,8,4,.55), rgba(0,0,0,.94) 70%); overflow: auto; }
.title-logo { width: min(860px, 88vw); max-height: 42vh; object-fit: contain; filter: drop-shadow(0 0 30px rgba(255,80,10,.45)); animation: logo-in 2s ease-out; }
@keyframes logo-in { from { opacity: 0; transform: scale(.94); filter: blur(6px); } }
.title-tag { position: relative; z-index: 2; font: 400 18px var(--font-head); color: var(--text-dim); letter-spacing: 3px; margin: 6px 0 24px; text-align: center; padding: 0 12px; }
.title-menu { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; min-width: 260px; }
.title-foot { position: absolute; z-index: 2; bottom: 10px; font-size: 12px; color: #6d5a40; }
.title-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.title-eyes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; image-rendering: pixelated; }
.title-logo.intro { position: relative; z-index: 1; animation: none; opacity: 0; will-change: opacity, filter, transform; }
.title-screen .title-tag, .title-screen .title-menu, .title-screen .title-foot { z-index: 3; transition: opacity .9s ease-out; }
.title-screen:not(.title-lit) .title-tag, .title-screen:not(.title-lit) .title-menu, .title-screen:not(.title-lit) .title-foot { opacity: 0; }
.title-screen:not(.title-ready) .title-menu, .title-screen:not(.title-ready) .title-foot { pointer-events: none; }
.title-gate { position: absolute; z-index: 3; bottom: 18%; left: 0; right: 0; text-align: center; font: 400 16px var(--font-head); letter-spacing: 6px; color: #8a2a1c; text-transform: uppercase; pointer-events: none; opacity: 0; transition: opacity .6s; }
.title-screen { overflow: hidden; justify-content: safe center; padding: max(4vh, env(safe-area-inset-top)) env(safe-area-inset-right) max(2vh, env(safe-area-inset-bottom)) env(safe-area-inset-left); }
.title-screen .title-logo { flex: 0 1 auto; min-height: 0; margin-top: 3vh; }
.title-gated .title-gate { opacity: 1; animation: gate-pulse 2.6s ease-in-out infinite; }
@keyframes gate-pulse { 50% { color: #d0402a; text-shadow: 0 0 12px #a01808; } }
.screen-title { margin: 6px 0 2px; font: 700 22px var(--font-head); color: var(--gold-bright); letter-spacing: 3px; text-align: center; }
.screen-title small { display: block; font-size: 12px; letter-spacing: 2px; color: var(--text-dim); }
.class-screen, .slot-screen { justify-content: flex-start; padding-top: 6px; }
.class-screen > *, .slot-screen > * { flex-shrink: 0; }
.hero-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.plaque { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); width: max-content; max-width: 96%; padding: 1px 5px; text-align: center;
  background: linear-gradient(#2a1c10, #120a05); border: 1px solid #a07c40; outline: 1px solid #000; box-shadow: inset 0 0 0 1px #3c2814, 0 1px 3px #000;
  font: 700 clamp(8px, 0.82vw, 11px) var(--font-head); line-height: 1.15; color: #f6e6c0; text-transform: uppercase; text-shadow: 0 1px 0 #000; pointer-events: none; }
.class-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 116px)); justify-content: center; gap: 6px; padding: 6px 8px; width: min(98vw, 960px); }
.class-card { position: relative; height: clamp(84px, 24vh, 178px); border: 2px solid #3a2a18; border-radius: 6px; background: radial-gradient(ellipse at 50% 70%, #1d130c, #050302 75%); cursor: pointer; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.class-card:hover { border-color: var(--gold-dim); }
.class-card.sel { border-color: var(--gold-bright); box-shadow: 0 0 14px rgba(255,180,60,.6); }
.class-info { display: flex; gap: 16px; align-items: center; max-width: 900px; padding: 4px 16px; flex-wrap: wrap; justify-content: center; }
.class-big { position: relative; width: clamp(90px, 20vh, 190px); height: clamp(130px, 30vh, 280px); flex: none; }
.class-text { flex: 1 1 300px; }
.class-info h2 { margin: 0; font: 900 28px var(--font-head); color: var(--gold-bright); letter-spacing: 2px; }
.class-info p { margin: 4px 0; max-width: 520px; }
.slot-note { color: #ffb070; margin: 4px 12px; text-align: center; }
.slot-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 170px)); gap: 10px; padding: 8px; max-width: 98vw; }
.slot-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border: 2px solid #3a2a18; border-radius: 6px; background: linear-gradient(#1a110b, #070403); cursor: pointer; text-align: center; min-width: 0; transition: border-color .15s, box-shadow .15s; }
.slot-card:hover { border-color: var(--gold); box-shadow: 0 0 14px rgba(255,180,60,.4); }
.slot-card.empty { border-style: dashed; background: rgba(0,0,0,.35); }
.slot-num { font: 700 11px var(--font-head); color: var(--text-dim); letter-spacing: 2px; text-transform: uppercase; }
.slot-hero { position: relative; width: 100%; height: clamp(100px, 36vh, 250px); border-radius: 4px; background: radial-gradient(ellipse at 50% 72%, #22160d, #050302 72%); overflow: hidden; }
.slot-plus { position: absolute; inset: 0 0 18px; display: flex; align-items: center; justify-content: center; font: 400 54px var(--font-head); color: #4a3820; transition: color .15s, text-shadow .15s; }
.slot-card.empty:hover .slot-plus { color: var(--gold-bright); text-shadow: 0 0 18px rgba(255,180,60,.7); }
.slot-info { font-size: 13px; line-height: 1.25; min-height: 3.6em; }
.slot-info b { font-family: var(--font-head); color: var(--gold-bright); font-size: 13px; }
.slot-btns { display: flex; gap: 6px; }
.slot-screen .save-list { max-height: none; }
.name-input { font: 700 16px var(--font-head); background: #120a06; border: 2px solid var(--gold-dim); color: var(--gold-bright); padding: 8px 10px; border-radius: 4px; width: 220px; }
.save-list { display: flex; flex-direction: column; gap: 8px; min-width: min(480px, 92vw); max-height: 60vh; overflow: auto; }
.save-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px; background: rgba(0,0,0,.5); cursor: pointer; }
.save-row:hover { border-color: var(--gold); }
.save-row .info { flex: 1; }
.save-row b { font-family: var(--font-head); color: var(--gold-bright); }
.dialog-box { pointer-events: auto; background: var(--panel); border: 2px solid var(--gold-dim); border-radius: 8px; padding: 18px 22px; max-width: min(560px, 92vw); text-align: center; box-shadow: 0 0 40px #000; }
.dialog-box h2 { font: 900 24px var(--font-head); color: var(--gold-bright); margin: 0 0 8px; letter-spacing: 2px; }
.dialog-box p { margin: 6px 0 14px; }
.dialog-box .row { justify-content: center; }
.death-title { font: 900 clamp(40px, 9vw, 96px) var(--font-head); color: #b3140c; text-shadow: 0 0 30px #f00, 0 0 4px #000; letter-spacing: 6px; animation: logo-in 2s; }
.settings-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; text-align: left; }
.help-keys { text-align: left; font-size: 14px; columns: 2; column-gap: 24px; }
.help-keys div { break-inside: avoid; margin-bottom: 3px; }
.help-keys kbd { display: inline-block; min-width: 22px; text-align: center; padding: 1px 5px; border: 1px solid var(--gold-dim); border-radius: 3px; background: #1a110b; color: var(--gold-bright); font: 700 12px var(--font-body); }

/* ------------------------------------------------------------------- touch */
#touch-ui { position: absolute; inset: 0; pointer-events: none; }
#joy-base { position: absolute; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; border: 2px solid rgba(216,178,106,.45); background: radial-gradient(rgba(60,30,10,.35), rgba(0,0,0,.25)); opacity: 0; transition: opacity .15s; }
#joy-base.on { opacity: 1; }
#joy-knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: radial-gradient(#e2bb72, #6e4a1c); border: 2px solid #ffe2a0; box-shadow: 0 0 10px #000; }
#touch-buttons { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; }
.tbtn { position: absolute; pointer-events: auto; border-radius: 50%; border: 2px solid var(--gold-dim); background: rgba(10,6,4,.7); overflow: hidden; box-shadow: 0 0 8px #000; display: flex; align-items: center; justify-content: center; }
.tbtn canvas { width: 100%; height: 100%; border-radius: 50%; }
.tbtn .cd { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.7); }
.tbtn .k { position: absolute; top: 2px; left: 0; right: 0; text-align: center; font: 700 9px var(--font-body); color: var(--gold); text-shadow: 0 0 2px #000; }
.tbtn.pressed { filter: brightness(1.6); border-color: var(--gold-bright); }
.tbtn.main { border-width: 3px; border-color: var(--gold); }
.tbtn.flip { flex-direction: column; color: var(--gold-bright); font: 700 15px/1 var(--font-body); background: rgba(30,16,8,.8); }
.tbtn.flip span { font-size: 8px; color: var(--text-dim); }
.tbtn.flip.on { border-color: var(--gold-bright); box-shadow: 0 0 8px rgba(255,190,90,.6); }

#rotate-hint { position: absolute; inset: 0; z-index: 80; background: rgba(0,0,0,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; font-size: 18px; }
#rotate-hint div { font-size: 64px; color: var(--gold); animation: spin 2s infinite ease-in-out; }
@keyframes spin { 50% { transform: rotate(90deg); } }
#loading { position: absolute; inset: 0; z-index: 90; background: #050303; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 0 16px; text-align: center; font: 700 clamp(13px, 3.6vmin, 16px) var(--font-head); color: var(--gold); letter-spacing: 2px; }
#loading-bar { width: min(320px, 70vw); height: 6px; border: 1px solid #3a2410; border-radius: 3px; background: #120a06; overflow: hidden; }
#loading-fill { height: 100%; width: 0; background: linear-gradient(90deg, #8a1c06, #e2502a, #ffb428); box-shadow: 0 0 8px #e2502a; transition: width .2s; }
.spinner { width: 46px; height: 46px; border: 4px solid #3a2410; border-top-color: #e2502a; border-radius: 50%; animation: spin2 .9s linear infinite; }
@keyframes spin2 { to { transform: rotate(360deg); } }
.quest-log { min-width: min(340px, 86vw); }
.q-sec { margin-bottom: 10px; }
.q-sec h3 { margin: 0 0 4px; font: 700 13px var(--font-head); color: var(--gold); letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.q-title { font: 700 15px var(--font-head); color: var(--gold-bright); margin: 2px 0 4px; }
.q-step { display: flex; gap: 6px; align-items: baseline; margin: 2px 0; }
.q-step i { font-style: normal; color: #b0160f; width: 14px; flex-shrink: 0; text-align: center; }
.q-step.done i { color: #6fd060; }
.q-step.done span { color: var(--text-dim); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }
.q-note { margin-top: 4px; font-size: 12px; }
.q-bar { position: relative; height: 18px; border: 1px solid var(--gold-dim); border-radius: 3px; background: #0d0806; overflow: hidden; margin: 4px 0 6px; }
.q-bar div { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#ff7a40, #a01808 60%, #4a0804); box-shadow: 0 0 8px #f42; }
.q-bar span { position: relative; display: block; text-align: center; font: 700 11px/18px var(--font-body); color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.q-raids { display: flex; flex-wrap: wrap; gap: 4px; }
.q-raids span { padding: 1px 7px; border: 1px solid #7a2a10; border-radius: 3px; background: rgba(90,20,6,.5); font: 700 12px var(--font-head); color: #ffb070; }
#drag-ghost { position: fixed; z-index: 60; width: 48px; height: 48px; pointer-events: none; transform: translate(-50%, -50%); opacity: .9; filter: drop-shadow(0 0 6px #000); }
#drag-ghost canvas { width: 100%; height: 100%; }

/* ---------------------------------------------------------- touch layout */
body.touch { --hud-w: min(56vw, calc(100vh * 1.25)); }
/* nudge the bar left, clear of the skill buttons and their page flip */
body.touch #hud-bar { left: calc(50% - 4vw); }
body.touch #minimap-wrap { width: 84px; margin: 17px 18px 18px; }
body.touch #hud-top-right { flex-direction: row-reverse; align-items: flex-start; }
body.touch #hud-buttons { flex-wrap: wrap; justify-content: flex-end; max-width: 46vw; }
body.touch #boss-bar { width: 30vw; left: 36%; top: 8px; }
@media (max-width: 720px) { body.touch #boss-bar { width: 26vw; left: 31%; } }
body.touch #boss-name { font-size: 13px; }
body.touch #boss-sub { font-size: 10px; min-height: 11px; }
body.touch .hbtn { width: 38px; height: 41px; }
body.touch #area-name { font-size: 15px; }
body.touch #area-sub { font-size: 12px; }
body.touch #auto-status { font-size: 10px; margin-top: 3px; max-width: 34vw; }
body.touch #hero-stats { width: max-content; min-width: 124px; padding: 3px 6px 4px; margin-top: 3px; }
body.touch #hero-stats span { font-size: 8px; letter-spacing: .6px; }
body.touch #hero-stats b { font-size: 12px; }
body.touch #hero-stats .hs-tally span { font-size: 7px; letter-spacing: .3px; }
body.touch #hero-stats .hs-tally b { font-size: 10px; }
body.touch #hs-spark { height: 12px; margin-top: 2px; }
body.touch #levelup { top: 21%; }
body.touch #levelup .lu-burst { width: 58vw; margin-left: -29vw; height: 21vw; top: -10px; }
body.touch #levelup .lu-title { font-size: min(6.4vw, 54px); }
body.touch #levelup .lu-level b { font-size: min(4.6vw, 38px); }
body.touch #levelup .lu-voice { font-size: min(2.6vw, 20px); margin-top: 6px; }
body.touch #log { font-size: 12px; bottom: calc(var(--hud-w) * var(--hud-k) + 4px); }
body.touch #xp-text { font-size: 8px; }
body.touch .bag { grid-template-columns: repeat(10, 36px); grid-auto-rows: 36px; }
body.touch .shop-grid { grid-template-columns: repeat(6, 36px); grid-auto-rows: 36px; }
body.touch .vendor-panel { max-width: 46vw; }
body.touch .stash-panel { max-width: 46vw; }
body.touch .stash-panel .stash-grid { grid-template-columns: repeat(6, 36px); max-height: 52vh; }
body.touch .vendor-panel .vendor-greet { font-size: 12px; margin-bottom: 4px; }
body.touch .panel { max-width: 100%; }
body.touch .paperdoll { grid-template-columns: repeat(4, 52px); grid-template-rows: repeat(4, 52px); }
body.touch .tree { grid-template-columns: repeat(4, 50px); gap: 12px 14px; }
body.touch .snode { width: 50px; height: 50px; }
body.touch #panels { bottom: 0; padding: 4px; }
body.touch .panel-head { padding: 4px 8px; }
body.touch .panel-head h2 { font-size: 15px; }
body.touch .item-detail, body.touch .skill-detail { width: 230px; font-size: 12px; }
@media (max-width: 900px) {
  .class-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .plaque { font-size: 8px; padding: 0 3px; }
  .title-tag { font-size: 13px; margin-bottom: 12px; }
}
@media (max-width: 600px) {
  .class-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .class-card { height: min(24vh, 34vw); }
  .title-menu { min-width: min(260px, 86vw); }
  .slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .slot-hero { height: 24vh; }
}
@media (max-height: 500px) {
  .title-logo { max-height: 34vh; }
  .title-screen .title-logo { max-height: 30vh; margin-top: 5vh; }
  .title-screen .title-tag { font-size: 11px; letter-spacing: 2px; margin: 2px 0 8px; }
  .title-screen .title-menu { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 8px; max-width: min(640px, 94vw); min-width: 0; }
  .title-screen .title-menu .btn { font-size: 14px; padding: 6px 14px; }
  .title-screen .title-menu .btn.big { font-size: 17px; padding: 7px 20px; flex: 1 1 40%; }
  .title-screen .title-menu .btn.big span { font-size: 11px !important; }
  .title-gate { bottom: 14%; font-size: 13px; }
  .class-screen .btn.big { font-size: 17px; padding: 6px 22px; }
  .class-screen .name-input { padding: 5px 8px; font-size: 14px; }
  .class-screen .btn { padding-top: 5px; padding-bottom: 5px; }
  .class-info { gap: 10px; padding: 0 12px; }
  .title-foot { display: none; }
  .screen-title { font-size: 16px; margin: 2px 0 0; }
  .class-card { height: 20vh; }
  .class-big { height: 25vh; width: 17vh; }
  .class-screen .row { margin: 2px 0 6px !important; }
  .slot-info { font-size: 11px; min-height: 0; }
  .slot-btns .btn { padding: 2px 7px; font-size: 11px; }
  .slot-hero { height: 34vh; }
  .class-info h2 { font-size: 20px; }
  .class-info p { font-size: 13px; }
}
/* skill mastery (ui/skills.js) and the Gem Forge (ui/vendor.js) */
.mastery { margin: 6px 0 2px; font-size: 12px; }
.mastery .mbar { height: 5px; background: #1a120c; border: 1px solid #3a2a1a; border-radius: 3px; margin-top: 2px; overflow: hidden; }
.mastery .mbar > div { height: 100%; box-shadow: 0 0 6px currentColor; }
.snode .mlvl { position: absolute; left: 2px; top: 1px; font-size: 10px; color: #8fe0ff; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.forge-row { gap: 6px; flex-wrap: wrap; margin: 4px 0; align-items: center; }
.forge-row > span { min-width: 170px; }
.vendor-sub { margin: 10px 0 4px; }
.class-card .card-lv { position: absolute; top: 3px; right: 5px; font: 700 11px var(--font-head); color: var(--gold-bright); text-shadow: 0 1px 2px #000; }
.class-card:not(.has-hero) canvas { opacity: .55; }
.class-screen.del-mode .class-card.has-hero { border-color: #c03a2a; box-shadow: 0 0 12px rgba(220,50,30,.55); }
.class-screen.del-mode .class-card:not(.has-hero) { opacity: .4; cursor: default; }