/* Landscape screens (CrazyGames' desktop frame is about 821x462): the whole game fits the window, no page scroll.
   Left: coins/clock bar, then the board sized by the height that's left. Right: logo + sound/help, egg tray,
   buy buttons, growth guide, and Orders filling (and scrolling inside) the rest. 2026-10-26, CrazyGames quality review.
   Loaded last; the #app prefix and !important beat graphics.css / toy-box.css / compact.js, which lay these blocks
   out for tall pages (portrait phones and tablets keep those layouts). */
@media (orientation: landscape) and (min-width: 600px) {
  html, body { height: 100%; overflow: hidden !important; }
  #app#app {
    display: grid !important; max-width: none !important; width: 100% !important; height: 100dvh !important;
    margin: 0 !important; padding: 10px 12px !important; box-sizing: border-box; gap: 8px 14px !important; overflow: hidden;
    grid-template-columns: minmax(0, 1fr) clamp(240px, 30vw, 330px) !important;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto !important;
  }
  #app > .playfield { display: contents !important; }
  #app > .panel.top { grid-column: 1 !important; grid-row: 1 !important; margin: 0 !important; }
  #app .playfield > #board {
    grid-column: 1 !important; grid-row: 2 / 7 !important; align-self: center !important; justify-self: center;
    height: 100%; width: auto !important; max-width: 100%; max-height: 100%; aspect-ratio: 1.6; min-height: 0;
  }
  #app > .gamehead { grid-column: 2 !important; grid-row: 1 !important; margin: 0 !important; padding: 4px 6px !important; min-height: 0 !important; align-self: center; }
  #app > .gamehead h1 { margin: 0 !important; }
  #app > .gamehead .game-wordmark { height: clamp(34px, 9vh, 64px) !important; width: auto !important; }
  #app .playfield > .hatchery { grid-column: 2 !important; grid-row: 2 !important; margin: 0 !important; }
  #app .playfield > .shoprow { grid-column: 2 !important; grid-row: 3 !important; margin: 0 !important; }
  #app .playfield > .evolution { grid-column: 2 !important; grid-row: 4 !important; margin: 0 !important; }
  #app .playfield > #orderStrip { grid-column: 2 !important; grid-row: 5 !important; margin: 0 !important; align-self: stretch !important;
    min-height: 0 !important; height: auto !important; max-height: 100% !important; overflow-y: auto !important; }
  #app .playfield > #zoneGoal { grid-column: 2 !important; grid-row: 6 !important; margin: 0 !important; }
  #app .playfield > #threat { grid-column: 1 !important; grid-row: 6 !important; }
  #app > .upgraderow, #app > .dev, #app .playfield > .upgraderow, #app .board-heading { display: none !important; }
  /* the tray: 5 eggs in an even row that always fits the column (the top bar already shows the next-egg clock) */
  #app .hatchery .tray { display: block !important; min-height: 0 !important; }
  #app .hatchery .eggs { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px !important; }
  #app .hatchery .egg { width: auto !important; height: auto !important; flex: none !important; aspect-ratio: .8; min-width: 0; }
  #app .hatchery .egg img { width: 100% !important; height: 100% !important; object-fit: contain; }
  #app .hatchery .nextegg { display: none !important; }
}
/* short landscape screens: tighten the side column so the tray and buy buttons always show */
@media (orientation: landscape) and (min-width: 600px) and (max-height: 560px) {
  #app .playfield > .evolution { display: none !important; }
  #app > .panel.top { padding-top: 6px !important; padding-bottom: 6px !important; }
  #app .hatchery h2 { display: none !important; }
}
/* phones held sideways (about 375-430 px tall): a slim one-row top bar, a compact tray and buy button,
   so the board gets the height and Orders still has room. 2026-10-26 */
@media (orientation: landscape) and (min-width: 600px) and (max-height: 520px) {
  #app#app { padding: 6px 10px !important; gap: 6px 10px !important; }
  #app .playfield > #board { aspect-ratio: 1.52; }   /* 7x5 cells (1.15 wide) plus gaps and frame: the board never runs off the bottom */
  /* top bar: coins | zone chip | collection strip | egg clock, one row */
  #app > .panel.top { padding: 4px 10px !important; gap: 10px !important; align-items: center !important; min-height: 0 !important; }
  #app > .panel.top > div:first-child { display: grid !important; grid-template-columns: 22px auto auto !important; grid-template-rows: auto auto; column-gap: 8px !important; row-gap: 0 !important; align-items: center; }
  #app > .panel.top > div:first-child::before { grid-column: 1; grid-row: 1 / 3; width: 20px !important; height: 20px !important; }   /* the coin icon */
  #app > .panel.top #coins { grid-column: 2; grid-row: 1; font-size: 17px !important; line-height: 1.1 !important; }
  #app > .panel.top #rate { grid-column: 2; grid-row: 2; font-size: 11px !important; }
  #app > .panel.top .zchip { grid-column: 3; grid-row: 1 / 3; margin: 0 !important; padding: 3px 8px 3px 4px !important; min-height: 0 !important; gap: 6px !important; }
  #app > .panel.top .zchip .zone-location-art { width: 30px !important; height: 30px !important; }
  #app > .panel.top .zchip .zone-location-copy small { font-size: 9px !important; }
  #app > .panel.top .zchip .zone-location-copy strong { font-size: 14px !important; line-height: 1.1 !important; }
  #app > .panel.top .zchip svg { width: 16px !important; height: 16px !important; }
  #app > .panel.top .zone-collection { height: 40px !important; }
  #app > .panel.top .zone-collection img { height: 34px !important; max-height: 34px !important; }
  #app > .panel.top .rate { min-height: 0 !important; }
  #app > .panel.top .clock-caption { display: none !important; }
  #app > .gamehead .game-wordmark { height: 30px !important; }
  /* tray: less padding around the eggs */
  #app .playfield > .hatchery { padding: 6px !important; }
  #app .hatchery .eggs { padding: 0 !important; min-height: 0 !important; align-items: center; }
  /* buy button: one compact line, no big egg picture */
  #app .playfield > .shoprow { min-height: 0 !important; }
  #app .shoprow .egg-shop-button { min-height: 0 !important; height: auto !important; padding: 6px 10px !important; }
  #app .shoprow .egg-shop-button .shop-egg-picture, #app .shoprow .egg-shop-button .egg-shop-status { display: none !important; }
  #app .shoprow .egg-shop-button .egg-shop-copy { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 0 !important; }
  #app .shoprow .egg-shop-button .egg-shop-title { font-size: 15px !important; line-height: 1.1 !important; white-space: nowrap; }
  #app .shoprow .egg-shop-button .egg-price { min-height: 0 !important; padding: 2px 10px !important; font-size: 15px !important; }
}
/* popups on short landscape screens: a card with a picture (NEW!/LEGEND! reveals, rewards) goes side by side,
   picture left, words right, button across the bottom, so nothing hides below the button. Portrait is unchanged. */
@media (orientation: landscape) and (max-height: 560px) {
  #modal .card { max-height: 94vh !important; }
  #modal .card:has(> img) {
    display: grid !important; max-width: min(660px, 94vw) !important; grid-template-columns: minmax(130px, 36%) 1fr;
    column-gap: 18px; align-items: center; align-content: center; padding: 14px 18px !important;
  }
  #modal .card:has(> img) > * { grid-column: 2; margin-top: 2px !important; margin-bottom: 2px !important; }
  #modal .card:has(> img) > img { grid-column: 1; grid-row: 1 / span 8; max-height: min(230px, 60vh) !important; max-width: 100% !important; margin: 0 auto !important; }
  #modal .card:has(> img) > .tag { justify-self: center; }
  #modal .card:has(> img) > .btn { grid-column: 1 / -1; grid-row: 9; margin-top: 10px !important; }
  #modal .card:has(> img) h2 { font-size: 21px !important; }
  #modal .card:has(> img) p { font-size: 13.5px !important; line-height: 1.35 !important; }
  #modal .card img { max-height: 40vh; }
  /* How it works: the 10 rules in two columns on a wider card */
  #modal .card:has(> ol) { max-width: min(780px, 96vw) !important; padding: 12px 18px !important; }
  #modal .card > ol { column-count: 2; column-gap: 26px; font-size: 12.5px !important; line-height: 1.35 !important; margin: 4px 0 !important; }
  #modal .card > ol li { break-inside: avoid; margin-bottom: 3px; }
}
/* the narrowest phones sideways (iPhone SE 667x375): no room for the collection strip in the one-row bar */
@media (orientation: landscape) and (min-width: 600px) and (max-width: 780px) and (max-height: 520px) {
  #app > .panel.top #topGoal { display: none !important; }
  #app > .panel.top { flex-wrap: nowrap !important; justify-content: space-between !important; }
  #app > .panel.top > div:first-child { flex: 1 1 auto !important; min-width: 0 !important; }
  #app > .panel.top .zchip { min-width: 0 !important; max-width: 100%; }
  #app > .panel.top .rate { flex: 0 0 auto !important; }
  #app > .panel.top .zchip .zone-location-copy { max-width: 96px; min-width: 0; overflow: hidden; }
  #app > .panel.top .zchip .zone-location-copy strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #app > .panel.top #clockTime { font-size: 14px !important; }
  #app > .gamehead h1 { display: none !important; }   /* the small logo collided with the sound button */
  #app > .gamehead { min-height: 40px !important; align-items: center; justify-content: flex-end; }
}

/* sideways phones under 721 px wide: use the same 7x5 board arrangement as wide screens (graphics.css only turns it on at 721 px) */
@media (orientation: landscape) and (min-width: 600px) and (max-width: 720px) {
  #app .playfield > #board { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
  #board>.cell:nth-child(1){grid-column:1;grid-row:1}
  #board>.cell:nth-child(2){grid-column:2;grid-row:1}
  #board>.cell:nth-child(3){grid-column:3;grid-row:1}
  #board>.cell:nth-child(4){grid-column:4;grid-row:1}
  #board>.cell:nth-child(5){grid-column:6;grid-row:1}
  #board>.cell:nth-child(6){grid-column:5;grid-row:1}
  #board>.cell:nth-child(7){grid-column:1;grid-row:2}
  #board>.cell:nth-child(8){grid-column:2;grid-row:2}
  #board>.cell:nth-child(9){grid-column:3;grid-row:2}
  #board>.cell:nth-child(10){grid-column:7;grid-row:1}
  #board>.cell:nth-child(11){grid-column:4;grid-row:2}
  #board>.cell:nth-child(12){grid-column:5;grid-row:2}
  #board>.cell:nth-child(13){grid-column:1;grid-row:3}
  #board>.cell:nth-child(14){grid-column:2;grid-row:3}
  #board>.cell:nth-child(15){grid-column:6;grid-row:2}
  #board>.cell:nth-child(16){grid-column:3;grid-row:3}
  #board>.cell:nth-child(17){grid-column:4;grid-row:3}
  #board>.cell:nth-child(18){grid-column:5;grid-row:3}
  #board>.cell:nth-child(19){grid-column:1;grid-row:4}
  #board>.cell:nth-child(20){grid-column:7;grid-row:2}
  #board>.cell:nth-child(21){grid-column:2;grid-row:4}
  #board>.cell:nth-child(22){grid-column:3;grid-row:4}
  #board>.cell:nth-child(23){grid-column:4;grid-row:4}
  #board>.cell:nth-child(24){grid-column:5;grid-row:4}
  #board>.cell:nth-child(25){grid-column:6;grid-row:3}
  #board>.cell:nth-child(26){grid-column:7;grid-row:3}
  #board>.cell:nth-child(27){grid-column:6;grid-row:4}
  #board>.cell:nth-child(28){grid-column:7;grid-row:4}
  #board>.cell:nth-child(29){grid-column:1;grid-row:5}
  #board>.cell:nth-child(30){grid-column:2;grid-row:5}
  #board>.cell:nth-child(31){grid-column:3;grid-row:5}
  #board>.cell:nth-child(32){grid-column:4;grid-row:5}
  #board>.cell:nth-child(33){grid-column:5;grid-row:5}
  #board>.cell:nth-child(34){grid-column:6;grid-row:5}
  #board>.cell:nth-child(35){grid-column:7;grid-row:5}
  #app > .gamehead { min-height: 40px !important; align-items: center; justify-content: flex-end; }
}

/* Two egg shops (once the zone's second egg unlocks): 2026-10-26.
   Landscape: the Buy buttons stack as compact rows (small egg, name, price) in the right column.
   Portrait: they stay side by side but shrink (smaller egg, name on two short lines, no status line). */
@media (orientation: landscape) and (min-width: 600px) {
  #app .playfield > .shoprow { flex-direction: column !important; align-items: stretch !important; gap: 6px !important; }
  #app .shoprow .egg-shop-button { width: 100% !important; flex: none !important; min-height: 0 !important; height: auto !important; padding: 6px 10px !important; gap: 8px !important; }
  #app .shoprow .egg-shop-button .shop-egg-picture { width: 34px !important; height: auto !important; max-height: 42px !important; flex: none; }
  #app .shoprow .egg-shop-button .egg-shop-status { display: none !important; }
  #app .shoprow .egg-shop-button .egg-shop-copy { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; min-height: 0 !important; }
  #app .shoprow .egg-shop-button .egg-shop-title { font-size: 15px !important; line-height: 1.1 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  #app .shoprow .egg-shop-button .egg-price { flex: none; min-height: 0 !important; padding: 2px 10px !important; font-size: 15px !important; }
}
@media (orientation: portrait) {
  #app .shoprow:not(:has(#buyShark[style*="none"])) { gap: 8px !important; }
  #app .shoprow:not(:has(#buyShark[style*="none"])) .egg-shop-button { flex: 1 1 0 !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; padding: 8px 8px !important; gap: 6px !important; }
  #app .shoprow:not(:has(#buyShark[style*="none"])) .shop-egg-picture { width: 40px !important; height: auto !important; max-height: 54px !important; flex: none; }
  #app .shoprow:not(:has(#buyShark[style*="none"])) .egg-shop-status { display: none !important; }
  #app .shoprow:not(:has(#buyShark[style*="none"])) .egg-shop-copy { min-width: 0; gap: 4px !important; align-items: center; }
  #app .shoprow:not(:has(#buyShark[style*="none"])) .egg-shop-title { font-size: 14px !important; line-height: 1.15 !important; text-align: center; }
  #app .shoprow:not(:has(#buyShark[style*="none"])) .egg-price { min-height: 0 !important; padding: 2px 8px !important; font-size: 14px !important; }
  /* the tray's "next egg" label fits inside its box */
  #app .hatchery .tray { gap: 6px !important; }
  #app .hatchery .nextegg { flex: 0 0 54px !important; width: 54px !important; font-size: 9.5px !important; overflow: hidden; }
}

/* Phones held upright: a compact top bar (coins + zone + egg clock on one row, a short collection strip under it),
   a tighter tray and slightly shorter board squares, so the Buy buttons fit on screen. 2026-10-26 */
@media (orientation: portrait) and (max-width: 600px) {
  #app > .panel.top { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto;
    align-items: center; gap: 4px 8px !important; padding: 8px 10px !important; min-height: 0 !important; }
  #app > .panel.top > div:first-child { grid-column: 1; grid-row: 1; display: grid !important; grid-template-columns: 20px auto minmax(0, 1fr) !important;
    grid-template-rows: auto auto; column-gap: 7px !important; row-gap: 0 !important; align-items: center; min-width: 0; }
  #app > .panel.top > div:first-child::before { grid-column: 1; grid-row: 1 / 3; width: 20px !important; height: 20px !important; }
  #app > .panel.top #coins { grid-column: 2; grid-row: 1; font-size: 17px !important; line-height: 1.1 !important; }
  #app > .panel.top #rate { grid-column: 2; grid-row: 2; font-size: 10.5px !important; white-space: nowrap; }
  #app > .panel.top .zchip { grid-column: 3; grid-row: 1 / 3; margin: 0 !important; padding: 3px 6px 3px 3px !important; min-height: 0 !important; gap: 5px !important; min-width: 0; justify-self: start; max-width: 100%; }
  #app > .panel.top .zchip .zone-location-art { width: 28px !important; height: 28px !important; }
  #app > .panel.top .zchip .zone-location-copy { min-width: 0; overflow: hidden; }
  #app > .panel.top .zchip .zone-location-copy small { font-size: 8.5px !important; }
  #app > .panel.top .zchip .zone-location-copy strong { font-size: 13px !important; line-height: 1.1 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #app > .panel.top .zchip svg { width: 15px !important; height: 15px !important; flex: none; }
  #app > .panel.top .rate { grid-column: 2; grid-row: 1; min-height: 0 !important; margin: 0 !important; }
  #app > .panel.top .rate .clock-caption { display: none !important; }
  #app > .panel.top .rate .egg-clock { width: 26px !important; height: 26px !important; }
  #app > .panel.top #topGoal { grid-column: 1 / -1; grid-row: 2; margin: 0 !important; }
  #app > .panel.top .zone-collection { height: 34px !important; }
  #app > .panel.top .zone-collection img { height: 30px !important; max-height: 30px !important; }
  #app .playfield > .hatchery { padding: 6px 8px !important; }
  #app .hatchery .tray { min-height: 0 !important; }
  #app #board .cell { aspect-ratio: 1.22 !important; }
}
/* short phones held upright (iPhone SE 375x667): flatter board squares so the Buy buttons still fit */
@media (orientation: portrait) and (max-width: 600px) and (max-height: 700px) {
  #app #board .cell { aspect-ratio: 1.5 !important; }
}
@media (orientation: portrait) and (max-width: 600px) {
  #app .hatchery .nextegg { display: none !important; }   /* the top bar's egg clock already shows this */
}

/* ===== Landscape, 600 px and wider (owner 2026-10-26; was 760 until 2026-10-28, which left sideways phones under 760 px with a tall tray and no Orders): board on the left (7x5), and one right column with the
   egg tray, the Buy buttons, then all 3 Orders side by side as compact cards. ===== */
@media (orientation: landscape) and (min-width: 600px) {
  #app#app { grid-template-columns: minmax(0, 1fr) clamp(280px, 36vw, 400px) !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important; }
  #app .playfield > .hatchery { grid-row: 2 !important; padding: 6px 8px !important; }
  #app .hatchery .egg { aspect-ratio: auto !important; height: clamp(40px, 9vh, 64px) !important; }
  #app .playfield > .shoprow { grid-row: 3 !important; }
  #app .playfield > .evolution { display: none !important; }
  #app .playfield > #orderStrip { grid-column: 2 !important; grid-row: 4 !important; align-self: stretch !important;
    min-height: 0 !important; max-height: none !important; overflow: hidden !important; padding: 6px 8px !important; display: flex !important; flex-direction: column; }
  #app .playfield > #zoneGoal { grid-column: 2 !important; grid-row: 5 !important; }
  /* Orders: a row of 3 compact cards that fill the space left under the Buy buttons */
  #app #orderStrip .otitle { font-size: 15px !important; margin: 0 0 4px !important; line-height: 1.1 !important; }
  #app #orderStrip .otitle small { display: none !important; }
  #app #orderStrip .orow { flex: 1; min-height: 0; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; overflow: visible !important; }
  #app #orderStrip .ocard { display: flex !important; flex-direction: column; align-items: center; justify-content: space-between; gap: 2px !important;
    width: auto !important; min-width: 0 !important; min-height: 0 !important; height: 100%; padding: 4px 4px 5px !important; position: relative; overflow: hidden; }
  #app #orderStrip .ohead { width: 100%; display: flex !important; align-items: center; justify-content: space-between; gap: 3px; min-height: 0; }
  #app #orderStrip .ohead b { display: none !important; }
  #app #orderStrip .ohead .customer-face, #app #orderStrip .ohead > span:first-child { font-size: 16px !important; width: 22px !important; height: 22px !important; flex: none; }
  #app #orderStrip .ohead img { width: 22px !important; height: 22px !important; }
  #app #orderStrip .oskip { width: 20px !important; height: 20px !important; font-size: 13px !important; position: static !important; flex: none; }
  #app #orderStrip .oslots { display: flex !important; justify-content: center; gap: 3px !important; min-height: 0 !important; flex: 1 1 auto; align-items: center; }
  #app #orderStrip .oslot { min-height: 0 !important; padding: 2px 3px !important; display: flex !important; flex-direction: column; align-items: center; }
  #app #orderStrip .oportrait { position: relative; }
  #app #orderStrip .oportrait img { height: clamp(28px, 8vh, 56px) !important; }
  #app #orderStrip .ostage { font-size: 9.5px !important; line-height: 1 !important; }
  #app #orderStrip .oquantity, #app #orderStrip .odrop, #app #orderStrip .owait, #app #orderStrip p { display: none !important; }
  #app #orderStrip .oreward { font-size: 11px !important; margin: 0 !important; text-align: center; white-space: nowrap; }
  #app #orderStrip .oreward small { display: none !important; }
  #app #orderStrip .odeliver, #app #orderStrip .oclear { width: 100%; min-height: 24px !important; font-size: 11px !important; padding: 2px !important; }
}

/* landscape, short screens: a slim egg tray so the 3 Orders cards get the height (owner 2026-10-26) */
@media (orientation: landscape) and (min-width: 600px) and (max-height: 520px) {
  #app .playfield > .hatchery { height: auto !important; min-height: 0 !important; padding: 4px 8px !important; }
  #app .hatchery .tray, #app .hatchery .eggs { height: auto !important; min-height: 0 !important; padding: 0 !important; }
  #app .hatchery .egg { height: 40px !important; }
}
/* tall screens: order cards sit at the top of their area instead of stretching */
@media (orientation: landscape) and (min-width: 600px) and (min-height: 521px) {
  #app #orderStrip .orow { align-content: start; }
  #app #orderStrip .ocard { height: auto !important; min-height: 150px !important; }
}
/* landscape order cards: the count sits under the character picture, not over its face (owner 2026-10-26) */
@media (orientation: landscape) and (min-width: 600px) {
  #app #orderStrip .oportrait { display: flex !important; flex-direction: column; align-items: center; gap: 2px; }
  #app #orderStrip .oportrait .ocount { position: static !important; transform: none !important; margin: 0 !important;
    min-width: 0 !important; padding: 0 7px !important; font-size: 10px !important; line-height: 15px !important; }
}
/* the shortest sideways phones (about 270-340 px tall, e.g. a big-text phone setting, 2026-10-28): an even slimmer tray
   and Buy button and no "Orders" heading, so the 3 order cards keep room for the picture, count, reward and button */
@media (orientation: landscape) and (min-width: 600px) and (max-height: 340px) {
  #app#app { gap: 4px 10px !important; }
  #app .playfield > .hatchery { padding: 3px 6px !important; }
  #app .hatchery .egg { height: 32px !important; }
  #app .shoprow .egg-shop-button { padding: 3px 10px !important; }
  #app .shoprow .egg-shop-button .shop-egg-picture { max-height: 28px !important; width: 26px !important; }
  #app .playfield > #orderStrip { padding: 4px 6px !important; }
  #app #orderStrip .otitle { display: none !important; }
  #app #orderStrip .ocard { padding: 3px 3px 4px !important; }
  #app #orderStrip .oslot { padding: 0 2px !important; }
  #app #orderStrip .oportrait img { height: clamp(24px, 10vh, 40px) !important; }
  #app #orderStrip .odeliver, #app #orderStrip .oclear { min-height: 20px !important; }
}
@media (orientation: landscape) and (min-width: 600px) and (max-height: 290px) {
  #app #orderStrip .ostage { display: none !important; }   /* "Baby" etc.: the picture already shows the stage */
}