/* Phone-sized stages retain the illustrated game, with usable touch targets. */
@media (max-width:600px), (max-width:1024px) and (max-height:600px) {
  body { padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  #app, #app:has(#planner-screen:not([hidden])) { width:100%; height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); aspect-ratio:auto; --phone-header:96px; }
  button, summary { touch-action:manipulation; }
  .topbar { height:var(--phone-header); display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:30px 50px; padding:6px 8px; gap:2px; }
  .time-strip { grid-column:1; grid-row:1; min-width:0; width:100%; justify-self:start; gap:6px; flex-wrap:nowrap; overflow:hidden; }
  .time-strip span,.time-strip strong { font-size:16px; white-space:nowrap; }
  #location-label { font-size:13px; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .top-actions { grid-column:1; grid-row:2; display:flex; flex-wrap:nowrap; width:100%; min-width:0; gap:4px; margin:0; justify-content:flex-start; overflow-x:auto; padding:2px 0 4px; scrollbar-width:thin; }
  .top-actions .icon-btn { flex:0 0 auto; width:auto; min-width:44px; height:44px; padding:0 8px; font-size:12px; }
  .top-actions .exit-game-btn { position:sticky; right:0; order:2; z-index:3; margin-left:auto; color:#263a45; background:#efcf75; border-color:#ffe8a5; }
  .planner-body,.scene { top:var(--phone-header); }
  .planner-body { display:flex; flex-direction:column; gap:10px; padding:10px; }
  .week-strip { position:static; flex:none; margin:0; gap:3px; }
  .day-pill { padding:6px 0; }
  .action-grid { position:static; flex:1; min-height:0; display:grid; grid-template-columns:1fr; gap:10px; overflow:auto; padding:3px; align-content:start; order:1; }
  .map-expanded { grid-template-columns:1fr; gap:12px; }
  .map-zone { padding:12px; }
  .map-zone h3 { font-size:20px; margin:0 0 10px; }
  .map-places { gap:8px; }
  .action-grid .action-card:nth-child(n),.meeting-day-actions .skip-meeting-btn { position:static; width:100%; min-height:48px; margin:0; padding:12px 8px; }
  .action-card strong,.map-expanded .action-card strong { font-size:16px; }
  .map-expanded .end-work-btn { width:100%; min-height:48px; }
  .planner-hero { position:static; flex:none; order:2; height:auto; max-height:24%; padding:10px 12px; border-width:3px; border-radius:16px; overflow:auto; }
  .planner-hero .eyebrow { font-size:12px; }
  .planner-hero p:not(.eyebrow) { font-size:14px; line-height:1.6; }
  .exploration-panel { inset:10px; gap:10px; }
  .exploration-intro,.exploration-hotspots,.exploration-help { flex-shrink:0; }
  .exploration-intro { padding:12px; }
  .exploration-intro p { font-size:14px; }
  .exploration-hotspots { grid-template-columns:1fr; gap:8px; }
  .exploration-spot { min-height:60px; padding:10px 12px; }
  .exploration-spot strong { font-size:16px; }
  .exploration-spot small { font-size:12px; }
  .dialogue-shell { inset:auto 8px 8px; padding:12px; min-height:28%; max-height:74%; border-width:3px; border-radius:18px; }
  .speaker-row { position:sticky; top:-12px; left:auto; min-width:0; width:auto; padding:6px 8px; margin:-12px -12px 8px; gap:8px; z-index:2; background:#314c45; }
  .speaker-row span { font-size:12px; }
  .speaker-row strong { font-size:18px; }
  .auto-btn { position:static; margin-left:auto; min-width:44px; min-height:44px; flex-shrink:0; }
  #dialogue-text { font-size:16px; line-height:1.65; padding:0; }
  .choice-btn { min-height:48px; font-size:16px; line-height:1.5; padding:10px; }
  .ai-practice-btn { min-height:44px; font-size:14px; padding:8px 10px; }
  .next-btn { position:static; min-height:44px; margin:8px 0 0 auto; font-size:13px; }
  .next-btn b { font-size:22px; }
  .title-screen { display:block; overflow:auto; }
  .title-copy { width:100%; margin:0; padding:24px; }
  .title-copy h1 { font-size:48px; }
  .title-subtitle { font-size:15px; }
  .title-actions { flex-wrap:wrap; }
  .title-copy button,.ending-actions button { min-height:44px; }
  .title-footer { position:static; padding:0 24px 20px; }
  .ending-content { padding:20px 16px; }
  .ending-actions { flex-wrap:wrap; }
  dialog.panel-dialog,dialog.about-dialog,dialog.audio-dialog,dialog.player-dialog,dialog.ai-dialog {
    position:fixed; top:calc(var(--visual-top, 0px) + 8px + env(safe-area-inset-top)); bottom:auto; left:0; right:0; margin:0 auto;
    width:calc(100% - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
    max-height:calc(var(--visual-height, 100dvh) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding:16px; overflow:auto; border-radius:16px;
  }
  dialog.ai-dialog { padding:0; height:calc(var(--visual-height, 100dvh) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow:hidden; }
  .panel-dialog h2,.about-dialog h2 { padding-right:44px; font-size:24px; }
  .dialog-close { position:sticky; float:right; top:0; right:auto; z-index:4; width:44px; height:44px; background:#e7ebdf; }
  .audio-dialog header,.player-dialog header { position:sticky; top:-16px; z-index:4; background:#f7f4e9; padding:6px 0; }
  dialog button,dialog summary { min-height:44px; }
  dialog input,dialog select,dialog textarea { font-size:16px; }
  .ai-header { padding:8px 12px; }
  .ai-header button { width:44px; height:44px; }
  .ai-header h2 { font-size:16px; }
  .ai-body { padding:12px; }
  .ai-footer { padding:8px 12px; max-height:72%; overflow:auto; }
  .ai-return { margin:4px auto 0; }
  .ai-disclosure { margin-bottom:4px; }
  .ai-disclosure summary { display:flex; align-items:center; }
  .relation-list,.notes-list { max-height:none; overflow:visible; }
  .save-slot-actions { flex-wrap:wrap; }
  .save-slot-actions button { min-height:44px; }
  .audio-setting input { min-height:44px; }
  .exploration-panel,.dialogue-shell,.action-grid,.planner-hero,dialog,.ai-body,.ai-footer,.top-actions { overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .toast,.player-cloud-state { bottom:calc(8px + env(safe-area-inset-bottom)); pointer-events:none; }
  html[data-keyboard="open"] .ai-header img,html[data-keyboard="open"] .ai-header small { display:none; }
  html[data-keyboard="open"] #ai-input { min-height:54px; height:54px; }
  html[data-keyboard="open"] .ai-footer { max-height:80%; }
}
@media (orientation:landscape) and (max-width:1024px) and (max-height:600px) {
  #app,#app:has(#planner-screen:not([hidden])) { --phone-header:56px; }
  .topbar { display:flex; align-items:center; padding:4px 10px; gap:10px; }
  .time-strip { flex:1; }
  .top-actions { width:auto; max-width:62%; flex:none; }
  .time-strip span,.time-strip strong { font-size:14px; }
  .map-expanded { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .planner-body { gap:6px; padding:6px 10px; }
  .planner-hero { max-height:22%; padding:6px 10px; }
  .planner-hero .eyebrow { display:none; }
  .exploration-hotspots { grid-template-columns:1fr 1fr; }
  .dialogue-shell { max-height:84%; min-height:36%; left:30%; }
  .character-stage { inset:0 55% 0 0; }
  .npc-avatar.has-art { width:100%; height:100%; left:0; right:auto; }
  .title-copy { padding:18px 24px; }
  .title-copy h1 { font-size:36px; margin:8px 0; }
}