/* Load LAST. Mobile shell stays in document flow: completion can scroll into view.
   No viewport meta changes, gesture handlers or browser/pinch zoom restrictions. */
.mobile-topbar,.mobile-controls {display:none}
@media screen and (max-width:700px), screen and (max-height:620px) {
  body.mobile-playing > .dev-banner,body.mobile-playing > .site-header {display:none}
  body.mobile-playing > main.wrap {width:100%;max-width:none}
  #game.mobile-game-active {padding:0}
  #game.mobile-game-active > #back-catalog {display:none}
  #game.mobile-game-active > .game-heading,
  #game.mobile-game-active > #timer-display,
  #game.mobile-game-active > #game-status {
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
  #game.mobile-game-active .game-layout {display:block}
  #game.mobile-game-active .board-column {width:100%;min-width:0}
  #game.mobile-game-active .play-panel {position:static;display:block;max-height:none;overflow:visible;padding:0 12px}
  #game.mobile-game-active #play-workspace {
    display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:44px 100px minmax(0,1fr) 36px auto;
    gap:0;min-height:0;height:100svh;height:100dvh;width:100%;max-width:100%;
    padding:0 max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));
    background:#f6f2e9;color:#28392f;overflow:hidden;isolation:isolate;
  }
  #game.mobile-game-active .mobile-topbar {display:flex;grid-row:1;grid-column:1;align-items:center;gap:8px;min-width:0;border-bottom:1px solid #d3cbbb}
  .mobile-progress {flex:1;min-width:0;font-size:12px;text-align:center;font-variant-numeric:tabular-nums;line-height:1.2}
  .mobile-button {border:1px solid #d3cbbb;background:#fffdf7;color:#28392f;border-radius:5px;font-size:12px;line-height:1.15;padding:4px 8px;min-width:36px;min-height:32px}
  .mobile-topbar .mobile-button {height:40px;min-height:40px}
  #game.mobile-game-active .mobile-controls {display:flex;grid-row:4;grid-column:1;gap:4px;align-items:center;justify-content:flex-end;min-width:0}
  .mobile-controls .mobile-button:first-child {margin-right:auto}
  #game.mobile-game-active #play-workspace > .clue-panel {
    grid-row:2;grid-column:1;position:static;display:grid;
    grid-template-columns:minmax(0,1fr) 80px 48px;grid-template-rows:40px 14px 36px;
    gap:0 4px;padding:4px;min-width:0;min-height:0;height:100px;max-height:100px;overflow:hidden;border-radius:5px;
    background:#28392f;color:#f6f2e9;box-shadow:none;
  }
  #game.mobile-game-active .clue-panel .eyebrow {display:none}
  #game.mobile-game-active #play-workspace #active-clue {
    grid-row:1;grid-column:1/-1;margin:0;font-size:16px;line-height:20px;letter-spacing:0;
    overflow:auto;max-height:40px;min-height:0;overscroll-behavior:contain;scrollbar-width:thin;
  }
  #game.mobile-game-active #play-workspace #clue-length {grid-row:2;grid-column:1/-1;margin:0;white-space:nowrap;overflow:auto;font-size:10px;line-height:14px;color:#e5e8dc}
  #game.mobile-game-active #play-workspace .directions {grid-row:3;grid-column:1;display:flex;flex-wrap:nowrap;overflow:auto;gap:3px;min-width:0;margin:0}
  #game.mobile-game-active #play-workspace .direction {flex:1;min-width:0;min-height:32px;height:32px;font-size:10px;line-height:1.1;padding:2px;white-space:normal}
  #game.mobile-game-active #play-workspace .word-navigation {grid-row:3;grid-column:2;display:flex;flex-wrap:nowrap;gap:4px;margin:0}
  #game.mobile-game-active #play-workspace .word-navigation .button {flex:1;min-width:32px;min-height:32px;height:32px;padding:0;font-size:14px;line-height:1}
  #game.mobile-game-active #play-workspace #next-word {font-size:0}
  #game.mobile-game-active #play-workspace #next-word::after {content:'→';font-size:16px}
  #game.mobile-game-active #play-workspace #expand-clue {grid-row:3;grid-column:3;font-size:0;padding:0;min-width:0;min-height:32px;height:32px;line-height:1}
  #game.mobile-game-active #play-workspace #expand-clue::after {content:'Lire ↗';font-size:11px}
  #game.mobile-game-active #play-workspace > #board-scroll {
    grid-row:3;grid-column:1;align-self:stretch;min-height:0;height:100%;max-height:none;width:100%;
    overflow:auto;overscroll-behavior:contain;padding:6px;scrollbar-gutter:auto;border:1px solid #28392f;
    scroll-behavior:auto;overflow-anchor:none;touch-action:pan-x pan-y pinch-zoom;
  }
  #game.mobile-game-active #board .cell.current {outline:3px solid #a6442e;outline-offset:-3px}
  #game.mobile-game-active #board input {font-size:max(16px,calc(var(--cell)*.48))}
  #game.mobile-game-active #board .clue-button {font-size:clamp(11px,calc(var(--cell)*.20),16px);padding:2px;line-height:1.1;overflow:hidden;overflow-wrap:anywhere;hyphens:auto;display:grid;grid-template-columns:minmax(0,1fr) 9px;align-items:center;gap:1px}
  #game.mobile-game-active #board .clue-button>span:first-child {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
  #game.mobile-game-active #play-workspace > #keyboard {
    grid-row:5;grid-column:1;display:flex;flex-direction:column;flex-wrap:nowrap;
    gap:4px;padding:4px 0 0;min-width:0;max-width:none;align-content:normal;
  }
  #game.mobile-game-active #play-workspace .key-row {
    display:grid;grid-template-columns:repeat(10, minmax(0, 1fr));gap:3px;width:100%;max-width:387px;align-self:center;min-width:0;flex-wrap:nowrap;
  }
  #game.mobile-game-active #play-workspace .key-row:nth-child(3) {grid-template-columns:repeat(6,minmax(0,1fr));width:68%;align-self:center}
  #game.mobile-game-active #play-workspace .key-row:last-child {grid-template-columns:repeat(3,minmax(0,1fr))}
  #game.mobile-game-active #play-workspace .key {
    width:100%;min-width:0;max-width:none;height:44px;min-height:44px;flex:none;padding:0;
    font-size:16px;line-height:1;border-radius:5px;background:#fffdf7;color:#28392f;
  }
  #game.mobile-game-active #play-workspace .key.wide {grid-column:auto;height:32px;min-height:32px;font-size:11px;white-space:normal}
  #game.mobile-game-active #play-workspace.mobile-keyboard-hidden > #keyboard {display:none}
  #game.mobile-game-active .mobile-original-tools {padding:12px}
  #game.mobile-game-active .mobile-original-tools .board-help {margin:8px 0}
}
@media screen and (min-width:560px) and (max-height:620px) {
  #game.mobile-game-active #play-workspace {grid-template-columns:minmax(0,1fr) minmax(310px,36%);grid-template-rows:44px 100px minmax(0,1fr) 36px;gap:0 6px}
  #game.mobile-game-active .mobile-topbar {grid-column:1/-1}
  #game.mobile-game-active #play-workspace > #board-scroll {grid-row:3/5;grid-column:1}
  #game.mobile-game-active .mobile-controls {grid-row:2;grid-column:2;align-self:start;flex-wrap:wrap}
  #game.mobile-game-active #play-workspace > #keyboard {grid-column:2;grid-row:2/5;align-self:end;max-height:calc(100dvh - 84px);overflow:auto}
  #game.mobile-game-active #play-workspace.mobile-keyboard-hidden {grid-template-columns:minmax(0,1fr)}
  #game.mobile-game-active #play-workspace.mobile-keyboard-hidden .mobile-controls {grid-column:1;grid-row:4}
  #game.mobile-game-active #play-workspace.mobile-keyboard-hidden > #board-scroll {grid-row:3}
}
@media print {.mobile-topbar,.mobile-controls,.mobile-original-tools {display:none!important}}

@media screen and (max-width:700px),screen and (max-height:620px){
 #game.mobile-game-active #board .clue-arrow{position:static;display:block;font-size:10px;line-height:1;text-align:right;overflow:hidden}
 #game.mobile-game-active #board .cell.clue:has(.clue-button:nth-child(2)) .clue-button>span:first-child{-webkit-line-clamp:1}
 #game.mobile-game-active #board .player-entry-solved .clue-arrow{font-size:0}
 #game.mobile-game-active #board .player-entry-solved .clue-arrow::after{font-size:11px;content:'✓'}
}