@font-face { font-family: "Ghosilla"; src: url("./fonts/Ghosilla.ttf") format("truetype"); font-display: swap; }
:root {
  --ink: #f3ece0;
  --text: #e6dfd2;
  --dim: #bcb19f;
  --blood: #b3141b;
  --blood-hi: #e2262d;
  --gold: #c8aa6e;
  --gold-hi: #f0e6d2;
  --gold-lo: #785a28;
  --lol-bg: rgba(1, 10, 19, 0.9);
  --lol-panel: #0a1428;
  --panel: #0b0f14;
  --line: #2a3440;
  --teal: #2fd8c8;
  --hp: #2fb34a;
  --hp-hi: #5fe07a;
  --mana: #2e7fd6;
  --mana-hi: #6fb2ff;
  --shield: #e8e8e8;
  --shadow: 0 0 2px #000, 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, 0.85);
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", "Franklin Gothic Medium", "Oswald", sans-serif;
  /* the title faces: the game's name, screen headings, the big announcements */
  --title: "Ghosilla", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #050304; color: var(--ink);
  font-family: var(--ui); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.dim { color: var(--dim); }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }

/* ------------------------------------------------------------------ fx layers */
.fx-layer { position: fixed; inset: 0; pointer-events: none; }
#vision { background: radial-gradient(ellipse at 50% 52%, transparent 38%, rgba(0, 0, 0, 0.55) 78%, rgba(0, 0, 0, 0.85) 100%); }
#hurt { opacity: 0; background: radial-gradient(ellipse at center, transparent 30%, rgba(150, 0, 0, 0.55) 80%, rgba(90, 0, 0, 0.9) 100%); }
#gasfx { opacity: 0; background: radial-gradient(ellipse at center, rgba(150, 220, 60, 0.15), rgba(90, 140, 20, 0.45)); }
#flashfx { opacity: 0; background: #fff; }
#fade { opacity: 0; background: #000; transition: opacity 0.5s ease; }
#fade.on { opacity: 1; }

/* ------------------------------------------------------------------ screens */
.screen { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; }
#loading { justify-content: center; gap: 18px; background: radial-gradient(circle at 50% 40%, #2a0b0d, #050304 70%); }
#loadMsg { font-size: 16px; }
.spin { width: 40px; height: 40px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.1); border-top-color: var(--blood-hi); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.title-block { text-align: center; }
.kino-title {
  font-family: var(--title); font-size: clamp(42px, 9vw, 104px); letter-spacing: 0.06em; line-height: 0.95;
  color: var(--blood-hi);
  text-shadow: 0 0 2px #000, 0 3px 0 #4a0508, 0 0 28px rgba(226, 38, 45, 0.45), 0 8px 30px rgba(0, 0, 0, 0.8);
}
.kino-sub {
  font-family: var(--title); font-size: clamp(16px, 2.6vw, 28px); letter-spacing: 0.55em; margin-top: 6px; padding-left: 0.55em;
  color: var(--gold); text-shadow: 0 0 14px rgba(200, 170, 110, 0.35), 0 2px 6px #000;
}

#menu { justify-content: space-between; padding: max(28px, 7vh) 16px max(18px, 4vh);
  background: linear-gradient(180deg, rgba(5, 3, 4, 0.7), rgba(5, 3, 4, 0.15) 35%, rgba(5, 3, 4, 0.2) 60%, rgba(5, 3, 4, 0.85)); }
.menu-btns { display: flex; flex-direction: column; gap: 10px; width: min(320px, 100%); }
.mbtn {
  position: relative; padding: 13px 18px; font-family: var(--display); font-size: 21px; letter-spacing: 0.12em;
  color: var(--gold-hi); background: linear-gradient(180deg, #1e2328, #0f1317); border: 2px solid var(--gold-lo);
  box-shadow: inset 0 0 0 1px #000, 0 6px 18px rgba(0, 0, 0, 0.5); transition: border-color 0.12s, transform 0.12s, color 0.12s;
}
.mbtn:hover:not(:disabled), .mbtn:focus-visible { border-color: var(--gold); color: #fff; transform: translateY(-1px); outline: none; }
.mbtn:disabled { opacity: 0.45; cursor: default; }
.mbtn.primary { background: linear-gradient(180deg, #7a1014, #3d0709); border-color: #c4161c; color: #fff; }
.mbtn.primary:hover:not(:disabled) { border-color: #ff4a50; }
.mbtn.danger { border-color: #5a1c1c; }
.records { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; font-size: 15px; color: var(--text); }
.records span { padding: 5px 12px; border: 1px solid rgba(200, 170, 110, 0.35); background: rgba(0, 0, 0, 0.6); }
.records b { color: var(--gold-hi); }
.legal { max-width: 660px; text-align: center; font-size: 13px; line-height: 1.5; color: #b0a594; text-shadow: 0 1px 4px #000; }

.panel-screen { background: rgba(4, 6, 10, 0.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); overflow-y: auto; padding: 18px 16px 24px; touch-action: pan-y; }
.sel-head { width: min(1040px, 100%); display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sel-head h2 { margin: 0; flex: 1; text-align: center; font-family: var(--title); letter-spacing: 0.12em; font-size: clamp(22px, 4vw, 34px); color: var(--gold-hi); font-weight: 400; }
.sel-head .spacer { width: 72px; }
.ghost { background: transparent; border: 1px solid var(--gold-lo); color: var(--gold-hi); padding: 9px 16px; font-size: 16px; }
.ghost:hover, .ghost:focus-visible { border-color: var(--gold); outline: none; }

/* controls switch (champion select and how to play) */
#selControls { width: min(1040px, 100%); margin-bottom: 12px; }
.ctl-panel { padding: 12px 16px 14px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--gold); }
.ctl-head { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.ctl-title { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: 0.1em; font-size: 22px; color: var(--gold-hi); }
.ctl-blurb { margin: 8px 0 10px; font-size: 16px; color: var(--text); line-height: 1.45; }
.ctl-rows { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 22px; }
.ctl-rows div { display: flex; gap: 10px; font-size: 15.5px; line-height: 1.35; padding: 3px 0; border-bottom: 1px solid #18202a; }
.ctl-rows dt { flex: none; width: 8.2em; color: var(--gold-hi); font-weight: 700; }
.ctl-rows dd { margin: 0; color: #f4efe6; }
.ctl-more { margin-top: 8px; }

#champCards { width: min(1040px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ccard { position: relative; text-align: left; padding: 0; border: 2px solid #1e2a33; background: var(--panel); overflow: hidden; transition: border-color 0.15s, transform 0.15s; }
.ccard:hover, .ccard:focus-visible { transform: translateY(-2px); border-color: var(--gold-lo); outline: none; }
.ccard.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 26px rgba(200, 170, 110, 0.25); }
.ccard canvas { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: radial-gradient(circle at 50% 40%, #2b2230, #0b0f14 75%); }
.ccard .cbody { padding: 10px 12px 12px; }
.ccard .cname { font-family: var(--display); font-size: 25px; letter-spacing: 0.08em; color: var(--gold-hi); }
.ccard .ctitle { font-size: 13px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.12em; }
.ccard .crole { margin-top: 6px; font-size: 15px; color: var(--text); line-height: 1.45; }
.ccard .cstart { margin-top: 8px; font-size: 14.5px; color: #cdeee8; }
.ccard .cstart b { color: #fff; }
.ccard .cbest { position: absolute; top: 8px; right: 8px; font-size: 13px; padding: 3px 9px; background: rgba(0, 0, 0, 0.72); border: 1px solid rgba(200, 170, 110, 0.4); color: var(--gold-hi); }
#champInfo { width: min(1040px, 100%); margin-top: 12px; }
.lvl-panel { padding: 12px 16px; margin-bottom: 8px; background: var(--panel); border: 1px solid var(--line); }
.lvl-panel h3 { margin: 0 0 6px; font-family: var(--display); font-weight: 400; letter-spacing: 0.1em; font-size: 21px; color: var(--gold-hi); }
.lvl-panel p { margin: 4px 0; font-size: 16px; color: var(--text); line-height: 1.5; }
.lvl-panel b { color: #fff; }
.lvl-panel .order span { display: inline-block; min-width: 1.7em; text-align: center; padding: 1px 4px; margin: 1px 0; border: 1px solid var(--gold-lo); background: #11161c; color: var(--gold-hi); font-weight: 800; font-size: 14px; }
.lvl-panel .order .ok-R { border-color: #c27cff; color: #e7d0ff; }
.lvl-switch { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 8px; font-size: 16px; }
.lvl-switch small { color: var(--dim); font-size: 14.5px; }
.abl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px; }
.abl { display: grid; grid-template-columns: 52px 1fr; gap: 4px 12px; padding: 10px 12px; background: var(--panel); border: 1px solid #1e2a33; }
.abl.start { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(200, 170, 110, 0.35); }
.abl canvas { width: 52px; height: 52px; grid-row: span 2; border: 1px solid var(--gold-lo); }
.abl b { font-size: 16.5px; color: var(--gold-hi); display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.abl b .slot { color: var(--teal); font-weight: 800; font-size: 14px; letter-spacing: 0.04em; }
.abl b kbd { font-size: 13px; }
.abl .abl-tag { font-style: normal; font-weight: 700; font-size: 13px; color: #ffe2a0; background: rgba(200, 170, 110, 0.14); border: 1px solid rgba(200, 170, 110, 0.45); padding: 1px 8px; }
.abl.start .abl-tag { color: #0b0f14; background: #f0d080; border-color: #f0d080; }
.abl p { margin: 0; font-size: 15px; color: #ddd5c8; line-height: 1.5; }
.abl .papline { color: #d9b4ff; }
.sel-foot { position: sticky; bottom: -24px; width: min(1040px, 100%); display: flex; justify-content: center; padding: 16px 0 6px; background: linear-gradient(transparent, rgba(4, 6, 10, 0.95) 40%); }
.sel-foot .mbtn { width: min(320px, 100%); }

.help-body, .settings-body { width: min(900px, 100%); color: var(--text); line-height: 1.6; font-size: 16.5px; }
.help-body h3 { font-family: var(--display); font-weight: 400; letter-spacing: 0.1em; color: var(--gold-hi); margin: 22px 0 8px; font-size: 23px; }
.help-body .ctl-panel h3.ctl-title { margin: 0; font-size: 23px; }
.help-body #helpControls { margin-top: 18px; }
.help-body b { color: #fff; }
.help-body table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.help-body td, .help-body th { padding: 7px 10px; border-bottom: 1px solid #1e2a33; vertical-align: top; text-align: left; }
.help-body th { color: var(--gold); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; }
.help-body td:first-child { white-space: nowrap; color: var(--gold-hi); width: 1%; }
.help-body .wall-table td:last-child { white-space: nowrap; color: #ffe57a; font-weight: 700; text-align: right; }
.help-body .wall-table .dim { font-size: 14.5px; }
.help-body ul { margin: 6px 0; padding-left: 22px; }
.help-body li { margin: 4px 0; }
.help-body .pu-list { list-style: none; padding-left: 0; }
.help-body .pu-row { display: flex; align-items: center; gap: 12px; }
.help-body .pu-ic canvas { width: 40px; height: 40px; display: block; }
kbd { display: inline-block; min-width: 1.6em; text-align: center; padding: 1px 7px; border: 1px solid var(--gold-lo); border-bottom-width: 2px; background: #11161c; color: var(--gold-hi); font-family: var(--ui); font-size: 14px; font-weight: 700; line-height: 1.35; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 4px; border-bottom: 1px solid #1e2a33; }
.set-row label { font-size: 17px; color: #fff; }
.set-row small { display: block; color: var(--dim); font-size: 14.5px; margin-top: 2px; max-width: 560px; line-height: 1.4; }
.seg { display: flex; flex: none; border: 1px solid var(--gold-lo); }
.seg button { padding: 8px 14px; background: transparent; border: 0; font-size: 15px; font-weight: 600; color: #cfc5b4; }
.seg button:hover, .seg button:focus-visible { color: #fff; outline: none; background: rgba(200, 170, 110, 0.12); }
.seg button.on { background: var(--gold-lo); color: #fff; }
.seg.big { border-width: 2px; border-color: var(--gold); }
.seg.big button { padding: 10px 20px; font-size: 17px; font-weight: 800; letter-spacing: 0.03em; }
.seg.big button.on { background: linear-gradient(180deg, #a07a34, #6b4e1c); }
input[type=range] { width: 170px; accent-color: var(--gold); }

.modal { justify-content: center; background: rgba(0, 0, 0, 0.66); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); padding: 16px; z-index: 30; }
.modal .box { width: min(460px, 100%); padding: 22px; background: linear-gradient(180deg, #121820, #0a0e13); border: 2px solid var(--gold-lo); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); text-align: center; max-height: 100%; overflow-y: auto; }
.modal .box.wide { width: min(640px, 100%); }
.modal h2 { margin: 0 0 12px; font-family: var(--title); font-weight: 400; letter-spacing: 0.14em; color: var(--gold-hi); font-size: 28px; }
.modal .menu-btns { margin: 14px auto 0; }
.pause-info { font-size: 16px; color: var(--text); line-height: 1.5; }
.over-title { font-family: var(--title); font-size: clamp(40px, 9vw, 72px); color: var(--blood-hi); letter-spacing: 0.08em; text-shadow: 0 0 24px rgba(226, 38, 45, 0.5); }
.over-sub { font-size: 20px; margin: 4px 0 14px; }
.over-sub b { color: var(--blood-hi); }
.over-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 8px; margin-bottom: 16px; }
.over-stats div { padding: 8px; background: var(--panel); border: 1px solid #1e2a33; }
.over-stats span { display: block; font-size: 13px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }
.over-stats b { font-size: 22px; color: var(--gold-hi); }
.row-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.row-btns .mbtn { flex: 1 1 160px; }
#err { justify-content: center; background: #050304; z-index: 50; }
#err .box { text-align: center; padding: 20px; max-width: 480px; font-size: 16px; }

/* ------------------------------------------------------------------ HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud button, #hud .clickable { pointer-events: auto; }

#round { position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: 18px; width: 200px; height: 110px; }
#round svg { width: 100%; height: 100%; overflow: visible; }
#round.blink svg { animation: roundBlink 0.5s steps(1) 6; }
@keyframes roundBlink { 50% { filter: brightness(3) saturate(0); } }
#perks { position: absolute; left: max(16px, env(safe-area-inset-left)); bottom: 136px; display: flex; gap: 6px; }
#perks canvas { width: 40px; height: 40px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)); animation: perkIn 0.5s ease-out; }
@keyframes perkIn { from { transform: scale(2); opacity: 0; } }

#pointsBox { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: 22px; text-align: right; }
/* money: the coin stack (gp.ts), the amount, and a small gold GP */
#points { display: flex; align-items: flex-end; justify-content: flex-end; line-height: 1; font-family: var(--display); font-size: 42px; letter-spacing: 0.04em; color: #fff;
  text-shadow: 0 0 1px #000, 0 2px 0 #000, 0 0 14px rgba(255, 220, 120, 0.35); }
#points .coins { flex: none; width: 1.73em; height: 1.3em; margin: 0 0.08em -0.06em 0; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.85)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.5)); }
#points .coins svg { display: block; width: 100%; height: 100%; }
#points .unit { margin: 0 0 0.16em 0.22em; font-size: 0.5em; letter-spacing: 0.08em; color: #ffd863; }
#pops { position: absolute; right: 0; bottom: 46px; width: 150px; height: 140px; }
.pop { position: absolute; right: 6px; bottom: 0; font-family: var(--display); font-size: 24px; color: #ffe57a; text-shadow: 0 2px 0 #000, 0 0 8px rgba(0, 0, 0, 0.8);
  animation: pop 1s ease-out forwards; white-space: nowrap; }
.pop.neg { color: #ff7b7b; }
@keyframes pop { 0% { opacity: 0; transform: translate(0, 8px) scale(0.8); } 12% { opacity: 1; transform: translate(-6px, 0) scale(1.1); } 100% { opacity: 0; transform: translate(-40px, -90px) scale(0.9); } }

#minimapBox { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); width: 190px; }
#minimap { width: 190px; height: 190px; display: block; background: rgba(4, 7, 11, 0.82); border: 2px solid var(--gold-lo); box-shadow: 0 0 0 1px #000, 0 6px 18px rgba(0, 0, 0, 0.5); }
#roomName { margin-top: 4px; text-align: center; font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-hi); text-shadow: var(--shadow); }
#mmLegend { margin-top: 3px; display: flex; flex-wrap: wrap; justify-content: center; gap: 1px 10px; font-size: 12.5px; font-weight: 600; color: #efe7d8; text-shadow: var(--shadow); }
#mmLegend span { white-space: nowrap; }
#mmLegend .lg { display: inline-block; width: 9px; height: 9px; margin-right: 4px; vertical-align: -1px; box-shadow: 0 0 0 1px #000; }
#mmLegend .lg.box { background: #5fb8ff; outline: 1px solid #fff; outline-offset: -1px; width: 11px; height: 8px; }
#mmLegend .lg.wall { background: #fbf6e8; transform: rotate(45deg) scale(0.85); }
#mmLegend .lg.door { background: #e0b84a; }
#mmLegend .lg.perk { background: #d4202a; border-radius: 50%; }

#powerups { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); display: flex; gap: 10px; }
.pu { width: 50px; text-align: center; }
.pu canvas { width: 46px; height: 46px; }
.pu.blink canvas { animation: puBlink 0.4s steps(1) infinite; }
@keyframes puBlink { 50% { opacity: 0.2; } }
.pu span { font-size: 14px; font-weight: 800; text-shadow: var(--shadow); white-space: nowrap; }

#announce { position: absolute; left: 0; right: 0; top: 20%; text-align: center; font-family: var(--title); font-size: clamp(34px, 6.5vw, 74px); letter-spacing: 0.08em;
  color: #fff; opacity: 0; text-shadow: 0 0 2px #000, 0 4px 0 rgba(0, 0, 0, 0.6), 0 0 30px var(--glow, rgba(255, 255, 255, 0.4)); }
#announce.show { animation: ann 2.6s ease-out forwards; }
@keyframes ann { 0% { opacity: 0; transform: scale(1.6); } 10% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(0.96); } }
#subannounce { position: absolute; left: 0; right: 0; top: calc(20% + clamp(44px, 8vw, 90px)); text-align: center; font-size: clamp(16px, 2.2vw, 21px); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-hi); opacity: 0; text-shadow: var(--shadow); }
#subannounce.show { animation: ann 3.2s ease-out forwards; }

#toasts { position: absolute; z-index: 5; top: 16px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(620px, 74vw); }
.toast { padding: 8px 16px; font-size: 16px; font-weight: 600; line-height: 1.35; background: rgba(1, 10, 19, 0.92); border: 1px solid var(--gold-lo); color: var(--gold-hi); text-align: center; text-shadow: 0 1px 2px #000; animation: toast 3.4s ease forwards; }
.toast.bad { border-color: #a12a2a; color: #ffc4c4; background: rgba(28, 4, 6, 0.92); }
.toast.learn { border-color: var(--gold); color: #fff3cc; background: linear-gradient(180deg, rgba(60, 44, 14, 0.94), rgba(1, 10, 19, 0.94)); }
@keyframes toast { 0% { opacity: 0; transform: translateY(-8px); } 8% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }

/* above the tip card: what you can buy right here matters more than a tip */
#prompt { position: absolute; z-index: 4; left: 50%; bottom: 216px; transform: translateX(-50%); width: min(760px, 92vw); text-align: center; color: #fff; }
#prompt .pmain { display: inline-block; padding: 6px 16px; font-size: 20px; font-weight: 600; line-height: 1.35; background: rgba(0, 0, 0, 0.6); border-radius: 6px; text-shadow: 0 1px 2px #000; }
#prompt .psub { display: block; width: fit-content; max-width: 100%; margin: 4px auto 0; padding: 4px 14px; font-size: 15.5px; line-height: 1.4; color: #ece5d8; background: rgba(0, 0, 0, 0.55); border-radius: 6px; text-shadow: 0 1px 2px #000; }
#prompt kbd { font-size: 16px; margin: 0 3px; }
#prompt .cost { color: #ffe57a; white-space: nowrap; }
#prompt .need { color: #ff8a8a; white-space: nowrap; }

#channel { position: absolute; z-index: 4; left: 50%; bottom: 300px; transform: translateX(-50%); width: 270px; text-align: center; display: none; }
#channel.on { display: block; }
#channel .lbl { font-size: 15px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-shadow: var(--shadow); margin-bottom: 4px; }
#channel .bar { height: 9px; background: rgba(0, 0, 0, 0.6); border: 1px solid var(--gold-lo); }
#channel .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-hi)); }

/* tip cards: how abilities and items work, at the start of a run */
#tipCard { position: absolute; z-index: 3; left: max(16px, env(safe-area-inset-left)); top: 66px; width: min(380px, calc(100vw - 32px)); padding: 12px 14px 14px; background: rgba(1, 10, 19, 0.94);
  border: 1px solid var(--gold); border-left: 4px solid var(--gold); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); color: var(--text); animation: tipIn 0.35s ease-out; }
@keyframes tipIn { from { opacity: 0; transform: translateX(-12px); } }
#tipCard .tip-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
#tipCard .tip-ttl { font-family: var(--display); letter-spacing: 0.1em; font-size: 21px; color: var(--gold-hi); }
#tipCard .tip-body { font-size: 15.5px; line-height: 1.5; }
#tipCard .tip-body b { color: #fff; }
#tipCard .tip-body kbd { font-size: 13px; padding: 0 5px; }
#tipCard .tip-ok { flex: none; padding: 5px 14px; font-size: 15px; font-weight: 700; color: #fff; background: var(--gold-lo); border: 1px solid var(--gold); }
#tipCard .tip-ok:hover, #tipCard .tip-ok:focus-visible { background: #8f6c2c; outline: none; }
#tipCard .tip-time { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.08); }
#tipCard .tip-time i { display: block; height: 100%; width: 100%; background: var(--gold); }

/* LoL-style champion bar */
#bar { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px 8px 8px;
  background: var(--lol-bg); border: 2px solid var(--gold-lo); box-shadow: 0 0 0 1px #000, 0 10px 30px rgba(0, 0, 0, 0.6); pointer-events: auto; }
#portrait { position: relative; width: 80px; height: 80px; flex: none; }
#portraitCv { width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--gold); display: block; background: #111; }
#xpRing { position: absolute; inset: -5px; width: 90px; height: 90px; transform: rotate(-90deg); pointer-events: none; }
#xpRing circle { fill: none; stroke: #9d74ff; stroke-width: 4; stroke-dasharray: 289; stroke-dashoffset: 289; transition: stroke-dashoffset 0.3s; }
#lvl { position: absolute; right: -5px; bottom: -5px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: #0a1428; border: 2px solid var(--gold); font-size: 15px; font-weight: 800; color: var(--gold-hi); }
#lvl.sp { border-color: #ffd75a; color: #fff; box-shadow: 0 0 0 0 rgba(255, 215, 90, 0.9); animation: spPulse 1s ease-out infinite; }
@keyframes spPulse { 70% { box-shadow: 0 0 0 8px rgba(255, 215, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 215, 90, 0); } }
#mid { display: flex; flex-direction: column; gap: 5px; }
#abilities { display: flex; gap: 6px; align-items: flex-end; }
.ab { position: relative; width: 54px; height: 54px; border: 2px solid var(--gold-lo); background: #000; flex: none; }
.ab.small { width: 44px; height: 44px; }
.ab canvas { width: 100%; height: 100%; display: block; }
.ab .cd { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 19px; color: #fff; text-shadow: 0 0 3px #000, 0 1px 3px #000; }
.ab .shade { position: absolute; inset: 0; }
.ab .key { position: absolute; left: 0; bottom: 0; padding: 0 3px; font-size: 12.5px; font-weight: 800; line-height: 15px; color: var(--gold-hi); background: rgba(0, 0, 0, 0.78); text-shadow: 0 0 2px #000; }
.ab .key.long { font-size: 10.5px; letter-spacing: 0.02em; }
.ab .cost { position: absolute; right: 0; bottom: 0; padding: 0 2px; font-size: 11.5px; font-weight: 700; line-height: 14px; color: #9fd0ff; background: rgba(0, 0, 0, 0.7); }
.ab .cost:empty { display: none; }
.ab .pips { position: absolute; left: 3px; right: 3px; bottom: -8px; display: flex; gap: 2px; justify-content: center; }
.ab .pips i { width: 7px; height: 5px; background: #2a2f36; border: 1px solid #000; }
.ab .pips i.on { background: var(--gold); }
/* "+": a skill point can go here */
.ab .up { position: absolute; left: 50%; top: -32px; transform: translateX(-50%); width: 32px; height: 26px; display: grid; place-items: center; padding: 0;
  font-size: 22px; font-weight: 900; line-height: 1; color: #1a1204; background: linear-gradient(#ffe48a, #d8a32c); border: 2px solid #fff3c4; border-radius: 5px;
  box-shadow: 0 0 0 0 rgba(255, 215, 90, 0.9), 0 2px 6px rgba(0, 0, 0, 0.7); animation: upPulse 0.9s ease-in-out infinite; pointer-events: auto; cursor: pointer; }
.ab .up:hover, .ab .up:focus-visible { background: linear-gradient(#fff2b8, #ecc04e); outline: none; }
@keyframes upPulse {
  0% { transform: translate(-50%, 0) scale(1); box-shadow: 0 0 0 0 rgba(255, 215, 90, 0.85), 0 2px 6px rgba(0, 0, 0, 0.7); }
  50% { transform: translate(-50%, -4px) scale(1.1); box-shadow: 0 0 0 7px rgba(255, 215, 90, 0), 0 2px 6px rgba(0, 0, 0, 0.7); }
  100% { transform: translate(-50%, 0) scale(1); box-shadow: 0 0 0 0 rgba(255, 215, 90, 0), 0 2px 6px rgba(0, 0, 0, 0.7); }
}
/* locked: dim icon, a lock and the level it unlocks at */
.ab.locked canvas { filter: grayscale(1) brightness(0.32); }
.ab .lock { position: absolute; inset: 0 0 15px; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1px; pointer-events: none; color: #e9e2d4; }
.ab.unlearned .lock { display: flex; }
.ab .lock svg { width: 17px; height: 17px; flex: none; filter: drop-shadow(0 1px 2px #000); }
.ab .lock .lv { font-size: 12px; font-weight: 800; line-height: 14px; padding: 0 3px; color: #fff; background: rgba(0, 0, 0, 0.72); text-shadow: 0 0 2px #000; white-space: nowrap; }
.ab .lock .lv:empty { display: none; }
.ab.unlearned .cost { display: none; }
.ab.learnable { border-color: #ffd75a; box-shadow: 0 0 10px rgba(255, 215, 90, 0.6); }
.ab.learnable .lock { color: #ffe9a6; }
.ab.nomana canvas { filter: saturate(0.4) brightness(0.55) hue-rotate(190deg); }
.ab.active { border-color: #ffe57a; box-shadow: 0 0 10px rgba(255, 229, 122, 0.7); }
.ab.pap { border-color: #c27cff; box-shadow: 0 0 10px rgba(194, 124, 255, 0.8); }
.ab.deny { animation: deny 0.45s ease; }
@keyframes deny { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); border-color: #ff4040; } 40% { transform: translateX(4px); border-color: #ff4040; } 60% { transform: translateX(-3px); border-color: #ff4040; } 80% { transform: translateX(2px); } }
.ab.justlearned { animation: learned 1.2s ease-out; }
@keyframes learned { 0% { box-shadow: 0 0 0 0 rgba(255, 230, 140, 1); border-color: #fff; } 100% { box-shadow: 0 0 0 14px rgba(255, 230, 140, 0); } }
.ab .charges { position: absolute; right: 2px; top: 1px; font-size: 13px; font-weight: 800; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; }
#bars { display: flex; flex-direction: column; gap: 3px; }
.res { position: relative; height: 18px; background: #0b0d10; border: 1px solid #000; overflow: hidden; }
.res i { position: absolute; left: 0; top: 0; bottom: 0; transition: width 0.12s linear; }
.res.hp i#hpFill { background: linear-gradient(180deg, var(--hp-hi), var(--hp)); }
.res.hp i#hpShield { background: var(--shield); opacity: 0.85; }
.res.mana { height: 14px; }
.res.mana i { background: linear-gradient(180deg, var(--mana-hi), var(--mana)); }
.res span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 800; text-shadow: 0 0 3px #000, 0 0 2px #000, 0 1px 1px #000; }
.res.mana span { font-size: 11.5px; }
#side { display: flex; flex-direction: column; gap: 4px; }
#items { display: grid; grid-template-columns: repeat(3, 38px); gap: 4px; }
.it { position: relative; width: 38px; height: 38px; border: 1px solid var(--gold-lo); background: #05080c; }
.it canvas { width: 100%; height: 100%; display: block; }
.it .k { position: absolute; left: 0; bottom: 0; padding: 0 2px; font-size: 11px; font-weight: 800; line-height: 13px; color: var(--gold-hi); background: rgba(0, 0, 0, 0.6); }
.it .cd { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 800; background: rgba(0, 0, 0, 0.6); text-shadow: 0 0 3px #000; }
.it.swap { border-color: #ffe57a; box-shadow: 0 0 8px rgba(255, 229, 122, 0.8); cursor: pointer; pointer-events: auto; animation: upBob 0.6s ease-in-out infinite alternate; }
.it.pap { border-color: #c27cff; box-shadow: 0 0 0 1px #c27cff, 0 0 10px 1px rgba(194, 124, 255, 0.85), inset 0 0 7px rgba(194, 124, 255, 0.6); }
.it.inpap { border: 1px dashed #c27cff; }
.it.inpap canvas { filter: grayscale(1) brightness(0.38); }
.it .ptag { position: absolute; right: 0; top: 0; padding: 0 2px; font-size: 10px; font-weight: 800; line-height: 12px; color: #fff; background: #7a3cc0; }
@keyframes upBob { to { transform: translateY(-3px); } }
#stats { font-size: 12px; color: #cdc3b2; display: grid; grid-template-columns: repeat(3, auto); gap: 0 8px; }
#stats b { color: var(--gold-hi); font-weight: 800; }

.tip { position: fixed; z-index: 40; max-width: 360px; padding: 10px 12px; background: rgba(1, 10, 19, 0.97); border: 1px solid var(--gold); font-size: 14.5px; line-height: 1.5; color: #e2dace; pointer-events: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); }
.tip b { color: var(--gold-hi); font-size: 16px; }
.tip .thead { display: block; font-size: 13px; color: var(--teal); font-weight: 700; margin-top: 1px; }
.tip .tstat { margin-top: 5px; padding: 3px 7px; font-size: 14px; font-weight: 700; color: #ffe2a0; background: rgba(200, 170, 110, 0.14); border-left: 2px solid var(--gold); }
.tip .tbody { margin-top: 5px; }
.tip .tpap { color: #d9b4ff; }

#downed { position: absolute; z-index: 5; left: 50%; top: 32%; transform: translateX(-50%); text-align: center; width: min(440px, 90vw); }
#downed .big { font-family: var(--title); font-size: 42px; letter-spacing: 0.1em; color: var(--blood-hi); text-shadow: 0 2px 0 #000, 0 0 20px rgba(226, 38, 45, 0.6); }
#downed .small { margin: 6px 0 10px; font-size: 17px; font-weight: 600; text-shadow: var(--shadow); }
#downed .bar { height: 10px; background: rgba(0, 0, 0, 0.7); border: 1px solid #5a1c1c; }
#downed .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3fd7ff, #bff3ff); }

#swap, #papMenu { position: absolute; z-index: 6; left: 50%; bottom: 210px; transform: translateX(-50%); width: min(560px, 92vw); padding: 12px 14px; text-align: center;
  background: rgba(1, 10, 19, 0.94); border: 1px solid var(--gold); pointer-events: auto; }
#swap .ttl, #papMenu .ttl { font-family: var(--display); letter-spacing: 0.1em; font-size: 21px; color: var(--gold-hi); }
#swap .sub, #papMenu .sub { font-size: 15.5px; color: var(--text); margin-top: 2px; line-height: 1.45; }
#swap .mbtn.small, #papMenu .mbtn.small { margin-top: 10px; padding: 7px 18px; font-size: 15px; }
.touch-only { display: none; }
body.touch .touch-only { display: inline; }
body.touch .kb-only { display: none; }
/* Pack-a-Punch: the abilities and the items side by side; it scrolls when the window is short */
#papMenu { width: min(840px, 94vw); max-height: calc(100vh - 226px); overflow-y: auto; }
.papcols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; text-align: left; }
.paph { margin-bottom: 4px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
#papOpts, #papItems { display: grid; grid-template-columns: 1fr; gap: 5px; }
.papo { display: grid; grid-template-columns: 38px 1fr; gap: 2px 8px; align-items: center; text-align: left; padding: 7px 9px; background: var(--panel); border: 1px solid #2a2f36; }
.papo:hover:not(:disabled), .papo:focus-visible { border-color: #c27cff; outline: none; }
.papo:disabled { opacity: 0.45; cursor: default; }
.papo canvas { width: 38px; height: 38px; grid-row: span 2; }
.papo b { font-size: 15px; color: #e8d0ff; }
.papo small { font-size: 13.5px; color: #cfc5b4; line-height: 1.35; }
.papi { grid-template-columns: 30px 1fr; padding: 5px 8px; }
.papi canvas, .papi i { width: 30px; height: 30px; grid-row: span 2; }
.papi i { border: 1px dashed #3a3f46; }
.papi b { font-size: 14px; }
.papi small { font-size: 12.5px; }
.papi.done b { color: #c27cff; }

.corner-btn { position: absolute; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); width: 42px; height: 42px; border-radius: 50%;
  background: rgba(1, 10, 19, 0.8); border: 1px solid var(--gold-lo); color: var(--gold-hi); font-size: 15px; opacity: 0.85; }
.corner-btn:hover, .corner-btn:focus-visible { opacity: 1; outline: none; border-color: var(--gold); }

/* ------------------------------------------------------------------ touch */
#touch { position: fixed; inset: 0; pointer-events: none; z-index: 11; }
#stick { position: absolute; left: max(22px, env(safe-area-inset-left)); bottom: 28px; width: 132px; height: 132px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06); border: 2px solid rgba(200, 170, 110, 0.35); pointer-events: auto; touch-action: none; }
#stickNub { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(200, 170, 110, 0.35); border: 2px solid rgba(240, 230, 210, 0.6); }
#tbtns { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: 24px; width: 230px; height: 230px; pointer-events: none; }
.tb { position: absolute; width: 54px; height: 54px; border-radius: 50%; background: rgba(1, 10, 19, 0.78); border: 2px solid var(--gold-lo); color: var(--gold-hi);
  font-weight: 800; font-size: 18px; pointer-events: auto; touch-action: none; overflow: hidden; padding: 0; text-shadow: 0 1px 2px #000; }
.tb canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.tb .tcd { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.6); font-size: 16px; color: #fff; }
.tb.big { width: 84px; height: 84px; right: 6px; bottom: 6px; font-size: 30px; }
.tb.small { width: 46px; height: 46px; font-size: 14px; }
.tb.use { width: 66px; height: 42px; border-radius: 10px; font-size: 14px; letter-spacing: 0.08em; }
.tb.locked { color: rgba(240, 230, 210, 0.55); border-color: #3a3a3a; background: rgba(0, 0, 0, 0.55); }
.tb.locked::after { content: attr(data-lv); position: absolute; left: 0; right: 0; bottom: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0; color: #fff; text-align: center; }
.tb.deny { animation: deny 0.45s ease; }
#tQ { right: 108px; bottom: 4px; }
#tW { right: 102px; bottom: 72px; }
#tE { right: 54px; bottom: 120px; }
#tR { right: 2px; bottom: 112px; }
#tFlash { right: 168px; bottom: 60px; font-size: 11px; letter-spacing: 0.02em; }
#tUse { right: 156px; bottom: 132px; }
body.pap-open #touch { display: none; }
.tb.aiming { border-color: #fff; }

/* ------------------------------------------------------------------ big screens */
@media (min-width: 1600px) and (min-height: 900px) {
  #bar { transform: translateX(-50%) scale(1.2); transform-origin: 50% 100%; }
  #prompt { bottom: 250px; }
  #powerups { bottom: 176px; }
  #swap, #papMenu { bottom: 246px; }
  #papMenu { max-height: calc(100vh - 262px); }
  #channel { bottom: 340px; }
  #points { font-size: 50px; }
  #pops { bottom: 54px; }
  #minimapBox, #minimap { width: 230px; }
  #minimap { height: 230px; }
  #mmLegend { font-size: 14px; }
  #roomName { font-size: 15px; }
  #round { transform: scale(1.15); transform-origin: 0 100%; }
  #perks { bottom: 150px; }
  #tipCard { width: 430px; top: 76px; }
  #tipCard .tip-body { font-size: 17px; }
  .toast { font-size: 17.5px; }
  #prompt .pmain { font-size: 22px; }
  #prompt .psub { font-size: 17px; }
}

/* ------------------------------------------------------------------ compact layouts */
@media (max-width: 900px), (max-height: 560px) {
  #bar { transform: translateX(-50%) scale(0.82); transform-origin: 50% 100%; bottom: 6px; }
  #stats { display: none; }
  #prompt { bottom: 172px; }
  #prompt .pmain { font-size: 17px; }
  #prompt .psub { font-size: 14px; }
  #powerups { bottom: 126px; }
  #swap, #papMenu { bottom: 168px; }
  #papMenu { max-height: calc(100vh - 184px); }
  #channel { bottom: 250px; }
  #minimapBox, #minimap { width: 150px; }
  #minimap { height: 150px; }
  #mmLegend { font-size: 11.5px; gap: 0 7px; }
  #tipCard { width: min(420px, 52vw); top: 60px; padding: 9px 12px 11px; }
  #tipCard .tip-body { font-size: 14.5px; }
  .toast { font-size: 15px; }
}
@media (max-height: 560px) {
  /* short screens: the card keeps to what matters (the optional hint is in Settings and How to play) */
  #tipCard .tip-ttl { font-size: 18px; }
  #tipCard .tip-body .dim { display: none; }
  /* Pack-a-Punch takes the screen from the top down, tighter */
  #papMenu { top: max(8px, env(safe-area-inset-top)); bottom: auto; max-height: calc(100vh - 16px); padding: 8px 12px; }
  #papMenu .sub { font-size: 14px; }
  .papo { padding: 4px 8px; }
  .papo small { font-size: 12.5px; line-height: 1.25; }
}
@media (max-width: 640px) {
  /* narrow: the items under the abilities */
  .papcols { grid-template-columns: 1fr; }
}
/* up to about 1240px wide the bar reaches under the money counter (its coin stack makes it wide),
   so the counter sits just above the bar's right end (the bar is taller here: below about 1220px
   its stats wrap) */
@media (min-width: 601px) and (max-width: 1240px) {
  body:not(.touch) #pointsBox { bottom: 182px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  body:not(.touch) #pointsBox { bottom: 120px; }
}
@media (max-width: 600px) {
  /* a narrow window with a mouse (a small arcade cabinet): the bar is about 575px at full size,
     so it shrinks in steps with the width (below) instead of all the way at once */
  body:not(.touch) #bar { transform: translateX(-50%) scale(0.8); }
  /* the bar takes the whole bottom edge here: lift the round, perks and points above it */
  body:not(.touch) #round { bottom: 90px; transform: scale(0.7); transform-origin: 0 100%; }
  body:not(.touch) #perks { bottom: 172px; }
  body:not(.touch) #pointsBox { bottom: 96px; }
  body:not(.touch) #prompt { bottom: 162px; }
  body:not(.touch) #powerups { bottom: 118px; }
  body:not(.touch) #swap, body:not(.touch) #papMenu { bottom: 150px; }
  body:not(.touch) #tipCard { left: 10px; right: 172px; width: auto; top: 58px; padding: 8px 10px 10px; }
  body:not(.touch) #tipCard .tip-ttl { font-size: 18px; }
  body:not(.touch) #tipCard .tip-body { font-size: 14px; }
  .set-row { flex-wrap: wrap; }
  .ctl-rows { grid-template-columns: 1fr; gap: 0; }
  .ctl-rows div { font-size: 14.5px; padding: 2px 0; }
  .ctl-rows dt { width: 7.4em; }
  .ctl-blurb { font-size: 15px; }
}
@media (max-width: 480px) {
  body:not(.touch) #bar { transform: translateX(-50%) scale(0.66); }
  body:not(.touch) #round { bottom: 76px; }
  body:not(.touch) #perks { bottom: 156px; }
  body:not(.touch) #pointsBox { bottom: 82px; }
  body:not(.touch) #prompt { bottom: 140px; }
  body:not(.touch) #powerups { bottom: 100px; }
}
@media (max-width: 400px) {
  body:not(.touch) #bar { transform: translateX(-50%) scale(0.6); }
}
@media (max-width: 640px) {
  #champCards { grid-template-columns: 1fr; }
  .ccard { display: grid; grid-template-columns: 120px 1fr; }
  .ccard canvas { aspect-ratio: auto; height: 100%; }
  .abl-grid { grid-template-columns: 1fr; }
}
body.touch #bar { left: 50%; bottom: auto; top: max(8px, env(safe-area-inset-top)); transform: translateX(-50%) scale(0.72); transform-origin: 50% 0; }
body.touch #abilities { display: none; }
body.touch #mid { width: 190px; align-self: center; }
@media (max-width: 480px) {
  /* leave the top-right corner to the pause button */
  body.touch #bar { left: max(8px, env(safe-area-inset-left)); transform: scale(0.72); transform-origin: 0 0; }
}
body.touch .res.hp { height: 20px; }
body.touch #round { transform: scale(0.7); transform-origin: 0 100%; bottom: 170px; }
body.touch #perks { bottom: 252px; }
body.touch #pointsBox { bottom: 270px; }
body.touch #minimapBox { display: none; }
body.touch #prompt { bottom: 46%; }
body.touch #powerups { bottom: auto; top: 120px; }
body.touch #pauseBtn { left: auto; right: max(12px, env(safe-area-inset-right)); }
/* touch: top centre, over the champion bar for the few seconds it shows (the sides belong to the stick and buttons) */
body.touch #tipCard { left: 50%; top: max(8px, env(safe-area-inset-top)); width: min(460px, 80vw); transform: translateX(-50%); animation: none; padding: 9px 12px 11px; }
body.touch #tipCard .tip-ttl { font-size: 19px; }
body.touch #tipCard .tip-body { font-size: 15px; line-height: 1.45; }
body.touch #tipCard .tip-ok { padding: 8px 18px; }
/* a phone on its side: a wide, short card that ends above the prompt and the buttons */
@media (max-height: 500px) {
  body.touch #tipCard { width: min(600px, 70vw); }
  body.touch #tipCard .tip-body { font-size: 14px; line-height: 1.4; }
}