/* Phone layout.
 *
 * Loaded after every page's own stylesheet so these rules win. The site is
 * built for a computer or tablet first; this file makes the same pages hold
 * together on a phone screen, where the plain three-column grids and large
 * headings are wider than the display and push the page sideways.
 */

/* Nothing may ever stick out sideways, on any screen. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
}

/* On a touch screen a long press otherwise starts selecting text and pops up
   the copy/translate/share menu on top of the game. iOS needs the prefixed
   properties, which is why the plain user-select already in place was not
   enough. Left alone on a computer, where selecting text is normal. */
@media (hover: none) and (pointer: coarse) {
  * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  /* Typing still has to work in the feedback form and the speed test. */
  input,
  textarea,
  select,
  [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
  }
}

@media (max-width: 620px) {
  /* --- Page furniture --- */

  header {
    padding: 0.5rem 0.6rem 0.7rem;
    gap: 0.4rem;
  }

  header h1 {
    font-size: 1.3rem;
  }

  #tagline {
    font-size: 0.85rem;
  }

  #hub-link,
  #active-player {
    font-size: 0.78rem;
    padding: 0.4rem 0.55rem;
    border-radius: 12px;
  }

  main {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }

  /* --- Front page --- */

  #top-bar {
    padding: 0.6rem;
    gap: 0.4rem;
    justify-content: center;
  }

  #device-bar {
    gap: 0.4rem;
  }

  .device-button,
  #install-button {
    font-size: 0.72rem;
    padding: 0.35rem 0.5rem;
    border-width: 2px;
  }

  .device-icon {
    font-size: 1.1rem;
  }

  #ohjeet-link {
    font-size: 0.82rem;
    padding: 0.45rem 0.7rem;
  }

  #install-hint {
    width: min(16rem, calc(100vw - 2rem));
    left: auto;
    right: 0;
  }

  #intro {
    padding: 0.8rem 0.9rem;
    font-size: 0.88rem;
  }

  #bottom-bar {
    padding: 0.5rem 0.6rem;
  }

  #changelog-link,
  #historia-link {
    font-size: 0.8rem;
    padding: 0.45rem 0.7rem;
  }

  /* --- Card grids: two across instead of three --- */

  #game-grid,
  #category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
  }

  .game-card {
    padding: 1.1rem 0.6rem;
    gap: 0.25rem;
  }

  .game-card .icon {
    font-size: 2.6rem;
  }

  .game-card .title {
    font-size: 1.05rem;
  }

  .game-card .description {
    font-size: 0.8rem;
  }

  .game-card .keyboard-required {
    font-size: 0.72rem;
  }

  .category-button {
    padding: 0.9rem 0.4rem;
    font-size: 1rem;
  }

  .category-button .icon {
    font-size: 2.3rem;
    margin-bottom: 0.3rem;
  }

  /* --- Shared game furniture --- */

  #round-progress {
    font-size: 0.95rem;
    padding: 0.4rem 0.8rem;
  }

  #question,
  #instruction {
    font-size: 1.1rem;
    padding: 0.5rem 0.9rem;
  }

  #game-view {
    gap: 1rem;
  }

  #back-button,
  #size-back-button,
  #grade-back-button {
    font-size: 0.85rem;
    padding: 0.45rem 0.8rem;
  }

  .game-button {
    font-size: 0.85rem;
    padding: 0.5rem 0.8rem;
  }

  #choice-row {
    gap: 0.6rem;
  }

  .choice-card {
    padding: 0.7rem 0.6rem;
    gap: 0.35rem;
    min-width: 0;
  }

  .choice-card .choice-icon {
    font-size: 3rem;
  }

  .choice-card .choice-text {
    font-size: 1.1rem;
  }

  .choice-card .choice-time {
    font-size: 1.1rem;
  }

  .choice-card .choice-number {
    font-size: 1.2rem;
    width: 1.9rem;
    height: 1.9rem;
  }

  /* --- Sana-arvaus / Kuva-arvaus --- */

  #target-word {
    font-size: 1.6rem;
    padding: 0.5rem 1rem;
  }

  #target-icon {
    font-size: 6rem;
  }

  /* --- Värit ja muodot / Mikä ei kuulu joukkoon --- */

  #choice-grid {
    gap: 0.7rem;
  }

  #choice-grid .choice-card {
    padding: 0.8rem 0.4rem;
  }

  #choice-grid .shape-icon,
  #choice-grid .choice-icon {
    font-size: 3.4rem;
  }

  /* --- Looginen jatkumo --- */

  #sequence-row {
    gap: 0.4rem;
  }

  /* Small enough that a full pattern plus the blank stays on one row. */
  .sequence-tile {
    width: 2.7rem;
    height: 2.7rem;
    font-size: 1.5rem;
    border-radius: 10px;
  }

  .sequence-tile.blank {
    font-size: 1.4rem;
  }

  /* --- Opi kello --- */

  #clock-face {
    width: 210px;
    height: 210px;
  }

  #difficulty-grid {
    gap: 0.7rem;
  }

  .difficulty-button {
    padding: 0.9rem 0.6rem;
  }

  .difficulty-title {
    font-size: 1.05rem;
  }

  .difficulty-desc {
    font-size: 0.8rem;
  }

  /* --- Symmetria ja muodot --- */

  #puzzle-row {
    gap: 0.6rem;
  }

  #puzzle-row .shape-tile {
    width: 5.5rem;
    height: 5.5rem;
  }

  #puzzle-row .shape-icon {
    font-size: 4rem;
  }

  #plus-sign {
    font-size: 1.8rem;
  }

  .choice-card .shape-tile {
    width: 4.2rem;
    height: 4.2rem;
  }

  .choice-card .shape-icon {
    font-size: 3.2rem;
  }

  /* --- Muistipeli --- */

  /* The help panel would otherwise sit beside the board and squeeze it. */
  #game-body {
    flex-direction: column;
    gap: 0.8rem;
    align-items: center;
  }

  #controls-help {
    min-width: 0;
    max-width: 100%;
    padding: 0.6rem 0.9rem;
  }

  #controls-help p {
    font-size: 0.82rem;
    margin: 0.25rem 0;
  }

  #memory-grid {
    gap: 0.35rem;
  }

  .card-back {
    font-size: 1.1rem;
  }

  .card-front {
    font-size: 2.2rem;
  }

  #size-grid {
    gap: 0.7rem;
  }

  .option-button {
    padding: 1rem 0.5rem;
    font-size: 1.05rem;
  }

  /* --- Text pages --- */

  .entry {
    padding: 0.9rem 1rem;
  }

  .entry h2 {
    font-size: 1.1rem;
  }

  .entry p,
  .entry li {
    font-size: 0.9rem;
  }
}

/* Very small phones, and anything in landscape where height is the constraint. */
@media (max-width: 380px) {
  header h1 {
    font-size: 1.15rem;
  }

  .game-card .title {
    font-size: 0.95rem;
  }

  .choice-card .choice-icon {
    font-size: 2.6rem;
  }

  #target-icon {
    font-size: 5rem;
  }
}