/* ============================================
   TypeBlocks - Responsive
   Width breakpoints + coarse-pointer/touch adaptations.
   Loads after style.css so overrides win.
   ============================================ */

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 650px) {
  .menu-header h1 {
    font-size: 34px;
    letter-spacing: 0.06em;
  }

  .menu-eq {
    height: 14px;
    margin: 8px auto 8px;
  }

  .tagline {
    letter-spacing: 0.2em;
  }

  .mode-key {
    width: 84px;
    height: 84px;
  }

  .key-row {
    gap: 10px;
  }

  #game-canvas {
    display: block;
  }

  #playfield-shell {
    width: 100%;
  }

  #stats {
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    width: 100%;
  }

  .stat {
    min-width: 48px;
  }

  .mode-status-stat {
    flex-basis: 48px;
    min-width: 48px;
    max-width: 48px;
  }

  .stat-label {
    font-size: 8px;
    letter-spacing: 0.7px;
  }

  .stat-value {
    font-size: 18px;
  }

  .mode-status-stat .stat-value {
    font-size: 11px;
  }

  #word-input {
    font-size: calc(16px * var(--text-scale, 1)); /* 16px min prevents iOS auto-zoom on focus */
    padding: 14px 18px;
  }

  .panel-content,
  .stats-content {
    min-width: auto;
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    margin: 16px;
    padding: 22px 18px;
  }

  .share-dialog-content {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    margin: 0;
    padding: 22px 18px;
  }

  .panel-header {
    top: -22px;
    margin-bottom: 18px;
    padding-bottom: 12px;
  }

  .game-over-content,
  .pause-content {
    min-width: auto;
    padding: 28px;
  }

  .final-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .result-lower-grid {
    grid-template-columns: 1fr;
  }

  .next-action {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .final-value {
    font-size: 22px;
  }

  .final-stat.is-headline .final-value {
    font-size: 25px;
  }

  .skill-summary {
    max-width: 100%;
    margin-bottom: 18px;
    padding: 10px 12px;
  }

  .skill-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .skill-summary-label {
    font-size: 8px;
    letter-spacing: 0.06em;
  }

  .skill-summary-value {
    font-size: 11px;
  }

  .game-over-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  #restart-btn,
  #menu-btn,
  #share-performance-btn {
    min-width: 0;
    padding: 12px 8px;
  }

  #game-header {
    padding: 0 8px;
  }

  .header-center {
    gap: 6px;
  }

  #now-playing {
    gap: 6px;
    padding: 3px 8px;
  }
}

@media (max-width: 520px) {
  .final-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .final-stat {
    padding: 9px 6px;
  }

  .final-label {
    font-size: 8px;
    letter-spacing: 0.5px;
  }

  .final-stat.is-headline .final-value {
    font-size: 23px;
  }

  .shared-performance-card {
    padding: 17px 14px;
  }

  .share-performance-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 620px) {
  #game-over {
    align-items: flex-start;
    padding: 10px;
  }

  .game-over-content {
    width: min(700px, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
    padding: 18px;
  }

  .game-over-content h2 {
    font-size: 28px;
    margin-bottom: 18px;
    letter-spacing: 2px;
  }

  .pb-badge {
    margin: -8px auto 14px;
    padding: 5px 14px;
    font-size: 12px;
  }

  .final-stats {
    gap: 6px;
    margin-bottom: 10px;
  }

  .final-stat {
    padding: 8px 8px;
  }

  .final-value {
    font-size: 20px;
  }

  .final-stat.is-headline .final-value {
    font-size: 22px;
  }

  .run-context {
    margin: -6px auto 8px;
  }

  .skill-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 0 auto 8px;
    padding: 7px 10px;
  }

  .skill-summary-head {
    margin-bottom: 0;
  }

  .skill-grade {
    font-size: 24px;
  }

  .skill-grade-strip {
    display: none;
  }

  .skill-summary-kicker,
  .skill-summary-item:nth-child(n+2) {
    display: none;
  }

  .skill-summary-grid {
    display: block;
  }

  .skill-summary-label {
    margin-bottom: 2px;
  }

  .next-action {
    gap: 10px;
    margin: 0 auto 10px;
    padding: 8px 0;
  }

  .next-action-copy {
    font-size: 12px;
  }

  .next-action-btn {
    min-height: 38px;
    padding: 9px 14px;
  }

  #result-chart-wrap {
    margin-bottom: 14px;
    padding: 8px;
  }

  #result-chart {
    width: 260px !important;
    height: 96px !important;
  }

  .chart-legend {
    margin-top: 6px;
  }

  .game-over-hint {
    margin-bottom: 8px;
  }

  .game-over-buttons {
    position: sticky;
    bottom: -18px;
    z-index: 2;
    gap: 8px;
    margin: 0 -18px 8px;
    padding: 8px 18px 10px;
    background: linear-gradient(180deg, transparent, var(--color-surface) 28%);
  }

  #restart-btn,
  #menu-btn,
  #share-performance-btn {
    padding: 10px 8px;
  }
}

@media (max-width: 360px) {
  .final-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .final-stat {
    padding: 7px 4px;
  }

  .final-label {
    font-size: 7px;
    letter-spacing: 0.5px;
  }

  .final-value {
    font-size: 18px;
  }

  .final-stat.is-headline .final-value {
    font-size: 20px;
  }

  .skill-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 0 auto 8px;
    padding: 7px 9px;
  }

  .skill-summary-kicker,
  .skill-summary-item:nth-child(n+2),
  .skill-grade-strip {
    display: none;
  }

  .skill-summary-head {
    margin-bottom: 0;
  }

  .skill-summary-grid {
    display: block;
  }
}

@media (max-height: 620px) and (min-width: 600px) {
  .final-stats {
    grid-template-columns: repeat(6, 1fr);
  }

  .final-stat {
    padding: 6px 5px;
  }

  .final-label {
    font-size: 8px;
    letter-spacing: 0.6px;
  }

  .final-value {
    font-size: 18px;
  }

  .final-stat.is-headline .final-value {
    font-size: 20px;
  }
}

@media (max-height: 720px) {
  #game-container {
    justify-content: flex-start;
  }

  #menu-screen {
    gap: 16px;
  }

  .menu-header {
    margin-bottom: 0;
  }

  .menu-header h1 {
    font-size: 36px;
    margin-bottom: 2px;
  }

  .menu-eq {
    height: 12px;
    margin: 6px auto 6px;
  }

  .tagline {
    font-size: 11px;
  }

  .mode-selection h2 {
    margin-bottom: 12px;
  }

  .mode-key {
    width: 76px;
    height: 76px;
  }

  .key-row {
    gap: 9px;
    margin-bottom: 10px;
  }

  .stage-detail {
    margin-top: 10px;
  }
}

@media (max-height: 720px) and (max-width: 900px), (max-width: 420px) {
  #game-container {
    padding-block: 10px 12px;
  }

  #menu-screen {
    gap: 10px;
    padding-block: 4px 8px;
  }

  .menu-header h1 {
    font-size: clamp(26px, 8.4vw, 34px);
    letter-spacing: 0.05em;
  }

  .menu-eq {
    height: 10px;
    margin: 4px auto 2px;
  }

  .tagline {
    display: none;
  }

  .mode-selection {
    max-width: min(460px, 100%);
  }

  .mode-selection h2 {
    margin-bottom: 10px;
    font-size: 11px;
  }

  .key-row {
    gap: 6px;
    margin-bottom: 8px;
  }

  /* Compact keycaps keep the arcade collection inside narrow viewports. */
  .mode-key {
    width: 58px;
    height: 60px;
    gap: 3px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45), var(--shadow-sm);
  }

  .mode-key .key-letter {
    top: 4px;
    left: 6px;
    width: 18px;
    height: 18px;
    font-size: 9px;
    border-bottom-width: 2px;
    border-radius: 5px;
  }

  .mode-key .key-icon {
    width: 22px;
    height: 22px;
  }

  .mode-key .key-icon .tb-icon {
    width: 20px;
    height: 20px;
  }

  .mode-key .key-name {
    font-size: 8px;
    letter-spacing: 0.5px;
  }

  .variant-btn .sub-desc {
    display: none;
  }

  .stage-detail {
    margin-top: 10px;
    font-size: 11px;
  }

  .stage-continue {
    margin-top: 10px;
    padding: 10px 20px;
  }

  .menu-footer-buttons {
    gap: 10px;
    margin-top: 2px;
  }
}

/* Very narrow screens: the 6-key top row must fit (6 caps + 5 gaps). */
@media (max-width: 360px) {
  .key-row {
    gap: 4px;
    margin-bottom: 6px;
  }

  .mode-key {
    width: 48px;
    height: 52px;
    gap: 2px;
  }

  .mode-key .key-icon {
    width: 18px;
    height: 18px;
  }

  .mode-key .key-icon .tb-icon {
    width: 16px;
    height: 16px;
  }

  .mode-key .key-letter {
    width: 16px;
    height: 16px;
    font-size: 8px;
  }

  .mode-key .key-name {
    font-size: 7px;
    letter-spacing: 0.3px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .game-over-content {
    width: min(500px, calc(100vw - 20px));
    padding: 16px 18px;
  }

  #game-container {
    padding: 8px 12px;
  }

  #menu-screen {
    gap: 8px;
  }

  .menu-header h1 {
    font-size: 24px;
    margin-bottom: 0;
    letter-spacing: 0.05em;
  }

  .menu-eq {
    display: none; /* landscape-short: every vertical px goes to the cards */
  }

  .tagline {
    display: none;
  }

  .mode-selection {
    max-width: min(640px, 100%);
  }

  .key-row {
    gap: 8px;
    margin-bottom: 8px;
  }

  .mode-key {
    width: 56px;
    height: 56px;
    gap: 2px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45), var(--shadow-sm);
  }

  .mode-key .key-letter {
    top: 4px;
    left: 5px;
    width: 18px;
    height: 18px;
    font-size: 9px;
    border-bottom-width: 2px;
    border-radius: 5px;
  }

  .mode-key .key-icon {
    width: 20px;
    height: 20px;
  }

  .mode-key .key-icon .tb-icon {
    width: 18px;
    height: 18px;
  }

  .mode-key .key-name {
    display: none;
  }

  .variant-btn {
    min-height: 44px;
    padding: 7px 8px;
  }

  .variant-btn .sub-label {
    font-size: 12px;
  }

  .stage-detail {
    margin-top: 6px;
  }

  .stage-continue {
    margin-top: 8px;
    padding: 8px 18px;
  }

  #game-ui {
    gap: 5px;
  }

  #game-header {
    max-width: 100%;
    margin-bottom: 0;
  }

  .icon-btn {
    padding: 6px;
    border-radius: var(--radius-sm);
  }

  #stats {
    gap: 6px;
    padding: 6px 10px;
    border-radius: 0;
  }

  .stat {
    min-width: 48px;
  }

  .mode-status-stat {
    flex-basis: 48px;
    min-width: 48px;
    max-width: 48px;
  }

  .stat-label {
    font-size: 8px;
    margin-bottom: 2px;
  }

  .stat-value {
    font-size: 16px;
  }

  .mode-status-stat .stat-value {
    font-size: 11px;
  }

  #input-area {
    max-width: min(420px, 80vw);
  }

  #word-input {
    padding: 8px 14px;
    font-size: calc(16px * var(--text-scale, 1));
  }
}

/* ============================================
   MOBILE / TOUCH
   --app-height is driven from window.visualViewport by game.js on
   coarse-pointer devices ONLY; desktop never sets the var and never
   gets body.kb-open, so the var() fallbacks below leave desktop
   sizing byte-identical. body.kb-open = touch device + game input
   focused, i.e. exactly while the on-screen keyboard is up.
   ============================================ */

@media (hover: none) and (pointer: coarse) {
  html,
  body {
    /* No rubber-band / pull-to-refresh yanking the play surface around.
       Panels keep their own internal scrolling (overscroll: contain). */
    overscroll-behavior-y: none;
  }

  #game-canvas {
    /* Taps on the play surface refocus the input — never start a scroll */
    touch-action: none;
  }

  #game-ui,
  .mode-selection,
  .menu-footer-buttons {
    /* Kill the double-tap-zoom delay on game controls */
    touch-action: manipulation;
  }
}

/* Keyboard-open state: size the app to the visible viewport (above the
   keyboard) and compress the chrome so header + HUD + canvas + input all
   stay fully visible. Touch targets in the header keep their 44px minimum
   from the base .icon-btn rule. */
body.kb-open {
  min-height: var(--app-height, 100dvh);
  height: var(--app-height, 100dvh);
  overflow: hidden;
}

body.kb-open #game-container {
  min-height: var(--app-height, 100dvh);
  height: var(--app-height, 100dvh);
  justify-content: flex-start;
  gap: 8px;
  padding: 6px 10px 8px;
}

body.kb-open #game-ui {
  gap: 4px;
}

body.kb-open #game-header {
  margin-bottom: 0;
}

body.kb-open #stats {
  box-sizing: border-box;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  width: 100%;
}

body.kb-open .stat {
  min-width: 48px;
}

body.kb-open .mode-status-stat {
  flex-basis: 48px;
  min-width: 48px;
  max-width: 48px;
}

body.kb-open .stat-label {
  font-size: 8px;
  margin-bottom: 2px;
}

body.kb-open .stat-value {
  font-size: 16px;
}

body.kb-open .mode-status-stat .stat-value {
  font-size: 11px;
}

body.kb-open #word-input {
  padding: 10px 16px;
}

.focus-overlay-content {
  text-align: center;
}

.focus-overlay-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 10px;
  text-shadow: 0 0 30px var(--color-primary-glow);
}

.focus-overlay-hint {
  font-size: 14px;
  color: var(--color-text-secondary);
}