/* High-Score Hall: one screen, no page scroll. Panes page with buttons instead of scrolling. */
html, body.hl-body { height: 100%; overflow: hidden; }
body.hl-body { height: 100vh; height: 100dvh; margin: 0; background: var(--bg); color: var(--tx); }
body[data-theme=starport] { --bg: radial-gradient(900px 500px at 50% -10%, rgba(80,110,255,.25), transparent), #070a1e; --tx: #e6ecff; --mute: #9fb0e0; --pane: rgba(20,28,64,.72); --edge: rgba(122,150,255,.28);
  --acc: #7dffa8; --acc2: #5a7aff; --chip: rgba(255,255,255,.06); --on: #3dff8a; --onTx: #031a0c; --gold: #ffd35a; --silver: #cfd8f0; --bronze: #e39a5c; --font: Gluten, Georgia, serif; --head: Chango, Georgia, serif; }
body[data-theme=classic] { --bg: #f6f3ea; --tx: #1d2a44; --mute: #5d6a86; --pane: #fffdf7; --edge: rgba(36,87,197,.22); --acc: #2457c5; --acc2: #b8442c;
  --chip: rgba(36,87,197,.06); --on: #2457c5; --onTx: #fff; --gold: #c9930a; --silver: #7d8799; --bronze: #a8612c; --font: Gluten, Georgia, serif; --head: Chango, Georgia, serif; }
body[data-theme=retro] { --bg: #000; --tx: #33ff66; --mute: #1fb84a; --pane: #020a03; --edge: #1a7a33; --acc: #7dff9a; --acc2: #ffcc33; --chip: rgba(51,255,102,.07);
  --on: #33ff66; --onTx: #000; --gold: #ffcc33; --silver: #aaffbb; --bronze: #ff9933; --font: ui-monospace, "Courier New", monospace; --head: ui-monospace, "Courier New", monospace; }
body[data-theme=retro] .hl-app { text-shadow: 0 0 4px rgba(51,255,102,.55); }
body.hl-body, .hl-body button { font-family: var(--font); }
.hl-app.game-wrap { width: 100%; max-width: 1500px; height: 100%; margin: 0 auto; padding: 8px 12px 6px; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; }
.hl-top { display: flex; align-items: center; gap: 8px 12px; flex: 0 0 auto; position: relative; z-index: 30; flex-wrap: wrap; }
.hl-back { font-weight: 600; text-decoration: none; white-space: nowrap; color: var(--tx); }
.hl-title { margin: 0; font-family: var(--head); font-weight: 400; font-size: clamp(1.15rem, 2.4vw, 1.8rem); line-height: 1.1; white-space: nowrap; color: var(--tx); }
.hl-title span { color: var(--gold); }
.hl-links { margin: 0 0 0 auto; }
.gg-links.hl-links a, .hl-links .ggs-btn { min-height: 32px; }
/* Choices: a drop-down that stays open until closed */
.hl-choices-wrap { position: relative; }
.hl-choices-btn, .hl-seg button, .hl-theme, .hl-tabs button, .hl-pager button, .hl-panes button { font: inherit; font-weight: 600; cursor: pointer; color: var(--tx); background: var(--chip); border: 1px solid var(--edge); border-radius: 999px; }
.hl-choices-btn { padding: 6px 14px; }
.hl-choices-btn[aria-expanded=true], .hl-seg button.on, .hl-theme.on, .hl-tabs button[aria-selected=true], .hl-panes button.on { background: var(--on); color: var(--onTx); border-color: var(--on); text-shadow: none; }
.hl-choices { position: absolute; top: calc(100% + 8px); left: 0; width: 260px; padding: 10px; border-radius: 16px; background: var(--pane); backdrop-filter: blur(10px); border: 1px solid var(--edge);
  box-shadow: 0 18px 50px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 4px; max-height: calc(100dvh - 80px); overflow: auto; }
body[data-theme=classic] .hl-choices, body[data-theme=retro] .hl-choices { backdrop-filter: none; }
.hl-choices[hidden] { display: none; }
.hl-ch-head { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 6px; font-family: var(--head); }
.hl-x { font: inherit; font-size: 1.3rem; line-height: 1; border: 0; background: transparent; cursor: pointer; color: var(--tx); }
.hl-ch-item { font: inherit; font-weight: 600; text-align: left; padding: 7px 10px; border-radius: 10px; border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--tx); }
.hl-ch-item:hover, .hl-ch-item:focus-visible { background: var(--chip); border-color: var(--edge); outline: none; }
.hl-ch-label { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--mute); margin: 6px 4px 2px; }
.hl-seg { display: flex; gap: 4px; } .hl-seg button { flex: 1; padding: 5px 6px; border-radius: 10px; font-size: .85rem; }
.hl-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hl-theme { display: flex; align-items: center; gap: 2px; padding: 5px 7px; border-radius: 10px; font-size: .85rem; }
.hl-theme i { width: 13px; height: 13px; border-radius: 3px; display: inline-block; } .hl-theme i:last-of-type { margin-right: 5px; }
.hl-theme[data-theme=classic] i:first-child { background: #f6f3ea; } .hl-theme[data-theme=classic] i:nth-child(2) { background: #2457c5; }
.hl-theme[data-theme=retro] i:first-child { background: #000; } .hl-theme[data-theme=retro] i:nth-child(2) { background: #33ff66; }
.hl-theme[data-theme=starport] i:first-child { background: #070a1e; } .hl-theme[data-theme=starport] i:nth-child(2) { background: #5a7aff; }
/* layout */
.hl-panes { display: none; gap: 6px; flex: 0 0 auto; } .hl-panes button { flex: 1; padding: 6px 8px; }
.hl-main { flex: 1 1 0; min-height: 0; width: 100%; max-width: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 250px minmax(0, 1fr) 270px; }
.hl-pane { min-height: 0; display: flex; flex-direction: column; background: var(--pane); border: 1px solid var(--edge); border-radius: 16px; padding: 10px 12px; overflow: hidden; }
.hl-pane h2 { margin: 0 0 2px; font-family: var(--head); font-weight: 400; font-size: 1.02rem; letter-spacing: 0; text-transform: none; color: var(--acc); }
.hl-note { margin: 0 0 6px; font-size: .78rem; color: var(--mute); line-height: 1.3; }
.hl-list { flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.hl-row { display: flex; align-items: center; gap: 8px; height: 38px; flex: 0 0 38px; padding: 0 6px; border-bottom: 1px solid var(--edge); font-size: .9rem; overflow: hidden; }
.hl-row .rk { width: 26px; flex: 0 0 26px; text-align: center; font-weight: 600; color: var(--mute); font-variant-numeric: tabular-nums; }
.hl-row .nm { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.hl-row .nm small { display: block; font-weight: 400; font-size: .72rem; color: var(--mute); overflow: hidden; text-overflow: ellipsis; }
.hl-row .vl { flex: 0 0 auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 600; color: var(--acc); font-size: .85rem; text-align: right; }
.hl-row .vl small { display: block; font-size: .68rem; color: var(--mute); font-weight: 400; }
.hl-rec { height: 50px; flex-basis: 50px; } .hl-rec .em { font-size: 1.2rem; width: 26px; text-align: center; flex: 0 0 26px; }
.hl-rec a { color: inherit; text-decoration: none; } .hl-rec a:hover { text-decoration: underline; }
.r1 .rk { color: var(--gold); } .r2 .rk { color: var(--silver); } .r3 .rk { color: var(--bronze); }
.hl-empty { color: var(--mute); font-size: .88rem; padding: 10px 4px; }
.hl-pager { display: flex; align-items: center; justify-content: center; gap: 10px; flex: 0 0 auto; padding-top: 6px; }
.hl-pager button { width: 44px; height: 32px; padding: 0; } .hl-pager button:disabled { opacity: .35; cursor: default; }
.hl-pager span { min-width: 64px; text-align: center; font-size: .85rem; font-weight: 600; color: var(--mute); font-variant-numeric: tabular-nums; }
.hl-tabs { display: flex; gap: 6px; flex-wrap: wrap; flex: 0 0 auto; margin-bottom: 8px; } .hl-tabs button { padding: 5px 12px; font-size: .9rem; }
.hl-tabs button b { font-size: .72rem; opacity: .7; margin-left: 4px; } .hl-tabs button[hidden] { display: none; }
.hl-cards { flex: 1 1 0; min-height: 0; overflow: hidden; display: grid; gap: 10px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); grid-auto-rows: var(--ch, 220px); align-content: start; }
.hl-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border: 1px solid var(--edge); border-radius: 12px; padding: 6px 8px; background: var(--chip); }
.hl-card header { display: flex; align-items: center; gap: 6px; height: 30px; flex: 0 0 30px; }
.hl-card header .em { font-size: 1.15rem; }
.hl-card header a { flex: 1 1 auto; min-width: 0; font-weight: 600; text-decoration: none; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-card header a:hover { text-decoration: underline; color: var(--acc); }
.hl-card header small { flex: 0 0 auto; font-size: .7rem; color: var(--mute); }
.hl-card .hl-row { height: 28px; flex: 0 0 28px; font-size: .84rem; padding: 0 2px; }
.hl-card .hl-row:last-child { border-bottom: 0; }
.hl-card .play { margin-top: auto; flex: 0 0 auto; font-size: .78rem; font-weight: 600; text-align: right; color: var(--acc); text-decoration: none; padding-top: 2px; }
.hl-status { margin: 0; flex: 0 0 auto; font-size: .75rem; color: var(--mute); text-align: center; height: 16px; line-height: 16px; overflow: hidden; }
/* info dialog */
.hl-dlg { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); padding: 12px; }
.hl-dlg[hidden] { display: none; }
.hl-dlg-box { max-width: 560px; max-height: calc(100dvh - 24px); overflow: auto; background: var(--pane); color: var(--tx); border: 1px solid var(--edge); border-radius: 16px; padding: 14px 18px; }
body[data-theme=starport] .hl-dlg-box { background: #111938; }
.hl-dlg-box h2 { margin: 0 0 6px; font-family: var(--head); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 1.2rem; color: var(--acc); }
.hl-dlg-box ul { margin: 0 0 10px; padding-left: 20px; font-size: .92rem; } .hl-dlg-box li { margin: 4px 0; }
#gg-chat.ggc-popup { position: fixed; z-index: 40; }
/* narrow / short screens: one pane at a time */
.hl-app.one .hl-panes { display: flex; }
.hl-app.one .hl-main { grid-template-columns: minmax(0, 1fr); }
.hl-app.one .hl-pane { display: none; } .hl-app.one .hl-pane.show { display: flex; }
@media (max-width: 640px) {
  .hl-app.game-wrap { padding: 6px; gap: 6px; } .hl-links { display: none; } .hl-title { font-size: 1.05rem; }
  .hl-choices-btn { padding: 4px 9px; font-size: .88rem; } .hl-tabs button { padding: 4px 8px; font-size: .8rem; } .hl-tabs { gap: 4px; margin-bottom: 6px; }
}
@media (max-width: 480px) { .hl-top { flex-wrap: nowrap; gap: 6px; } .hl-back { font-size: .85rem; } .hl-choices { left: auto; right: -40px; } .hl-title { font-size: .95rem; } }