/* Kwizillo landscape layer — the tablet turned on its side.

   A phone and an upright tablet play the tall frame (430 by 764). A tablet in
   landscape gets a frame of its own: 1180 by 820, filling the screen instead
   of showing a portrait card with blurred art around it. m1-runtime.js picks
   the frame and writes html[data-shape="wide"]; everything below only applies
   then, so the phone layout is never touched.

   The rule for every screen here is the same: the same parts, laid out side by
   side instead of stacked. Nothing is stretched, nothing is hidden. */

html[data-shape="wide"] .game-frame{width:1180px;height:820px;border-radius:40px}

/* ---- home: eight worlds in one grid, the games underneath ---- */
[data-shape="wide"] .home-ui{gap:14px;padding-inline:calc(3% + var(--sal)) calc(3% + var(--sar))}
[data-shape="wide"] .home-worlds{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
[data-shape="wide"] .home-games{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
[data-shape="wide"] .home-world-copy b{font-size:clamp(17px,1.6vw,24px)}

/* ---- world: the hero art has the room, the four topics sit in one row ---- */
[data-shape="wide"] .native-world-ui{gap:2%}
[data-shape="wide"] .world-topic-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
[data-shape="wide"] .native-world-head{padding-inline:4%}
/* Mysterie liggend: de plaat vult het kader zoals bij de andere werelden. Het
   eiland zit lager in deze plaat (13-55% van de hoogte), dus de uitsnede schuift
   omlaag tot het portaal onder de titel in beeld staat. */
[data-shape="wide"] .world-mysterie .native-world-hero img{object-position:center 17%}
[data-shape="wide"] .world-mix{margin-inline:auto;width:min(760px,100%)}

/* ---- quiz: question across the top, picture on the left, answers on the right ---- */
[data-shape="wide"] .quiz-card{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  column-gap:3.2%;row-gap:2.4%;padding:3.2% 3.4% 2.8%}
[data-shape="wide"] .quiz-card h1{grid-area:1/1/2/2;align-self:center;font-size:clamp(24px,2.5vw,36px)}
/* The picture keeps its own 16:9 shape and sits in the middle of its column,
   so it is never letterboxed into a portrait box. */
[data-shape="wide"] .quiz-card .quiz-art{grid-area:2/1/3/2;flex:none;width:100%;height:auto;aspect-ratio:16/9;align-self:center;min-height:0;max-height:100%}
[data-shape="wide"] .quiz-card .answers{grid-area:1/2/4/3;margin:0;grid-auto-rows:minmax(88px,1fr);align-content:stretch;gap:16px}
/* Terug, hint en "nog eens" staan onder de plaat, zodat de antwoorden de hele
   rechterkolom krijgen. */
[data-shape="wide"] .quiz-card .quiz-actions{grid-area:3/1/4/2;align-self:end}
[data-shape="wide"] .quiz-card .answer{font-size:clamp(15px,1.7vw,22px)!important}
[data-shape="wide"] .quiz-card .answer.long{font-size:clamp(13px,1.5vw,19px)!important}
[data-shape="wide"] .quiz-card .answer.xlong{font-size:clamp(12px,1.3vw,16px)!important}

/* ---- panels (collectie, prestaties, statistieken, profiel): wider lists ---- */
[data-shape="wide"] .panel-scroll{padding-inline:3%}
[data-shape="wide"] .world-progress-grid,
[data-shape="wide"] .achievement-grid,
[data-shape="wide"] .world-stat-list,
[data-shape="wide"] .game-stat-list{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Kaarten zijn plaatjes, geen regels tekst: op een breed scherm passen er vier
   naast elkaar zonder dat ze klein worden om te bekijken. */
[data-shape="wide"] .mascot-grid,
[data-shape="wide"] .card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
[data-shape="wide"] .stat-tiles,
[data-shape="wide"] .profile-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Eén kolom van gelijke breedte, gecentreerd. `width:100%` hoort erbij: een
   grid- of flexkind met `margin-inline:auto` krimpt anders naar zijn inhoud, en
   dan stond de ouderzone als een rommelige piramide op het scherm — elke kaart
   even breed als zijn eigen tekst. */
[data-shape="wide"] .setting-card,
[data-shape="wide"] .stat-card,
[data-shape="wide"] .summary-hero,
[data-shape="wide"] .progress-overall,
[data-shape="wide"] .share-3d,
[data-shape="wide"] .profile-hero,
[data-shape="wide"] .stats-hero3d,
[data-shape="wide"] .collection-tabs{width:100%;max-width:900px;margin-inline:auto}

/* ---- cards that float over a screen stay a card, not a banner ---- */
[data-shape="wide"] .result-v2-card{width:min(640px,80%);margin-inline:auto}
[data-shape="wide"] .feedback-card{width:min(660px,84%);margin-inline:auto}
[data-shape="wide"] .hint-card{width:min(700px,84%);margin-inline:auto}
[data-shape="wide"] .sound-settings-card{width:min(780px,90%);margin-inline:auto}
/* De korte popups van de spellen (goed/fout, uitleg) blijven een kaart en
   worden geen balk over de volle breedte van een tablet. */
[data-shape="wide"] .simple-modal-card{width:min(560px,80%);margin-inline:auto}
/* De voortgangsbalk werd op een tablet meer dan duizend pixels breed, en de
   klok stond dus helemaal rechts in het niets. Nu blijft de balk bij de vraag
   staan en is de klok wat groter, zodat je hem ziet aflopen. */
[data-shape="wide"] .quiz-progress,[data-shape="wide"] .memo-progress{width:100%;max-width:820px;margin-inline:auto}
[data-shape="wide"] .quiz-timer{width:56px;height:56px}
[data-shape="wide"] .quiz-timer::after{inset:8px}
[data-shape="wide"] .quiz-timer b{font-size:20px}
[data-shape="wide"] .onboarding-inner{max-width:760px;margin-inline:auto}

/* ---- mini-games ---- */
/* The memo board keeps its own column count (games-memo.js sets --cols, and the
   pairs depend on it); only the picker spreads out. */
[data-shape="wide"] .memo-pick-grid{grid-template-columns:repeat(4,minmax(0,1fr))}

/* The mini-games borrow the quiz card but fill it differently, so they say
   where their own parts go. Rekenen: the sum stands large in the left column,
   the feedback line under it. Wat ben ik?: Milo with his clues on the left,
   the four choices on the right. */
[data-shape="wide"] .math-card .math-sum{grid-area:1/1/3/2;align-self:center;justify-self:center;font-size:clamp(40px,4.4vw,72px)}
[data-shape="wide"] .math-card .math-feedback{grid-area:3/1/4/2;align-self:start;justify-self:center}
[data-shape="wide"] .math-card .quiz-actions{grid-area:3/1/4/2;align-self:end}
/* Drie dingen onder elkaar in de linkerkolom: de punten, de gids met zijn tips,
   en de knoppen. De punten stonden in dezelfde cel als de knoppenrij, en dan
   piepte de gele pil tussen "Een tip" en "Nog eens" door. */
[data-shape="wide"] .whoami-card .whoami-points{grid-area:1/1/2/2;align-self:start;justify-self:center}
[data-shape="wide"] .whoami-card .whoami-guide{grid-area:2/1/3/2;align-self:center}
[data-shape="wide"] .whoami-card .whoami-grid{grid-area:1/2/4/3;margin:0;align-content:stretch}
[data-shape="wide"] .whoami-card .quiz-actions{grid-area:3/1/4/2;align-self:end}
/* Fotozoom: de vierkante uitsnede vult de linkerkolom, de vier keuzes staan
   rechts. Zonder deze regels kreeg de foto alleen de hoogte die de staande
   opmaak hem gaf en bleef er links een half leeg vlak over. */
[data-shape="wide"] .fotozoom-card .fotozoom-row{grid-area:1/1/2/2;align-self:start;justify-self:center}
[data-shape="wide"] .fotozoom-card .fotozoom-stage{grid-area:2/1/3/2;align-self:center;justify-self:center;
  width:auto;height:100%;max-width:100%;max-height:100%;aspect-ratio:1;flex:none}
[data-shape="wide"] .fotozoom-card .fotozoom-answers{grid-area:1/2/4/3;margin:0;align-content:stretch}
[data-shape="wide"] .fotozoom-card .quiz-actions{grid-area:3/1/4/2;align-self:end}

/* Memo: a board as wide as the frame makes playing-card-shaped cards very flat,
   so the board keeps a width where the cards stay roughly square. */
[data-shape="wide"] .memo-board{max-width:860px;margin-inline:auto;width:100%}

/* The panel header (collectie, prestaties, statistieken) keeps its shape but
   gives the list more room on a screen that is wider than it is tall. */
[data-shape="wide"] .panel-head{padding-block:1.4% 1%}

/* ---- intro ----
   De openingsfilm is staand (720 × 1280). Staat er een liggende versie
   (assets/brand/intro-wide.mp4), dan speelt die en vult hij het frame. Is die
   er niet, dan wordt de staande film hier heel getoond in plaats van
   uitvergroot bijgesneden — scherp, met de wereldkunst onscherp erachter zodat
   de randen bij het spel horen. */
[data-shape="wide"] .motion.kwizillo-cinematic::before{
  content:"";position:absolute;inset:-5%;z-index:0;
  background-image:var(--stage-art);background-size:cover;background-position:center;
  filter:blur(28px) brightness(.4) saturate(1.1)}
[data-shape="wide"] .motion.kwizillo-cinematic .intro-main{position:relative;z-index:1;object-fit:contain}
/* Dezelfde film, onscherp en formaatvullend, vult de ruimte ernaast: het scherm
   is vol en de film zelf wordt niet uitvergroot. */
[data-shape="wide"] .motion.kwizillo-cinematic .intro-bg{
  display:block;position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;filter:blur(22px) brightness(.78) saturate(1.15);transform:scale(1.1)}
/* Een liggende film vult het frame wel: dan mag hij weer bijsnijden. */
[data-shape="wide"] .motion.kwizillo-cinematic.wide-film .intro-main{object-fit:cover}
[data-shape="wide"] .motion.kwizillo-cinematic.wide-film .intro-bg{display:none}
[data-shape="wide"] .motion.kwizillo-cinematic.wide-film::before{display:none}

/* ---- memo ----
   In het brede frame rekte het bord de kaarten tot platte rechthoeken: de
   platen (16:9) werden dan hard bijgesneden. Het bord krijgt nu de verhouding
   van zijn eigen raster, zodat de kaarten bijna vierkant blijven en de plaat de
   hele kaart vult. --cols en --rows staan op het bord zelf (games-memo.js). */
[data-shape="wide"] .memo-board{
  aspect-ratio:var(--cols) / var(--rows);
  width:auto;max-width:100%;height:100%;margin-inline:auto;align-self:center}
/* Kaarten en winkel op de iPad: drie naast elkaar, en nooit zo breed dat één
   kaart hoger wordt dan wat er tussen de tabs en de navigatie zichtbaar is.
   (100vh - 380px) is die zichtbare hoogte; 63/88 is de maat van een kaart, en
   een winkelvak is zijn plaat (4:5) plus naam en knop. */
[data-shape="wide"] .kcard-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:min(100%,calc((100vh - 380px) * 63 / 88 * 3 + 24px));margin-inline:auto}
[data-shape="wide"] .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:min(100%,calc((100vh - 550px) * .8 * 3 + 40px));margin-inline:auto}