:root {
  --gold: #e8c77a;
  --gold2: #b8924a;
  --hider: #4dd8ff;
  --seeker: #ff4d5a;
  --panel: rgba(9, 13, 24, 0.86);
  --line: rgba(232, 199, 122, 0.35);
  --text: #e9e6dc;
  --dim: #8c93a3;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #05070d; color: var(--text); font-family: Inter, system-ui, sans-serif; user-select: none; }
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
.dim { color: var(--dim); }
b.hider, .hider b { color: var(--hider); }
b.seeker { color: var(--seeker); }

/* ---------- buttons & inputs ---------- */
/* gold buttons are struck metal: bright top edge, darker lip at the bottom, a sheen that sweeps across on hover */
.btn {
  position: relative; isolation: isolate;
  font: 700 14px Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
  color: #2a1a04; text-shadow: 0 1px 0 rgba(255, 244, 208, 0.45);
  background: linear-gradient(180deg, #fdeab0 0%, #eccb80 36%, #c89a4c 72%, #a87a34 100%);
  border: 1px solid #5e4418; padding: 10px 18px; border-radius: 3px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 250, 228, 0.85), inset 0 -2px 0 rgba(96, 62, 14, 0.5), inset 0 0 0 1px rgba(255, 236, 180, 0.22),
    0 0 0 1px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 18px rgba(232, 199, 122, 0.14);
  transition: filter 0.15s, transform 0.05s, box-shadow 0.2s, color 0.15s, border-color 0.15s;
}
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat;
  opacity: 0; transition: opacity 0.2s;
}
.btn:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 250, 228, 0.9), inset 0 -2px 0 rgba(96, 62, 14, 0.5), inset 0 0 0 1px rgba(255, 236, 180, 0.3),
  0 0 0 1px rgba(0, 0, 0, 0.55), 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 26px rgba(232, 199, 122, 0.32); }
.btn:hover::after { opacity: 1; animation: btn-sheen 0.7s ease-out; }
@keyframes btn-sheen { from { background-position: 160% 0; } to { background-position: -60% 0; } }
.btn:active { transform: translateY(1px); filter: brightness(0.96); }
.btn:disabled { filter: grayscale(1) brightness(0.55); cursor: default; }
.btn:disabled::after { display: none; }
.btn.big { font: 800 18px Cinzel, serif; letter-spacing: 0.14em; padding: 14px 28px; }
.btn.small { padding: 6px 12px; font-size: 12px; margin-top: 10px; }
.btn.tiny { padding: 2px 9px; font-size: 14px; }
/* ghost: dark enamel with a gold hairline, lights up on hover */
.btn.ghost {
  color: var(--gold); text-shadow: 0 1px 2px #000; border-color: rgba(232, 199, 122, 0.42);
  background: linear-gradient(180deg, rgba(40, 34, 22, 0.75), rgba(10, 11, 16, 0.85));
  box-shadow: inset 0 1px 0 rgba(255, 241, 196, 0.1), inset 0 0 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.btn.ghost::after { background-image: linear-gradient(105deg, transparent 38%, rgba(255, 230, 160, 0.16) 50%, transparent 62%); }
.btn.ghost:hover { filter: none; color: #fff1c9; border-color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 241, 196, 0.16), inset 0 0 14px rgba(232, 199, 122, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 16px rgba(232, 199, 122, 0.22); }
input, select {
  font: 500 15px Inter, sans-serif; color: var(--text); outline: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(12, 14, 22, 0.55));
  border: 1px solid rgba(232, 199, 122, 0.26); border-radius: 3px; padding: 10px 12px;
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 241, 196, 0.05); transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder { color: #5d6374; }
input:hover, select:hover { border-color: rgba(232, 199, 122, 0.45); }
input:focus, select:focus { border-color: var(--gold); box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(232, 199, 122, 0.2), 0 0 16px rgba(232, 199, 122, 0.16); }
select { appearance: none; padding-right: 32px; cursor: pointer; text-transform: capitalize;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23e8c77a' stroke-width='1.6'/%3E%3C/svg%3E") right 12px center no-repeat,
    linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(12, 14, 22, 0.55)); }
select option { background: #0c0f18; color: var(--text); }
/* range: an engraved groove, filled in gold up to the thumb (--p, set by ui/options.js), and a crystal thumb */
input[type=range] { appearance: none; -webkit-appearance: none; height: 18px; padding: 0; border: none; box-shadow: none; background: none; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; border: 1px solid rgba(232, 199, 122, 0.3);
  background: linear-gradient(90deg, #8a6a32, #e8c77a) 0 0 / var(--p, 50%) 100% no-repeat, rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; transform: rotate(45deg); border-radius: 2px;
  background: linear-gradient(135deg, #f2feff, #6fe0fb 45%, #16506b); border: 2px solid #e8c77a;
  box-shadow: 0 0 0 1px #000, 0 0 10px rgba(111, 224, 251, 0.5); transition: box-shadow 0.15s;
}
input[type=range]:hover::-webkit-slider-thumb, input[type=range]:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #000, 0 0 16px rgba(111, 224, 251, 0.85); }
input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; padding: 0; margin: 0; flex: none; cursor: pointer; border-radius: 3px; }
input[type=checkbox]:checked {
  border-color: var(--gold); box-shadow: inset 0 1px 0 rgba(255, 250, 228, 0.7), 0 0 10px rgba(232, 199, 122, 0.3);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%232a1a04' stroke-width='2.2'/%3E%3C/svg%3E") center no-repeat,
    linear-gradient(180deg, #fdeab0, #c89a4c);
}

/* scrollbars: a thin gold bar on a faint rail, no arrows */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: linear-gradient(90deg, transparent 4px, rgba(232, 199, 122, 0.1) 4px, rgba(232, 199, 122, 0.1) 6px, transparent 6px); }
::-webkit-scrollbar-track:horizontal { background: linear-gradient(transparent 4px, rgba(232, 199, 122, 0.1) 4px, rgba(232, 199, 122, 0.1) 6px, transparent 6px); }
::-webkit-scrollbar-thumb { border: 3px solid transparent; background-clip: padding-box; border-radius: 6px; background-color: rgba(232, 199, 122, 0.45); min-height: 30px; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(242, 214, 140, 0.8); }
::-webkit-scrollbar-button, ::-webkit-scrollbar-corner { display: none; background: transparent; }
/* standard scrollbar-color would switch the ones above off (Chromium), so panels that set it get it cleared here */
html .sh-list { scrollbar-color: auto; scrollbar-width: auto; }

/* ornamental divider (under the logo and panel titles) */
.orn-rule { height: 14px; background: url('assets/ui/frame/rule.svg') center / auto 14px no-repeat; }

/* ---------- loading ---------- */
#loading { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(circle at 50% 40%, #16213a, #05070d); }
.load-title { font: 800 54px Cinzel, serif; letter-spacing: 0.12em; }
.load-title, .logo, .ls-map { color: #f1d488; background: linear-gradient(180deg, #fff6d6 0%, #f3d58b 38%, #b98a3e 60%, #f0d898 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.7)) drop-shadow(0 0 20px rgba(232, 199, 122, 0.3)); }
.load-bar { width: 320px; height: 8px; padding: 1px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(232, 199, 122, 0.4); border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px #000; }
#load-fill { height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--gold2), #fff1c4); box-shadow: 0 0 10px rgba(232, 199, 122, 0.6); transition: width 0.2s; }
#load-text { color: var(--dim); letter-spacing: 0.08em; }

/* ---------- screens ---------- */
#screen { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#screen.menu, #screen.lobby, #screen.select { pointer-events: auto; display: flex; align-items: center; justify-content: center; }
.menu-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(5, 8, 16, 0.2), rgba(3, 5, 10, 0.88) 80%); }
.menu-card, .lobby-card { position: relative; padding: 30px 40px 24px; backdrop-filter: blur(8px); }
.menu-card { width: 460px; max-height: calc(100vh - 36px); display: flex; flex-direction: column; gap: 8px; }
.menu-links .btn.small { margin-top: 0; }
/* main menu: two-line logo lockup, gold CRYSTAL over crystal-blue HUNT */
.logo { font: 800 46px/1 Cinzel, serif; letter-spacing: 0.1em; text-align: center; padding-top: 6px; }
.logo span { display: block; margin-top: 2px; font-size: 40px; letter-spacing: 0.34em; padding-left: 0.34em;
  background-image: linear-gradient(180deg, #f2feff 0%, #8ef0ff 42%, #2a9cc2 64%, #bff7ff 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.7)) drop-shadow(0 0 18px rgba(111, 224, 251, 0.45)); }
.menu-card .orn-rule { margin: 4px 0 0; }
.tag { text-align: center; color: #a9adb9; font-size: 13.5px; font-style: italic; margin: 0 10px 8px; line-height: 1.45; }
.menu-card label { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #a69a7f; margin-top: 4px; }
.menu-card label::before, .settings label::before { content: ''; width: 5px; height: 5px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 6px rgba(232, 199, 122, 0.7); }
.menu-card .row { display: flex; gap: 8px; }
.menu-card .row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.3em; text-align: center; font-weight: 800; }
#m-create { margin-top: 4px; }
.or { display: flex; align-items: center; gap: 12px; color: #7d8292; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; margin: 6px 0 2px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(232, 199, 122, 0.4)); }
.or::after { transform: scaleX(-1); }
.err { color: var(--seeker); min-height: 18px; text-align: center; }

/* ---------- lobby ---------- */
.lobby-card { width: min(960px, 94vw); max-height: 94vh; display: flex; flex-direction: column; gap: 18px; padding: 34px 40px 28px; }
.lk { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #a69a7f; }
.lobby-head { display: flex; gap: 26px; align-items: stretch; }
/* the room code sits on a plaque; clicking it copies the invite */
.lobby-code { position: relative; flex: none; min-width: 210px; padding: 10px 22px 8px; text-align: center; cursor: pointer; border: 1px solid rgba(232, 199, 122, 0.45); border-radius: 3px;
  background: radial-gradient(90% 120% at 50% 0%, rgba(232, 199, 122, 0.16), transparent 70%), linear-gradient(180deg, rgba(30, 26, 18, 0.9), rgba(8, 9, 14, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 241, 196, 0.12), inset 0 0 0 4px rgba(0, 0, 0, 0.35), inset 0 0 0 5px rgba(232, 199, 122, 0.14), 0 0 0 1px #000; transition: box-shadow 0.2s; }
.lobby-code:hover { box-shadow: inset 0 1px 0 rgba(255, 241, 196, 0.12), inset 0 0 0 4px rgba(0, 0, 0, 0.35), inset 0 0 0 5px rgba(232, 199, 122, 0.3), 0 0 0 1px #000, 0 0 22px rgba(232, 199, 122, 0.2); }
.lobby-code .code { font: 800 44px/1.1 Cinzel, serif; letter-spacing: 0.22em; padding-left: 0.22em; color: #f1d488; filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 14px rgba(232, 199, 122, 0.35)); }
.lobby-code .copied { position: absolute; left: 0; right: 0; bottom: -9px; margin: auto; width: max-content; padding: 1px 8px; border-radius: 2px; background: #8fe38a; color: #0a1a08; letter-spacing: 0.12em; opacity: 0; transform: translateY(4px); transition: opacity 0.2s, transform 0.2s; }
.lobby-code.did .copied { opacity: 1; transform: none; }
.invite { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.invite .lk { letter-spacing: 0.06em; text-transform: none; font-size: 12.5px; font-weight: 500; color: #a9adb9; }
.inv-row { display: flex; gap: 8px; } .inv-row input { flex: 1; min-width: 0; font-size: 13px; user-select: text; color: #d8d2c0; } .inv-row .btn { padding: 0 18px; }
.banner { background: linear-gradient(90deg, rgba(232, 199, 122, 0.16), rgba(232, 199, 122, 0.04)); border: 1px solid var(--line); border-left: 3px solid var(--gold); padding: 10px 14px; border-radius: 2px; }
/* the two teams face each other across a VS medallion */
.teams { display: grid; grid-template-columns: 1fr 56px 1fr; gap: 10px; }
.team { --tc: var(--hider); position: relative; display: flex; flex-direction: column; min-height: 250px; padding: 0 0 12px; border: 1px solid color-mix(in srgb, var(--tc) 30%, transparent); border-radius: 3px;
  background: radial-gradient(120% 50% at 50% 0%, color-mix(in srgb, var(--tc) 13%, transparent), transparent 70%), linear-gradient(180deg, rgba(12, 16, 26, 0.85), rgba(6, 8, 13, 0.9));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 1px 0 color-mix(in srgb, var(--tc) 30%, transparent), 0 8px 24px rgba(0, 0, 0, 0.35); }
.team.seeker { --tc: var(--seeker); }
.team-h { font: 800 15px Cinzel, serif; letter-spacing: 0.12em; margin-bottom: 10px; display: flex; justify-content: space-between; }
.team.hider .team-h, .team-h.hider { color: var(--hider); } .team.seeker .team-h, .team-h.seeker { color: var(--seeker); }
.team .team-h { align-items: center; gap: 10px; margin: 0 0 10px; padding: 12px 14px; font-size: 17px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tc);
  text-shadow: 0 0 14px color-mix(in srgb, var(--tc) 55%, transparent), 0 1px 0 #000; border-bottom: 1px solid color-mix(in srgb, var(--tc) 25%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 18%, transparent), transparent 70%); }
.team-emb { width: 30px; height: 30px; flex: none; display: grid; place-items: center; transform: rotate(45deg); border: 1px solid var(--tc); background: #070a10; box-shadow: 0 0 12px color-mix(in srgb, var(--tc) 45%, transparent), inset 0 0 8px color-mix(in srgb, var(--tc) 30%, transparent); }
.team-emb svg { width: 17px; height: 17px; transform: rotate(-45deg); }
.team-n { flex: 1; }
.team-c { min-width: 30px; padding: 2px 8px; font: 800 14px Inter; letter-spacing: 0; text-align: center; color: #fff; background: color-mix(in srgb, var(--tc) 30%, #05070d); border: 1px solid color-mix(in srgb, var(--tc) 60%, transparent); border-radius: 2px; text-shadow: none; }
.slots { display: flex; flex-direction: column; gap: 5px; padding: 0 12px; }
.pl { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 2px; font-weight: 600; font-size: 14px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)); border: 1px solid rgba(255, 255, 255, 0.05); }
.pl-av { width: 28px; height: 28px; flex: none; display: grid; place-items: center; font: 800 14px Cinzel, serif; color: var(--tc); border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--tc) 30%, #0b0e16), #05070d); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tc) 60%, transparent), 0 0 0 3px #05070d; }
.pl-av svg { width: 14px; height: 14px; }
.pl-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-tag { font: 800 9.5px Inter; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 6px; border-radius: 2px; color: #9aa0ae; border: 1px solid rgba(255, 255, 255, 0.12); }
.pl-tag.host { color: #2a1a04; background: linear-gradient(#fdeab0, #c89a4c); border-color: #5e4418; }
.pl-tag.you { color: var(--gold); border-color: rgba(232, 199, 122, 0.5); }
.pl.me { border-color: rgba(232, 199, 122, 0.55); background: linear-gradient(90deg, rgba(232, 199, 122, 0.16), rgba(232, 199, 122, 0.03)); box-shadow: 0 0 14px rgba(232, 199, 122, 0.12); }
.pl.me::before { content: ''; position: absolute; left: -1px; top: 4px; bottom: 4px; width: 2px; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.pl.bot { color: #8c93a3; font-weight: 500; background: rgba(255, 255, 255, 0.02); }
.pl.bot .pl-av { opacity: 0.75; }
.host { font-size: 10px; color: #1a1206; background: var(--gold); padding: 1px 5px; border-radius: 3px; margin-left: 6px; font-weight: 800; }
.team-foot { margin-top: auto; padding: 12px 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.team-foot .btn.small { margin: 0; color: var(--tc); border-color: color-mix(in srgb, var(--tc) 50%, transparent); }
.team-foot .btn.small:hover { color: #fff; border-color: var(--tc); box-shadow: 0 0 0 1px #000, 0 0 16px color-mix(in srgb, var(--tc) 35%, transparent); }
.cnt { margin-left: auto; display: flex; align-items: center; gap: 10px; color: #8c93a3; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.step { display: flex; align-items: center; border: 1px solid rgba(232, 199, 122, 0.3); border-radius: 3px; background: rgba(0, 0, 0, 0.45); }
.step b { min-width: 30px; text-align: center; font: 800 15px Inter; color: #fff; letter-spacing: 0; }
.step .btn.tiny { width: 26px; height: 26px; padding: 0; font-size: 16px; line-height: 1; box-shadow: none; border: none; border-radius: 2px; }
.vs { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.vs i { flex: 1; width: 1px; max-height: 80px; background: linear-gradient(transparent, rgba(232, 199, 122, 0.5)); }
.vs i:last-child { transform: scaleY(-1); }
.vs b { width: 50px; height: 50px; flex: none; display: grid; place-items: center; font: 800 16px Cinzel, serif; letter-spacing: 0.04em; color: #f1d488; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #2d261a, #07080c 70%); border: 2px solid #b8924a;
  box-shadow: 0 0 0 1px #000, 0 0 0 4px rgba(8, 9, 14, 0.9), 0 0 0 5px rgba(232, 199, 122, 0.35), 0 0 22px rgba(232, 199, 122, 0.25); text-shadow: 0 1px 0 #000, 0 0 10px rgba(232, 199, 122, 0.5); }
/* match settings strip */
.settings { display: flex; gap: 12px 34px; flex-wrap: wrap; align-items: center; padding: 12px 18px; border: 1px solid rgba(232, 199, 122, 0.16); border-radius: 3px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2)); }
.set { display: flex; align-items: center; gap: 14px; }
.settings label { display: flex; align-items: center; gap: 7px; color: #a69a7f; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; }
.set-v { display: flex; align-items: center; gap: 12px; } .set-v b { font-size: 15px; color: #fff; min-width: 52px; } .set-v .dim { font-size: 12px; }
.settings input[type=range] { width: 170px; }
.settings select { padding: 7px 32px 7px 12px; font-size: 14px; }
/* chat on the left, the big button on the right */
.lobby-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: end; }
.lobby-foot { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 230px; }
.lobby-foot .btn.big { padding: 16px 30px; font-size: 20px; }
.lobby-foot .wait { padding: 14px 10px; text-align: center; color: #a9adb9; font-style: italic; border: 1px dashed rgba(232, 199, 122, 0.3); border-radius: 3px; }
.lobby-chat { padding: 8px; border: 1px solid rgba(232, 199, 122, 0.14); border-radius: 3px; background: rgba(0, 0, 0, 0.3); }
.lc-log { height: 72px; overflow-y: auto; font-size: 13px; color: #c6c9d2; margin-bottom: 6px; padding: 2px 4px; user-select: text; }
.lc-log b { color: var(--gold); }
.lc-log:empty::before { content: "Lobby chat · say hi while you wait"; color: #5d6374; font-style: italic; }
.lobby-chat input { width: 100%; font-size: 13px; padding: 7px 10px; }

/* champion select */
.sel-wrap { position: relative; width: min(1440px, 96vw); height: min(780px, 94vh); display: flex; flex-direction: column; padding: 22px 30px 26px; }
.sel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(232, 199, 122, 0.35) 20%, rgba(232, 199, 122, 0.35) 80%, transparent) 1; }
.sel-role { font: 800 26px Cinzel, serif; letter-spacing: 0.14em; text-shadow: 0 0 18px currentColor, 0 2px 0 #000; }
.sel-role.hider { color: var(--hider); } .sel-role.seeker { color: var(--seeker); }
.sel-timer { width: 58px; height: 58px; display: grid; place-items: center; font: 800 26px Cinzel, serif; color: #f1d488; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #2d261a, #07080c 70%); border: 2px solid #b8924a;
  box-shadow: 0 0 0 1px #000, 0 0 0 4px rgba(8, 9, 14, 0.9), 0 0 0 5px rgba(232, 199, 122, 0.35), 0 0 22px rgba(232, 199, 122, 0.25); text-shadow: 0 1px 0 #000; }
.sel-main { flex: 1; display: grid; grid-template-columns: 84px minmax(0, 1fr) 280px; gap: 18px; min-height: 0; }
/* portraits: a slim column, name on hover/selected */
.sel-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overflow-x: visible; padding: 2px; scrollbar-width: none; }
.sel-card { position: relative; flex: none; width: 76px; height: 76px; padding: 0; cursor: pointer; border-radius: 3px; overflow: hidden; background: #0a0c14;
  border: 1px solid color-mix(in srgb, var(--c) 35%, #242936); box-shadow: 0 0 0 2px #05070d; transition: transform 0.12s, border-color 0.15s, box-shadow 0.2s, filter 0.2s; filter: saturate(0.6) brightness(0.72); }
.sel-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sel-card span { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 2px 3px; font: 700 10px Inter, sans-serif; letter-spacing: 0.04em; color: #fff; text-align: center;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)); opacity: 0; transition: opacity 0.15s; }
.sel-card:hover:not(:disabled) { filter: none; transform: translateX(2px); border-color: color-mix(in srgb, var(--c) 70%, transparent); }
.sel-card:hover span, .sel-card.on span { opacity: 1; }
.sel-card.on { filter: none; border-color: var(--c); box-shadow: 0 0 0 2px #05070d, 0 0 0 3px var(--c), 0 0 18px color-mix(in srgb, var(--c) 55%, transparent); }
.sel-card:disabled { cursor: default; filter: grayscale(1) brightness(0.4); }
/* stage: blurred art behind, the illustration on the right, name + kit on the left */
.sel-stage { position: relative; min-height: 0; overflow: hidden; background: #07080d; border: 1px solid color-mix(in srgb, var(--c) 45%, #242936); border-radius: 2px;
  box-shadow: 0 0 0 1px #000, 0 0 0 5px rgba(8, 9, 14, 0.85), 0 0 0 6px color-mix(in srgb, var(--c) 26%, transparent), 0 0 40px color-mix(in srgb, var(--c) 18%, transparent); }
.stage-bg { position: absolute; inset: -30px; background: center 25% / cover no-repeat; filter: blur(22px) brightness(0.4) saturate(1.2); transform: scale(1.1); }
.sel-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('assets/ui/frame/tl.svg') left top / 48px no-repeat, url('assets/ui/frame/tr.svg') right top / 48px no-repeat, url('assets/ui/frame/bl.svg') left bottom / 48px no-repeat, url('assets/ui/frame/br.svg') right bottom / 48px no-repeat,
    linear-gradient(90deg, rgba(6, 7, 12, 0.92) 0%, rgba(6, 7, 12, 0.75) 38%, transparent 62%); }
#s-art { position: absolute; top: 0; right: 0; height: 100%; width: auto; max-width: 62%; object-fit: cover; object-position: 50% 20%; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
#s-art.in { animation: art-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes art-in { from { opacity: 0; transform: translateX(24px); } }
.stage-info { position: absolute; z-index: 1; left: 34px; bottom: 30px; top: 30px; width: min(440px, 52%); display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.si-arch { font: 700 12px Inter, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c); }
.si-name { font: 800 44px/1 Cinzel, serif; color: #fff; text-shadow: 0 0 24px color-mix(in srgb, var(--c) 50%, transparent), 0 2px 0 #000; }
.si-title { font: 500 15px Inter, sans-serif; color: var(--dim); margin-bottom: 6px; }
.si-blurb { color: #c6c9d2; font-style: italic; font-size: 14px; line-height: 1.45; margin-bottom: 12px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.si-kit { display: flex; gap: 10px; }
.si-abtn { position: relative; width: 58px; height: 58px; padding: 0; cursor: pointer; border-radius: 4px; overflow: hidden; background: #0a0c14;
  border: 1px solid rgba(232, 199, 122, 0.45); transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s; }
.si-abtn:hover { transform: translateY(-2px); border-color: rgba(232, 199, 122, 0.9); }
.si-abtn.on { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 0 14px color-mix(in srgb, var(--c) 55%, transparent); }
.si-abimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.si-abtn > span:last-child { position: absolute; right: 3px; bottom: 1px; font: 800 12px Inter; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.si-detail, .lo-detail { min-height: 92px; padding: 10px 12px; font-size: 13px; line-height: 1.45; color: #c6c9d2; background: rgba(6, 8, 14, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.07); border-left: 2px solid var(--c, var(--gold)); border-radius: 2px; }
.si-detail { margin-top: 8px; }
.sd-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; color: #fff; }
.sd-key { font: 800 12px Inter; color: var(--gold); }
.sd-cd { margin-left: auto; font-size: 12px; color: var(--dim); }
/* right column: teams, then spells + Lock In */
.sel-side { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.sel-roster { flex: 1; min-height: 0; overflow-y: auto; }
.sel-roster .team-h { margin: 2px 0 6px; font: 700 11px Inter, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; }
.sel-roster .team-h.hider { color: var(--hider); } .sel-roster .team-h.seeker { color: var(--seeker); }
.sel-roster .team-h ~ .team-h { margin-top: 14px; }
.rp { display: flex; align-items: center; gap: 9px; padding: 4px 8px 4px 4px; margin-bottom: 4px; font-size: 13px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); }
.rp.me { border-color: rgba(232, 199, 122, 0.5); background: rgba(232, 199, 122, 0.08); }
.rp-face { width: 30px; height: 30px; flex: none; border-radius: 2px; object-fit: cover; background: #10131c; border: 1px solid color-mix(in srgb, var(--c, #3a3f4c) 70%, #242936); }
.rp-who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.rp-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-c { font-size: 11px; color: var(--c, var(--dim)); }
.rp-ok { color: #8fe08a; font-weight: 800; }
.sel-loadout { position: relative; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(232, 199, 122, 0.14); }
.lo-h { font: 700 11px Inter, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.lo-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lo-slot { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 6px; text-align: left;
  font: 600 13px Inter, sans-serif; color: #e6e8ee; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 3px; }
button.lo-slot { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
button.lo-slot:hover:not(:disabled), .lo-slot.open { border-color: rgba(159, 240, 255, 0.55); background: rgba(159, 240, 255, 0.07); }
.lo-slot:disabled { cursor: default; }
.lo-icon { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 3px; object-fit: cover; font-size: 22px; }
.lo-key { font: 800 11px Inter; color: var(--gold); }
.lo-name { grid-column: 2; }
.lo-slot:not(.fixed) .lo-key::after { content: ' · change'; font-weight: 500; color: var(--dim); }
.lo-slot:disabled .lo-key::after { content: ''; }
.lo-pop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; background: rgba(6, 8, 14, 0.9); border: 1px solid rgba(159, 240, 255, 0.35); border-radius: 3px;
  animation: pop-in 0.14s ease-out; }
@keyframes pop-in { from { opacity: 0; transform: translateY(4px); } }
.lo-opt { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 4px; cursor: pointer; font: 600 11px Inter, sans-serif; color: #c6c9d2;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 2px; }
.lo-opt:hover { border-color: rgba(159, 240, 255, 0.5); color: #fff; }
.lo-opt.on { border-color: #9ff0ff; color: #fff; background: rgba(159, 240, 255, 0.12); }
.lo-opt-icon { width: 32px; height: 32px; font-size: 20px; }
.lo-detail { min-height: 0; }
.sel-loadout #s-lock { margin-top: 4px; }
.knack-glyph { background: radial-gradient(circle at 50% 42%, #1d2436, #0a0c14 72%); border-radius: 3px; }
small { font-size: 10px; color: var(--dim); letter-spacing: 0.05em; }

/* ---------- unit labels (LoL-style health bars) ---------- */
#labels { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
/* HUD.warmEffects: for a few frames of the match loading screen, the HUD and labels draw above it, all but invisible,
   so Chrome compiles their effect shaders there (opacity 0 would skip drawing them) */
#hud.fx-warm, #labels.fx-warm, #hud.fx-warm.hidden, #labels.fx-warm.hidden { display: block !important; z-index: 41; opacity: 0.01; pointer-events: none !important; }
#hud.fx-warm * { pointer-events: none !important; }
.ulabel { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; will-change: transform; }
.ulabel .un { font: 700 12px Inter, sans-serif; text-shadow: 0 1px 2px #000, 0 0 4px #000; white-space: nowrap; }
.ulabel.self .un { color: #d6ffb0; } .ulabel.ally .un { color: #b8efff; } .ulabel.enemy .un { color: #ffb3b9; }
.ulabel .ust { display: flex; gap: 2px; font-size: 13px; line-height: 1; min-height: 13px; filter: drop-shadow(0 1px 2px #000); }
.ulabel .ust i { font-style: normal; }
.uhp { display: flex; align-items: stretch; height: 14px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.85)); }
.ulv { width: 16px; background: linear-gradient(#262b3a, #0c0f16); border: 1px solid #000; border-right: none; box-shadow: inset 0 0 0 1px rgba(232,199,122,0.4); color: #f2d68c; font: 800 10px/12px Inter; text-align: center; border-radius: 3px 0 0 3px; }
.ubar { position: relative; width: 88px; background: linear-gradient(#040509, #151922); border: 1px solid #000; border-radius: 0 3px 3px 0; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(232,199,122,0.22); }
/* gloss + bottom shade over everything */
.ubar::after, #h-hp::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.06) 45%, transparent 50%, rgba(0,0,0,0.28)); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5); }
.ufill, .utrail { position: absolute; left: 0; top: 0; bottom: 0; }
.ufill { transition: width 0.12s; }
/* damage trail: holds, then drains; stays hidden under the fill when healing */
.utrail, #h-hp .hp-trail { background: linear-gradient(#fff4c8, #e3a246); transition: width 0.45s cubic-bezier(0.5, 0, 0.75, 0.3) 0.35s; }
.ulabel.self .ufill { background: linear-gradient(#b8ff86, #62d12f 45%, #2e8c16); }
.ulabel.ally .ufill { background: linear-gradient(#9ae8ff, #34a6e0 45%, #17639a); }
.ulabel.enemy .ufill { background: linear-gradient(#ff9a9a, #e3343f 45%, #8e1420); }
.ulabel.seeker .ufill { opacity: 0.85; }
/* hit flash (WAAPI on ::after, see units.js / hud.js) and the low-health pulse: a light overlay's opacity, never an
   animated filter; each filter / backdrop effect makes Chrome compile a compositor shader the first time it draws */
.ufill::after, #h-hp .hp-fill::after { content: ''; position: absolute; inset: 0; background: rgba(255, 244, 214, 0.55); opacity: 0; pointer-events: none; }
.ulabel.low .ufill::after { animation: hplow 0.9s ease-in-out infinite; }
.ushield { position: absolute; top: 0; bottom: 0; background: linear-gradient(#ffffff, #d7dbe4 45%, #9ca3b3); transition: left 0.12s, width 0.12s; }
/* barrier: soaks damage before health and refills out of combat */
.ubarrier, #h-hp .hp-barrier { position: absolute; top: 0; bottom: 0; background: linear-gradient(#e2f6ff, #8fd0f2 45%, #4b8fb8); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); transition: left 0.12s, width 0.12s; }
.ulabel .unlv { display: inline-block; min-width: 13px; margin-right: 4px; padding: 0 3px; border-radius: 3px; background: linear-gradient(#3a3050, #17121f); border: 1px solid rgba(232,199,122,0.55); color: #f2d68c; font: 800 10px/13px Inter, sans-serif; text-align: center; vertical-align: 1px; }
.uticks { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(0,0,0,0.8) 1px, transparent 1px); background-repeat: repeat-x; background-position: 0 0; }
@keyframes hplow { 50% { opacity: 1; } }
.dmgnum { position: absolute; left: 0; top: 0; font: 900 18px Inter, sans-serif; text-shadow: 0 2px 3px #000, 0 0 6px #000; pointer-events: none; white-space: nowrap; will-change: transform; }
.dmgnum.big { font-size: 24px; }
.dmgnum.feast { color: #6dff8a; text-shadow: 0 0 8px rgba(109, 255, 138, 0.55), 0 1px 2px #000; }
.dmgnum.taken { color: #ff4d4d; } .dmgnum.dealt { color: #ffffff; } .dmgnum.other { color: #ffb070; font-size: 14px; }
/* hit numbers (gameview hitNumber): a hard dark outline so they read over grass and VFX; heavy hits turn gold and glow */
.dmgnum.dealt, .dmgnum.taken, .dmgnum.other { letter-spacing: -0.02em; text-shadow: -1.5px -1.5px 0 #140a06, 1.5px -1.5px 0 #140a06, -1.5px 1.5px 0 #140a06, 1.5px 1.5px 0 #140a06, 0 2px 0 #140a06, 0 4px 6px rgba(0, 0, 0, 0.6); }
.dmgnum.dealt { color: #fff8ec; }
.dmgnum.dealt.heavy { color: #ffd23f; text-shadow: -2px -2px 0 #2a1204, 2px -2px 0 #2a1204, -2px 2px 0 #2a1204, 2px 2px 0 #2a1204, 0 3px 0 #2a1204, 0 0 14px rgba(255, 140, 30, 0.8); }
.dmgnum.taken.heavy { color: #ff2e2e; text-shadow: -2px -2px 0 #1c0404, 2px -2px 0 #1c0404, -2px 2px 0 #1c0404, 2px 2px 0 #1c0404, 0 3px 0 #1c0404, 0 0 14px rgba(255, 30, 30, 0.7); }
.dmgnum.absorb { color: #e8e8ff; font-size: 13px; } .dmgnum.xp { color: #d9b8ff; font-size: 14px; text-shadow: 0 0 8px rgba(185, 140, 255, 0.6), 0 1px 2px #000; } .dmgnum.xp.big { font-size: 18px; } .dmgnum.immune { color: #ffe07a; font-size: 13px; letter-spacing: 0.1em; }
canvas#game.cur-attack { cursor: url('assets/ui/cursors/attack.png') 1 1, crosshair; cursor: -webkit-image-set(url('assets/ui/cursors/attack.png') 1x, url('assets/ui/cursors/attack@2x.png') 2x) 1 1, crosshair; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
#hud > * { pointer-events: auto; }
/* top centre: the clock medallion. The left edge of its ring charges up with the Kindle (what the hiders earn), the
   right edge with the Moon (what time gives the seekers) up to the Last Light pip at the top; in Last Light the right
   edge is the Gloom closing. Slim wings either side carry the words and the shrine gems; the omen hangs at the bottom. */
#h-top { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-start; pointer-events: none; }
#h-phase { position: relative; z-index: 1; flex: none; width: 106px; height: 106px; border-radius: 50%; pointer-events: auto; }
#h-phase .ring { position: absolute; inset: 0; overflow: visible; }
#h-phase .core { position: absolute; inset: 16px; border-radius: 50%; background: radial-gradient(#161c2c, #070a12 75%); border: 1px solid var(--line); box-shadow: inset 0 0 10px #000, 0 0 0 1px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; align-items: center; justify-content: center; }
#h-phase-name { font: 800 7px Cinzel, serif; letter-spacing: 0.14em; color: var(--gold); white-space: nowrap; margin-top: -3px; }
#h-time { font: 800 22px/23px Inter; font-variant-numeric: tabular-nums; }
#h-phase.urgent #h-phase-name { color: #ff8a8a; }
#h-phase.urgent #h-time { color: #ff6a6a; animation: pulse 1s infinite; }
.ring .track { fill: none; stroke: rgba(4, 6, 12, 0.85); stroke-width: 13; }
.ring g { cursor: help; }
.ring path { fill: none; stroke-width: 8.5; stroke-linecap: butt; }
.ring .fill { stroke-dasharray: 0 1; transition: stroke-dasharray 0.4s; }
.ring .kd-seg .bg { stroke: #55301a; } .ring .kd-seg .fill { stroke: #ff8a2a; filter: drop-shadow(0 0 2px #ff6a1a); }
.ring .kd-seg.now .bg { stroke: #6a3a1c; }
.ring .kd-seg.done .fill { stroke: #ffc86a; filter: drop-shadow(0 0 3px #ff9a3a); }
.ring.fed .kd-seg.now .fill { animation: ring-fed 0.9s ease-in-out infinite; }
.ring.blaze .kd-seg .fill { filter: drop-shadow(0 0 4px #ff9a3a); }
.ring .kd-seg.hit { animation: ring-hit 0.4s 4; }
@keyframes ring-fed { 50% { stroke: #ffd27a; } }
@keyframes ring-hit { 50% { filter: brightness(2.2) drop-shadow(0 0 5px #ffd27a); } }
.ring .mn-seg .bg { stroke: #4a4128; } .ring .mn-seg .fill { stroke: #d8b866; filter: drop-shadow(0 0 2px #a8863a); }
.ring .mn-seg.now .bg { stroke: #5c5030; }
.ring .mn-seg.done .fill { stroke: #fbeab4; filter: drop-shadow(0 0 3px #e8c77a); }
.ring .mn-gloom { display: none; cursor: default; }
.ring .mn-gloom .bg { stroke: #3a2a5c; } .ring .mn-gloom .fill { stroke: #b48cff; filter: drop-shadow(0 0 2px #8a5cff); }
.ring .mn-gloom.closing .fill { animation: pulse 1s infinite; }
.ring .mn-ll { fill: #1a0a0e; stroke: rgba(255, 90, 90, 0.65); stroke-width: 1.3; cursor: help; }
#h-phase.urgent .mn-seg { display: none; }
#h-phase.urgent .mn-gloom { display: inline; }
#h-phase.urgent .mn-ll { fill: #ff4d5a; stroke: #ffb0b0; filter: drop-shadow(0 0 3px #ff4d5a); }
#h-phase.hide .mn-seg .bg { stroke: #332d1c; }
/* the wings: words and shrine gems, tucked under the medallion's rim */
.wing { --wc: var(--gold); position: relative; box-sizing: border-box; margin-top: 44px; min-width: 170px; min-height: 44px; padding: 6px 12px 6px; background: linear-gradient(var(--dir), transparent, color-mix(in srgb, var(--wc) 50%, transparent) 38%, color-mix(in srgb, var(--wc) 50%, transparent) 78%, transparent) bottom / 100% 1px no-repeat, linear-gradient(color-mix(in srgb, var(--wc) 15%, transparent), transparent 72%), linear-gradient(var(--dir), rgba(8, 11, 20, 0), rgba(8, 11, 20, 0.88) 38px, rgba(8, 11, 20, 0.94)); display: flex; flex-direction: column; justify-content: center; gap: 4px; pointer-events: auto; }
.wing .wg-head, .wing .wg-foot { display: flex; align-items: center; gap: 7px; min-height: 13px; white-space: nowrap; }
#h-kindle.wing { margin-right: -20px; padding-right: 30px; }
#h-kindle .wg-head, #h-kindle .wg-foot { justify-content: flex-end; }
#h-kindle .shrine-slot { width: 15px; height: 13px; }
#h-moon.wing { margin-left: -20px; padding-left: 30px; }
/* ornament: the top border runs on past the outer end and ends in a diamond finial */
.wing::before { content: ""; position: absolute; top: -1px; height: 2px; background: linear-gradient(var(--dir), transparent, var(--wc) 24%, var(--wc) 82%, color-mix(in srgb, var(--wc) 35%, transparent)); box-shadow: 0 0 6px color-mix(in srgb, var(--wc) 45%, transparent); pointer-events: none; }
.wing::after { content: ""; position: absolute; top: -4px; width: 6px; height: 6px; transform: rotate(45deg); background: var(--wc); box-shadow: 0 0 6px var(--wc); pointer-events: none; }
#h-kindle.wing { --wc: #ffb56a; --dir: 90deg; }
#h-kindle.wing::before { left: -32px; right: 0; }
#h-kindle.wing::after { left: -36px; }
#h-moon.wing { --dir: 270deg; }
#h-moon.wing::before { right: -32px; left: 0; }
#h-moon.wing::after { right: -36px; }
#h-moon.wing.ll { --wc: #c9a8ff; }
.wing .wg-head { gap: 0; }
#h-kindle .kd-name::after, #h-moon .mn-name::after { content: ""; width: 4px; height: 4px; margin-right: 7px; transform: rotate(45deg); background: var(--wc); opacity: 0.7; }
.wing .wg-foot { padding-top: 3px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
#h-shrines { display: flex; gap: 0; pointer-events: auto; }
.shrine-pip { width: 9px; height: 9px; transform: rotate(45deg); border: 2px solid #aaa; background: conic-gradient(#3fffd8 calc(var(--p, 0) * 360deg), rgba(0, 0, 0, 0.6) 0); }
.shrine-pip.owned { border-color: #3fffd8; box-shadow: 0 0 8px #3fffd8; }
.shrine-pip.capping { border-color: #fff; animation: pulse 0.6s infinite; }
.shrine-pip.contested { border-color: var(--seeker); }
.shrine-slot { display: flex; align-items: center; justify-content: center; width: 17px; height: 18px; cursor: help; }
#h-next, .kd-next { font: 600 10px Inter; color: #c6c9d2; text-shadow: 0 1px 3px #000; font-variant-numeric: tabular-nums; white-space: nowrap; }
#h-next b { color: var(--gold); }
#h-next .gloom b { color: #c9a8ff; }
#h-next span[title] { cursor: help; }
#h-moon.ll #h-next span:not(.gloom) b { color: #ff8a8a; }
.kd-next b { color: #ffd9b0; }
/* the Kindle's words: name + tier, then the count to the next tier beside its fuel, the shrine gems */
#h-kindle .kd-tier { font: 800 11px Cinzel, serif; letter-spacing: 0.1em; text-transform: uppercase; color: #ffd9b0; text-shadow: 0 0 8px rgba(255, 140, 50, 0.45), 0 1px 3px #000; }
#h-kindle.t0 .kd-tier { color: #a8927e; text-shadow: 0 1px 3px #000; }
#h-kindle .kd-name { display: flex; align-items: center; gap: 7px; font: 800 8px Cinzel, serif; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 181, 106, 0.75); text-shadow: 0 1px 3px #000; white-space: nowrap; cursor: help; }
#h-kindle.t0 .kd-name { color: #b39a86; }
/* the Moon's words: its stage (or the Gloom), and what comes next */
#h-moon.ll .mn-name { color: #c9a8ff; }
#h-moon.ll .mn-stage { color: #e0d0ff; }
#h-moon .mn-name { display: flex; align-items: center; gap: 7px; font: 800 8px Cinzel, serif; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(232, 199, 122, 0.75); text-shadow: 0 1px 3px #000; cursor: help; }
#h-moon .mn-stage { font: 800 11px Cinzel, serif; letter-spacing: 0.1em; text-transform: uppercase; color: #f6e6b8; text-shadow: 0 0 8px rgba(232, 199, 122, 0.4), 0 1px 3px #000; }
#h-moon.idle .mn-stage { font-size: 9px; color: var(--dim); text-shadow: 0 1px 3px #000; }
.kd-pops { position: absolute; inset: 0; pointer-events: none; }
#h-kindle .kd-pop { left: auto; right: 26px; transform: none; }
.kd-pop { position: absolute; top: 100%; transform: translateX(-50%); font: 800 12px Inter, sans-serif; color: #ffc46a; text-shadow: 0 1px 3px #000, 0 0 6px rgba(255, 140, 40, 0.6); white-space: nowrap; animation: kd-pop 1.8s ease-out forwards; }
.kd-pop em { font: 600 10px Inter, sans-serif; font-style: normal; color: #e6e1d3; }
.kd-pop.down { color: var(--seeker); }
@keyframes kd-pop { 0% { opacity: 0; margin-top: -4px; } 15% { opacity: 1; margin-top: 2px; } 75% { opacity: 1; } 100% { opacity: 0; margin-top: 10px; } }
.kd-ember { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff3d0; box-shadow: 0 0 6px 2px #3fffd8, 0 0 10px 3px #ff9a3a; pointer-events: none; animation: kd-ember 0.85s ease-in forwards; }
@keyframes kd-ember { to { transform: translate(var(--dx), var(--dy, 0)); opacity: 0.2; } }
/* role briefing card, start of the hide phase */
#h-brief { position: absolute; bottom: 165px; left: 50%; transform: translateX(-50%); pointer-events: none; transition: opacity 0.6s; }
#h-brief.out { opacity: 0; }
.brief { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 20px; width: min(520px, 90vw); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6); }
.brief.hider { border-top: 3px solid var(--hider); } .brief.seeker { border-top: 3px solid var(--seeker); }
.brief-title { font: 800 20px Cinzel, serif; letter-spacing: 0.08em; margin-bottom: 8px; }
.brief.hider .brief-title { color: var(--hider); } .brief.seeker .brief-title { color: var(--seeker); }
.brief-row { display: flex; gap: 12px; align-items: baseline; font-size: 14px; line-height: 1.4; margin: 5px 0; color: #e6e1d3; }
.brief-row span { flex: none; width: 96px; font: 800 10px Inter; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.brief-row p { margin: 0; } .brief-row b { color: #ffc46a; }
.ls-foot .brief { width: min(760px, 92vw); padding: 10px 18px; }
.ls-foot .brief-title { font-size: 16px; margin-bottom: 4px; }
.ls-foot .brief-row { font-size: 12px; line-height: 1.3; margin: 2px 0; }
/* the role brief runs long: two columns on the loading screen so the header (and the omen) stay on screen */
.ls-foot .brief { width: min(1180px, 94vw); display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.ls-foot .brief > :not(.brief-row) { grid-column: 1 / -1; }
@media (max-width: 900px) { .ls-foot .brief { grid-template-columns: 1fr; } }
/* Recall slot on the seeker bar */
.ab.recall { width: 46px; height: 46px; margin-left: 4px; border-color: rgba(200, 190, 255, 0.8); }
.recall-icon { display: flex !important; align-items: center; justify-content: center; font-size: 26px; color: #d8d0ff; background: radial-gradient(circle, #2c2446, #0a0c14); }

/* left column: the team panel, then the objective tracker under it (however tall the teams get) */
#h-left { position: absolute; top: 10px; left: 10px; width: 220px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
#h-obj { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px 7px; max-height: calc(100vh - 420px); overflow: hidden; }
#h-obj .ob-head { font: 800 10px Cinzel, serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin: 0 2px 4px; }
#h-obj .ob { position: relative; padding: 3px 2px 4px 16px; animation: ob-in 0.35s ease-out; }
#h-obj .ob + .ob { border-top: 1px solid rgba(255, 255, 255, 0.06); }
#h-obj .ob::before { content: '◆'; position: absolute; left: 2px; top: 4px; font-size: 9px; color: var(--gold); }
#h-obj .ob-text { font: 700 12px/1.3 Inter, sans-serif; color: #f2ead6; text-shadow: 0 1px 2px #000; }
#h-obj .ob-sub { font: 500 11px/1.35 Inter, sans-serif; color: #b8bcc8; margin-top: 1px; }
#h-obj .ob-sub:empty, #h-obj .ob-bar { display: none; }
#h-obj .ob-sub b, #h-obj .ob-text b { color: var(--gold); font-variant-numeric: tabular-nums; }
#h-obj .ob.has-bar .ob-bar { display: block; height: 3px; margin-top: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.6); overflow: hidden; }
#h-obj .ob-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #b8862f, var(--gold)); transition: width 0.4s ease-out; }
#h-obj .ob.warn::before { content: '!'; font: 900 12px Inter; color: #ff6a6a; left: 4px; top: 2px; }
#h-obj .ob.warn .ob-text { color: #ff9a8a; animation: pulse 1s infinite; }
#h-obj .ob.warn .ob-bar i { background: linear-gradient(90deg, #8a2020, #ff6a6a); }
#h-obj .ob.done::before { content: '✓'; color: #8fffb0; font-size: 11px; top: 3px; }
#h-obj .ob.done .ob-text { color: #bfe9c8; }
#h-obj .ob.flash .ob-text { color: #8fffb0; }
#h-obj .ob.next::before { content: '›'; color: var(--dim); font-size: 13px; top: 1px; }
#h-obj .ob.next .ob-text { font-weight: 500; font-size: 11px; color: var(--dim); }
@keyframes ob-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (max-height: 760px) { #h-obj .ob.next { display: none; } }
/* team strips: above each clock wing, outside it, hugging the medallion. Hiders over the Kindle (left), seekers over the Moon (right) */
#h-teams, #h-foes { position: absolute; bottom: 100%; margin-bottom: 5px; display: flex; gap: 4px; align-items: flex-start; pointer-events: none; }
#h-teams { right: 26px; }
#h-foes { left: 26px; }
.tg { align-self: center; margin-right: 2px; font: 600 11px/1.2 Inter; color: #c6c9d2; text-align: right; text-shadow: 0 1px 3px #000; pointer-events: auto; cursor: help; white-space: nowrap; }
.tg b { color: var(--gold); font-variant-numeric: tabular-nums; }
.tr { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: auto; cursor: help; }
.tp { display: block; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #0a0c14; border: 2px solid var(--hider); box-shadow: inset 0 0 0 1px var(--c), 0 1px 4px rgba(0, 0, 0, 0.7); }
#h-foes .tp { border-color: var(--seeker); }
#h-top .tr.me .tp { border-color: var(--gold); box-shadow: 0 0 6px rgba(232, 199, 122, 0.7); }
.tr.dead .tp { filter: grayscale(1) brightness(0.6); }
.tr.out .tp { filter: grayscale(1) brightness(0.35); }
.tr.out::after { content: '✕'; position: absolute; top: 0; left: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font: 900 20px Inter; color: #ff5a5a; text-shadow: 0 0 3px #000; }
.tl { display: flex; gap: 2px; }
.tl i { width: 5px; height: 5px; transform: rotate(45deg); background: #2e3a44; } .tl i.on { background: #7fe9ff; box-shadow: 0 0 3px #7fe9ff; }
.tk { font: 800 10px/1 Inter; color: var(--seeker); text-shadow: 0 1px 2px #000; }
.tk::after { content: ' ☠'; font-size: 9px; }
/* the scoreboard's champion chip */
.tc { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; align-items: center; justify-content: center; font-weight: 800; font-size: 10px; color: #000; background: var(--c); flex: none; }

#h-feed { position: absolute; top: 56px; right: 10px; width: 330px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
/* narrower screens: the widened top bar would run into the corner panels, so they drop below it */
@media (max-width: 1800px) { #h-left, #h-feed { top: 64px; } }
.fe { background: var(--panel); border-left: 3px solid var(--seeker); padding: 6px 10px; font-size: 13px; border-radius: 3px; transition: opacity 1s; animation: slidein 0.25s; }
.fe.shrine { border-color: #3fffd8; }
.fe.fade { opacity: 0; }
.fe .lv { color: #7fe9ff; font-size: 11px; margin-left: 4px; } .fe .out { color: var(--seeker); font-weight: 800; font-size: 11px; margin-left: 4px; }

#h-announce { position: absolute; top: 31%; left: 50%; transform: translate(-50%, -50%) scale(0.9); text-align: center; opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; }
#h-announce.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.an-big { font: 800 56px Cinzel, serif; letter-spacing: 0.1em; color: var(--gold); text-shadow: 0 0 30px rgba(0, 0, 0, 0.9), 0 0 20px rgba(232, 199, 122, 0.5); white-space: nowrap; }
#h-announce.seeker .an-big { color: #ff7a82; } #h-announce.hider .an-big { color: #7fe9ff; } #h-announce.small .an-big { font-size: 24px; }
#h-announce.sac .an-big { color: #ff3a4c; text-shadow: 0 0 18px rgba(255, 30, 50, 0.65), 0 2px 0 #2a0008; letter-spacing: 0.12em; }
#h-announce.gloom .an-big { color: #c9a8ff; text-shadow: 0 0 22px rgba(120, 50, 255, 0.7), 0 2px 0 #0c0018; letter-spacing: 0.1em; }
b.gloom { color: #c9a8ff; }
/* ---------- Omens (shared/mutators.js) ---------- */
/* an emblem (client/ui/omenArt.js): the painted medallion, or a moon glyph until it loads */
.om-emb { position: relative; display: inline-grid; place-items: center; flex: none; }
.om-emb i { font-style: normal; color: var(--c); filter: drop-shadow(0 0 4px var(--c)); line-height: 1; }
.om-emb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.om-emb.ok i { visibility: hidden; }
/* the reveal: the emblem slams in, a kicker, the name unfurls, the line under it */
#h-announce.mutator { top: 29%; }
#h-announce.mutator.hint .an-emb { width: 84px; height: 84px; font-size: 50px; }
#h-announce.mutator.hint .an-big { font-size: 28px; font-style: italic; letter-spacing: 0.04em; color: #e9e2ff; }
.omen-fly { position: fixed; z-index: 30; pointer-events: none; }
.omen-fly .om-emb { width: 100%; height: 100%; font-size: 50px; filter: drop-shadow(0 0 12px #b9a6ff); }
#h-announce.mutator .an-emb { width: 118px; height: 118px; margin: 0 auto 4px; display: grid; font-size: 64px; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--omen) 70%, transparent)) drop-shadow(0 6px 10px #000); animation: omen-emb 1.1s cubic-bezier(.2, 1.4, .4, 1) both; }
#h-announce.mutator .an-emb::after { content: ''; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--omen) 55%, transparent) 0, transparent 62%); animation: omen-halo 2.4s ease-out both; z-index: -1; }
#h-announce.mutator .an-kick { font: 700 12px Cinzel, serif; letter-spacing: 0.42em; text-transform: uppercase; color: color-mix(in srgb, var(--omen) 55%, #fff); text-shadow: 0 1px 4px #000; animation: omen-kick 0.8s 0.25s ease-out both; }
#h-announce.mutator .an-big { color: var(--omen, #e8c77a); letter-spacing: 0.14em; text-shadow: 0 0 26px color-mix(in srgb, var(--omen, #e8c77a) 70%, transparent), 0 2px 0 #000; animation: omen-in 1s 0.2s ease-out both; }
#h-announce.mutator .an-sub { max-width: 600px; margin: 6px auto 0; animation: omen-kick 0.8s 0.55s ease-out both; }
@keyframes omen-emb { from { transform: scale(2.4) rotate(-25deg); opacity: 0; filter: blur(8px); } 60% { opacity: 1; } }
@keyframes omen-halo { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes omen-in { from { letter-spacing: 0.6em; opacity: 0; filter: blur(6px); } }
@keyframes omen-kick { from { opacity: 0; transform: translateY(6px); } }
/* the colour sweep across the screen as the omen lands */
.omen-flash { position: absolute; inset: 0; pointer-events: none; z-index: 5; background: radial-gradient(ellipse at 50% 55%, transparent 20%, color-mix(in srgb, var(--omen) 38%, transparent) 55%, transparent 80%); animation: omen-flash 1.5s ease-out forwards; }
@keyframes omen-flash { from { opacity: 0; transform: scale(0.4); } 25% { opacity: 1; } to { opacity: 0; transform: scale(1.8); } }
b.omen { color: var(--omen, #e8c77a); }
/* the omen icon set in the bottom of the clock ring: veiled (breathing) until it fires, then its emblem with the seconds left */
#h-omen { position: absolute; z-index: 2; left: 50%; bottom: -7px; transform: translateX(-50%); box-sizing: border-box; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(#1c1030, #0a0714); border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 40%, transparent), 0 2px 4px #000; cursor: help; pointer-events: auto; }
#h-omen .om-ico { width: 22px; height: 22px; font-size: 14px; }
#h-omen .om-ico img { border-radius: 50%; }
#h-omen.wait { animation: omen-breathe 3.2s ease-in-out infinite; }
#h-omen.wait .om-ico { animation: omen-bob 3.2s ease-in-out infinite; }
#h-omen.live { border-color: var(--c); box-shadow: 0 0 12px var(--c), 0 2px 4px #000; }
#h-omen.done { opacity: 0.5; }
#h-omen.land { animation: omen-land 0.9s ease-out; }
@keyframes omen-land { 0% { transform: translateX(-50%) scale(1.5); box-shadow: 0 0 24px var(--c); } }
#h-omen .om-secs { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); padding: 0 3px; border-radius: 6px; background: rgba(0, 0, 0, 0.8); font: 800 9px/12px Inter; font-variant-numeric: tabular-nums; color: #fff; }
#h-omen .om-secs:empty { display: none; }
.rs-omen, .ls-omen, .g-omen { cursor: help; }
.g-omen { white-space: nowrap; } .g-om-emb { width: 18px; height: 18px; font-size: 11px; vertical-align: -4px; margin-right: 3px; }
.rs-emb { width: 22px; height: 22px; font-size: 13px; vertical-align: middle; margin: -4px 4px 0 2px; }
@keyframes omen-breathe { 50% { border-color: color-mix(in srgb, var(--c) 80%, transparent); box-shadow: 0 0 9px color-mix(in srgb, var(--c) 30%, transparent); } }
@keyframes omen-bob { 50% { transform: translateY(-1px) scale(1.06); } }
@keyframes omen-spin { to { transform: rotate(360deg); } }
/* the veil: what a live omen does to the edges of your sight */
#h-omenveil { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 2.5s; z-index: -1; } /* under the HUD panels: the world darkens, the UI doesn't */
#h-omenveil.on { opacity: 1; }
#h-omenveil.bloodmoon { background: radial-gradient(ellipse at 50% 45%, transparent 48%, rgba(90, 0, 8, 0.28) 72%, rgba(40, 0, 4, 0.62) 100%); animation: veil-pulse 4s ease-in-out infinite; }
#h-omenveil.goldmoon { background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(120, 80, 10, 0.18) 80%, rgba(60, 36, 4, 0.4) 100%); }
#h-omenveil.moonless { background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(2, 3, 10, 0.55) 62%, rgba(0, 0, 4, 0.9) 100%); }
#h-omenveil.eclipse { background: radial-gradient(ellipse at 50% 50%, transparent 26%, rgba(6, 0, 16, 0.55) 52%, rgba(120, 50, 255, 0.28) 70%, rgba(0, 0, 0, 0.92) 86%); }
#h-omenveil.eclipse::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(255, 60, 140, 0.35) 72%, transparent 84%); opacity: 0; }
#h-omenveil.eclipse.throb::after { animation: veil-throb 0.75s ease-out; }
#h-omenveil.wildhunt { background: radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(10, 60, 50, 0.22) 78%, rgba(2, 20, 18, 0.55) 100%); }
#h-omenveil.winds { background: radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(160, 220, 255, 0.1) 85%, rgba(40, 70, 100, 0.25) 100%); }
#h-omenveil.wildbloom { background: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(60, 140, 50, 0.14) 85%, rgba(10, 40, 12, 0.35) 100%); }
#h-omenveil.starfall { background: radial-gradient(ellipse at 50% 30%, transparent 55%, rgba(60, 110, 220, 0.12) 82%, rgba(6, 12, 40, 0.35) 100%); }
@keyframes veil-pulse { 50% { filter: brightness(1.35); } }
@keyframes veil-throb { 0% { opacity: 0; } 12% { opacity: 1; } 30% { opacity: 0.2; } 42% { opacity: 0.8; } 100% { opacity: 0; } }
.fe .sac { color: #ff5a66; font-size: 11px; margin-left: 4px; } .dmgnum.denied { color: #7ff0ff; font-size: 14px; letter-spacing: 0.08em; text-shadow: 0 0 8px rgba(127, 240, 255, 0.6), 0 1px 0 #000; }
.an-sub { font: 600 17px Inter; text-shadow: 0 1px 6px #000; margin-top: 4px; }

#h-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
#h-overlay.blind { background: radial-gradient(circle, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.92)); }
#h-overlay.respawn { background: radial-gradient(circle, transparent 30%, rgba(40, 0, 10, 0.6)); filter: grayscale(0.5); }
/* the Gloom: shadow creeping in from the screen edges while you stand outside it, breathing with its damage ticks */
#h-gloom { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.6s;
  background: radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(20, 6, 40, 0.55) 66%, rgba(6, 0, 14, 0.92) 100%);
  box-shadow: inset 0 0 90px 30px rgba(90, 30, 170, 0.35); }
#h-gloom.on { opacity: 1; animation: gloom-breathe 1s ease-in-out infinite; }
@keyframes gloom-breathe { 50% { opacity: 0.8; transform: scale(1.02); } }
#h-overlay.ghost { justify-content: flex-end; padding-bottom: 170px; }
.ov-big { font: 800 44px Cinzel, serif; color: var(--gold); text-shadow: 0 0 20px #000; }
.ov-sub { font: 600 18px Inter; text-shadow: 0 1px 6px #000; }
.ov-sub b { color: var(--gold); font-size: 22px; }

/* bottom bar: floats over the world with no panel (concept: docs/art/concepts/vesper-ingame-concept.png). A soft dark
   pool behind it keeps it readable over bright wheat; each piece carries its own gold hairline and drop shadow. */
#h-bottom { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 16px; align-items: flex-end; }
#h-bottom::before { content: ''; position: absolute; inset: -46px -110px -30px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 50% 58% at 50% 72%, rgba(3, 5, 10, 0.78), rgba(3, 5, 10, 0.5) 50%, transparent 100%); }
#h-portrait { position: relative; width: 104px; height: 104px; flex: none; margin-bottom: 2px; }
#h-portrait::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1.5px solid transparent; border-left-color: rgba(232, 199, 122, 0.75); border-bottom-color: rgba(232, 199, 122, 0.75); transform: rotate(20deg); pointer-events: none; }
#h-portrait::after { content: ''; position: absolute; left: -9px; top: 50%; width: 7px; height: 7px; margin-top: -4px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 6px var(--gold); pointer-events: none; }
.pt-ring { position: relative; overflow: hidden; width: 104px; height: 104px; box-sizing: border-box; border-radius: 50%; border: 2px solid #e8c77a; background: #05070d;
  box-shadow: 0 0 0 3px rgba(8, 7, 5, 0.9), 0 0 0 4px rgba(232, 199, 122, 0.45), 0 0 24px color-mix(in srgb, var(--c) 45%, transparent), 0 8px 18px rgba(0, 0, 0, 0.75); }
.pt-ring::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(0, 0, 0, 0.6); pointer-events: none; }
.pt-name { font: 800 14px Cinzel, serif; }
.pt-art { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-role { display: none; }
/* a spirit (out of lives): your champion gone pale and drifting; the kit is two spells, no items, health or lives */
.pt-ring.ghost { border-color: #bfe8ff; background: radial-gradient(circle at 50% 60%, #1a2c3c, #04070d); animation: pt-drift 3.2s ease-in-out infinite;
  box-shadow: 0 0 0 3px rgba(5, 8, 14, 0.9), 0 0 0 4px rgba(191, 232, 255, 0.4), 0 0 26px rgba(143, 212, 255, 0.45), 0 8px 18px rgba(0, 0, 0, 0.75); }
.pt-ring.ghost .pt-art { filter: grayscale(1) sepia(0.2) hue-rotate(160deg) saturate(2.2) brightness(1.15) contrast(0.85); opacity: 0.62; mix-blend-mode: screen; }
.pt-mist { position: absolute; left: -30%; right: -30%; bottom: -12%; height: 55%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 60%, rgba(216, 242, 255, 0.55), rgba(191, 232, 255, 0.15) 45%, transparent 70%); filter: blur(4px); animation: pt-mist 5s ease-in-out infinite; }
.pt-mist.b { bottom: auto; top: -18%; height: 40%; opacity: 0.5; animation-duration: 7s; animation-direction: reverse; }
@keyframes pt-drift { 50% { transform: translateY(-3px); } }
@keyframes pt-mist { 0%, 100% { transform: translateX(-8%); } 50% { transform: translateX(8%); } }
.pt-spirit { position: absolute; left: 50%; bottom: -9px; z-index: 1; transform: translateX(-50%); padding: 1px 8px; border-radius: 8px; font: 800 10px Cinzel, serif; letter-spacing: 0.12em; text-transform: uppercase;
  color: #e6f6ff; background: linear-gradient(#1f3446, #0a121c); border: 1px solid rgba(191, 232, 255, 0.7); box-shadow: 0 0 10px rgba(143, 212, 255, 0.45); text-shadow: 0 0 6px #8fd4ff; }
.hud-ghost #h-portrait::before { border-left-color: rgba(191, 232, 255, 0.7); border-bottom-color: rgba(191, 232, 255, 0.7); }
.hud-ghost #h-portrait::after { background: #bfe8ff; box-shadow: 0 0 6px #8fd4ff; }
.hud-ghost .pt-badge { border-color: #bfe8ff; }
.ab.ghost { border-color: rgba(191, 232, 255, 0.8); background: radial-gradient(circle at 50% 40%, #1a2a3a, #070b12); box-shadow: 0 0 12px rgba(143, 212, 255, 0.25); }
.hud-ghost #h-inv, .hud-ghost #h-hp, .hud-ghost #h-lives, .hud-ghost #h-gust, .hud-ghost #h-xp, .hud-ghost #h-shopnear, .hud-ghost #h-taskprompt, .hud-ghost #h-shop { display: none !important; }
.pt-badge { position: absolute; left: -6px; bottom: -4px; z-index: 1; width: 30px; height: 30px; box-sizing: border-box; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 800 12px Cinzel, serif; color: #f3e6c4; background: radial-gradient(circle at 50% 35%, #2c261c, #0a0b10); border: 2px solid #e8c77a; box-shadow: 0 0 0 2px rgba(8, 7, 5, 0.9), 0 3px 8px rgba(0, 0, 0, 0.7); text-shadow: 0 1px 2px #000; }
#h-gust { position: absolute; left: -50px; bottom: 6px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; pointer-events: auto;
  background: radial-gradient(circle, #0a1418 58%, transparent 60%), conic-gradient(#46e6ff calc(var(--p, 0) * 360deg), rgba(70, 230, 255, 0.14) 0); box-shadow: 0 0 0 1px #000, 0 2px 6px #000; }
#h-gust svg { position: absolute; width: 20px; height: 20px; fill: none; stroke: #6d8a99; stroke-width: 2.2; stroke-linecap: round; opacity: 0.3; }
#h-gust b { position: relative; font: 900 14px Inter; color: #dff9ff; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
#h-gust.rush { box-shadow: 0 0 0 1px #000, 0 0 14px #46e6ff; animation: gustpulse 0.5s ease-in-out infinite alternate; }
#h-gust.rush svg { stroke: #bff6ff; opacity: 1; }
@keyframes gustpulse { to { box-shadow: 0 0 0 1px #000, 0 0 22px #46e6ff; } }
#h-right { display: flex; flex-direction: column; gap: 0; }
#h-lives { display: flex; gap: 6px; height: 27px; align-items: flex-end; padding: 0 0 4px 2px; }
#h-lives svg { width: 16px; height: 23px; filter: drop-shadow(0 0 4px rgba(255, 150, 40, 0.9)) drop-shadow(0 1px 1px #000); transition: opacity 0.3s, filter 0.3s; }
#h-lives svg.off { opacity: 0.35; filter: grayscale(1) drop-shadow(0 1px 1px #000); }
#h-lives svg.lost { animation: lifelost 0.7s ease-out; }
@keyframes lifelost { 0% { transform: scale(1.6); filter: brightness(3) drop-shadow(0 0 10px #ff9a3d); } }
#h-abilities { display: flex; gap: 10px; align-items: flex-end; padding-bottom: 20px; }
.ab { position: relative; width: 60px; height: 60px; box-sizing: border-box; border: 1px solid rgba(232, 199, 122, 0.85); border-radius: 4px; background: #0a0c14; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.7), 0 5px 12px rgba(0, 0, 0, 0.7); transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s; }
.ab:hover { transform: translateY(-2px); border-color: #ffe7a0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.7), 0 7px 14px rgba(0, 0, 0, 0.7), 0 0 14px rgba(255, 214, 107, 0.45); }
.ab[data-slot=R] { border-color: #ffd66b; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.7), 0 5px 12px rgba(0, 0, 0, 0.7), 0 0 12px rgba(255, 214, 107, 0.35); }
.ab[data-slot=D] { --c: #fff6a0 !important; width: 46px; height: 46px; margin-left: 4px; }
.ab-icon { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; border-radius: 3px; transition: filter 0.15s; }
.ab.cooling .ab-icon { filter: saturate(0.35) brightness(0.75); }
.ab-cd { position: absolute; inset: 0; border-radius: 3px; background: conic-gradient(transparent calc((1 - var(--cd, 0)) * 360deg), rgba(0, 0, 0, 0.72) 0); transform: scaleX(-1); display: none; }
.ab.cooling .ab-cd { display: block; }
.ab-cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 20px Inter; text-shadow: 0 0 4px #000; }
.ab-key { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font: 700 13px Cinzel, serif; color: #efe6cf; text-shadow: 0 1px 3px #000, 0 0 8px #000; pointer-events: none; }
.ab-ch { position: absolute; bottom: 2px; right: 4px; font: 800 12px Inter; color: #fff; text-shadow: 0 0 3px #000; }
.ab-name { display: none; }
/* ability ranks (shared/ranks.js): pips along the bottom edge; with an Empower point, a + on the top edge of each slot that can take it */
#h-abilities { position: relative; }
.ab-rank { position: absolute; left: 0; right: 0; bottom: -5px; display: flex; justify-content: center; gap: 4px; pointer-events: none; }
.ab-rank i { width: 9px; height: 9px; transform: rotate(45deg); background: #10131d; border: 1px solid rgba(232, 199, 122, 0.55); box-shadow: 0 0 3px #000; }
.ab-rank i.on { background: linear-gradient(135deg, #fff2c0, #ffc14d); border-color: #fff2c0; box-shadow: 0 0 6px rgba(255, 193, 77, 0.9); }
.ab-up { display: none; position: absolute; left: 50%; top: -14px; z-index: 2; transform: translateX(-50%); width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid #fff2c0;
  background: radial-gradient(circle at 40% 35%, #ffe9a8, #e0a030 70%); color: #2a1a00; font: 900 18px/20px Inter; cursor: pointer; box-shadow: 0 0 10px rgba(255, 200, 80, 0.8), 0 2px 4px #000; animation: abup 1.1s ease-in-out infinite; }
.ab.can-up .ab-up { display: block; }
.ab.can-up { border-color: #ffe7a0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.7), 0 5px 12px rgba(0, 0, 0, 0.7), 0 0 16px rgba(255, 214, 107, 0.6); }
.ab-up:hover { filter: brightness(1.15); }
@keyframes abup { 50% { transform: translateX(-50%) translateY(-3px); box-shadow: 0 0 16px rgba(255, 210, 100, 1), 0 2px 4px #000; } }
.ab.ranked { animation: abranked 0.7s ease-out; }
@keyframes abranked { 0% { transform: scale(1.18); filter: brightness(2.2); } }
#h-emp { position: absolute; left: 50%; top: -60px; transform: translateX(-50%); white-space: nowrap; font: 700 13px Cinzel, serif; letter-spacing: 0.12em; color: #ffe7a0;
  text-shadow: 0 0 8px rgba(255, 190, 70, 0.9), 0 1px 2px #000; pointer-events: none; }
#h-emp span { margin-left: 8px; font: 600 11px Inter; letter-spacing: 0.02em; color: #efe6cf; opacity: 0.85; }
#h-emp b { color: #fff; }
.tip-ranks { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 12px; }
.tip-ranks div { color: var(--dim); opacity: 0.7; } .tip-ranks div em { font-style: normal; font-weight: 800; display: inline-block; width: 26px; color: var(--dim); font-family: Cinzel, serif; }
.tip-ranks div.on { color: #ffe7a0; opacity: 1; } .tip-ranks div.on em { color: #ffc14d; }
.tip-ranks div.next { color: #efe6cf; opacity: 1; } .tip-ranks div.next em { color: #efe6cf; }
.tip-ranks .tip-rank-how { color: #ffc14d; opacity: 1; font-weight: 700; margin-top: 3px; }
.ab.locked .ab-icon { filter: grayscale(1) brightness(0.45); } .ab.locked { border-color: rgba(140, 147, 163, 0.5); }
#h-tip { position: fixed; transform: translate(-50%, -100%); width: 280px; background: rgba(6, 9, 18, 0.96); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; font-size: 13px; line-height: 1.45; pointer-events: none; z-index: 20; }
#h-tip b { color: var(--gold); font-size: 15px; } .tip-key { color: var(--dim); } .tip-cd { color: var(--dim); font-size: 12px; margin: 2px 0 6px; }
.tip-more { color: var(--dim); font-size: 11px; margin-top: 6px; opacity: 0.7; }
#h-tip.extended { width: 340px; }
/* the omen card: opens below the icon under the clock */
#h-tip.below { transform: translate(-50%, 0); }
#h-tip.omen { width: 300px; }
#h-tip .tip-om-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
#h-tip .tip-om-emb { width: 44px; height: 44px; font-size: 26px; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c, #b9a6ff) 55%, transparent)); }
#h-tip .tip-om-head .tip-cd { margin: 0; } #h-tip .tip-om-head em { color: #fff; font-style: normal; font-weight: 700; }
#h-tip .tip-om-quote { font-style: italic; color: #cdbdff; margin-bottom: 6px; }
#h-tip .tip-om-rules { margin: 6px 0 0; padding-left: 16px; color: #d6d9e2; font-size: 12px; }
#h-tip .tip-om-rules li { margin: 2px 0; }
.tip-x-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.tip-x-icon { width: 44px; height: 44px; border-radius: 6px; border: 1px solid var(--line); flex: none; display: flex; align-items: center; justify-content: center; }
.tip-x-head .tip-cd { margin: 2px 0 0; }
.tip-x-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; padding: 7px 0; margin-bottom: 7px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12px; }
.tip-x-stats div { display: flex; justify-content: space-between; gap: 8px; }
.tip-x-stats span { color: var(--dim); } .tip-x-stats em { font-style: normal; font-weight: 700; text-align: right; }
/* numbers changed by items or the Moon stage: the live value, the kit's base struck through, and where the change came from */
#h-tip .tip-mod { color: #7ee89a; font-weight: 700; } #h-tip .tip-base { color: var(--dim); font-weight: 400; opacity: 0.75; }
.tip-src { color: #7ee89a; font-size: 11px; margin-top: 6px; opacity: 0.85; }
.tip-lock { color: #ff9a7a; font-size: 12px; margin: 2px 0 4px; }

#h-chat { position: absolute; left: 10px; bottom: 12px; width: 360px; display: flex; flex-direction: column; gap: 4px; }
#h-chatlog { max-height: 160px; overflow-y: auto; font-size: 13px; display: flex; flex-direction: column; gap: 2px; text-shadow: 0 1px 3px #000; pointer-events: none; }
.cl { background: rgba(0, 0, 0, 0.35); padding: 2px 6px; border-radius: 3px; width: fit-content; max-width: 100%; }
.cl.sys { color: var(--gold); } .ct { color: var(--dim); }
#h-chatin { font-size: 13px; padding: 6px 9px; background: rgba(0, 0, 0, 0.5); opacity: 0.5; }
#h-chatin:focus { opacity: 1; }
#h-minimap { position: absolute; right: 12px; bottom: 14px; width: 300px; height: 300px; border: 1px solid rgba(232, 199, 122, 0.7); border-radius: 8px; cursor: crosshair; background: #080c0b;
  box-shadow: 0 0 0 3px rgba(8, 10, 14, 0.92), 0 0 0 4px rgba(184, 146, 74, 0.45), 0 10px 28px rgba(0, 0, 0, 0.7), 0 0 18px rgba(232, 199, 122, 0.12); }
#h-hint { position: absolute; right: 10px; font-size: 11px; color: var(--dim); text-shadow: 0 1px 3px #000; pointer-events: none; max-width: 300px; text-align: right; }

#h-score { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(6, 9, 18, 0.95); border: 1px solid var(--line); border-radius: 8px; padding: 18px 22px; min-width: 620px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--dim); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 8px; }
td { padding: 5px 8px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
tr.me td { background: rgba(232, 199, 122, 0.1); }
tr.sep td { font: 800 11px Cinzel, serif; letter-spacing: 0.15em; border: none; padding-top: 12px; }
tr.sep.hider td { color: var(--hider); } tr.sep.seeker td { color: var(--seeker); }


@keyframes pulse { 50% { opacity: 0.55; } }
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } }
@keyframes pop { from { transform: scale(0.85); opacity: 0; } }

#perf { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 30; background: rgba(0, 0, 0, 0.8); border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px; font: 12px/1.5 ui-monospace, Consolas, monospace; pointer-events: none; white-space: nowrap; }

/* own HP bar, damage vignette, cooldown glint */
#h-cast { position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%); width: 220px; height: 14px; background: #07090e; border: 1px solid #000; border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(232,199,122,0.35); pointer-events: none; }
#h-cast .cast-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#ffe7a0, #c8962e); }
#h-cast span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 10px Inter; text-shadow: 0 1px 2px #000; }
#h-hp { position: relative; height: 14px; background: linear-gradient(#040509, #151922); border: 1px solid #000; border-radius: 2px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(232,199,122,0.3), 0 0 0 1px rgba(232,199,122,0.55), 0 4px 10px rgba(0,0,0,0.7); }
#h-hp .hp-fill, #h-hp .hp-trail { position: absolute; left: 0; top: 0; bottom: 0; }
#h-hp .hp-fill { background: linear-gradient(#b8ff86, #62d12f 45%, #2e8c16); transition: width 0.15s; }
#h-hp.low .hp-fill { background: linear-gradient(#ffa27a, #e8452c 45%, #8e1a14); }
#h-hp.low .hp-fill::after { animation: hplow 0.8s ease-in-out infinite; }
#h-hp.seeker .hp-fill, #h-hp.seeker-hp .hp-fill { background: linear-gradient(#ffac7a, #c9382c 45%, #6e1418); }
#h-hp.safe .hp-fill { background: linear-gradient(#d6c7ff, #8a78c9 45%, #4b3f7a); }
#h-hp .hp-shield { position: absolute; top: 0; bottom: 0; background: linear-gradient(#ffffff, #d7dbe4 45%, #9ca3b3); transition: left 0.15s, width 0.15s; }
#h-hp .hp-ticks { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(0,0,0,0.7) 1px, transparent 1px); background-repeat: repeat-x; }
#h-hp span { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; font: 800 10px Inter; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
#h-hurt { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle, transparent 55%, rgba(200, 0, 20, 0.45)); }
#h-hurt.on { animation: hurt 0.45s ease-out; }
@keyframes hurt { 0% { opacity: 1; } 100% { opacity: 0; } }
.ab.glint::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.75) 50%, transparent 70%); background-size: 250% 100%; animation: glint 0.6s ease-out; }
@keyframes glint { from { background-position: 150% 0; } to { background-position: -100% 0; } }

/* server picker */
.srv { display: flex; gap: 0; }
.srv .seg { flex: 1; font: 700 12px Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; padding: 9px; cursor: pointer; color: #8c93a3;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(14, 16, 24, 0.55)); border: 1px solid rgba(232, 199, 122, 0.26); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5); transition: color 0.15s, background 0.15s, box-shadow 0.15s; }
.srv .seg:hover { color: #d8d2c0; }
.srv .seg:first-child { border-radius: 3px 0 0 3px; } .srv .seg:last-child { border-radius: 0 3px 3px 0; } .srv .seg + .seg { border-left: none; }
.srv .seg.on { color: #fff1c9; text-shadow: 0 0 10px rgba(232, 199, 122, 0.6); border-color: rgba(232, 199, 122, 0.6);
  background: radial-gradient(90% 90% at 50% 100%, rgba(232, 199, 122, 0.32), transparent 75%), linear-gradient(180deg, rgba(60, 48, 26, 0.7), rgba(24, 20, 12, 0.8));
  box-shadow: inset 0 1px 0 rgba(255, 241, 196, 0.2), inset 0 -2px 0 var(--gold); }
.srv .seg.on + .seg { border-left: none; }
.srv-addr input { text-transform: none !important; letter-spacing: normal !important; font-weight: 500 !important; text-align: left !important; }
.srv-status { font-size: 12px; color: var(--dim); min-height: 16px; line-height: 1.4; }
.srv-status.ok { color: #8fe38a; } .srv-status.bad { color: #ff8a8a; }
.srv-status b { color: var(--gold); user-select: text; }

/* update banner */
.update { font-size: 12px; text-align: center; min-height: 14px; }
.update.on { background: rgba(95, 255, 224, 0.1); border: 1px solid rgba(95, 255, 224, 0.4); color: #9ff5e4; padding: 8px 10px; border-radius: 4px; font-weight: 600; }
.update .btn.small { margin: 0 0 0 8px; padding: 4px 10px; }
#m-sync.on { margin-bottom: 6px; }
#m-sync .dim { font-weight: 400; margin-top: 4px; }
.upd-bar { height: 4px; margin-top: 6px; background: rgba(0, 0, 0, 0.4); border-radius: 2px; overflow: hidden; }
.upd-bar i { display: block; height: 100%; background: #5fffe0; transition: width 0.4s linear; }

/* ---------- options panel ---------- */
#opts { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); pointer-events: auto; }
.opts-card { width: min(500px, 92vw); background: rgba(6, 9, 18, 0.97); border: 1px solid var(--line); border-radius: 8px; padding: 18px 22px; animation: pop 0.2s; display: flex; flex-direction: column; gap: 12px; }
.opts-card h2 { font-family: Cinzel, serif; color: var(--gold); margin: 0 0 4px; }
.opt { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.opt > span { flex: 1; } .opt small { display: block; color: var(--dim); font-size: 11px; }
.opt input[type=range] { width: 150px; padding: 0; accent-color: var(--gold); background: none; border: none; }
.opt input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--gold); }
.opt b { width: 40px; text-align: right; color: var(--gold); font-size: 13px; }
.opt .srv { width: 210px; } .opt .seg { padding: 6px; font-size: 12px; }
.opts-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .opts-foot .btn.small { margin: 0; white-space: nowrap; }
#o-leave { margin-right: auto; color: #ff9a8a; border-color: rgba(255, 110, 90, 0.45); }
#o-leave:hover, #o-leave.armed { color: #fff; border-color: #ff6e5a; background: rgba(160, 40, 30, 0.45); }
.opts-card > .dim { font-size: 11px; text-align: right; }
#settings-btn { position: fixed; top: 10px; right: 10px; z-index: 35; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(6, 9, 18, 0.82); border: 1px solid rgba(232, 199, 122, 0.45); border-radius: 6px; color: #d8c08a; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); transition: color 0.15s, border-color 0.15s, box-shadow 0.15s; }
#settings-btn svg { width: 22px; height: 22px; fill: currentColor; transition: transform 0.4s; }
#settings-btn:hover, #settings-btn.on { color: #fff1c9; border-color: rgba(232, 199, 122, 0.9); box-shadow: 0 0 14px rgba(232, 199, 122, 0.35); }
#settings-btn:hover svg { transform: rotate(60deg); }
.opts-body { display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 190px); overflow-y: auto; margin-right: -10px; padding-right: 10px; }
.opts-body h3 { margin: 10px 0 2px; font: 600 12px Cinzel, serif; letter-spacing: 0.18em; text-transform: uppercase; color: #c9ad6c; display: flex; align-items: baseline; gap: 10px; }
.opts-body h3:first-child { margin-top: 0; }
.opts-body h3::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(232, 199, 122, 0.35), transparent); }
.opts-body h3 small { font: 400 10px Inter, sans-serif; letter-spacing: 0.04em; text-transform: none; color: var(--dim); }

/* ---------- control loss: own CC bar, screen treatment, denied input ---------- */
#h-ccbar { position: absolute; bottom: calc(100% + 38px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
#h-ccbar .cc-main { position: relative; width: 240px; height: 22px; background: #07090e; border: 1px solid #000; border-radius: 3px; overflow: hidden; box-shadow: 0 0 14px var(--cc-glow, transparent); animation: pop 0.15s; }
#h-ccbar .cc-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--cc-col, #ffb040); opacity: 0.85; }
#h-ccbar .cc-main span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font: 900 12px Inter; letter-spacing: 0.14em; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
#h-ccbar .cc-main.soft { width: 170px; height: 16px; } #h-ccbar .cc-main.soft span { font-size: 10px; }
#h-ccbar .cc-chips { display: flex; gap: 4px; }
#h-ccbar .cc-chips i { font: 800 9px Inter; font-style: normal; letter-spacing: 0.1em; padding: 1px 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.7); color: var(--cc-col); border: 1px solid currentColor; }
#h-ccbar.denied .cc-main { animation: denied 0.25s; }
@keyframes denied { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.ab.denied { animation: denied 0.25s; }
.ab.silenced::before { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(135deg, transparent 46%, #ff5a8a 46%, #ff5a8a 54%, transparent 54%), rgba(60, 0, 30, 0.55); }

#h-cc { position: absolute; inset: 0; pointer-events: none; }
#h-cc > div { position: absolute; inset: 0; opacity: 0; transition: opacity 0.15s; }
/* dimmed, drained edges: plain gradients (a backdrop-filter re-filtered the whole game view every frame, ~2x frame time) */
#h-cc .stun { background: radial-gradient(ellipse, transparent 50%, rgba(255, 200, 80, 0.16)), radial-gradient(ellipse, transparent 38%, rgba(34, 34, 40, 0.3) 62%, rgba(18, 18, 22, 0.62) 100%); }
#h-cc .root { background: linear-gradient(to top, rgba(70, 220, 255, 0.35), transparent 22%), radial-gradient(ellipse at 50% 100%, rgba(70, 220, 255, 0.2), transparent 45%); }
#h-cc .fear { background: radial-gradient(ellipse, transparent 45%, rgba(110, 20, 160, 0.55)); }
#h-cc .fear.on { animation: fearpulse 0.7s ease-in-out infinite; }
#h-cc .silence { background: radial-gradient(ellipse, transparent 60%, rgba(255, 60, 130, 0.22)); }
#h-cc .stasis { background: radial-gradient(ellipse, rgba(255, 230, 150, 0.08), rgba(255, 210, 110, 0.3)); }
#h-cc > div.on { opacity: 1; }
@keyframes fearpulse { 50% { opacity: 0.55; } }
body.reduce-flash #h-cc > div.on { opacity: 0.4; }
body.reduce-flash #h-cc .fear.on { animation: none; }
body.reduce-flash #h-hurt.on { animation-name: hurt-soft; }
@keyframes hurt-soft { 0% { opacity: 0.35; } 100% { opacity: 0; } }
canvas#game.cur-attack.disarmed { cursor: url('assets/ui/cursors/attack-off.png') 1 1, not-allowed; cursor: -webkit-image-set(url('assets/ui/cursors/attack-off.png') 1x, url('assets/ui/cursors/attack-off@2x.png') 2x) 1 1, not-allowed; }

/* ---------- audio controls (options panel, sound lab) ---------- */
.audio-set { display: flex; flex-direction: column; gap: 2px; }
.audio-set .av { display: flex; align-items: center; gap: 12px; font-size: 14px; padding: 3px 0; }
.audio-set .av > span { flex: 1; } .audio-set .av small { display: block; color: var(--dim); font-size: 11px; }
.audio-set .av:first-child > span { color: #f1d488; font-weight: 600; }
.audio-set input[type=range] { width: 150px; padding: 0; accent-color: var(--gold); background: none; border: none; }
.audio-set .av b { width: 40px; text-align: right; color: var(--gold); font-size: 13px; font-variant-numeric: tabular-nums; }
.audio-set.muted .av { opacity: 0.45; }
.audio-set .av-toggles { display: flex; gap: 8px; margin-top: 6px; }
.audio-set .av-toggles .seg { flex: 1; padding: 6px 8px; font-size: 12px; background: rgba(0,0,0,0.4); border: 1px solid var(--line); border-radius: 4px; color: var(--dim); cursor: pointer; }
.audio-set .av-toggles .seg.on { color: #fff1c9; border-color: rgba(232, 199, 122, 0.6); background: rgba(232, 199, 122, 0.12); }
.audio-set .av-toggles .mute.on { color: #ffb0a8; background: rgba(255,77,90,0.15); border-color: var(--seeker); }

/* Champion-colored ability artwork, shared with the in-game bar. */
.si-ab-icon { width: 44px; height: 44px; flex: 0 0 44px; object-fit: cover; border: 1px solid var(--c); border-radius: 4px; background: #0a0c14; }

.ability-icon-fallback { display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--c, #fff6a0); text-shadow: 0 0 10px currentColor; }

/* ---------- menu backdrop before the first match (the live arena is only built at match loading) ---------- */
body.no-arena::before {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: url('assets/ui/menu-backdrop.jpg') center / cover no-repeat;
  animation: backdrop-drift 60s ease-in-out infinite alternate;
}
@keyframes backdrop-drift { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.1) translate(-1.5%, -1%); } }

/* ---------- match loading screen ---------- */
#loadscreen {
  position: fixed; inset: 0; z-index: 40; pointer-events: auto; display: flex; flex-direction: column; justify-content: safe center;
  gap: 1.4vh; padding: 2vh 4vw; overflow-y: auto; scrollbar-width: none; background: #05070d; transition: opacity 0.5s;
}
#loadscreen.out { opacity: 0; }
#loadscreen .ls-bg { position: absolute; inset: 0; background: url('assets/ui/menu-backdrop.jpg') center / cover; filter: blur(6px) brightness(0.35) saturate(0.9); transform: scale(1.05); }
#loadscreen > :not(.ls-bg) { position: relative; }
.ls-head { text-align: center; }
.ls-map { font: 800 clamp(26px, 3.2vw, 44px) Cinzel, serif; letter-spacing: 0.14em; color: var(--gold); text-shadow: 0 0 24px rgba(232, 199, 122, 0.35); }
.ls-mode { color: var(--dim); letter-spacing: 0.12em; text-transform: uppercase; font-size: 13px; margin-top: 4px; }
.ls-omen { margin-left: 18px; padding-left: 18px; border-left: 1px solid rgba(157, 138, 216, 0.4); text-transform: none; font: italic 600 14px Inter; color: #cdbdff; text-shadow: 0 0 14px rgba(150, 110, 255, 0.55), 0 1px 3px #000; letter-spacing: 0.04em; animation: omen-breathe-text 3.6s ease-in-out infinite; }
.ls-omen span { font: 800 10px Cinzel, serif; font-style: normal; letter-spacing: 0.22em; text-transform: uppercase; color: #9d8ad8; margin-right: 8px; }
.ls-omen .om-emb { width: 30px; height: 30px; font-size: 18px; margin: -8px 8px -8px 0; vertical-align: middle; filter: drop-shadow(0 0 8px rgba(160, 120, 255, 0.6)); animation: omen-bob 3.6s ease-in-out infinite; }
@keyframes omen-breathe-text { 50% { text-shadow: 0 0 22px rgba(170, 130, 255, 0.85), 0 1px 3px #000; } }
.ls-team { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ls-label { font: 800 14px Cinzel, serif; letter-spacing: 0.3em; }
.ls-team.hider .ls-label { color: var(--hider); } .ls-team.seeker .ls-label { color: var(--seeker); }
.ls-cards { display: flex; justify-content: center; gap: clamp(8px, 1vw, 16px); width: 100%; }
.ls-card {
  position: relative; width: min(190px, calc((92vw - 16px * 8) / 8)); aspect-ratio: 2 / 3; max-height: 23vh;
  border-radius: 6px; overflow: hidden; background: #0b0e16; border: 2px solid color-mix(in srgb, var(--c) 45%, #1a1d26);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); animation: ls-in 0.5s both;
}
.ls-team.seeker .ls-card { border-color: color-mix(in srgb, var(--seeker) 40%, #1a1d26); }
.ls-team.hider .ls-card { border-color: color-mix(in srgb, var(--hider) 40%, #1a1d26); }
.ls-card.me { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 26px rgba(232, 199, 122, 0.35), 0 10px 30px rgba(0, 0, 0, 0.6); }
.ls-card:nth-child(2) { animation-delay: 0.05s; } .ls-card:nth-child(3) { animation-delay: 0.1s; } .ls-card:nth-child(4) { animation-delay: 0.15s; }
.ls-card:nth-child(5) { animation-delay: 0.2s; } .ls-card:nth-child(6) { animation-delay: 0.25s; } .ls-card:nth-child(7) { animation-delay: 0.3s; } .ls-card:nth-child(8) { animation-delay: 0.35s; }
#loadscreen.wait .ls-card { animation-play-state: paused; }
@keyframes ls-in { from { opacity: 0; transform: translateY(14px); } }
.ls-art { position: absolute; inset: 0; background-size: cover; background-position: center 18%; transition: filter 0.4s; filter: saturate(0.7) brightness(0.8); }
.ls-card.ready .ls-art, .ls-card.me .ls-art { filter: none; }
.ls-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 45%, rgba(5, 7, 13, 0.92) 82%); }
.ls-info { position: absolute; left: 0; right: 0; bottom: 22px; padding: 0 10px; text-align: center; }
.ls-champ { font: 800 clamp(13px, 1.1vw, 17px) Cinzel, serif; letter-spacing: 0.05em; text-shadow: 0 2px 6px #000; }
.ls-title { font-size: 11px; color: #c6c9d2; font-style: italic; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-player { font: 700 12px Inter; color: var(--gold); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-card.bot .ls-player { color: var(--dim); }
.ls-bar { position: absolute; left: 10px; right: 10px; bottom: 9px; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; overflow: hidden; }
.ls-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold2), var(--gold)); transition: width 0.25s; }
.ls-card.ready .ls-fill { background: linear-gradient(90deg, #3fae6a, #8fe38a); }
.ls-pct { position: absolute; top: 8px; right: 8px; font: 800 11px Inter; padding: 2px 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.55); color: #fff; }
.ls-card.ready .ls-pct { color: #8fe38a; }
.ls-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 0.5vh; }
.ls-step { font: 700 13px Inter; color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase; }
.ls-tip { color: #c6c9d2; font-size: 13px; max-width: 760px; text-align: center; }
.ls-tip::before { content: 'TIP  '; color: var(--dim); font-weight: 800; letter-spacing: 0.1em; }

/* ---------- codex (F1) ---------- */
.menu-links { display: flex; gap: 8px; } .menu-links .btn { flex: 1; white-space: nowrap; padding-left: 8px; padding-right: 8px; } .menu-links small { opacity: 0.6; font-size: 10px; margin-left: 4px; }
.menu-quit { display: block; margin: 8px auto 0; padding-left: 22px; padding-right: 22px; }
#codex { color-scheme: dark; position: fixed; inset: 0; z-index: 41; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); pointer-events: auto; }
.cx-card { width: min(1240px, 96vw); height: min(900px, 94vh); display: flex; flex-direction: column; background: rgba(6, 9, 18, 0.98); border: 1px solid var(--line); border-radius: 8px; animation: pop 0.2s; overflow: hidden; user-select: text; }
.cx-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 14px 20px; border-bottom: 1px solid rgba(232,199,122,0.18); }
.cx-head h2 { font-family: Cinzel, serif; color: var(--gold); margin: 0 auto 0 0; font-size: 24px; letter-spacing: 0.04em; }
.cx-head .btn.small { margin: 0; }
.cx-ctl { display: flex; align-items: center; gap: 8px; } .cx-ctl > span { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.cx-ctl .srv { display: flex; } .cx-ctl .seg { flex: none; padding: 6px 12px; font-size: 12px; }
.cx-ctl .seg + .seg { border-left: none; } .cx-ctl .seg:not(:first-child):not(:last-child) { border-radius: 0; }
.cx-main { flex: 1; display: flex; min-height: 0; }
.cx-nav { width: 200px; flex: none; overflow-y: auto; padding: 12px 10px; border-right: 1px solid rgba(232,199,122,0.12); display: flex; flex-direction: column; gap: 14px; }
.cx-navgroup { display: flex; flex-direction: column; gap: 3px; }
.cx-navgroup h3 { margin: 0 0 4px 6px; font: 600 11px Cinzel, serif; letter-spacing: 0.14em; text-transform: uppercase; }
.cx-navgroup.hider h3 { color: var(--hider); } .cx-navgroup.seeker h3 { color: var(--seeker); }
.cx-navitem { display: flex; align-items: center; gap: 9px; padding: 4px 6px; background: none; border: 1px solid transparent; border-radius: 6px; color: var(--text); font: 500 13px Inter, sans-serif; text-align: left; cursor: pointer; }
.cx-navitem:hover { background: rgba(255,255,255,0.04); border-color: var(--c); }
.cx-navitem.off { opacity: 0.35; }
.cx-navitem img { width: 34px; height: 34px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); }
.cx-scroll { flex: 1; overflow-y: auto; padding: 16px 20px 28px; display: flex; flex-direction: column; gap: 18px; font-size: 14px; line-height: 1.5; }
.cx-foot { padding: 8px 20px; font-size: 11px; border-top: 1px solid rgba(232,199,122,0.12); }

.cx-rules { border: 1px solid rgba(232,199,122,0.2); border-radius: 8px; background: rgba(18,24,40,0.7); flex: none; }
.cx-rules summary { cursor: pointer; padding: 10px 14px; font: 600 14px Cinzel, serif; color: var(--gold); }
.cx-rulegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.06); border-top: 1px solid rgba(255,255,255,0.06); }
.cx-rulegrid > div { background: #0e1322; padding: 12px 14px; } .cx-rulegrid p { font-size: 12px; margin: 8px 0 0; }
.cx-rulegrid h4 { margin: 0 0 8px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.cx-kv { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; margin: 0; font-size: 13px; } .cx-kv dt { color: var(--dim); } .cx-kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.cx-mini { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.cx-mini th, .cx-mini td { padding: 2px 0; text-align: right; } .cx-mini td:first-child { text-align: left; color: var(--dim); }
.cx-mini th { font: 600 11px Cinzel, serif; color: var(--gold2); } .cx-mini tr.on td { color: var(--gold); }

.cx-champ { --c: #fff; display: grid; grid-template-columns: 220px 1fr; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; background: #0f1423; overflow: hidden; flex: none; }
.cx-art { position: relative; background: #000; }
.cx-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.cx-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, #0f1423); }
.cx-body { padding: 18px 20px 16px 12px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cx-tag { display: flex; gap: 8px; align-items: center; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.cx-pill { padding: 2px 8px; border: 1px solid currentColor; border-radius: 99px; font-weight: 700; } .cx-pill.hider { color: var(--hider); } .cx-pill.seeker { color: var(--seeker); }
.cx-name { margin: 0; font: 800 26px/1.1 Cinzel, serif; } .cx-name em { font: 600 15px Cinzel, serif; font-style: normal; color: var(--c); }
.cx-blurb { margin: 0; color: var(--dim); font-style: italic; font-size: 13px; max-width: 72ch; }
.cx-stats { display: flex; flex-wrap: wrap; gap: 1px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.07); border-radius: 7px; overflow: hidden; }
.cx-stat { flex: 1 1 110px; background: #151b2d; padding: 7px 12px; display: flex; flex-direction: column; }
.cx-stat span { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #5d6477; }
.cx-stat b { font-size: 17px; font-variant-numeric: tabular-nums; } .cx-stat i { font-style: normal; font-size: 11px; color: var(--dim); }
.cx-ab { display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 11px 0 4px; border-top: 1px solid rgba(255,255,255,0.07); }
.cx-ab.has-clip { grid-template-columns: 52px 1fr 224px; padding-bottom: 11px; }
.cx-clip { position: relative; width: 224px; aspect-ratio: 16 / 9; align-self: start; border-radius: 7px; overflow: hidden; background: #05070c; border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); transition: border-color 0.15s; }
.cx-clip video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cx-clip::after { content: '▶'; position: absolute; left: 7px; bottom: 6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 9px; padding-left: 2px; box-sizing: border-box; color: #fff; background: rgba(0,0,0,0.55); transition: opacity 0.15s; }
.cx-ab.playing .cx-clip { border-color: color-mix(in srgb, var(--c) 70%, transparent); }
.cx-ab.playing .cx-clip::after { opacity: 0; }
@media (max-width: 1100px) { .cx-ab.has-clip { grid-template-columns: 52px 1fr 168px; } .cx-clip { width: 168px; } }
.cx-ico { position: relative; width: 52px; height: 52px; }
.cx-icoimg { width: 52px; height: 52px; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); display: grid; place-items: center; font-size: 26px; background: #05070c; }
.cx-key { position: absolute; right: -6px; bottom: -6px; min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 4px; font: 700 11px Inter, sans-serif; background: #05070d; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); }
.cx-abtop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cx-abtop h4 { margin: 0; font: 600 15px Cinzel, serif; }
.cx-kind { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #5d6477; }
.cx-lock { font-size: 11px; color: var(--seeker); border: 1px solid rgba(255,77,90,0.5); border-radius: 4px; padding: 0 6px; }
.cx-desc { margin: 2px 0 7px; }
.cx-nums { display: flex; flex-wrap: wrap; gap: 5px; }
.cx-n { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 8px; border-radius: 5px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08); font-size: 12px; }
.cx-n > span { color: #5d6477; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.cx-n b { font-variant-numeric: tabular-nums; } .cx-n sub { color: var(--gold2); font-size: 10px; vertical-align: baseline; }
.cx-n.up { border-color: rgba(232,199,122,0.35); } .cx-n.up b { color: var(--gold); }
.cx-extra { list-style: none; margin: 7px 0 0; padding: 0; font-size: 12.5px; color: var(--dim); }
.cx-extra li::before { content: '›'; color: var(--c); margin-right: 7px; }

.cx-hint { margin: 0; font-size: 12px; }
.cx-table { border-collapse: collapse; width: 100%; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cx-table th, .cx-table td { padding: 6px 7px; text-align: right; border-bottom: 1px solid rgba(255,255,255,0.06); white-space: nowrap; }
.cx-table th { position: sticky; top: -16px; background: #121828; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); cursor: pointer; user-select: none; }
.cx-table th:hover { color: var(--text); } .cx-table th.asc, .cx-table th.desc { color: var(--gold); }
.cx-table th.asc::after { content: ' ▲'; font-size: 8px; } .cx-table th.desc::after { content: ' ▼'; font-size: 8px; }
.cx-table .l { text-align: left; } .cx-table td.l { white-space: normal; } .cx-table td.wide { color: var(--dim); }
.cx-table td.up { color: var(--gold); } .cx-table tbody tr:hover td { background: rgba(232,199,122,0.04); }
.cx-who { display: flex; align-items: center; gap: 8px; text-align: left; background: none; border: none; color: var(--text); font: inherit; cursor: pointer; padding: 0; }
.cx-who:hover { color: var(--c); } .cx-who img { width: 22px; height: 22px; border-radius: 4px; }
.cx-k { color: var(--c); font-weight: 700; }

/* lookout towers + Hermit status, under the shrines */
#h-sites { position: absolute; right: 12px; display: flex; gap: 4px; white-space: nowrap; pointer-events: auto; }
#h-sites .site { font-size: 9px; padding: 2px 6px; }
#h-sites:empty { display: none; }
.site { position: relative; font: 700 10px Inter; letter-spacing: 0.06em; text-transform: uppercase; color: #cfc6b4; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 3px 8px; cursor: help; overflow: hidden; }
.site.tower.hider { color: var(--hider); border-color: var(--hider); } .site.tower.seeker { color: var(--seeker); border-color: var(--seeker); }
.site.tower i, .site.crystal i { position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--p) * 100%); background: var(--c); }
.site.crystal { color: #8fe9ff; border-color: #4fb8e6; } .site.crystal.open { color: #dff8ff; box-shadow: 0 0 8px #3fc4ff88; animation: pulse 1s infinite; }
.site-wrap, .hermit-wrap { display: contents; }
.site.hermit { color: #ffc46a; } .site.hermit.mine { border-color: #ffc46a; } .site.hermit.theirs { color: #ff8a8a; border-color: var(--seeker); animation: pulse 1s infinite; }
#h-prompt { position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid #ffc46a; border-radius: 4px; padding: 6px 14px; font: 600 13px Inter; color: #e6e1d3; pointer-events: none; }
#h-prompt b { color: #ffc46a; } #h-prompt kbd { font: 800 11px Inter; background: #ffc46a; color: #1a1206; border-radius: 3px; padding: 1px 5px; margin-right: 4px; }

/* How to Play */
#guide { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); pointer-events: auto; }
.guide-card { width: min(620px, calc(100vw - 32px)); height: min(560px, 88vh); background: rgba(6, 9, 18, 0.97); border: 1px solid var(--line); border-radius: 8px; padding: 18px 22px; animation: pop 0.2s; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6); }
.g-head { display: flex; align-items: center; justify-content: space-between; }
.g-head h2 { font-family: Cinzel, serif; color: var(--gold); margin: 0; }
.g-x { background: none; border: none; color: var(--dim); font-size: 16px; cursor: pointer; padding: 4px 6px; } .g-x:hover { color: var(--gold); }
.g-tabs { display: flex; } .g-tabs .seg { flex: 1; padding: 7px 4px; font-size: 12px; }
.g-body { flex: 1; overflow-y: auto; font-size: 14px; line-height: 1.55; color: #d4d6dd; padding-right: 4px; }
.g-body p { margin: 0 0 10px; } .g-body b { color: #f1ead6; }
.g-body h3 { font: 700 13px Cinzel, serif; letter-spacing: 0.08em; color: var(--gold); margin: 14px 0 6px; }
.g-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.g-side { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-top: 3px solid; border-radius: 6px; padding: 10px 12px; font-size: 13px; }
.g-side h3 { margin: 0 0 6px; } .g-side p:last-child { margin: 0; }
.g-side.hider { border-top-color: var(--hider); } .g-side.hider h3 { color: var(--hider); }
.g-side.seeker { border-top-color: var(--seeker); } .g-side.seeker h3 { color: var(--seeker); }
.g-tiers { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.g-tiers li { display: flex; gap: 12px; align-items: baseline; background: rgba(232, 199, 122, 0.06); border-left: 2px solid var(--gold2); border-radius: 3px; padding: 6px 10px; font-size: 13px; }
.g-tiers li b { color: var(--gold); flex: none; width: 110px; font: 700 12px Cinzel, serif; }
.g-ctls { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.g-ctl { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(232, 199, 122, 0.1); font-size: 13px; }
.g-ctl span:first-child { flex: none; width: 100px; display: flex; gap: 3px; flex-wrap: wrap; }
.g-ctl kbd { display: inline-block; min-width: 20px; text-align: center; font: 700 11px Inter, sans-serif; color: var(--gold); background: rgba(232, 199, 122, 0.08); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 2px 6px; }
@media (max-width: 520px) { .g-sides, .g-ctls { grid-template-columns: 1fr; } .g-tabs .seg { font-size: 11px; } }
/* right-click targets: shops and the Hermit (cursor art: client/assets/ui/cursors, badges painted with Codex) */
canvas#game.cur-shop { cursor: url('assets/ui/cursors/shop.png') 1 1, pointer; cursor: -webkit-image-set(url('assets/ui/cursors/shop.png') 1x, url('assets/ui/cursors/shop@2x.png') 2x) 1 1, pointer; }
canvas#game.cur-bribe { cursor: url('assets/ui/cursors/bribe.png') 1 1, pointer; cursor: -webkit-image-set(url('assets/ui/cursors/bribe.png') 1x, url('assets/ui/cursors/bribe@2x.png') 2x) 1 1, pointer; }
#site-pop { position: fixed; z-index: 30; pointer-events: none; max-width: 260px; background: rgba(9, 13, 24, 0.94); border: 1px solid var(--line); border-radius: 4px; padding: 7px 10px; font: 12px/1.4 Inter; color: #d9d4c6; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; gap: 2px; }
#site-pop.hidden { display: none; }
#site-pop.hermit { border-color: #ffc46a; }
#site-pop b { font: 700 13px Cinzel, serif; color: var(--gold); } #site-pop.hermit b { color: #ffc46a; }
#site-pop em { font-style: normal; font-weight: 700; color: #8fe38a; font-size: 11px; letter-spacing: 0.04em; }
#site-pop i { font-style: normal; font-weight: 700; color: #ff8a8a; font-size: 11px; }

/* Soul cards: the hand dealt after a Sacrifice (hud.js renderBoons), big in the middle of the screen so it's a quick pick; the cards taken sit above the portrait */
#h-boons { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 28px 22px; pointer-events: auto;
  background: radial-gradient(closest-side, rgba(8, 2, 4, 0.55), transparent); }
#h-boons.hidden { display: none; }
#h-boons .bo-head { font: 800 22px Cinzel, serif; letter-spacing: 0.14em; color: #ff4d5c; text-transform: uppercase; text-shadow: 0 0 14px rgba(255, 30, 50, 0.55), 0 2px 0 #2a0008; }
#h-boons .bo-head span { margin-left: 12px; font: 600 14px Inter; letter-spacing: 0.06em; color: #d9c7c9; text-transform: none; text-shadow: 0 1px 3px #000; }
#h-boons .bo-hand { display: flex; gap: 18px; }
.bo-card { position: relative; width: 176px; height: 220px; padding: 16px 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer;
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--bc) 28%, transparent), transparent 70%), linear-gradient(#1c0d12, #0c0709);
  border: 1px solid color-mix(in srgb, var(--bc) 55%, #000); border-radius: 14px; box-shadow: 0 0 0 1px #000, 0 10px 24px rgba(0, 0, 0, 0.6), inset 0 0 18px rgba(0, 0, 0, 0.7);
  color: #eee; font: inherit; animation: bo-deal 0.38s cubic-bezier(0.2, 1.4, 0.4, 1) var(--d) both; transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s; }
.bo-card::before { content: ''; position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--bc) 30%, transparent); border-radius: 10px; pointer-events: none; }
.bo-card:hover { transform: translateY(-8px); box-shadow: 0 0 0 1px #000, 0 0 22px color-mix(in srgb, var(--bc) 60%, transparent), 0 14px 26px rgba(0, 0, 0, 0.6); }
.bo-icon { width: 64px; height: 64px; display: grid; place-items: center; font-size: 34px; border-radius: 50%; background: radial-gradient(color-mix(in srgb, var(--bc) 45%, #000), #0a0507 70%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bc) 60%, #000), 0 0 14px color-mix(in srgb, var(--bc) 40%, transparent); }
.bo-name { font: 800 17px Cinzel, serif; color: var(--bc); text-align: center; line-height: 1.1; text-shadow: 0 1px 2px #000; }
.bo-text { font: 600 13.5px Inter; color: #e9dfe0; text-align: center; line-height: 1.25; }
.bo-pips { margin-top: auto; display: flex; gap: 6px; }
.bo-pips i { width: 12px; height: 12px; transform: rotate(45deg); border: 1px solid color-mix(in srgb, var(--bc) 60%, #000); background: #0a0507; }
.bo-pips i.on { background: var(--bc); }
.bo-pips i.new { background: color-mix(in srgb, var(--bc) 35%, #0a0507); animation: bo-pip 0.8s ease-in-out infinite alternate; }
#h-boons.picked .bo-card:not(.chosen) { opacity: 0.25; transform: scale(0.94); }
#h-boons.picked .bo-card.chosen { transform: translateY(-10px) scale(1.05); box-shadow: 0 0 0 1px #000, 0 0 30px var(--bc); }
@keyframes bo-deal { from { opacity: 0; transform: translateY(40px) rotate(-6deg) scale(0.85); } }
@keyframes bo-pip { to { background: var(--bc); } }
#h-deck { position: absolute; left: 0; bottom: calc(100% + 4px); display: flex; gap: 3px; pointer-events: auto; }
#h-deck i { position: relative; width: 22px; height: 22px; display: grid; place-items: center; font-size: 12px; font-style: normal; border-radius: 5px; background: #120a0d; box-shadow: 0 0 0 1px color-mix(in srgb, var(--bc) 60%, #000); }
#h-deck i b { position: absolute; right: -3px; bottom: -4px; font: 900 9px Inter; color: #fff; text-shadow: 0 0 3px #000, 0 1px 1px #000; }

/* ---------- ornate panel frame: menu, lobby, champion select, options, How to Play, codex ----------
   Dark lacquer with a gold hairline border, filigree corners with a set crystal (assets/ui/frame), an inner
   engraved line, and a crystal crest on the top edge (not on the codex, which clips its overflow). */
:is(.menu-card, .lobby-card, .sel-wrap, .opts-card, .guide-card, .cx-card) {
  position: relative; border: 1px solid rgba(232, 199, 122, 0.4); border-radius: 2px;
  background:
    url('assets/ui/frame/tl.svg') left top / 64px no-repeat border-box, url('assets/ui/frame/tr.svg') right top / 64px no-repeat border-box,
    url('assets/ui/frame/bl.svg') left bottom / 64px no-repeat border-box, url('assets/ui/frame/br.svg') right bottom / 64px no-repeat border-box,
    radial-gradient(110% 45% at 50% 0%, rgba(232, 199, 122, 0.08), transparent 70%),
    radial-gradient(90% 60% at 50% 110%, rgba(77, 150, 216, 0.06), transparent 70%),
    linear-gradient(180deg, rgba(15, 18, 28, 0.95), rgba(7, 9, 15, 0.97));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85), 0 0 0 5px rgba(5, 7, 12, 0.55), 0 30px 90px rgba(0, 0, 0, 0.7), 0 0 60px rgba(232, 199, 122, 0.06), inset 0 1px 0 rgba(255, 241, 196, 0.07);
}
:is(.menu-card, .lobby-card, .sel-wrap, .opts-card, .guide-card, .cx-card)::before {
  content: ''; position: absolute; inset: 7px; pointer-events: none; border: 1px solid rgba(232, 199, 122, 0.13); border-radius: 1px;
}
.cx-foot { padding: 10px 56px 12px; }
:is(.menu-card, .lobby-card, .sel-wrap, .opts-card, .guide-card)::after {
  content: ''; position: absolute; left: 50%; top: -15px; width: 220px; height: 30px; margin-left: -110px; pointer-events: none;
  background: url('assets/ui/frame/crest.svg') center / contain no-repeat; filter: drop-shadow(0 0 8px rgba(111, 224, 251, 0.35));
}
.lobby-card > *, .sel-wrap > *, .opts-card > *, .guide-card > *, .cx-card > * { position: relative; z-index: 1; }
.cx-card > .cx-main { z-index: 0; }

/* modal panels over the menu or a match */
#opts, #guide, #codex { background: radial-gradient(ellipse at center, rgba(4, 6, 12, 0.5), rgba(2, 3, 8, 0.88) 85%); backdrop-filter: blur(3px); }
.opts-card { padding: 26px 30px 20px; gap: 14px; }
.opts-card h2 { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 0 0 6px; font-size: 24px; letter-spacing: 0.16em; text-transform: uppercase; }
.opts-card h2::before, .opts-card h2::after { content: ''; flex: 1; height: 14px; background: url('assets/ui/frame/rule.svg') right center / auto 14px no-repeat; }
.opts-card h2::after { transform: scaleX(-1); }
.opts-card h2, .g-head h2, .cx-head h2 { color: #f1d488; text-shadow: 0 2px 0 #000, 0 0 16px rgba(232, 199, 122, 0.35); }
.opt { padding: 4px 0; border-bottom: 1px solid rgba(232, 199, 122, 0.08); }
.guide-card { padding: 24px 28px 20px; }
.g-head h2 { letter-spacing: 0.1em; text-transform: uppercase; font-size: 22px; }
.g-x { width: 30px; height: 30px; border: 1px solid rgba(232, 199, 122, 0.35); border-radius: 2px; background: rgba(0, 0, 0, 0.4); color: var(--gold); display: grid; place-items: center; padding: 0; }
.g-x:hover { border-color: var(--gold); box-shadow: 0 0 12px rgba(232, 199, 122, 0.3); }
.cx-head { padding: 16px 24px 14px; background: linear-gradient(180deg, rgba(232, 199, 122, 0.06), transparent); }
.cx-head h2 { letter-spacing: 0.12em; text-transform: uppercase; }

/* Stats panel: hold Shift (hud.js renderStats); hovering a row explains it */
#h-stats { position: absolute; left: 10px; top: 50%; width: 214px; transform: translate(calc(-100% - 20px), -50%); opacity: 0; transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.15s;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 8px 6px; font-size: 12px; pointer-events: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
#h-stats.open { transform: translate(0, -50%); opacity: 1; pointer-events: auto; }
#h-stats .st-head { font: 800 13px Cinzel, serif; letter-spacing: 0.12em; color: var(--gold); text-transform: uppercase; margin: 0 2px 6px; display: flex; justify-content: space-between; align-items: baseline; }
#h-stats .st-head span { font: 600 10px Inter; letter-spacing: 0.04em; color: #8a8f9c; text-transform: none; }
#h-stats .st-row { display: grid; grid-template-columns: 18px 1fr auto 34px; gap: 6px; align-items: center; padding: 4px; border-radius: 4px; cursor: help; }
#h-stats .st-row:hover { background: rgba(255, 255, 255, 0.07); }
#h-stats .st-icon { text-align: center; font-size: 12px; opacity: 0.85; }
#h-stats .st-name { color: #c9ccd6; }
#h-stats .st-row b { font: 700 12.5px Inter; color: #fff; font-variant-numeric: tabular-nums; }
#h-stats .st-row i { font: 700 10px Inter; font-style: normal; text-align: right; }
#h-stats .st-row i.up { color: #7dff9a; } #h-stats .st-row i.down { color: #ff7a7a; }
#h-stats .st-tip { position: absolute; left: calc(100% + 8px); width: 220px; padding: 8px 10px; background: #0b0e14f2; border: 1px solid var(--line); border-radius: 6px; font-size: 11.5px; line-height: 1.35; color: #d6d9e2; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); }
#h-stats .st-tip.hidden { display: none; }
#h-stats .st-tip b { display: block; color: var(--gold); font: 700 12px Inter; margin-bottom: 2px; }
#h-stats .st-src { margin-top: 5px; color: #9aa0ae; font-size: 11px; }

/* ---------- team pings (G wheel) ---------- */
#ping-wheel { position: fixed; left: 0; top: 0; z-index: 25; pointer-events: none; width: 0; height: 0; }
#ping-wheel.hidden { display: none; }
#ping-wheel > svg { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); overflow: visible; animation: pw-open 0.11s ease-out; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.65)); }
@keyframes pw-open { from { transform: translate(-50%, -50%) scale(0.72); opacity: 0; } }
.pw-ring { fill: rgba(6, 9, 18, 0.35); stroke: rgba(232, 199, 122, 0.28); stroke-width: 1; }
.pw-seg { fill: rgba(9, 13, 24, 0.82); stroke: rgba(232, 199, 122, 0.45); stroke-width: 1.2; transition: fill 0.08s, stroke 0.08s; }
.pw-ic { transition: transform 0.1s ease-out; }
.pw-ic circle { fill: rgba(0, 0, 0, 0.45); stroke: var(--c); stroke-opacity: 0.45; stroke-width: 1.2; }
.pw-ic path { fill: none; stroke: var(--c); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.pw-w.on .pw-seg { fill: color-mix(in srgb, var(--c) 30%, rgba(9, 13, 24, 0.9)); stroke: var(--c); stroke-width: 2; }
.pw-w.on .pw-ic { transform: scale(1.22); }
.pw-w.on .pw-ic circle { stroke-opacity: 1; fill: rgba(0, 0, 0, 0.6); }
.pw-w.on .pw-ic path { opacity: 1; filter: drop-shadow(0 0 4px var(--c)); }
.pw-line { stroke: rgba(255, 244, 214, 0.75); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 5; }
.pw-mid { fill: rgba(9, 13, 24, 0.92); stroke: var(--gold); stroke-width: 1.5; }
#ping-wheel.mid .pw-mid { stroke: #e8f0ff; stroke-width: 2.5; }
.pw-cur path { fill: none; stroke: var(--c); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px var(--c)); }
.pw-label { position: absolute; left: 0; top: 122px; transform: translateX(-50%); white-space: nowrap; font: 700 13px Cinzel, Georgia, serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c); padding: 3px 12px; border-radius: 12px; background: rgba(9, 13, 24, 0.9); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); text-shadow: 0 1px 2px #000; }

/* world marker: name, icon badge and a stem down to the pinged spot (pinned to the screen edge when off screen) */
.tping { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; will-change: transform; }
.tp-col { position: absolute; left: 0; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%; animation: tp-pop 0.32s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes tp-pop { from { transform: translateX(-50%) scale(1.8); opacity: 0; } }
.tp-name { white-space: nowrap; font: 700 11px Inter, sans-serif; color: #f3ecd8; text-shadow: 0 1px 2px #000, 0 0 4px #000; margin-bottom: 2px; }
.tp-badge { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 35%, #1c2230, #07090f); border: 2px solid var(--c); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6), 0 0 14px var(--c); animation: tp-bob 1.1s ease-in-out infinite; }
.tp-badge svg { width: 24px; height: 24px; filter: drop-shadow(0 0 3px var(--c)); }
@keyframes tp-bob { 50% { transform: translateY(-3px); } }
.tp-stem { display: block; width: 2px; height: 26px; background: linear-gradient(var(--c), transparent); margin-top: 1px; }
.tping.edge .tp-col { transform: translate(-50%, 50%) scale(0.72); animation: none; }
.tping.edge .tp-stem, .tping.edge .tp-name { display: none; }

/* chat line */
.cl.ping .pk { color: var(--c); font-weight: 700; display: inline-flex; align-items: center; gap: 3px; vertical-align: -2px; }
.cl.ping .pk svg { width: 14px; height: 14px; }
.cl.ping .pk-ch { color: var(--dim); }
/* attack ping: the enemy's portrait in a red ring with a crosshair tag; dimmed once the team loses sight of it */
.tping.k-attack .tp-badge { position: relative; width: 44px; height: 44px; border-width: 2.5px; padding: 0; animation: tp-bob 1.1s ease-in-out infinite, tp-throb 0.7s ease-in-out infinite; }
.tping.k-attack .tp-badge img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tp-tag { position: absolute; right: -7px; bottom: -5px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #150507; border: 1.5px solid var(--c); }
.tp-tag svg { width: 15px; height: 15px; filter: none; }
@keyframes tp-throb { 50% { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6), 0 0 22px var(--c); } }
.tp-name em { font-style: normal; color: var(--c); }
.tping.lost .tp-badge { filter: grayscale(0.7) brightness(0.7); animation: none; }
.cl.ping .pk-foe { color: #fff; }
.dmgnum.tip { color: #ffe7a0; font-size: 14px; letter-spacing: 0.06em; text-shadow: 0 0 8px rgba(255, 200, 90, 0.55), 0 1px 2px #000; }
.fe.tip { color: #efe6cf; } .fe.tip b { color: #ffd66b; }
#h-brief .x-close, .fe.tip .x-close { position: absolute; top: 6px; right: 8px; pointer-events: auto; width: 22px; height: 22px; padding: 0; border: none; border-radius: 4px; background: transparent; color: var(--dim); font: 400 18px/22px Inter; cursor: pointer; }
#h-brief .x-close:hover, .fe.tip .x-close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
#h-brief.out .x-close { pointer-events: none; }
.fe.tip { position: relative; padding-right: 30px; pointer-events: auto; }
#h-brief .x-close { top: 10px; right: 10px; }

/* ---------- emotes (T ring) ---------- */
#emote-ring { position: fixed; left: 0; top: 0; z-index: 24; pointer-events: none; width: 0; height: 0; }
#emote-ring.hidden { display: none; }
#emote-ring > .er { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); animation: pw-open 0.11s ease-out; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.65)); }
#emote-ring kbd, #emote-menu kbd { font: 700 10px Inter; color: #efe6cf; padding: 0 4px; border: 1px solid rgba(232, 199, 122, 0.4); border-radius: 3px; background: rgba(0, 0, 0, 0.35); }
.er { position: relative; flex: none; }
.er > svg { position: absolute; left: 0; top: 0; overflow: visible; }
.er-ring { fill: rgba(6, 9, 18, 0.35); stroke: rgba(232, 199, 122, 0.28); stroke-width: 1; }
.er-w { --c: #ffd66b; }
.er-seg { fill: rgba(9, 13, 24, 0.84); stroke: rgba(232, 199, 122, 0.4); stroke-width: 1.2; transition: fill 0.08s, stroke 0.08s; }
.er-w.hov .er-seg { fill: color-mix(in srgb, var(--c) 16%, rgba(9, 13, 24, 0.9)); stroke: color-mix(in srgb, var(--c) 70%, transparent); }
.er-w.on .er-seg, .er-w.sel .er-seg { fill: color-mix(in srgb, var(--c) 30%, rgba(9, 13, 24, 0.9)); stroke: var(--c); stroke-width: 2; }
.er-mid { fill: rgba(9, 13, 24, 0.92); stroke: var(--gold); stroke-width: 1.5; }
.er-st { position: absolute; width: 54px; height: 54px; transform: translate(-50%, -50%); transition: transform 0.1s ease-out; }
.er-st img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7)); }
.er-st.on, .er-st.sel { transform: translate(-50%, -50%) scale(1.2); }
.er-st.hov { transform: translate(-50%, -50%) scale(1.1) rotate(-4deg); }
.er-st.just img, .er-st.bounce img { animation: em-drop 0.3s cubic-bezier(0.2, 1.7, 0.4, 1); }
.er-key { --c: #ffd66b; position: absolute; transform: translate(-50%, -50%); font: 800 11px Cinzel, serif; font-style: normal; color: color-mix(in srgb, var(--c) 70%, #fff); opacity: 0.75; text-shadow: 0 1px 2px #000, 0 0 6px #000; pointer-events: none; }
.er-key.on, .er-key.sel { opacity: 1; color: #fff6dc; }
.er-c { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; transform: translate(-50%, -50%); pointer-events: none; }
.er-c img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c, #ffd66b) 55%, transparent)); animation: em-drop 0.22s cubic-bezier(0.2, 1.7, 0.4, 1); }
#emote-ring.mid .er-mid { stroke: #e8f0ff; stroke-width: 2.5; }
.er-label { position: absolute; left: 0; top: 166px; transform: translateX(-50%); white-space: nowrap; font: 700 13px Cinzel, Georgia, serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c, var(--gold)); padding: 3px 12px; border-radius: 12px; background: rgba(9, 13, 24, 0.9); border: 1px solid color-mix(in srgb, var(--c, #e8c77a) 60%, transparent); text-shadow: 0 1px 2px #000; }
.er-label.hint { font: 500 11px Inter; letter-spacing: 0; text-transform: none; color: var(--dim); }
.er-edit { position: absolute; left: 0; top: -186px; transform: translateX(-50%); pointer-events: auto; font: 600 11px Inter; color: var(--gold); background: rgba(9, 13, 24, 0.9); border: 1px solid rgba(232, 199, 122, 0.35); border-radius: 10px; padding: 2px 10px; cursor: pointer; }
.er-edit:hover { border-color: var(--gold); color: #fff2c0; }
/* on cooldown from the last emote: the ring greys out and says so */
#emote-ring.cd .er-w, #emote-ring.cd .er-st { filter: grayscale(0.85) brightness(0.7); }
#emote-ring.cd .er-label::after { content: ' · cooling down'; color: var(--dim); text-transform: none; letter-spacing: 0; font: 500 11px Inter; }
.em-tile { --c: #ffd66b; position: relative; padding: 0; border: 1px solid rgba(232, 199, 122, 0.3); border-radius: 8px; cursor: pointer;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--c) 22%, #151a28), #07090f 72%); transition: transform 0.1s, border-color 0.1s, box-shadow 0.1s; }
.m-taunt { --c: #ff6a5a; }
.m-sad { --c: #7ab8ff; }
.em-tile:hover { transform: translateY(-3px); border-color: var(--c); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6), 0 0 14px color-mix(in srgb, var(--c) 50%, transparent); }
.em-tile img { position: absolute; left: 50%; top: 4px; width: 62px; height: 62px; transform: translateX(-50%); object-fit: contain; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7)); transition: transform 0.12s; }
.em-tile:hover img { transform: translateX(-50%) scale(1.1) rotate(-4deg); }
img.fallback { border-radius: 50%; }
.em-tile em { position: absolute; left: 2px; right: 2px; bottom: 5px; font: 600 10.5px Inter; font-style: normal; color: #efe6cf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; pointer-events: none; }

/* the sticker over a champion's head */
.emote-pop { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; will-change: transform; }
.ep-col { position: absolute; left: 0; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%; animation: ep-pop 0.42s cubic-bezier(0.2, 1.7, 0.4, 1); }
.ep-col img { width: 108px; height: 108px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)); animation: ep-wob 1.3s ease-in-out 0.42s infinite; }
.m-taunt .ep-col img { animation-name: ep-jig; animation-duration: 0.5s; }
.m-sad .ep-col img { animation-name: ep-droop; animation-duration: 1.6s; }
.ep-col span { margin-top: -6px; padding: 1px 8px; border-radius: 9px; white-space: nowrap; font: 700 11px Inter; color: #fff6dc; background: rgba(9, 13, 24, 0.82); border: 1px solid color-mix(in srgb, var(--c, #e8c77a) 60%, transparent); text-shadow: 0 1px 2px #000; }
@keyframes ep-pop { 0% { transform: translateX(-50%) translateY(20px) scale(0.2); opacity: 0; } 60% { opacity: 1; } }
@keyframes ep-wob { 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes ep-jig { 50% { transform: translateY(-5px) rotate(-6deg) scale(1.04); } }
@keyframes ep-droop { 50% { transform: translateY(3px) scaleY(0.96); } }

/* the Emotes menu (loadout editor) */
#emote-menu { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(3, 5, 10, 0.72); }
.em-card { width: min(1080px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow: auto; padding: 18px 22px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7); }
.em-top h2 { margin: 0; font: 800 22px Cinzel, serif; letter-spacing: 0.08em; color: var(--gold); }
.em-top p { margin: 4px 0 12px; font: 500 12.5px Inter; color: var(--dim); }
@keyframes em-drop { from { transform: translateX(-50%) scale(0.4); } }
.em-body { display: flex; gap: 22px; align-items: flex-start; }
.em-ringcol { position: sticky; top: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(232, 199, 122, 0.18); }
.em-ringcol .er-seg, .em-ringcol .er-st { cursor: pointer; }
.em-selcap { font: 500 12px Inter; color: var(--dim); }
.em-selcap b { font: 700 13px Cinzel, serif; letter-spacing: 0.06em; color: var(--c, var(--gold)); }
.em-pick { flex: 1; min-width: 0; }
.em-pick .em-sec:first-child h3 { margin-top: 0; }
@media (max-width: 820px) { .em-body { flex-direction: column; align-items: stretch; } .em-ringcol { position: static; } }
.em-sec h3 { margin: 16px 0 8px; font: 700 13px Cinzel, serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.em-sec h3 small { margin-left: 8px; font: 500 11px Inter; letter-spacing: 0; text-transform: none; color: var(--dim); }
.em-champs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.em-ch { width: 38px; height: 38px; padding: 0; border-radius: 50%; overflow: hidden; border: 2px solid transparent; background: #07090f; cursor: pointer; opacity: 0.55; transition: opacity 0.1s, border-color 0.1s; }
.em-ch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.em-ch:hover { opacity: 0.9; }
.em-ch.on { opacity: 1; border-color: var(--gold); }
.em-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.em-tile { height: 96px; }
.em-tile.owned::after { content: '✓'; position: absolute; right: 5px; top: 3px; font: 800 12px Inter; color: #7dffa0; text-shadow: 0 1px 2px #000; }
.em-tile.bounce img { animation: em-drop 0.3s cubic-bezier(0.2, 1.7, 0.4, 1); }
.em-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }