* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #ddc39c;
  font-family: "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  color: #3a2a17;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: none;
  overscroll-behavior: none;   /* no pull-to-refresh mid-drag */
}

/* Light brown, like a table with the letters laid out on it. The word gets its
   own slab a few shades darker so both colours it can be still read: white
   lifts off it and black sits down into it. */
body {
  background: radial-gradient(120% 90% at 50% 100%, #f0dcbb 0%, #ddc39c 48%, #c2a67f 100%);
}

/* env(safe-area-*) keeps the HUD clear of notches and home bars on a phone */
#app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 20px of side margin is not decoration: iOS reads a drag that starts within
     about 20px of the screen edge as the back gesture, and the left column of
     keys was sitting right in it */
  padding:
    calc(10px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right))
    calc(14px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
  gap: 6px;
}

/* ---------- the top: one line, score living inside the bar ---------- */

/* The score line and the words left, as one block. Sideways, this whole block
   moves to the left of the board instead of above it. */
#hud {
  width: 100%;
  max-width: var(--w, 560px);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#top {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

#bar {
  position: relative;
  flex: 1 1 auto;
  height: 30px;
  border-radius: 15px;
  background: #c0a47c;
  border: 2px solid #8a6f4e;
  overflow: hidden;
}

#barFill {
  position: absolute;
  inset: 0 100% 0 0;
  background: linear-gradient(180deg, #8fd94a 0%, #58a924 100%);
  transition: right .35s cubic-bezier(.2,.8,.3,1);
}

#barText {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .12em;
  color: #33240f;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  white-space: nowrap;
}

#soundBtn {
  flex: 0 0 auto;
  background: #c9ae87;
  border: 2px solid #8a6f4e;
  color: #4a3720;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 7px 10px;
  border-radius: 12px;
  cursor: pointer;
}
/* back to the start screen: a square the height of the bar, left of it */
#homeBtn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #c9ae87;
  border: 2px solid #8a6f4e;
  border-radius: 12px;
  color: #4a3720;
  cursor: pointer;
}
#homeBtn svg { width: 58%; height: 58%; }
#homeBtn:active { background: #bfa278; }

#soundBtn[aria-pressed="true"] { color: #2f6b12; border-color: #4f8b26; background: #d8c79b; }

/* ---------- words left, tucked under the score on the left ---------- */

#left {
  width: 100%;
  flex: 0 0 auto;
}

#left .label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  color: #7b6242;
}

#wordsLeft {
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  color: #33240f;
}

#wordsLeft.low { color: #b26a10; }
#wordsLeft.last { color: #b03217; }

/* the furthest you have ever got, quiet and out of the way */
#bestLine {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  color: #8a7052;
}
#bestLine b { color: #b26a10; }

/* and on the start screen, where you look for it before you play */
#startBest {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  color: #7b6242;
  background: rgba(255,250,240,.5);
  border: 1px solid rgba(138,111,78,.3);
  border-radius: 999px;
  padding: 7px 18px;
}
#startBest b { color: #b26a10; }

/* The board is square and the screen is not, so there is always slack left over
   once the board has taken all the width it can. Where that slack goes is the
   whole of the vertical layout.

   It used to go almost entirely above the board -- four parts up, one part down
   -- which on a tall phone left a third of the screen as empty table and made
   the board look like it had slid off the bottom. Two parts up and one part
   down keeps the board low, which is where a thumb is, without the hole. */
#spacer { flex: 2 1 auto; }
#underspace { flex: 1 1 auto; }

/* ---------- the board, low on the screen, and the word riding above it ---------- */

#stage {
  width: 100%;
  max-width: var(--w, 560px);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: 22px;   /* a little room under the board, as asked */
}

/* just above the board, and off to the right */
#wordRow {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-right: 6px;
  min-height: 46px;
  align-items: flex-end;
}

/* the slab holds the word and, next to it, what the word is worth */
#word {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  padding: 6px 16px;
  border-radius: 12px;
  background: #a2855c;
  max-width: 100%;
  /* The slab has to hold the longest word and its score side by side --
     SUBURBIA +865 -- and on a 320px phone that left six pixels to spare. It
     scales with the screen now rather than sitting one character from clipping. */
  font-size: clamp(18px, 6.2vw, 26px);
  font-weight: 900;
  letter-spacing: .22em;
  line-height: 1.15;
  min-width: 92px;
  text-align: center;
  /* Hidden outright rather than faded. It used to fade out over .12s at the
     same moment letting go emptied it and turned it from green to brown, and
     an iPad (9th generation, sideways) repainted only part of that: a hollow
     green outline was left behind above the board after every word. Nothing
     animates or resizes as it hides now, so there is nothing to leave behind. */
  visibility: hidden;
  transition: color .1s linear, background .1s linear;
}

#wordText { min-width: 0; overflow: hidden; }

#word.showing { visibility: visible; }
#word.notword { color: #16110a; }
#word.isword {
  color: #ffffff;
  background: #7f9e4c;
  text-shadow: 0 0 14px rgba(255,255,255,.85);
}
/* What you would score if you let go now. Sits right beside the word so it is
   in the same glance -- the point is to know what a word pays before spending
   one on it, and to see the ladder and the blue keys change the number. */
#wordPts {
  flex: 0 0 auto;
  font-size: .62em;
  letter-spacing: .06em;
  font-weight: 900;
  white-space: nowrap;
  opacity: .85;
}

#word.isword #wordPts { color: #eaffd0; }
#word.isword #wordPts.bonus {
  color: #fff6c2;                 /* a ladder or a blue key is in this number */
  text-shadow: 0 0 12px rgba(255,226,120,.9);
}
#wordPts.had { color: #b03217; opacity: 1; }

#word.shake { animation: shake .3s ease; }

@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}

#boardWrap {
  position: relative;
  width: 100%;
  max-width: var(--board, min(460px, 62vh));   /* square, and it fits a screen turned sideways */
  aspect-ratio: 1 / 1;
}

/* The body goes under the keys and shows in the gaps. The face goes over them,
   because a snake with its eyes behind a letter is not looking at anything. */
#snake, #face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* the keys sit apart, like a keyboard, and the snake crosses the gaps */
#board {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 2.8%;   /* close together but never touching -- the snake needs the gap to cross */
}

.key {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22%;
  background: linear-gradient(180deg, #fffaf0 0%, #f0e3ca 100%);
  box-shadow: 0 3px 0 #ab9068, 0 5px 8px rgba(80,55,25,.28);
  color: #33240f;
  font-size: clamp(16px, 5.2vw, 30px);
  font-weight: 900;
  text-transform: uppercase;
  transition: transform .08s ease, box-shadow .08s ease, background .12s ease, color .12s ease;
}

/* the two ends of the ladder: get on at the foot, off at the top */
.key.ladderFoot, .key.ladderTop {
  background: linear-gradient(180deg, #ffeec4 0%, #f2d79a 100%);
  box-shadow: 0 0 0 3px #a16b34, 0 3px 0 #8a6f4e, 0 5px 8px rgba(80,55,25,.28);
}

/* the keys worth more: dark blue, white letter, and the bonus in the corner so
   nobody has to be told what blue means */
.key.blue {
  background: linear-gradient(180deg, #2c4f9e 0%, #1a2f66 100%);
  box-shadow: 0 3px 0 #10204a, 0 5px 8px rgba(20,30,70,.35);
  color: #ffffff;
}

.key.blue::after {
  content: "+30";
  position: absolute;
  top: 4%;
  right: 7%;
  font-size: max(8px, 0.22em);
  font-weight: 900;
  letter-spacing: 0;
  color: #9fc0ff;
}

.key.held {
  background: linear-gradient(180deg, #a8e764 0%, #62b52a 100%);
  color: #10250a;
  transform: translateY(3px);
  box-shadow: 0 0 0 #000, 0 2px 8px rgba(70,120,25,.45);
}

/* The key your finger is on is the snake's head, so the face gets the whole
   key: the letter steps out of the way (it is up in the word readout anyway). */
.key.blue.held {
  background: linear-gradient(180deg, #3a63bd 0%, #22408a 100%);
  color: #ffffff;
  box-shadow: 0 0 0 3px #74c33c, 0 2px 10px rgba(70,120,25,.5);
}

/* the face owns the head key, blue or not */
.key.blue.head { color: transparent; }
.key.blue.head::after { content: none; }

.key.head {
  background: linear-gradient(180deg, #a8e764 0%, #62b52a 100%);
  color: transparent;
}

.key.pop { animation: pop .28s ease; }

@keyframes pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

.key.dropin { animation: dropin .3s cubic-bezier(.2,.9,.3,1.2); }

@keyframes dropin {
  0% { transform: translateY(-28px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ---------- toast, banner, screens ---------- */

#toast {
  position: absolute;
  left: 50%;
  top: 26%;
  transform: translate(-50%, -50%);
  white-space: nowrap;          /* +160 LADDER +30 BLUE +30 is one line or it is nothing */
  font-size: clamp(15px, 4.6vw, 26px);
  font-weight: 900;
  letter-spacing: .06em;
  color: #2f6b12;
  text-shadow: 0 2px 0 rgba(255,255,255,.85), 0 4px 14px rgba(120,90,40,.5);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

#toast.go { animation: toast 1s ease forwards; }

@keyframes toast {
  0% { opacity: 0; transform: translate(-50%, -10%) scale(.8); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -110%) scale(1); }
}

/* A finished round waits for you, with a big NEXT LEVEL button right in the
   middle of the screen under ROUND N DONE. It used to sit small at the bottom,
   near where a thumb ends up after dragging; asked for bigger and centred, so it
   is the one thing on the screen and there is no hunting for it. */
#banner {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 4vh, 44px);
  padding: 24px;
  background: rgba(238, 220, 190, .94);
  z-index: 20;
}

#nextBtn {
  background: linear-gradient(180deg, #8fd94a 0%, #58a924 100%);
  border: none;
  border-radius: clamp(18px, 3vw, 28px);
  padding: clamp(20px, 3.2vh, 34px) clamp(44px, 9vw, 96px);
  min-width: min(78vw, 420px);
  font: inherit;
  font-size: clamp(26px, 6.4vw, 44px);
  font-weight: 900;
  letter-spacing: .12em;
  color: #10240c;
  box-shadow: 0 7px 0 #3d7a1e, 0 12px 24px rgba(61,122,30,.3);
  cursor: pointer;
}

#nextBtn:active { transform: translateY(5px); box-shadow: 0 2px 0 #3d7a1e, 0 6px 12px rgba(61,122,30,.3); }

#bannerText {
  font-size: clamp(32px, 8.5vw, 64px);
  font-weight: 900;
  letter-spacing: .1em;
  color: #3f7f1a;
  text-align: center;
  text-shadow: 0 2px 0 rgba(255,255,255,.6);
}

.screen {
  position: fixed;
  inset: 0;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: radial-gradient(120% 90% at 50% 100%, #f0dcbb 0%, #ddc39c 48%, #c2a67f 100%);
}

.screen h1 {
  margin: 0;
  font-size: clamp(30px, 9vw, 52px);
  font-weight: 900;
  letter-spacing: .04em;
  color: #33240f;
  line-height: 1.05;
}

.screen h1 span { color: #3f7f1a; }

.tag {
  margin: 0;
  color: #6b543a;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
}

.how {
  margin: 8px 0 12px;
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: 15px;
  line-height: 1.55;
  color: #4a3720;
}

.how li { margin: 0 0 8px; }

.how b { color: #3f7f1a; }

.note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #7b6242;
}

.screen button {
  margin-top: 8px;
  background: linear-gradient(180deg, #8fd94a 0%, #58a924 100%);
  border: none;
  border-radius: 16px;
  padding: 14px 30px;
  font: inherit;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #10240c;
  box-shadow: 0 4px 0 #3d7a1e;
  cursor: pointer;
}

.screen button:active { transform: translateY(3px); box-shadow: 0 1px 0 #3d7a1e; }

/* ---------- the start screen ----------
   The name on game keys with the snake through it, filling the top; START as
   wide as a thumb could want, down where the thumb is. */
#start {
  justify-content: space-between;
  gap: 0;
  padding:
    calc(20px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right))
    calc(22px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
}

.startTop {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.2vh, 26px);
  padding-bottom: 3vh;
}

#start h1 { line-height: 0; }

/* sized off the height as well as the width, so a short phone keeps room for
   START underneath */
.logo {
  display: block;
  width: min(95vw, 44vh, 600px);
  height: auto;
  overflow: visible;
}
.logo .lk { font-family: inherit; font-size: 28px; font-weight: 900; text-anchor: middle; dominant-baseline: central; }
.logo .lb { font-family: inherit; font-size: 10px; font-weight: 900; fill: #9fc0ff; text-anchor: end; dominant-baseline: central; }

/* the tongue darts out and back, the way it does on the board */
.logo .tongue {
  transform-box: fill-box;
  transform-origin: right center;
  animation: flick 2.4s ease-in-out infinite;
}
@keyframes flick {
  0%, 52%, 100% { transform: scaleX(0); }
  12%, 40% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .logo .tongue { animation: none; }
}

#start .tag { font-size: clamp(17px, 5.3vw, 30px); letter-spacing: .02em; }

.startBottom {
  flex: 0 0 auto;
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vh, 20px);
}

#startBtn {
  width: 100%;
  margin: 0;
  padding: clamp(16px, 2.8vh, 28px) 0;
  border-radius: 22px;
  font-size: clamp(24px, 7vw, 36px);
  box-shadow: 0 6px 0 #3d7a1e;
}
#startBtn:active { transform: translateY(4px); box-shadow: 0 2px 0 #3d7a1e; }

/* under CONTINUE when a round is paused: quieter, because it throws the round away */
#newGameBtn {
  margin: 0;
  padding: 10px 26px;
  background: rgba(255,250,240,.55);
  border: 2px solid #8a6f4e;
  border-radius: 14px;
  box-shadow: none;
  color: #4a3720;
  font-size: clamp(14px, 3.8vw, 18px);
  letter-spacing: .12em;
}
#newGameBtn:active { transform: translateY(2px); box-shadow: none; background: rgba(255,250,240,.8); }
#start .screenLinks { margin-top: 0; }

/* only shown on an iPhone or iPad that has not installed it yet */
#installHint {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  max-width: 340px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #6b543a;
  background: rgba(255,250,240,.6);
  border: 1px solid rgba(138,111,78,.35);
  border-radius: 12px;
  padding: 8px 14px;
}

#installHint b { color: #3f7f1a; }

/* Privacy · Support, under the button on the start and game-over screens */
.screenLinks {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #7b6242;
}
.screenLinks a { color: #6b543a; text-decoration: underline; text-underline-offset: 3px; }

/* A card over everything -- How to play and the privacy policy -- scrollable if
   a small phone needs it. The page itself refuses to scroll (a drag is a word),
   so this box opts back in to vertical panning. */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  background: rgba(60, 42, 20, .45);
  overflow-y: auto;
  touch-action: pan-y;
}
.sheetCard {
  max-width: 460px;
  width: 100%;
  margin: auto;
  background: #fbf4e6;
  border: 2px solid #8a6f4e;
  border-radius: 18px;
  padding: 22px 22px 18px;
  color: #33240f;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
  -webkit-user-select: text;
  user-select: text;
}
.sheetCard h2 { margin: 0 0 6px; font-size: 22px; font-weight: 900; letter-spacing: .12em; color: #3f7f1a; }
.privacyCard .lead { margin: 0 0 6px; font-weight: 800; }
.privacyCard ul { margin: 0 0 10px; padding-left: 20px; }
.privacyCard li { margin: 3px 0; }
.privacyCard p { margin: 0 0 10px; }
.privacyCard .small { font-size: 13px; color: #6b543a; }
.privacyCard a { color: #2f6b12; font-weight: 700; }
#privacyClose, #howClose {
  display: block;
  margin: 12px auto 0;
  background: linear-gradient(180deg, #8fd94a 0%, #58a924 100%);
  border: none;
  border-radius: 14px;
  padding: 12px 30px;
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #10240c;
  box-shadow: 0 4px 0 #3d7a1e;
  cursor: pointer;
}

/* The start screen on a tablet: the pill and the links grow with everything else. */
@media (min-width: 700px) and (min-height: 700px) {
  .logo { width: min(88vw, 56vh, 640px); }
  #startBest { font-size: 16px; padding: 9px 22px; }
  #start .screenLinks { font-size: 16px; gap: 14px; }
  #startBtn { border-radius: 26px; box-shadow: 0 7px 0 #3d7a1e; }
  .sheetCard { max-width: 620px; padding: 32px 34px 26px; font-size: 18px; border-radius: 24px; }
  .sheetCard h2 { font-size: 30px; margin-bottom: 10px; }
  .how { font-size: 19px; }
  .how li { margin-bottom: 12px; }
  .note { font-size: 15.5px; }
  .privacyCard .small { font-size: 15px; }
  #privacyClose, #howClose { font-size: 20px; padding: 16px 44px; margin-top: 18px; }
}

/* A phone on its side has width and no height: the name goes on the left and
   START on the right, rather than one squeezed on top of the other. */
@media (orientation: landscape) and (max-height: 540px) {
  #start { flex-direction: row; align-items: center; justify-content: center; gap: 4vw; }
  .startTop { flex: 0 1 auto; padding-bottom: 0; gap: 8px; }
  .logo { width: min(42vw, 88vh); }
  #start .tag { font-size: 18px; }
  .startBottom { width: min(36vw, 340px); gap: 12px; }
  #startBtn { padding: 18px 0; font-size: 26px; }
}

#overBest { font-size: 14px; font-weight: 800; letter-spacing: .1em; color: #b26a10; }

.hidden { display: none !important; }

/* ---------- the shapes of screen this gets held on ---------- */


/* A tall phone. The board cannot grow -- it is square and the width has already
   capped it -- so the room goes to the two numbers instead, which are the whole
   HUD and were set at a size meant for a much shorter screen. */
@media (min-height: 780px) {
  #app { --board: min(500px, 62vh); }
  #hud { gap: 14px; }
  #bar { height: 38px; border-radius: 19px; }
  #homeBtn { width: 42px; height: 42px; }
  #barText { font-size: 16px; }
  #wordsLeft { font-size: 60px; }
  #left .label { font-size: 12px; letter-spacing: .22em; }
  #bestLine { font-size: 11px; margin-top: 8px; }
  #wordRow { min-height: 54px; }
  #word { font-size: clamp(21px, 6.8vw, 30px); padding: 7px 18px; }
}

/* An iPad, held upright. The board was sized for a phone and looked lost on a
   13-inch screen: it now takes the width it can get, and everything set in
   points rather than percentages grows with it.

   700px, not 820: an iPad mini is 744 across and a 9.7-inch is 768, and both
   were falling through to the phone rule and getting a 500px board on a screen
   with room for 630. Portrait only, so a phone on its side -- 852 wide and 393
   tall -- never picks up tablet padding it has no height for. */
@media (min-width: 700px) and (orientation: portrait) {
  #app {
    --w: 780px;
    --board: min(780px, 56vh);
    padding-top: calc(24px + env(safe-area-inset-top));
    gap: 10px;
  }
  #hud { gap: 10px; }
  #bar { height: 46px; border-radius: 23px; }
  #homeBtn { width: 50px; height: 50px; border-radius: 14px; }
  #barText { font-size: 20px; }
  #soundBtn { font-size: 14px; padding: 11px 16px; border-radius: 14px; }
  #left .label { font-size: 14px; letter-spacing: .22em; }
  #wordsLeft { font-size: 58px; }
  #bestLine { font-size: 15px; margin-top: 12px; }
  #word { font-size: clamp(28px, 4.4vw, 40px); padding: 10px 26px; border-radius: 16px; min-width: 130px; }
  #wordRow { min-height: 72px; padding-right: 10px; }
  #stage { padding-bottom: 30px; }
  .key { font-size: clamp(28px, 4.4vw, 54px); }
  #toast { font-size: clamp(24px, 3.2vw, 40px); }
}

/* Sideways -- an iPad turned, or a phone on its side. Stacking the HUD above a
   square board wastes the whole width: the board gets squeezed into the middle
   with a third of the screen empty on either side. So the HUD stands beside the
   board instead, and the board takes the height.

   Height is what the board is sized off here, not width. A phone on its side is
   852 wide and 393 tall -- there is width to spare and almost no height, and a
   board measured off the width runs straight off the bottom. */
@media (orientation: landscape) and (min-width: 700px) {
  #app {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 5vw, 72px);
    --board: min(76vh, 720px);
  }
  #hud {
    width: auto;
    max-width: none;
    flex: 0 1 clamp(240px, 30vw, 420px);
    gap: clamp(10px, 3vh, 30px);
  }
  /* the bar and the sound button go one above the other rather than fighting
     over a column that is narrower than the row they were built for */
  #top { flex-wrap: wrap; }
  #homeBtn { width: clamp(30px, 5.4vh, 50px); height: clamp(30px, 5.4vh, 50px); }
  #bar { order: -1; flex: 1 0 100%; height: clamp(30px, 5.4vh, 52px); border-radius: 26px; }
  #barText { font-size: clamp(13px, 2vh, 21px); }
  #soundBtn { font-size: clamp(10px, 1.5vh, 14px); padding: 6px 10px; }
  #left .label { font-size: clamp(9px, 1.6vh, 15px); letter-spacing: .22em; }
  #wordsLeft { font-size: clamp(30px, 9vh, 86px); }
  #bestLine { font-size: clamp(9px, 1.5vh, 15px); }
  #word { font-size: clamp(18px, 4vh, 40px); padding: 4px 14px; min-width: 76px; }
  #wordRow { min-height: clamp(28px, 8vh, 56px); padding-right: 8px; }
  #spacer, #underspace { display: none; }
  #stage {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    padding-bottom: 0;
    gap: 4px;
  }
  #boardWrap { width: var(--board); }
  .key { font-size: clamp(15px, 8vh, 54px); }
}

/* Too narrow to stand anything beside anything -- an old phone on its side, and
   not much else. Back to stacking, with everything above the board giving up
   what it can. */
@media (orientation: landscape) and (max-width: 699px) {
  #app { gap: 2px; --board: min(460px, 62vh); }
  #spacer { flex: 1 1 auto; }
  #underspace { flex: 0.4 1 auto; }
  #hud { gap: 2px; }
  #bar { height: 24px; }
  #homeBtn { width: 28px; height: 28px; border-radius: 9px; }
  #barText { font-size: 12px; }
  #wordsLeft { font-size: 22px; }
  #left .label { font-size: 9px; }
  #bestLine { font-size: 9px; margin-top: 2px; }
  #wordRow { min-height: 30px; }
  #word { font-size: 18px; padding: 3px 12px; min-width: 70px; }
  #stage { padding-bottom: 6px; }
}

/* Last, so it wins over the tall-phone rule above. A phone-width bar shares its row with the back button and SOUND, so late
   rounds (ROUND 15   3700 / 4050) need the tighter letter-spacing to fit. */
@media (max-width: 440px) {
  #barText { letter-spacing: .05em; font-size: clamp(12px, 3.3vw, 13px); }
}