/* de-Frog layout fixes (not part of Dot's delivery; brief Part B item 3). Shared by the app and the website.
   Checked at 360x640, 412x915, 915x412 and 1280x720 (tools/shots.mjs, tests/layout.test.mjs). The pond's
   size stays inside the range Dot's own CSS already gives it (240-385 px tall, at most 404 px wide inside its border), because
   the pond's size is part of the game's geometry. */

/* Dot's <main id="app"> is a shrink-to-fit flex item, so the game box, and the pond inside it, took the width of
   its longest line of text. Hiding a line, or the Net label changing to "Net 2.3s", could then resize the pond
   mid-level (the game rescales the ship when it does). Full width here; the box keeps Dot's own limit (at most
   430 px, centred), which is the width Dot's build reached anyway. */
#app{width:100%}

/* Menus, results, the tutorial and the victory screen grow with their content and the page scrolls. Dot's R6
   base fixes the box to the screen height with overflow hidden, which cut off "Main menu" at 360x640. */
.app.frog:not(.playing){height:auto;min-height:100svh;overflow:visible}

/* Touch targets: at least 44 x 44 CSS px. */
.control-strip button{min-height:44px}
#soundtrack .song-pick{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box}
#song-toggle{min-height:44px;padding:6px 10px}
.app .seed input{min-height:44px;box-sizing:border-box;padding:6px 8px;margin-top:4px}
label:has(#net-ack){display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer}
#net-ack{width:24px;height:24px;margin:0;flex:none;accent-color:#c5aa70}
#fullscreen-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;margin-left:auto}
.app header #fullscreen-toggle+#pause{margin-left:0}

/* Keyboard focus: the headings layout.js focuses after a redraw show no ring (they are not controls). */
.app h1[tabindex="-1"]:focus,.app h2[tabindex="-1"]:focus{outline:none}
#soundtrack .song-pick:focus-within{outline-offset:3px}

/* Phones: a swipe or long press on the pond, the steering arrows or Net must not scroll the page, select text
   or open a menu (Dot's CSS allowed panning on the pond). Taps still fire as before. */
.app.frog.playing .bayou,.app.frog.playing .access-arrows button,.app.frog.playing #net-button{touch-action:none}
.app.frog.playing{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* Short screens (360x640 and phones with browser bars): everything from the HUD to the controls stays on screen
   during play. The headline and the "Tap anywhere..." line are hidden on screen (kept for screen readers; the
   pond's own "TAP POND = FIRE" hint stays), and so are the footer and the keyboard-help line. */
@media (max-height:740px){
 .app.frog.playing .play-head h2,.app.frog.playing .play-head p{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
 .app.frog.playing .footer,.app.frog.playing .body>.seed{display:none}
 .app.frog.playing #pattern-hint{font-size:11px;padding:5px 8px;line-height:1.3}
 .app.frog.playing .goal-strip{padding:5px 9px}
 .app.frog.playing .body{gap:5px!important} /* r6-styles sets 8px with !important */
 .app.frog.playing header button{min-height:44px}
 .app.frog.playing .tilt-status{min-height:0;font-size:10.5px}
}

/* Wide, short windows (a phone held sideways, 915x412): the pond on the left, the HUD and controls on the
   right, so play needs no scrolling. The pond keeps Dot's limits: at most 404 px wide (406 with its border), 240-320 px tall. */
@media (orientation:landscape) and (max-height:560px){
 .app.frog.playing{width:min(100%,880px);max-width:none;padding:6px 12px}
 .app.frog.playing .body{display:grid;grid-template-columns:minmax(0,406px) minmax(250px,1fr);grid-auto-rows:min-content;column-gap:16px;row-gap:6px;align-content:start}
 .app.frog.playing .body>*{grid-column:2;min-width:0}
 .app.frog.playing .body>#bayou{grid-column:1;grid-row:1/span 12;height:clamp(240px,calc(100svh - 66px),320px);min-height:240px}
 .app.frog.playing .control-strip button{padding:6px 8px}
}

/* Play controls (Andrew's phone test, 10-31). One row under the thumbs: steer left, Net, steer right (from
   level 20; before that, just the two arrows). Tilt and Center, set once per run, sit with the tilt status in a
   slim row above the pond, with the wave hint, where the eyes are (layout.js moves them, so the reading and Tab
   order match the screen). The running message line is hidden during play (below). */
.app.frog.playing .tilt-row{display:flex;align-items:center;gap:6px}
.app.frog.playing .tilt-row .tilt-status{flex:1;min-width:0;min-height:0}
.app.frog.playing .tilt-row button{font-size:12px;min-height:44px;padding:6px 10px}
.app.frog.playing .control-strip{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:8px}
.app.frog.playing .control-strip:not(:has(#net-button)){grid-template-columns:1fr 1fr}
.app.frog.playing .control-strip .access-arrows{display:contents}
.app.frog.playing .control-strip button{min-height:56px;min-width:0;font-size:14px;margin:0}
.app.frog.playing .control-strip .access-arrows button{font-size:20px}
.app.frog.playing .control-strip [data-steer="-1"]{grid-column:1;grid-row:1}
.app.frog.playing .control-strip #net-button{grid-column:2;grid-row:1;flex-basis:auto;min-height:56px}
.app.frog.playing .control-strip:has(#net-button) [data-steer="1"]{grid-column:3;grid-row:1}
.app.frog.playing .control-strip:not(:has(#net-button)) [data-steer="1"]{grid-column:2;grid-row:1}

/* Touch screens: no footer and no keyboard-help line during play (a phone has no keyboard, and on tall phones
   that line ran into the footer). */
@media (pointer:coarse){
 .app.frog.playing .footer,.app.frog.playing .body>.seed{display:none}
}
/* Music on/off (music.js), in the soundtrack row */
#music-toggle{min-height:44px;padding:6px 10px;font-size:11px;white-space:nowrap}
/* No running message line during play (Andrew's phone test, 11-06): game.js rewrites it on every hit, escape and
   warning ("Frog cleared! +100. 13 opportunities left..."), faster than anyone can read, and its changing length
   still nudged the pond. It is hidden on screen at every size and takes no space, so it can never move the pond.
   It stays in the page as a polite status for screen readers. The wave's hint line above the pond stays. */
.app.frog.playing #message{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Website only (layout.js): the support note under the title screen's buttons. The link flows with the sentence; its padding
   makes it a 44 px tall touch target. */
#support-note{margin:14px 0 0;font-size:14px;line-height:1.5;color:inherit;opacity:.85}
#support-note a{padding:13px 0;color:#c5aa70;font-weight:700;text-underline-offset:3px}
/* The row under the game (Andrew, 11-07): Music on/off and About, at the two ends. No About button during play. */
#soundtrack{justify-content:space-between}
#about-button{min-height:44px;padding:6px 14px;font-size:11px;white-space:nowrap}
body:has(.app.frog.playing) #about-button{display:none}
#about-dialog p{margin:0 0 12px;color:#c7bda5;line-height:1.5}
#about-dialog h2{margin:0 0 12px}
#about-dialog .about-site{color:#eee4cf;font-weight:700}
#about-dialog .about-site a{display:inline-block;padding:12px 0;color:#c5aa70}
#about-close{width:100%;margin-top:4px}

/* Leaving a level asks first (leave.js; Andrew, 11-08). Exit game (app only) spans the pause menu's two columns. */
#exit-game{grid-column:1/-1}
#leave-dialog h2{margin:0 0 8px}
#leave-dialog p{margin:0;color:#c7bda5;line-height:1.5}
#leave-dialog .dialog-actions{margin-bottom:0}