/* Dypdykk 110: navy page, brass porthole frame, overlay screens and leaderboard. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Palette */
  --navy: #0B1F3A;
  --navy-deep: #07152A;
  --navy-soft: #13294A;
  --cream: #F3E9D2;
  --cream-dim: rgba(243, 233, 210, 0.66);
  --cream-faint: rgba(243, 233, 210, 0.38);
  --brass: #B08D57;
  --brass-light: #DCC08A;
  --brass-dark: #6E5530;
  --rust: #D9957A;
  /* Steel: only for the ad banners' frames, so ads read as separate from the game's brass */
  --steel-light: #D3DAE5;
  --steel: #8E9BB0;
  --steel-dark: #4F5C72;

  --font-title: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Layout */
  --frame: 24px;       /* brass frame thickness */
  --flange: 16px;      /* outer band of the frame, where the bolts sit */
  --frame-r: 40px;     /* outer corner radius; inner radii are derived so all curves stay concentric */
  --bolt: 9px;
  --gutter: 16px;
  --lb-w: 250px;       /* right column: leaderboard and rules */
  --lb-row: 38px;      /* one leaderboard row; the list is exactly 10 of these */
  --col-gap: 24px;     /* between game, right column and side banners */
  /* Outer size of the game frame, and of the frame plus the right column */
  --frame-h: calc(var(--game-w) * 1.5 + 2 * var(--frame));
  --content-w: calc(var(--game-w) + 2 * var(--frame) + var(--col-gap) + var(--lb-w));
  /* On-screen game width: fits the viewport, keeps the 2:3 shape, max 480px */
  --game-w: min(480px,
                calc(100vw - 2 * var(--gutter) - 2 * var(--frame)),
                calc((100vh - 2 * var(--gutter) - 2 * var(--frame)) * 2 / 3));
}
/* svh: sized for the screen with the browser toolbar showing, so the game doesn't resize while scrolling */
@supports (height: 100svh) {
  :root {
    --game-w: min(480px,
                  calc(100vw - 2 * var(--gutter) - 2 * var(--frame)),
                  calc((100svh - 2 * var(--gutter) - 2 * var(--frame)) * 2 / 3));
  }
}

html { background: var(--navy); }
body {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--gutter);
  background: radial-gradient(ellipse at 50% 30%, var(--navy-soft) 0%, var(--navy) 55%, var(--navy-deep) 100%) fixed;
  color: var(--cream);
  font-family: var(--font-mono);
  overflow-x: hidden;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;     /* fast taps next to the game don't double-tap zoom */
}

#layout { display: flex; align-items: flex-start; gap: var(--col-gap); flex-wrap: wrap; justify-content: center; }

/* ── Jubilee side banners: steel-framed cards either side of the content (layout: "Wide screens" below) ── */
.side-ad { display: none; }
@media (min-width: 1240px) {
  .side-ad {
    display: block; position: relative; flex: 0 1 auto; min-width: 0; overflow: hidden;
    height: var(--frame-h);
    /* The artwork's 1:2 shape when there is room; otherwise whatever is left beside the content,
       which crops the image's sides (see the safe zone in HANDOVER.md) */
    width: min(calc(var(--frame-h) / 2),
               calc((100vw - var(--content-w)) / 2 - var(--gutter) - var(--col-gap)));
    border-radius: 18px;            /* same corners and shadow as the leaderboard and rules cards */
    /* Thin brushed-steel frame, lit from the top left like the brass game frame: a different metal,
       so the ads stand apart from the game and the cards. The image fills the inside of the frame. */
    border: 3px solid transparent;
    background: linear-gradient(145deg, var(--steel-light) 0%, var(--steel) 45%, var(--steel-dark) 100%) border-box;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 12px 30px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s;
  }
  .side-ad::after {                 /* fine light edge where the steel meets the artwork */
    content: ''; position: absolute; inset: 0; pointer-events: none;
    border-radius: 15px;            /* 18px minus the frame, so the curves stay concentric */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  }
}
.side-ad img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The funk poster has text out to its edges: shrink it whole to the column instead of cropping
   its sides, at the bottom, on its own cream (see "Swap a side banner") */
.ad-left img { object-fit: contain; object-position: bottom; background: #F3EEDF; }
.side-ad:hover { transform: translateY(-2px); }
.side-ad:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

/* ── Brass porthole frame ── */
#game-wrap {
  position: relative; flex-shrink: 0;
  padding: var(--frame);
  border-radius: var(--frame-r);
  background: linear-gradient(145deg, var(--brass-light) 0%, var(--brass) 40%, var(--brass-dark) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.45),
    inset 0 -2px 3px rgba(0, 0, 0, 0.35),
    0 18px 40px rgba(0, 0, 0, 0.45);
}
/* engraved line between the outer flange and the inner lip, which steps down towards the glass */
#game-wrap::before {
  content: ''; position: absolute; inset: var(--flange);
  border-radius: calc(var(--frame-r) - var(--flange)); pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(40, 25, 5, 0.55),
    inset 1px 2px 3px 1px rgba(40, 25, 5, 0.22),
    0 0 0 1px rgba(255, 235, 190, 0.22);
}

/* Bolts sit on the centre line of the flange: straight edges at half the flange width,
   corners on the flange's centre arc at 45°. */
.bolt {
  --edge: calc((var(--flange) - var(--bolt)) / 2);
  --corner: calc(var(--frame-r) - (var(--frame-r) - var(--flange) / 2) * 0.7071 - var(--bolt) / 2);
  position: absolute; width: var(--bolt); height: var(--bolt); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--brass-light) 0%, var(--brass) 45%, var(--brass-dark) 100%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.45), inset 0 0 0 0.5px rgba(40, 25, 5, 0.6);
}
.bolt.tl { top: var(--corner); left: var(--corner); }
.bolt.tc { top: var(--edge); left: calc(50% - var(--bolt) / 2); }
.bolt.tr { top: var(--corner); right: var(--corner); }
.bolt.ml { top: calc(50% - var(--bolt) / 2); left: var(--edge); }
.bolt.mr { top: calc(50% - var(--bolt) / 2); right: var(--edge); }
.bolt.bl { bottom: var(--corner); left: var(--corner); }
.bolt.bc { bottom: var(--edge); left: calc(50% - var(--bolt) / 2); }
.bolt.br { bottom: var(--corner); right: var(--corner); }

/* The "glass": canvas plus overlay, clipped to a rounded window */
#viewport {
  position: relative; overflow: hidden; border-radius: calc(var(--frame-r) - var(--frame));
  background: var(--navy-deep);
  touch-action: none;             /* no scrolling or zooming while playing */
}
#viewport::after {                /* faint glass sheen and inner shadow */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 38%);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.45), inset 0 0 28px rgba(0, 0, 0, 0.3);
}
#c { display: block; width: var(--game-w); height: calc(var(--game-w) * 1.5); }

/* ── Overlay: score and screens ── */
#ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; flex-direction: column; align-items: center; }
#score-display {
  margin-top: 14px;
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(2rem, calc(var(--game-w) * 0.1), 3rem);
  font-variant-numeric: tabular-nums;
  color: var(--cream); line-height: 1;
  text-shadow: 0 2px 0 rgba(7, 21, 42, 0.55), 0 0 14px rgba(7, 21, 42, 0.4);
}

.screen {
  position: absolute; inset: 0; pointer-events: all;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.5rem; text-align: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(19, 41, 74, 0.8) 0%, rgba(7, 21, 42, 0.93) 100%);
}
.screen.hidden { display: none; }

/* Start screen: the title sits above the bobbing ROV and the controls below it, so the ROV shows
   in between. --u is one game unit (the game is 360 wide); the idle ROV bobs between y = 217 and 267.
   On small phones the gap gives way first, so the controls always fit. Short screens (landscape)
   have no room for it and keep the centred stack. */
@media (min-height: 501px) {
  #start-screen { --u: calc(var(--game-w) / 360); justify-content: flex-start; }
  .start-head {
    flex: 0 1 calc(279 * var(--u) - 1.5rem); min-height: 0;   /* top padding down to the controls at y = 279 */
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  }
  .start-head::after { content: ''; flex: 0 1 calc(74 * var(--u)); }   /* the gap: title ends at y = 205 */
  .start-head .screen-sub { margin-bottom: 0; }
}

/* NTH 110 logo: grows with the game (112px tall at full size), so the porthole text stays legible */
.emblem {
  height: min(112px, calc(var(--game-w) * 0.24)); width: auto;
  margin-bottom: 0.9rem; flex-shrink: 0;
  filter: drop-shadow(0 3px 6px rgba(7, 21, 42, 0.5));
}

.screen-title {
  font-family: var(--font-title); font-weight: 600;
  font-size: clamp(2rem, calc(var(--game-w) * 0.115), 3.1rem);
  line-height: 1.05; letter-spacing: -0.01em;
  color: var(--cream); margin-bottom: 0.4rem;
}
.screen-title .num { color: var(--brass-light); }
.screen-sub {
  font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--brass-light); margin-bottom: 1.5rem;
}
.rule { width: 56px; height: 1px; background: var(--brass); opacity: 0.7; margin: 0.5rem auto 1.2rem; }

.btn {
  width: min(210px, 100%); margin-bottom: 0.6rem; padding: 0.72rem 1.6rem;
  font-family: var(--font-mono); font-weight: 600; font-size: 0.76rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy); cursor: pointer;
  background: linear-gradient(180deg, var(--brass-light) 0%, var(--brass) 55%, var(--brass-dark) 100%);
  border: 1px solid var(--brass-dark); border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 245, 220, 0.45), 0 3px 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.15s, filter 0.15s;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 245, 220, 0.35), 0 1px 0 rgba(0, 0, 0, 0.25); }
.btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.btn.secondary {
  background: transparent; color: var(--cream-dim); box-shadow: none;
  border: 1px solid rgba(176, 141, 87, 0.55); font-size: 0.7rem;
}
.btn.secondary:hover { color: var(--cream); border-color: var(--brass-light); filter: none; }

.name-input {
  width: min(210px, 100%); margin-bottom: 0.9rem; padding: 0.62rem 1rem;
  font-family: var(--font-mono); font-size: 1rem; text-align: center;   /* 16px: under that, iOS zooms in on focus */
  color: var(--cream); background: rgba(7, 21, 42, 0.6);
  border: 1px solid rgba(176, 141, 87, 0.5); border-radius: 999px; outline: none;
  user-select: text; -webkit-user-select: text;
}
.name-input::placeholder { color: var(--cream-faint); }
.name-input:focus { border-color: var(--brass-light); box-shadow: 0 0 0 3px rgba(220, 192, 138, 0.18); }
.name-input.shake { animation: shake 0.35s ease; border-color: var(--rust); }
/* Contest rule under the name field; brightens while the player types */
.name-hint { max-width: 250px; margin: -0.35rem 0 0.9rem; font-size: 0.62rem; line-height: 1.5; color: var(--cream-faint); transition: color 0.15s; }
.name-hint strong { color: var(--brass-light); font-weight: 600; }
.name-input:focus + .name-hint { color: var(--cream-dim); }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.tip { font-size: 0.66rem; letter-spacing: 0.06em; color: var(--cream-faint); margin-top: 0.5rem; }

.stat-row { display: flex; gap: 2.2rem; margin-bottom: 1.4rem; }
.stat { text-align: center; }
.stat-label { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-light); opacity: 0.85; margin-bottom: 0.2rem; }
.stat-val { font-weight: 600; font-size: 2rem; line-height: 1; color: var(--cream); font-variant-numeric: tabular-nums; }
.stat-val.hi { color: var(--brass-light); }
#medal { display: none; }          /* emoji medal doesn't fit the heritage look; logic kept in main.js */
#saving-msg { font-size: 0.68rem; letter-spacing: 0.06em; margin-top: 0.4rem; min-height: 1.2em; }

/* ── Right column: leaderboard over rules, together as tall as the frame
   (taller on short screens, so all 10 rows and the rules always show) ── */
#sidebar {
  width: var(--lb-w); flex-shrink: 0;
  min-height: var(--frame-h);
  display: flex; flex-direction: column; gap: 14px;
}

/* ── Leaderboard ── */
#leaderboard {
  flex: none;                     /* sized to exactly 10 rows; the rules card takes the rest */
  display: flex; flex-direction: column; overflow: hidden;
}
#leaderboard, #rules {            /* navy card */
  background: linear-gradient(180deg, var(--navy-soft) 0%, var(--navy-deep) 100%);
  border: 1px solid rgba(176, 141, 87, 0.45); border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(243, 233, 210, 0.06);
}
#lb-header { padding: 1rem 1.2rem 0.55rem; flex-shrink: 0; }
#lb-title { font-family: var(--font-title); font-weight: 600; font-size: 1.35rem; color: var(--cream); line-height: 1.1; }
#lb-sub { font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-light); opacity: 0.8; margin-top: 0.25rem; }
/* Brass divider under the header: two tapering lines and a small porthole */
.lb-ornament { display: flex; align-items: center; gap: 6px; padding: 0 0.9rem; flex-shrink: 0; }
.lb-ornament svg { width: 16px; height: 16px; flex-shrink: 0; }
.lb-ornament-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(176, 141, 87, 0), var(--brass) 70%, var(--brass-light)); }
.lb-ornament-line:last-child { transform: scaleX(-1); }
.orn-ring { fill: var(--navy-deep); stroke: var(--brass); stroke-width: 1.6; }
.orn-bolts { fill: var(--brass-light); }
#lb-list { height: calc(10 * var(--lb-row) + 0.8rem); overflow-y: auto; padding: 0.4rem 0; }
#lb-list::-webkit-scrollbar { width: 3px; }
#lb-list::-webkit-scrollbar-thumb { background: rgba(176, 141, 87, 0.35); }
.lb-row { position: relative; display: flex; align-items: center; gap: 0.75rem; height: var(--lb-row); padding: 0 1.2rem; border-bottom: 1px solid rgba(243, 233, 210, 0.06); }
.lb-row.me { background: rgba(176, 141, 87, 0.12); }
.lb-rank { width: 22px; flex-shrink: 0; text-align: center; font-size: 0.8rem; color: var(--cream-faint); }
/* Top three: the rank is struck on a small brass, silver or bronze medallion */
.lb-rank.gold, .lb-rank.silver, .lb-rank.bronze {
  --m-light: var(--brass-light); --m-base: var(--brass); --m-dark: var(--brass-dark);
  position: relative; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 600; color: var(--navy-deep);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  background: radial-gradient(circle at 35% 30%, var(--m-light) 0%, var(--m-base) 55%, var(--m-dark) 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.lb-rank.gold::before, .lb-rank.silver::before, .lb-rank.bronze::before {   /* engraved inner ring */
  content: ''; position: absolute; inset: 2.5px; border-radius: 50%;
  box-shadow: inset 0 0 0 0.75px rgba(0, 0, 0, 0.28), 0 0 0 0.75px rgba(255, 255, 255, 0.22);
}
.lb-rank.silver { --m-light: #EEF1F3; --m-base: #BCC3C9; --m-dark: #6F787F; }
.lb-rank.bronze { --m-light: #E6B08A; --m-base: #B47A50; --m-dark: #633D22; }
/* A row whose score just arrived from Firebase glows brass twice, then settles */
.lb-row.fresh::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(220, 192, 138, 0.32), rgba(220, 192, 138, 0.1));
  box-shadow: inset 2px 0 0 var(--brass-light);
  opacity: 0; animation: lb-fresh 2.6s ease-out;
}
.lb-row.fresh .lb-score { animation: lb-fresh-score 2.6s ease-out; }
@keyframes lb-fresh { 0% { opacity: 0; } 10% { opacity: 1; } 30% { opacity: 0.35; } 45% { opacity: 0.9; } 100% { opacity: 0; } }
@keyframes lb-fresh-score { 0%, 50% { color: var(--brass-light); } 100% { color: var(--cream); } }
.lb-name { flex: 1; font-size: 0.8rem; color: var(--cream-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-name.me-name { color: var(--brass-light); font-weight: 600; }
.lb-score { flex-shrink: 0; font-weight: 600; font-size: 0.95rem; color: var(--cream); font-variant-numeric: tabular-nums; }
.lb-empty { padding: 1.5rem; font-size: 0.72rem; line-height: 1.6; color: var(--cream-faint); text-align: center; }
#lb-footer { flex-shrink: 0; padding: 0.6rem 1.2rem; border-top: 1px solid rgba(176, 141, 87, 0.25); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-faint); text-align: center; }

/* ── Contest rules: a navy card like the leaderboard, beside it (under the right banner on wide
   screens). A brighter brass edge, a warm glow at the top and a brass title make the prize stand out. ── */
#rules {
  flex: 1 1 auto; padding: 1rem 1.2rem 1.1rem;
  border-color: var(--brass);
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(220, 192, 138, 0.16), rgba(220, 192, 138, 0) 70%),
    linear-gradient(180deg, var(--navy-soft) 0%, var(--navy-deep) 100%);
}
.rules-head { display: flex; align-items: center; gap: 0.6rem; }
.beer-icon { width: 30px; height: 30px; flex-shrink: 0; fill: none; stroke: var(--brass-light); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#rules-title { font-family: var(--font-title); font-weight: 600; font-size: 1.35rem; line-height: 1.1; color: var(--brass-light); }
.rules-label {
  margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid rgba(176, 141, 87, 0.25);
  font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-light); opacity: 0.8;
}
/* numbered, with wrapped lines hanging under the text instead of under the number */
.rules-text { padding: 0.45rem 0 0 3ch; font-size: 0.7rem; line-height: 1.6; color: var(--cream-dim); text-wrap: pretty; }
.rules-text li + li { margin-top: 0.5rem; }
.rules-text li::marker { color: var(--brass-light); font-weight: 600; }
.rules-text strong, .rules-text a { color: var(--cream); font-weight: 600; }
.rules-text a { text-decoration-color: var(--brass); text-underline-offset: 2px; }
.rules-text a:focus-visible { outline: 2px solid var(--brass-light); outline-offset: 2px; }

/* Wide screens (side banners showing): a grid of left banner, game, leaderboard, and a right column
   where a shorter right banner sits over the rules card. Every column is as tall as the game frame.
   #sidebar steps aside (display: contents) so the leaderboard and the rules get cells of their own;
   below 1240px it keeps both, as before. */
@media (min-width: 1240px) {
  #layout {
    display: grid; justify-content: center; align-items: stretch;
    grid-template-columns: var(--left-w) auto var(--lb-w) var(--right-w);
    grid-template-rows: 1fr auto;   /* the rules card takes its own height; the right banner gets the rest */
    grid-template-areas: "ad-left game board ad-right" "ad-left game board rules";
    column-gap: var(--col-gap); row-gap: 14px;
  }
  /* Room beside the game for both side columns, split so the game sits in the middle of the screen:
     the left column is as wide as everything right of the game (leaderboard, gap, right column).
     The right column (banner over the rules note) gets half of what the leaderboard leaves, but at
     least 260px so the note stays readable (never more than v127's 58 %, so the left banner is never
     narrower than before) and at most the artwork's 1:2 shape. The game is exactly centred from
     about 1660px wide; below that the note's floor pushes it left as little as it can. */
  #layout {
    --side-room: calc(100vw - var(--content-w) - 2 * var(--gutter) - 2 * var(--col-gap));
    --right-w: clamp(min(260px, var(--side-room) * 0.58),
                     (var(--side-room) - var(--lb-w) - var(--col-gap)) / 2, var(--frame-h) / 2);
    --left-w: min(var(--side-room) - var(--right-w), var(--right-w) + var(--lb-w) + var(--col-gap));
  }
  .side-ad.ad-right {
    grid-area: ad-right; height: auto;   /* stretches to what the rules note leaves */
    width: auto;                         /* fills the column */
  }
  .side-ad.ad-left {                     /* at most 1:2, next to the game; any extra room stays empty outside it */
    grid-area: ad-left; justify-self: end;
    width: min(calc(var(--frame-h) / 2), 100%);
  }
  #game-wrap { grid-area: game; }
  #sidebar { display: contents; }
  #leaderboard { grid-area: board; }
  #rules { grid-area: rules; width: 0; min-width: 100%; }   /* as wide as the banner above, never wider */
  /* The leaderboard alone is as tall as the frame, so its 10 rows share that height */
  #lb-list { flex: 1 1 auto; height: auto; min-height: 0; }
  #lb-list .lb-row { height: 10%; }
}

/* Narrow screens: the right column sits under the game at the same width.
   Side by side needs at most 802px + 2 gutters = 834px, so above 840px it always fits. */
@media (max-width: 840px) {
  #sidebar { width: calc(var(--game-w) + 2 * var(--frame)); min-height: 0; }
}
/* Phone-only buttons that open and close the leaderboard and rules sheet */
.info-btn, #info-close { display: none; }

/* Phones (portrait up to the widest iPhone, or landscape): the game alone, as big as it gets.
   No brass frame, and the right column becomes a full-screen sheet that the
   "Toppliste og regler" buttons open (body.info-open, main.js) */
@media (max-width: 460px), (max-height: 500px) {
  :root { --frame: 0px; --frame-r: 18px; --gutter: 10px; }   /* same corners as the cards */
  #game-wrap { background: none; }
  #game-wrap::before, .bolt { display: none; }
  .info-btn { display: block; padding-inline: 1rem; }        /* narrower padding keeps the label on one line */
  #sidebar { display: none; }
  body.info-open #sidebar {
    display: flex; position: fixed; inset: 0; z-index: 10;
    width: auto; min-height: 0; overflow-y: auto;
    /* viewport-fit=cover: keep clear of the notch and home indicator */
    padding: max(var(--gutter), env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right))
             max(var(--gutter), env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
    background: var(--navy-deep);
  }
  body.info-open #leaderboard, body.info-open #rules { width: 100%; max-width: 400px; margin-inline: auto; }
  #info-close { display: block; width: auto; position: sticky; bottom: 0; align-self: center; flex-shrink: 0; }   /* reachable while the sheet scrolls */
}
/* Phones in portrait: the game runs edge to edge. Its 2:3 shape is fixed by the gameplay, so the
   width is what limits its height; dropping the side gutters makes it ~5 % bigger and moves the
   top and bottom edges closer to the screen's. The vertical gutter and the sheet's padding stay. */
@media (max-width: 460px) {
  :root { --game-w: min(480px, 100vw, calc((100vh - 2 * var(--gutter)) * 2 / 3)); }
  @supports (height: 100svh) {
    :root { --game-w: min(480px, 100vw, calc((100svh - 2 * var(--gutter)) * 2 / 3)); }
  }
  body { padding-inline: 0; }
}
/* Short screens (phones in landscape): the game is under ~370px tall, so drop the emblem and
   the decorative lines and tighten the screens to keep all buttons visible */
@media (max-height: 500px) {
  .emblem, .screen-sub, .rule { display: none; }
  .screen { padding: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .side-ad { transition: none; }
  .btn:hover, .btn:active, .side-ad:hover { transform: none; }
  .name-input.shake { animation: none; }
  .lb-row.fresh::after { animation-name: lb-fresh-calm; }   /* one soft fade instead of two pulses */
}
@keyframes lb-fresh-calm { 0% { opacity: 0.8; } 100% { opacity: 0; } }