/* Cube section tokens and layout. Extends the Tree of Life token names
   (--page/--surface/--surface-2/--ink/--muted/--line/--shadow) so the two
   sections feel like one site, and adds the six sticker colours plus plastic
   and "we don't know this sticker yet". view.js reads the --cube-* tokens off
   a .cube-probe element and re-reads them when the colour scheme changes, so
   these values are the single source of truth for painted stickers. */
:root {
  color-scheme: light dark;
  --page: #eef1f5;
  --surface: #fffefb;
  --surface-2: #e9edf3;
  --ink: #17212b;
  --muted: #5d6b79;
  --line: #ccd5df;
  --accent: #1b5e9c;
  --accent-ink: #114069;
  --warn: #8c2f39;
  --shadow: 0 18px 45px rgba(19, 34, 48, .13);
  /* Sticker colours: plain, high-contrast, and distinguishable in print. */
  --cube-U: #fbfbf9;
  --cube-R: #c62828;
  --cube-F: #2e7d32;
  --cube-D: #f9c823;
  --cube-L: #ef6c00;
  --cube-B: #1565c0;
  --cube-plastic: #20242a;
  --cube-unknown: #98a2ae;
  --cube-sticker-edge: rgba(0, 0, 0, .28);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #121820;
    --surface: #1b2430;
    --surface-2: #232f3c;
    --ink: #eef3f8;
    --muted: #a6b4c2;
    --line: #37475a;
    --accent: #7cc0f5;
    --accent-ink: #a9d6fb;
    --warn: #f09aa4;
    --shadow: 0 18px 45px rgba(0, 0, 0, .34);
    /* Lifted a step against dark plastic; hue stays the same so red and
       orange keep the same relationship the kid sees on the real cube. */
    --cube-U: #f4f5f1;
    --cube-R: #e0453f;
    --cube-F: #3f9d48;
    --cube-D: #ffd747;
    --cube-L: #ff8a2b;
    --cube-B: #3d8ce0;
    --cube-plastic: #0c0f13;
    --cube-unknown: #6d7a89;
    --cube-sticker-edge: rgba(0, 0, 0, .55);
  }
}
:root[data-theme="dark"] {
  --page: #121820;
  --surface: #1b2430;
  --surface-2: #232f3c;
  --ink: #eef3f8;
  --muted: #a6b4c2;
  --line: #37475a;
  --accent: #7cc0f5;
  --accent-ink: #a9d6fb;
  --warn: #f09aa4;
  --shadow: 0 18px 45px rgba(0, 0, 0, .34);
  --cube-U: #f4f5f1;
  --cube-R: #e0453f;
  --cube-F: #3f9d48;
  --cube-D: #ffd747;
  --cube-L: #ff8a2b;
  --cube-B: #3d8ce0;
  --cube-plastic: #0c0f13;
  --cube-unknown: #6d7a89;
  --cube-sticker-edge: rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--page); }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--page); font: 17px/1.5 ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Rounded", system-ui, sans-serif; }
a { color: var(--accent-ink); text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; }
h1, h2, h3 { line-height: 1.1; }

/* Every interactive thing a finger aims at is at least 48px tall. */
button, .button, .chip, .net-grid button, .transport button { min-height: 48px; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible,
.cube-stage:focus-visible, .net-grid button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 12px;
}

.skip-link { position: fixed; left: 12px; top: -80px; z-index: 99; padding: 12px 16px; min-height: 48px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-weight: 750; }
.skip-link:focus { top: 12px; }
.site-header { min-height: 58px; padding: 8px clamp(14px, 3vw, 34px); display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); background: var(--surface); position: relative; z-index: 20; }
.brand, .cube-home { color: var(--ink); font-weight: 800; text-decoration: none; padding: 10px 2px; }
.cube-home { color: var(--accent-ink); }

main { display: block; }
.wrap { width: min(1080px, calc(100% - 28px)); margin: clamp(16px, 3vw, 34px) auto 56px; }
.page-head h1 { margin: 0 0 6px; font-size: clamp(28px, 5vw, 46px); }
.page-head p { margin: 0 0 4px; color: var(--muted); font-size: 17px; }

/* --------------------------------------------------------------- cards */
.card { display: block; padding: clamp(16px, 2.4vw, 22px); border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.card h2 { margin: 0 0 6px; font-size: 24px; }
.card p { margin: 0; color: var(--muted); font-size: 16px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(12px, 2vw, 18px); margin: clamp(18px, 3vw, 30px) 0 0; padding: 0; list-style: none; }
.card-grid > li { display: flex; }
.card-grid .card { flex: 1; min-height: 148px; }
a.card { text-decoration: none; color: var(--ink); }
a.card:hover { border-color: var(--accent); transform: translateY(-2px); }
a.card h2 { color: var(--accent-ink); }
.card .emoji { display: block; font-size: 38px; line-height: 1; margin-bottom: 8px; }
/* A "coming soon" card is deliberately not a link: there is no page yet. */
.card.soon { background: var(--surface-2); box-shadow: none; }
.card.soon h2 { color: var(--ink); }
.card .soon-tag { display: inline-block; margin-top: 10px; padding: 5px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 14px; font-weight: 750; }

/* ---------------------------------------------------------- cube stage */
/* The canvas host. touch-action:none because pointer.js owns every drag,
   pinch and two-finger turn on this element. */
.cube-stage { position: relative; display: block; width: 100%; min-height: 320px; height: min(62vh, 560px); margin: 0; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.cube-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.cube-stage:focus-visible { outline-offset: -4px; border-radius: 22px; }
.stage-hint { position: absolute; left: 10px; bottom: 8px; margin: 0; padding: 5px 10px; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 14px; pointer-events: none; }
/* Probe elements: view.js resolves --cube-* through getComputedStyle(color)
   so the painted stickers always match the stylesheet, light or dark. */
.cube-probe { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cube-probe[data-face="U"] { color: var(--cube-U); }
.cube-probe[data-face="R"] { color: var(--cube-R); }
.cube-probe[data-face="F"] { color: var(--cube-F); }
.cube-probe[data-face="D"] { color: var(--cube-D); }
.cube-probe[data-face="L"] { color: var(--cube-L); }
.cube-probe[data-face="B"] { color: var(--cube-B); }
.cube-probe[data-face="plastic"] { color: var(--cube-plastic); }
.cube-probe[data-face="unknown"] { color: var(--cube-unknown); }

/* ------------------------------------------------------------- player */
.player { display: grid; gap: 12px; margin-top: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips.scroller { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.chip { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 10px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 16px; font-weight: 750; cursor: pointer; }
.chip:hover { border-color: var(--accent); }
.chip[aria-current="step"] { border-color: transparent; background: var(--accent); color: var(--surface); }
.chip[aria-current="step"] .chip-count { color: var(--surface); }
.chip[disabled] { opacity: .55; cursor: default; }
.chip-count { color: var(--muted); font-weight: 650; font-size: 14px; }
.transport { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.transport button { min-width: 56px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--ink); font-size: 18px; font-weight: 800; cursor: pointer; }
.transport button:hover { border-color: var(--accent); }
.transport button[aria-pressed="true"], .transport button.primary { border-color: transparent; background: var(--accent); color: var(--surface); }
.transport button[disabled] { opacity: .5; cursor: default; }
.transport .spacer { flex: 1 1 12px; }
.transport label { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 700; }
.transport select { min-height: 48px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: var(--ink); }
.move-readout { margin: 0; font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; }
.move-readout code { font: 700 17px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }

/* --------------------------------------------------------- net editor */
/* role="grid" of buttons: one button per facelet. Sized so a 7x7 face
   still clears 48px on the iPad and stays tappable at 390px. */
.net-grid { display: grid; gap: 3px; margin: 0; padding: 0; }
.net-grid [role="row"] { display: grid; grid-auto-flow: column; gap: 3px; }
.net-grid button { min-width: 48px; min-height: 48px; padding: 0; border: 1px solid var(--cube-sticker-edge); border-radius: 7px; background: var(--cube-unknown); color: transparent; cursor: pointer; }
.net-grid button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.net-grid button[data-color="U"] { background: var(--cube-U); }
.net-grid button[data-color="R"] { background: var(--cube-R); }
.net-grid button[data-color="F"] { background: var(--cube-F); }
.net-grid button[data-color="D"] { background: var(--cube-D); }
.net-grid button[data-color="L"] { background: var(--cube-L); }
.net-grid button[data-color="B"] { background: var(--cube-B); }
.net-grid button[data-color="?"] { background: var(--cube-unknown); }
.net-grid button[aria-selected="true"] { outline: 3px solid var(--ink); outline-offset: -3px; }
.net-grid button[data-unsure="true"] { box-shadow: inset 0 0 0 3px var(--warn); }
.net-grid.letters button { color: var(--cube-plastic); font-size: 16px; font-weight: 850; }
.net-grid.letters button span { position: static; width: auto; height: auto; clip-path: none; }

/* ------------------------------------------------------------- status */
/* One live region per page. It says what is true, including "not found". */
.status { margin: 12px 0 0; padding: 12px 15px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-2); color: var(--ink); font-size: 16px; font-weight: 700; }
.status:empty { display: none; }
.status.working { border-color: var(--accent); }
.status.problem { border-color: var(--warn); color: var(--warn); }
.status small { display: block; margin-top: 4px; color: var(--muted); font-weight: 600; }
noscript .status { display: block; }

/* ------------------------------------------------------------ layouts */
/* iPad portrait (820px): stage over controls, one column. */
@media (max-width: 860px) {
  .wrap { width: calc(100% - 20px); margin-top: 14px; }
  .page-head h1 { font-size: clamp(26px, 6vw, 36px); }
  .cube-stage { height: min(54vh, 480px); min-height: 300px; border-radius: 18px; }
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
}
/* Phone (390px): full-bleed stage, chips scroll sideways, nothing shrinks
   below 16px text or a 48px target. */
@media (max-width: 430px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - 16px); }
  .page-head h1 { font-size: 27px; }
  .card-grid { grid-template-columns: 1fr; }
  .card { padding: 14px; border-radius: 16px; }
  .card h2 { font-size: 21px; }
  .cube-stage { height: min(48vh, 380px); min-height: 260px; border-radius: 14px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .transport button { min-width: 52px; padding: 10px 12px; }
  .net-grid button { min-width: 38px; min-height: 38px; border-radius: 5px; }
  .brand { font-size: 0; }
  .brand::first-letter { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; }
  a.card:hover { transform: none; }
}
@media print {
  .site-header, .transport, .skip-link { display: none; }
  body { background: white; color: black; }
  .card { box-shadow: none; }
}