/* =========================================================
   FLAPPY FAMILIES — style.css
   Bright daytime pixel-art UI. All sizing derives from --px,
   which is one "game pixel" in CSS px (set by game.js on resize).
   The football border tile and the button icons are pixel art
   rendered to data URLs by game.js and injected as the
   --tile-ball / --ico-* custom properties.
   ========================================================= */

:root{
  --px: 1px;
  /* Outline thickness for pixel type, in game pixels. Thinned by JS when the
     Press Start 2P webfont is unavailable and a thin monospace stands in. */
  --ol: 2;

  --ink:        #0d1024;
  --paper:      #ffffff;

  --navy-0:     #0b1330;
  --navy-1:     #16224f;
  --navy-2:     #1e2d68;
  --navy-3:     #2c3f8c;
  --navy-line:  #4258ad;

  --sky-1:      #3aa7e8;
  --sky-2:      #6cc6f5;
  --blue-tile:  #3b93f0;
  --blue-tile2: #1f6fd0;

  --green-1:    #7ede4e;
  --green-2:    #4cc02f;
  --green-3:    #2f8f1f;

  --gold:       #ffcc00;
  --red:        #ff3b30;

  /* Injected by game.js; the fallbacks keep the page sane if JS is late. */
  --tile-ball: none;
  --tile-ball-sm: none;
  --ico-play: none;
  --ico-trophy: none;
  --ico-gear: none;
  --ico-home: none;
  --ico-city: none;

  color-scheme: light;
}

.no-pixelfont{ --ol: 1; }

*,
*::before,
*::after{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #070c1e;
  /* Kill iOS bounce / pull-to-refresh / double-tap zoom */
  touch-action: none;
  -ms-touch-action: none;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

body{
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Press Start 2P", "Courier New", ui-monospace, monospace;
  color: var(--paper);
  background:
    radial-gradient(130% 90% at 50% 0%, #1e2d68 0%, #101a3f 55%, #070c1e 100%);
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  line-height: 1.5;
}

/* ---------------------------------------------------------
   STAGE + DECORATIVE FOOTBALL BORDER
   --------------------------------------------------------- */

.stage{
  position: relative;
  width: calc(var(--px) * 320);
  height: calc(var(--px) * 544);
  padding: calc(var(--px) * 16);
  background-color: var(--navy-1);
  background-image: var(--tile-ball);
  background-size: calc(var(--px) * 16) calc(var(--px) * 16);
  background-repeat: repeat;
  box-shadow:
    0 0 0 calc(var(--px) * 2) var(--ink),
    0 0 calc(var(--px) * 26) rgba(58, 167, 232, .25);
  image-rendering: pixelated;
}

/* White keyline between the football border and the play area,
   exactly like the reference artwork. */
.stage__inner{
  position: relative;
  width: calc(var(--px) * 288);
  height: calc(var(--px) * 512);
  overflow: hidden;
  background: var(--sky-1);
  box-shadow:
    0 0 0 calc(var(--px) * 2) #ffffff,
    0 0 0 calc(var(--px) * 4) var(--ink);
}

canvas#game{
  display: block;
  width: calc(var(--px) * 288);
  height: calc(var(--px) * 512);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

/* ---------------------------------------------------------
   UI LAYER
   --------------------------------------------------------- */

.ui{
  position: absolute;
  inset: 0;
  pointer-events: none;   /* taps fall through to the canvas */
}

.hidden{ display: none !important; }

.screen{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--px) * 14) calc(var(--px) * 10) calc(var(--px) * 12);
  text-align: center;
}

.screen--center{
  justify-content: center;
  background: rgba(11, 19, 48, .55);
  pointer-events: auto;
}

.screen__top,
.screen__bottom{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--px) * 8);
}

/* ---------------------------------------------------------
   LOGO — per-letter colour blocks with a heavy black outline,
   in the spirit of the reference artwork.
   --------------------------------------------------------- */

.logo{
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--px) * 3);
  line-height: 1;
}

.logo__line{
  display: block;
  letter-spacing: calc(var(--px) * 2);
}

.logo__line--1{ font-size: calc(var(--px) * 26); }
.logo__line--2{ font-size: calc(var(--px) * 34); letter-spacing: calc(var(--px) * 3); }
.logo__line--long{ font-size: calc(var(--px) * 27); letter-spacing: calc(var(--px) * 2); }

.logo b,
.panel__title--over b{
  font-weight: normal;
  color: var(--c, #fff);
  /* A tight 8-way hard outline. The diagonal drop is kept to a single step:
     stacking more offsets reads as a doubled letterform, not a shadow. */
  text-shadow:
     calc(var(--px) *  var(--ol)) 0 0 var(--ink),
     calc(var(--px) * -1 * var(--ol)) 0 0 var(--ink),
     0 calc(var(--px) *  var(--ol)) 0 var(--ink),
     0 calc(var(--px) * -1 * var(--ol)) 0 var(--ink),
     calc(var(--px) *  var(--ol)) calc(var(--px) *  var(--ol)) 0 var(--ink),
     calc(var(--px) * -1 * var(--ol)) calc(var(--px) *  var(--ol)) 0 var(--ink),
     calc(var(--px) *  var(--ol)) calc(var(--px) * -1 * var(--ol)) 0 var(--ink),
     calc(var(--px) * -1 * var(--ol)) calc(var(--px) * -1 * var(--ol)) 0 var(--ink),
     calc(var(--px) *  4) calc(var(--px) *  4) 0 rgba(13,16,36,.42);
}

.logo b.sp,
.panel__title--over b.sp{ text-shadow: none; }

.tagline{
  margin: calc(var(--px) * 4) 0 0;
  font-size: calc(var(--px) * 12);
  color: #ffffff;
  letter-spacing: calc(var(--px) * 1);
  text-shadow:
     calc(var(--px) *  var(--ol)) 0 0 var(--ink),
     calc(var(--px) * -1 * var(--ol)) 0 0 var(--ink),
     0 calc(var(--px) *  var(--ol)) 0 var(--ink),
     0 calc(var(--px) * -1 * var(--ol)) 0 var(--ink),
     calc(var(--px) *  var(--ol)) calc(var(--px) *  var(--ol)) 0 var(--ink),
     calc(var(--px) * -1 * var(--ol)) calc(var(--px) *  var(--ol)) 0 var(--ink),
     calc(var(--px) *  var(--ol)) calc(var(--px) * -1 * var(--ol)) 0 var(--ink),
     calc(var(--px) * -1 * var(--ol)) calc(var(--px) * -1 * var(--ol)) 0 var(--ink);
}

.hint{
  margin: calc(var(--px) * 4) 0 0;
  font-size: calc(var(--px) * 6);
  color: rgba(255,255,255,.75);
}

.blink{ animation: blink 1.1s steps(1, end) infinite; }
@keyframes blink{ 0%,60%{opacity:1} 61%,100%{opacity:.2} }

@media (prefers-reduced-motion: reduce){
  .blink{ animation: none; }
}

/* ---------------------------------------------------------
   ICONS — pixel art from game.js, as background images
   --------------------------------------------------------- */

.ico{
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  image-rendering: pixelated;
  flex: 0 0 auto;
}

.ico--play  { width: calc(var(--px) * 16); height: calc(var(--px) * 16); background-image: var(--ico-play); }
.ico--trophy{ width: calc(var(--px) * 28); height: calc(var(--px) * 28); background-image: var(--ico-trophy); }
.ico--gear  { width: calc(var(--px) * 28); height: calc(var(--px) * 28); background-image: var(--ico-gear); }
.ico--home  { width: calc(var(--px) * 28); height: calc(var(--px) * 28); background-image: var(--ico-home); }
.ico--city  { width: calc(var(--px) * 28); height: calc(var(--px) * 28); background-image: var(--ico-city); }

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

.btn{
  pointer-events: auto;
  position: relative;
  display: block;
  width: 100%;
  max-width: calc(var(--px) * 200);
  margin: 0;
  padding: calc(var(--px) * 10) calc(var(--px) * 8) calc(var(--px) * 9);
  font: inherit;
  font-size: calc(var(--px) * 10);
  letter-spacing: calc(var(--px) * 1);
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0 45%, #ccd6ea 45% 100%);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow:
    0 0 0 calc(var(--px) * 3) var(--ink),
    0 calc(var(--px) * 4) 0 calc(var(--px) * 3) var(--ink);
  transition: transform .04s linear;
  touch-action: manipulation;
}

.btn:active{
  transform: translateY(calc(var(--px) * 3));
  box-shadow:
    0 0 0 calc(var(--px) * 3) var(--ink),
    0 calc(var(--px) * 1) 0 calc(var(--px) * 3) var(--ink);
}

.btn:focus-visible{ outline: calc(var(--px) * 2) dashed #fff; outline-offset: calc(var(--px) * 4); }

/* The big green START / RETRY button from the reference */
.btn--start{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--px) * 8);
  font-size: calc(var(--px) * 16);
  padding: calc(var(--px) * 11) calc(var(--px) * 10) calc(var(--px) * 10);
  color: #ffffff;
  background: linear-gradient(180deg, var(--green-1) 0 42%, var(--green-2) 42% 100%);
  box-shadow:
    0 0 0 calc(var(--px) * 3) var(--ink),
    0 calc(var(--px) * 5) 0 calc(var(--px) * 3) var(--ink),
    inset 0 calc(var(--px) * 3) 0 rgba(255,255,255,.55),
    inset 0 calc(var(--px) * -4) 0 rgba(0,0,0,.18);
  text-shadow:
     calc(var(--px) *  var(--ol)) 0 0 var(--ink),
     calc(var(--px) * -1 * var(--ol)) 0 0 var(--ink),
     0 calc(var(--px) *  var(--ol)) 0 var(--ink),
     0 calc(var(--px) * -1 * var(--ol)) 0 var(--ink),
     calc(var(--px) *  var(--ol)) calc(var(--px) *  var(--ol)) 0 var(--ink),
     calc(var(--px) * -1 * var(--ol)) calc(var(--px) *  var(--ol)) 0 var(--ink),
     calc(var(--px) *  var(--ol)) calc(var(--px) * -1 * var(--ol)) 0 var(--ink),
     calc(var(--px) * -1 * var(--ol)) calc(var(--px) * -1 * var(--ol)) 0 var(--ink);
}

.btn--primary{
  color: #ffffff;
  background: linear-gradient(180deg, #62b8ff 0 45%, #1f6fd0 45% 100%);
  text-shadow: calc(var(--px) * 2) calc(var(--px) * 2) 0 rgba(0,0,0,.55);
}

.btn--small{
  font-size: calc(var(--px) * 8);
  padding: calc(var(--px) * 8) calc(var(--px) * 6) calc(var(--px) * 7);
  max-width: calc(var(--px) * 160);
}

.btn--danger{
  color: #fff;
  background: linear-gradient(180deg, #ff6a6a 0 45%, #c62b2b 45% 100%);
}

.btn--send{
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  padding: calc(var(--px) * 8) calc(var(--px) * 9) calc(var(--px) * 7);
}

/* ---- Icon tiles (LEADERBOARD / SETTINGS) ---- */

.tilerow{
  display: flex;
  justify-content: center;
  gap: calc(var(--px) * 24);
  width: 100%;
}
.tilerow--compact{ gap: calc(var(--px) * 16); }
.tilerow--three{ gap: calc(var(--px) * 14); }
.tilerow--three .tile__face{ width: calc(var(--px) * 42); height: calc(var(--px) * 42); }
.tilerow--three .ico{ width: calc(var(--px) * 26); height: calc(var(--px) * 26); }
.tilerow--three .tile__label{ font-size: calc(var(--px) * 6); }

.tile{
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--px) * 6);
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: #ffffff;
  cursor: pointer;
  touch-action: manipulation;
}

.tile__face{
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--px) * 46);
  height: calc(var(--px) * 46);
  background: linear-gradient(180deg, #62b8ff 0 42%, var(--blue-tile) 42% 100%);
  box-shadow:
    0 0 0 calc(var(--px) * 3) var(--ink),
    0 calc(var(--px) * 4) 0 calc(var(--px) * 3) var(--ink),
    inset 0 calc(var(--px) * 3) 0 rgba(255,255,255,.5);
  transition: transform .04s linear;
}
.tile--sm .tile__face{ width: calc(var(--px) * 38); height: calc(var(--px) * 38); }
.tile--sm .ico{ width: calc(var(--px) * 22); height: calc(var(--px) * 22); }

.tile:active .tile__face{
  transform: translateY(calc(var(--px) * 3));
  box-shadow:
    0 0 0 calc(var(--px) * 3) var(--ink),
    0 calc(var(--px) * 1) 0 calc(var(--px) * 3) var(--ink),
    inset 0 calc(var(--px) * 3) 0 rgba(255,255,255,.5);
}

.tile__label{
  font-size: calc(var(--px) * 7);
  letter-spacing: calc(var(--px) * .5);
  text-shadow:
     calc(var(--px) *  1) 0 0 var(--ink),
     calc(var(--px) * -1) 0 0 var(--ink),
     0 calc(var(--px) *  1) 0 var(--ink),
     0 calc(var(--px) * -1) 0 var(--ink),
     calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--ink);
}
.tile--sm .tile__label{ font-size: calc(var(--px) * 6); }

/* Audio toggle */
.iconbtn{
  pointer-events: auto;
  position: absolute;
  top: calc(var(--px) * 6);
  right: calc(var(--px) * 6);
  z-index: 6;
  padding: calc(var(--px) * 5) calc(var(--px) * 6);
  font: inherit;
  font-size: calc(var(--px) * 6);
  color: var(--ink);
  background: var(--gold);
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 0 calc(var(--px) * 2) var(--ink), 0 calc(var(--px)*2) 0 calc(var(--px)*2) var(--ink);
  touch-action: manipulation;
}
.iconbtn[data-muted="true"]{ background: #7d879e; color: #e6ebf5; }

/* ---------------------------------------------------------
   HUD
   --------------------------------------------------------- */

.hud{
  position: absolute;
  top: calc(var(--px) * 28);
  left: 0;
  right: 0;
  text-align: center;
  font-size: calc(var(--px) * 30);
  color: #fff;
  text-shadow:
     calc(var(--px) *  3) calc(var(--px) *  3) 0 var(--ink),
     calc(var(--px) * -3) calc(var(--px) *  3) 0 var(--ink),
     calc(var(--px) *  3) calc(var(--px) * -3) 0 var(--ink),
     calc(var(--px) * -3) calc(var(--px) * -3) 0 var(--ink),
     0 calc(var(--px) * 6) 0 rgba(0,0,0,.4);
}

.hud.pop{ animation: pop .16s ease-out; }
@keyframes pop{ 0%{transform:scale(1)} 45%{transform:scale(1.28)} 100%{transform:scale(1)} }

/* ---------------------------------------------------------
   MILESTONE CELEBRATION
   Slides up from the bottom edge, holds, drops back. Sits over
   the ground strip so it never hides a pipe.
   --------------------------------------------------------- */

.welldone{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(var(--px) * 16);
  padding: 0 calc(var(--px) * 8);
  pointer-events: none;             /* taps pass through and still flap */
  transform: translateY(115%);
  transition: transform .34s cubic-bezier(.2, 1.5, .45, 1);
  will-change: transform;
}

.welldone.is-on{ transform: translateY(0); }

.welldone__img{
  display: block;
  width: calc(var(--px) * 69);
  height: calc(var(--px) * 96);
  image-rendering: pixelated;
  filter: drop-shadow(calc(var(--px) * 2) 0 0 var(--ink))
          drop-shadow(calc(var(--px) * -2) 0 0 var(--ink))
          drop-shadow(0 calc(var(--px) * 2) 0 var(--ink))
          drop-shadow(0 calc(var(--px) * -2) 0 var(--ink));
}

.welldone__text{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--px) * 5);
  padding-bottom: calc(var(--px) * 24);
}

.welldone__title{
  font-size: calc(var(--px) * 13);
  line-height: 1.3;
  color: var(--gold);
  text-align: center;
  text-shadow:
     calc(var(--px) *  var(--ol)) 0 0 var(--ink),
     calc(var(--px) * -1 * var(--ol)) 0 0 var(--ink),
     0 calc(var(--px) *  var(--ol)) 0 var(--ink),
     0 calc(var(--px) * -1 * var(--ol)) 0 var(--ink),
     calc(var(--px) *  var(--ol)) calc(var(--px) *  var(--ol)) 0 var(--ink),
     calc(var(--px) * -1 * var(--ol)) calc(var(--px) *  var(--ol)) 0 var(--ink),
     calc(var(--px) *  var(--ol)) calc(var(--px) * -1 * var(--ol)) 0 var(--ink),
     calc(var(--px) * -1 * var(--ol)) calc(var(--px) * -1 * var(--ol)) 0 var(--ink);
}

.welldone__score{
  font-size: calc(var(--px) * 20);
  color: #ffffff;
  text-shadow:
     calc(var(--px) *  var(--ol)) 0 0 var(--ink),
     calc(var(--px) * -1 * var(--ol)) 0 0 var(--ink),
     0 calc(var(--px) *  var(--ol)) 0 var(--ink),
     0 calc(var(--px) * -1 * var(--ol)) 0 var(--ink),
     calc(var(--px) * 3) calc(var(--px) * 3) 0 var(--ink);
}

.welldone.is-on .welldone__img{ animation: wd-bob .5s ease-in-out .3s 2; }
@keyframes wd-bob{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--px) * -4)); }
}

@media (prefers-reduced-motion: reduce){
  .welldone{ transition: opacity .2s linear; transform: none; opacity: 0; }
  .welldone.is-on{ opacity: 1; }
  .welldone.is-on .welldone__img{ animation: none; }
}

.ready-title{
  margin: 0;
  font-size: calc(var(--px) * 20);
  color: var(--gold);
  text-shadow:
     calc(var(--px) *  var(--ol)) 0 0 var(--ink),
     calc(var(--px) * -1 * var(--ol)) 0 0 var(--ink),
     0 calc(var(--px) *  var(--ol)) 0 var(--ink),
     0 calc(var(--px) * -1 * var(--ol)) 0 var(--ink),
     calc(var(--px) * 4) calc(var(--px) * 4) 0 var(--ink);
}
.ready-sub{
  margin: calc(var(--px) * 12) 0 0;
  font-size: calc(var(--px) * 9);
  color: #fff;
  text-shadow: calc(var(--px)*2) calc(var(--px)*2) 0 var(--ink);
}
#scReady{ background: transparent; pointer-events: none; justify-content: center; }

.fps{
  position: absolute;
  left: calc(var(--px) * 6);
  top: calc(var(--px) * 6);
  font-size: calc(var(--px) * 6);
  color: #fff;
  text-shadow: calc(var(--px)*1) calc(var(--px)*1) 0 var(--ink);
}

/* ---------------------------------------------------------
   PANELS (modals)
   --------------------------------------------------------- */

.panel{
  pointer-events: auto;
  width: 100%;
  /* Multiples of the 12px modal tile, so the football border shows whole
     balls down both edges instead of a clipped column. */
  max-width: calc(var(--px) * 240);
  padding: calc(var(--px) * 14) calc(var(--px) * 12) calc(var(--px) * 16);
  background: var(--navy-2);
  box-shadow:
    0 0 0 calc(var(--px) * 3) #ffffff,
    0 0 0 calc(var(--px) * 6) var(--ink),
    0 calc(var(--px) * 6) 0 calc(var(--px) * 6) rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--px) * 10);
}

/* Football border, matching the outer stage frame */
.panel--framed{
  padding: calc(var(--px) * 12);
  background-color: var(--navy-1);
  background-image: var(--tile-ball-sm);
  background-size: calc(var(--px) * 12) calc(var(--px) * 12);
  gap: 0;
}

.panel--framed > *{ width: 100%; }

/* Flat fill, not a gradient: each block paints its own background, and a
   per-block gradient would restart at every boundary and leave seams. */
.panel--framed > .panel__title,
.panel--framed > .scoreboard,
.panel--framed > .submit,
.panel--framed > .msg,
.panel--framed > .board,
.panel--framed > .scenery,
.panel--framed > .settings,
.panel--framed > .panel__actions,
.panel--framed > .tabs,
.panel--framed > .whogrid,
.panel--framed > .pinhead,
.panel--framed > .keypad,
.panel--framed > .adminlist{
  background: var(--navy-2);
  padding-left: calc(var(--px) * 8);
  padding-right: calc(var(--px) * 8);
}

.panel--framed > .panel__title{ padding-top: calc(var(--px) * 12); }
.panel--framed > .panel__actions{ padding-bottom: calc(var(--px) * 12); }

.panel__title{
  margin: 0;
  padding: calc(var(--px) * 4) 0 calc(var(--px) * 8);
  font-size: calc(var(--px) * 15);
  letter-spacing: calc(var(--px) * 1);
  color: #fff;
  text-align: center;
  text-shadow:
     calc(var(--px) *  var(--ol)) 0 0 var(--ink),
     calc(var(--px) * -1 * var(--ol)) 0 0 var(--ink),
     0 calc(var(--px) *  var(--ol)) 0 var(--ink),
     0 calc(var(--px) * -1 * var(--ol)) 0 var(--ink),
     calc(var(--px) * 3) calc(var(--px) * 3) 0 var(--ink);
}

.panel__title--over{
  font-size: calc(var(--px) * 15);
  text-shadow: none;
  letter-spacing: calc(var(--px) * 1);
}

.panel__actions{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--px) * 9);
  padding-top: calc(var(--px) * 6);
}

/* ---------------------------------------------------------
   SCOREBOARD
   --------------------------------------------------------- */

.scoreboard{
  display: flex;
  flex-direction: column;
  gap: calc(var(--px) * 5);
  padding-bottom: calc(var(--px) * 6);
}

.scoreboard__row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--px) * 8);
  padding: calc(var(--px) * 6);
  background: var(--navy-0);
  box-shadow: inset 0 0 0 calc(var(--px) * 2) var(--navy-line);
}

.lbl{ font-size: calc(var(--px) * 7); color: #9fb4e8; }
.val{ font-size: calc(var(--px) * 14); color: #fff; text-shadow: calc(var(--px)*2) calc(var(--px)*2) 0 var(--ink); }
.val--best{ color: var(--gold); }

.medal{
  margin: 0;
  text-align: center;
  font-size: calc(var(--px) * 7);
  color: var(--gold);
  min-height: calc(var(--px) * 10);
}

/* ---------------------------------------------------------
   NAME SUBMIT
   --------------------------------------------------------- */

.submit{
  display: flex;
  gap: calc(var(--px) * 6);
  align-items: stretch;
  padding-bottom: calc(var(--px) * 4);
}

.nameinput{
  flex: 1 1 auto;
  min-width: 0;
  padding: calc(var(--px) * 8) calc(var(--px) * 6);
  font-family: inherit;
  /* 16px floor stops iOS Safari zooming in on focus */
  font-size: max(16px, calc(var(--px) * 9));
  text-transform: uppercase;
  letter-spacing: calc(var(--px) * 1);
  color: var(--ink);
  background: #ffffff;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 calc(var(--px) * 3) var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
.nameinput::placeholder{ color: #9aa5bd; }
.nameinput:focus{ outline: none; box-shadow: inset 0 0 0 calc(var(--px)*3) var(--ink), 0 0 0 calc(var(--px)*2) var(--gold); }

.msg{
  margin: 0;
  padding-bottom: calc(var(--px) * 6);
  min-height: calc(var(--px) * 12);
  font-size: calc(var(--px) * 6);
  line-height: 1.7;
  text-align: center;
  color: #9fd8ff;
}
.msg--err{ color: #ff9d9d; }
.msg--ok{ color: #a8ff9d; }

/* ---------------------------------------------------------
   LEADERBOARD LIST
   --------------------------------------------------------- */

.panel--tall{ max-width: calc(var(--px) * 252); }

.board{
  list-style: none;
  margin: 0;
  padding: 0 calc(var(--px) * 8) calc(var(--px) * 6);
  display: flex;
  flex-direction: column;
  gap: calc(var(--px) * 3);
}

.board__row{
  display: grid;
  grid-template-columns: calc(var(--px) * 16) calc(var(--px) * 20) 1fr auto;
  align-items: center;
  gap: calc(var(--px) * 4);
  padding: calc(var(--px) * 5);
  font-size: calc(var(--px) * 7);
  background: var(--navy-0);
}
.board__row:nth-child(1){ background: rgba(255,204,0,.24); color: #ffe58a; }
.board__row:nth-child(2){ background: rgba(210,222,245,.18); }
.board__row:nth-child(3){ background: rgba(214,140,90,.20); }
.board__row.is-me{ box-shadow: inset 0 0 0 calc(var(--px)*2) var(--gold); }

.board__rank{ color: #9fb4e8; text-align: left; }
.board__name{
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  text-align: left;
}
.board__score{ color: #fff; text-align: right; }

.board__empty{
  padding: calc(var(--px) * 12) 0;
  text-align: center;
  font-size: calc(var(--px) * 7);
  color: #9fb4e8;
}

/* ---------------------------------------------------------
   SCENERY PICKER
   Each row shows a live thumbnail rendered from the theme
   itself, so the previews can never drift from the game.
   --------------------------------------------------------- */

.scenery{
  list-style: none;
  margin: 0;
  padding: 0 calc(var(--px) * 8) calc(var(--px) * 6);
  display: flex;
  flex-direction: column;
  gap: calc(var(--px) * 5);
}

.scenery__opt{
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 8);
  width: 100%;
  padding: calc(var(--px) * 4);
  font: inherit;
  text-align: left;
  color: #fff;
  background: var(--navy-0);
  border: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 calc(var(--px) * 2) var(--navy-line);
  touch-action: manipulation;
}

/* Opaque, not a tint — a translucent fill would let the panel's football
   tile show through and swallow the label. */
.scenery__opt[aria-checked="true"]{
  background: #3a3520;
  box-shadow: inset 0 0 0 calc(var(--px) * 2) var(--gold);
}

.scenery__thumb{
  flex: 0 0 auto;
  width: calc(var(--px) * 62);
  height: calc(var(--px) * 40);
  image-rendering: pixelated;
  box-shadow: 0 0 0 calc(var(--px) * 1) var(--ink);
  background: var(--navy-1);
}

.scenery__meta{
  display: flex;
  flex-direction: column;
  gap: calc(var(--px) * 3);
  min-width: 0;
}

.scenery__name{ font-size: calc(var(--px) * 8); }
.scenery__blurb{ font-size: calc(var(--px) * 5); color: #9fb4e8; line-height: 1.6; }
.scenery__opt[aria-checked="true"] .scenery__name{ color: var(--gold); }

.scenery__tick{
  margin-left: auto;
  padding-right: calc(var(--px) * 4);
  font-size: calc(var(--px) * 10);
  color: var(--gold);
  opacity: 0;
}
.scenery__opt[aria-checked="true"] .scenery__tick{ opacity: 1; }

/* ---------------------------------------------------------
   SETTINGS
   --------------------------------------------------------- */

.settings{
  list-style: none;
  margin: 0;
  padding: 0 calc(var(--px) * 8) calc(var(--px) * 8);
  display: flex;
  flex-direction: column;
  gap: calc(var(--px) * 6);
}

.settings__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--px) * 6);
  font-size: calc(var(--px) * 7);
  color: #dbe6ff;
}
.settings__row--full{ justify-content: center; padding-top: calc(var(--px) * 2); }

.toggle{
  pointer-events: auto;
  min-width: calc(var(--px) * 46);
  padding: calc(var(--px) * 5) calc(var(--px) * 6);
  font: inherit;
  font-size: calc(var(--px) * 7);
  color: var(--ink);
  background: var(--green-1);
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 0 calc(var(--px) * 2) var(--ink), 0 calc(var(--px)*3) 0 calc(var(--px)*2) var(--ink);
  touch-action: manipulation;
}
.toggle[aria-pressed="false"]{ background: #7d879e; color: #e6ebf5; }
.toggle:active{ transform: translateY(calc(var(--px) * 2)); }

/* ---------------------------------------------------------
   Very short screens: shrink the vertical rhythm
   --------------------------------------------------------- */

@media (max-height: 420px){
  .logo__line--1{ font-size: calc(var(--px) * 20); }
  .logo__line--2{ font-size: calc(var(--px) * 26); }
  .logo__line--long{ font-size: calc(var(--px) * 21); }
}

/* =========================================================
   FLAPPY FAMILIES additions
   ========================================================= */

/* "Playing as" chip under the logo */
.who{
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 8);
  margin-top: calc(var(--px) * 6);
  padding: calc(var(--px) * 6) calc(var(--px) * 8) calc(var(--px) * 5);
  font: inherit;
  font-size: calc(var(--px) * 7);
  color: var(--ink);
  background: var(--gold);
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 0 calc(var(--px) * 2) var(--ink), 0 calc(var(--px)*3) 0 calc(var(--px)*2) var(--ink);
  touch-action: manipulation;
}
.who:active{ transform: translateY(calc(var(--px) * 2)); }
.who__chg{ font-size: calc(var(--px) * 5); opacity: .7; }

.msg--big{ font-size: calc(var(--px) * 7); }

/* Leaderboard tabs */
.tabs{
  display: flex;
  justify-content: center;
  gap: calc(var(--px) * 6);
  padding-bottom: calc(var(--px) * 8);
}
.tab{
  pointer-events: auto;
  padding: calc(var(--px) * 5) calc(var(--px) * 7);
  font: inherit;
  font-size: calc(var(--px) * 6);
  color: #9fb4e8;
  background: var(--navy-0);
  border: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 calc(var(--px) * 2) var(--navy-line);
  touch-action: manipulation;
}
.tab[aria-selected="true"]{
  color: var(--ink);
  background: var(--gold);
  box-shadow: inset 0 0 0 calc(var(--px) * 2) var(--ink);
}

.board__face{
  width: calc(var(--px) * 20);
  height: calc(var(--px) * 16);
  image-rendering: pixelated;
}
.board__row.is-none{ opacity: .5; }
.board__sub{ display: block; margin-top: calc(var(--px) * 3); font-size: calc(var(--px) * 5); color: #9fb4e8; }

/* Character picker */
.whogrid{
  list-style: none;
  margin: 0;
  padding: 0 calc(var(--px) * 8) calc(var(--px) * 8);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--px) * 6);
}
.whoopt{
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--px) * 3);
  width: 100%;
  padding: calc(var(--px) * 4) 0 calc(var(--px) * 6);
  font: inherit;
  font-size: calc(var(--px) * 6);
  color: #fff;
  background: var(--navy-0);
  border: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 calc(var(--px) * 2) var(--navy-line);
  touch-action: manipulation;
}
.whoopt[aria-checked="true"]{
  background: #3a3520;
  box-shadow: inset 0 0 0 calc(var(--px) * 2) var(--gold);
  color: var(--gold);
}
.whoopt canvas{
  width: calc(var(--px) * 64);
  height: calc(var(--px) * 43);
  image-rendering: pixelated;
}
.whoopt__badge{
  position: absolute;
  top: calc(var(--px) * 3);
  right: calc(var(--px) * 3);
  font-size: calc(var(--px) * 4);
  padding: calc(var(--px) * 2);
  color: var(--ink);
  background: var(--green-1);
}
.whoopt__badge--new{ background: #9fb4e8; }

/* PIN entry */
.pinhead{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--px) * 8);
  padding-bottom: calc(var(--px) * 4);
}
.pinface{
  width: calc(var(--px) * 96);
  height: calc(var(--px) * 64);
  image-rendering: pixelated;
}
.pindots{ display: flex; gap: calc(var(--px) * 8); }
.pindots i{
  width: calc(var(--px) * 12);
  height: calc(var(--px) * 12);
  background: var(--navy-0);
  box-shadow: inset 0 0 0 calc(var(--px) * 2) var(--navy-line);
}
.pindots i.on{ background: var(--gold); box-shadow: inset 0 0 0 calc(var(--px) * 2) var(--ink); }
.pindots.shake{ animation: pinshake .32s linear; }
@keyframes pinshake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(calc(var(--px) * -6)); }
  40%{ transform: translateX(calc(var(--px) * 6)); }
  60%{ transform: translateX(calc(var(--px) * -4)); }
  80%{ transform: translateX(calc(var(--px) * 4)); }
}
.keypad{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--px) * 7);
  padding: calc(var(--px) * 4) calc(var(--px) * 22) calc(var(--px) * 6);
}
.keypad button{
  pointer-events: auto;
  padding: calc(var(--px) * 7) 0 calc(var(--px) * 6);
  font: inherit;
  font-size: calc(var(--px) * 11);
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0 45%, #ccd6ea 45% 100%);
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 0 calc(var(--px) * 2) var(--ink), 0 calc(var(--px) * 3) 0 calc(var(--px) * 2) var(--ink);
  touch-action: manipulation;
}
.keypad button:active{ transform: translateY(calc(var(--px) * 2)); }
.keypad button:disabled{ opacity: .5; }

/* Ghosts toggle sits under the SFX button; greys out when off */
.iconbtn--ghosts{ top: calc(var(--px) * 30); }

/* Admin panel */
.adminlist{
  list-style: none;
  margin: 0;
  padding: 0 calc(var(--px) * 8) calc(var(--px) * 6);
  display: flex;
  flex-direction: column;
  gap: calc(var(--px) * 4);
}
.adminrow{
  padding: calc(var(--px) * 4) calc(var(--px) * 5) calc(var(--px) * 5);
  background: var(--navy-0);
  box-shadow: inset 0 0 0 calc(var(--px) * 2) var(--navy-line);
}
.adminrow__head{ display: flex; align-items: center; gap: calc(var(--px) * 5); }
.adminrow__name{ font-size: calc(var(--px) * 7); }
.adminrow__info{ margin-left: auto; font-size: calc(var(--px) * 5); color: #9fb4e8; }
.adminrow__btns{ display: flex; gap: calc(var(--px) * 4); margin-top: calc(var(--px) * 4); }
.abtn{
  pointer-events: auto;
  flex: 1 1 0;
  padding: calc(var(--px) * 4) 0 calc(var(--px) * 3);
  font: inherit;
  font-size: calc(var(--px) * 5);
  color: var(--ink);
  background: #dbe3f3;
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 0 calc(var(--px) * 1) var(--ink);
  touch-action: manipulation;
}
.abtn--armed{ background: var(--red); color: #fff; }
.abtn:disabled{ opacity: .5; }