/* Phone controls are deliberately kept separate from the room illustration.
   The 320 x 230 chase world keeps its aspect ratio at every viewport size. */
@media (max-width: 720px) {
  .sheet {
    scroll-padding-top: 100px;
    scroll-padding-bottom: calc(80px + var(--sab));
  }

  /* Keep form fields readable without Safari zooming the sheet on focus. */
  .sheet input[type="text"],
  .sheet select,
  .tray select {
    font-size: 16px;
    min-height: 44px;
    min-width: 0;
    max-width: 100%;
  }

  .btn-sm,
  .btn-icon,
  .filter-chip,
  .chip,
  .opt,
  .topbar .playroom-launch{
    min-height: 44px;
    min-width: 44px;
  }

  .gen-palette .sw,
  .sw {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }

  .sheet-head h2,
  .sheet-head .eyebrow,
  .activity-card{
    overflow-wrap: anywhere;
  }

  .sheet-head .eyebrow { letter-spacing: .12em; }
  .activity-card { min-width: 0; }
  .activity-detail { font-size: 12px; }
  .sheet summary { min-height: 44px; padding-block: 12px; }
  .life-links .btn { white-space: normal; line-height: 1.4; }
  

  /* Suspects need enough width to read their evidence before choosing one. */
  
  
  
  

  /* A paused game and a result use the same overlay. Long explanations scroll
     inside its visible bounds, with the next-play button kept reachable. */
  
  /* Touch action intersects with ancestors: allow result scrolling on the
     field as well, then restore gesture steering when the overlay is hidden. */
  
  
  

  
  
  
  
  
  
  

  
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  

  /* During a 22-second run the field and controls get the screen. Settings
     return automatically when paused or finished, preserving every choice. */
  

  /* Native pinch zoom remains available outside the direct game controls. */
  .tab,
  .btn,
  .chip,
  .filter-chip,
  .activity-card{ -webkit-tap-highlight-color: transparent; }
}

@media (max-width: 720px) and (max-height: 700px) {
  
  
  
  
  /* Text and results remain scrollable on short screens; gameplay never
     compresses the world into a different shape to try to hide overflow. */
  
}

/* The app chrome has five clear destinations; game-specific stages keep their
   own responsive sizing. Returning to a tab also returns to its reading place. */
@media (max-width: 720px) {
  .tabbar:has(#tabPlay) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tabbar .tab { min-width: 0; min-height: 54px; font-size: 10px; letter-spacing: .015em; gap: 4px; }
  .tabbar .tab > span:first-of-type { line-height: 1.25; }
  .tabbar #tabPlay { color: var(--mint); background: color-mix(in srgb, var(--mint) 10%, transparent); }
  .tabbar #tabPlay svg { width: 24px; height: 24px; }
  .tabbar .tab[aria-current="page"] { background: var(--glass-2); box-shadow: inset 0 2px 0 var(--key); }
  .tabbar .tab[aria-current="page"] svg { color: var(--key); }
  .tabbar .tab:focus-visible { outline: 2px solid var(--mint); outline-offset: -3px; }
  body:has(#tabPlay) .topbar .playroom-launch { display: none; }
  body:has(#tabPlay) .topbar #quickHelp { display: inline-flex; }
  .topbar .wordmark { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
  .topbar .status { min-width: 0; }
  .topbar .topbar-actions { flex: none; }

  /* Four readable shelf actions replace the narrow row of truncated labels. */
  #actions.actions,
  body:has(.empty-shelf) #actions.actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #actions .btn { min-width: 0; min-height: 58px; padding: 10px 8px; font-size: 12px; white-space: normal; line-height: 1.3; }
  #actions .btn > span { overflow-wrap: anywhere; }
  #actions #roundsBtn { flex-wrap: wrap; }
  #actions .snap-btn { width: auto; flex-direction: row; gap: 7px; }
  #actions .snap-btn::after { content: 'Postcard'; font: 600 12px var(--body); }
  #actions small { display: block; font-size: 10px; line-height: 1.25; }

  .pane,
  .story-card,
  .life-hub,
  .notes-head,
  .voice-hint,
  .tray-item,
  .shelf-progress { min-width: 0; }
  .pane-plots > *, .pane-notes > *, .life-hub > * { max-width: 100%; }
  .notes-head { align-items: center; gap: 10px; }
  .notes-head h2 { min-width: 0; font-size: clamp(23px, 6.2vw, 29px); }
  .notes-head .btn { flex: none; }
  .note-filters { gap: 7px; margin-block: 12px 5px; }
  .note-filters .filter-chip { flex: 1 0 auto; padding: 10px 12px; font-size: 12px; text-align: center; }
  .note, .note--doc, .story-card h2, .story-card p, .story-card small, .door-sub, .museum-door small { overflow-wrap: anywhere; }
  .case-choices .btn, .request-actions .btn, .scheme-choice { min-height: 48px; line-height: 1.45; }
  .voice-hint-actions { flex-wrap: wrap; width: 100%; }
  .voice-hint-actions .btn { flex: 1; min-height: 44px; white-space: normal; }
  #notesMore { width: 100%; min-height: 48px; margin-top: 18px; }
  .pane footer { font-size: 12px; line-height: 1.6; }

  /* Keep Close available while browsing the whole More catalogue. */
  .tray { padding-left: max(14px, var(--sal)); padding-right: max(14px, var(--sar)); scroll-padding-block: 90px 30px; }
  .tray-head { position: sticky; top: -8px; z-index: 4; padding: 20px 4px 12px; background: var(--night-3); }
  .tray-head h2 { font-size: 12px; letter-spacing: .12em; line-height: 1.4; }
  .tray-head .btn { min-height: 44px; flex: none; }
  .tray-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tray-grid .tray-item { min-width: 0; min-height: 78px; border-color: var(--hair); padding: 11px; white-space: normal; }
  .tray-item span { font-size: 14px; line-height: 1.3; }
  .tray-item small { font-size: 12px; line-height: 1.4; }
  .tray-grid .effects-setting { grid-column: 1 / -1; min-width: 0; }
  .tray select, .pane select { font-size: 16px; min-height: 44px; max-width: 100%; }

  .veil .sheet { padding-inline: max(16px, var(--sal)) max(16px, var(--sar)); }
  .veil .sheet-head > h2 { min-width: 0; line-height: 1.2; }
  .veil .sheet-head > .btn { min-height: 44px; white-space: normal; max-width: 132px; }
  .sheet input[type="search"], .sheet input[type="number"], .sheet textarea { font-size: 16px; min-height: 44px; max-width: 100%; }
  .sheet textarea { line-height: 1.5; }
  .sheet :is(button, summary, select, input, textarea):focus-visible,
  .tray :is(button, summary, select):focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

  .update-banner { flex-wrap: wrap; justify-content: flex-start; gap: 8px; padding: 12px 14px; }
  .update-banner > span { flex: 1 1 100%; line-height: 1.45; }
  .update-banner .btn { min-height: 44px; flex: 1 1 auto; white-space: normal; }
  .storage-warn { overflow-wrap: anywhere; line-height: 1.5; }
}

/* A compact games hub: choose a resident, then choose a game. Explanations and
   full records are available below the catalogue without stretching each card. */
#playroomVeil .playroom-toolbar { flex: 0 0 auto; min-width: 0; }
#playroomVeil .playroom-company { gap: 10px; padding: 6px 10px; margin: 0; }
#playroomVeil .playroom-company label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; letter-spacing: .04em; font-size: 10px; }
#playroomVeil .playroom-company label > span { max-width: 60px; line-height: 1.4; }
#playroomVeil .playroom-company select { margin: 0; min-width: 0; font-size: 16px; }
#playroomVeil .playroom-company p { display: none; }
#playroomVeil #playroomPortrait { width: 42px; height: 44px; overflow: hidden; }
#playroomVeil #playroomPortrait .sprite { width: 42px; --pet-h: 42px; }
#playroomVeil .playroom-passport { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; margin: 0; padding: 4px 2px; border: 0; border-radius: 0; background: none; font-size: 11px; color: var(--ink-2); }
#playroomVeil .playroom-passport[hidden] { display: none; }
#playroomVeil .passport-dots { display: flex; gap: 8px; font-size: 12px; }
#playroomVeil .passport-dots .earned { color: var(--mint); }
#playroomVeil .playroom-workspace { min-width: 0; }
#playroomVeil .activity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#playroomVeil .activity-card { display: grid; grid-template-rows: 30px auto 1fr auto; gap: 5px; align-items: start; min-width: 0; min-height: 146px; padding: 12px; border-radius: 12px; }
#playroomVeil .activity-top { align-items: center; min-width: 0; gap: 6px; }
#playroomVeil .activity-top > span:last-child { max-width: none; font-size: 9px; line-height: 1.35; letter-spacing: 0; }
#playroomVeil .activity-icon { width: 30px; height: 30px; border-radius: 8px; flex: none; }
#playroomVeil .activity-icon svg { width: 25px; height: 25px; }
#playroomVeil .activity-card strong { font: 21px/1.2 var(--display); margin: 0; overflow-wrap: anywhere; }
#playroomVeil .activity-hook { font-size: 12px; line-height: 1.4; color: var(--ink-2); }
#playroomVeil .activity-bottom { min-width: 0; gap: 4px; padding-top: 5px; margin-top: 2px; font-size: 10px; line-height: 1.4; }
#playroomVeil .activity-bottom > span { overflow-wrap: anywhere; }
#playroomVeil .activity-bottom b { font-size: 17px; line-height: 1; flex: none; }
#playroomVeil .activity-continue { border-color: var(--activity); }
#playroomVeil .activity-continue .activity-bottom { color: var(--activity); font-weight: 600; }
#playroomVeil .playroom-guide { margin-top: 10px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 10px; }
#playroomVeil .playroom-guide > summary { display: list-item; min-height: 44px; padding: 13px 0; cursor: pointer; font-size: 12px; color: var(--mint); }
#playroomVeil .playroom-guide > .playroom-intro { margin: 2px 0 12px; font-size: 20px; }
#playroomVeil .playroom-guide > .hint { margin: 0 0 14px; font-size: 12px; line-height: 1.5; }
#playroomVeil .playroom-guide-body { display: grid; gap: 16px; padding-bottom: 16px; }
#playroomVeil .playroom-guide-body article { min-width: 0; border-top: 1px solid var(--hair); padding-top: 14px; }
#playroomVeil .playroom-guide-body h3 { margin: 0 0 8px; font: 22px/1.25 var(--display); }
#playroomVeil .playroom-guide-body p { font-size: 13px; line-height: 1.6; margin: 6px 0; color: var(--ink-2); }
#playroomVeil .playroom-guide-body .playroom-guide-joke { font: 20px/1.4 var(--hand); color: var(--mint); }
#playroomVeil .playroom-guide-body small { display: block; margin-top: 8px; font-size: 11px; color: var(--ink-2); }

@media (max-width: 720px), (max-height: 500px) {
  #playroomVeil .playroom-toolbar { padding: 8px max(12px, var(--sar)) 0 max(12px, var(--sal)); }
  #playroomVeil .playroom-company { border-radius: 9px; padding: 4px 8px; gap: 8px; }
  #playroomVeil #playroomPortrait { width: 34px; height: 40px; }
  #playroomVeil #playroomPortrait .sprite { width: 34px; --pet-h: 34px; }
  #playroomVeil .playroom-company label { gap: 8px; }
  #playroomVeil .playroom-company label > span { max-width: 45px; }
  #playroomVeil .playroom-company select { padding: 8px; }
  #playroomVeil .playroom-workspace { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 max(12px, var(--sar)) max(12px, var(--sab)) max(12px, var(--sal)); scroll-padding: 8px; }
  #playroomVeil .activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #playroomVeil .activity-card { min-height: 132px; padding: 10px; grid-template-rows: 26px auto 1fr auto; gap: 4px; }
  #playroomVeil .activity-icon { width: 26px; height: 26px; }
  #playroomVeil .activity-icon svg { width: 23px; height: 23px; }
  #playroomVeil .activity-card strong { font-size: 19px; }
  #playroomVeil .activity-hook { font-size: 11px; line-height: 1.4; }
  #playroomVeil .activity-bottom { font-size: 10px; }
  #playroomVeil .playroom-empty { margin-bottom: 10px; padding: 12px; }
  #playroomVeil .playroom-empty .btn { width: 100%; min-height: 48px; white-space: normal; }
}

@media (min-width: 560px) and (max-height: 500px) {
  #playroomVeil .playroom-toolbar { display: flex; align-items: center; gap: 14px; padding-bottom: 8px; }
  #playroomVeil .playroom-company { flex: 1; min-width: 0; }
  #playroomVeil .playroom-passport { flex-direction: column; gap: 3px; flex: none; }
  #playroomVeil .activity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}