/* Phone-only presentation. Desktop layout, game state and keyboard order stay intact. */
@media (max-width:600px) {
  .gate-page .gate-shell { padding:20px 16px 12px; }
  .gate-page .gate-header { padding:10px 16px 6px; gap:4px 12px; }
  .gate-page .gate-header .brand { font-size:15px; letter-spacing:.015em; }
  .gate-page .gate-header .nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:4px; }
  .gate-page .gate-header .nav a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:4px 0; font-size:11px; white-space:nowrap; }
  .gate-page .gate-header .nav a:last-child { display:flex; }
  .gate-page .language-switch { border-radius:12px; }
  .gate-page .language-switch button { border-radius:8px; }

  .gate-page .gate-intro { display:block; margin-bottom:20px; padding:18px; border:1px solid #304c60; border-radius:16px; background:radial-gradient(ellipse at 100% 0,#74459724,transparent 65%),linear-gradient(135deg,#132b39,#0e1825); }
  .gate-page .chamber-byline { gap:6px; margin-bottom:12px; }
  .gate-page .chamber-byline>span:first-child { font-size:9px; letter-spacing:.18em; }
  .gate-page .chamber-motto { flex-basis:100%; font-size:11px; color:#afc9da; }
  .gate-page .gate-intro h1 { max-width:12ch; margin:0; font-size:clamp(27px,8vw,34px); line-height:1.12; letter-spacing:-.025em; text-wrap:balance; }
  .gate-page .room-switch { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 8px; margin:0 0 24px; padding:0; border:0; }
  .gate-page .room-switch a { justify-content:center; display:flex; align-items:center; min-height:46px; padding:9px 8px; border:1px solid #2f4357; border-radius:10px; background:#101b28; font-size:15px; box-shadow:none; }
  .gate-page .room-switch a[aria-current=page] { border:1px solid #82dfed; background:#163241; color:#d8f8ff; box-shadow:inset 0 -2px #82dfed33; }
  .gate-page .room-switch #difficulty-note { grid-column:1/-1; padding:0 0 0 10px; border-left:2px solid #9574b4; font-size:12px; line-height:1.7; }

  .gate-page .keeper-picker { margin-bottom:18px; padding-bottom:18px; }
  .gate-page .keeper-picker-controls { gap:14px; }
  .gate-page .keeper-picker-controls>h2 { font-size:22px; }
  .gate-page .keeper-stops { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; padding:3px 0; overflow:visible; scroll-snap-type:none; }
  .gate-page .keeper-stops button { position:relative; min-width:0; margin:0; padding:5px 3px 8px; border:1px solid #293e51; border-radius:10px; background:#101b28; }
  .gate-page .keeper-stops .cast-portrait { width:100%; max-width:none; border-radius:6px; }
  .gate-page .keeper-stops strong { display:block; margin:7px 0 3px; font-size:clamp(10px,2.85vw,13px); line-height:1.5; white-space:nowrap; }
  .gate-page .keeper-stops small { display:block; min-height:0; font-size:11px; line-height:1.4; }
  .gate-page .keeper-stops .keeper-level { font:11px/1.4 var(--font-mono); color:#95adc5; }
  /* Full difficulty names stay in accessible button names and the selected summary. */
  .gate-page .keeper-level-detail { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .gate-page .keeper-stops button[aria-pressed=true] { border-color:#88e5f2; background:linear-gradient(160deg,#25475a,#142c3b); box-shadow:0 0 12px #72def214,inset 0 -2px #88e5f2; }
  .gate-page .keeper-stops button[aria-pressed=true] .keeper-level { color:#b2f2ff; }
  .gate-page #keeper-choice { padding:9px 12px; border-left:2px solid #79d8e7; border-radius:0 8px 8px 0; background:#102230; font-size:13px; line-height:1.75; }

  .gate-page .join-card { gap:16px; padding:16px; border-radius:16px; background:radial-gradient(ellipse at 0 0,#603b7926,transparent 65%),#11202d; }
  .gate-page .join-intro { grid-template-columns:76px minmax(0,1fr); align-items:center; justify-items:start; gap:14px; padding-bottom:14px; border-bottom:1px solid #b782e62b; text-align:left; }
  .gate-page .join-crown { width:76px; }
  .gate-page .join-intro h2 { font-size:20px; line-height:1.6; }
  .gate-page .join-fields>label { margin-bottom:8px; font-size:16px; }
  .gate-page .join-fields>label .helper { display:block; margin:3px 0 0; font-size:12px; }
  .gate-page #visitor { min-height:52px; padding:12px; border-radius:9px; font-size:16px; }
  .gate-page .join-actions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0 16px; }
  .gate-page .join-actions :is(#anonymous-start,#start-button) { min-height:52px; padding:10px 8px; border-radius:9px; font-size:14px!important; }
  .gate-page .join-card .helper { margin:7px 0; font-size:13px; line-height:1.8; }
  .gate-page .join-card .helper[lang=en],.gate-page .join-card .helper [lang=en] { font-size:12px; line-height:1.75; }

  .gate-page .chamber-toolbar { display:grid; gap:12px; padding:12px; border-radius:12px; background:#101d2b; }
  .gate-page .chamber-toolbar .board-toolbar { display:grid; gap:8px; width:100%; }
  .gate-page #round-number { font:10px/1.5 var(--font-mono); letter-spacing:.14em; color:#8aa8be; }
  .gate-page .chamber-toolbar .board-toolbar>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .gate-page .chamber-toolbar .board-toolbar .text-button { min-width:0; min-height:44px; padding:6px 3px; border:1px solid #2f475b; border-radius:8px; background:#152638; font-size:12px!important; line-height:1.5; text-align:center; }
  .gate-page .chamber-toolbar .view-toolbar { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; width:100%; }
  .gate-page .chamber-toolbar .view-toolbar>span { font-size:12px; color:#9eb5cb; }
  .gate-page .chamber-toolbar .view-switch { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gate-page .view-switch button { min-width:0; min-height:44px; padding:6px; font-size:12px; }
  .gate-page .view-switch button span { font-size:11px; }

  .gate-page .board-card { padding:0 10px; border-radius:15px; }
  .gate-page .keeper-unified { grid-template-columns:84px minmax(0,1fr); gap:12px; padding:16px 0 12px; }
  .gate-page .keeper-unified .keeper-portrait-frame { width:84px; height:84px; border-radius:13px; }
  .gate-page .keeper-heading { gap:3px 8px; }
  .gate-page .keeper-label { font-size:11px; line-height:1.5; }
  .gate-page .keeper-unified .keeper-heading .seat-state { font-size:9px; }
  .gate-page .keeper-dialogue #keeper-line { margin:8px 0; font-size:16px; line-height:1.65; }
  .gate-page .keeper-dialogue:has(.keeper-pixel[hidden]) { padding-bottom:0; }
  .gate-page .keeper-material { gap:4px 8px; padding:8px 0 0; }
  .gate-page .keeper-material :is(.material-label,.captures) { font-size:12px; }
  .gate-page .keeper-unified .room-music { padding:10px; border:1px solid #314757; border-radius:10px; background:#0c1724; }
  .gate-page .keeper-unified .music-title select { min-height:44px; height:auto; padding:8px; border-radius:7px; font-size:14px; }
  .gate-page .keeper-unified .music-actions button { min-width:72px; min-height:44px; border-radius:8px; font-size:14px; }
  .gate-page .keeper-unified .music-actions label { justify-content:flex-end; gap:10px; margin:0; font-size:12px; }
  .gate-page .keeper-unified #music-volume { width:112px; max-width:45%; min-height:44px; margin:0; }
  .gate-page .camera-controls { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding-top:12px; }
  .gate-page .camera-controls>span { font-size:9px; }
  .gate-page .camera-controls>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .gate-page .camera-controls button { min-height:44px; padding:6px; border:1px solid #2c485a; border-radius:8px; background:#102334; font-size:12px!important; }
  .gate-page .camera-controls .glow-control { gap:8px; padding:0; font-size:12px; }
  .gate-page .glow-control input { min-height:44px; }
  .gate-page #guest-seat { margin-top:8px; padding:12px 0; border-top-color:#b681e74a; }
  .gate-page #visitor-seat { font-size:14px; overflow-wrap:anywhere; }
  .gate-page #black-captures { font-size:12px; }
  .gate-page .board-caption { justify-content:space-between; margin-top:12px; font-size:12px; color:#94adc3; }

  .gate-page .salon-panel .panel-heading { gap:10px; flex-wrap:wrap; font-size:10px; }
  .gate-page .status-card { min-height:0; margin-top:12px; padding:16px; border:1px solid #365366; border-radius:12px; background:linear-gradient(135deg,#102736,#101a28); }
  .gate-page #turn-label { margin-bottom:10px; font-size:10px; }
  .gate-page #status { font-size:22px; line-height:1.55; }
  .gate-page #status-detail { font-size:15px; line-height:1.85; }
  .gate-page .salon-panel>.controls:not(:has(> :not([hidden]))) { display:none; }
  .gate-page .salon-panel>.controls { padding:16px 0; }
  .gate-page .salon-panel>details { padding:14px; margin-top:10px; border:1px solid #2d4257; border-radius:12px; background:#101b28; }
  .gate-page .salon-panel summary { min-height:28px; font-size:16px; line-height:1.75; }
  .gate-page .salon-panel .record-actions>.secondary { min-height:60px; font-size:14px!important; border-radius:8px; }
  .gate-page .salon-panel .helper { font-size:13px; line-height:1.8; }
  .gate-page .tip-bar { padding:16px; border:1px solid #7e609147; border-radius:12px; background:linear-gradient(145deg,#211b30,#101c29); }
  .gate-page .tip-title { font-size:18px; }
  .gate-page .tip-caption { font-size:14px; }
  .gate-page .tip-bar .support-english { font-size:12px; }
  .gate-page .tip-bar :is(.tip-button,.tip-agent) { min-height:48px; border-radius:8px; font-size:15px; }
  .gate-page .agent-shortcut { font-size:12px; }
  .gate-page .agent-shortcut button { min-height:44px; font-size:13px; }

  .gate-page .exhibition-heading h2 { font-size:24px; line-height:1.5; }
  .gate-page .keeper-lineup img { border-radius:10px; }
  .gate-page .chamber-exhibition .design-grid { gap:12px; }
  .gate-page .chamber-exhibition .design-grid>.piece-concept { padding:14px 12px; border:1px solid #31445b; border-radius:12px; background:linear-gradient(155deg,#122333,#101824); }
  .gate-page .chamber-exhibition .design-grid p { font-size:13px; line-height:1.85; }
  .gate-page .chamber-exhibition .design-grid strong { font-size:15px; }
  .gate-page .gate-footer { margin-top:24px; padding:22px 0 28px; font-size:13px; line-height:1.9; gap:18px; }
  .gate-page .gate-footer>span { font-size:12px; line-height:2; }
}

@media (max-width:359px) {
  .gate-page .gate-shell { padding-inline:14px; }
  .gate-page .keeper-stops { gap:4px; }
  .gate-page .keeper-stops button { padding-inline:2px; }
  .gate-page .join-intro { grid-template-columns:64px minmax(0,1fr); gap:12px; }
  .gate-page .join-crown { width:64px; }
  .gate-page .join-intro h2 { font-size:18px; }
  .gate-page .join-actions { grid-template-columns:minmax(0,1fr); }
  .gate-page .keeper-unified { grid-template-columns:72px minmax(0,1fr); gap:10px; }
  .gate-page .keeper-unified .keeper-portrait-frame { width:72px; height:72px; }
  .gate-page .keeper-unified .music-title { gap:4px; }
  .gate-page .keeper-unified .music-title select { font-size:13px; }
  .gate-page .keeper-unified .music-actions button { min-width:64px; font-size:13px; }
  .gate-page .view-switch button span { display:block; }
  .gate-page .chamber-exhibition .design-grid>.piece-concept { padding:12px 10px; }
}