/* Shared presentation for demo, creator preview and real guest sessions. */
.direct-solve .direct-heading,.direct-solve .direct-tools,.direct-solve .game-keyboard { display:none; }
.direct-solve { grid-template-rows:auto auto; }
.direct-solve .guest-board-panel { grid-column:1; grid-row:1; }
.direct-solve .guest-clues { grid-column:2; grid-row:1 / span 2; }
.direct-solve .direct-info { grid-column:1; grid-row:2; padding:0 24px 24px; overflow-wrap:anywhere; }
.direct-solve .direct-info h2,.direct-reading h2 { font:400 23px/1.2 Georgia,serif; margin:0 0 16px; }
.direct-solve .guest-entry-panel { margin-top:12px; }
.direct-solve .guest-navigation { display:flex; flex-wrap:wrap; gap:4px; }
.direct-solve .guest-navigation .button { min-height:44px; }
.direct-solve .direct-read-clue { background:transparent; border:0; color:var(--blue); padding:4px 0; text-decoration:underline; min-height:28px; font:inherit; font-size:12px; }
.direct-solve .grid-letter { position:absolute; inset:-1px; border:0; border-radius:0; padding:8px 3px 0; color:var(--ink); background:transparent; font-family:inherit; font-size:18px; font-weight:600; line-height:1; cursor:pointer; }
.direct-solve .grid-letter:focus-visible { outline:3px solid var(--blue); outline-offset:-3px; }
.direct-solve .grid-letter .cell-letter { pointer-events:none; }
.direct-solve .direct-announcement { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.direct-solve :is(button,a):focus-visible { outline:3px solid #996223; outline-offset:1px; }
.direct-reading { padding:16px; overflow-wrap:anywhere; font-size:18px; line-height:1.7; }
@media(max-width:760px), (pointer:coarse) {
  .example-view-open:has(.example-playing) main { display:flex; flex-direction:column; height:100dvh; }
  .example-view-open:has(.example-playing) #navigation-error { flex-shrink:0; margin:0; padding:10px; font-size:13px; max-height:25dvh; overflow:auto; }
  .example-view.example-playing { flex:1; min-height:0; margin:0; width:100%; }
  .example-playing #example-game { height:100%; display:flex; flex-direction:column; }
  .example-playing #example-play { flex:1; min-height:0; display:flex; flex-direction:column; }
  .example-playing #guest-game { flex:1; min-height:0; height:auto; }
  .example-view.example-playing > :not(#example-game) { display:none; }
  .example-playing #example-game > :not(#example-play):not(#example-load-status):not(#example-load-retry) { display:none; }
  .example-playing #example-load-status { flex-shrink:0; margin:0; }
  .example-view-open .example-playing ~ * { display:none; }
  .example-view-open:has(.example-playing) .masthead,.example-view-open:has(.example-playing) .footer { display:none; }
  .example-view-open:has(.example-playing) .app-shell { padding:0; }
  .example-playing #example-play > :not(#guest-game):not(#guest-error):not(#guest-retry) { display:none; }
  .example-playing #guest-error,.example-playing #guest-retry { flex-shrink:0; margin:0; max-height:25dvh; overflow:auto; }
  .direct-solve.direct-mobile { height:100dvh; box-sizing:border-box; margin:0; padding:0 max(6px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)); border:0; border-radius:0; display:flex; flex-direction:column; gap:4px; overflow:hidden; }
  .direct-solve .direct-heading { display:flex; align-items:center; gap:4px; flex-shrink:0; min-height:44px; border-bottom:1px solid var(--line); }
  .direct-solve .direct-title { flex:1; min-width:0; font:400 18px/1.2 Georgia,serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .direct-solve .direct-heading .button { padding:6px 10px; font-size:13px; min-height:44px; }
  .direct-solve .direct-tools { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; gap:4px; }
  .direct-solve .direct-tools .button { min-height:44px; padding:6px 4px; font-size:12px; }
  .direct-solve .direct-tools .grid-zoom { min-width:44px; flex-shrink:0; font-size:23px; }
  .direct-solve .guest-board-panel { display:flex; flex:1; min-height:0; padding:0; }
  .direct-solve .guest-grid-workspace { display:flex; flex-direction:column; flex:1; min-height:0; min-width:0; gap:4px; }
  .direct-solve .guest-board-scroll { position:relative; flex:1; min-height:0; overflow:hidden; overflow:clip; overscroll-behavior:contain; touch-action:none; padding:0; border:1px solid var(--line); border-radius:6px; background:#f5f4ee; }
  .direct-solve :is(#guest-board,#board) { position:absolute; left:0; top:0; max-width:none; margin:0; transform-origin:0 0; user-select:none; -webkit-user-select:none; }
  .direct-solve :is(#guest-board,#board) .square { aspect-ratio:auto; }
  .direct-solve .grid-letter { font-size:20px; font-family:inherit; touch-action:manipulation; padding:7px 6px 0 0; }
  .direct-solve :is(#guest-board,#board) .square .number { font-size:9px; }
  .direct-solve :is(#guest-board,#board) .secret-marker { width:11px; height:11px; font-size:8px; }
  .direct-solve :is(#guest-board,#board) .feedback-mark { font-size:11px; }
  .direct-solve .guest-entry-panel { position:static; flex-shrink:0; margin:0; padding:0; max-height:none; overflow:visible; gap:0; }
  .direct-solve .guest-active-clue { font-size:15px; line-height:1.4; min-height:0; max-height:none; margin:0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .direct-solve .direct-read-clue { align-self:start; }
  .direct-solve .guest-navigation { flex-wrap:nowrap; margin:0; justify-content:space-between; gap:2px; }
  .direct-solve .guest-navigation .button { min-width:44px; min-height:44px; padding:4px; font-size:12px; white-space:normal; }
  .direct-solve .game-keyboard { display:flex; flex-direction:column; flex-shrink:0; gap:4px; padding:2px 0; }
  .game-keyboard-row { display:flex; justify-content:center; gap:3px; }
  .game-key { flex:1; min-width:0; max-width:48px; height:44px; min-height:44px; background:#e8eeea; color:var(--ink); border:1px solid #9ead9f; border-radius:5px; padding:0; font-family:inherit; font-size:17px; font-weight:600; line-height:1; cursor:pointer; touch-action:manipulation; }
  .game-key:active { background:#c9e0eb; }
  .game-key:disabled { opacity:.45; }
  .game-delete { flex:1.8; max-width:72px; }
  .direct-solve .guest-clues,.direct-solve .direct-info,.direct-solve .direct-reading { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; border:0; padding:12px 6px; }
  .direct-solve .direct-info > .button { margin:6px 8px 6px 0; }
  .direct-solve .direct-info .solve-actions .button { min-height:44px; }
  .direct-solve [hidden] { display:none!important; }
  .direct-solve .guest-clues .clue-button { min-height:44px; }
}
@media(max-width:760px) and (max-height:500px), (pointer:coarse) and (max-height:500px) {
  .direct-solve.direct-mobile { gap:1px; }
  .direct-solve .guest-grid-workspace { gap:1px; }
  .direct-solve .guest-active-clue { -webkit-line-clamp:1; }
  .direct-solve .direct-read-clue { min-height:24px; padding:0; }
  .direct-solve .game-keyboard { gap:2px; padding:0; }
}

/* A phone in landscape keeps useful grid height beside the same keyboard. */
@media(min-width:640px) and (max-height:500px) {
  .direct-mobile .guest-grid-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(328px,1.1fr); grid-template-rows:minmax(0,1fr) auto; gap:4px 8px; }
  .direct-mobile .guest-board-scroll { grid-column:1; grid-row:1 / span 2; }
  .direct-mobile .guest-entry-panel { grid-column:2; grid-row:1; align-self:start; }
  .direct-mobile .guest-active-clue { -webkit-line-clamp:3; }
  .direct-mobile .game-keyboard { grid-column:2; grid-row:2; }
  .direct-mobile .guest-grid-workspace:has(.game-keyboard[hidden]) { grid-template-columns:minmax(0,1fr) minmax(220px,.7fr); grid-template-rows:minmax(0,1fr); }
}

/* Creator preview keeps its existing save errors and retry controls visible. */
.direct-solve .direct-notice { grid-column:1 / -1; font-size:13px; line-height:1.4; padding:6px; background:#f4efdf; }
.direct-solve .direct-notice .button { padding:4px 8px; margin-left:8px; }
@media(max-width:760px), (pointer:coarse) {
  .guest-test .app-shell { padding:0; }
  .guest-test .masthead,.guest-test .footer { display:none; }
  .guest-test main { display:flex; flex-direction:column; height:100dvh; }
  .guest-test main > :not(#puzzle-card):not(#draft-saving):not(#navigation-error) { display:none; }
  .guest-test #draft-saving { margin:0; padding:4px 10px; border:0; border-radius:0; flex-shrink:0; font-size:12px; max-height:25dvh; overflow:auto; }
  .guest-test #draft-saving p { margin:4px 0; }
  .guest-test #navigation-error { flex-shrink:0; margin:0; max-height:25dvh; overflow:auto; }
  .guest-test #puzzle-card { flex:1; min-height:0; display:flex; border:0; border-radius:0; }
  .guest-test #puzzle-card > :not(.creator-game) { display:none; }
  .guest-test .creator-game { flex:1; min-height:0; height:auto; }
  .direct-solve .solve-entry-panel { border:0; border-radius:0; margin-bottom:0; background:transparent; z-index:auto; }
  .direct-solve .solve-entry-panel .active-clue { padding:0; font-size:15px; line-height:1.4; background:transparent; max-height:none; overflow:hidden; }
  .guest-page.guest-playing .guest-shell { height:100dvh; display:flex; flex-direction:column; padding:0; }
  .guest-playing .guest-shell > :not(#guest-game):not(#guest-error):not(#guest-retry) { display:none; }
  .guest-playing #guest-game { flex:1; min-height:0; height:auto; }
  .guest-playing #guest-error,.guest-playing #guest-retry { flex-shrink:0; margin:0; max-height:25dvh; overflow:auto; }
  .direct-solve .direct-notice { flex-shrink:0; max-height:18dvh; overflow:auto; margin:0; }
  .direct-solve .direct-notice .button { min-height:44px; }
}