/* ==========================================================================
   EMOJI TRIALS ON PHONES (≤768px), loaded after game.css. Laptop and tablet are untouched. Restyle only: ids and state classes are the game's.
   Rules that replace a style in game.css start with :root so they win whatever order the files load in.
   ========================================================================== */

@media (max-width: 768px) {
  /* ---------- Small print: every label and tag is at least 12px ---------- */
  :root .et-kicker,
  :root .et-label,
  :root .et-mode-kicker,
  :root .et-tag,
  :root .et-rank,
  :root .et-stat span,
  :root .et-board-rows .who span,
  :root .et-board-note,
  :root .et-res-places span,
  :root .et-versus .side span,
  :root .et-versus .side small,
  :root .et-versus .vs,
  :root .et-bar,
  :root .et-badge-desc,
  :root .et-lobby-players li span {
    font-size: var(--z-fs-micro);
  }

  /* Result places: Today / Week / All time stay on one row (auto-fit left "All time" alone on a second row) */
  :root .et-res-places { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--z-s-2); }
  :root .et-res-places li { padding: var(--z-s-3) var(--z-s-1); }
  :root .et-res-places b { font-size: 1.25rem; }

  /* ---------- Home ---------- */
  /* One column that may shrink below its widest child (the code box and Join button made the page 4px too wide at 320px) */
  :root .et-grid,
  :root .et-main,
  :root .et-side {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Leaderboard tabs: 48px tall, long names wrap instead of squeezing */
  :root .et-tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 6px 2px;
    font-size: var(--z-fs-micro);
    letter-spacing: 0.04em;
    text-align: center;
    overflow-wrap: anywhere;
  }

  :root .et-chips button {
    min-height: var(--z-tap);
    padding: 0 16px;
    font-size: var(--z-fs-micro);
  }

  :root .et-chips button[aria-pressed="true"] {
    background: var(--z-crimson-fill);
    border-color: var(--z-crimson-fill);
  }

  :root .et-check {
    min-height: var(--z-tap);
  }

  :root .et-check input {
    flex: none;
    width: 24px;
    height: 24px;
  }

  :root .et-rules summary {
    min-height: 48px;
    padding: 14px 0;
    font-size: var(--z-fs-small);
  }

  :root .et-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--z-tap);
  }

  :root .et-join input {
    min-height: 48px;
  }

  :root .et .et-btn {
    min-height: 48px;
    font-size: var(--z-fs-micro);
  }

  :root .et-badge {
    min-height: var(--z-tap);
  }

  /* ---------- A round ---------- */
  /* The header row wraps instead of squeezing, and the sound switch is a real tap target */
  :root .et-bar {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 4px;
  }

  :root .et-mute {
    min-width: var(--z-tap);
    min-height: var(--z-tap);
    padding: 0 12px;
    font-size: var(--z-fs-micro);
  }

  /* The 1-4 shortcut hints are for keyboards: touch players just tap, and screen readers hear the title alone */
  :root .et-opt kbd {
    display: none;
  }

  :root .et-opt {
    font-size: var(--z-fs-body);
    line-height: 1.3;
  }

  :root .et-tag.is-boss,
  :root .et-rankup,
  :root .et-rank[data-tier="6"],
  :root .et-rank[data-tier="7"] {
    background: var(--z-crimson-fill);
    border-color: var(--z-crimson-fill);
  }

  :root .et-wear {
    display: inline-flex;
    align-items: center;
    min-height: var(--z-tap);
    font-size: var(--z-fs-micro);
  }

  :root .et-msg {
    font-size: var(--z-fs-body);
  }

  /* ---------- Result, lobby, challenge ---------- */
  :root .et-note {
    font-size: var(--z-fs-small);
  }

  /* The shop strip under the game */
  :root .et-shop-head a {
    display: inline-flex;
    align-items: center;
    min-height: var(--z-tap);
  }

  :root .et-shop-head a,
  :root .et-pinfo span,
  :root .et-player-pts small {
    font-size: var(--z-fs-micro);
  }

  /* ---------- Name dialog: a bottom sheet, with room for the keyboard and the home indicator ---------- */
  :root .et-modal {
    place-items: end center;
    padding: 0;
  }

  :root .et-modal-card {
    width: 100%;
    max-height: 92vh; /* older iPhones: no dvh */
    max-height: 92dvh;
    overflow-y: auto;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  :root .et-modal input {
    min-height: 48px;
    font-size: var(--z-fs-body);
  }

  /* ---------- Look: lacquer panels with the phone radii, calmer small labels ---------- */
  :root .et-card,
  :root .et-panel,
  :root .et-mode {
    border-radius: var(--z-r-card);
  }

  :root .et-modal-card {
    border-radius: var(--z-r-panel) var(--z-r-panel) 0 0;
  }

  :root .et-kicker,
  :root .et-label,
  :root .et-mode-kicker {
    color: var(--z-crimson-text);
    font-weight: 500;
    letter-spacing: 0.08em;
  }

  :root .et-mode--hero .et-mode-kicker {
    color: var(--z-bone);
  }

  :root .et-title {
    font-family: var(--z-font-display);
    font-weight: 400;
    line-height: 1.05;
    text-transform: uppercase;
  }

  :root .et .btn-secondary,
  :root .et .et-btn {
    border-radius: 999px;
  }
}