@import url("arcade-games.css");

/* Penguin Splash layers one DOM control on top of the canvas game: the
   floaty picker on the start screen. Everything else is drawn to <canvas>. */

/* The picker makes this page's start screen taller than a phone viewport,
   so unlike the other games these overlays have to scroll. arcade-games.css
   pins the body with `touch-action: none`, and an ancestor's `none` vetoes
   panning inside any descendant — so the body has to be relaxed to pan-y
   for the overlay to scroll at all. Nothing is lost during play: the canvas
   and the touch buttons keep their own `touch-action: none`, and the body
   still can't itself scroll (overflow is hidden, the canvas is fixed). */
body {
  touch-action: pan-y;
}

.overlay {
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* An auto margin centres the card when it fits and collapses to zero when it
   doesn't, so a tall card starts at the top instead of overflowing off it —
   which is what `place-items: center` would do, putting the button out of
   reach above the scroll origin. */
.overlay .title-card {
  width: 100%;
  margin: auto;
  padding-block: clamp(1.4rem, 5vh, 2.5rem);
}

.picker-label {
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(243, 231, 199, 0.7);
  margin-bottom: 0.7rem;
}

.floaty-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.4rem, 7.6rem));
  justify-content: center;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
}

.floaty-option {
  padding: 0.6rem 0.35rem 0.55rem;
  border: 2px solid var(--panel-border);
  background: var(--panel);
  color: var(--parchment);
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.floaty-option:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
}

.floaty-option[aria-checked="true"] {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(61, 143, 90, 0.85), rgba(22, 36, 24, 0.92));
}

.floaty-option .floaty-emoji {
  display: block;
  font-size: 1.9rem;
  line-height: 1;
  margin-bottom: 0.35rem;
}

.floaty-option .floaty-name {
  display: block;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--gold-soft);
}

.floaty-option .floaty-trait {
  display: block;
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(243, 231, 199, 0.7);
}

/* Steering buttons live at the far edges so they never sit on top of the
   penguin or the slide walls it is trying to read. */
.touch-controls {
  justify-content: space-between;
  padding: 0 clamp(0.75rem, 5vw, 2.5rem);
}

/* Short viewports (most phones in portrait, once the browser chrome is
   counted) — trim the vertical padding so the whole start screen fits
   without scrolling wherever it can. */
@media (max-height: 760px) {
  .title-card {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .title-card h1 {
    font-size: clamp(2.1rem, 9vw, 3rem);
    margin-bottom: 0.6rem;
  }

  .tagline {
    font-size: 0.95rem;
    margin-bottom: 1.1rem;
  }

  .picker-label {
    margin-bottom: 0.5rem;
  }

  .floaty-picker {
    margin-bottom: 1.1rem;
  }

  .floaty-option .floaty-emoji {
    font-size: 1.6rem;
  }

  .controls-hint {
    margin-top: 1rem;
  }
}