@layer app {
/* ============================================================
   Stop screen
   ============================================================ */
.stop-screen {
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--screen-bg);
}

/* Board cell sizing — vh-based clamp for square cells matching hand proportions.
   Cells are always square (width = height = --board-cell-size).
   Constant accounts for: top bar, state bar, hand, actions bar, gaps/padding.
   Denominator = total cell rows (2 per group: player + opponent).
   --cell-size (hand tile size) mirrors the formula so the hand scales
   with the board on short viewports (Discord activity in DMs/side panels,
   landscape phones). Min 38px keeps tiles tappable. */
.stop-screen.tracks-3 {
  --board-cell-size: clamp(30px, calc((100vh - 360px) / 6), 38px);
  --cell-size: clamp(38px, calc((100vh - 280px) / 8), 54px);
}
.stop-screen.tracks-5 {
  --board-cell-size: clamp(26px, calc((100vh - 320px) / 10), 44px);
  --cell-size: clamp(38px, calc((100vh - 280px) / 8), 54px);
}
body.native-app-ios .stop-screen.tracks-3 {
  --board-cell-size: clamp(30px, calc((100vh - 420px) / 6), 38px);
}
body.native-app-ios .stop-screen.tracks-5 {
  --board-cell-size: clamp(26px, calc((100vh - 410px) / 10), 44px);
}
body.native-app-android .stop-screen.tracks-3 {
  --board-cell-size: clamp(30px, calc((100vh - 430px) / 6), 38px);
}
body.native-app-android .stop-screen.tracks-5 {
  --board-cell-size: clamp(26px, calc((100vh - 390px) / 10), 44px);
}

/* Solo (daily challenge): only 1 row per group, so half the cell rows */
.stop-screen.solo.tracks-5 {
  --board-cell-size: clamp(30px, calc((100vh - 320px) / 5), 44px);
  --cell-size: clamp(38px, calc((100vh - 280px) / 8), 54px);
}
body.native-app-ios .stop-screen.solo.tracks-5 {
  --board-cell-size: clamp(30px, calc((100vh - 410px) / 5), 44px);
}
body.native-app-android .stop-screen.solo.tracks-5 {
  --board-cell-size: clamp(30px, calc((100vh - 390px) / 5), 44px);
}

/* Tighten the play-screen chrome (hand padding, action button padding, label
   font) when the viewport is short, so the trains area gets more room. */
@media (max-height: 600px) {
  .stop-screen .hand-section { padding: 6px 12px 8px; }
  .stop-screen .play-actions { padding: 4px 12px 6px; }
  .stop-screen .hand-label { margin-bottom: 4px; }
}
@media (max-height: 480px) {
  .stop-screen .hand-section { padding: 4px 10px 6px; }
  .stop-screen .play-actions { padding: 2px 10px 4px; }
  .stop-screen .hand-label { font-size: 8px; margin-bottom: 2px; letter-spacing: 1px; }
  .stop-screen .sudden-death-banner { font-size: 13px; padding: 4px 10px; letter-spacing: 3px; }
}

/* Landscape / very short viewports (Discord activity in landscape, landscape
   phones): the fit-to-height board sizing collapses the traks to a sliver.
   Give the cells a usable fixed size and let the board scroll vertically -
   the same scrollable-center pattern the shop catalog uses. */
@media (max-height: 520px) {
  .stop-screen.tracks-3,
  .stop-screen.tracks-5,
  .stop-screen.solo.tracks-5 {
    --board-cell-size: 34px;
  }
  .stop-screen .trains {
    overflow-y: auto;
    justify-content: flex-start;
  }
  .stop-screen .train-group {
    flex: 0 0 auto;
  }
  /* The Discord chrome offset is sized for portrait; in landscape the bar is
     shorter and 56px wastes scarce vertical room. */
  body.discord-iframe #main-content > :first-child {
    padding-top: calc(6px + max(env(safe-area-inset-top, 0px), 18px));
  }
}

/* Discord activities render in shorter viewports than a typical browser
   tab. Drop the top-bar logo to give back more vertical room without
   needing the user to fullscreen. */
body.discord-iframe .top-bar { padding: 4px 12px; }
body.discord-iframe .top-bar .logo-tile { width: 16px; height: 20px; font-size: 12px; }

.sudden-death-banner {
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 4px;
  padding: 7px 14px;
  background: rgba(232,96,30,0.08);
  border-bottom: 1px solid rgba(232,96,30,0.18);
  font-family: var(--font-flap);
}

}