/* Site stylesheet, shared by every page. PIC2 dressed in the brand kit: navy,
   yellow, green and red on white, Montserrat throughout, headers in caps.
   Game-state class names (sel / good / bad / matched / flipped / win,
   message tones, ladder rows, banner win|over) match assets/js/game.js
   exactly. */

:root {
  --navy:   #0d2b7a;
  --yellow: #ffbf1a;
  --green:  #0b6b1e;
  --red:    #e31919;

  /* Brand yellow reads at 1.7:1 on white, so it can only ever be a shape —
     a ring, a fill, a highlight. This shade carries the yellow into text. */
  --yellow-ink: #8a6100;

  --font: "Montserrat", system-ui, sans-serif;

  --bg:         #f1f3f9;
  --surface:    #ffffff;
  --surface-2:  #f8f9fc;
  --ink:        #111111;
  --ink-soft:   #565d73;
  --ink-faint:  #646b82;
  --line:       rgba(13, 43, 122, .12);
  --line-firm:  rgba(13, 43, 122, .24);

  --r-tile: 16px;
  --r-card: 18px;
  --r-ctl:  10px;

  --shadow-sm: 0 1px 2px rgba(13, 43, 122, .06), 0 1px 3px rgba(13, 43, 122, .08);
  --shadow-md: 0 4px 14px rgba(13, 43, 122, .10), 0 2px 4px rgba(13, 43, 122, .06);
  --shadow-lg: 0 18px 44px rgba(13, 43, 122, .18);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(110% 70% at 85% -15%, rgba(255, 191, 26, .13), transparent 60%),
    radial-gradient(110% 70% at -10% 115%, rgba(13, 43, 122, .07), transparent 55%),
    var(--bg);
  min-height: 100vh;
  line-height: 1.5;
}

/* The grain layer from the shared theme is not used here. */
.grain { display: none; }

/* ---------- Masthead ---------- */
.masthead {
  text-align: center;
  padding: 18px 20px 6px;
  max-width: 1180px;
  margin: 0 auto;
}
.masthead-rule {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-faint);
  display: flex; align-items: center; justify-content: center; gap: .7em;
}
.masthead-rule span { color: var(--navy); }
.masthead-rule::before, .masthead-rule::after {
  content: ""; height: 1px; width: clamp(20px, 12vw, 120px);
  background: linear-gradient(90deg, transparent, var(--line-firm));
}
.masthead-rule::after { transform: scaleX(-1); }

/* The art runs to the edges of the file, so the space around it is set here.
   The brand kit asks for clear space equal to the "P" height (.245 of the logo
   width); this is deliberately tighter for the masthead. The logo has no alpha
   channel, so multiply drops its white ground into the page. */
.logo {
  --logo-w: clamp(200px, 30vw, 300px);
  margin: calc(var(--logo-w) * .05) 0;
  line-height: 0;
}
.logo img {
  width: var(--logo-w); height: auto;
  mix-blend-mode: multiply;
}
.tagline {
  font-size: clamp(1rem, 2.2vw, 1.2rem); font-weight: 500;
  color: var(--ink-soft); max-width: 46ch; margin: 10px auto 0;
}

/* ---------- Layout ---------- */
.wrap {
  max-width: 1180px; margin: 0 auto; padding: 18px 20px 40px;
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px;
  align-items: start;
}
@media (max-width: 920px) { .wrap { grid-template-columns: 1fr; } }

/* Past the old 1180px cap the rail and tiles hold the size they had at 1180
   (rail 438px, tiles 217px) and the board takes extra columns instead.
   1200px rather than 1181px leaves room for a scrollbar, so the stage never
   drops below three tiles wide. */
@media (min-width: 1200px) {
  .wrap { max-width: none; grid-template-columns: minmax(0, 1fr) 438px; }
}

/* ---------- HUD ---------- */
.hud {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  padding: 10px 18px; margin-bottom: 12px;
}
.hud-label {
  display: block;
  font-size: .62rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 4px;
}
.clock, .progress, .attempt {
  font-weight: 800; color: var(--navy);
  font-size: 1.45rem; line-height: 1; font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.hud-progress, .hud-attempt { text-align: right; }
.hud-lives { display: flex; align-items: center; gap: 9px; min-height: 1.45rem; }
.pip {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--green); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .12);
  transition: background .25s;
}
.pip.lost { background: var(--red); }

/* ---------- Message ---------- */
.message {
  font-size: 1.05rem; font-weight: 500;
  text-align: center; min-height: 1.5em; margin: 2px 0 10px; color: var(--ink-soft);
  transition: color .2s;
}
.message.good { color: var(--green); font-weight: 700; }
.message.bad  { color: var(--red);   font-weight: 700; }

/* ---------- Board ---------- */
.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1.4vw, 14px);
}
@media (min-width: 1200px) {
  .board { grid-template-columns: repeat(auto-fill, 217px); justify-content: center; }
}

/* Before Start the board is face-down stand-ins under the Start button, so the
   pictures can't be studied off the clock. */
.board-wrap { position: relative; }
.board-start {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 14px; padding: clamp(48px, 12vw, 150px) 16px 16px; text-align: center;
}
.board-start[hidden] { display: none; }
.board-start .solid-btn { font-size: 1rem; padding: 18px 44px; }
.board-start-note {
  margin: 0; max-width: 32ch; padding: 8px 14px;
  background: var(--surface); border-radius: var(--r-ctl); box-shadow: var(--shadow-sm);
  color: var(--ink-soft); font-weight: 600; font-size: .9rem;
}

.tile {
  --tile-ring: transparent;
  --tile-ring-edge: transparent;
  position: relative; aspect-ratio: 1 / 1; perspective: 900px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
  border-radius: var(--r-tile);
  animation: dealIn .5s cubic-bezier(.2, .9, .25, 1) backwards;
}
@keyframes dealIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }

.tile-inner {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.5, .05, .2, 1);
}
.tile.flipped .tile-inner { transform: rotateY(180deg); }

.face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: var(--r-tile);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--line),
    0 0 0 3px var(--tile-ring),
    0 0 0 4px var(--tile-ring-edge),
    var(--shadow-sm);
  transition: box-shadow .2s, transform .2s;
}
.face.front { background: var(--surface-2); color: var(--ink); }
.face.front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.face.back {
  background: var(--navy); color: #fff;
  transform: rotateY(180deg);
  font-weight: 800;
  font-size: clamp(.95rem, 2.4vw, 1.5rem); letter-spacing: .04em; text-transform: uppercase;
}

.tile:focus-visible { outline: none; }
.tile:focus-visible .face { box-shadow: 0 0 0 3px var(--navy), var(--shadow-md); }

/* Yellow reaches only 1.65:1 against the page, so on its own it would be the
   weakest signal in the game carrying its most-used interaction. The navy edge
   draws the ring's shape; the yellow stays the thing you actually read. Green
   and red clear 3:1 unaided and take no edge. */
.tile.sel  { --tile-ring: var(--yellow); --tile-ring-edge: var(--navy); }
.tile.sel .face.front { box-shadow: 0 0 0 3px var(--yellow), 0 0 0 4px var(--navy), var(--shadow-md); }
.tile.good { --tile-ring: var(--green); }
.tile.bad  { --tile-ring: var(--red); }
.tile.bad  .tile-inner { animation: shake .4s; }
@keyframes shake {
  20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); }
}
.tile.matched { cursor: default; }
.tile.blank { cursor: default; animation: none; }
/* Scaled up a touch so the blur doesn't fade the picture's edges into the tile. */
.tile.blank .face.front img { filter: blur(2px); transform: scale(1.06); }
.tile:not(.matched):not(.sel):not(.good):not(.bad):not(.blank):hover .face.front {
  transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line), var(--shadow-lg);
}
.tile.win .face.back {
  background: var(--green); color: #fff;
  font-weight: 800; font-size: clamp(1rem, 2.6vw, 1.55rem); letter-spacing: .03em;
}

.ghost-btn, .solid-btn {
  font-family: var(--font); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  border-radius: var(--r-ctl); padding: 12px 18px;
  transition: transform .12s, background .2s, box-shadow .2s;
}
.ghost-btn { background: var(--surface); border: 1px solid var(--line-firm); color: var(--navy); }
.ghost-btn:hover { border-color: var(--navy); box-shadow: var(--shadow-sm); }
.solid-btn { background: var(--navy); border: 1px solid var(--navy); color: #fff; box-shadow: var(--shadow-md); }
.solid-btn:hover { box-shadow: var(--shadow-lg); }
.ghost-btn:active, .solid-btn:active { transform: translateY(1px); }
.ghost-btn:focus-visible, .solid-btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

.next-drop {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; color: var(--ink-faint); text-align: center; margin: 24px 0 0;
}
.next-drop span { color: var(--navy); font-weight: 700; }

.site-footer {
  font-size: .68rem; font-weight: 500;
  line-height: 1.6; letter-spacing: .04em; color: var(--ink-faint);
  text-align: center; max-width: 80ch; margin: 24px auto 14px;
  padding: 14px 20px 0; border-top: 1px solid var(--line);
}
.site-footer p { margin: 0; }
.social { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.social-btn {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--navy); background: var(--surface);
  border: 1px solid var(--line-firm); border-radius: 999px; padding: 7px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.social-btn:hover { border-color: var(--navy); box-shadow: var(--shadow-sm); }
.social-btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.site-footer .site-contact { font-size: .78rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; }
.site-contact a { color: var(--navy); }

/* ---------- Rail / boards ---------- */
.board-card {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 16px 18px 14px; margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.board-title {
  font-weight: 800; font-size: 1.16rem;
  text-transform: uppercase; letter-spacing: .02em;
  color: var(--navy); margin: 0 0 4px;
}
.board-sub {
  font-size: .8rem; color: var(--ink-soft); margin: 0 0 10px;
}
.board-link {
  display: inline-block;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--line-firm);
  padding-bottom: 3px; margin-top: 10px;
  transition: border-color .15s;
}
.board-link:hover { border-bottom-color: var(--navy); }
.board-link:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.ladder-foot:not(:empty) + .board-link { margin-top: 12px; }

.board-note {
  font-size: .66rem; font-weight: 500;
  line-height: 1.5; letter-spacing: .06em; color: var(--ink-faint);
  margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--line);
}
.ladder { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.ladder li {
  display: grid; grid-template-columns: 1.6em 1fr auto; align-items: baseline;
  gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line);
}
.ladder li:last-child { border-bottom: 0; }
.ladder li.empty { display: block; color: var(--ink-faint); }
.ladder li.row::before {
  counter-increment: rank; content: counter(rank);
  font-size: .82rem; color: var(--ink-faint); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ladder li.row:nth-child(1)::before { color: var(--yellow-ink); }
.ladder .who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ladder .when { font-size: .72rem; color: var(--ink-faint); }
.ladder .result { display: flex; align-items: baseline; gap: 8px; justify-content: flex-end; }
.ladder .tries {
  font-size: .68rem; font-weight: 500;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.ladder .time {
  font-weight: 700; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.ladder li.mine { background: rgba(255, 191, 26, .22); border-radius: 8px; }

.rules ul { margin: 0; padding-left: 1.1em; }
.rules li { margin-bottom: 6px; font-size: .92rem; color: var(--ink-soft); }
.rules b { color: var(--ink); }
.yellow { color: var(--yellow-ink); } .green { color: var(--green); } .red { color: var(--red); }

/* ---------- Rules drawer (mobile slide-in) ---------- */
.hud-rules, .rules-backdrop, .rules-close { display: none; }

@media (max-width: 920px) {
  .masthead { padding: 12px 16px 4px; }
  .logo { --logo-w: clamp(180px, 46vw, 260px); }
  .tagline { font-size: 1rem; margin-top: 8px; }
  .auth { margin-top: 10px; }
  .wrap { padding: 12px 16px 32px; }
  .hud { padding: 9px 14px; gap: 10px; margin-bottom: 10px; }
  .clock, .progress, .attempt { font-size: 1.2rem; }
  .hud-lives { min-height: 1.2rem; }
  .pip { width: 13px; height: 13px; }
  .message { margin: 0 0 8px; font-size: .98rem; }

  .rules {
    position: fixed; top: 0; right: 0; z-index: 8;
    width: min(360px, 86vw); height: 100%; margin: 0;
    border-radius: 0; border-left: 1px solid var(--line-firm);
    box-shadow: var(--shadow-lg);
    padding-top: 56px; overflow-y: auto;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.5, .05, .2, 1);
  }
  .rules.open { transform: translateX(0); }

  .hud-rules {
    display: block; align-self: center;
    background: var(--navy); color: #fff;
    border: 1px solid var(--navy); border-radius: 6px; cursor: pointer;
    font-family: var(--font); font-size: .6rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    padding: 5px 7px; box-shadow: var(--shadow-sm);
  }
  .hud-rules:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

  .rules-backdrop {
    display: block; position: fixed; inset: 0; z-index: 7;
    background: rgba(13, 43, 122, .42); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .3s;
  }
  .rules-backdrop.open { opacity: 1; pointer-events: auto; }

  .rules-close {
    display: block; position: absolute; top: 14px; right: 14px;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--surface-2); border: 1px solid var(--line-firm);
    color: var(--ink-soft); font-size: 1.5rem; line-height: 1; cursor: pointer;
  }

  /* Signed-in players keep the rules inline in the rail, as on desktop. Kept
     last in this block so it wins over the drawer rules above. */
  .signed-in .rules {
    position: static; width: auto; height: auto; margin: 0 0 14px;
    border-radius: var(--r-card); border-left: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    padding-top: 16px; overflow-y: visible;
    transform: none; transition: none;
  }
  .signed-in .rules-backdrop, .signed-in .rules-close { display: none; }
}

/* ---------- Banner ---------- */
.banner {
  position: fixed; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13, 43, 122, .45); backdrop-filter: blur(4px);
  animation: fade .3s;
}
.banner[hidden] { display: none; }
/* After a failed attempt the board must be unreadable behind the popup, so
   there is nothing to study before pressing Try again. The blur has to be wide
   relative to a tile (217px on desktop) to wipe out shapes, not just edges. */
.banner.over {
  background: rgba(13, 43, 122, .7);
  -webkit-backdrop-filter: blur(48px) saturate(.6); backdrop-filter: blur(48px) saturate(.6);
}
@keyframes fade { from { opacity: 0; } }
.banner-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
  padding: 36px 42px; text-align: center; max-width: 420px; margin: 20px;
  box-shadow: var(--shadow-lg);
  animation: pop .35s cubic-bezier(.2, 1.2, .3, 1);
}
@keyframes pop { from { transform: scale(.9) translateY(10px); opacity: 0; } }
.banner-kicker {
  font-size: .7rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); margin: 0;
}
.banner-big {
  font-weight: 800; font-size: clamp(2.1rem, 7vw, 3.1rem);
  text-transform: uppercase; margin: .12em 0; line-height: 1; letter-spacing: -.01em;
  color: var(--navy);
}
.banner-sub { color: var(--ink-soft); margin: 0 0 24px; }
.banner.win .banner-big { color: var(--green); }
.banner.over .banner-big { color: var(--red); }

/* ---------- Accounts ---------- */
.auth {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap; margin-top: 12px;
}
.auth-cta {
  font-family: var(--font); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  background: var(--navy); color: #fff;
  border: 1px solid var(--navy); border-radius: var(--r-ctl);
  padding: 10px 16px; box-shadow: var(--shadow-md);
  transition: transform .12s, box-shadow .2s;
}
a.auth-cta { display: inline-block; text-decoration: none; }
a.auth-cta[hidden] { display: none; }
.auth-cta:hover { box-shadow: var(--shadow-lg); }
.auth-no-email {
  flex-basis: 100%; text-align: center; margin-top: -6px;
  font-size: .64rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}
.auth-cta:active { transform: translateY(1px); }
.auth-greeting {
  font-size: .78rem; font-weight: 500;
  letter-spacing: .04em; color: var(--ink-soft);
}
.auth-greeting b { color: var(--navy); font-weight: 700; }
.auth-link {
  font-family: var(--font); font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  background: none; border: 0; color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 3px; padding: 4px;
}
.auth-link:hover { color: var(--navy); }
.auth-cta:focus-visible, .auth-link:focus-visible {
  outline: 3px solid var(--navy); outline-offset: 2px;
}

/* ---------- Modal (auth) ---------- */
.modal {
  position: fixed; inset: 0; z-index: 9;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13, 43, 122, .45); backdrop-filter: blur(4px);
  animation: fade .3s;
}
.modal[hidden] { display: none; }
.modal-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
  padding: 34px 36px 28px; width: min(380px, 92vw); margin: 20px;
  box-shadow: var(--shadow-lg);
  animation: pop .35s cubic-bezier(.2, 1.2, .3, 1);
}
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line-firm);
  color: var(--ink-soft); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.modal-close:hover { color: var(--navy); }
.modal-kicker {
  font-size: .7rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); margin: 0;
}
.modal-title {
  font-weight: 800; font-size: 1.55rem;
  text-transform: uppercase; letter-spacing: .01em;
  color: var(--navy); margin: .1em 0 18px;
}

.auth-fields { display: grid; gap: 14px; }
.field span {
  display: block;
  font-size: .62rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 6px;
}
.auth-fields input {
  width: 100%; padding: 11px 13px; font: inherit;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-firm); border-radius: var(--r-ctl);
  transition: border-color .15s, box-shadow .15s;
}
.auth-fields input:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(13, 43, 122, .18);
}
.auth-fields .solid-btn { width: 100%; margin-top: 2px; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 64px; }
.pw-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  background: none; border: 0; border-radius: 6px; cursor: pointer;
  padding: 6px 8px; font-family: var(--font); font-size: .62rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--navy);
}
.pw-toggle:hover { background: var(--surface-2); }
.pw-toggle:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.auth-error { color: var(--red); font-size: .82rem; font-weight: 600; margin: 0; min-height: 1.1em; }
.auth-error:empty { min-height: 0; }
.auth-switch { font-size: .85rem; color: var(--ink-soft); margin: 16px 0 0; text-align: center; }
.linkish {
  background: none; border: 0; cursor: pointer; padding: 0;
  color: var(--navy); font: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
.auth-note {
  font-size: .74rem; color: var(--ink-faint); margin: 14px 0 0;
  text-align: center; line-height: 1.4;
}

/* ---------- Win-popup save prompt ---------- */
.banner-auth {
  border-top: 1px solid var(--line); margin: 4px 0 22px; padding-top: 18px;
  text-align: left;
}
.banner-auth[hidden] { display: none; }
.banner-auth-lead {
  font-size: .88rem; color: var(--ink-soft); margin: 0 0 12px; text-align: center;
}
.banner-auth input {
  width: 100%; padding: 10px 12px; font: inherit; margin-bottom: 10px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-firm); border-radius: var(--r-ctl);
}
.banner-auth input:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(13, 43, 122, .18);
}
.banner-auth-actions { display: flex; gap: 10px; }
.banner-auth .pw-wrap { margin-bottom: 10px; }
.banner-auth .pw-wrap input { margin-bottom: 0; }
.banner-auth-actions button { flex: 1; }

/* ---------- Leaderboard pagination ---------- */
.ladder-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px;
}
.ladder-foot:empty { margin-top: 0; }
.ladder-more, .ladder-collapse, .ladder-page {
  font-family: var(--font); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-firm);
  color: var(--navy); border-radius: var(--r-ctl); padding: 8px 12px;
  transition: border-color .15s, box-shadow .15s;
}
.ladder-page { padding: 6px 11px; }
.ladder-more:hover, .ladder-collapse:hover, .ladder-page:not(:disabled):hover {
  border-color: var(--navy); box-shadow: var(--shadow-sm);
}
.ladder-page:disabled { opacity: .4; cursor: default; }
.ladder-pageno {
  font-size: .72rem; font-weight: 600;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.ladder-collapse { margin-left: auto; }
.ladder.paged li.row:nth-child(1)::before { color: var(--ink-faint); }

/* ---------- My scores page ---------- */
.wrap-narrow { grid-template-columns: 1fr; max-width: 640px; }
.back-link {
  color: var(--ink-soft); text-decoration: none; font-weight: 600;
}
.back-link:hover { color: var(--navy); }
a.solid-btn { display: inline-block; text-decoration: none; }

/* Short viewports (laptops, landscape phones): the masthead is the only block
   that can give up height without the board shrinking, so it goes first. */
@media (max-height: 760px) and (min-width: 921px) {
  .masthead { padding: 10px 20px 2px; }
  .logo { --logo-w: clamp(180px, 22vw, 240px); }
  .tagline { margin-top: 6px; font-size: 1rem; }
  .auth { margin-top: 8px; }
  .wrap { padding-top: 12px; }
  .hud { padding: 8px 16px; margin-bottom: 10px; }
  .clock, .progress, .attempt { font-size: 1.25rem; }
  .hud-lives { min-height: 1.25rem; }
  .message { margin: 0 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .tile-inner { transition: none; }
}