/* Thousandvale client — one stylesheet for the title screen and the in-game HUD. */
:root {
  --ink: #f3ead8;
  --ink-dim: #c7b99b;
  --ink-faint: #8f8370;
  --gold: #d9b26a;
  --gold-hi: #f1d595;
  --panel: rgba(18, 15, 12, 0.78);
  --panel-solid: #16120e;
  --edge: rgba(217, 178, 106, 0.38);
  --edge-strong: rgba(217, 178, 106, 0.7);
  --hp: #c7372f;
  --hp-hi: #e65a45;
  --hp-lag: #f2c35a;
  --xp: #8a5cd6;
  --good: #7fe08a;
  --warn: #f2c35a;
  --bad: #ff6a55;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  --serif: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --sans: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d0b09; color: var(--ink); font-family: var(--sans); font-size: 15px; }
canvas#view { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; outline: none; touch-action: none; }
.layer { position: fixed; inset: 0; pointer-events: none; }
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- title screen */
.title { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(320px, 420px) 1fr; align-items: center; padding: 0 0 0 6vw; z-index: 10;
  background: linear-gradient(90deg, rgba(10, 8, 6, 0.92) 0%, rgba(10, 8, 6, 0.65) 32%, rgba(10, 8, 6, 0) 62%); transition: opacity 0.6s ease; }
.title.leaving { opacity: 0; pointer-events: none; }
.brand { grid-column: 1; align-self: end; margin-bottom: 18px; }
.brand h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(36px, 5vw, 56px); letter-spacing: 0.06em; margin: 0; color: var(--gold-hi);
  text-shadow: 0 2px 0 #4a3418, 0 0 28px rgba(241, 213, 149, 0.25); }
.brand p { margin: 4px 0 0; color: var(--ink-dim); font-style: italic; font-size: 17px; }
.card { grid-column: 1; align-self: start; background: var(--panel); border: 1px solid var(--edge); border-radius: 10px; padding: 20px 20px 16px; box-shadow: var(--shadow); backdrop-filter: blur(6px); }
.field { margin-bottom: 14px; }
.field > label, .field > .label { display: block; font-family: var(--serif); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.row { display: flex; gap: 8px; }
input#name, .chat-entry input, select { width: 100%; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--edge); border-radius: 6px; padding: 9px 11px; outline: none; }
input#name:focus, .chat-entry input:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(217, 178, 106, 0.2); }
select { margin-top: 8px; padding: 7px 9px; color: var(--ink-dim); }
select option { background: var(--panel-solid); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { pointer-events: auto; cursor: pointer; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--edge); background: rgba(0, 0, 0, 0.35); color: var(--ink-dim); transition: all 0.15s; }
.chip:hover { border-color: var(--gold); color: var(--ink); }
.chip[aria-checked='true'] { background: linear-gradient(180deg, #5b4220, #3b2a14); border-color: var(--gold-hi); color: var(--gold-hi); box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.25); }
.classes .chip { padding: 5px 10px; font-size: 14px; }
button.primary { width: 100%; cursor: pointer; padding: 12px; border-radius: 8px; border: 1px solid var(--gold-hi); font-family: var(--serif); font-weight: 600; letter-spacing: 0.1em; font-size: 16px;
  background: linear-gradient(180deg, #8c6427, #5d3f16); color: #fff6dd; text-shadow: 0 1px 0 #2a1c08; box-shadow: 0 2px 0 #2a1c08, inset 0 1px 0 rgba(255, 230, 170, 0.35); transition: filter 0.15s, transform 0.1s; }
button.primary:hover { filter: brightness(1.12); }
button.primary:active { transform: translateY(1px); }
button.primary:disabled { filter: grayscale(0.7) brightness(0.7); cursor: wait; }
button.ghost { cursor: pointer; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--edge); border-radius: 6px; padding: 0 12px; color: var(--ink-dim); }
button.ghost:hover { color: var(--gold-hi); border-color: var(--gold); }
button.icon { font-size: 20px; line-height: 1; }
.note { min-height: 1.2em; margin: 0 0 10px; color: var(--bad); font-size: 14px; }
.tiny { margin: 10px 0 0; color: var(--ink-faint); font-size: 12px; text-align: center; }
.loading { position: fixed; left: 50%; bottom: 8vh; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; color: var(--ink-dim); font-style: italic; transition: opacity 0.4s; }
.loading i { width: 16px; height: 16px; border: 2px solid var(--edge); border-top-color: var(--gold-hi); border-radius: 50%; animation: spin 0.9s linear infinite; }
.loading.done { opacity: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- unit frames */
.hud { z-index: 5; font-size: 14px; }
.unitframe { position: absolute; top: 14px; display: flex; gap: 8px; align-items: center; padding: 7px 12px 7px 7px; background: var(--panel); border: 1px solid var(--edge); border-radius: 40px 10px 10px 40px; box-shadow: var(--shadow); min-width: 248px; }
.unitframe.self { left: 14px; }
.unitframe.target { left: 290px; }
.uf-portrait { position: relative; width: 50px; height: 50px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--edge-strong);
  background: radial-gradient(circle at 35% 30%, #5d4a33, #1f1812 70%); font-family: var(--serif); font-size: 22px; color: var(--gold-hi); }
.target.hostile .uf-portrait { border-color: rgba(255, 90, 70, 0.75); background: radial-gradient(circle at 35% 30%, #6b2e25, #1f1210 70%); color: #ffb3a3; }
.uf-portrait em { position: absolute; bottom: -4px; right: -6px; font-style: normal; font-family: var(--sans); font-weight: 700; font-size: 12px; min-width: 22px; height: 20px; padding: 0 5px; line-height: 18px; text-align: center;
  border-radius: 10px; background: var(--panel-solid); border: 1px solid var(--edge-strong); color: var(--gold-hi); }
.uf-body { flex: 1; min-width: 0; }
.uf-name { font-family: var(--serif); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.target.hostile .uf-name { color: #ffb3a3; }
.uf-sub { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.bar { position: relative; height: 16px; border-radius: 4px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(0, 0, 0, 0.7); overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6); }
.bar i, .bar b { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
.bar.hp i { background: linear-gradient(180deg, var(--hp-hi), var(--hp) 60%, #8e231d); z-index: 2; transition: width 0.12s; }
.bar.hp b { background: var(--hp-lag); opacity: 0.85; z-index: 1; }
.bar span { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.bar.xp { height: 6px; margin-top: 4px; }
.bar.xp i { background: linear-gradient(90deg, #6a42b8, var(--xp)); transition: width 0.4s; }
.bar.xp span { display: none; }
.self .bar.xp:hover span { display: grid; }

/* ---------------------------------------------------------------- nameplates */
.plate { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: nowrap; will-change: transform; }
.plate-name { font-weight: 700; font-size: 14px; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, 0.8); color: #e8f0ff; }
.plate.hostile .plate-name { color: #ffb0a0; }
.plate.player .plate-name { color: #9fd0ff; }
.plate-lvl { display: inline-block; margin-right: 5px; font-size: 11px; padding: 0 4px; border-radius: 3px; background: rgba(0, 0, 0, 0.55); color: var(--gold-hi); }
.plate-bar { position: relative; width: 72px; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.65); border: 1px solid rgba(0, 0, 0, 0.8); overflow: hidden; opacity: 0; transition: opacity 0.2s; }
.plate-bar i, .plate-bar b { position: absolute; left: 0; top: 0; bottom: 0; }
.plate-bar i { background: linear-gradient(180deg, var(--hp-hi), var(--hp)); z-index: 2; }
.plate.friendly .plate-bar i { background: linear-gradient(180deg, #6fd86f, #2f9a3d); }
.plate-bar b { background: var(--hp-lag); z-index: 1; }
.plate.hurt .plate-bar, .plate.targeted .plate-bar, .plate.hovered .plate-bar { opacity: 1; }
.plate.targeted .plate-name { color: #fff; text-shadow: 0 0 8px rgba(255, 90, 70, 0.9), 0 1px 2px #000; }
.plate.dead .plate-bar { opacity: 0; }
.plate.dead .plate-name { color: #9a9a9a; }

/* ---------------------------------------------------------------- floating numbers */
.dmg { position: absolute; left: 0; top: 0; font-weight: 700; font-size: 22px; color: #fff; -webkit-text-stroke: 1px rgba(0, 0, 0, 0.6); text-shadow: 0 2px 3px rgba(0, 0, 0, 0.8); will-change: transform, opacity; font-family: var(--sans); }
.dmg.out { color: #ffffff; }
.dmg.crit { color: #ffd34d; font-size: 32px; }
.dmg.in { color: #ff6a55; font-size: 20px; }
.dmg.miss { color: #c9c9c9; font-size: 17px; font-style: italic; }
.dmg.xp { color: #c7a8ff; font-size: 16px; }
.dmg.other { color: #e9e2d0; font-size: 15px; opacity: 0.8; }

/* ---------------------------------------------------------------- banners, toasts, status */
.zone-banner { position: absolute; top: 16vh; left: 50%; transform: translateX(-50%); text-align: center; opacity: 0; transition: opacity 1.2s ease; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); }
.zone-banner.show { opacity: 1; }
.zone-banner small { display: block; font-family: var(--serif); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-dim); font-size: 13px; }
.zone-banner strong { display: block; font-family: var(--serif); font-size: clamp(30px, 4vw, 46px); color: var(--gold-hi); letter-spacing: 0.08em; font-weight: 600; }
.toasts { position: absolute; top: 26vh; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.toast { font-weight: 700; font-size: 17px; text-shadow: 0 1px 3px #000, 0 0 10px rgba(0, 0, 0, 0.7); animation: toast 2.2s ease forwards; }
.toast.warn { color: var(--warn); } .toast.bad { color: var(--bad); } .toast.good { color: var(--good); font-family: var(--serif); font-size: 20px; } .toast.info { color: var(--ink); }
@keyframes toast { 0% { opacity: 0; transform: translateY(6px); } 10% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }
.conn { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--panel); border: 1px solid var(--edge); border-radius: 20px; font-size: 13px; color: var(--ink-dim); }
.conn .dot { width: 9px; height: 9px; border-radius: 50%; background: #777; box-shadow: 0 0 6px currentColor; }
.conn.open .dot { background: var(--good); color: var(--good); }
.conn.offline .dot { background: #7fb5ff; color: #7fb5ff; }
.conn.reconnecting .dot, .conn.connecting .dot { background: var(--warn); color: var(--warn); animation: pulse 1s infinite; }
.conn.closed .dot { background: var(--bad); color: var(--bad); }
@keyframes pulse { 50% { opacity: 0.3; } }

/* ---------------------------------------------------------------- chat */
.chat { position: absolute; left: 14px; bottom: 14px; width: min(420px, 40vw); pointer-events: auto; }
.chat-log { max-height: 190px; overflow-y: auto; padding: 8px 10px; font-size: 14px; line-height: 1.35; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45) 30%); border-radius: 8px 8px 0 0;
  scrollbar-width: thin; scrollbar-color: rgba(217, 178, 106, 0.4) transparent; text-shadow: 0 1px 2px #000; }
.chat-log p { margin: 2px 0; }
.chat-log .say b { color: #9fd0ff; }
.chat-log .system { color: var(--gold); font-style: italic; }
.chat-log .combat { color: var(--ink-faint); }
.chat-log .bad { color: var(--bad); }
.chat-entry { display: flex; align-items: center; gap: 6px; opacity: 0.55; transition: opacity 0.2s; }
.chat-entry:focus-within, .chat-entry:hover { opacity: 1; }
.chat-ch { font-family: var(--serif); font-size: 12px; color: var(--gold); letter-spacing: 0.08em; }
.chat-entry input { padding: 6px 9px; font-size: 14px; }

/* ---------------------------------------------------------------- action bar */
.actionbar { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px; background: var(--panel); border: 1px solid var(--edge); border-radius: 10px; box-shadow: var(--shadow); pointer-events: auto; }
.slot { position: relative; width: 52px; height: 52px; border-radius: 7px; border: 1px solid var(--edge); background: radial-gradient(circle at 40% 35%, #3a2f22, #15110c 75%); cursor: pointer; display: grid; place-items: center; overflow: hidden; padding: 0; }
.slot svg { width: 30px; height: 30px; color: var(--gold-hi); filter: drop-shadow(0 1px 1px #000); }
.slot.empty { cursor: default; opacity: 0.45; }
.slot .key { position: absolute; top: 2px; left: 4px; font-size: 11px; font-weight: 700; color: var(--ink-dim); text-shadow: 0 1px 1px #000; }
.slot .cd { position: absolute; inset: 0; background: conic-gradient(rgba(0, 0, 0, 0.72) var(--p, 0%), transparent 0); pointer-events: none; }
.slot.pressed { transform: scale(0.94); border-color: var(--gold-hi); }
.slot.unusable svg { color: #8a6a6a; }
.slot:not(.empty):hover { border-color: var(--gold); }

/* ---------------------------------------------------------------- help + death */
.help { position: absolute; right: 14px; bottom: 14px; pointer-events: auto; text-align: right; }
.help-toggle { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--edge); background: var(--panel); color: var(--gold-hi); cursor: pointer; font-family: var(--serif); }
.help dl { display: grid; grid-template-columns: auto auto; gap: 3px 12px; margin: 0 0 8px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--edge); border-radius: 8px; font-size: 13px; text-align: left; }
.help dt { color: var(--gold-hi); font-weight: 700; }
.help dd { margin: 0; color: var(--ink-dim); }
.help.collapsed dl { display: none; }
.death { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: radial-gradient(ellipse at center, rgba(40, 0, 0, 0.25), rgba(0, 0, 0, 0.65)); }
.death h2 { font-family: var(--serif); font-size: 44px; color: #ffb3a3; margin: 0; letter-spacing: 0.08em; text-shadow: 0 2px 16px #000; }
.death p { color: var(--ink-dim); font-size: 17px; }
.death .rise { pointer-events: auto; width: auto; padding: 12px 28px; margin-top: 8px; justify-self: center; }
.death .rise small { font-family: var(--sans); opacity: 0.7; letter-spacing: 0; }
.dmg.heal { color: #7fe08a; font-size: 20px; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 760px) {
  .title { grid-template-columns: 1fr; padding: 16px; background: rgba(10, 8, 6, 0.75); align-content: center; }
  .brand { align-self: auto; }
  .unitframe { min-width: 220px; transform: scale(0.82); transform-origin: top left; }
  .conn { max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .unitframe.target { left: 14px; top: 78px; }
  .chat { width: calc(100vw - 28px); bottom: 84px; }
  .chat-log { max-height: 110px; }
  .help { display: none; }
  .slot { width: 46px; height: 46px; }
}

/* loot lines and toasts, coloured by rarity */
.chat-log .loot { color: #e9d9a6; }
.chat-log .rarity-magic, .toast.rarity-magic { color: #6fa8ff; }
.chat-log .rarity-rare, .toast.rarity-rare { color: #ffd54d; }
.chat-log .rarity-legendary, .toast.rarity-legendary, .chat-log .rarity-unique, .toast.rarity-unique { color: #ff9a3d; }
.chat-log .rarity-set, .toast.rarity-set { color: #63e07a; }
.toast.loot { font-family: var(--serif); font-size: 18px; }

/* speech bubbles over heads (say chat) */
.plate-bubble { display: none; max-width: 240px; white-space: normal; text-align: center; margin-bottom: 4px; padding: 6px 10px; border-radius: 10px;
  background: rgba(250, 244, 228, 0.94); color: #2a2016; font-size: 14px; line-height: 1.25; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); position: relative; }
.plate-bubble::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: rgba(250, 244, 228, 0.94); }
.plate.self .plate-name, .plate.self .plate-bar { display: none; }

/* ---------------------------------------------------------------- party frames + tools */
.partyframes { position: absolute; top: 84px; left: 14px; display: flex; flex-direction: column; gap: 5px; pointer-events: auto; }
.pmember { display: flex; align-items: center; gap: 7px; width: 214px; padding: 5px 8px; background: var(--panel); border: 1px solid var(--edge); border-radius: 8px; cursor: pointer; }
.pmember:hover { border-color: var(--gold); }
.pmember .pm-icon { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 13px; color: var(--gold-hi); background: radial-gradient(circle at 35% 30%, #5d4a33, #1f1812 70%); border: 1px solid var(--edge-strong); }
.pmember .pm-body { flex: 1; min-width: 0; }
.pmember .pm-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmember .pm-name small { color: var(--ink-faint); font-weight: 400; margin-left: 4px; }
.pmember .bar { height: 9px; margin-top: 2px; }
.pmember .bar.hp i { background: linear-gradient(180deg, #74d872, #2f9a3d); }
.pmember .pm-where { font-size: 11px; color: var(--ink-faint); }
.pmember.leader .pm-icon::after { content: '♛'; position: absolute; margin: -22px 0 0 18px; font-size: 11px; color: var(--gold-hi); }
.pmember.offline { opacity: 0.45; }
.pmember.dead .bar.hp i { background: #555; }
.pmember.away .pm-where::before { content: '◇ '; }
.party-tools { position: absolute; top: 18px; right: 230px; display: flex; gap: 6px; pointer-events: auto; }
.pill-btn { cursor: pointer; padding: 5px 12px; border-radius: 16px; border: 1px solid var(--edge); background: var(--panel); color: var(--ink-dim); font-size: 13px; }
.pill-btn:hover { color: var(--gold-hi); border-color: var(--gold); }
.pill-btn b { color: var(--gold-hi); font-weight: 700; }
.party-menu, .invite-pop { position: absolute; top: 56px; right: 230px; width: 320px; padding: 14px; background: var(--panel); border: 1px solid var(--edge-strong); border-radius: 10px; box-shadow: var(--shadow); pointer-events: auto; backdrop-filter: blur(6px); }
.party-menu h3 { margin: 0 0 6px; font-family: var(--serif); color: var(--gold-hi); font-size: 16px; letter-spacing: 0.06em; }
.party-menu .row { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.party-menu input { flex: 1; min-width: 0; background: rgba(0,0,0,0.45); border: 1px solid var(--edge); border-radius: 6px; padding: 6px 8px; color: var(--ink); outline: none; }
.party-menu .ghost { padding: 6px 10px; }
.party-help { margin: 0; font-size: 13px; color: var(--ink-dim); }
.grow { flex: 1; }
.invite-pop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; top: 120px; right: 50%; transform: translateX(50%); width: auto; }
.invite-pop .primary { width: auto; padding: 7px 16px; font-size: 14px; }
.invite-pop .ghost { padding: 7px 12px; }

/* ---------------------------------------------------------------- boss frame */
.boss { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: min(600px, 50vw); text-align: center; transition: opacity 1s; }
.boss.leaving { opacity: 0; }
.boss-head { display: flex; align-items: baseline; justify-content: center; gap: 10px; text-shadow: 0 2px 6px #000; }
.boss-head strong { font-family: var(--serif); font-size: 21px; color: #ffcfb8; letter-spacing: 0.06em; }
.boss-head em { font-style: italic; color: var(--ink-dim); font-size: 14px; }
.boss-enrage { margin-left: auto; position: absolute; right: 0; top: 4px; font-size: 13px; font-weight: 700; color: var(--ink-dim); padding: 1px 8px; border-radius: 10px; background: rgba(0,0,0,0.5); border: 1px solid var(--edge); }
.boss-enrage.soon { color: #ffb36a; border-color: #ff8a3a; animation: pulse 0.8s infinite; }
.boss.enraged .boss-enrage { color: #fff; background: #a3160f; border-color: #ff5a3a; animation: pulse 0.5s infinite; }
.boss-bar { position: relative; height: 22px; margin-top: 4px; border-radius: 5px; background: rgba(0,0,0,0.7); border: 2px solid rgba(217,178,106,0.75); box-shadow: 0 0 0 1px #000, 0 4px 16px rgba(0,0,0,0.6), inset 0 2px 6px rgba(0,0,0,0.8); overflow: hidden; }
.boss-bar i, .boss-bar b { position: absolute; left: 0; top: 0; bottom: 0; }
.boss-bar i { z-index: 2; background: linear-gradient(180deg, #ff6a4a, #c22a1c 55%, #7c1610); box-shadow: inset 0 1px 0 rgba(255,200,180,0.5); }
.boss-bar b { z-index: 1; background: #f2c35a; }
.boss.enraged .boss-bar { border-color: #ff3a2a; box-shadow: 0 0 18px rgba(255,40,20,0.8), inset 0 2px 6px rgba(0,0,0,0.8); animation: enragebar 0.9s infinite alternate; }
@keyframes enragebar { to { box-shadow: 0 0 34px rgba(255,40,20,1), inset 0 2px 6px rgba(0,0,0,0.8); } }
.boss.newbar .boss-bar i { animation: newbar 0.9s ease-out; }
@keyframes newbar { from { width: 0 !important; filter: brightness(2.2); } 60% { filter: brightness(1.6); } }
.boss-ticks { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.boss-ticks i { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: #ffe7b0; box-shadow: 0 0 4px #000; }
.boss-pct { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; font-weight: 700; font-size: 13px; text-shadow: 0 1px 2px #000; }
.boss-sub { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 18px; margin-top: 3px; }
.boss-bars { display: flex; gap: 4px; }
.boss-bars b { width: 14px; height: 6px; border-radius: 2px; background: rgba(255,255,255,0.15); border: 1px solid rgba(0,0,0,0.6); }
.boss-bars b.done { background: #5a1f18; } .boss-bars b.now { background: #ff5a3a; box-shadow: 0 0 6px #ff5a3a; }
.boss-phase { font-family: var(--serif); font-size: 13px; color: var(--gold-hi); letter-spacing: 0.06em; text-shadow: 0 1px 3px #000; }
.boss-phase.flash { animation: phaseflash 1.4s ease-out; }
@keyframes phaseflash { 0% { color: #fff; transform: scale(1.35); text-shadow: 0 0 12px #ffcf7a; } 100% { transform: none; } }
.boss-cast { position: relative; width: 70%; margin: 6px auto 0; height: 18px; border-radius: 4px; background: rgba(0,0,0,0.7); border: 1px solid #8a8f99; overflow: hidden; }
.boss-cast.int { border-color: var(--gold-hi); box-shadow: 0 0 8px rgba(241,213,149,0.5); }
.boss-cast i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #b9c2d6, #6c7891); }
.boss-cast.int i { background: linear-gradient(180deg, #ffe08a, #c99a3a); }
.boss-cast.cut i { background: #a3160f; }
.boss-cast span { position: absolute; left: 8px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.boss-cast em { position: absolute; right: 8px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 12px; font-style: normal; text-shadow: 0 1px 2px #000; }
.plate-cast { position: relative; width: 84px; height: 7px; margin-top: 2px; border-radius: 3px; background: rgba(0,0,0,0.7); border: 1px solid #8a8f99; overflow: visible; }
.plate-cast.int { border-color: var(--gold-hi); }
.plate-cast i { position: absolute; left: 0; top: 0; bottom: 0; background: #b9c2d6; }
.plate-cast.int i { background: #ffd56a; }
.plate-cast.cut i { background: #a3160f; width: 100% !important; }
.plate-cast span { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font-size: 11px; white-space: nowrap; color: #ffe7b0; text-shadow: 0 1px 2px #000; }

/* ---------------------------------------------------------------- call-outs, vignette, prompt */
.callout { position: absolute; top: 19vh; left: 50%; transform: translateX(-50%) scale(0.9); max-width: 80vw; text-align: center; opacity: 0; transition: opacity 0.35s, transform 0.35s;
  font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: 0.03em; color: #ffd9c7; text-shadow: 0 2px 4px #000, 0 0 18px rgba(255,80,40,0.55); }
.callout.show { opacity: 1; transform: translateX(-50%) scale(1); }
.callout.warn { color: #ffb36a; } .callout.cast { color: #ffc38a; } .callout.emote { color: #f3ead8; font-style: italic; font-weight: 500; text-shadow: 0 2px 6px #000; }
.callout.phase { color: var(--gold-hi); text-shadow: 0 2px 4px #000, 0 0 18px rgba(241,213,149,0.5); }
.callout.enrage { color: #ff6a55; font-size: clamp(28px, 3.4vw, 44px); text-transform: uppercase; animation: shake 0.4s; }
.callout.victory { color: var(--gold-hi); font-size: clamp(28px, 3.4vw, 44px); }
@keyframes shake { 25% { margin-left: -6px; } 50% { margin-left: 6px; } 75% { margin-left: -3px; } }
.chat-log .yell { color: #ffb08f; font-weight: 700; } .chat-log .emote { color: #e9e2d0; font-style: italic; }
.chat-log .party b, .chat-log .party { color: #8fc7ff; }
.vignette { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.25s; box-shadow: inset 0 0 120px 30px rgba(255,30,20,0.55); }
.vignette.danger { opacity: 0.65; animation: pulse 0.6s infinite; box-shadow: inset 0 0 90px 10px rgba(255,30,20,0.5); }
.vignette.hit { opacity: 1; transition: none; box-shadow: inset 0 0 160px 50px rgba(255,20,10,0.75); }
.interact { position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 7px 14px; background: var(--panel); border: 1px solid var(--edge-strong); border-radius: 20px; font-weight: 700; color: var(--gold-hi); text-shadow: 0 1px 2px #000; animation: rise 0.25s ease-out; }
.interact kbd { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 5px; background: #2a2016; border: 1px solid var(--gold); color: #fff; font-family: var(--sans); }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 6px); } }

/* ---------------------------------------------------------------- bag + item card */
.bag { position: absolute; right: 14px; top: 64px; width: 360px; max-height: calc(100vh - 170px); overflow-y: auto; padding: 12px; background: var(--panel); border: 1px solid var(--edge-strong); border-radius: 10px; box-shadow: var(--shadow); pointer-events: auto; backdrop-filter: blur(6px); }
.bag header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bag h3 { margin: 0; font-family: var(--serif); color: var(--gold-hi); font-size: 17px; letter-spacing: 0.06em; }
.bag .gold { margin-left: auto; color: #ffd56a; font-weight: 700; font-size: 14px; }
.bag header .ghost { padding: 0 9px; font-size: 18px; }
.paperdoll { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-bottom: 10px; }
.bag-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.islot { position: relative; aspect-ratio: 1; border-radius: 6px; border: 1px solid rgba(255,255,255,0.12); background: radial-gradient(circle at 40% 35%, #2e261c, #120e0a 80%); display: grid; place-items: center; cursor: pointer; font-size: 10px; color: var(--ink-faint); text-align: center; line-height: 1.1; padding: 2px; overflow: hidden; }
.islot .glyph { font-family: var(--serif); font-size: 18px; }
.islot.empty { cursor: default; }
.islot:not(.empty):hover { filter: brightness(1.3); }
.islot.r-common { border-color: #8a8a8a; color: #ddd; } .islot.r-magic { border-color: #4f86ff; color: #8fb4ff; box-shadow: inset 0 0 8px rgba(80,130,255,0.35); }
.islot.r-rare { border-color: #e6c23a; color: #ffe17a; box-shadow: inset 0 0 8px rgba(255,210,60,0.35); }
.islot.r-legendary, .islot.r-unique { border-color: #ff8a2a; color: #ffb36a; box-shadow: inset 0 0 10px rgba(255,140,40,0.45); }
.islot.r-set { border-color: #4fd06a; color: #8ff0a0; }
.islot.junk { opacity: 0.6; }
.islot .slotname { position: absolute; bottom: 1px; left: 0; right: 0; font-size: 9px; color: var(--ink-faint); }
.islot.fresh { animation: fresh 1.6s ease-out; }
@keyframes fresh { 0% { box-shadow: 0 0 0 2px #fff, 0 0 18px #ffe08a; } }
.bag-hint { margin: 8px 0 0; font-size: 12px; color: var(--ink-faint); }
.itemcard { position: fixed; z-index: 20; max-width: 260px; padding: 9px 12px; background: rgba(12,10,8,0.96); border: 1px solid var(--edge-strong); border-radius: 8px; box-shadow: var(--shadow); pointer-events: none; font-size: 13px; }
.itemcard h4 { margin: 0 0 2px; font-family: var(--serif); font-size: 15px; }
.itemcard .meta { color: var(--ink-faint); font-size: 12px; margin-bottom: 4px; }
.itemcard .line { color: #9fd0ff; } .itemcard .value { color: #ffd56a; margin-top: 4px; }
.itemcard .r-magic { color: #8fb4ff; } .itemcard .r-rare { color: #ffe17a; } .itemcard .r-legendary, .itemcard .r-unique { color: #ffb36a; } .itemcard .r-set { color: #8ff0a0; } .itemcard .r-common { color: #eee; }
@media (max-width: 760px) {
  .partyframes { top: 140px; transform: scale(0.85); transform-origin: top left; }
  .party-tools { right: 14px; top: 52px; }
  .party-menu { right: 14px; left: 14px; width: auto; top: 90px; }
  .boss { width: calc(100vw - 28px); top: 150px; }
  .bag { left: 14px; right: 14px; width: auto; }
}

/* elite / boss nameplates */
.plate.rank-elite .plate-name, .plate.rank-champion .plate-name { color: #ffd56a; }
.plate.rank-elite .plate-bar, .plate.rank-champion .plate-bar { width: 96px; border-color: #c99a3a; }
.plate.rank-rare .plate-name { color: #ffd040; font-size: 14px; } .plate.rank-rare .plate-bar { width: 120px; height: 9px; border-color: #ffd040; box-shadow: 0 0 6px rgba(255,208,64,0.6); }
.plate.rank-rare .plate-lvl::after { content: "\2605"; margin-left: 2px; }
.plate.rank-boss .plate-name { color: #ff9a7a; font-family: var(--serif); font-size: 16px; }
.plate.rank-boss .plate-bar { display: none; }
.plate.rank-elite .plate-lvl::after, .plate.rank-champion .plate-lvl::after { content: '+'; }
.plate.rank-boss .plate-lvl { background: #6b1d14; }
.chat-ch.party { color: #8fc7ff; }