/* The board's look: layout and the game's own colours (--gm-*, --santa-*, defined in theme.css). The platform's screens are the
   SDK's and take their colours from the --pg-* tokens. This file is the slot of the Play tab: the screen, the landing, the HUD, the
   two zone buttons and the cards. The scene's own pieces (the canvas, the zone labels, the banner, the bars) are
   santa/play/play.css. */
html, body { margin: 0; height: 100%; background: var(--gm-bg, #0a1329); color: var(--gm-text, #f7e9c9); font-family: var(--pg-font, system-ui, -apple-system, "Segoe UI", sans-serif); -webkit-tap-highlight-color: transparent; }
#app { height: 100%; }
.gm-screen { height: 100%; }
.gm-screen[hidden] { display: none; }

/* The landing: the night city behind, the name, a line, the call to action. */
.gm-landing {
  position: relative; box-sizing: border-box; height: 100%; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--santa-top, 0px) + 24px) 24px calc(var(--santa-nav-space, 0px) + 18% + 12px);
  background: var(--santa-navy-deep, #0a1329);
}
.gm-landing-copy { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 360px; }
.gm-title { margin: 0; font-size: 38px; line-height: 1.05; font-weight: 800; letter-spacing: -0.01em; color: var(--santa-ivory, #f7e9c9); text-shadow: 0 2px 20px rgba(5, 10, 26, 0.7); }
.gm-tagline { margin: 0 0 10px; color: var(--santa-ivory, #f7e9c9); opacity: 0.86; font-size: 17px; line-height: 1.35; text-shadow: 0 1px 12px rgba(5, 10, 26, 0.8); }
.gm-landing .pg-btn { min-width: 220px; }

/* The board: the stage (the scene) on top, the controls under it, the cards over the controls. */
.gm-board { position: relative; box-sizing: border-box; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--santa-navy-deep, #0a1329); }

.gm-hud { position: relative; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 16px; font-size: 13px; color: var(--santa-ivory, #f7e9c9); white-space: nowrap; text-shadow: 0 1px 8px rgba(5, 10, 26, 0.8); }
.gm-round { flex: 1; text-align: center; }
.gm-stake { overflow: hidden; text-overflow: ellipsis; }
.gm-badge { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gm-text); background: rgba(16, 29, 60, 0.72); border: 1px solid var(--gm-line); text-shadow: none; }
.gm-badge--live { color: var(--gm-up); border-color: var(--gm-up); }
.gm-badge--fixture { color: #f2c14e; border-color: #f2c14e; }

.gm-status { margin: 0; min-height: 20px; text-align: center; color: var(--gm-dim); font-size: 14px; }

/* The two zones: the rooftops (Upper) and the streets (Lower), side by side, each in the colour of its band on the picture. */
.gm-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 76px; padding: 10px 8px; box-sizing: border-box;
  border: 2px solid transparent; border-radius: 18px; color: #fff; font: inherit; cursor: pointer; transition: opacity .2s, transform .1s, border-color .2s;
}
.gm-zone--upper { background: linear-gradient(180deg, #4166aa 0%, #2b457a 100%); }
.gm-zone--lower { background: linear-gradient(180deg, #1f8861 0%, #145b3d 100%); }
.gm-zone-name { font-size: 18px; font-weight: 800; letter-spacing: .01em; }
.gm-zone-hint { font-size: 12px; font-weight: 600; opacity: .9; text-align: center; line-height: 1.2; }
.gm-zone { touch-action: manipulation; }
.gm-zone:focus-visible { outline: 2px solid var(--santa-gold, #ffd16b); outline-offset: 2px; }
.gm-zone:active:not(:disabled) { transform: scale(.985); }
.gm-zone:disabled { cursor: default; }
.gm-board[data-stage="running"] .gm-zone, .gm-board[data-stage="waiting"] .gm-zone, .gm-board[data-stage="result"] .gm-zone, .gm-board[data-stage="sending"] .gm-zone, .gm-board[data-stage="summary"] .gm-zone { opacity: .45; }
.gm-zone[data-picked="true"] { opacity: 1 !important; border-color: var(--santa-gold, #ffd16b); }
.gm-board[data-stage="pick"] .gm-zone:disabled { opacity: .6; }

/* The cards: a round's result, and the end of the flight. They sit over the controls, above the bottom bar. */
.gm-card {
  position: absolute; z-index: 2; left: 16px; right: 16px; bottom: calc(var(--santa-nav-space, 0px) + 12px); box-sizing: border-box; max-height: calc(100% - var(--santa-nav-space, 0px) - 24px); overflow: auto;
  padding: 18px 18px 16px; border-radius: 22px; background: var(--gm-surface); border: 1px solid var(--gm-line); box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; gap: 12px;
}
.gm-card[data-tone="gain"] { border-color: var(--gm-up); }
.gm-card[data-tone="loss"] { border-color: var(--gm-down); }
.gm-card-title { margin: 0; font-size: 22px; font-weight: 800; text-align: center; }
.gm-card[data-tone="gain"] .gm-card-title { color: var(--gm-up); }
.gm-card[data-tone="loss"] .gm-card-title { color: var(--gm-down); }
.gm-card--summary .gm-card-title { color: var(--santa-gold, #ffd16b); }
.gm-rows { margin: 0; display: grid; gap: 8px; }
.gm-row { display: flex; justify-content: space-between; font-size: 16px; }
.gm-row dt { color: var(--gm-dim); }
.gm-row dd { margin: 0; font-weight: 700; }
.gm-row[data-tone="gain"] dd { color: var(--gm-up); }
.gm-row[data-tone="loss"] dd { color: var(--gm-down); }

@media (max-height: 640px) {
  .gm-zone { min-height: 64px; padding: 6px 8px; }
  .gm-card { padding: 14px; gap: 10px; }
  .gm-card-title { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-zone { transition: none; }
}