:root {
  --gold: #e8c46a; --gold2: #b8913a; --cyan: #6fe3ff; --panel: rgba(12, 16, 26, 0.86); --panel2: rgba(22, 28, 44, 0.92);
  --eacc: #ff8a1f; --ea: #4fb3ff; --hp: #3fd25a; --hp2: #1f8a34; --text: #eef2f8; --dim: #9aa6b8;
  --font: 'Segoe UI', 'Trebuchet MS', system-ui, sans-serif; --serif: Georgia, 'Palatino Linotype', 'Book Antiqua', serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--text); font-family: var(--font); user-select: none; -webkit-user-select: none; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
button { font-family: var(--font); cursor: pointer; }

/* ---------- panels ---------- */
.panel { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid rgba(232, 196, 106, 0.45); border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 10px 40px rgba(0,0,0,0.55), inset 0 0 30px rgba(111, 227, 255, 0.05); }
.panel-title { font-family: var(--serif); color: var(--gold); letter-spacing: 2px; text-transform: uppercase; font-size: 13px; margin: 14px 0 8px; border-bottom: 1px solid rgba(232,196,106,0.25); padding-bottom: 4px; }
.btn { border: 1px solid var(--gold2); background: linear-gradient(180deg, #3a2c14, #1e160a); color: var(--gold); padding: 10px 22px; border-radius: 6px; font-weight: 700; letter-spacing: 1px; font-size: 15px; text-shadow: 0 1px 2px #000; }
.btn:hover { filter: brightness(1.25); box-shadow: 0 0 14px rgba(232,196,106,0.4); }
.btn.primary { background: linear-gradient(180deg, #8a2a10, #4a1406); color: #ffe7a8; border-color: #e8a04a; }
.btn.ghost { background: rgba(255,255,255,0.05); padding: 8px 12px; }

/* ---------- loading ---------- */
#loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 50;
  background: radial-gradient(ellipse at 50% 40%, #1b2a4a 0%, #080b14 60%, #000 100%); }
.logo { display: flex; flex-direction: column; align-items: center; font-family: var(--serif); }
.logo .l1 { font-size: 64px; letter-spacing: 12px; font-weight: 700; background: linear-gradient(180deg, #fff6d0, #e8c46a 50%, #8a5a1a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 12px rgba(232,196,106,0.35)); }
.logo .l2 { font-size: 26px; letter-spacing: 22px; color: var(--cyan); margin-top: -6px; text-shadow: 0 0 18px rgba(111,227,255,0.6); }
.logo .l3 { margin-top: 14px; font-size: 16px; letter-spacing: 6px; color: var(--dim); text-transform: uppercase; }
.logo.small .l1 { font-size: 30px; letter-spacing: 6px; }
.logo.small .l2 { font-size: 13px; letter-spacing: 11px; margin-top: -2px; }
.loadbar { width: 460px; height: 10px; margin-top: 46px; border: 1px solid var(--gold2); border-radius: 6px; background: rgba(0,0,0,0.6); overflow: hidden; }
#loadfill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--eacc), #ffd36b, var(--cyan), var(--ea)); box-shadow: 0 0 12px rgba(111,227,255,0.6); transition: width 0.25s; }
#loadtext { margin-top: 12px; color: var(--dim); font-size: 14px; }
.loadtip { margin-top: 28px; max-width: 560px; text-align: center; color: #c9d4e4; font-style: italic; font-size: 14px; opacity: 0.8; }

/* ---------- character select ---------- */
#select { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#select > * { pointer-events: auto; }
.sel-top { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.realm { margin-top: 6px; font-size: 13px; color: var(--dim); background: rgba(0,0,0,0.45); padding: 4px 12px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.12); white-space: nowrap; }
.realm.online { color: #8dff9a; } .realm.offline { color: #ffd36b; }
.sel-left { position: absolute; left: 24px; top: 110px; width: 300px; padding: 6px 16px 16px; }
.factions { display: flex; gap: 10px; }
.fac { flex: 1; border-radius: 8px; padding: 10px 6px; color: #fff; border: 2px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.35); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fac b { font-size: 22px; font-family: var(--serif); }
.fac small { font-size: 11px; color: var(--dim); }
.fac.eacc.active { border-color: var(--eacc); background: linear-gradient(180deg, rgba(255,138,31,0.35), rgba(80,30,5,0.5)); box-shadow: 0 0 18px rgba(255,138,31,0.5); }
.fac.ea.active { border-color: var(--ea); background: linear-gradient(180deg, rgba(79,179,255,0.35), rgba(5,30,80,0.5)); box-shadow: 0 0 18px rgba(79,179,255,0.5); }
.motto { font-family: var(--serif); font-style: italic; color: #d8e0ec; font-size: 13px; margin: 10px 2px 0; text-align: center; }
.champ-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.champ { position: relative; border-radius: 8px; overflow: hidden; border: 2px solid rgba(255,255,255,0.15); background: #0a0d16; cursor: pointer; padding: 0; }
.champ img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; }
.champ span { position: absolute; left: 0; right: 0; bottom: 0; font-size: 12px; font-weight: 700; padding: 4px; background: linear-gradient(0deg, rgba(0,0,0,0.9), transparent); color: #fff; text-align: center; }
.champ.active { border-color: var(--gold); box-shadow: 0 0 16px rgba(232,196,106,0.6); }
.champ:hover { filter: brightness(1.2); }
.sel-right { position: absolute; right: 24px; top: 110px; width: 380px; padding: 16px 18px 18px; max-height: calc(100vh - 230px); overflow-y: auto; }
.champ-name { font-family: var(--serif); font-size: 30px; color: #fff; }
.champ-title { color: var(--gold); font-family: var(--serif); font-style: italic; font-size: 15px; }
.champ-role { margin-top: 6px; display: inline-block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 3px 8px; border-radius: 10px; background: rgba(111,227,255,0.12); color: var(--cyan); border: 1px solid rgba(111,227,255,0.3); }
.champ-bio { margin-top: 12px; line-height: 1.5; font-size: 14px; color: #d4dce8; }
.champ-abilities .ab { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 9px; }
.champ-abilities img { width: 38px; height: 38px; border-radius: 6px; border: 1px solid rgba(232,196,106,0.5); flex-shrink: 0; }
.champ-abilities b { font-size: 13px; color: #fff; display: block; }
.champ-abilities p { margin: 1px 0 0; font-size: 12px; color: var(--dim); line-height: 1.35; }
.sel-bottom { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; padding: 12px; align-items: center; }
#heroName { width: 260px; font-size: 18px; padding: 10px 14px; border-radius: 6px; border: 1px solid var(--gold2); background: rgba(0,0,0,0.55); color: #fff; outline: none; font-family: var(--serif); }
#heroName:focus { box-shadow: 0 0 12px rgba(232,196,106,0.45); }
.disclaimer { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-size: 11px; color: rgba(255,255,255,0.55); text-align: center; width: 90%; }

/* ---------- unit frames ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }
#plates, #fct { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.unitframe { position: absolute; top: 16px; left: 16px; display: flex; align-items: center; gap: 0; width: 290px; pointer-events: auto; }
.unitframe .portrait { position: relative; width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--gold2); overflow: hidden; background: #111; flex-shrink: 0; z-index: 2; box-shadow: 0 0 0 2px #000, 0 4px 14px rgba(0,0,0,0.7); }
.unitframe .portrait img { width: 100%; height: 100%; object-fit: cover; }
.unitframe .lvl { position: absolute; bottom: -2px; left: -2px; width: 26px; height: 26px; border-radius: 50%; background: #1a1206; border: 2px solid var(--gold); color: #ffe7a8; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.uf-body { flex: 1; background: linear-gradient(180deg, rgba(20,24,36,0.92), rgba(8,10,16,0.92)); border: 1px solid rgba(232,196,106,0.5); border-left: none; border-radius: 0 8px 8px 0; padding: 6px 10px 7px 12px; margin-left: -10px; }
.uf-name { font-weight: 700; font-size: 14px; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uf-sub { font-size: 11px; color: var(--dim); margin-top: 2px; }
.bar { position: relative; height: 15px; margin-top: 4px; background: rgba(0,0,0,0.7); border: 1px solid rgba(0,0,0,0.9); border-radius: 3px; overflow: hidden; }
.bar .fill { height: 100%; width: 100%; transition: width 0.15s linear; }
.bar span { position: absolute; inset: 0; font-size: 11px; line-height: 14px; text-align: center; color: #fff; text-shadow: 0 1px 1px #000, 0 0 3px #000; font-weight: 700; }
.bar.hp .fill { background: linear-gradient(180deg, #7dff8a, var(--hp) 40%, var(--hp2)); }
.bar.en .fill { background: linear-gradient(180deg, #9fe8ff, #2f9ae0 45%, #1a5a9a); }
.bar.en.eacc .fill { background: linear-gradient(180deg, #ffd08a, #ff8a1f 45%, #9a4a0a); }
.bar.cast .fill { background: linear-gradient(180deg, #fff3a0, #e8b83a 50%, #9a6a0a); }
.bar.hp.hostile .fill { background: linear-gradient(180deg, #ff9a8a, #e03a2a 45%, #8a1a10); }
.bar.hp.neutral .fill { background: linear-gradient(180deg, #fff39a, #e8c43a 45%, #8a6a10); }
.bar.big { height: 22px; } .bar.big span { line-height: 21px; font-size: 13px; }
.combat-ico { position: absolute; left: 60px; top: -6px; font-size: 18px; color: #ff5a3a; text-shadow: 0 0 8px #f00; display: none; }
.combat-ico.on { display: block; }
.unitframe.target { left: 330px; }
.unitframe.target .uf-body { border-left: 1px solid rgba(232,196,106,0.5); border-right: none; border-radius: 8px 0 0 8px; margin-left: 0; margin-right: -10px; padding: 6px 14px 7px 10px; }
.unitframe.target .lvl { left: auto; right: -2px; }
.elite { position: absolute; inset: -3px; border-radius: 50%; border: 3px solid #ffd24a; box-shadow: 0 0 12px #ffb000, inset 0 0 10px #ffb000; }
.elite.boss { border-color: #ff4a2a; box-shadow: 0 0 16px #ff2a0a, inset 0 0 12px #ff2a0a; }
.aura-row { position: absolute; top: 98px; left: 90px; display: flex; gap: 4px; flex-wrap: wrap; width: 230px; }
.aura-row.target { left: 334px; }
.aura { position: relative; width: 28px; height: 28px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.4); overflow: hidden; }
.aura.harm { border-color: #ff3a2a; }
.aura img { width: 100%; height: 100%; }
.aura .t { position: absolute; bottom: -1px; left: 0; right: 0; text-align: center; font-size: 10px; font-weight: 700; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.aura .s { position: absolute; top: 0; right: 1px; font-size: 10px; font-weight: 800; color: #ffe07a; text-shadow: 0 0 2px #000; }

#bossBar { position: absolute; top: 128px; left: 50%; transform: translateX(-50%); width: 460px; text-align: center; }
.boss-name { font-family: var(--serif); color: #ff9a6a; font-size: 18px; text-shadow: 0 0 10px #f30, 0 2px 2px #000; letter-spacing: 2px; }

/* ---------- minimap ---------- */
#minimapWrap { position: absolute; top: 12px; right: 16px; width: 236px; height: 270px; }
#minimap { position: absolute; top: 28px; left: 8px; width: 220px; height: 220px; border-radius: 50%; }
.mm-ring { position: absolute; top: 22px; left: 2px; width: 232px; height: 232px; border-radius: 50%; border: 5px solid var(--gold2); box-shadow: 0 0 0 2px #000, inset 0 0 18px rgba(0,0,0,0.8), 0 6px 20px rgba(0,0,0,0.6); pointer-events: none; background: radial-gradient(circle, transparent 62%, rgba(0,0,0,0.35) 72%); }
#zoneName { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-family: var(--serif); font-size: 13px; color: #ffe7a8; text-shadow: 0 1px 2px #000; background: rgba(0,0,0,0.55); border-radius: 12px; padding: 3px 8px; border: 1px solid rgba(232,196,106,0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#clock { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font-size: 11px; background: rgba(0,0,0,0.65); padding: 2px 8px; border-radius: 8px; color: #dfe8f4; border: 1px solid rgba(255,255,255,0.15); }
.mm-btns { position: absolute; right: 0; bottom: 14px; display: flex; flex-direction: column; gap: 3px; }
.mm-btns button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--gold2); background: #1a1206; color: var(--gold); font-weight: 800; font-size: 12px; padding: 0; }

/* ---------- quest tracker ---------- */
#questTracker { position: absolute; top: 300px; right: 18px; width: 250px; text-shadow: 0 1px 2px #000, 0 0 4px #000; pointer-events: none; }
#questTracker .qt { margin-bottom: 10px; }
#questTracker .qn { color: #ffd24a; font-weight: 700; font-size: 13px; }
#questTracker .qo { font-size: 12px; color: #e6ebf2; margin-left: 8px; }
#questTracker .qo.done { color: #8dff9a; }

/* ---------- chat ---------- */
#chat { position: absolute; left: 16px; bottom: 120px; width: 420px; }
#chatLog { height: 190px; overflow-y: auto; font-size: 13px; line-height: 1.35; padding: 6px 8px; background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.4) 20%); border-radius: 6px; text-shadow: 0 1px 2px #000, 0 0 3px #000; scrollbar-width: thin; }
#chatLog .m { margin: 1px 0; word-wrap: break-word; }
#chatLog .world .who { color: #ffc28a; } #chatLog .say { color: #fff; } #chatLog .sys { color: #ffe070; } #chatLog .pvp { color: #ff7a6a; } #chatLog .boss { color: #ff9a3a; font-weight: 700; }
#chatLog .loot { color: #7dff9a; } #chatLog .xp { color: #c8a8ff; } #chatLog .err { color: #ff6a5a; } #chatLog .yell { color: #ff5a3a; font-weight: 700; }
#chatLog .who.eacc { color: var(--eacc); } #chatLog .who.ea { color: var(--ea); }
#chatInput { width: 100%; margin-top: 4px; padding: 7px 10px; border-radius: 5px; border: 1px solid rgba(232,196,106,0.35); background: rgba(0,0,0,0.6); color: #fff; font-size: 13px; outline: none; opacity: 0.55; }
#chatInput:focus { opacity: 1; border-color: var(--gold); }

/* ---------- action bar ---------- */
#bottomBar { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
#actionBar { display: flex; gap: 6px; padding: 8px 10px; background: linear-gradient(180deg, rgba(30,34,48,0.95), rgba(8,10,16,0.95)); border: 1px solid rgba(232,196,106,0.55); border-radius: 12px;
  box-shadow: 0 0 0 1px #000, 0 8px 30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08); position: relative; }
#actionBar::before, #actionBar::after { content: ''; position: absolute; top: 50%; width: 38px; height: 38px; transform: translateY(-50%) rotate(45deg); border: 2px solid var(--gold2); background: radial-gradient(circle, #6fe3ff 0%, #1a4a6a 45%, #0a0d16 70%); box-shadow: 0 0 14px rgba(111,227,255,0.5); }
#actionBar::before { left: -30px; } #actionBar::after { right: -30px; }
.slot { position: relative; width: 58px; height: 58px; border-radius: 8px; border: 2px solid #5a4a2a; overflow: hidden; background: #000; cursor: pointer; }
.slot img { width: 100%; height: 100%; display: block; }
.slot .cd { position: absolute; inset: 0; background: conic-gradient(rgba(0,0,0,0.72) var(--p, 0%), transparent var(--p, 0%)); }
.slot .cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: #fff; text-shadow: 0 0 4px #000, 0 0 4px #000; }
.slot .key { position: absolute; top: 2px; right: 4px; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.slot .cnt { position: absolute; bottom: 2px; right: 4px; font-size: 12px; font-weight: 800; color: #fff; text-shadow: 0 0 3px #000; }
.slot.oor img { filter: sepia(1) saturate(4) hue-rotate(-40deg) brightness(0.7); }
.slot.noen img { filter: grayscale(0.2) brightness(0.45) sepia(0.6) hue-rotate(180deg); }
.slot.press { transform: scale(0.93); }
.slot.ready-flash { box-shadow: 0 0 14px #fff; }
.slot:hover { border-color: var(--gold); }
.menu-btns { position: absolute; right: -170px; bottom: 12px; display: flex; gap: 4px; }
.menu-btns button { width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--gold2); background: rgba(20,16,8,0.9); color: var(--gold); font-size: 15px; }
#xpBar { position: relative; width: 560px; height: 12px; margin-bottom: 6px; background: rgba(0,0,0,0.75); border: 1px solid #000; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px rgba(232,196,106,0.35); }
#xpBar .fill { height: 100%; width: 0; background: linear-gradient(180deg, #e0b0ff, #9a4aff 50%, #5a1a9a); transition: width 0.4s; }
#xpBar span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 12px; font-weight: 700; text-shadow: 0 0 2px #000, 0 0 2px #000; }
#gold { position: absolute; right: 18px; bottom: 14px; font-size: 13px; color: #ffe07a; text-shadow: 0 1px 2px #000; background: rgba(0,0,0,0.5); padding: 4px 10px; border-radius: 10px; border: 1px solid rgba(232,196,106,0.3); }

#castBar { position: absolute; bottom: 132px; left: 50%; transform: translateX(-50%); width: 300px; height: 22px; background: rgba(0,0,0,0.75); border: 1px solid var(--gold2); border-radius: 5px; overflow: hidden; box-shadow: 0 0 12px rgba(0,0,0,0.6); }
#castBar .fill { height: 100%; width: 0; background: linear-gradient(180deg, #fff3a0, #e8b83a 50%, #9a6a0a); }
#castBar.channel .fill { background: linear-gradient(180deg, #b0f0ff, #3aa8e8 50%, #0a4a8a); }
#castBar #castText { position: absolute; left: 10px; top: 0; line-height: 22px; font-size: 12px; font-weight: 700; text-shadow: 0 0 3px #000; }
#castBar #castTime { position: absolute; right: 10px; top: 0; line-height: 22px; font-size: 12px; text-shadow: 0 0 3px #000; }

/* ---------- centre texts ---------- */
#zoneText { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; opacity: 0; transition: opacity 1s; }
#zoneText.show { opacity: 1; }
.zt-main { font-family: var(--serif); font-size: 44px; color: #ffe7a8; text-shadow: 0 0 20px rgba(0,0,0,0.9), 0 3px 3px #000; letter-spacing: 2px; }
.zt-sub { font-size: 16px; color: #dfe6f0; text-shadow: 0 2px 3px #000; letter-spacing: 3px; text-transform: uppercase; }
#errorText { position: absolute; top: 24%; left: 50%; transform: translateX(-50%); color: #ff4a3a; font-size: 17px; font-weight: 700; text-shadow: 0 1px 2px #000, 0 0 6px #000; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
#errorText.show { opacity: 1; }
#bannerText { position: absolute; top: 30%; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.6s, transform 0.6s; font-family: var(--serif); }
#bannerText.show { opacity: 1; transform: translateX(-50%) scale(1.05); }
#bannerText .b1 { font-size: 54px; background: linear-gradient(180deg, #fff6d0, #ffd24a 50%, #b87a0a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(255,200,60,0.6)); font-weight: 800; }
#bannerText .b2 { font-size: 18px; color: #fff; text-shadow: 0 2px 4px #000; }
#fps { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); font-size: 11px; color: #8dff9a; text-shadow: 0 0 2px #000; pointer-events: none; }

/* ---------- nameplates & combat text ---------- */
.plate { position: absolute; left: 0; top: 0; transform-origin: 50% 100%; text-align: center; white-space: nowrap; will-change: transform; }
.plate .pn { font-size: 13px; font-weight: 700; text-shadow: 0 1px 2px #000, 0 0 3px #000, 0 0 5px #000; }
.plate .pt { font-size: 11px; color: #d8e0ea; text-shadow: 0 1px 2px #000; margin-top: -1px; }
.plate .ph { width: 92px; height: 7px; margin: 2px auto 0; background: rgba(0,0,0,0.8); border: 1px solid #000; border-radius: 3px; overflow: hidden; }
.plate .ph div { height: 100%; background: linear-gradient(180deg, #ff8a7a, #d02a1a); }
.plate.friendly .ph div { background: linear-gradient(180deg, #8dff9a, #2a9a3a); }
.plate.hostile .pn { color: #ff5a4a; } .plate.neutral .pn { color: #ffe04a; } .plate.friendly .pn { color: #8dff9a; } .plate.npc .pn { color: #8dff9a; }
.plate.eacc .pn { color: #ffb070; } .plate.ea .pn { color: #8fd0ff; }
.plate.enemyplayer .pn { color: #ff5a4a; }
.plate.targeted .pn { font-size: 15px; }
.plate .bubble { background: rgba(255,255,245,0.95); color: #111; font-size: 12px; padding: 5px 9px; border-radius: 10px; margin-bottom: 4px; max-width: 220px; white-space: normal; text-shadow: none; box-shadow: 0 3px 10px rgba(0,0,0,0.5); }
.plate .cb { width: 92px; height: 5px; margin: 2px auto 0; background: rgba(0,0,0,0.8); border-radius: 2px; overflow: hidden; }
.plate .cb div { height: 100%; background: #ffd24a; }
.fct { position: absolute; left: 0; top: 0; font-weight: 900; font-size: 22px; color: #fff; text-shadow: 0 2px 0 #000, 0 0 4px #000, 0 0 8px rgba(0,0,0,0.8); will-change: transform; white-space: nowrap; font-family: var(--font); }
.fct.crit { font-size: 34px; color: #ffe04a; }
.fct.heal { color: #6dff7a; }
.fct.taken { color: #ff4a3a; font-size: 20px; }
.fct.xp { color: #d8a8ff; font-size: 18px; }
.fct.miss { color: #cfd6e0; font-size: 18px; }
.fct.absorb { color: #9fe0ff; font-size: 16px; }

/* ---------- dialogs ---------- */
.parchment { background: linear-gradient(180deg, rgba(40,32,20,0.97), rgba(24,18,10,0.97)); border-color: var(--gold2); }
#dialog { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 460px; max-height: 76vh; overflow-y: auto; z-index: 30; padding: 18px 20px; }
#dialog h2 { margin: 0 0 4px; font-family: var(--serif); color: var(--gold); font-size: 22px; }
#dialog .npc-sub { color: var(--dim); font-size: 12px; margin-bottom: 12px; }
#dialog .gossip { font-family: var(--serif); font-style: italic; color: #efe4c8; line-height: 1.5; margin-bottom: 12px; }
#dialog .q { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; }
#dialog .q:hover { border-color: rgba(232,196,106,0.5); background: rgba(232,196,106,0.08); }
#dialog .q .mk { font-size: 20px; font-weight: 900; font-family: var(--serif); color: #ffd24a; text-shadow: 0 0 6px #b80; width: 16px; }
#dialog .q .mk.gray { color: #9a9a9a; text-shadow: none; }
#dialog .qtext { font-family: var(--serif); line-height: 1.55; color: #f3e8cc; font-size: 15px; }
#dialog .obj { margin: 10px 0; color: #ffe7a8; font-size: 14px; }
#dialog .rew { color: #c8a8ff; font-size: 14px; margin-bottom: 14px; }
#dialog .row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.close-x { position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--gold2); background: #1a1206; color: var(--gold); font-weight: 800; }
#questLog, #settings, #help { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 560px; max-height: 80vh; overflow-y: auto; z-index: 30; padding: 18px 22px; }
#questLog h2, #settings h2, #help h2 { font-family: var(--serif); color: var(--gold); margin: 0 0 12px; }
#questLog .ql { border-bottom: 1px solid rgba(255,255,255,0.08); padding: 10px 0; }
#questLog .ql b { color: #ffd24a; }
#questLog .ql p { margin: 4px 0; color: #d4dce8; font-size: 13px; line-height: 1.45; }
#questLog .ql .ab { float: right; font-size: 11px; padding: 3px 8px; }
#settings label { display: flex; align-items: center; justify-content: space-between; margin: 10px 0; font-size: 14px; }
#settings select, #settings input[type=range] { width: 220px; }
#settings select { background: #0a0d16; color: #fff; border: 1px solid var(--gold2); padding: 5px; border-radius: 4px; }
#help table { width: 100%; border-collapse: collapse; font-size: 13px; }
#help td { padding: 5px 6px; border-bottom: 1px solid rgba(255,255,255,0.06); }
#help td:first-child { color: var(--gold); font-weight: 700; width: 38%; }
#worldMap { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30; padding: 14px; }
#worldMapCanvas { width: min(720px, 80vh); height: min(720px, 80vh); border-radius: 8px; display: block; }
.wm-title { position: absolute; top: 20px; left: 0; right: 0; text-align: center; font-family: var(--serif); font-size: 28px; color: #ffe7a8; text-shadow: 0 2px 4px #000; letter-spacing: 6px; pointer-events: none; }
#death { position: fixed; inset: 0; z-index: 25; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse, rgba(40,0,0,0.25), rgba(0,0,0,0.65)); }
.d-title { font-family: var(--serif); font-size: 46px; color: #ff6a5a; text-shadow: 0 0 20px #800, 0 3px 3px #000; }
.d-sub { color: #ddd; margin: 8px 0 22px; font-style: italic; }
#tooltip { position: fixed; z-index: 60; max-width: 300px; padding: 10px 12px; font-size: 12px; line-height: 1.45; pointer-events: none; background: rgba(8,10,18,0.96); border: 1px solid rgba(232,196,106,0.6); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.6); }
#tooltip b { font-size: 14px; color: #fff; }
#tooltip .tt-meta { color: var(--dim); margin: 3px 0 6px; }
#tooltip .tt-desc { color: #ffd98a; }
#disconnect { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,0.75); display: flex; flex-direction: column; gap: 18px; align-items: center; justify-content: center; font-size: 22px; font-family: var(--serif); }

/* =====================================================================
   Touch / mobile layout
   ===================================================================== */
#rotateHint { position: fixed; top: 38%; left: 50%; transform: translateX(-50%); z-index: 26; pointer-events: none; background: rgba(8,10,18,0.92); border: 1px solid var(--gold2); color: #ffe7a8; padding: 10px 18px; border-radius: 20px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,0.6); }
.panel, #chatLog, #dialog, #questLog, #settings, #help { touch-action: pan-y; -webkit-overflow-scrolling: touch; }
body.touch { -webkit-touch-callout: none; }
body.touch input, body.touch textarea { -webkit-user-select: text; user-select: text; }

#touch { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
#tStick { position: fixed; width: 128px; height: 128px; margin: -64px 0 0 -64px; left: calc(96px + env(safe-area-inset-left)); top: calc(100% - 100px - env(safe-area-inset-bottom)); border-radius: 50%; border: 2px solid rgba(232,196,106,0.5); background: radial-gradient(circle, rgba(111,227,255,0.12), rgba(0,0,0,0.32) 72%); pointer-events: none; transition: opacity 0.15s; }
#tStick.idle { opacity: 0.5; }
#tStick.on { opacity: 1; }
#tKnob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6d0, #e8c46a 45%, #8a5a1a); box-shadow: 0 0 14px rgba(232,196,106,0.55), inset 0 -3px 6px rgba(0,0,0,0.4); }
.tbtn { position: absolute; pointer-events: auto; touch-action: none; width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--gold2); background: radial-gradient(circle at 40% 35%, rgba(60,48,24,0.95), rgba(12,9,4,0.95)); color: #ffe7a8; display: flex; align-items: center; justify-content: center; padding: 13px; box-shadow: 0 4px 14px rgba(0,0,0,0.6); }
.tbtn svg { width: 100%; height: 100%; display: block; }
.tbtn.small { position: static; width: 40px; height: 40px; padding: 10px; }
.tbtn.press, #tAbilities .slot.press { transform: scale(0.9); filter: brightness(1.35); }
#tTop { display: none; }
#tCluster { position: fixed; right: calc(12px + env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom)); width: 250px; height: 250px; pointer-events: none; transform-origin: 100% 100%; }
#tAbilities { position: absolute; inset: 0; pointer-events: none; }
#tAbilities .slot { position: absolute; pointer-events: auto; touch-action: none; width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--gold2); box-shadow: 0 4px 14px rgba(0,0,0,0.65); }
#tAbilities .slot img { border-radius: 50%; }
#tAbilities .slot .cd { border-radius: 50%; }
#tAbilities .slot .key { display: none; }
#tAbilities .slot:nth-child(1) { width: 84px; height: 84px; right: 8px; bottom: 8px; border-width: 3px; box-shadow: 0 0 18px rgba(232,196,106,0.35), 0 4px 14px rgba(0,0,0,0.65); }
#tAbilities .slot:nth-child(1) .cdt { font-size: 26px; }
#tAbilities .slot:nth-child(2) { right: 121px; bottom: 21px; }
#tAbilities .slot:nth-child(3) { right: 108px; bottom: 71px; }
#tAbilities .slot:nth-child(4) { right: 71px; bottom: 108px; }
#tAbilities .slot:nth-child(5) { right: 21px; bottom: 121px; }
#tAbilities .slot:nth-child(6) { width: 46px; height: 46px; right: 192px; bottom: 27px; }
#tJump { right: 23px; bottom: 188px; }
#tTarget { right: 140px; bottom: 140px; }
#tUse { right: 87px; bottom: 181px; }

body.touch #actionBar { display: none; }
body.touch #bottomBar { left: 0; right: 0; bottom: 0; transform: none; }
body.touch #xpBar { position: fixed; top: 0; left: 0; right: 0; width: auto; height: 5px; margin: 0; border-radius: 0; box-shadow: none; border: none; z-index: 11; }
body.touch #xpBar span { display: none; }
body.touch .menu-btns { position: fixed; top: calc(8px + env(safe-area-inset-top)); right: calc(160px + env(safe-area-inset-right)); left: auto; bottom: auto; transform: none; gap: 6px; }
body.touch .menu-btns button { width: 40px; height: 40px; font-size: 16px; border-radius: 50%; }
body.touch .unitframe { transform: scale(0.72); transform-origin: top left; top: calc(10px + env(safe-area-inset-top)); left: calc(8px + env(safe-area-inset-left)); }
body.touch .unitframe.target { left: calc(222px + env(safe-area-inset-left)); }
body.touch .aura-row { top: calc(66px + env(safe-area-inset-top)); left: calc(64px + env(safe-area-inset-left)); transform: scale(0.8); transform-origin: top left; }
body.touch .aura-row.target { left: calc(240px + env(safe-area-inset-left)); }
body.touch #minimapWrap { transform: scale(0.62); transform-origin: top right; top: calc(6px + env(safe-area-inset-top)); right: calc(6px + env(safe-area-inset-right)); }
body.touch #gold { top: calc(178px + env(safe-area-inset-top)); bottom: auto; right: calc(10px + env(safe-area-inset-right)); font-size: 11px; padding: 2px 8px; }
body.touch #questTracker { top: calc(206px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); width: 190px; max-height: 28vh; overflow: hidden; pointer-events: auto; }
body.touch #questTracker .qn { font-size: 12px; }
body.touch #questTracker .qo { font-size: 11px; }
body.touch #questTracker.collapsed .qo { display: none; }
body.touch #chat { left: calc(10px + env(safe-area-inset-left)); bottom: auto; top: calc(96px + env(safe-area-inset-top)); width: min(330px, 44vw); pointer-events: none; }
body.touch #chatLog { height: 84px; font-size: 11px; background: linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,0.32) 65%, rgba(0,0,0,0)); padding: 3px 6px; overflow: hidden; border-radius: 6px; display: flex; flex-direction: column; justify-content: flex-end; }
body.touch #chatInput { display: none; }
body.touch.chat-open #chat { pointer-events: auto; top: calc(56px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(560px, 92vw); z-index: 40; background: rgba(8,10,18,0.94); border: 1px solid var(--gold2); border-radius: 10px; padding: 8px; }
body.touch.chat-open #chatLog { display: block; height: min(34vh, 220px); font-size: 13px; overflow-y: auto; }
body.touch.chat-open #chatInput { display: block; opacity: 1; font-size: 16px; }
body.touch #castBar { bottom: 34%; width: 240px; height: 18px; }
body.touch #castBar #castText, body.touch #castBar #castTime { line-height: 18px; font-size: 11px; }
body.touch #bossBar { top: calc(54px + env(safe-area-inset-top)); width: min(420px, 56vw); }
body.touch .boss-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.touch .zt-main { font-size: 28px; }
body.touch .zt-sub { font-size: 11px; }
body.touch #zoneText { top: 22%; }
body.touch #bannerText .b1 { font-size: 34px; }
body.touch #bannerText .b2 { font-size: 13px; }
body.touch #errorText { top: 30%; font-size: 14px; }
body.touch .plate .pn { font-size: 11px; }
body.touch .plate .pt { font-size: 9px; }
body.touch .plate .ph { width: 70px; height: 6px; }
body.touch .fct { font-size: 17px; }
body.touch .fct.crit { font-size: 25px; }
body.touch .d-title { font-size: 30px; }
body.touch #dialog, body.touch #questLog, body.touch #settings, body.touch #help { width: min(540px, 94vw); max-height: 86vh; padding: 14px; }
body.touch #dialog .qtext { font-size: 14px; }
body.touch #dialog .q { padding: 11px 10px; }
body.touch #settings label { font-size: 13px; }
body.touch #settings select, body.touch #settings input[type=range] { width: 48%; }
body.touch .close-x { width: 36px; height: 36px; top: 6px; right: 6px; }
body.touch #worldMapCanvas { width: min(84vh, 92vw); height: min(84vh, 92vw); }
body.touch #tooltip { max-width: 250px; font-size: 12px; }

/* short landscape phones */
@media (max-height: 460px) {
  body.touch #tCluster { transform: scale(0.8); }
  body.touch #tStick { transform: scale(0.85); }
  body.touch .unitframe { transform: scale(0.6); }
  body.touch .unitframe.target { left: calc(188px + env(safe-area-inset-left)); }
  body.touch .aura-row { top: calc(54px + env(safe-area-inset-top)); left: calc(54px + env(safe-area-inset-left)); transform: scale(0.7); }
  body.touch .aura-row.target { display: none; }
  body.touch #minimapWrap { transform: scale(0.5); }
  body.touch #gold { top: calc(146px + env(safe-area-inset-top)); }
  body.touch #questTracker { top: calc(52px + env(safe-area-inset-top)); right: calc(132px + env(safe-area-inset-right)); width: 230px; max-height: min(110px, calc(100vh - 262px)); }
  body.touch #chat { top: calc(80px + env(safe-area-inset-top)); }
  body.touch #chatLog { height: 66px; }
  body.touch .menu-btns button, body.touch .tbtn.small { width: 36px; height: 36px; }
  body.touch .menu-btns { right: calc(132px + env(safe-area-inset-right)); }
  body.touch #bossBar { top: calc(92px + env(safe-area-inset-top)); width: min(380px, 48vw); }
  body.touch.boss-on #questTracker { display: none; }
  body.touch.boss-on #chat { top: calc(142px + env(safe-area-inset-top)); }
}
@media (max-height: 460px) and (max-width: 760px) {
  body.touch .menu-btns { display: grid; grid-template-columns: repeat(3, 36px); }
  body.touch #questTracker { top: calc(92px + env(safe-area-inset-top)); width: 200px; max-height: min(68px, calc(100vh - 302px)); }
}
@media (max-height: 380px) {
  body.touch #tCluster { transform: scale(0.72); }
  body.touch #tStick { transform: scale(0.78); }
}

/* portrait phones */
body.touch.portrait .unitframe.target { left: calc(8px + env(safe-area-inset-left)); top: calc(66px + env(safe-area-inset-top)); }
body.touch.portrait .aura-row { top: calc(122px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); }
body.touch.portrait .aura-row.target { display: none; }
body.touch.portrait #chat { top: calc(150px + env(safe-area-inset-top)); width: calc(56vw - 18px); }
body.touch.portrait #questTracker { top: calc(172px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); width: calc(44vw - 8px); max-height: 30vh; }
body.touch.portrait #tCluster { transform: scale(0.86); }
body.touch.portrait .menu-btns { top: auto; bottom: calc(262px + env(safe-area-inset-bottom)); right: calc(8px + env(safe-area-inset-right)); display: grid; grid-template-columns: repeat(2, 40px); }
body.touch.portrait #bossBar { width: 92vw; top: calc(172px + env(safe-area-inset-top)); }
body.touch.portrait.boss-on #questTracker { display: none; }
body.touch.portrait.boss-on #chat { top: calc(222px + env(safe-area-inset-top)); }
body.touch.portrait.chat-open #chat { top: calc(56px + env(safe-area-inset-top)); width: 92vw; }

/* character select on touch */
body.touch .sel-top { top: calc(6px + env(safe-area-inset-top)); }
body.touch .logo.small .l1 { font-size: 20px; letter-spacing: 4px; }
body.touch .logo.small .l2 { font-size: 10px; letter-spacing: 8px; }
body.touch .realm { font-size: 10px; margin-top: 3px; padding: 3px 10px; max-width: 90vw; text-align: center; }
body.touch .sel-left { left: calc(8px + env(safe-area-inset-left)); top: calc(64px + env(safe-area-inset-top)); width: 240px; padding: 2px 10px 10px; max-height: calc(100% - 150px); overflow-y: auto; }
body.touch .panel-title { margin: 8px 0 6px; font-size: 11px; }
body.touch .fac { padding: 6px 4px; }
body.touch .fac b { font-size: 17px; }
body.touch .fac small { font-size: 9px; }
body.touch .motto { display: none; }
body.touch .champ-list { grid-template-columns: repeat(4, 1fr); gap: 5px; }
body.touch .champ span { font-size: 8px; padding: 2px 1px; }
body.touch .sel-right { right: calc(8px + env(safe-area-inset-right)); top: calc(64px + env(safe-area-inset-top)); width: min(300px, 38vw); max-height: calc(100% - 150px); padding: 10px 12px; }
body.touch .champ-name { font-size: 20px; }
body.touch .champ-title { font-size: 12px; }
body.touch .champ-bio { font-size: 12px; margin-top: 6px; line-height: 1.4; }
body.touch .champ-abilities .ab { gap: 8px; margin-bottom: 6px; }
body.touch .champ-abilities img { width: 28px; height: 28px; }
body.touch .champ-abilities b { font-size: 12px; }
body.touch .champ-abilities p { font-size: 10px; }
body.touch .sel-bottom { bottom: calc(24px + env(safe-area-inset-bottom)); padding: 8px; gap: 6px; }
body.touch #heroName { width: 168px; font-size: 16px; padding: 8px 10px; }
body.touch .btn { padding: 9px 14px; font-size: 14px; }
body.touch .disclaimer { bottom: calc(5px + env(safe-area-inset-bottom)); font-size: 9px; }
@media (max-height: 460px) {
  body.touch .sel-top .logo { display: none; }
  body.touch .sel-left, body.touch .sel-right { top: calc(30px + env(safe-area-inset-top)); max-height: calc(100% - 104px); }
  body.touch .sel-bottom { bottom: calc(18px + env(safe-area-inset-bottom)); }
}
body.touch.portrait .sel-left { right: calc(8px + env(safe-area-inset-right)); width: auto; top: calc(62px + env(safe-area-inset-top)); max-height: none; }
body.touch.portrait .sel-right { left: calc(8px + env(safe-area-inset-left)); width: auto; top: auto; bottom: calc(94px + env(safe-area-inset-bottom)); max-height: 27vh; }
body.touch.portrait .champ-list { grid-template-columns: repeat(4, 1fr); }
body.touch .sel-bottom .btn { white-space: nowrap; }
body.touch.portrait .sel-bottom { left: calc(8px + env(safe-area-inset-left)); right: calc(8px + env(safe-area-inset-right)); transform: none; }
body.touch.portrait #heroName { flex: 1; width: auto; min-width: 0; }
body.touch.portrait .realm { max-width: 94vw; overflow: hidden; text-overflow: ellipsis; }
body.touch.portrait #minimapWrap { transform: scale(0.5); }
body.touch.portrait #gold { top: calc(146px + env(safe-area-inset-top)); }