/**
 * Phones and small tablets: loaded last, so these rules adjust the layout
 * of every screen without touching the desktop styles. The installed app
 * (see js/pwa.js) fills the screen, so it keeps clear of the notch and the
 * home indicator (safe areas).
 */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* No double-tap zoom delay on buttons; the page itself can still be pinch-zoomed. */
button,
a,
label,
.option,
.twin-card,
.flask,
.key {
  touch-action: manipulation;
}

/* Korean headings, blurbs and explanations wrap between words, not in the middle of one. */
h1,
h2,
h3,
.game-blurb {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.fb-tip,
.grammar-meaning,
.grammar-how p,
.grammar-note,
.dlg-line-ko,
.dlg-line-en {
  word-break: keep-all;
  overflow-wrap: break-word;
}

@media (hover: none) and (pointer: coarse) {
  body {
    -webkit-tap-highlight-color: transparent;
  }
}

body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.toasts {
  top: calc(16px + env(safe-area-inset-top));
}

/* Fixed sheets and dialogs keep clear of the notch and the home indicator
   (a phone on its side too). On a computer these are the usual paddings. */
.feedback {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

.modal-backdrop {
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}

/* ---------- Phones ---------- */

@media (max-width: 600px) {
  /* The menu moves to a tab bar at the bottom, within thumb reach. (No blur on the
     top bar here: it would make the fixed tab bar stick to it instead of the screen.) */
  #topbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--bg);
  }

  .nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    width: auto;
    margin: 0;
    padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: var(--topbar-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 2px dashed var(--line);
  }

  .nav-link {
    min-height: 52px;
  }

  #app {
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }

  body.playing #app,
  body[data-screen='onboarding'] #app,
  body[data-screen='summary'] #app {
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }

  /* Home: a smaller hero, and the games two by two. */
  .hero-mascot .mascot {
    width: 104px !important;
    height: 104px !important;
  }

  .hero-mascot {
    padding-top: 6px;
  }

  .game-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .game-card {
    padding: 14px 12px;
  }

  .game-emoji {
    font-size: 34px;
    margin-bottom: 0;
  }

  .game-title {
    font-size: 1.1rem;
  }

  .game-blurb {
    font-size: 0.85rem;
  }

  .game-status {
    margin-top: 8px;
    padding: 4px 10px;
    font-size: 0.8rem;
  }

  .game-status .en {
    font-size: 0.7rem;
  }

  /* The feedback sheet: the Continue button stays in view however long the explanation. */
  .feedback {
    max-height: 74vh;
    max-height: 74dvh;
    padding: 14px 16px 0;
  }

  .feedback-actions {
    position: sticky;
    bottom: 0;
    margin: 0 -16px;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
    background: inherit;
  }

  .feedback-good .feedback-actions {
    background: var(--good-soft);
  }

  .feedback-almost .feedback-actions {
    background: var(--almost-soft);
  }

  .feedback-bad .feedback-actions {
    background: var(--bad-soft);
  }

  .fb-ko {
    font-size: 1.3rem;
  }

  /* Dialogs fill the width and scroll inside. */
  .modal-backdrop {
    padding: 10px 10px max(10px, env(safe-area-inset-bottom));
  }

  .modal {
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 10px - max(10px, env(safe-area-inset-bottom)));
    padding: 22px 16px 18px;
  }

  /* Grammar Cards */
  .grammar-card,
  .grammar-q-card {
    padding: 18px 16px;
  }

  .grammar-card-title {
    font-size: 1.6rem;
  }

  .grammar-sentence {
    font-size: 1.35rem;
    gap: 6px 8px;
  }

  .grammar-slot {
    min-width: 80px;
    min-height: 50px;
  }

  .grammar-table td {
    padding: 5px 6px;
  }

  .grammar-table-rule {
    font-size: 0.75rem;
  }

  /* Dialogues */
  .dlg-card {
    padding: 16px 14px;
  }

  .dlg-cast {
    gap: 24px;
  }

  .dlg-speaker-emoji {
    font-size: 2.1rem;
  }

  .dlg-line {
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
  }

  .dlg-who {
    min-width: 0;
    font-size: 0.85rem;
  }

  .dlg-question {
    font-size: 1.15rem;
  }

  .dlg-option {
    min-height: 58px;
  }
}

/* Reading on phones */
@media (max-width: 600px) {
  .read-card {
    padding: 16px 14px;
  }

  .read-text {
    font-size: 1.1rem;
  }

  .read-scroll {
    max-height: 30vh;
  }
}

/* Speech Levels and Shadowing on phones */
@media (max-width: 600px) {
  .speech-card,
  .speech-q-card,
  .shadow-card {
    padding: 18px 16px;
  }

  .speech-card-title {
    font-size: 1.6rem;
  }

  .speech-levels {
    grid-template-columns: 1fr;
  }

  .speech-sentence {
    font-size: 1.35rem;
  }

  .speech-scene .ko {
    font-size: 1.25rem;
  }

  .ex-speech .speech-options-which {
    grid-template-columns: 1fr;
  }

  .speech-table th,
  .speech-table td {
    padding: 5px 6px;
  }

  .shadow-ko {
    font-size: 1.5rem;
  }

  .shadow-status {
    font-size: 1.05rem;
  }
}

/* Honorifics, Stories and the Weekly Review on phones */
@media (max-width: 600px) {
  .story-card,
  .weekly-card {
    padding: 16px 14px;
  }

  .story-title .ko {
    font-size: 1.25rem;
  }

  .story-line-ko {
    font-size: 1rem;
  }

  .honor-form-text .speech-form-text {
    font-size: 1rem;
  }

  /* The pair: who it's about on its own row, so the sentence gets the width. */
  .honor-form .speech-form-level {
    width: 100%;
  }
}

/* Very narrow phones: the name and the stat chips still fit on one line. */
@media (max-width: 400px) {
  .brand {
    font-size: 1.05rem;
    gap: 4px;
  }

  .brand-mascot {
    width: 36px;
    height: 36px;
  }

  .stat-chips {
    gap: 4px;
  }

  .stat-chip {
    padding: 4px 8px;
    font-size: 0.85rem;
  }
}

@media (max-width: 370px) {
  .game-grid {
    grid-template-columns: 1fr;
  }

  .grammar-table-rule {
    display: none;
  }
}

/* TOPIK I practice: on phones the way in sits in the corner of 말랑이's card, and the test paper is a little tighter. */
@media (max-width: 600px) {
  .home-hero {
    position: relative;
  }

  .hero-topik {
    position: absolute;
    top: 12px;
    right: 12px;
    min-height: 40px;
    padding: 4px 10px;
  }

  .hero-topik .bi .en {
    display: none;
  }

  .topik-test {
    padding-top: 10px;
    gap: 12px;
  }

  .topik-timer {
    padding: 4px 9px;
    font-size: 0.85rem;
  }

  .topik-nav {
    gap: 6px 12px;
  }

  .topik-nav-list {
    gap: 4px;
  }

  .topik-nav-dot {
    width: 25px;
    height: 25px;
    font-size: 0.72rem;
  }

  .topik-nav-label .en {
    display: none;
  }

  .topik-paper {
    gap: 14px;
    padding: 16px 14px;
  }

  .topik-listen {
    flex-direction: column;
    gap: 10px;
  }

  .topik-text {
    padding: 12px 14px;
    font-size: 1.05rem;
  }

  .topik-actions .key-hint {
    display: none;
  }

  .topik-score-num {
    font-size: 2.8rem;
  }

  .topik-history-list li {
    grid-template-columns: 4em minmax(0, 1fr) auto;
  }

  .topik-history-list .topik-level {
    grid-column: 2 / -1;
    justify-self: start;
  }

  .topik-script-line {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}