/* Layout changes asked by Heike after testing on a tablet (15 Oct 2026). Loaded after the game's own
   journey.css (via head.html), outside Kai's files so a new upload keeps them; Kai can fold them into
   styles/*.css and then this file can go. "html body" only lifts these rules above the game's own. */

/* "tap to read on" and counters like "0 of 4 opened" line up with the text, on every screen */
html body .tapon { margin: 6px 0 0; align-self: flex-start; justify-self: start; }
html body .count { text-align: left; }

/* tablet and desktop, landscape (the card layout itself now lives in the game: journey/styles/layout.css, 16 Oct 2026) */
@media (min-width: 900px) and (orientation: landscape) {
  /* the card's height and width now live in the game: journey/styles/layout.css (16 Oct 2026) */
  /* the points badge sits down on the line of the colour legend */
  html body .xp-big { bottom: calc(8px + env(safe-area-inset-bottom)); }
}

/* every screen: while the main button waits (before an answer) it still tells you what to do,
   "Choose an answer", "Turn every card", so it must be readable: a gold outline with gold text,
   instead of the whole button faded to 30%. Contrast #2FAFA7 on #F2E8D5 ≈ 10:1. */
html body .pbar .go[disabled] { opacity: 1; background: transparent; color: var(--gold-light); box-shadow: inset 0 0 0 1.5px rgba(31,122,115,.55); }
/* the mission preview's close button: a comfortable finger size */
html body .m-x { width: 40px; height: 40px; }

/* ================================================================ phone and upright tablet: the honeycomb in the middle
   (Heike, 15 Oct 2026: "the honeycomb in the center, everything else to the minimum").
   Top: the bar with the week as a small menu (acct.js adds the chip). Then one title line, the honeycomb
   taking all the room, and under it one slim strip: a small progress crystal + "1 of 19", and two small
   pills, Homework and Templates. Sideways tablets and desktops keep their own layout. */
/* the four weeks live behind a small chip in the bar ("Week 1 · The Crystal ▾") on every screen, so the map gets the room
   (desktop too since 16 Oct 2026, Heike: "expandable menu so we have more space for the content") */
html body .week-chip { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; min-width: 0; max-width: 62vw; height: 36px; padding: 0 12px;
  border-radius: 999px; border: 1px solid rgba(31,122,115,.45); background: var(--panel); color: var(--ink); font: 500 15px var(--sans); }
html body .week-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .week-chip b { color: var(--gold); font-weight: 600; flex: 0 0 auto; }
html body .week-chip svg { flex: 0 0 auto; transition: transform .25s; }
body.weeks-open .week-chip svg { transform: rotate(180deg); }
html body .bar .brand { flex: 0 0 auto; margin-right: 0; }
html body .bar .brand + .week-chip { margin-left: 16px; }
html body .worlds { display: none; }
body.weeks-open main.wrap .worlds { display: flex; flex-direction: column; gap: 8px; position: fixed; top: 60px; left: clamp(12px, var(--chip-x, 12px), calc(100vw - 432px)); width: min(420px, calc(100vw - 24px));
  z-index: 60; margin: 0; padding: 12px; border: 1px solid rgba(31,122,115,.35); border-radius: 18px; background: var(--bg-2); box-shadow: 0 24px 60px rgba(0,0,0,.6); }
body.weeks-open main.wrap .worlds::before { display: none; }
body.weeks-open main.wrap .world { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; align-items: center; width: auto; text-align: left; padding: 10px 12px; font-size: 13px; }
body.weeks-open main.wrap .world .wn { display: grid; grid-row: 1 / 3; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid currentColor; font: 500 16px var(--serif); font-style: normal; }
body.weeks-open main.wrap .world b { font-size: 19px; white-space: normal; }
body.weeks-open main.wrap .world > b, body.weeks-open main.wrap .world > span:not(.wc) { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
html body .wk-toggle { display: none; }
/* tablets and desktops, sideways: the four weeks stay a column on the left, which folds (Heike, 16 Oct 2026:
   "just the week 1 2 3 4 as an expandable menu"). Folded = a slim strip of numbers and progress crystals,
   open = the full names and dates; the « / » button at its top switches, and the choice is remembered (acct.js). */
@media (min-width: 900px) and (orientation: landscape) {
  html body .week-chip { display: none; }
  html body .bar .brand { flex: 1; }
  html body .worlds::before { display: none; }
  html body .worlds, body.weeks-open main.wrap .worlds { display: flex; position: static; width: auto; box-shadow: none; background: none; border-radius: 0;
    border: 0; border-right: 1px solid rgba(23,26,31,.08); padding: 18px 22px 18px 0; z-index: auto; }
  html body main.wrap { grid-template-columns: 230px minmax(280px, 1fr) minmax(0, 1.7fr); column-gap: 36px; }
  html body .w-info { grid-column: 2; grid-row: 1; }
  html body .comb { grid-column: 3; grid-row: 1; }
  html body .home-foot { grid-column: 2 / 4; }
  html body .wk-toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 36px; margin: 0 0 6px;
    padding: 0 12px; border-radius: 999px; border: 1px solid rgba(31,122,115,.35); background: var(--panel); color: var(--ink-2); font: 500 13px var(--sans); }
  html body .wk-toggle:hover { border-color: var(--gold); color: var(--ink); }
  html body .wk-toggle svg { width: 16px; height: 16px; transition: transform .25s; }
  /* folded */
  body.weeks-slim main.wrap { grid-template-columns: 58px minmax(280px, 1fr) minmax(0, 1.9fr); column-gap: 30px; }
  body.weeks-slim .wk-toggle { width: 44px; padding: 0; justify-content: center; }
  body.weeks-slim .wk-toggle span { display: none; }
  body.weeks-slim .wk-toggle svg { transform: rotate(180deg); }
  body.weeks-slim main.wrap .worlds { padding: 12px 12px 12px 0; gap: 12px; }
  body.weeks-slim .wk-toggle { align-self: center; }
  body.weeks-slim main.wrap .worlds::before { display: none; }
  body.weeks-slim main.wrap .world { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 56px; padding: 10px 0; }
  body.weeks-slim main.wrap .world > b, body.weeks-slim main.wrap .world > span:not(.wc) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.weeks-slim main.wrap .world .wc { width: 18px; }
  body.weeks-slim main.wrap .world .wc svg { width: 18px; height: 42px; }
}
/* the homework hexagons are marked by their gold outline (and the key says so): no extra "Homework" tag on them */
html body .cell .musttag { display: none; }
@media (max-width: 599px), (max-width: 899px) and (min-width: 600px), (min-width: 600px) and (orientation: portrait) {

  /* one column: title, honeycomb, then the slim strip */
  html body main.wrap { padding-top: 6px; justify-content: center; }
  html body .w-info { display: contents; }
  html body #w-kicker, html body #w-time { display: none; }
  /* the world's intro, its one big question, stays on phones too (Heike, 2 Nov 2026) */
  /* #w-lead: no longer shown, the world text is the opening card (2 Nov 2026) */
  html body #w-title { order: 1; font-size: clamp(24px, 3.4vh, 34px); margin: 2px 0 4px; }
  /* a box shaped like the honeycomb (about 1 : 1.1), so it sits in the middle instead of at the top of a tall box */
  html body .comb { order: 2; flex: 0 1 auto; width: 100%; aspect-ratio: 1 / 1.12; min-height: 0; }
  html body .w-progress { order: 3; display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; }
  html body .w-progress .w-crystal { flex: 0 0 96px; }
  html body .w-progress .w-crystal svg { width: 96px; height: auto; }
  html body .w-progress .pr-text { margin: 0; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body .w-progress .pr-text b { font-size: 12.5px; }
  html body .hw-row { order: 4; margin: 2px 96px 2px 0; gap: 8px; }
  html body .hw-row .hw-btn { flex: 0 1 auto; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; height: 38px; border-radius: 999px; box-shadow: none; }
  html body .hw-row .hw-btn span { font-size: 16px; }
  html body .hw-row .hw-btn b { font-size: 14px; }
  html body .hw-row .hw-btn b { white-space: nowrap; }
  html body .hw-row .hw-btn small { font-size: 12px; opacity: .8; white-space: nowrap; }
  /* Templates as a round download icon (the word stays for screen readers and as the tip) */
  html body .hw-row .hw-dl { flex: 0 0 38px; width: 38px; height: 38px; padding: 0; border-radius: 50%; font-size: 0; display: inline-grid; place-items: center; }
  html body .hw-row .hw-dl .ic, html body .hw-row .hw-dl svg { width: 18px; height: 18px; }
  html body .soon { order: 5; margin: 4px 96px 0 0; padding: 6px 10px; font-size: 12.5px; }
  html body .home-foot { order: 6; padding: 6px 96px 0 0; }
  html body .home-foot .types { gap: 2px 12px; font-size: 11.5px; }
}

/* phones only (Heike, 15 Oct: progress and title up under the bar, no legend, the honeycomb gets the room;
   Homework and Templates as two clean tiles bottom left in the same style as the points badge). */
@media (max-width: 599px), (max-width: 899px) and (min-width: 600px), (min-width: 600px) and (orientation: portrait) {
  html body main.wrap { justify-content: flex-start; padding: 6px 10px 88px; }
  /* a little air under the bar and around the title (Heike, 17 Oct 2026: "very high up, a bit of spacing") */
  html body .w-progress { order: 0; margin: 12px 0 0; }
  html body #w-title { margin: 18px 0 10px; }
  /* the honeycomb sits in the middle of all the room that is left */
  html body .comb { margin-block: auto; }
  html body .home-foot { display: none; }
  html body .soon { order: 4; margin: 6px 0 0; }
  /* bottom left: two tiles like the points badge (same corner radius, glass, gold line), a small caps label each */
  html body .hw-row { position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30; margin: 0; gap: 8px; align-items: flex-end; }
  html body .hw-row .hw-btn, html body .hw-row .hw-dl { flex: 0 0 auto; box-sizing: border-box; width: 84px; height: 66px; padding: 0; margin: 0; line-height: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    border-radius: 20px; border: 1px solid rgba(31,122,115,.55); background: rgba(250,245,236,.94); backdrop-filter: blur(8px);
    box-shadow: 0 10px 28px rgba(23,26,31,.14); color: var(--gold); font-size: 0; text-decoration: none; }
  html body .hw-row .hw-btn > b, html body .hw-row .hw-btn > small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html body .hw-row .hw-btn > span, html body .hw-row .hw-dl > i { font-size: 0; line-height: 0; display: block; height: 22px; }
  html body .hw-row .hw-btn .ic, html body .hw-row .hw-btn svg, html body .hw-row .hw-dl .ic, html body .hw-row .hw-dl svg { width: 22px; height: 22px; color: var(--gold); }
  html body .hw-row .hw-btn::after, html body .hw-row .hw-dl::after { font: 500 9.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
  html body .hw-row .hw-btn::after { content: 'Homework'; }
  html body .hw-row .hw-dl::after { content: 'Templates'; }
  html body .hw-row .hw-dl.hw-sl::after { content: 'Slides'; }
  /* homework done: the game's green, quietly */
  html body .hw-row .hw-btn.done { border-color: var(--green); }
  html body .hw-row .hw-btn.done .ic, html body .hw-row .hw-btn.done svg { color: #1F7A73; }
  body:has(.player.open) .hw-row, body:has(.shelf.open) .hw-row, body:has(section.cover) .hw-row, body.weeks-open .hw-row { display: none; }
}

/* ================================================================ messages never over the picture (Heike, 15 Oct:
   "we tried to click and it was in the way"). The game puts a message about a picture into the picture's lower
   third (.toast.in-pic); here it goes where messages on cards without a picture already go: the top, beside the dots. */
/* 16 Oct 2026, later (Heike): the message sits inside the picture's own frame, along its bottom edge, just above the buttons.
   Taps go through it to the drawing underneath, so it is never in the way; it fades by itself. */
html body:has(.player.open) .toast.in-pic { top: var(--tb); bottom: auto; left: var(--tx); right: auto; width: var(--tw); max-width: calc(100vw - 24px); transform: translate(-50%, calc(-100% + 10px)); pointer-events: none; }
html body:has(.player.open) .toast.in-pic.on { transform: translate(-50%, -100%); }

/* drawing boards: a finger on the drawing slides it (board.js), so the page must not scroll or zoom there */
html body .stagebox.board { touch-action: none; overflow: hidden; }

/* drawing boards in full screen (board.js): step line on top, the drawing, its tools underneath */
html body .visual.fs { position: fixed; inset: 0; z-index: 90; margin: 0; display: flex; flex-direction: column; gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)); background: var(--bg); max-width: none; height: auto; }
html body .visual.fs > .stagebox { flex: 1 1 auto; min-height: 0; height: auto; aspect-ratio: auto; max-height: none; }
html body .visual.fs > .stagebox > svg { width: 100%; height: 100%; }
html body .visual.fs > .say { margin: 0; padding-right: 54px; min-height: 40px; }
html body .visual.fs > .tools { flex: 0 0 auto; }
html body .fs-x { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; z-index: 2; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(31,122,115,.5); background: var(--bg-2); color: var(--gold); }
html body .fs-btn.tool { display: inline-grid; place-items: center; }
/* the Templates tile: its arrow sits exactly like the Homework pencil (no gap for the hidden text, no side margin) (Heike, 16 Oct 2026) */
@media (max-width: 599px), (max-width: 899px) and (min-width: 600px), (min-width: 600px) and (orientation: portrait) {
  html body .hw-row .hw-btn, html body .hw-row .hw-dl { gap: 0; }
  html body .hw-row .hw-btn > span, html body .hw-row .hw-dl > svg { margin: 0 0 6px; }
}
html body .hw-row .hw-dl svg.ic { margin-right: 0; }

/* upright tablets use the phone home (Heike, 17 Oct 2026: "portrait iPad the same as phone, then it's easier"),
   the three phone blocks above apply up to 899px and to every upright screen; only the brand name stays, there is room for it */
@media (max-width: 599px) {
  html body .bar .brand { display: none; }
  html body .bar .brand + .week-chip { margin-left: 0; }
}

/* admin Slides button (22 Oct 2026): a button styled as the Templates link */
html body .hw-row .hw-sl { cursor: pointer; background: none; font-family: inherit; }
html body .hw-row .hw-sl[hidden] { display: none !important; }
/* a message on a card without a picture: right under the answers just tapped (2026-10-23, Heike) */
html body:has(.player.open) .toast.under { top: var(--uy); bottom: auto; left: var(--ux); right: auto; width: var(--uw); max-width: calc(100vw - 24px); transform: translate(-50%, -8px); }
html body:has(.player.open) .toast.under.on { transform: translate(-50%, 0); }