:root {
  --bg: #010a13;
  --ink: #f0e6d2;
  --muted: #a09b8c;
  --gold: #c8aa6e;
  --gold-hi: #f0e6d2;
  --gold-dk: #785a28;
  --teal: #0ac8b9;
  --navy: #091428;
  --panel: rgba(1, 10, 19, 0.82);
  --display: "Cinzel", "Marcellus", Georgia, serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden;
  font-family: var(--body); user-select: none; }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; cursor: crosshair; }
button { font-family: inherit; }

.panel.hidden { display: none !important; }

/* ---------- Start menu (full screen overlay) ---------- */
.menu { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: clamp(6px, 1.4vh, 16px); padding: clamp(8px, 2vh, 28px) clamp(16px, 4vw, 64px);
  background: radial-gradient(ellipse at 50% 30%, rgba(9, 20, 40, 0.55), rgba(1, 10, 19, 0.9) 75%);
  backdrop-filter: blur(6px) saturate(0.85); -webkit-backdrop-filter: blur(6px) saturate(0.85); text-align: center; }
.menu > * { width: min(1040px, 100%); }

.m-head h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(28px, 6vh, 56px);
  letter-spacing: 0.18em; color: var(--gold-hi); text-shadow: 0 0 24px rgba(200, 170, 110, 0.35), 0 2px 0 #000; }
.m-head h1 span { color: var(--gold); margin-left: 0.25em; }
.sub { margin: 2px 0 0; color: var(--muted); font-size: clamp(11px, 1.7vh, 14px); letter-spacing: 0.3em; text-transform: uppercase; }
.m-head::after { content: ""; display: block; height: 1px; width: 60%; margin: clamp(6px, 1.2vh, 12px) auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); }

.m-label { margin: 0 0 clamp(4px, 0.8vh, 8px); font-family: var(--display); font-size: clamp(10px, 1.6vh, 13px);
  letter-spacing: 0.3em; color: var(--gold); font-weight: 600; text-align: left; }
.m-label small { color: var(--muted); font-family: var(--body); letter-spacing: 0.1em; margin-left: 6px; }

/* mode cards */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.2vw, 16px); }
.mode-card { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center;
  text-align: left; padding: clamp(8px, 1.6vh, 16px) clamp(10px, 1.4vw, 18px); color: var(--ink);
  background: linear-gradient(180deg, rgba(30, 40, 50, 0.7), rgba(9, 20, 40, 0.8));
  border: 1px solid var(--gold-dk); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.mode-card:hover { border-color: var(--gold); transform: translateY(-1px); }
.mode-card.on { border-color: var(--gold-hi); background: linear-gradient(180deg, rgba(120, 90, 40, 0.38), rgba(9, 20, 40, 0.85));
  box-shadow: 0 0 0 1px var(--gold), 0 0 22px rgba(200, 170, 110, 0.35), inset 0 0 24px rgba(200, 170, 110, 0.12); }
.mode-card svg { grid-row: 1 / 4; width: clamp(30px, 5.4vh, 50px); height: clamp(30px, 5.4vh, 50px); color: var(--gold); }
.mode-card.on svg { color: var(--gold-hi); }
.mode-card .mc-name { font-family: var(--display); font-weight: 800; letter-spacing: 0.16em; font-size: clamp(13px, 2.3vh, 20px); }
.mode-card .mc-desc { font-size: clamp(10px, 1.55vh, 12.5px); color: var(--muted); line-height: 1.35; margin: 2px 0 3px; }
.mode-card .mc-rec { font-size: clamp(10px, 1.5vh, 12px); color: var(--gold); font-weight: 700; letter-spacing: 0.05em; }
.desc { display: none; }

/* champions + kit */
.champ-wrap { display: grid; grid-template-columns: auto 1fr; gap: clamp(10px, 1.6vw, 22px); align-items: stretch; }
.champs { display: flex; gap: clamp(8px, 1vw, 14px); }
.champ-card { position: relative; width: clamp(92px, 11vw, 130px); height: clamp(130px, 25vh, 230px); padding: 0; overflow: hidden;
  background: #0a1428 center top / cover no-repeat; border: 2px solid var(--gold-dk); cursor: pointer;
  filter: grayscale(0.55) brightness(0.7); transition: filter .15s, border-color .15s, box-shadow .15s, transform .15s; }
.champ-card:hover { filter: grayscale(0.2) brightness(0.9); }
.champ-card.on { filter: none; border-color: var(--gold-hi); box-shadow: 0 0 0 1px var(--gold), 0 0 26px rgba(200, 170, 110, 0.55); transform: translateY(-3px); }
.champ-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(1, 10, 19, 0.95)); }
.champ-card .cn { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 6px 4px; font-family: var(--display);
  font-weight: 800; letter-spacing: 0.14em; font-size: clamp(11px, 1.8vh, 15px); color: var(--gold-hi); text-transform: uppercase; }

.kit { text-align: left; padding: clamp(8px, 1.6vh, 16px) clamp(12px, 1.6vw, 20px); display: flex; flex-direction: column; justify-content: center;
  gap: clamp(5px, 1vh, 10px); background: linear-gradient(180deg, rgba(30, 40, 50, 0.6), rgba(9, 20, 40, 0.8)); border: 1px solid var(--gold-dk); }
.kit .kit-title { font-family: var(--display); font-weight: 800; letter-spacing: 0.16em; font-size: clamp(14px, 2.4vh, 22px); color: var(--gold-hi); }
.kit .kit-title small { font-family: var(--body); font-weight: 500; letter-spacing: 0.05em; color: var(--muted); font-size: 0.55em; margin-left: 8px; }
.kit-row { display: flex; align-items: center; gap: 12px; }
.kit-row img { width: clamp(30px, 5.2vh, 46px); height: clamp(30px, 5.2vh, 46px); border: 1px solid var(--gold); display: block; background: #000; }
.kit-row .kk { display: inline-block; min-width: 22px; text-align: center; padding: 1px 6px; margin-right: 8px; font-weight: 700; font-size: 12px;
  color: var(--gold-hi); background: #1a1c21; border: 1px solid var(--gold-dk); border-bottom-width: 3px; border-radius: 4px; }
.kit-row .kn { font-weight: 600; font-size: clamp(12px, 1.9vh, 15px); }
.kit-aa { font-size: clamp(10px, 1.6vh, 13px); color: var(--muted); }
.kit-aa b { color: var(--teal); }
/* skin strip: League's square skin tiles, gold ring on the selected one */
.skins { display: flex; gap: 6px; flex-wrap: wrap; }
.skin { position: relative; width: clamp(40px, 6.4vh, 56px); height: clamp(40px, 6.4vh, 56px); padding: 0; cursor: pointer;
  background: #0a1428 center / cover no-repeat; border: 1px solid var(--gold-dk); filter: brightness(0.6) grayscale(0.4);
  transition: filter .15s, border-color .15s, box-shadow .15s; }
.skin:hover { filter: none; }
.skin.on { filter: none; border-color: var(--gold-hi); box-shadow: 0 0 0 1px var(--gold), 0 0 12px rgba(200, 170, 110, 0.5); }
.skin span { position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font-size: 11px; color: var(--gold-hi); background: rgba(1, 10, 19, 0.92); border: 1px solid var(--gold-dk); padding: 1px 6px;
  opacity: 0; transition: opacity .12s; z-index: 2; }
.skin:hover span, .skin.on span { opacity: 1; }

/* difficulty */
.diffs { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--gold-dk); background: rgba(9, 20, 40, 0.8); }
.diffs button { background: transparent; color: var(--muted); border: 0; border-right: 1px solid var(--gold-dk);
  padding: clamp(6px, 1.2vh, 11px) 6px; font-family: var(--display); font-weight: 600; letter-spacing: 0.1em; font-size: clamp(11px, 1.8vh, 14px); cursor: pointer; }
.diffs button:last-child { border-right: 0; }
.diffs button:hover { color: var(--gold-hi); background: rgba(200, 170, 110, 0.1); }
.diffs button.on { color: #1e1407; background: linear-gradient(180deg, #e4cc94, var(--gold)); font-weight: 800; }
.diffs button small { display: block; font-family: var(--body); font-size: 10px; opacity: 0.65; letter-spacing: 0; }

/* play row + legend */
.m-play { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.play { min-width: clamp(190px, 22vw, 280px); padding: clamp(8px, 1.8vh, 16px) 36px; cursor: pointer; font-family: var(--display); font-weight: 800;
  letter-spacing: 0.28em; font-size: clamp(16px, 3vh, 26px); color: #1e1407; border: 2px solid var(--gold-hi);
  background: linear-gradient(180deg, #f0e6d2, var(--gold) 55%, #a98a4c); box-shadow: 0 0 24px rgba(200, 170, 110, 0.45); transition: transform .12s, box-shadow .12s, filter .12s; }
.play:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 0 38px rgba(240, 210, 140, 0.7); }
.play small { font-size: 0.5em; letter-spacing: 0.08em; opacity: 0.75; }
.go { margin: 0; color: var(--muted); font-size: clamp(11px, 1.7vh, 13px); }
.go b, .kbd { color: var(--gold-hi); }

.keys { display: flex; flex-wrap: wrap; gap: 6px clamp(10px, 1.6vw, 22px); justify-content: center; font-size: clamp(10px, 1.6vh, 13px); color: var(--muted);
  padding-top: clamp(4px, 1vh, 10px); border-top: 1px solid rgba(120, 90, 40, 0.5); }
.keys div { display: flex; align-items: center; gap: 6px; }
.keys b { min-width: 22px; text-align: center; color: var(--gold-hi); background: #1a1c21; border: 1px solid var(--gold-dk); border-bottom-width: 3px;
  border-radius: 4px; padding: 1px 7px; font-size: 0.95em; }

/* ---------- Game over ---------- */
.over { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 1.4vh, 14px);
  background: radial-gradient(ellipse at 50% 45%, rgba(60, 10, 14, 0.45), rgba(1, 10, 19, 0.88) 70%);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); text-align: center; padding: 16px; }
.over h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(30px, 7vh, 64px); letter-spacing: 0.3em; padding-left: 0.3em;
  color: #e84057; text-shadow: 0 0 28px rgba(232, 64, 87, 0.5), 0 2px 0 #000; }
.killer { margin: 0; color: var(--muted); font-size: clamp(12px, 2vh, 16px); min-height: 1.2em; }
.big-score { display: flex; flex-direction: column; align-items: center; padding: clamp(6px, 1.6vh, 16px) clamp(40px, 6vw, 90px);
  border: 1px solid var(--gold-dk); background: linear-gradient(180deg, rgba(30, 40, 50, 0.6), rgba(9, 20, 40, 0.85)); box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); }
.big-score span { font-family: var(--display); letter-spacing: 0.4em; font-size: clamp(10px, 1.7vh, 13px); color: var(--gold); }
.big-score b { font-family: var(--display); font-weight: 800; font-size: clamp(40px, 11vh, 100px); line-height: 1.05; color: var(--gold-hi); text-shadow: 0 0 24px rgba(200, 170, 110, 0.5); }
.best { margin: 0; color: var(--gold); font-weight: 700; letter-spacing: 0.05em; min-height: 1.2em; font-size: clamp(12px, 2vh, 16px); }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: min(760px, 92vw); }
.stats div { background: rgba(9, 20, 40, 0.8); border: 1px solid var(--gold-dk); padding: clamp(6px, 1.2vh, 12px) 6px; }
.stats span { display: block; font-size: clamp(9px, 1.4vh, 11px); color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; }
.stats b { font-family: var(--display); font-size: clamp(16px, 3vh, 26px); color: var(--gold-hi); }
.over-btns { display: flex; gap: 14px; margin-top: clamp(4px, 1vh, 10px); }
.over-btns .play { min-width: 0; font-size: clamp(14px, 2.4vh, 20px); padding: clamp(8px, 1.6vh, 14px) 30px; letter-spacing: 0.2em; }
.ghost { cursor: pointer; padding: clamp(8px, 1.6vh, 14px) 30px; font-family: var(--display); font-weight: 800; letter-spacing: 0.2em; font-size: clamp(14px, 2.4vh, 20px);
  color: var(--gold-hi); background: rgba(9, 20, 40, 0.8); border: 2px solid var(--gold-dk); transition: border-color .12s, background .12s; }
.ghost:hover { border-color: var(--gold); background: rgba(200, 170, 110, 0.15); }
.ghost small { font-size: 0.5em; letter-spacing: 0.08em; opacity: 0.7; }

/* profile strip: account level, ranked tier for the selected mode, daily missions */
.profile { display: grid; grid-template-columns: 1fr 1.1fr 1.6fr; gap: clamp(8px, 1.2vw, 16px); margin: clamp(4px, 1vh, 10px) 0; }
.profile > div { display: flex; align-items: center; gap: 10px; padding: 6px 12px; text-align: left;
  background: linear-gradient(180deg, rgba(30, 40, 50, 0.55), rgba(9, 20, 40, 0.75)); border: 1px solid var(--gold-dk); }
.profile span { display: block; font-family: var(--display); letter-spacing: 0.14em; font-size: 10px; color: var(--gold); text-transform: uppercase; }
.profile small { display: block; font-size: 11px; color: var(--muted); }
.pf-lvl > b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--gold); background: #0a1428;
  font-family: var(--display); font-size: 17px; color: var(--gold-hi); flex: none; }
.pf-lvl > div, .pf-rank > div { flex: 1; min-width: 0; }
.pf-rank b { display: block; font-family: var(--display); font-weight: 800; letter-spacing: 0.06em; font-size: 15px; }
.bar { height: 6px; background: #0a1620; border: 1px solid #1e2328; margin: 3px 0; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #785a28, #c8aa6e, #f0e6d2); transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.bar.lp i { background: linear-gradient(90deg, #0a8a80, #0ac8b9, #a7fff5); }
.pf-miss { flex-direction: column; align-items: stretch !important; gap: 2px !important; }
.pf-miss div { font-size: 11px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-miss div em { font-style: normal; display: inline-block; min-width: 38px; color: var(--teal); font-weight: 700; }
.pf-miss div.done { color: var(--muted); text-decoration: line-through; }
.pf-miss div.done em { color: var(--gold); }
.crest { flex: none; filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.6)); }

/* locked skins */
.skin.locked { filter: grayscale(1) brightness(0.35); cursor: not-allowed; }
.skin.locked i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 11px; color: var(--gold-hi); }

/* game-over progress */
.prog { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: min(460px, 92vw); text-align: left; }
.prog .promo { text-align: center; font-family: var(--display); font-weight: 800; letter-spacing: 0.2em; font-size: 18px; animation: promo 0.6s ease-out; }
.prog .promo.up { color: var(--gold-hi); text-shadow: 0 0 18px rgba(240, 230, 210, 0.7); }
.prog .promo.down { color: #e5484d; }
@keyframes promo { from { transform: scale(1.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.o-rank, .o-xp { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: rgba(1, 10, 19, 0.7); border: 1px solid var(--gold-dk); }
.o-rank > div { flex: 1; }
.o-rank b { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: 0.06em; }
.o-xp { flex-direction: column; align-items: stretch; gap: 2px; }
.o-xp span { font-family: var(--display); font-size: 12px; color: var(--gold); letter-spacing: 0.1em; }
.o-xp span b { color: var(--gold-hi); margin-left: 6px; }
.prog small { font-size: 11px; color: var(--muted); }
.prog .pos { color: #2fd3c6; font-weight: 700; } .prog .neg { color: #e5484d; font-weight: 700; }
.o-note { font-size: 12px; color: var(--teal); text-align: center; }
.o-note.gold { color: var(--gold-hi); font-weight: 700; }

/* keep play controls visible on shorter windows, including a 50px menu ad */
.menu { justify-content: safe center; overflow-y: auto; }
@media (max-height: 980px) {
  .menu { gap: 6px; padding-top: 6px; padding-bottom: 6px; }
  .m-head h1 { font-size: 30px; }
  .m-head::after { margin-top: 4px; }
  .mode-card .mc-desc { display: none; }
  .mode-card { padding: 7px 12px; }
  .mode-card svg { width: 28px; height: 28px; }
  .champ-card { height: clamp(110px, 21vh, 170px); }
  .kit { padding: 6px 14px; gap: 4px; }
  .kit-row img { width: 30px; height: 30px; }
  .profile { margin: 0; }
  .profile > div { padding: 4px 10px; }
  .m-label { margin-bottom: 3px; }
}

/* profile picker (one browser, several players) */
.pf-who { width: 100%; max-width: 190px; font-family: var(--display); font-weight: 700; letter-spacing: 0.08em; font-size: 12px;
  color: var(--gold-hi); background: #0a1428; border: 1px solid var(--gold-dk); padding: 2px 4px; cursor: pointer; }
.pf-who:focus { outline: 1px solid var(--gold); }
.pf-who option { background: #0a1428; color: var(--gold-hi); }

/* Visible in-menu advertising: never covers actual gameplay or controls. */
#start #ad-menu { width:320px; max-width:100%; min-height:50px; flex:0 0 auto; margin:2px auto; }
@media(min-width:1750px) and (min-height:900px) {
 #start #ad-menu { position:absolute; top:145px; right:18px; width:300px; min-height:250px; margin:0; }
}
/* ads: only on the menu and game-over screens */
.ad { display: flex; justify-content: center; min-height: 50px; }
.ad[hidden] { display: none; }
.ad iframe { border: 0; display: block; }
.m-support { display: flex; gap: 10px; justify-content: center; align-items: center; }
.m-support:empty { display: none; }
.ghost.sm { padding: 5px 14px; font-size: 12px; }
.sup-badge { font-family: var(--display); font-weight: 800; letter-spacing: 0.1em; color: var(--gold-hi); font-size: 13px; }
.skin.locked { cursor: pointer; }

/* locked-skin dialog */
.shop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(1, 10, 19, 0.72); backdrop-filter: blur(4px); }
.shop.hidden { display: none; }
.shop-card { display: flex; width: min(560px, 94vw); background: linear-gradient(180deg, #0a1428, #010a13); border: 1px solid var(--gold);
  box-shadow: 0 0 0 1px var(--gold-dk), 0 20px 60px rgba(0, 0, 0, 0.6); animation: promo 0.25s ease-out; }
.shop-art { width: 190px; min-height: 340px; flex: none; background: #000 center top / cover no-repeat; border-right: 1px solid var(--gold-dk); }
.shop-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 14px; text-align: left; }
.shop-body h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: 0.08em; color: var(--gold-hi); font-size: 20px; }
.shop-lvl { margin: 0 0 6px; color: var(--muted); font-size: 13px; }
.shop-lvl b { color: var(--gold-hi); }
.shop-body .play, .shop-body .ghost { width: 100%; }
.shop-body .play, .shop-body .ghost { min-width: 0; padding: 9px 10px; letter-spacing: 0.1em; font-size: 14px; }
.shop-note { margin: -4px 0 0; font-size: 11px; color: var(--muted); }
.shop-code { display: flex; gap: 6px; }
.shop-code input { flex: 1; min-width: 0; background: #010a13; border: 1px solid var(--gold-dk); color: var(--gold-hi); padding: 6px 8px;
  font-family: var(--body); letter-spacing: 0.12em; text-transform: uppercase; }
.shop-code .ghost { width: auto !important; }
.shop-x { margin-top: auto; align-self: flex-end; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; }
.shop-x:hover { color: var(--gold-hi); }
.toast { position: fixed; left: 50%; bottom: 14vh; transform: translateX(-50%); z-index: 40; padding: 10px 22px; background: rgba(1, 10, 19, 0.94);
  border: 1px solid var(--gold); color: var(--gold-hi); font-weight: 600; font-size: 14px; animation: promo 0.25s ease-out; }
.toast.hidden { display: none; }

/* global leaderboard */
.o-global { min-height: 22px; font-size: 13px; color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 8px; }
.o-global b { font-family: var(--display); color: var(--gold-hi); font-size: 16px; letter-spacing: 0.06em; }
.o-global em { color: var(--teal); font-style: normal; font-weight: 700; }
.o-global .muted, .lb-msg small { color: var(--muted); }
.g-name { display: flex; align-items: center; gap: 8px; }
.g-name span { color: var(--gold); font-weight: 600; }
.g-name input { width: 160px; background: #010a13; border: 1px solid var(--gold-dk); color: var(--gold-hi); padding: 5px 8px; font-family: var(--body); }
.lb-card { width: min(560px, 94vw); max-height: 88vh; display: flex; flex-direction: column; background: linear-gradient(180deg, #0a1428, #010a13);
  border: 1px solid var(--gold); box-shadow: 0 0 0 1px var(--gold-dk), 0 20px 60px rgba(0, 0, 0, 0.6); animation: promo 0.25s ease-out; }
.lb-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 6px; }
.lb-head h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: 0.2em; color: var(--gold-hi); font-size: 18px; }
.lb-head .shop-x { margin: 0; }
.lb-tabs { display: flex; flex-direction: column; gap: 6px; padding: 4px 18px 10px; border-bottom: 1px solid var(--gold-dk); }
.lb-tabs > div { display: flex; gap: 4px; flex-wrap: wrap; }
.lb-tabs button { flex: 1; padding: 5px 6px; font-size: 12px; cursor: pointer; color: var(--muted); background: #0a1428; border: 1px solid #1e2328; font-family: var(--body); }
.lb-tabs button.on { color: #010a13; background: linear-gradient(180deg, #f0e6d2, #c8aa6e); border-color: var(--gold); font-weight: 700; }
.lb-rows { overflow-y: auto; padding: 6px 10px 12px; }
.lb-row { display: grid; grid-template-columns: 36px 28px 1fr auto; align-items: center; gap: 10px; padding: 5px 8px; border-bottom: 1px solid rgba(120, 90, 40, 0.25); }
.lb-row:nth-child(-n+3) .lb-rank { color: var(--gold-hi); font-size: 17px; }
.lb-row.me { background: rgba(10, 200, 185, 0.12); outline: 1px solid rgba(10, 200, 185, 0.5); }
.lb-rank { font-family: var(--display); font-weight: 800; color: var(--gold); text-align: center; }
.lb-row img, .lb-row i { width: 28px; height: 28px; border: 1px solid var(--gold-dk); display: block; }
.lb-name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row b { font-family: var(--display); color: var(--gold-hi); }
.lb-msg { padding: 30px 10px; text-align: center; color: var(--ink); line-height: 1.6; }

/* ---- touch-only devices: the game needs a mouse and keyboard ---- */
#touch-note { display: none; }
@media (hover: none) and (pointer: coarse) {
  #touch-note { display: flex; position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center;
    padding: 16px; background: rgba(4, 8, 16, 0.96); text-align: center; color: #e8dfca; }
  #touch-note h2 { font-family: Cinzel, serif; letter-spacing: 0.12em; margin: 0 0 12px; }
  #touch-note h2 span { color: #c8aa6e; }
  #touch-note p { line-height: 1.6; margin: 0 0 20px; }
}