/* Ticket Rush game page: the game fills the window (styles.css supplies the pieces) */

html, body.play { height: 100%; }
body.play { overflow: hidden; overscroll-behavior: none; background: #07030f; }
/* nothing on the game page is selectable (iPhone would pop up copy/paste on quick taps), except the initials box */
body.play { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.play input { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.play-app {
  height: 100vh; height: 100dvh;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
.play-bar { display: flex; align-items: center; gap: 10px; }
.play-title { margin: 0 auto 0 6px; font: .8rem/1 var(--pixel); color: var(--yellow); text-shadow: 2px 2px 0 var(--pink); }
.play-bar-btns { display: flex; gap: 8px; }
.play-bar .pill { text-decoration: none; }
.pill[hidden] { display: none; }
.play .hud { padding: 0 4px; }
.play .screen { min-height: 0; align-items: center; border: 4px solid var(--ink); box-shadow: inset 0 0 0 2px #3b2080; }
.play .deck { grid-template-columns: auto 1fr auto; grid-template-areas: none; padding: 2px 4px; }
.play .pad, .play .grab { grid-area: auto; }
.play .deck-help { text-align: center; }
.play .key { width: 76px; height: 64px; }
.play .grab { width: 92px; height: 92px; }

/* the title, pause, game-over and high-score screens: sized to the game screen itself (cqw),
   so they're big on a monitor and still fit a phone; the instructions use the easier body font */
.play .screen { container-type: inline-size; }
.play .overlay { gap: clamp(8px, 2cqw, 22px); padding: clamp(12px, 3cqw, 36px); background: rgba(7, 3, 15, .86); justify-content: safe center; }
.play .overlay-title { font-size: clamp(1.5rem, 6.5cqw, 3.6rem); text-shadow: .09em .09em 0 var(--pink); }
.play .overlay-line { font-size: clamp(.8rem, 2.4cqw, 1.35rem); line-height: 1.6; }
.play .overlay-help {
  list-style: none; padding: 0; max-width: 34em; display: grid; gap: .3em; text-align: left;
  font: 600 clamp(1rem, 2.6cqw, 1.55rem)/1.35 var(--body); color: var(--text);
}
.play .overlay-help b { color: var(--yellow); font-weight: 600; }
.play .overlay-help[hidden] { display: none; }   /* the grid above would otherwise override [hidden] */
.play .entry { font-size: clamp(.8rem, 2.4cqw, 1.35rem); gap: clamp(10px, 2cqw, 20px); }
.play .entry input { font-size: clamp(1.4rem, 4.5cqw, 2.6rem); }
.play .entry .pill { font-size: clamp(.6rem, 1.6cqw, .95rem); padding: .8em 1em; }
.play .board { font-size: clamp(.8rem, 2.1cqw, 1.2rem); gap: .5em; }
/* phones: tighter spacing so everything fits the smaller screen */
@media (max-width: 640px), (max-height: 520px) {
  .play .overlay { gap: 4px; padding: 8px 10px; }
  .play .overlay-help { line-height: 1.25; gap: .15em; }
}
@media (max-height: 520px), (orientation: portrait) {
  .play .board li:nth-child(n+6) { display: none; }   /* top five on short or upright screens, where the game screen is short */
}
/* the smallest phones: shrink the title and flavor line, keep the instructions full size */
@media (max-width: 380px), (max-height: 380px) {
  .play .overlay-title { font-size: 1.25rem; }
  .play .overlay-line { font-size: .62rem; line-height: 1.5; }
  .play .overlay-help { line-height: 1.2; gap: .1em; }
}

/* score bar and keys hint: the easier body font, sized so the bar never gains a line mid-game
   (which would make everything below it jump); measured with the longest possible values */
.play .hud { font: 600 clamp(16px, 1.5vw, 20px)/1.4 var(--body); gap: 2px 20px; align-content: flex-start; }
.play .hud b { font-weight: 600; }
.play .deck-help { font: 600 clamp(.95rem, 1.3vw, 1.2rem)/1.4 var(--body); }
/* where the bar is tight, drop Power: the game screen already shows active power-ups top left */
@media (orientation: portrait), (max-height: 520px), (max-width: 1100px) {
  .play .hud .power { display: none; }
}
/* upright: reserve the bar's tallest height up front (there's room to spare above the controls) */
@media (orientation: portrait) {
  .play .hud { font-size: 18px; min-height: calc(2 * 1.4em + 2px); }
}
@media (orientation: portrait) and (max-width: 640px) {
  .play .hud { font-size: 16px; min-height: calc(4 * 1.4em + 6px); }
}
/* phones held sideways: one line, scaled to the width */
@media (max-height: 520px) {
  .play .hud { font-size: clamp(13px, 1.9vw, 16px); column-gap: 12px; }
}

/* held upright: the game sits at the top at full width, big thumb controls below it */
@media (orientation: portrait) {
  .play-app { grid-template-rows: auto auto auto minmax(0, 1fr); }
  .play .screen { align-self: start; }
  .play .deck { align-self: center; }
}
@media (orientation: portrait) and (max-width: 640px) {
  .play .key { width: 84px; height: 76px; }
  .play .grab { width: 112px; height: 112px; font-size: .7rem; }
}

@media (max-width: 640px) {
  .play .deck { grid-template-columns: auto auto; justify-content: space-between; }
  .play .deck-help, .play-title { display: none; }
  .play-bar .pill { padding: 8px 9px; }
  .play-bar-btns { margin-left: auto; }
}

/* phones held sideways: a handheld layout, with the controls either side of the screen */
@media (orientation: landscape) and (max-height: 520px) {
  .play-app {
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "bar bar bar" "hud hud hud" "pad screen grab"; gap: 4px 12px;
  }
  .play-bar { grid-area: bar; }
  .play .hud { grid-area: hud; padding-bottom: 2px; }
  .play .screen { grid-area: screen; }
  .play .deck { display: contents; }
  .play .pad { grid-area: pad; align-self: center; }
  .play .grab { grid-area: grab; align-self: center; width: 80px; height: 80px; }
  .play .key { width: 58px; height: 56px; }
  .play .deck-help, .play-title { display: none; }
  .play-bar-btns { margin-left: auto; }
}