:root {
  --gold: #c8a86a;
  --gold-bright: #f0d9a0;
  --gold-dim: #6e5a34;
  --navy: #0a1622;
  --navy2: #0f2031;
  --panel: rgba(9, 16, 25, 0.94);
  --panel2: rgba(14, 26, 40, 0.94);
  --azure: #3aa8ff;
  --crimson: #ff4a3a;
  --text: #d8dfe6;
  --muted: #8a99a8;
  --hp: #3fbf3a;
  --mana: #2f7be0;
  /* stat colours: League's scheme (attack damage orange, ability power purple, health green, mana blue)
     with crit yellow; armor and attack speed move to coral and lime so no two panel stats share a hue */
  --st-ad: #ff9b3d; --st-ap: #a98dff; --st-hp: #4ed26e; --st-mana: #46a8ff; --st-energy: #f0d64e;
  --st-armor: #ff7461; --st-mr: #45dbe8; --st-as: #b8ec58; --st-ah: #a2d6ff; --st-crit: #ffd84a;
  --st-ms: #eef2f6; --st-ls: #ff5c8a; --st-pen: #ff8b6e; --st-mpen: #d08cff; --st-heal: #6ef0b0; --st-ten: #e3bf94;
  /* damage types in descriptions, as in League */
  --dt-physical: #ff9b3d; --dt-magic: #52c4ff; --dt-true: #ffffff;
  --ui: 1;
  --cursor-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M3 2 L3 24 L9 18 L13 28 L17 26 L13 16 L21 16 Z' fill='%23f0d9a0' stroke='%23201808' stroke-width='1.5'/%3E%3C/svg%3E") 3 2, default;
  --cursor-attack: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M3 3 L10 3 L26 19 L22 23 L6 7 Z' fill='%23ff6a5a' stroke='%23300808' stroke-width='1.5'/%3E%3Cpath d='M20 25 L25 20 L29 24 L24 29 Z' fill='%23c8a86a' stroke='%23300808'/%3E%3C/svg%3E") 3 3, crosshair;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #050a10; color: var(--text); font-family: 'Segoe UI', 'Trebuchet MS', system-ui, sans-serif; user-select: none; -webkit-user-select: none; }
canvas#game { position: fixed; inset: 0; display: block; cursor: var(--cursor-default); }
canvas#overlay { position: fixed; inset: 0; pointer-events: none; }
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#ui .interactive, #ui .interactive * { pointer-events: auto; }
.hidden { display: none !important; }
h1, h2, h3, .serif { font-family: 'Palatino Linotype', 'Book Antiqua', Georgia, serif; }

/* ------------------------------------------------------------------ generic widgets */
.btn { pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 26px; min-width: 120px;
  background: linear-gradient(#1c3346, #0e1c2a); color: var(--gold-bright); border: 2px solid var(--gold); font: 600 15px/1 'Palatino Linotype', Georgia, serif; letter-spacing: 1px; text-transform: uppercase;
  box-shadow: inset 0 0 12px rgba(200,168,106,0.15), 0 2px 8px rgba(0,0,0,0.5); transition: filter .15s, transform .1s; }
.btn:hover { filter: brightness(1.25); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(#1f6a8a, #0c3348); border-color: #6fd0ff; color: #e8f8ff; box-shadow: 0 0 18px rgba(80,190,255,0.35), inset 0 0 14px rgba(120,220,255,0.2); }
.btn.small { padding: 6px 14px; min-width: 0; font-size: 12px; }
.btn[disabled] { filter: grayscale(0.8) brightness(0.6); cursor: default; }
.panel { background: var(--panel); border: 1px solid var(--gold-dim); box-shadow: 0 6px 24px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(200,168,106,0.08); }
.gold-text { color: #ffd24a; font-weight: 700; }

/* ------------------------------------------------------------------ HUD */
#hud { position: fixed; inset: 0; pointer-events: none; font-size: 13px; }
#hud .interactive { pointer-events: auto; }
.hud-top { position: absolute; top: 0; right: 0; display: flex; gap: 14px; align-items: center; padding: 6px 14px; background: linear-gradient(to left, rgba(6,12,20,0.92), rgba(6,12,20,0.6)); border-bottom-left-radius: 6px; border-left: 1px solid var(--gold-dim); border-bottom: 1px solid var(--gold-dim); font-weight: 600; }
.hud-top .score { font-size: 18px; letter-spacing: 1px; }
.hud-top .az { color: #5cb8ff; } .hud-top .cr { color: #ff6a5a; }
.hud-top .sep { color: var(--gold); margin: 0 6px; }
.hud-top .dim { color: var(--muted); font-weight: 500; }
.hud-top .time { font-variant-numeric: tabular-nums; color: var(--gold-bright); }

.killfeed { position: absolute; top: 46px; right: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.kf { display: flex; align-items: center; gap: 7px; padding: 4px 8px 4px 9px; background: linear-gradient(90deg, rgba(6,12,20,0.72), rgba(6,12,20,0.92)); border: 1px solid rgba(200,168,106,0.32); box-shadow: 0 2px 10px rgba(0,0,0,0.5); animation: kfIn .25s ease-out; }
.kf.good { box-shadow: inset 3px 0 0 #3aa8ff, 0 2px 10px rgba(0,0,0,0.5); } .kf.bad { box-shadow: inset 3px 0 0 #ff4a3a, 0 2px 10px rgba(0,0,0,0.5); }
.kf img { display: block; border: 2px solid; border-radius: 4px; }
.kf img.p { width: 46px; height: 46px; }
.kf .as { display: grid; grid-template-columns: repeat(2, 21px); gap: 3px; }
.kf .as img { width: 21px; height: 21px; border-width: 1px; border-radius: 3px; }
.kf .ally { border-color: var(--azure); } .kf .enemy { border-color: var(--crimson); } .kf .neutral { border-color: #e0a030; }
.kf .x { width: 26px; height: 26px; flex: none; filter: drop-shadow(0 0 3px rgba(240,200,120,0.35)); }
@keyframes kfIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.announce { position: absolute; top: 13%; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; }
.announce .a { font: 700 34px/1.1 'Palatino Linotype', Georgia, serif; letter-spacing: 2px; color: #fff; text-shadow: 0 0 18px rgba(0,0,0,0.9), 0 2px 2px #000; animation: annIn 3.2s ease-out forwards; white-space: nowrap; }
.announce .a small { display: block; font-size: 16px; letter-spacing: 1px; margin-top: 4px; color: var(--gold-bright); }
.announce .a.ally { color: #8fd0ff; } .announce .a.enemy { color: #ff8a7a; } .announce .a.epic { color: #ffd166; }
@keyframes annIn { 0% { opacity: 0; transform: scale(1.4); } 10% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

.toast { position: absolute; bottom: calc(var(--hud-top, 110px) + 48px * var(--hud-scale, 1) + 14px); left: 50%; transform: translateX(-50%); background: rgba(20,8,6,0.85); color: #ffb0a0; padding: 6px 14px; border: 1px solid rgba(255,120,100,0.4); font-weight: 600; opacity: 0; transition: opacity .2s; }
.toast.show { opacity: 1; }

.log { position: absolute; left: 10px; bottom: var(--log-bottom, 12px); width: 360px; max-height: 180px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; font-size: 12px; text-shadow: 0 1px 2px #000; }
.log div { background: rgba(4,8,14,0.55); padding: 2px 6px; animation: logFade 12s forwards; }
.log .sys { color: #f0d9a0; } .log .ally { color: #8fd0ff; } .log .enemy { color: #ff9a8a; }
@keyframes logFade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* bottom bar */
/* HUD size (Settings > Interface): --hud-scale / --hud-shift / --hud-top are set by HUD.layout() */
.bottom { position: absolute; bottom: 0; left: 50%; transform: translateX(calc(-50% + var(--hud-shift, 0px))) scale(var(--hud-scale, 1)); transform-origin: 50% 100%; display: flex; align-items: flex-end; gap: 0; }
/* buffs and debuffs ride on the bar's top edge */
.buffs { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: max-content; max-width: 100%; margin-bottom: 5px; display: flex; flex-wrap: wrap-reverse; justify-content: center; gap: 4px; }
#ui .buffs { pointer-events: none; }
#ui .buffs .buff { pointer-events: auto; }
.buff.split { margin-left: 10px; }
.buff { width: 30px; height: 30px; border: 1px solid #3a4a5a; border-radius: 3px; background: #0d1824; display: flex; align-items: center; justify-content: center; font-size: 16px; position: relative; pointer-events: auto; }
.buff.debuff { border-color: #7a2a24; background: #1e0c0a; }
.buff .st { position: absolute; right: 1px; bottom: -1px; font-size: 10px; font-weight: 700; color: #fff; text-shadow: 0 0 2px #000; }
.buff .bt { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform-origin: left; }

.mainbar { position: relative; display: flex; align-items: flex-end; background: linear-gradient(#0f1d2c, #07101a); border: 1px solid var(--gold-dim); border-bottom: none; box-shadow: 0 -4px 24px rgba(0,0,0,0.7); padding: 8px 10px 8px 8px; gap: 8px; border-top-left-radius: 10px; border-top-right-radius: 10px; }
/* stats panel: 4 rows x 2 columns that fill the whole box (rows share its height) */
.stats { display: grid; grid-template-columns: repeat(2, 76px); grid-template-rows: repeat(4, 1fr); gap: 0 10px; font-size: 15px; font-weight: 600; padding: 5px 10px 5px 11px; background: rgba(0,0,0,0.3); border: 1px solid rgba(200,168,106,0.2); align-self: stretch; align-content: stretch; }
.stats div { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; color: #e8edf2; }
.stats .si { width: 18px; height: 18px; }
.portrait { position: relative; width: 92px; height: 92px; align-self: center; }
.portrait img { width: 76px; height: 76px; border-radius: 50%; position: absolute; left: 8px; top: 8px; border: 2px solid #1a2a3a; }
.portrait svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.portrait .lvl { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); background: #0a1420; border: 1px solid var(--gold); color: var(--gold-bright); font-weight: 700; font-size: 13px; padding: 1px 7px; border-radius: 8px; }
.portrait .dead-t { position: absolute; inset: 8px; border-radius: 50%; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; font: 700 24px Georgia, serif; color: #ff9a8a; }
.center { display: flex; flex-direction: column; gap: 6px; }
.abilities { display: flex; gap: 6px; align-items: flex-end; }
.ab { position: relative; width: 58px; height: 58px; border: 2px solid #3a4a5a; background: #0a1420; pointer-events: auto; }
.ab.spell { width: 42px; height: 42px; }
.ab.passive { width: 36px; height: 36px; }
.ab img { width: 100%; height: 100%; display: block; }
.ab .cd { position: absolute; inset: 0; background: conic-gradient(rgba(0,0,0,0.72) calc(var(--cd, 0) * 360deg), transparent 0); }
.ab .cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 18px 'Segoe UI', sans-serif; color: #fff; text-shadow: 0 0 4px #000, 0 0 2px #000; }
.ab.spell .cdt { font-size: 14px; }
.ab .cnt { position: absolute; right: 2px; bottom: 0; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; }
/* Chastise stages: Unleashed (teal) and Primal (gold) frames */
.ab.spell.tier1 { border-color: #3fd0b0; box-shadow: 0 0 7px rgba(63,208,176,0.55); }
.ab.spell.tier2 { border-color: #ffc84a; box-shadow: 0 0 9px rgba(255,190,70,0.7); }
.ab .key { position: absolute; left: 2px; top: 1px; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.ab .cost { position: absolute; right: 2px; bottom: 1px; font-size: 10px; font-weight: 700; color: #9fd0ff; text-shadow: 0 0 3px #000; }
.ab .pips { position: absolute; left: 0; right: 0; bottom: -7px; display: flex; justify-content: center; gap: 2px; }
.ab .pips b { width: 8px; height: 3px; background: #2a3440; }
.ab .pips b.on { background: #ffd166; box-shadow: 0 0 4px #ffb020; }
.ab.nomana img { filter: saturate(0.2) brightness(0.55) hue-rotate(180deg); }
.ab.locked img { filter: grayscale(1) brightness(0.35); }
.ab.ready { border-color: #7a8a9a; }
.ab.recast { border-color: #b070ff; box-shadow: 0 0 10px #b070ff; }
.ab .lvlup { position: absolute; left: 50%; top: -24px; transform: translateX(-50%); width: 22px; height: 20px; background: linear-gradient(#ffd166, #b8862a); color: #1a1000; font-weight: 900; text-align: center; line-height: 19px; border-radius: 3px; cursor: pointer; box-shadow: 0 0 10px #ffd166; animation: pulse 1s infinite alternate; pointer-events: auto; }
@keyframes pulse { from { filter: brightness(1); } to { filter: brightness(1.4); } }
.bars { display: flex; flex-direction: column; gap: 2px; }
.bar { position: relative; height: 16px; background: #05090e; border: 1px solid #25313e; overflow: hidden; }
.bar.mp { height: 12px; }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; }
.bar.hp .fill { background: linear-gradient(#6ee860, #2f9a28); }
.bar.hp .shield { position: absolute; top: 0; bottom: 0; background: linear-gradient(#ffffff, #b0b8c0); }
/* recently lost health (render/hpfx.js): pale chunk, bright next to the health, white on a fresh hit
   (--fl); burst heals light up the regained part additively. DOM order keeps shield and text above. */
.bar.hp .trail, .bar.hp .heal { position: absolute; top: 0; bottom: 0; width: 0; }
.bar.hp .trail { background: linear-gradient(90deg, #fff4d6, rgba(216,160,80,0.92)); }
.bar.hp .trail::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: var(--fl, 0); }
.bar.hp .heal { background: #fff; mix-blend-mode: plus-lighter; opacity: 0; }
.bar.mp .fill { background: linear-gradient(#5aa0ff, #1f58b8); }
.bar.mp.energy .fill { background: linear-gradient(#f8e870, #b89a20); }
.bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; font-variant-numeric: tabular-nums; }
.bar .regen { position: absolute; right: 4px; top: 0; bottom: 0; font-size: 10px; color: #b0ffa8; display: flex; align-items: center; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.inventory { display: grid; grid-template-columns: repeat(4, 42px); grid-template-rows: 42px 42px; gap: 4px; align-self: center; }
.slot { position: relative; width: 42px; height: 42px; border: 1px solid #3a4a5a; background: #060c14; pointer-events: auto; }
.slot img { width: 100%; height: 100%; display: block; }
.slot .key { position: absolute; left: 1px; top: 0; font-size: 10px; font-weight: 700; color: #ddd; text-shadow: 0 0 2px #000; }
.slot .cnt { position: absolute; right: 2px; bottom: 0; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 0 3px #000; }
.slot .cd { position: absolute; inset: 0; background: conic-gradient(rgba(0,0,0,0.72) calc(var(--cd, 0) * 360deg), transparent 0); }
.slot.trinket { border-color: #8a7a3a; border-radius: 50%; overflow: hidden; }
.slot.recall { border-color: #3a6a8a; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #8fd0ff; background: radial-gradient(#1a3a5a, #07121c); }
.goldbox { grid-column: span 4; height: auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.goldbox .g { color: #ffd24a; font-weight: 800; font-size: 16px; text-shadow: 0 0 6px rgba(255,200,60,0.4); font-variant-numeric: tabular-nums; }
.shopbtn { pointer-events: auto; cursor: pointer; padding: 4px 10px; background: linear-gradient(#3a2a10, #1c1408); border: 1px solid var(--gold); color: var(--gold-bright); font-weight: 700; font-size: 12px; }
.death-timer { position: absolute; top: 34%; left: 50%; transform: translateX(-50%); text-align: center; font: 700 26px Georgia, serif; color: #ffb0a0; text-shadow: 0 2px 8px #000; }
.death-timer b { display: block; font-size: 64px; color: #fff; }

.target-frame { position: absolute; top: 8px; left: 8px; width: 290px; padding: 8px; display: flex; gap: 8px; }
.target-frame img { width: 56px; height: 56px; border: 2px solid; border-radius: 4px; }
.target-frame .tn { font-weight: 700; font-size: 14px; }
.target-frame .tstats { display: grid; grid-template-columns: repeat(4, auto); gap: 2px 10px; font-size: 11px; color: var(--muted); margin-top: 3px; }
.target-frame .tstats span { display: inline-flex; align-items: center; gap: 3px; }
.target-frame .tstats .si { width: 13px; height: 13px; }
.shop .cats .si { width: 16px; height: 16px; margin-right: 7px; vertical-align: -3.5px; }
.target-frame .bar { height: 10px; margin-top: 3px; }
.target-frame .bar.hp .fill.enemy { background: linear-gradient(#ff7a6a, #b02a20); }
.target-frame .bar.hp .fill.ally { background: linear-gradient(#7cc4ff, #22609a); }
.target-frame .bar.hp .fill.neutral { background: linear-gradient(#ffd070, #b07a20); }

.tooltip { position: fixed; z-index: 50; max-width: 380px; padding: 10px 12px; background: rgba(6,12,20,0.97); border: 1px solid var(--gold-dim); box-shadow: 0 6px 20px rgba(0,0,0,0.7); font-size: 12.5px; line-height: 1.45; pointer-events: none; }
.tooltip h4 { margin: 0 0 4px; font: 700 15px 'Palatino Linotype', Georgia, serif; color: var(--gold-bright); }
.tooltip .meta { color: var(--muted); font-size: 11.5px; margin-bottom: 6px; display: flex; gap: 12px; }
.tooltip .meta b { color: #9fd0ff; font-weight: 600; }
.tooltip h4 .si { width: 17px; height: 17px; vertical-align: -2px; }
/* stat colours (item stat lines, stats panel, target frame, shop filters, shard texts, ratios) */
.st-ad { color: var(--st-ad); } .st-ap { color: var(--st-ap); } .st-hp { color: var(--st-hp); } .st-mana { color: var(--st-mana); }
.st-energy { color: var(--st-energy); } .st-armor { color: var(--st-armor); } .st-mr { color: var(--st-mr); } .st-as { color: var(--st-as); }
.st-ah { color: var(--st-ah); } .st-crit { color: var(--st-crit); } .st-ms { color: var(--st-ms); } .st-ls { color: var(--st-ls); }
.st-pen { color: var(--st-pen); } .st-mpen { color: var(--st-mpen); } .st-heal { color: var(--st-heal); } .st-ten { color: var(--st-ten); }
.dt-physical { color: var(--dt-physical); } .dt-magic { color: var(--dt-magic); } .dt-true { color: var(--dt-true); font-weight: 600; }
/* stat icons (ui/staticons.js): the icon carries the stat's colour, the number and label beside it stay plain */
.si { display: inline-block; flex: none; vertical-align: -3px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.75)); }
.itip .st, .shop .detail .istats .st { display: flex; align-items: center; gap: 6px; line-height: 1.55; color: #d8dfe6; }
.itip .st .si, .shop .detail .istats .st .si { width: 17px; height: 17px; }
.itip .st b, .shop .detail .istats .st b { color: #fff; font-weight: 700; }
/* tooltip totals: holding Shift shows the scaling behind them, "150 (70 + 60% AP)" (see ui/scaling.js) */
.sv-t { color: #fff; }
.sv-x { display: none; color: #9aa8b6; font-weight: 400; }
body.shift-held .sv-x { display: inline; }
.sv-hint { margin-top: 7px; font-size: 11px; color: #66788a; }
.sv-hint b { color: #9aa8b6; font-weight: 600; }
body.shift-held .sv-hint { display: none; }
/* ability upgrade path (ui/rankpath.js): shown while Shift is held, or on the level-up button */
.rk-path { display: none; margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(200,168,106,0.25); }
body.shift-held .rk-path, .rk-path.force { display: block; }
.rk-h { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 3px; font: 700 10.5px 'Segoe UI', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
.rk-h span { color: var(--muted); letter-spacing: 0.3px; text-transform: none; font-weight: 600; }
.rk-grid { display: grid; grid-template-columns: max-content max-content max-content; column-gap: 12px; row-gap: 1px; font-size: 12px; line-height: 1.55; }
.rk-row { display: contents; }
.rk-row b { color: #c8d0d8; font-weight: 600; }
.rk-v { color: #6c7c8c; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk-v i { font-style: normal; color: #3c4a57; margin: 0 3px; }
.rk-v .cur { color: #ffd166; font-weight: 700; }
.rk-v .nxt { color: #f2f6fa; }
.rk-d { color: #8fdc86; font-size: 11px; white-space: nowrap; }
.tooltip .desc { color: #d8dfe6; }
.tooltip .cost { color: #ffd24a; font-weight: 700; }

/* minimap */
.minimap-wrap { position: absolute; right: 8px; bottom: 8px; width: calc(244px * var(--mm-scale, 1)); height: calc(244px * var(--mm-scale, 1)); padding: 3px; background: #07101a; border: 1px solid var(--gold-dim); box-shadow: 0 0 20px rgba(0,0,0,0.7); pointer-events: auto; }
.minimap-wrap canvas { width: calc(236px * var(--mm-scale, 1)); height: calc(236px * var(--mm-scale, 1)); display: block; cursor: pointer; }

/* scoreboard */
.scoreboard { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(1000px, 94vw); padding: 14px 16px; pointer-events: none; }
.scoreboard .sbhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font: 700 18px Georgia, serif; }
.scoreboard table { width: 100%; border-collapse: collapse; font-size: 13px; }
.scoreboard td { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.05); white-space: nowrap; }
.scoreboard tr.me td { background: rgba(200,168,106,0.12); }
.scoreboard .team { font: 700 14px Georgia, serif; padding-top: 10px; }
.scoreboard .team.az { color: #5cb8ff; } .scoreboard .team.cr { color: #ff6a5a; }
.scoreboard img.p { width: 32px; height: 32px; border-radius: 3px; vertical-align: middle; }
.scoreboard img.i { width: 24px; height: 24px; margin-right: 2px; vertical-align: middle; border: 1px solid #2a3440; }
/* (the item icons take the mouse for their tooltips, the rest of the Tab board lets it through) */
.scoreboard img.i[data-c] { pointer-events: auto; }
.scoreboard img.i[data-c]:hover { border-color: var(--gold-dim); }
.scoreboard .dead { opacity: 0.5; }

/* shop */
.shop { background: radial-gradient(ellipse at 50% 0%, rgba(26, 44, 66, 0.99), rgba(7, 12, 19, 0.99) 70%) !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -51%); width: min(1180px, 97vw); height: min(760px, 90vh); display: grid; grid-template-columns: 168px 1fr 380px; grid-template-rows: auto 1fr auto; gap: 0; pointer-events: auto; border-color: #8a6c38; box-shadow: 0 10px 40px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(240,217,160,0.1); }
.shop .shop-head { grid-column: 1 / 4; display: flex; gap: 16px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--gold-dim); background: linear-gradient(#18293d, #0b1622); }
.shop .shop-head h2 { margin: 0; color: var(--gold-bright); font-size: 22px; letter-spacing: 3px; text-shadow: 0 0 12px rgba(240,200,120,0.3); }
.shop .shop-head .search { flex: 1; max-width: 360px; background: #060d15; border: 1px solid #3a4a5a; color: var(--text); padding: 7px 10px; font: 13px 'Segoe UI', sans-serif; outline: none; }
.shop .shop-head .search:focus { border-color: var(--gold); box-shadow: 0 0 8px rgba(200,168,106,0.3); }
.shop .shop-head .head-r { margin-left: auto; display: flex; gap: 14px; align-items: center; font-size: 16px; }
.shop .cats { border-right: 1px solid rgba(200,168,106,0.2); padding: 8px 6px; display: flex; flex-direction: column; gap: 2px; overflow: auto; background: rgba(0,0,0,0.18); }
.shop .cats div { padding: 7px 10px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 12.5px; border-left: 3px solid transparent; }
.shop .cats div.on, .shop .cats div:hover { color: var(--gold-bright); border-left-color: var(--gold); background: rgba(200,168,106,0.08); }
.shop .grid { padding: 10px 14px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.shop .grid h3 { margin: 0 0 8px; font-size: 13px; color: var(--gold); letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1px solid rgba(200,168,106,0.15); padding-bottom: 4px; }
.shop .items { display: flex; flex-wrap: wrap; gap: 10px 8px; }
.shop .it { width: 66px; text-align: center; cursor: pointer; font-size: 12px; color: #ffd24a; font-weight: 700; }
.shop .it .ic { width: 60px; height: 60px; margin: 0 auto 3px; border: 2px solid #2a3a4a; position: relative; transition: transform .08s, border-color .1s; background: #000; }
.shop .it .ic img { width: 100%; height: 100%; display: block; }
.shop .it:hover .ic { transform: translateY(-2px); border-color: #8a9aaa; }
.shop .it.tier-legendary .ic { border-color: #7a6232; }
.shop .it.tier-epic .ic { border-color: #4a4a7a; }
.shop .it.sel .ic { border-color: var(--gold-bright); box-shadow: 0 0 12px rgba(240,217,160,0.7); }
/* shapeshifters: the ability icons flash when the form (and the spells) change */
.ab.shift img { animation: abShift .45s ease-out; }
@keyframes abShift { 0% { filter: brightness(2.2) saturate(1.3); transform: scale(1.08); } 100% { filter: none; transform: none; } }
/* items you can't afford: darkened (brightness 0.56 = 20% darker than the old 0.7; the icon still reads),
   a touch brighter on hover */
.shop .it.cant .ic img, .tnode.cant img, .shop .detail .into img.cant { filter: brightness(0.56) saturate(0.78); transition: filter .1s, transform .08s; }
.shop .it.cant:hover .ic img, .tnode.cant:hover img, .shop .detail .into img.cant:hover { filter: brightness(0.72) saturate(0.88); }
.shop .it.cant span, .tnode.cant span { color: #9a8756; }
/* Recommended tab: up to three big choices for the next item */
.shop .choices { display: flex; gap: 12px; flex-wrap: wrap; }
.shop .choice { width: 150px; padding: 12px 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; text-align: center; background: linear-gradient(rgba(30,44,62,0.55), rgba(8,14,22,0.55)); border: 1px solid rgba(200,168,106,0.22); transition: border-color .12s, transform .08s, box-shadow .12s; }
.shop .choice:hover { border-color: rgba(240,217,160,0.6); transform: translateY(-2px); }
.shop .choice.sel { border-color: var(--gold-bright); box-shadow: 0 0 14px rgba(240,217,160,0.35), inset 0 0 18px rgba(240,217,160,0.08); }
.shop .choice .cic { width: 84px; height: 84px; border: 2px solid #7a6232; background: #000; box-shadow: 0 4px 14px rgba(0,0,0,0.6); }
.shop .choice .cic img { width: 100%; height: 100%; display: block; }
.shop .choice .cn { margin-top: 4px; font: 700 13px 'Palatino Linotype', Georgia, serif; color: var(--gold-bright); line-height: 1.2; min-height: 2.4em; display: flex; align-items: center; }
.shop .choice .cc { color: #ffd24a; font-weight: 700; font-size: 13px; }
.shop .choice .cc s { color: #8a99a8; font-weight: 400; font-size: 11.5px; }
.shop .choice .cr { font-size: 11px; color: #9fb0c0; line-height: 1.25; }
.shop .choice.cant .cic img { filter: brightness(0.56) saturate(0.78); }
.shop .choice.cant .cc { color: #9a8756; }
.shop .it.owned .ic::after { content: '✔'; position: absolute; right: 1px; bottom: 0; font-size: 12px; color: #7dff7a; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.shop .detail { border-left: 1px solid rgba(200,168,106,0.2); padding: 12px; overflow: auto; display: flex; flex-direction: column; gap: 10px; background: rgba(0,0,0,0.15); }
.shop .tree-wrap { background: radial-gradient(ellipse at 50% 30%, rgba(40,52,70,0.5), rgba(0,0,0,0.3)); border: 1px solid rgba(200,168,106,0.18); padding: 8px 4px 10px; overflow-x: auto; }
/* build tree: nested lists joined by connector lines */
.btree { display: flex; justify-content: center; }
.btree ul { display: flex; justify-content: center; padding: 14px 0 0; margin: 0; position: relative; }
.btree > ul { padding-top: 0; }
.btree li { list-style: none; position: relative; padding: 14px 3px 0; display: flex; flex-direction: column; align-items: center; }
.btree > ul > li { padding-top: 0; }
.btree li::before, .btree li::after { content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 14px; border-top: 2px solid #7a6232; }
.btree li::after { right: auto; left: 50%; border-left: 2px solid #7a6232; }
.btree li:only-child::before, .btree li:only-child::after { display: none; }
.btree li:only-child { padding-top: 0; }
.btree li:first-child::before, .btree li:last-child::after { border: 0 none; }
.btree li:last-child::before { border-right: 2px solid #7a6232; border-radius: 0 6px 0 0; }
.btree li:first-child::after { border-radius: 6px 0 0 0; }
.btree ul ul::before { content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 14px; border-left: 2px solid #7a6232; }
.btree > ul > li::before, .btree > ul > li::after { display: none; }
.tnode { position: relative; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.tnode img { width: 44px; height: 44px; border: 2px solid #2e3e4e; display: block; background: #000; transition: transform .08s; }
.tnode:hover img { transform: scale(1.06); border-color: #9aaaba; }
.tnode.tier-legendary img, .tnode.tier-boots img { width: 54px; height: 54px; }
.tnode span { font-size: 11px; font-weight: 700; color: #ffd24a; margin-top: 1px; }
.tnode.have img { border-color: #5ab85a; box-shadow: 0 0 8px rgba(90,184,90,0.6); }
.tnode.have span { color: #7dff7a; }
.tnode.have::after { content: '✔'; position: absolute; top: -5px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background: #173d17; border: 1px solid #7dff7a; color: #b8ffb0; font-size: 10px; line-height: 15px; text-align: center; box-shadow: 0 0 6px rgba(90,184,90,0.7); pointer-events: none; }
.shop .detail .dh.have img { border-color: #5ab85a; box-shadow: 0 0 10px rgba(90,184,90,0.55); }
.shop .detail .own { margin-top: 2px; color: #7dff7a; font-weight: 700; font-size: 12.5px; letter-spacing: .02em; text-shadow: 0 0 4px rgba(0,0,0,0.8); }
.shop .detail .into img.have { border-color: #5ab85a; box-shadow: 0 0 6px rgba(90,184,90,0.6); }
.shop .choice.owned .cic { position: relative; border-color: #5ab85a; }
.shop .choice.owned .cic::after { content: '✔'; position: absolute; right: 3px; bottom: 1px; font-size: 16px; color: #7dff7a; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.tnode.sel img { border-color: var(--gold-bright); box-shadow: 0 0 12px rgba(240,217,160,0.75); }
.shop .detail .info { display: flex; flex-direction: column; gap: 8px; }
.shop .detail .dh { display: flex; gap: 10px; align-items: center; }
.shop .detail .dh img { width: 60px; height: 60px; border: 2px solid var(--gold-dim); }
.shop .detail h3 { margin: 0 0 2px; font: 700 18px Georgia, serif; color: var(--gold-bright); }
.shop .detail s.full { color: #8a99a8; font-weight: 400; }
.shop .detail .istats .st { font-weight: 600; font-size: 13px; }
.shop .detail .desc { color: #c8d0d8; line-height: 1.5; font-size: 12.5px; }
.shop .detail .btn.buy { align-self: stretch; }
.shop .detail .into-title { font: 700 11px 'Segoe UI', sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-top: 4px; }
.shop .detail .into { display: flex; flex-wrap: wrap; gap: 6px; }
.shop .detail .into img { width: 40px; height: 40px; border: 1px solid #3a4a5a; cursor: pointer; }
.shop .detail .into img:hover { border-color: var(--gold-bright); }
.shop .shop-foot { grid-column: 1 / 4; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--gold-dim); background: rgba(0,0,0,0.3); }
.shop .shop-foot .inv { display: flex; gap: 6px; }
.shop .shop-foot .inv .slot { cursor: pointer; }
.shop .shop-foot .inv .slot.sel { border-color: var(--gold-bright); }
.shop .note { color: #ff9a8a; font-size: 12px; font-weight: 600; }
.shop .note.ok { color: #9fe08a; }
.shop .note.hint { color: var(--muted); font-weight: 500; }
.shop .dim { color: var(--muted); font-size: 12px; }
/* rich item tooltip (shop, inventory) */
.tooltip.shop-tip { z-index: 60; }
.itip { width: 300px; }
.itip-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.itip-head img { width: 48px; height: 48px; border: 1px solid var(--gold-dim); }
.itip-head h4 { margin: 0; }
.itip-cat { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.itip .cost s { color: #8a99a8; font-weight: 400; }
.itip .desc { margin-top: 6px; }
.itip b.kw { color: #f0d9a0; }
.itip b.num, .shop .detail b.num { color: #fff; }
.shop .detail b.kw { color: #f0d9a0; }
.itip-extra { margin-top: 6px; font-size: 11px; color: #9ab0c0; font-style: italic; }

/* ------------------------------------------------------------------ menus */
.screen { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; pointer-events: auto; overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #1b3550 0%, #0a1624 45%, #04080e 100%); }
.screen .bgfx { position: absolute; inset: 0; pointer-events: none; }
.menu-main { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.logo { font: 700 88px/0.95 'Palatino Linotype', 'Book Antiqua', Georgia, serif; letter-spacing: 6px; color: #f4e2b4; text-shadow: 0 0 30px rgba(240,200,120,0.35), 0 4px 0 #6e5a34, 0 8px 18px #000; margin: 0; }
.logo small { display: block; font-size: 22px; letter-spacing: 12px; color: #8fd0ff; text-shadow: 0 0 14px rgba(80,180,255,0.6); margin-top: 10px; }
.tagline { color: var(--muted); font-size: 15px; margin-bottom: 26px; letter-spacing: 1px; }
.menu-main .btn { width: 280px; font-size: 17px; padding: 14px; }
.menu-foot { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: #5a6a7a; font-size: 12px; }
/* the site the game is played on (host.js), and the screen for a browser it can't run in */
.host-link { position: absolute; top: 18px; left: 18px; text-decoration: none; text-transform: none; }
.fatal-title { margin: 22px 0 0; font-size: 26px; color: var(--gold-bright); letter-spacing: 1px; }
.fatal-text { max-width: 560px; margin: 0; color: var(--text); font-size: 15px; line-height: 1.6; }

.select { position: relative; width: min(1320px, 97vw); height: min(820px, 96vh); display: grid; grid-template-columns: 1fr 380px; grid-template-rows: auto 1fr auto; gap: 12px; }
.select .sel-head { grid-column: 1 / 3; display: flex; align-items: center; justify-content: space-between; }
.select .sel-head h2 { margin: 0; font-size: 28px; color: var(--gold-bright); letter-spacing: 3px; }
.select .roster { overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.select .filters { display: flex; gap: 6px; flex-wrap: wrap; }
.select .filters div { padding: 5px 12px; border: 1px solid #2a3a4a; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 12px; }
.select .filters div.on { border-color: var(--gold); color: var(--gold-bright); }
.select .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.select .card { position: relative; cursor: pointer; border: 2px solid #22303e; background: #07101a; transition: transform .12s, border-color .12s; }
.select .card:hover { transform: translateY(-3px); border-color: #6a7a8a; }
.select .card.on { border-color: var(--gold-bright); box-shadow: 0 0 18px rgba(240,217,160,0.45); }
.select .card.taken { opacity: 0.35; pointer-events: none; }
.select .card img { width: 100%; aspect-ratio: 1; display: block; }
.select .card .nm { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 4px; background: linear-gradient(transparent, rgba(0,0,0,0.9)); font-weight: 700; font-size: 12px; text-align: center; }
.select .card .free { position: absolute; top: 3px; right: 3px; font-size: 9px; font-weight: 800; color: #0a1a0a; background: #7dff9a; padding: 1px 4px; border-radius: 2px; }
.select .info { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
/* the splash takes whatever the (fixed size) body leaves, so nothing moves while hovering the kit */
.select .info .splash { flex: 1 1 auto; min-height: 0; background-size: cover; background-position: center top; position: relative; }
.select .info .splash .t { position: absolute; left: 14px; bottom: 10px; }
.select .info .splash h3 { margin: 0; font: 700 32px Georgia, serif; color: #fff; text-shadow: 0 2px 8px #000; }
.select .info .splash .ti { color: var(--gold-bright); font-style: italic; }
.select .info .body { flex: none; padding: 10px 14px 12px; overflow: hidden; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.select .info .kit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.select .info .kit .kit-break { flex-basis: 100%; height: 0; }
.select .info .kit .kit-form { font: 700 11px 'Segoe UI', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #c8a46a; width: 44px; text-align: center; line-height: 1.1; }
.select .info .kit img { width: 44px; height: 44px; border: 1px solid #3a4a5a; cursor: help; transition: border-color .12s, box-shadow .12s; }
.select .info .kit img.on { border-color: var(--gold); box-shadow: 0 0 8px rgba(240,217,160,0.35); }
.select .info .kdesc { display: grid; color: #c8d0d8; line-height: 1.4; }
.select .info .kdesc > div { grid-area: 1 / 1; visibility: hidden; }
.select .info .kdesc > div.on { visibility: visible; }
.select .info .kdesc b { color: #f0d9a0; }
.select .info .kdesc span { color: #8a99a8; }
.select .info .tags span { display: inline-block; padding: 2px 8px; margin-right: 4px; border: 1px solid #3a4a5a; font-size: 11px; color: #b0c0d0; }
/* power curve label (Lane bully, Hyperscaler ...): gold like the frame, a tint per kind of curve */
.select .info .tags span.power { border-color: #8a6a32; color: #f0d9a0; background: linear-gradient(180deg, rgba(200,168,106,0.16), rgba(200,168,106,0.04)); font-weight: 700; cursor: help; }
.select .info .tags span.pw-bully, .select .info .tags span.pw-snowball { border-color: #9a4a32; color: #ffc8a8; background: linear-gradient(180deg, rgba(230,110,70,0.18), rgba(230,110,70,0.04)); }
.select .info .tags span.pw-scaler, .select .info .tags span.pw-hyper { border-color: #4a6aa0; color: #c8dcff; background: linear-gradient(180deg, rgba(110,150,230,0.18), rgba(110,150,230,0.04)); }
.select .opts { grid-column: 1 / 3; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 10px 14px; }
.select .opt { display: flex; flex-direction: column; gap: 4px; }
.select .opt label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.select .seg { display: flex; }
.select .seg div { padding: 6px 12px; border: 1px solid #2a3a4a; margin-right: -1px; cursor: pointer; font-weight: 600; font-size: 12.5px; color: #9aaaba; }
.select .seg div.on { background: rgba(200,168,106,0.16); border-color: var(--gold); color: var(--gold-bright); z-index: 1; }
/* battle spells: the two chosen slots (D, F); a click opens the spell list for that slot */
.select .spells { display: flex; gap: 8px; }
.select .spslot { position: relative; width: 44px; height: 44px; border: 2px solid #6a5630; cursor: pointer; background: #05080c; transition: border-color .12s, box-shadow .12s, transform .08s; }
.select .spslot:hover { border-color: var(--gold-bright); box-shadow: 0 0 10px rgba(240,217,160,0.45); }
.select .spslot:active { transform: translateY(1px); }
.select .spslot img { width: 100%; height: 100%; display: block; }
.select .spslot .k, .spellmenu .sm-spell .k { position: absolute; left: 2px; top: 0; font: 700 11px 'Segoe UI', sans-serif; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.spellmenu { position: fixed; z-index: 40; padding: 10px 12px 12px; background: rgba(8,14,22,0.98); border-color: #8a6c38; }
.spellmenu .sm-head { font: 700 11px 'Segoe UI', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.spellmenu .sm-head b { color: var(--gold-bright); }
.spellmenu .sm-grid { display: grid; grid-template-columns: repeat(5, 64px); gap: 8px 6px; }
.spellmenu .sm-spell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
.spellmenu .sm-spell img { width: 48px; height: 48px; border: 2px solid #2a3a4a; display: block; transition: border-color .1s, transform .08s; }
.spellmenu .sm-spell .k { left: 10px; top: 1px; }
.spellmenu .sm-spell .n { font-size: 11px; color: #b8c4d0; white-space: nowrap; }
.spellmenu .sm-spell:hover img { border-color: #c8d4e0; transform: translateY(-2px); }
.spellmenu .sm-spell:hover .n { color: #fff; }
.spellmenu .sm-spell.on img { border-color: var(--gold-bright); box-shadow: 0 0 10px rgba(240,217,160,0.55); }
.spellmenu .sm-spell.on .n { color: var(--gold-bright); }
.spellmenu .sm-spell.other img { opacity: 0.75; }
.select .lock { margin-left: auto; }

.loading { flex-direction: column; gap: 22px; }
.loading .teams { display: flex; flex-direction: column; gap: 18px; }
.loading .row { display: flex; gap: 12px; justify-content: center; }
.loading .lc { width: 150px; background: #07101a; border: 2px solid #22303e; position: relative; }
.loading .lc.az { border-color: #2a6aa0; } .loading .lc.cr { border-color: #a03a30; }
.loading .lc.me { box-shadow: 0 0 16px rgba(240,217,160,0.6); border-color: var(--gold-bright); }
.loading .lc img { width: 100%; display: block; aspect-ratio: 2 / 3; object-fit: cover; }
.loading .lc .n { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px; background: linear-gradient(transparent, rgba(0,0,0,0.95)); text-align: center; }
.loading .lc .n b { display: block; font-size: 14px; }
.loading .lc .n span { font-size: 11px; color: var(--muted); }
.loading .lc .spl { position: absolute; top: 4px; left: 4px; display: flex; gap: 2px; }
.loading .lc .spl img { width: 20px; height: 20px; border: 1px solid #000; }
.loading .progress { width: min(640px, 80vw); height: 8px; background: #0a1420; border: 1px solid var(--gold-dim); }
.loading .progress div { height: 100%; background: linear-gradient(90deg, #3aa8ff, #f0d9a0); width: 0; transition: width .2s; }
.loading .status { color: var(--muted); font-size: 13px; letter-spacing: 1px; }
.loading .vs { font: 700 30px Georgia, serif; color: var(--gold); text-align: center; letter-spacing: 6px; }
.loading .tip { color: #9ab; font-size: 13px; font-style: italic; max-width: 760px; text-align: center; }

.endscreen { flex-direction: column; gap: 18px; background: rgba(4, 8, 14, 0.82); }
.endscreen h1 { font-size: 110px; margin: 0; letter-spacing: 12px; }
.endscreen h1.win { color: #9fe0ff; text-shadow: 0 0 40px rgba(80,190,255,0.7), 0 6px 0 #1a4a6a; }
.endscreen h1.lose { color: #ff9a8a; text-shadow: 0 0 40px rgba(255,90,70,0.6), 0 6px 0 #6a1a1a; }
.endscreen .scoreboard { position: static; transform: none; pointer-events: auto; }

.modal { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; pointer-events: auto; }
.modal .box { width: min(560px, 94vw); max-height: 90vh; overflow: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.modal h2 { margin: 0; color: var(--gold-bright); letter-spacing: 2px; }
.modal .rowset { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.modal .rowset label { color: #c8d0d8; }
.modal input[type=range] { width: 180px; }
.modal .keys { display: grid; grid-template-columns: 90px 1fr; gap: 4px 12px; font-size: 13px; }
.modal .keys b { color: var(--gold-bright); }
.fps { position: absolute; left: 6px; top: 4px; font: 600 11px monospace; color: #9ab; text-shadow: 0 0 2px #000; pointer-events: none; }

/* ------------------------------------------------------------------ settings: tabs, hotkeys, casting */
.modal .box.wide { width: min(820px, 96vw); }
.settings .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--gold-dim); margin-bottom: 10px; }
.settings .tabs div { padding: 8px 18px; cursor: pointer; color: var(--muted); font: 600 14px 'Palatino Linotype', Georgia, serif; letter-spacing: 1px; border: 1px solid transparent; border-bottom: none; margin-bottom: -1px; }
.settings .tabs div.on { color: var(--gold-bright); border-color: var(--gold-dim); background: var(--panel2); }
.settings .tabs div:hover { color: var(--gold-bright); }
.settings .page { max-height: 62vh; overflow: auto; padding-right: 4px; }
.settings .rowset label small { display: block; color: var(--muted); font-size: 11px; }
.settings select { background: #0a1420; color: var(--text); border: 1px solid #3a4a5a; padding: 4px 6px; }
.settings .note { color: #ffd166; font-size: 12px; min-height: 16px; margin-top: 6px; }
.settings .sgroup { margin-top: 12px; font: 700 12px 'Segoe UI', sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid rgba(200,168,106,0.2); padding-bottom: 3px; }
.settings .sval { display: inline-flex; align-items: center; gap: 10px; }
.settings .sval b { min-width: 42px; text-align: right; color: var(--gold-bright); font-weight: 600; font-variant-numeric: tabular-nums; }
.settings .rowset label { max-width: 440px; }
.settings .hint { color: #b8c4d0; font-size: 12.5px; line-height: 1.5; margin-bottom: 10px; padding: 8px 10px; background: rgba(0,0,0,0.25); border-left: 3px solid var(--gold-dim); }
.bindtable { display: grid; grid-template-columns: 1fr 130px 130px; gap: 3px 8px; align-items: center; }
.bindtable .bgroup { grid-column: 1 / 4; margin-top: 10px; font: 700 12px 'Segoe UI', sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid rgba(200,168,106,0.2); padding-bottom: 3px; }
.bindtable .brow { display: contents; }
.bindtable .bname { color: #d0d8e0; font-size: 13px; }
.bindtable .bkey { text-align: center; padding: 5px 6px; background: #081119; border: 1px solid #34465a; color: #f0f4f8; font: 600 12.5px 'Segoe UI', sans-serif; cursor: pointer; min-height: 27px; }
.bindtable .bkey:hover { border-color: var(--gold); }
.bindtable .bkey.empty { color: #5a6a7a; }
.bindtable .bkey.locked { cursor: default; opacity: 0.6; }
.bindtable .bkey.capturing { border-color: #6fd0ff; color: #6fd0ff; box-shadow: 0 0 10px rgba(111,208,255,0.5); animation: pulse 0.6s infinite alternate; }
.bfoot { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.bfoot .note { margin: 0; }
.castall { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.casttable { display: flex; flex-direction: column; gap: 6px; }
.casttable .crow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.casttable .cname { color: #d0d8e0; font-size: 13px; }
.casttable .cname em { color: var(--gold-bright); font-style: normal; font-weight: 700; margin-left: 6px; }
.casttable .seg { display: flex; }
.casttable .seg div { padding: 5px 11px; border: 1px solid #2a3a4a; margin-right: -1px; cursor: pointer; font-weight: 600; font-size: 12px; color: #9aaaba; }
.casttable .seg div.on { background: rgba(200,168,106,0.16); border-color: var(--gold); color: var(--gold-bright); position: relative; z-index: 1; }
.toast.info { background: rgba(10,18,30,0.9); color: #cfe6ff; border-color: rgba(120,180,255,0.4); }
.ab.channeling { border-color: #c98bff; box-shadow: 0 0 12px #c98bff; }

/* champion select: painted splash as a dim full-screen backdrop, larger splash panel */
.screen .selbg { position: absolute; inset: -30px; background-size: cover; background-position: 58% 35%; filter: blur(14px) brightness(0.32) saturate(1.2); transition: background-image .4s; pointer-events: none; }
.select .info .splash { background-size: cover; background-position: 60% 25%; box-shadow: inset 0 -80px 60px -30px rgba(7,11,18,0.95); }
.loading .lc img { object-position: 60% 25%; }
.modal .box { background: rgb(9, 16, 25); }

/* turret status in the target frame: plates, Reinforced Armor, Bulwark, Crystalline Overgrowth */
.target-frame .tower-status { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 4px; font-size: 11px; font-weight: 600; }
.target-frame .tower-status .plates { display: inline-flex; gap: 2px; }
.target-frame .tower-status .plates i { width: 9px; height: 6px; background: #3a4048; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); }
.target-frame .tower-status .plates i.on { background: linear-gradient(#ffe39a, #b8862a); }
.target-frame .tower-status .ts-arm { color: #9fc8ff; }
.target-frame .tower-status .ts-inv { color: #b0b0b0; }
.target-frame .tower-status .ts-bul { color: #ffd166; }
.target-frame .tower-status .ts-crys { color: #e0a0ff; text-shadow: 0 0 6px rgba(217,139,255,0.7); }

/* painted splash art: until a champion's painting is ready its frame shows a softly lit backdrop in the
   champion's colour with a sheen sweeping across (never the old placeholder render) */
.loading .lc .art { position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  background: radial-gradient(ellipse at 55% 32%, color-mix(in srgb, var(--cc, #3a5a7a) 38%, #0b1522), #05090e 78%); }
.loading .lc .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 25%; opacity: 0; transform: scale(1.04); transition: opacity .7s ease, transform 1.4s ease; }
.loading .lc .art.ready img { opacity: 1; transform: none; }
.loading .lc .art .paint, .select .info .splash:not(.ready)::after { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, transparent 32%, rgba(255,240,210,0.09) 46%, transparent 60%); background-size: 260% 100%; animation: paintSheen 1.8s linear infinite; }
.select .info .splash:not(.ready)::after { content: ''; }
.loading .lc .art.ready .paint { display: none; }
@keyframes paintSheen { from { background-position: 160% 0; } to { background-position: -110% 0; } }
.select .info .splash:not(.ready) { background: radial-gradient(ellipse at 60% 30%, color-mix(in srgb, var(--cc, #3a5a7a) 34%, #0b1522), #05090e 80%); }

/* ------------------------------------------------------------------ runes: builder, badges, tooltip */
.modal.runemodal { z-index: 45; }
.runebox { width: min(1080px, 96vw) !important; max-height: none !important; overflow: hidden !important; padding: 16px 20px 14px !important; gap: 10px !important;
  background: radial-gradient(ellipse at 18% 18%, color-mix(in srgb, var(--p1) 16%, transparent), transparent 55%),
              radial-gradient(ellipse at 88% 30%, color-mix(in srgb, var(--p2) 12%, transparent), transparent 50%), rgb(8, 13, 21) !important; }
.runebox .rhead { display: flex; align-items: center; gap: 10px; }
.runebox .rhead h2 { flex: 1; margin: 0; font-size: 24px; letter-spacing: 3px; }
.runebox .rhead h2 span { color: var(--muted); font-size: 16px; letter-spacing: 1px; margin-left: 10px; }
.runebox .rcols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
.runebox .rcol { padding: 12px 14px; border: 1px solid rgba(200,168,106,0.18); background: rgba(0,0,0,0.25); display: flex; flex-direction: column; gap: 8px; }
.runebox .rcol.primary { border-top: 2px solid var(--p1); }
.runebox .rcol.secondary { border-top: 2px solid var(--p2); }
.runebox .rpaths { display: flex; gap: 10px; justify-content: center; padding-bottom: 4px; }
.runebox .rpath { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: radial-gradient(#141c26, #06090e); box-shadow: inset 0 0 0 2px #2a3440; filter: grayscale(0.7) brightness(0.65); transition: filter .12s, transform .12s, box-shadow .12s; }
.runebox .rpath img { width: 34px; height: 34px; }
.runebox .rcol.secondary .rpath img { width: 30px; height: 30px; }
.runebox .rpath:hover { filter: none; transform: translateY(-1px); }
.runebox .rpath.on { filter: none; box-shadow: inset 0 0 0 2px var(--c), 0 0 14px color-mix(in srgb, var(--c) 60%, transparent); }
.runebox .rtitle { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-bottom: 2px; }
.runebox .rtitle b { font: 700 18px 'Palatino Linotype', Georgia, serif; letter-spacing: 2px; text-transform: uppercase; }
.runebox .rtitle span { font-size: 11.5px; color: var(--muted); }
.runebox .rrow { display: grid; grid-template-columns: 92px 1fr; align-items: center; padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.05); }
.runebox .rlabel { font: 700 11px 'Segoe UI', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #7f8e9d; }
.runebox .ropts { display: flex; justify-content: space-evenly; gap: 8px; }
.runebox .rune { position: relative; width: 58px; height: 58px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #16202b, #05080c 72%); box-shadow: inset 0 0 0 2px #26303b; transition: transform .1s, box-shadow .12s, filter .12s; filter: grayscale(0.85) brightness(0.5); }
.runebox .rune img { width: 50px; height: 50px; pointer-events: none; }
.runebox .rune.key { width: 84px; height: 84px; }
.runebox .rune.key img { width: 76px; height: 76px; }
.runebox .rune.small { width: 50px; height: 50px; }
.runebox .rune.small img { width: 42px; height: 42px; }
.runebox .rune:hover { filter: grayscale(0.2) brightness(0.9); transform: scale(1.05); }
.runebox .rcol.primary .rune.on { filter: none; box-shadow: inset 0 0 0 2px var(--p1), 0 0 16px color-mix(in srgb, var(--p1) 55%, transparent); }
.runebox .rcol.secondary .rune.on { filter: none; box-shadow: inset 0 0 0 2px var(--p2), 0 0 14px color-mix(in srgb, var(--p2) 50%, transparent); }
.runebox .rshards { margin-top: 4px; padding-top: 8px; border-top: 1px solid rgba(200,168,106,0.2); display: flex; flex-direction: column; gap: 6px; }
.runebox .rsubtitle { font: 700 12px 'Segoe UI', sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); text-align: center; }
.runebox .rshardrow { display: grid; grid-template-columns: 92px repeat(3, 1fr); align-items: center; justify-items: center; }
.runebox .shard { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: #070b10; box-shadow: inset 0 0 0 1.5px #2a3440; filter: grayscale(0.9) brightness(0.5); transition: filter .12s, box-shadow .12s; }
.runebox .shard img { width: 26px; height: 26px; }
.runebox .shard:hover { filter: none; }
.runebox .shard.on { filter: none; box-shadow: inset 0 0 0 1.5px var(--gold-bright), 0 0 10px rgba(240,217,160,0.45); }
/* rune details: a tooltip beside the cursor */
.tooltip.rune-tip { z-index: 60; width: 340px; padding: 10px 13px 11px; }
.rune-tip .rtt { display: flex; gap: 11px; align-items: center; margin-bottom: 7px; }
.rune-tip .rtt img { width: 52px; height: 52px; flex: none; }
.rune-tip h4 { margin: 0 0 2px; font: 700 16px 'Palatino Linotype', Georgia, serif; color: var(--gold-bright); }
.rune-tip .rmeta { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.rune-tip .rdesc, .rtip .desc { color: #d0d8e0; font-size: 13px; line-height: 1.5; }
.rdesc b.num, .rtip b.num { color: #fff; }
.rdesc b.kw, .rtip b.kw { color: #f0d9a0; }
.rdesc .dim, .rtip .dim { color: #7f8e9d; font-weight: 400; }

/* keystone + secondary path badge */
.rbadge { position: relative; display: inline-block; width: 30px; height: 30px; vertical-align: middle; flex: none; }
.rbadge .k { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(#16202b, #05080c); box-shadow: 0 0 0 1px #3a4652; display: block; }
.rbadge .s { position: absolute; right: -5px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%; background: #05080c; box-shadow: 0 0 0 1px #3a4652; }

/* champion select: rune page row */
.select .runeopt { position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 3px 12px 3px 3px; margin-left: -3px; border: 1px solid transparent; border-radius: 26px; transition: border-color .12s, background .12s; }
.select .runeopt:hover { border-color: rgba(200,168,106,0.55); background: rgba(200,168,106,0.07); }
.select .runeopt:hover .rbadge .k { box-shadow: 0 0 0 1px var(--gold-bright), 0 0 10px rgba(240,217,160,0.45); }
.select .runeopt .redit { position: absolute; left: 31px; top: -3px; width: 17px; height: 17px; border-radius: 50%; background: #0a1420; border: 1px solid #6a5630; color: var(--gold); font-size: 10px; line-height: 15px; text-align: center; pointer-events: none; }
.select .runeopt:hover .redit { color: #fff; border-color: var(--gold-bright); }
.select .runeopt .rbadge, .select .runeopt .rbadge .k { width: 40px; height: 40px; }
.select .runeopt .rbadge .s { width: 20px; height: 20px; }
.select .runeopt .rname { display: flex; flex-direction: column; font-size: 12px; line-height: 1.25; min-width: 120px; }
.select .runeopt .rname b { color: var(--gold-bright); font-size: 13px; }
.select .runeopt .rname span { color: var(--muted); }

/* loading screen cards and scoreboard */
.loading .lc .rbadge { position: absolute; top: 4px; right: 8px; width: 28px; height: 28px; }
.loading .lc .rbadge .k { width: 28px; height: 28px; }
.loading .lc .rbadge .s { width: 14px; height: 14px; }
.scoreboard .rbadge { width: 26px; height: 26px; margin-left: 4px; }
.scoreboard .rbadge .k { width: 26px; height: 26px; }
.scoreboard .rbadge .s { width: 13px; height: 13px; }

/* HUD: keystone on the portrait + rune tooltip */
.portrait .keystone { position: absolute; left: -4px; bottom: -2px; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(#16202b, #04070b); box-shadow: 0 0 0 1.5px var(--gold-dim); pointer-events: auto; transition: filter .2s, box-shadow .2s; }
.portrait .keystone img { width: 34px; height: 34px; display: block; }
.portrait .keystone.cd { filter: grayscale(0.9) brightness(0.55); }
.portrait .keystone.ready { box-shadow: 0 0 0 1.5px var(--gold), 0 0 10px rgba(240,217,160,0.55); }
.tooltip .rtip { width: 360px; }
.rtip h4 { margin-bottom: 6px !important; }
.rtip-row { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; font-size: 12px; }
.rtip-row img { width: 28px; height: 28px; flex: none; }
.rtip-row.big img { width: 40px; height: 40px; }
.rtip-row .desc { font-size: 11.5px !important; line-height: 1.35 !important; }
.rtip-sep { height: 1px; background: rgba(200,168,106,0.2); margin: 6px 0; }
.rtip-shards { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: 11px; color: #b8c4d0; }
.rtip-shard { display: flex; align-items: center; gap: 6px; }
.rtip-shard img { width: 18px; height: 18px; }
.buff img.ri { width: 26px; height: 26px; }

/* champion select: painted head icons fade in; until then a softly lit frame in the champion's colour */
.select .card .face { position: relative; aspect-ratio: 1; overflow: hidden; background: radial-gradient(ellipse at 50% 36%, color-mix(in srgb, var(--cc, #3a5a7a) 42%, #0b1522), #05090e 82%); }
.select .card .face img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(1.04); transition: opacity .5s ease, transform .9s ease; }
.select .card .face.ready img { opacity: 1; transform: none; }
.select .card .face:not(.ready)::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 32%, rgba(255,240,210,0.09) 46%, transparent 60%); background-size: 260% 100%; animation: paintSheen 1.8s linear infinite; }
/* ping wheel (ui/pingwheel.js): opens at the cursor while the ping key is held; the mouse never reaches it */
.pingwheel { position: fixed; left: 0; top: 0; z-index: 35; pointer-events: none; transform: translate(-50%, -50%) scale(0.82); opacity: 0; transition: transform .09s ease-out, opacity .09s ease-out; visibility: hidden; }
.pingwheel.open { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; }
.pingwheel svg { position: absolute; inset: 0; overflow: visible; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.65)); }
.pingwheel .pw-seg { fill: url(#pwBase); stroke: rgba(200,168,106,0.42); stroke-width: 1.2; transition: fill-opacity .08s; }
.pingwheel .pw-seg.on { fill: var(--c); fill-opacity: 0.34; stroke: var(--c); stroke-opacity: 0.95; stroke-width: 1.8; }
.pingwheel .pw-glow { opacity: 0; transition: opacity .08s; }
.pingwheel .pw-hub { fill: rgba(5,9,14,0.92); stroke: rgba(200,168,106,0.6); stroke-width: 1.5; }
.pingwheel .pw-ic { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; opacity: 0.8; transition: transform .08s ease-out, opacity .08s; }
.pingwheel .pw-ic.on { opacity: 1; transform: scale(1.22); filter: drop-shadow(0 0 6px var(--c)); }
.pingwheel .pw-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 74px; text-align: center; font: 700 11px/1.15 'Segoe UI', sans-serif; letter-spacing: .2px; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
.pingwheel .pw-label small { display: block; margin-top: 2px; font-size: 10px; font-weight: 600; color: #d8d0b8; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ping lines in the chat log */
.log .ping { color: #e0d8c0; }
.log .ping img { vertical-align: -4px; }
.log .ping .pc-face { width: 17px; height: 17px; border-radius: 50%; margin-right: 4px; box-shadow: 0 0 0 1px #3aa8ff; }
.log .ping .pc-ic { width: 20px; height: 20px; margin: 0 2px 0 1px; vertical-align: -6px; }
.log .ping .pc-name { color: #8fd0ff; }
.log .ping .pc-name.me { color: #ffd98a; }
.log .ping .pc-type { font-weight: 700; }
.log .ping .pc-tgt { font-weight: 600; margin-left: 2px; }
.log .ping .pc-tgt.ally { color: #8fd0ff; } .log .ping .pc-tgt.enemy { color: #ff9a8a; } .log .ping .pc-tgt.neutral { color: #f0d9a0; }
/* ------------------------------------------------------------------ end-of-game cinematic (render/endcine.js) */
/* the HUD and health bars fade out as it starts; letterbox bars, vignette, flash and dim live in .cine (inside
   #ui, under the end screen, whose backdrop the dimmed layer becomes). The banner is canvases laid out in vh
   and animated with transforms and opacity only (compositor work, no repaints). */
body.cine-on #hud, body.cine-on canvas#overlay { opacity: 0; transition: opacity .45s ease; }
body.cine-on #hud * { pointer-events: none !important; }
.cine { position: absolute; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; }
.cine.skippable { pointer-events: auto; cursor: var(--cursor-default); }
.cine-vig { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; background: radial-gradient(ellipse 78% 72% at 50% 46%, rgba(0,0,0,0) 48%, rgba(3,5,10,.42) 80%, rgba(0,0,0,.78) 100%); }
.cine.lose .cine-vig { background: radial-gradient(ellipse 78% 72% at 50% 46%, rgba(0,0,0,0) 42%, rgba(14,3,4,.5) 78%, rgba(0,0,0,.86) 100%); }
.cine.on .cine-vig { opacity: 1; }
.cine-bar { position: absolute; left: 0; right: 0; height: 8.5vh; background: #000; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.cine-bar.top { top: 0; transform: translateY(-101%); }
.cine-bar.bot { bottom: 0; transform: translateY(101%); }
.cine.on .cine-bar { transform: none; }
.cine.on.out .cine-bar.top { transform: translateY(-101%); }
.cine.on.out .cine-bar.bot { transform: translateY(101%); }
.cine-flash { position: absolute; inset: 0; opacity: 0; will-change: opacity; background: radial-gradient(circle at 50% 50%, #fff 0%, rgba(255,248,232,.92) 28%, rgba(255,238,205,.5) 62%, rgba(255,238,205,.16) 100%); }
.cine-dim { position: absolute; inset: 0; background: rgba(4,8,14,.82); opacity: 0; transition: opacity .45s ease; }
.cine.dim .cine-dim { opacity: 1; }
.cine-black { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .15s linear; }
.cine-black.on { opacity: 1; }

/* VICTORY / DEFEAT banner (a 130 x 50 vh box; endcine.js Banner places its canvases). The final look is the
   default style, `.go` plays the entrance (animation fill `both`), `.fly` glides it onto the end screen. */
.cine-banner { position: absolute; left: 50%; top: 41%; width: 130vh; height: 50vh; margin: -25vh 0 0 -65vh; transform-origin: 0 0; pointer-events: none; }
.cine-banner.fly { transition: transform .5s cubic-bezier(.5,0,.2,1); }
.cine-banner.pop { animation: cbFade .3s ease-out both; }
.cine-banner canvas, .cb-crest { position: absolute; display: block; }
.cb-crest canvas { left: 0; top: 0; width: 100%; height: 100%; }
.cb-rays { animation: cbSpin 30s linear infinite; }
.cb-band { position: absolute; left: 0; right: 0; top: 64%; height: 13.5vh; margin-top: -6.75vh; background: linear-gradient(90deg, rgba(5,9,16,0) 0%, rgba(5,9,16,.86) 22%, rgba(5,9,16,.86) 78%, rgba(5,9,16,0) 100%); }
.cb-band::before, .cb-band::after { content: ''; position: absolute; left: 6%; right: 6%; height: .28vh; background: linear-gradient(90deg, rgba(232,199,122,0), #e8c77a 25%, #fff3cc 50%, #e8c77a 75%, rgba(232,199,122,0)); }
.cb-band::before { top: 0; }
.cb-band::after { bottom: 0; }
.cine-banner.lose .cb-band::before, .cine-banner.lose .cb-band::after { background: linear-gradient(90deg, rgba(190,60,48,0), #b8483c 25%, #f0a090 50%, #b8483c 75%, rgba(190,60,48,0)); }
.cb-word { position: absolute; left: 50%; top: 64%; width: 0; height: 0; }
.cb-sheen { opacity: 0; }
.cb-sparks { position: absolute; left: 50%; top: 40%; width: 0; height: 0; }
.cb-sparks i { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; background: radial-gradient(circle, #fff 0%, #ffe6a6 35%, rgba(255,200,90,0) 70%); opacity: 0; }
.cb-sparks i.st { width: calc(var(--s) * 1.8); height: calc(var(--s) * 1.8); border-radius: 0; background: #fff6d6; clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); }
.cine-banner.lose .cb-sparks { top: 8%; }
.cine-banner.lose .cb-sparks i { background: radial-gradient(circle, #ffb08a 0%, #d0452e 40%, rgba(120,20,10,0) 72%); }
/* entrances: a win's letters converge while the word settles, a light sweeps across it letter by letter and
   sparkles burst out; a loss drops in heavily, the crest shakes as it cracks and ash drifts down */
.cine-banner.go .cb-rays { animation: cbFade .9s ease-out .1s both, cbSpin 30s linear infinite; }
.cine-banner.go .cb-glow { animation: cbGlow 1.2s ease-out both; }
.cine-banner.go.win .cb-crest { animation: cbCrestWin .85s cubic-bezier(.18,.9,.22,1) both; }
.cine-banner.go.lose .cb-crest { animation: cbCrestLose .9s cubic-bezier(.3,.8,.3,1) both, cbShake .34s ease-out .62s; }
.cine-banner.go .cb-crack { animation: cbFade .16s ease-in .58s both; }
.cine-banner.go .cb-band { animation: cbBand .6s cubic-bezier(.2,.8,.2,1) .18s both; }
.cine-banner.go.win .cb-word { animation: cbWordWin .95s cubic-bezier(.16,.84,.3,1) .12s both; }
.cine-banner.go.win .cb-l { animation: cbLetter .95s cubic-bezier(.16,.84,.3,1) .12s both; }
.cine-banner.go.win .cb-sheen { animation: cbLetter .95s cubic-bezier(.16,.84,.3,1) .12s both, cbSheen .5s ease-in-out calc(.85s + var(--i) * .055s) both; }
.cine-banner.go.lose .cb-word { animation: cbWordLose .8s cubic-bezier(.3,.7,.35,1) .1s both; }
.cine-banner.go.win .cb-sparks i { animation: cbSpark 1.4s cubic-bezier(.08,.7,.3,1) var(--t) both; }
.cine-banner.go.lose .cb-sparks i { animation: cbAsh 2.2s linear var(--t) both; }
@keyframes cbSpin { to { transform: rotate(360deg); } }
@keyframes cbFade { from { opacity: 0; } }
@keyframes cbGlow { 0% { opacity: 0; transform: scale(.4); } 35% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: none; } }
@keyframes cbCrestWin { 0% { opacity: 0; transform: scale(1.5) rotate(-4deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes cbCrestLose { 0% { opacity: 0; transform: translateY(-6vh) scale(1.06); } 62% { opacity: 1; transform: translateY(.7vh) scale(.99); } 100% { opacity: 1; transform: none; } }
@keyframes cbShake { 0%, 100% { translate: 0 0; } 20% { translate: -.6vh .3vh; } 45% { translate: .5vh -.2vh; } 70% { translate: -.25vh .1vh; } }
@keyframes cbBand { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes cbWordWin { 0% { opacity: 0; transform: scale(1.3); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes cbLetter { from { transform: translateX(var(--dx)); } to { transform: none; } }
@keyframes cbSheen { 0% { opacity: 0; } 45% { opacity: .85; } 100% { opacity: 0; } }
@keyframes cbWordLose { 0% { opacity: 0; transform: translateY(-9vh) scale(1.3); } 58% { opacity: 1; transform: translateY(.5vh) scale(.96); } 76% { transform: translateY(-.2vh) scale(1.01); } 100% { opacity: 1; transform: none; } }
@keyframes cbSpark { 0% { opacity: 0; transform: rotate(var(--a)) translateX(3vh) scale(.3); } 16% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(1); } }
@keyframes cbAsh { 0% { opacity: 0; transform: translate(var(--x), -2vh); } 18% { opacity: .9; } 100% { opacity: 0; transform: translate(calc(var(--x) + var(--w)), var(--d)); } }

/* the end screen after the cinematic: an empty header slot (the banner sits on it, scaled into the slot; the
   bottom of its box is empty, so the slot cuts it short), the cinematic's dim as the backdrop. Built hidden
   (es-cine), revealed with es-show. */
.endscreen .es-banner-slot { position: relative; flex: none; width: 58.5vh; height: 18.2vh; margin-top: -1vh; }
.endscreen.es-cine { background: transparent; }
/* (nothing in it takes the mouse until it is shown: clicks go to the cinematic, which skips on a click) */
.endscreen.es-cine:not(.es-show), .endscreen.es-cine:not(.es-show) * { pointer-events: none !important; }
/* (not quite 0 and on their own layers while hidden: they are rasterized, images decoded, before the reveal;
   .01 showed the buttons faintly on the black letterbox bar) */
.endscreen.es-cine > .scoreboard, .endscreen.es-cine > .es-btns { position: relative; top: 0; left: 0; z-index: 1; opacity: .002; transform: translateY(1.8vh); will-change: opacity, transform; }
.endscreen.es-cine.es-show > .scoreboard, .endscreen.es-cine.es-show > .es-btns { opacity: 1; transform: none; transition: opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.endscreen.es-cine.es-show > .es-btns { transition-delay: .06s; }