/* Choice page, menu and the buttons at the bottom (docs/menu-herontwerp-2026-11-06.md). Loaded after styles.css.
   Made for a weak device: no backdrop blur and no animation in the menu, flat colours, one image per card (a small SVG). */

/* ---------- Choice page ---------- */
.start-panel{display:block;grid-template-columns:1fr;width:min(1120px,100%);max-height:calc(100dvh - 48px);overflow:auto}
.start-panel .start-art{display:none}
.start-panel .start-content{display:flex;flex-direction:column;align-items:stretch;gap:.9rem;padding:clamp(1rem,2.4vw,1.8rem)}
.start-panel .start-content h1{font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.08;letter-spacing:-.04em;margin:0}
.start-panel .start-intro{max-width:none;margin:0}
.entry-title-world{display:none}
.world-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.world-cards[hidden],.world-cards-error[hidden],#start-other[hidden]{display:none}
.world-cards-error{color:var(--amber)}
.world-card{position:relative;display:flex;flex-direction:column;gap:.35rem;min-width:0}
.world-open{position:relative;display:flex;flex-direction:column;flex:1;width:100%;padding:0;text-align:left;color:var(--ink);font:inherit;cursor:pointer;
  background:#c8efde0d;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.world-open:hover:not(:disabled){border-color:var(--world-accent,var(--mint));background:#c8efde1a}
.world-open:focus-visible{outline:3px solid var(--world-accent,var(--amber));outline-offset:2px}
.world-open:disabled{cursor:default}
.world-card[data-state=playing] .world-open{border-color:var(--world-accent,var(--mint));box-shadow:inset 0 0 0 2px var(--world-accent,var(--mint))}
.world-picture{display:block;aspect-ratio:2/1;overflow:hidden;background:#0d2a22}
.world-picture img{display:block;width:100%;height:100%;object-fit:cover}
.world-chip{position:absolute;top:.6rem;left:.6rem;padding:.15rem .6rem;border-radius:999px;font-size:.66rem;font-weight:800;letter-spacing:.02em;
  background:#0d241bd9;color:var(--ink);border:1px solid #ffffff33}
.world-card[data-state=continue] .world-chip,.world-card[data-state=playing] .world-chip{background:var(--world-accent,var(--mint));color:#10261c;border-color:transparent}
.world-title{display:block;padding:.85rem 1rem 0;font-size:1.05rem;line-height:1.2}
.world-tagline{display:block;padding:.1rem 1rem 0;font-size:.78rem;font-weight:700;color:var(--world-accent,var(--mint))}
.world-description{display:block;padding:.45rem 1rem 0;font-size:.76rem;line-height:1.45;color:var(--muted);flex:1}
.world-action{display:block;margin:.8rem 1rem 1rem;padding:.65rem 1rem;border-radius:12px;text-align:center;font-weight:800;font-size:.88rem;
  background:var(--world-accent,var(--mint));color:#10261c}
.world-open:disabled .world-action{background:#ffffff1f;color:var(--ink)}
/* "Nieuw beginnen…" is a small pill over the picture's top right corner: it adds nothing to the card's height. */
.world-new{position:absolute;top:.6rem;right:.6rem;min-height:0;padding:.18rem .65rem;border:1px solid #ffffff33;border-radius:999px;background:#0d241bd9;color:var(--ink);font-size:.66rem;font-weight:800;cursor:pointer}
.world-new:hover{background:#1c4a3ad9}
.world-new[hidden]{display:none}
.world-cards.is-compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
/* Four games: two by two, and all four side by side where the panel is wide enough. */
@media(min-width:1180px){.world-cards,.world-cards.is-compact{grid-template-columns:repeat(4,minmax(0,1fr))}}
.world-cards.is-compact .world-description{display:none}
.start-other{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:.5rem 1rem;padding-top:.9rem;border-top:1px solid var(--line)}
.start-other .world-edition-field{margin:0;min-width:0}
.start-other-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.start-other-notes{grid-column:1 / -1;margin:0;font-size:.68rem;line-height:1.4}
.start-other-actions .button{min-height:48px}
.start-other-actions .button[hidden]{display:none}
/* A direct link (?spel=) shows no chooser while it loads, like ?nieuw= does. */
html[data-entry-world] .start-art,html[data-entry-world] .start-title-default,
html[data-entry-world] .start-content>:not(.start-brand):not(#start-title):not(.entry-intro):not(#loading-panel){display:none!important}
html[data-entry-world] .start-panel{display:block;width:min(620px,100%)}
html[data-entry-world] .entry-title-world,html[data-entry-world] .entry-intro{display:block}
html[data-entry-world] .entry-intro{color:var(--muted);font-size:.95rem;max-width:42ch}
@media(max-width:860px){
  /* The picture is at the side here: the pill goes below the card instead. */
  .world-new{position:static;align-self:flex-end;min-height:36px;padding:.3rem .8rem;font-size:.74rem}
  .world-cards,.world-cards.is-compact{grid-template-columns:1fr}
  .world-open{display:grid;grid-template-columns:38% 1fr;grid-template-rows:auto auto 1fr auto}
  .world-picture{grid-row:1 / span 4;aspect-ratio:auto;min-height:100%}
  .world-title{padding-top:.7rem}
  .world-action{margin:.6rem 1rem .8rem}
  .world-cards.is-compact .world-open{grid-template-rows:auto auto auto}
}
@media(max-width:520px){
  /* A phone shows all three games at once: picture beside the name, no long text. */
  .world-open{grid-template-columns:34% 1fr;grid-template-rows:auto auto auto}
  .world-description{display:none}
  .world-title{padding:.7rem .8rem 0;font-size:.98rem}
  .world-tagline{padding:.1rem .8rem 0}
  .world-action{margin:.5rem .8rem .7rem;padding:.55rem .6rem;font-size:.82rem}
  .world-picture{grid-row:1 / span 3}
  .world-chip{font-size:.6rem;padding:.1rem .5rem}
  .start-other{grid-template-columns:1fr}
  .start-other-actions .button{flex:1 1 100%}
}

/* ---------- Menu ---------- */
/* Rhythm: every tile is the same 48 px high with the icon left of ONE line of title (the explanation is its tooltip), every group
   is a heading and a grid, and a row that is not full lets its tiles grow instead of leaving a hole. */
.pause-panel{width:min(880px,100%);gap:.85rem}
.pause-panel .modal-header h2{margin:.1rem 0 0}
.menu-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem 1.2rem;align-items:start}
.menu-group{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.menu-group-play{grid-column:1 / -1}
/* Mijn figuur (character and camera) and Hulp share the last row. */
.menu-group h3{margin:0;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.menu-tiles{--tile-cols:2;display:flex;flex-wrap:wrap;gap:.45rem}
.menu-group-play .menu-tiles{--tile-cols:4}
/* Five or six tiles (a world without a world map or play places) read best in three columns; seven in four. */
#pause-journey:has(#pause-world-map[hidden],#pause-brick-activities[hidden]){--tile-cols:3}
.pause-panel .journey-shortcuts{display:flex}
.menu-tiles>button,.menu-tiles>.menu-switch{flex:1 1 calc(100% / var(--tile-cols) - .45rem);min-width:140px;box-sizing:border-box;height:48px;min-height:48px;margin:0;padding:0 .75rem;
  display:flex;align-items:center;gap:.6rem;text-align:left;color:var(--ink);font:inherit;font-size:.82rem;background:#c8efde0d;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.menu-tiles>button[hidden]{display:none}
.menu-tiles>button:hover:not(:disabled),.menu-tiles>.menu-switch:hover{background:#c8efde1c;border-color:#b5edd451}
.menu-tiles>button:disabled{opacity:.5;cursor:default}
.menu-tiles>button>span{flex:0 0 1.5rem;color:var(--mint);font-size:1.15rem;line-height:1;text-align:center}
.menu-tiles>button>b,.menu-tiles>.menu-switch>b{flex:1 1 auto;min-width:0;font-weight:700;font-size:.82rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A second line would make some tiles taller than their neighbours: it lives in the tooltip (title) and stays in the page for the scripts. */
.menu-tiles>button>small{display:none}
/* styles.css gave the figure tile its own column layout (icon above title, a status line below): here it is a tile like the others. */
#pause-journey>#pause-figures{flex-direction:row;align-items:center;justify-content:flex-start;gap:.6rem;border-color:var(--line)}
.menu-tiles>button[aria-pressed=true]{border-color:var(--mint);background:#9ee3be1f}
.menu-tiles>.menu-switch input{flex:0 0 1.15rem;width:1.15rem;height:1.15rem;margin:0 .2rem;accent-color:var(--mint);cursor:pointer}
.menu-tiles>.menu-switch:focus-within{outline:3px solid var(--amber);outline-offset:2px}
.world-open:focus-visible,.menu-tiles>button:focus-visible,#resume-play:focus-visible,.menu-more>summary:focus-visible,.quality-row select:focus-visible,.pause-panel .close-button:focus-visible{outline:3px solid var(--world-accent,var(--amber));outline-offset:2px}
.menu-more>summary{cursor:pointer;color:var(--mint);font-size:.76rem;padding:.2rem 0;min-height:44px;display:flex;align-items:center}
.menu-more[open]>summary{margin-bottom:.35rem}
/* The quick quality choice: one line like a tile, the label left and the choice right. */
.pause-panel .quality-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;box-sizing:border-box;height:48px;margin:0;padding:0 .75rem;border:1px solid var(--line);border-radius:12px;background:#c8efde0d}
.pause-panel .quality-row>b{font-size:.82rem;font-weight:700}
.pause-panel .quality-row select{box-sizing:border-box;height:44px;min-height:44px;min-width:150px;max-width:55%;padding:0 .6rem;font-size:.82rem;border-radius:10px}
#resume-play{min-height:52px}
.pause-panel .close-button,.worlds-panel .close-button{min-width:44px;min-height:44px}
/* No blur behind menus: it costs a weak graphics chip every frame, and the game behind is covered anyway. */
body[data-overlay=start] .overlay-layer,body[data-overlay=pause] .overlay-layer,body[data-overlay=worlds] .overlay-layer,body[data-overlay=confirm] .overlay-layer{backdrop-filter:none;background:#0b2017c7}
.game-ui.is-menu-open .glass{backdrop-filter:none}
@media(max-width:760px){
  /* A phone: one column of groups, 48 px tiles (a finger needs 44) and tight gaps, so the whole menu is about one screen high. */
  .pause-panel{gap:.7rem}
  #resume-play{min-height:48px}
  .menu-groups{grid-template-columns:1fr;gap:.65rem}
  .menu-tiles{gap:.4rem}
  .menu-group-play .menu-tiles,#pause-journey:has(#pause-world-map[hidden],#pause-brick-activities[hidden]){--tile-cols:2}
  .menu-tiles>button,.menu-tiles>.menu-switch{min-width:130px}
}
@media(max-height:820px) and (min-width:761px){
  /* A laptop screen: a little less air so the whole menu stays in view. */
  .pause-panel{padding-block:1rem;gap:.7rem}
  .menu-groups{gap:.7rem 1.2rem}
}

/* ---------- Other world (switcher) ---------- */
.worlds-panel{width:min(980px,100%)}
.worlds-confirm{display:flex;flex-direction:column;gap:.5rem;padding:1rem;border-radius:14px;background:#ffd58a1a;border:1px solid #ffd58a66}
.worlds-confirm[hidden]{display:none}
.worlds-confirm .confirm-actions{display:flex;flex-wrap:wrap;gap:.6rem}

/* ---------- Top right: Menu, Quality, and the eye (clean screen) ---------- */
.topbar-actions #quality-toggle[aria-pressed=true]{border-color:var(--mint);background:#9ee3be1f}
body[data-free-mouse=true] .topbar-actions :is(#menu-toggle,#quality-toggle){box-shadow:0 0 0 2px #9ee3be88}
body[data-touch-controls=true] #quality-toggle{display:none}
/* A narrow window has no room for a ninth button: the menu has the same switch (Scherm > Kwaliteitsvenster). */
@media(max-width:760px){#quality-toggle{display:none}}
.topbar #hud-toggle[aria-pressed=true]{border-color:var(--mint)}
/* ---------- Clean screen (clean-screen.js) ---------- */
/* Every bar, panel, hint and message goes out of view; the aim (crosshair), the touch controls and the menus the player opened stay.
   Only the eye (#hud-toggle) is left, small and nearly transparent, at the place it had in the top bar. visibility keeps the layout,
   so the eye does not move; hidden things cannot be tabbed to or clicked. */
body[data-clean-screen=true] #game-ui>:not(.topbar,#crosshair,#touch-controls,#door-prompt){visibility:hidden;pointer-events:none}
body[data-clean-screen=true]:not([data-touch-controls=true]) #door-prompt{visibility:hidden;pointer-events:none}
body[data-clean-screen=true] #quality-controls{visibility:hidden;pointer-events:none}
body[data-clean-screen=true] .topbar{background:none;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none}
body[data-clean-screen=true] .topbar>:not(.topbar-actions){visibility:hidden}
body[data-clean-screen=true] .topbar-actions>:not(#hud-toggle){visibility:hidden}
body[data-clean-screen=true] .topbar #hud-toggle{pointer-events:auto;min-width:36px;width:36px;height:36px;min-height:36px;padding:0;gap:0;justify-content:center;
  background:transparent;border-color:transparent;box-shadow:none;opacity:.32;transition:opacity .15s}
/* In calm view the caption is already folded into a hover bubble (styles.css): only the plain bar needs it folded away here. */
body[data-clean-screen=true]:not([data-calm=true]) .topbar #hud-toggle :is(.hud-toggle-label,kbd){display:none}
body[data-clean-screen=true] .topbar #hud-toggle:is(:hover,:focus-visible){opacity:1;background:#172d2bcc}
body[data-clean-screen=true][data-input-mode=touch] .topbar #hud-toggle,body[data-clean-screen=true][data-touch-controls=true] .topbar #hud-toggle{width:44px;height:44px;min-width:44px;min-height:44px}
body[data-clean-screen=true] .topbar #hud-toggle:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.world-open,.menu-tiles>button,#hud-toggle{transition:none}}