/* =====================================================================================
   v33 EVERY DEVICE LAYER (loaded last). From the smallest phone to the biggest projector, upright and sideways.
   1. Options: on small screens (body.cmp) the top bar keeps Home, clock, lives, score and one big Options button.
      Everything else (menu, sound, read aloud, fix, songs and the music player, Tips, Science) is in the Options panel.
   2. The play field gets the space: no music rail, no side tabs during play on small screens.
   3. No squeezed words: answer panels watch their OWN width (container queries). When a panel is narrow, answers
      stack one per row in whole words instead of sitting side by side.
   4. Corn Maze: the maze is the biggest thing on every screen; the arrow pad sits beside it (sideways) or under it
      (upright), never on top of it.
   5. Missing Item Hunt: the whole tally list shows with its own scroll, right next to the picture.
   6. Game menu: every game card is the same size, every Play button the same size.
   ===================================================================================== */

/* ---------- 1. Options button and panel ---------- */
.optbtn { display: none; }
body.cmp .optbtn { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; min-height: 48px !important; height: auto !important; width: auto !important; min-width: 48px !important;
  padding: 0 12px !important; border-radius: 14px; border: 3px solid var(--amber, #ffb238) !important; background: #3a1c06 !important; color: #fff; font: 400 16px var(--f-display); }
.optbtn svg { width: 24px; height: 24px; flex: none; }
.optbtn[aria-expanded="true"] { background: var(--amber, #ffb238) !important; color: #2a1408; }
.optbtn.nudge { animation: optnudge 1s ease-in-out infinite; box-shadow: 0 0 0 4px rgba(140, 255, 58, .6); }
@keyframes optnudge { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .optbtn.nudge { animation: none; } }

#optpanel { position: fixed; inset: 0; z-index: 90; display: grid; justify-items: center; align-items: start; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) max(10px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 10px) max(10px, env(safe-area-inset-left, 0px));
  background: rgba(8, 4, 2, .72); backdrop-filter: blur(3px); }
#optpanel[hidden] { display: none; }
.optcard { width: min(560px, 100%); display: grid; gap: 10px; padding: 14px; border-radius: 22px; background: linear-gradient(180deg, #3a1f0e, #1a0d06);
  box-shadow: inset 0 0 0 4px #7b4519, inset 0 0 0 8px #241208, 0 18px 40px rgba(0, 0, 0, .6); color: #fff; }
.opthead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 0 8px; }
.opthead h2 { margin: 0; font: 400 clamp(26px, 7vw, 36px) var(--f-spook, var(--f-display)); letter-spacing: .03em; color: var(--pill, #ffd27a); }
.optx { display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 16px; border-radius: 16px; border: 3px solid #ffd27a; background: #2a1408; color: #fff; font: 400 18px var(--f-display); cursor: pointer; }
.optx svg { width: 22px; height: 22px; }
.optnote { margin: 0 8px; font-size: 16px; color: #9be15d; }
.optnote:empty { display: none; }
.optgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opttile { display: flex; align-items: center; gap: 10px; min-height: 72px; padding: 8px 12px; border-radius: 18px; border: 3px solid #7b4519; background: #2a1408; color: #fff; cursor: pointer; text-align: left;
  font: 400 clamp(16px, 4.4vw, 20px)/1.15 var(--f-display); box-shadow: 0 5px 0 #120804; }
.opttile:hover, .opttile:focus-visible { border-color: #ffd27a; background: #3a1c06; outline: none; }
.opttile:active { transform: translateY(3px); box-shadow: 0 2px 0 #120804; }
.opttile.on { border-color: #9be15d; }
.optemo { font-size: 32px; line-height: 1; flex: none; }
.optt { min-width: 0; overflow-wrap: normal; word-break: normal; }
.optmus { display: grid; gap: 6px; padding: 10px; border-radius: 18px; background: rgba(0, 0, 0, .35); border: 2px solid #7b4519; }
.optmus[hidden] { display: none; }
.optmh { margin: 0; font: 400 18px var(--f-display); color: var(--pill, #ffd27a); }
/* the music player sits inside the panel (not fixed to the screen) */
body.cmp #optpanel .musbar { position: static !important; inset: auto !important; width: auto !important; height: auto !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
  align-items: center !important; justify-content: flex-start !important; gap: 8px !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; }
body.cmp #optpanel .musbar[hidden] { display: none !important; }
body.cmp #optpanel .musbar .mbvid { display: block !important; width: 112px !important; height: 63px !important; flex: none; }
body.cmp #optpanel .musbar .mbinfo { display: grid !important; flex: 1 1 140px; min-width: 0; }
body.cmp #optpanel .musbar .mbbtns { display: flex !important; flex: 1 1 100% !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: space-between !important; gap: 6px !important; }
body.cmp #optpanel .musbar .mc { display: grid !important; flex: 1 1 0 !important; width: auto !important; min-width: 56px !important; min-height: 56px !important; padding: 4px !important; }
body.cmp #optpanel .musbar .mc span { font-size: 12px !important; }
body.cmp #optpanel .musbar .mc-prev, body.cmp #optpanel .musbar .mc-back, body.cmp #optpanel .musbar .mc-fwd { display: none !important; }
body.optopen .jbox { z-index: 95 !important; }
@media (orientation: landscape) and (max-height: 520px) {
  .optcard { width: min(760px, 100%); }
  .optgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .opttile { flex-direction: column; justify-content: center; text-align: center; min-height: 84px; gap: 4px; font-size: 15px; }
  .optemo { font-size: 28px; }
}

/* ---------- 2. small screens: a tidy top bar, the field gets the room ---------- */
body.cmp { --mb: 0px; }
body.cmp .hud #btnMenu, body.cmp .hud #btnSound, body.cmp .hud #btnRead, body.cmp .hud #btnFix, body.cmp .hud #btnSong,
body.cmp .hud [data-act="teacher"], body.cmp .hud ol.stages, body.cmp .hud .brand { display: none !important; }
body.cmp:not([data-screen="home"]):not([data-screen="intro"]) .side-tab { display: none !important; }
body.cmp:not([data-screen="home"]) { --tab-w: 0px; }
body.cmp .musbar { display: none !important; }
body.cmp:not([data-screen="home"]) main { padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); }
body.cmp .jbox:not(.big) { z-index: 95; }

/* upright phones: one slim row (Home on the left; clock, lives, score and Options on the right) */
@media (max-width: 700px) and (orientation: portrait) {
  body.cmp .hud { position: relative !important; }
  body.cmp .hud-in { flex-wrap: nowrap !important; justify-content: space-between !important; gap: 6px !important; padding: 6px max(8px, env(safe-area-inset-right, 0px)) 6px max(8px, env(safe-area-inset-left, 0px)) !important; }
  body.cmp .stats { flex-wrap: nowrap !important; justify-content: flex-end !important; gap: 6px !important; margin-left: auto !important; width: auto !important; }
  body.cmp .hud .homebtn { min-width: 48px !important; width: 48px !important; min-height: 48px !important; padding: 0 !important; }
  body.cmp .stats .stat { min-height: 44px !important; padding: 2px 9px !important; font-size: 17px !important; flex: none !important; }
  body.cmp .stat b { font-size: 18px !important; }
  body.cmp .stat b svg, body.cmp .stat svg { width: 18px !important; height: 18px !important; }
}
@media (max-width: 360px) and (orientation: portrait) { body.cmp .optbtn .optlbl { display: none; } }

/* sideways phones: a slim left column (Home, clock, lives, score, Options); no music column on the right */
@media (orientation: landscape) and (max-height: 520px) {
  body.cmp[data-incab="1"], body.cmp.hasmbar[data-incab="1"] { --rrail: env(safe-area-inset-right, 0px); --rail: calc(70px + env(safe-area-inset-left, 0px)); --tab-w: 0px; }
  body.cmp:not([data-incab="1"]):not([data-screen="home"]) .hud-in { flex-wrap: nowrap !important; }
  body.cmp[data-incab="1"] .hud .homebtn, body.cmp[data-incab="1"] .hud .optbtn { width: 58px !important; min-width: 58px !important; height: 50px !important; min-height: 50px !important; padding: 0 !important; }
  body.cmp[data-incab="1"] .hud .optbtn { flex-direction: column; gap: 0; height: 58px !important; font-size: 11px; }
  body.cmp[data-incab="1"] .hud-in { justify-content: center !important; gap: 8px !important; }
  body.cmp[data-incab="1"] .stats .stat { width: 62px !important; min-height: 40px !important; }
  body.cmp[data-incab="1"] .stat b { font-size: 15px !important; }
  body.cmp[data-incab="1"] main.incab { padding-right: max(6px, env(safe-area-inset-right, 0px)) !important; padding-left: calc(var(--rail) + 6px) !important; }
}

/* ---------- 3. the fast arcade games fit ONE screen on phones (no scrolling, nothing cut off) ---------- */
@media (max-width: 700px) and (orientation: portrait) {
  body.cmp:is([data-screen="maze"], [data-screen="trot"], [data-screen="hunt"], [data-screen="slice"]) main.incab {
    height: calc(100svh - var(--hudh, 60px)) !important; min-height: 420px !important; overflow: hidden !important; padding-top: 6px !important; padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important; }
  body.cmp:is([data-screen="maze"], [data-screen="trot"], [data-screen="hunt"], [data-screen="slice"]) main.incab > .wrap {
    flex: 1 1 auto !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; padding: 8px 8px 8px !important; }
  body.cmp:is([data-screen="maze"], [data-screen="trot"], [data-screen="hunt"], [data-screen="slice"]) main.incab .lockhead { padding-top: 46px !important; gap: 4px 8px !important; }
  body.cmp[data-screen="slice"] main.incab .sfield { flex: 1 1 0 !important; height: auto !important; min-height: 260px !important; }
  body.cmp[data-screen="trot"] main.incab .trbox { flex: 1 1 0 !important; height: auto !important; min-height: 150px !important; }
}

/* ---------- 4. CORN MAZE: the maze is the star on every screen ---------- */
main.incab .wrap.maze { display: grid !important; grid-template-columns: minmax(0, 1fr) clamp(190px, 21vw, 340px); grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "maze head" "maze stats" "maze pad"; column-gap: clamp(10px, 1.4vw, 22px); row-gap: 10px; align-items: start; }
main.incab .wrap.maze .lockhead, main.incab .wrap.maze .mzsplit { display: contents !important; }
main.incab .wrap.maze .lh-t { grid-area: head; min-width: 0; }
main.incab .wrap.maze .lh-t h2 { font-size: clamp(17px, 1.7vw, 30px) !important; }
main.incab .wrap.maze .hstats { grid-area: stats; display: flex !important; flex-direction: column; align-items: stretch; gap: 8px; }
main.incab .wrap.maze .hstats .hchip { justify-content: space-between; display: flex; }
main.incab .wrap.maze .mzbox { grid-area: maze; width: 100% !important; height: 100% !important; min-height: 0 !important; align-self: stretch; }
main.incab .wrap.maze .dpad { grid-area: pad; position: static !important; opacity: 1 !important; margin: 0 auto !important; align-self: center; justify-self: center; --dp: clamp(58px, 5.4vw, 96px);
  display: grid !important; gap: 8px !important; grid-template-columns: repeat(3, var(--dp)) !important; grid-template-rows: repeat(3, var(--dp)) !important; }
main.incab .wrap.maze .dp { width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; font-size: calc(var(--dp) * .42) !important; border-radius: 18px !important;
  background: #2a1a10 !important; border: 3px solid #ffd27a !important; color: #fff !important; touch-action: manipulation; }
main.incab .wrap.maze .dp:active { background: var(--amber, #ffb238) !important; color: #2a1408 !important; }
main.incab .wrap.maze .dp.up { grid-column: 2; grid-row: 1; } main.incab .wrap.maze .dp.left { grid-column: 1; grid-row: 2; }
main.incab .wrap.maze .dp.right { grid-column: 3; grid-row: 2; } main.incab .wrap.maze .dp.down { grid-column: 2; grid-row: 3; }
main.incab .wrap.maze > p.tiny { display: none !important; }
/* upright screens: words on top, maze in the middle, cobs and arrows underneath */
@media (orientation: portrait) {
  main.incab .wrap.maze { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: auto minmax(0, 1fr) auto !important; grid-template-areas: "head head" "maze maze" "stats pad" !important; align-items: center; }
  main.incab .wrap.maze .lh-t { padding-top: 46px; }
  main.incab .wrap.maze .hstats { align-self: center; }
  main.incab .wrap.maze .dpad { --dp: clamp(58px, 9vw, 92px); grid-template-rows: repeat(2, var(--dp)) !important; gap: 6px !important; margin: 0 !important; }
  main.incab .wrap.maze .dp.down { grid-row: 2; }
}
/* sideways phones: a tighter side column so the maze gets the height */
@media (orientation: landscape) and (max-height: 520px) {
  main.incab .wrap.maze { grid-template-columns: minmax(0, 1fr) 176px !important; row-gap: 6px !important; padding-top: 24px !important; }
  main.incab .wrap.maze .lh-t h2 { font-size: 14px !important; }
  main.incab .wrap.maze .hstats { gap: 4px; }
  main.incab .wrap.maze .hstats .hchip { min-height: 30px !important; font-size: 13px !important; }
  main.incab .wrap.maze .dpad { --dp: 52px; gap: 5px !important; }
}

/* ---------- 5. TURKEY TROT: the question sits in the middle as a big sign; 5 second read time ---------- */
main.incab .wrap.trot .lockhead { justify-content: center; }
main.incab .wrap.trot .lh-t { flex: 1 1 320px; text-align: center; padding-inline: clamp(0px, 6vw, 120px); }
main.incab .wrap.trot #trAsk { display: inline-block; margin-top: 4px; padding: 6px 18px; border-radius: 16px; background: #fff6df; color: #2a1408; border: 3px solid #ffd27a; box-shadow: 0 4px 0 #120804;
  font-size: clamp(18px, 2.2vw, 40px) !important; line-height: 1.2; max-width: 100%; }
main.incab .wrap.trot .lanebtns { flex: none !important; }
.trhold { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; background: rgba(20, 10, 4, .45); pointer-events: none; text-align: center; padding: 8px; }
.trhold .trht { font: 400 clamp(16px, 3.6cqw, 34px) var(--f-display); color: #fff; background: rgba(20, 10, 4, .85); padding: 4px 14px; border-radius: 999px; border: 2px solid #ffd27a; }
.trhold .trhn { font: 400 clamp(54px, 14cqw, 150px)/1 var(--f-spook, var(--f-display)); color: #ffd23f; text-shadow: 0 5px 0 #7a3400, 0 0 24px rgba(0, 0, 0, .7); }
.trhold .trgo { pointer-events: auto; min-height: 52px; padding: 4px 22px; border-radius: 999px; border: 3px solid #fff; background: #4caf2a; color: #fff; font: 400 clamp(17px, 3cqw, 28px) var(--f-display); cursor: pointer; box-shadow: 0 5px 0 #23600f; }
@media (orientation: landscape) and (max-height: 520px) {
  main.incab .wrap.trot .lockhead { flex-wrap: nowrap !important; }
  main.incab .wrap.trot #trAsk { font-size: 16px !important; padding: 2px 12px; }
  main.incab .wrap.trot .lh-t .eyebrow { display: none; }
  .trhold { gap: 2px; } .trhold .trhn { font-size: 54px; } .trhold .trgo { min-height: 40px; }
}
@media (max-width: 700px) and (orientation: portrait) {
  main.incab .wrap.trot .lh-t { padding-inline: 0; flex-basis: 100%; }
  main.incab .wrap.trot .hstats { flex: 1 1 100% !important; justify-content: center; }
  main.incab .wrap.trot #trAsk { font-size: 18px !important; }
}

/* ---------- 6. MISSING ITEM HUNT: picture plus the WHOLE tally list (it scrolls on its own) ---------- */
main.incab .htally { display: flex !important; flex-direction: column; min-height: 0; overflow: hidden !important; }
main.incab .htally h3 { flex: none; }
main.incab .htally .hlist { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #ffd27a rgba(0, 0, 0, .3); align-content: start; }
main.incab .htally .hlist::-webkit-scrollbar { width: 8px; } main.incab .htally .hlist::-webkit-scrollbar-thumb { background: #ffd27a; border-radius: 8px; }
main.incab .hrow .tname { overflow-wrap: normal !important; word-break: normal !important; hyphens: manual !important; }
/* wide screens: list beside the picture, full height */
@media (min-aspect-ratio: 1/1) {
  main.incab .huntsplit { display: grid !important; grid-template-columns: minmax(0, 1fr) clamp(190px, 22vw, 340px) !important; grid-template-rows: minmax(0, 1fr) !important; align-items: stretch !important; }
  main.incab .htally { max-height: 100% !important; height: 100%; }
  main.incab .hlist { grid-template-columns: minmax(0, 1fr) !important; }
}
/* upright phones: picture on top, the whole list under it in 3 short columns */
@media (max-width: 700px) and (orientation: portrait) {
  body.cmp[data-screen="hunt"] main.incab .hintro { display: none !important; }
  body.cmp[data-screen="hunt"] main.incab .huntsplit { flex: 1 1 0 !important; min-height: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(170px, 1fr) minmax(150px, auto) !important; gap: 8px !important; }
  body.cmp[data-screen="hunt"] main.incab .hscroll { height: 100% !important; min-height: 0 !important; }
  body.cmp[data-screen="hunt"] main.incab .htally { max-height: 42svh !important; padding: 8px !important; }
  body.cmp[data-screen="hunt"] main.incab .htally h3 { font-size: 20px; margin-bottom: 4px; }
  body.cmp[data-screen="hunt"] main.incab .hlist { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 4px !important; }
  body.cmp[data-screen="hunt"] main.incab .hrow { grid-template-columns: 28px minmax(0, 1fr) !important; min-height: 44px; padding: 3px 4px !important; gap: 4px !important; }
  body.cmp[data-screen="hunt"] main.incab .hrow .tmini { width: 28px !important; height: 28px !important; }
  body.cmp[data-screen="hunt"] main.incab .hrow .tchk { display: none; }
  body.cmp[data-screen="hunt"] main.incab .hrow .tname { font-size: 13px !important; line-height: 1.12; }
}
@media (max-width: 360px) and (orientation: portrait) { body.cmp[data-screen="hunt"] main.incab .hlist { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* sideways phones: list beside the picture */
@media (orientation: landscape) and (max-height: 520px) {
  main.incab .huntsplit { grid-template-columns: minmax(0, 1fr) 190px !important; }
  main.incab .hintro { display: none !important; }
}

/* ---------- 7. NO SQUEEZED WORDS: answer panels stack when they are narrow (two-panel games) ---------- */
.bal .bpanel, .stk .spanel, .vnn .vpanel, .ovn .opanel { container-type: inline-size; }
.bal .bpanel *, .stk .spanel *, .vnn .vpanel *, .ovn .opanel * { overflow-wrap: normal !important; word-break: normal !important; hyphens: manual !important; }
@container (max-width: 430px) {
  .bal .bch, .stk .sbale, .vnn .vbtn, .ovn .opick { font-size: clamp(15px, 5.2cqi, 22px) !important; min-height: 48px !important; padding: 6px 10px !important; }
  .bal .beq { font-size: clamp(22px, 8.5cqi, 40px) !important; }
  .ovn .ometer { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ovn .om { font-size: clamp(12px, 4cqi, 16px) !important; }
  .ovn .ojar b, .ovn .ojar span { font-size: clamp(12px, 4.2cqi, 17px) !important; }
}
@container (max-width: 230px) {
  .ovn .ojars { grid-template-columns: minmax(0, 1fr) !important; }
  .bal .blegend, .ovn .ojimg { display: none; }
}
/* sideways phones and short screens: give the answer panel half the room and let it scroll */
@media (orientation: landscape) and (max-height: 520px) {
  main.incab .bal .bstage, main.incab .stk .sstage, main.incab .ovn .ostage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  main.incab .bpanel, main.incab .spanel, main.incab .vpanel, main.incab .opanel { overflow-y: auto !important; padding: 8px !important; gap: 6px !important; }
  main.incab .lockhead h2 { font-size: 15px !important; }
}

/* ---------- 8. HARVEST VENN: the baskets always show whole, and names never break mid-word ---------- */
.vnn .vlab { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; font-size: clamp(9px, 4.4cqw, 26px) !important; padding: .1em .45em !important; line-height: 1.2; }
.vnn .vchip { overflow-wrap: normal !important; word-break: normal !important; hyphens: manual !important; font-size: clamp(9px, 2.6cqw, 18px) !important; }
.vnn .vbox { min-height: 0; }
@media (min-aspect-ratio: 1/1) {
  main.incab .vnn .vstage { grid-template-columns: minmax(0, 1.55fr) minmax(220px, 1fr) !important; }
}
@media (orientation: landscape) and (max-height: 520px) {
  main.incab .vnn .vstage { grid-template-columns: minmax(0, 1.25fr) minmax(200px, 1fr) !important; }
  main.incab .vnn .vbtns { gap: 6px !important; }
}
/* upright: baskets on top, full width; answer buttons stacked under them */
@media (max-aspect-ratio: 1/1) {
  main.incab .vnn .vbox { min-height: min(62vw, 46svh) !important; }
}

/* ---------- 9. GAME MENU: every card and every Play button the same size, on every screen ---------- */
.cabs { margin-inline: auto; width: 100%; max-width: max(640px, min(100%, calc((100dvh - 300px) * 1.85))); align-items: stretch; }
.gcab { grid-template-rows: auto auto 1fr auto !important; height: 100%; }
.marq { display: grid !important; place-items: center; min-height: 2.5em; padding: 4px 8px !important; font-size: clamp(16px, 1.5vw, 24px) !important; line-height: 1.1 !important; overflow-wrap: normal; word-break: normal; }
.gscreen { aspect-ratio: 1 / 1 !important; } /* v34: the game art is square, so a square frame shows the WHOLE picture (4:3 chopped the tops and bottoms) */
.gscreen img:not(.stand) { object-fit: contain !important; }
.gplay { justify-self: stretch !important; margin: 0 12px; min-height: 52px; display: grid !important; place-items: center; padding: 4px 10px !important; font-size: clamp(18px, 1.6vw, 26px) !important; }
.gnum { top: -8px !important; left: -8px !important; z-index: 2; }
.gdone { top: -8px !important; right: -8px !important; z-index: 2; }
@media (max-width: 700px) and (orientation: portrait) {
  .cabs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; max-width: none; }
  .gblurb { display: none !important; }
  .marq { font-size: clamp(15px, 4.4vw, 19px) !important; margin: 8px 8px 0 !important; }
  .gscreen { margin: 0 8px !important; }
  .gplay { margin: 0 8px; min-height: 48px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .cabs { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; max-width: none; gap: 10px !important; }
  .gblurb { display: none !important; }
  .marq { font-size: 15px !important; }
  .gplay { min-height: 42px; font-size: 17px !important; }
}
/* projectors and big screens: bigger words, still all on one screen */
@media (min-width: 1600px) and (min-height: 900px) {
  .marq { font-size: clamp(22px, 1.4vw, 32px) !important; }
  .gplay { min-height: 64px; font-size: clamp(24px, 1.5vw, 34px) !important; }
}

/* ---------- 10. fixes found in testing ---------- */
/* the Venn box shares the name "vbox" with the video player box: drop the video's size limit so the baskets fill their side */
.vnn .vbox { max-width: none !important; aspect-ratio: auto !important; width: 100% !important; margin: 0 !important; background: linear-gradient(#bfe3ff, #f6e3b4 70%, #c9a24a) !important; }
/* the word "Options" shows on the button (the v22 rule hid every top bar label in games) */
body.cmp .hud .optbtn > .optlbl { display: inline !important; }
@media (max-width: 360px) and (orientation: portrait) { body.cmp .hud .optbtn > .optlbl { display: none !important; } }
@media (orientation: landscape) and (max-height: 520px) { body.cmp[data-incab="1"] .hud .optbtn > .optlbl { display: block !important; font-size: 11px; } }
/* upright phones: the game name is already in the yellow words, so the cabinet badge steps aside for the play field */
@media (max-width: 700px) and (orientation: portrait) { body.cmp[data-incab="1"] main.incab > .wrap::before { display: none !important; } }
/* hunt list on upright phones: smaller pictures so long names like Thermometer fit whole */
@media (max-width: 700px) and (orientation: portrait) {
  body.cmp[data-screen="hunt"] main.incab .hrow { grid-template-columns: 22px minmax(0, 1fr) !important; }
  body.cmp[data-screen="hunt"] main.incab .hrow .tmini { width: 22px !important; height: 22px !important; }
  body.cmp[data-screen="hunt"] main.incab .hrow .tmini .hemo { font-size: 18px !important; }
  body.cmp[data-screen="hunt"] main.incab .hrow .tname { font-size: 12.5px !important; letter-spacing: -.03em; }
}

/* answer grids: as many columns as fit with whole words (about 9 letters wide each), otherwise one per row */
.bal .bchoices, .stk .schoices { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5em), 1fr)) !important; }
/* a panel that scrolls must start at the top (centered content was cut off at the top) */
.bal .bpanel, .stk .spanel, .vnn .vpanel, .ovn .opanel { justify-content: safe center !important; }

/* Turkey Trot: the floating how-to line sat on the lane answers; it lives in Tips of Play */
main.incab .wrap.trot > p.tiny { display: none !important; }

/* Venn basket names: sized so the longest names (Prokaryote, Endothermic) fit whole */
.vnn .vlab { font-size: clamp(9px, 3.2cqw, 24px) !important; letter-spacing: -.02em; }

/* ---------- v34: TURKEY TROT sideways phones. The track shrinks so the 3 answer buttons ALWAYS show whole,
   even when the question wraps to 2 lines, and nothing hides under the iPhone's rounded bottom edge. ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  main.incab .wrap.trot { display: flex !important; flex-direction: column !important; min-height: 0 !important; padding-bottom: max(4px, env(safe-area-inset-bottom, 0px)) !important; }
  main.incab .wrap.trot .trbox { flex: 1 1 0 !important; height: auto !important; min-height: 0 !important; overflow: hidden !important; }
  main.incab .wrap.trot .trbox canvas { max-height: 100%; }
  main.incab .wrap.trot .lanebtns { flex: none !important; margin-top: 6px !important; }
  main.incab .wrap.trot .lanebtn { min-height: 44px !important; height: auto !important; }
  main.incab .wrap.trot #trAsk { line-height: 1.15; }
}
@media (orientation: landscape) and (max-height: 400px) {
  main.incab .wrap.trot .trhold { gap: 0 !important; padding: 2px !important; }
  main.incab .wrap.trot .trhold .trht { font-size: 14px !important; padding: 1px 10px !important; }
  main.incab .wrap.trot .trhold .trhn { font-size: 34px !important; }
  main.incab .wrap.trot .trhold .trgo { min-height: 34px !important; font-size: 15px !important; padding: 2px 16px !important; }
}
/* v34: lane answers never break inside a word; on narrow screens the number badge and gaps get smaller instead */
main.incab .wrap.trot .lanebtn .lt { overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; min-width: 0; }
main.incab .wrap.trot .lanebtn { container-type: inline-size; }
@media (orientation: landscape) and (max-height: 520px) {
  main.incab .wrap.trot .lanebtn { gap: 6px !important; padding: 4px 8px !important; }
  main.incab .wrap.trot .lanebtn .ln { width: 30px !important; height: 30px !important; }
  main.incab .wrap.trot .lanebtn .lt { font-size: clamp(12px, 9cqw, 20px) !important; line-height: 1.1; }
}

/* ---------- v35: Harvest Venn on short upright phones (iPhone SE, small Android) ----------
   Baskets get the height left over after the question card and 3 answer buttons, so everything stays on screen. */
@media (max-aspect-ratio: 1/1) and (max-height: 800px) and (max-width: 600px) {
  main.incab .vnn .vbox { min-height: clamp(130px, calc(100svh - 480px), 62vw) !important; }
  main.incab .vnn .vcard { min-height: 0 !important; }
  /* 2 rows: Only left | Only right, then Both full width (only when no word gets squished) */
  main.incab .vnn .vbtns { grid-template-columns: 1fr 1fr !important; }
  main.incab .vnn .vbtn[data-z="B"] { grid-column: 1 / -1; order: 3; }
  main.incab .vnn .vbtn[data-z="R"] { order: 2; }
  main.incab .vnn .vpanel { gap: 6px !important; padding: 6px 8px !important; }
  main.incab .vnn .vcard { padding: 6px 10px !important; gap: 8px !important; border-width: 3px !important; }
  main.incab .vnn .vcardart { width: 34px !important; height: 34px !important; }
  main.incab .vnn .vct { font-size: 16px !important; line-height: 1.15 !important; }
  main.incab .vnn .vbtns { gap: 6px !important; }
  main.incab .vnn .vbtn { min-height: 44px !important; padding: 5px 8px !important; font-size: 16px !important; border-width: 3px !important; }
  main.incab .vnn .vwhy { font-size: 14px !important; min-height: 0 !important; }
}
/* v35: side basket labels get more room ("Both" is short), so long words like Heterotroph show whole */
@media (max-aspect-ratio: 1/1) and (max-width: 600px) {
  .vnn .vlab.l { left: 1% !important; width: 36% !important; }
  .vnn .vlab.m { left: 38% !important; width: 24% !important; }
  .vnn .vlab.r { right: 1% !important; width: 36% !important; }
  /* labels may use 2 lines (split only at a space), never chopped with ... */
  main.incab .vnn .vlab, .vnn .vlab { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: normal !important; word-break: keep-all !important; font-size: clamp(9px, 4.1cqw, 13px) !important; line-height: 1.05 !important; padding: 2px 3px !important; letter-spacing: -.03em !important; }
}
/* v35: tiniest phones (about 568 to 600 tall) */
@media (max-aspect-ratio: 1/1) and (max-height: 600px) and (max-width: 600px) {
  main.incab .vnn .vbox { min-height: 112px !important; }
  main.incab .wrap.vnn .hstats .btn { min-height: 36px !important; padding: 4px 12px !important; }
  main.incab .vnn .vbtn { min-height: 40px !important; }
  main.incab .vnn .vct { font-size: 15px !important; }
  main.incab .vnn .vwhy:empty { display: none !important; }
}