/* Hopwise: a learning game for children. A terrain panel along the top: a pond with a path of stepping stones, and every answer is a hop;
     every right answer lights its stone. The question and its answers fill the rest. The paper-map style (claude/estilo-visual.md): flat paper,
     terrain, ink, the three function colours (blue is you, red is danger, amber is the stars you light; green is a right answer), and one cutout
     shadow under everything that lies on the paper: hard, shifted down and to the right (--sh), the same for a card, a button, a chip and the
     canvas's pieces. Each world swaps the palette. */
  [hidden] { display: none !important; }      /* the page hides its own panels: never rely on the host page's reset for this (the artifact's wrapper stopped providing it) */
  :root {
    --bg: #F6F0DE; --paper: #F6F0DE; --band: #BFDCC9; --park: #A9D1BA; --water: #D2E5D5; --road: #FFFFFF; --ink: #2A2E35; --muted: #6B7078;
    --player: #2E5FE0; --hazard: #E54B4B; --reward: #EFB22E; --good: #2F9A4A; --card: #FFFFFF; --chip: #F6F0DE;
    --shadow: rgba(42, 46, 53, 0.13);
    --line: rgba(42, 46, 53, 0.14); --line-strong: rgba(42, 46, 53, 0.3); --coin-ring: rgba(255, 255, 255, 0.45);
    --font: "Jost", "Avenir Next", "Century Gothic", "Segoe UI", system-ui, sans-serif;
  }
  /* Dark values for the first paint. Once the game starts it sets every token itself, per world, per the theme chosen, and per the sun (sky.js). */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #262B38; --paper: #262B38; --band: #343B4A; --park: #414A5B; --water: #2F3541; --road: #5E6373; --ink: #F3EEE2; --muted: #B4B9C3; --player: #7DB4FF; --hazard: #FF6B6B; --reward: #FFD15C; --good: #78CB7B; --card: #3F4553; --chip: rgba(255, 255, 255, 0.05);
      --shadow: rgba(0, 0, 0, 0.32); --line: rgba(243, 238, 226, 0.14); --line-strong: rgba(243, 238, 226, 0.34); color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #262B38; --paper: #262B38; --band: #343B4A; --park: #414A5B; --water: #2F3541; --road: #5E6373; --ink: #F3EEE2; --muted: #B4B9C3; --player: #7DB4FF; --hazard: #FF6B6B; --reward: #FFD15C; --good: #78CB7B; --card: #3F4553; --chip: rgba(255, 255, 255, 0.05);
    --shadow: rgba(0, 0, 0, 0.32); --line: rgba(243, 238, 226, 0.14); --line-strong: rgba(243, 238, 226, 0.34); color-scheme: dark;
  }
  html, body { height: 100%; }
  body { background: var(--bg); color: var(--ink); font-family: var(--font); overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
  #stage { position: relative; height: 100%; overflow: hidden; touch-action: manipulation; --k: 1;
    --sh: calc(4px * var(--k)) calc(5px * var(--k)) 0 var(--shadow); --sh-down: 1px 1px 0 var(--shadow); }      /* the shadow grows with the screen, as the unit does */
  #scene { position: absolute; left: 0; right: 0; top: 0; width: 100%; display: block; }
  button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
  button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--player); outline-offset: 2px; }
  /* a pressed piece sinks into the paper: it moves onto its shadow (style guide, "Estados") */
  .btn, .round, .pill, .tab, .icon, .opt, .keys button, .ltile, .subjects button, .link { transition: transform 80ms ease-out, box-shadow 80ms ease-out; }
  .btn:active:not(:disabled), .round:active:not(:disabled), .pill:active, .tab:active:not(:disabled), .icon:active, .opt:active:not(:disabled), .keys button:active:not(:disabled), .ltile:active, .subjects button:active { transform: translate(2px, 3px); box-shadow: var(--sh-down); }
  @media (prefers-reduced-motion: reduce) { .btn, .round, .pill, .tab, .icon, .opt, .keys button, .ltile, .subjects button, .link { transition: none; } .card, .toast { animation: none !important; } }
  a { color: inherit; }

  /* heads-up display: one row of 36 px just above the terrain. Left, the badge (the topic and the round, a shield of ink); right, the stars you
     need, the lives of an Endless play as pips and the pause button. */
  #hud { position: absolute; top: 0; left: 0; right: 0; height: 40px; padding: 0 calc(12px + env(safe-area-inset-right, 0px)) 0 calc(14px + env(safe-area-inset-left, 0px)); display: flex; justify-content: space-between; align-items: center; gap: 10px;
    pointer-events: none; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; z-index: 2; }
  #hud .l, #hud .r { display: flex; align-items: center; gap: 12px; min-width: 0; }
  #hud .l { height: 36px; padding: 0 11px; border-radius: 11px; background: var(--ink); color: var(--paper); font-weight: 600; box-shadow: var(--sh); }
  #hudLvl { white-space: nowrap; overflow: hidden; min-width: 0; }      /* never cut: on a small phone its text gets smaller to fit (hudFit) */
  @media (max-width: 360px) { #hud { gap: 6px; padding-left: calc(12px + env(safe-area-inset-left, 0px)); padding-right: calc(8px + env(safe-area-inset-right, 0px)); } #hud .l { padding: 0 8px; } #hud .l, #hud .r { gap: 7px; }
    .hearts { gap: 3px; } #hud .icon { width: 34px; height: 34px; } }      /* the pause button stays big enough for a child's finger */
  .goal { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
  .goal svg { width: 15px; height: 15px; }
  .hearts { display: inline-flex; gap: 5px; align-items: center; }
  .hearts svg { width: 10px; height: 10px; fill: var(--player); stroke: var(--player); stroke-width: 2; }      /* a life is a pip */
  .hearts svg.lost { fill: none; stroke: var(--line-strong); }
  .hearts.hit { animation: shake 0.3s; }
  .icon { pointer-events: auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--card); box-shadow: var(--sh); }
  .icon svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

  /* the question and its answers: under the scene, as wide as reads well */
  #play { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; width: min(calc(560px * var(--k)), 100%); box-sizing: border-box; display: flex; flex-direction: column; gap: calc(10px * var(--k));
    padding: 8px calc(14px + env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) calc(14px + env(safe-area-inset-left, 0px)); overflow: hidden; }
  #play.rv .keys { display: none; }
  /* once answered, the question and the answers make room for the verdict and the fact */
  #play.rv .qcard { min-height: calc(60px * var(--k)); }
  #play.rv .opt { height: calc(52px * var(--k)); min-height: 0; }
  #play.rv .opt.dim { display: none; }      /* only the right answer and the child's pick stay */
  #play.rv .opts.stack .opt { height: calc(42px * var(--k)); }
  #play.rv .match .opt, #play.rv .opts.ord .opt { height: calc(40px * var(--k)); }
  #play.rv .qcard { padding-top: calc(8px * var(--k)); padding-bottom: calc(30px * var(--k)); }      /* the subject's line keeps its room */
  #play.rv .qmeta { display: none; }      /* the kind's tag and its line are not needed once answered */
  @media (max-height: 700px) { #play.rv .fact { font-size: 14px; padding: 7px 11px; } #play.rv .verdict { font-size: 19px; } #play.rv .rvgo .btn { min-height: 42px; height: 42px; } .tapnext { font-size: 12px; } }
  .qmeta { flex: none; display: flex; align-items: center; gap: 10px; font-size: calc(13px * var(--k)); color: var(--muted); min-height: 22px; }
  .qmeta .kindtag { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 500; font-size: calc(12px * var(--k)); letter-spacing: 0.02em; box-shadow: var(--sh); }
  .qmeta .kindtag.bonus { background: var(--reward); color: #2A2E35; }
  .qmeta .grow { flex: 1; min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
  .qmeta .grow.news { color: var(--ink); font-weight: 500; }
  /* the question card: a card of the guide (radius 18, no border, the cutout shadow); its text shrinks to fit (fitText), never overflows */
  .qcard { position: relative; flex: 1 1 auto; min-height: calc(84px * var(--k)); max-height: calc(220px * var(--k)); background: var(--card); border-radius: calc(18px * var(--k)); box-shadow: var(--sh); padding: calc(14px * var(--k)) calc(16px * var(--k)) calc(30px * var(--k));
    box-sizing: border-box; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  /* the question's subject: small, thin, in spaced small caps at the bottom right, under a hairline */
  .qcat { position: absolute; left: calc(16px * var(--k)); right: calc(16px * var(--k)); bottom: calc(8px * var(--k)); padding-top: 6px; border-top: 1px solid var(--line); text-align: right;
    font-size: calc(11px * var(--k)); line-height: 1.2; font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
  .qcard p { margin: 0; padding: 3px 0; font-size: 24px; line-height: 1.22; font-weight: 500; text-align: center; text-wrap: balance; overflow-wrap: normal; max-height: 100%; }
  /* the answers are secondary buttons: pills on the card colour with a 1.5 px inner border and the cutout shadow; four, two by two when there is room, one under another when it is narrow */
  .opts { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: calc(9px * var(--k)); }
  .opts.stack { grid-template-columns: minmax(0, 1fr); }
  .opt { position: relative; min-height: calc(58px * var(--k)); height: calc(66px * var(--k)); box-sizing: border-box; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--card); box-shadow: var(--sh);
    padding: 4px 38px 4px 16px; display: flex; align-items: center; gap: 8px; text-align: left; overflow: hidden; }
  .opts.stack .opt { height: calc(50px * var(--k)); min-height: calc(46px * var(--k)); }
  .opt .key { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; font-size: 12px; font-weight: 500; color: var(--muted); }
  .opt .tx { flex: 1; min-width: 0; padding: 2px 0; font-size: 18px; line-height: 1.15; font-weight: 500; overflow-wrap: normal; max-height: 100%; }
  .qcard p.brk, .opt .tx.brk { overflow-wrap: anywhere; }      /* a word too long for its box even at the smallest size breaks, as a last resort */
  .opt .mk { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; font-size: 0; line-height: 0; color: transparent; }
  .opt.right .mk::after, .opt.wrong .mk::after { content: ""; display: block; width: 100%; height: 100%; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
  .opt.right .mk::after { color: var(--good); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
  .opt.wrong .mk::after { color: var(--hazard); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
  .opt.pick { border-color: var(--player); box-shadow: var(--sh), inset 0 0 0 1.5px var(--player); }
  .opt.right { border-color: var(--good); background: color-mix(in srgb, var(--good) 16%, var(--card)); box-shadow: var(--sh), inset 0 0 0 1.5px var(--good); }
  .opt.wrong { border-color: var(--hazard); background: color-mix(in srgb, var(--hazard) 10%, var(--card)); }
  .opt.dim { opacity: 0.4; box-shadow: none; }
  .opt:disabled { cursor: default; }
  .opt .ord { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--player); color: var(--card); display: grid; place-items: center; font-size: 13px; font-weight: 600; }
  /* join three pairs: the left column stays, the right one is shuffled; a pair shares its number */
  .match { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(9px * var(--k)) calc(14px * var(--k)); }
  .match .col { display: flex; flex-direction: column; gap: calc(9px * var(--k)); min-width: 0; }
  .match .opt { height: calc(52px * var(--k)); min-height: calc(46px * var(--k)); padding-right: 14px; padding-left: 12px; }
  .match .opt .key.on { background: var(--player); border-color: var(--player); color: var(--card); }
  .match .opt.sel { border-color: var(--player); box-shadow: var(--sh), inset 0 0 0 1.5px var(--player); }
  /* the number pad: the game's own, so a phone shows digits only, the same on every system */
  .numpad { flex: none; display: flex; flex-direction: column; gap: calc(8px * var(--k)); }
  .numshow { height: calc(52px * var(--k)); box-sizing: border-box; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--card); box-shadow: var(--sh); display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: calc(26px * var(--k)); font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; white-space: nowrap; padding: 0 12px; }
  .numshow .u { font-size: calc(15px * var(--k)); font-weight: 400; color: var(--muted); }
  .numshow.empty b { color: var(--muted); font-weight: 400; }
  .numshow.right { border-color: var(--good); box-shadow: var(--sh), inset 0 0 0 1.5px var(--good); }
  .numshow.wrong { border-color: var(--hazard); }
  .keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8px * var(--k)) calc(9px * var(--k)); }
  .keys button { height: calc(44px * var(--k)); border-radius: 999px; background: var(--card); box-shadow: var(--sh); border: 1.5px solid var(--line); font-size: calc(21px * var(--k)); font-weight: 500; font-variant-numeric: tabular-nums; }
  .keys button.ok { background: var(--ink); color: var(--paper); border-color: var(--ink); font-size: calc(17px * var(--k)); }
  .keys button.ok:disabled { opacity: 0.4; box-shadow: none; }
  .keys button svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
  /* after an answer: a cheer or a word of encouragement, the right answer, and a short fact to learn from */
  .reveal { flex: none; display: flex; flex-direction: column; gap: 8px; }
  .verdict { margin: 0; font-size: calc(21px * var(--k)); font-weight: 600; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
  .verdict.ok { color: var(--good); }
  .verdict.no { color: var(--ink); }
  .verdict .sub { color: var(--ink); font-weight: 500; font-size: calc(17px * var(--k)); min-width: 0; overflow-wrap: anywhere; }
  .verdict.no .sub b { color: var(--good); font-weight: 600; }
  .fact { margin: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; font-size: calc(15px * var(--k)); line-height: 1.35; color: var(--ink); background: var(--card); box-shadow: var(--sh); border-radius: 14px; padding: 9px 12px; overflow-wrap: anywhere; }
  .fact svg { width: 18px; height: 18px; margin-top: 1px; }
  .rvgo { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
  .rvgo .btn { flex: 0 1 220px; }
  .tapnext { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }


  /* cards */
  .card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, calc(100% - 32px)); box-sizing: border-box; background: var(--card); border-radius: 18px; box-shadow: var(--sh);
    padding: 20px 22px 16px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100% - 24px); overflow: hidden; z-index: 4; animation: cardopen 180ms ease-out; }
  @keyframes cardopen { from { opacity: 0; scale: 0.96; } to { opacity: 1; scale: 1; } }      /* a panel opens: 0.96 → 1 and 0 → 1, 180 ms */
  @media (max-aspect-ratio: 1/1) {
    .card { top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); max-height: calc(100% - 52px - env(safe-area-inset-bottom, 0px) - var(--safe-top, 0px)) !important; }
  }
  @media (max-height: 470px) { .card { padding: 14px 18px 12px; gap: 10px; } h1 { font-size: 26px; } }
  h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
  h2 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere; }
  .tag { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
  .mhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .mtitle { min-width: 0; }
  .langsw { flex: none; display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); margin-top: 0; }
  .langsw span { min-width: 34px; height: 30px; padding: 0 8px; box-sizing: border-box; display: grid; place-items: center; border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--muted); }
  .langsw span.on { background: var(--ink); color: var(--paper); }
  .note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.35; text-wrap: pretty; overflow-wrap: anywhere; }
  .note b { color: var(--ink); font-weight: 600; }
  p { text-wrap: pretty; }
  .kick { display: block; font-style: normal; font-size: 11px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); line-height: 1; margin-bottom: 8px; }
  /* the subject of a play: five chips, the one picked filled; one tap picks it */
  .subjects { display: flex; flex-wrap: wrap; gap: 8px 8px; }
  .subjects button { min-height: 34px; padding: 4px 13px; border-radius: 17px; font-size: 14px; font-weight: 500; background: var(--card); box-shadow: var(--sh), inset 0 0 0 1.5px var(--line-strong); white-space: nowrap; }
  .subjects button[aria-checked="true"] { background: var(--ink); color: var(--paper); box-shadow: var(--sh); }
  /* the difficulty of a play: five in one bar, the one picked filled */
  .diffbar { display: flex; padding: 3px; gap: 2px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .diffbar button { flex: 1 1 0; min-width: 0; height: 30px; padding: 0 1px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .diffbar button[aria-checked="true"] { background: var(--ink); color: var(--paper); font-weight: 500; }
  @media (max-width: 400px) { .diffbar button { font-size: 12.5px; } }
  @media (max-width: 359px) { .diffbar button { font-size: 11.5px; } .subjects button { padding: 4px 10px; font-size: 13.5px; } }
  @media (max-aspect-ratio: 1/1) and (max-height: 700px) { #menu { gap: 10px; padding-top: 18px; } #mTag { display: none; } }
  .stepper { display: grid; grid-template-columns: 40px 1fr auto 40px; grid-template-areas: "prev name stars next" "prev meta meta next"; align-items: center; gap: 2px 10px; }
  #btnPrev { grid-area: prev; } #mLvl { grid-area: name; } #mStars { grid-area: stars; } #btnNext { grid-area: next; } #mMeta { grid-area: meta; }
  .round { width: 40px; height: 40px; border-radius: 50%; background: var(--card); box-shadow: var(--sh); display: grid; place-items: center; flex: none; }
  .round svg { width: 14px; height: 14px; stroke: var(--ink); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .round:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
  .route-n { font-size: 21px; font-weight: 600; line-height: 1.15; min-width: 0; overflow-wrap: break-word; text-wrap: balance; }      /* a word breaks only if it can't fit a line on its own */
  .route-meta { font-size: 13px; color: var(--muted); letter-spacing: 0.02em; white-space: pre-line; line-height: 1.35; }
  .stars { display: inline-flex; gap: 3px; }
  .stars svg { width: 18px; height: 18px; }
  .star-on { fill: var(--reward); stroke: var(--reward); }
  .star-off { fill: color-mix(in srgb, var(--ink) 12%, transparent); stroke: color-mix(in srgb, var(--ink) 12%, transparent); }
  .stars svg path, .stars3 svg path, .goal svg path { stroke-width: 1.4; stroke-linejoin: round; }
  .actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .btn { height: 48px; border-radius: 24px; padding: 0 20px; font-size: 17px; font-weight: 500; flex: 1 1 auto; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-sizing: border-box; background: var(--card); box-shadow: var(--sh); }      /* (a game for kids keeps its 48 px: big targets, reglakids 21) */
  .btn.primary { background: var(--ink); color: var(--paper); }
  .btn.ghost { box-shadow: var(--sh), inset 0 0 0 1.5px var(--line-strong); }
  .btn.small { height: 40px; font-size: 15px; padding: 0 14px; }
  .btn:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
  .btn svg.back { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-right: 6px; flex: none; }
  a.btn { text-decoration: none; }
  .modes .btn { padding: 0 12px; }
  .modes #btnPlay { flex: 2 1 0; } .modes #btnLesson { flex: 1 1 0; }
  .actions.more { flex-wrap: nowrap; gap: 6px; }
  .actions.more .btn { flex: 1 1 0; min-width: 0; padding: 0 6px; font-size: 14.5px; }
  .btn:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
  .btn.shut { opacity: 0.4; cursor: default; box-shadow: none; }      /* a closed mode: 40 % and no shadow; a tap still says what opens it */
  /* a lesson: one card at a time, its picture, the idea, the example big, Back and Next */
  #panel.lesson { width: min(520px, calc(100% - 32px)); gap: 12px; }
  .lsntop { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); letter-spacing: 0.02em; }
  .lsnname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lsndots { display: inline-flex; gap: 5px; flex: none; }
  .lsndots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
  .lsndots i.seen { background: var(--muted); } .lsndots i.on { background: var(--player); width: 18px; border-radius: 4px; }      /* (the dots of the cards: pips, not a bar) */
  #panel.lesson h2 { font-size: 24px; font-weight: 600; }
  .lsnpic { display: block; width: 100%; height: clamp(100px, 22vh, 190px); border-radius: 14px; background: var(--bg); }
  .lsnt { margin: 0; font-size: 17px; line-height: 1.42; text-wrap: pretty; overflow-wrap: anywhere; }
  .lsnex { margin: 0; align-self: center; padding: 6px 16px; border-radius: 14px; background: color-mix(in srgb, var(--player) 10%, var(--card)); font-size: 21px; font-weight: 600; text-align: center; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
  #panel.lesson .actions.row { flex-wrap: nowrap; gap: 8px; }
  #panel.lesson .actions.row .btn { flex: 1 1 auto; min-width: 0; padding: 0 12px; }
  #panel.lesson #lsNext { flex: 2 1 auto; }
  @media (max-width: 400px) { #panel.lesson #pHome { flex: 0 0 auto; padding: 0 14px; } #panel.lesson #pHome .tx { display: none; } #panel.lesson #pHome svg.back { margin: 0; } }
  @media (max-height: 640px) { #panel.lesson { gap: 9px; padding-top: 16px; } #panel.lesson h2 { font-size: 21px; } .lsnt { font-size: 16px; } .lsnex { font-size: 19px; } }
  .tabs, .chips { display: flex; gap: 6px; flex-wrap: wrap; }
  .tab { min-height: 34px; padding: 4px 13px; border-radius: 17px; font-size: 14px; font-weight: 500; background: var(--card); box-shadow: var(--sh), inset 0 0 0 1.5px var(--line-strong); display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; text-align: left; max-width: 100%; }
  .tab[aria-selected="true"], .tab[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: var(--sh); }
  .tab:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
  .tab.mini { min-height: 28px; padding: 2px 10px; font-size: 13px; }
  /* the player's stats (Your stats, from the profile): every total, two to a line on a phone and four on a wide screen */
  #panel.statsp { gap: 12px; }
  .tiles { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; font-variant-numeric: tabular-nums; }
  .tiles div { min-width: 0; padding: 4px 0 3px; border-top: 1px solid var(--line); }
  .tiles dt { margin: 0; font-size: 12px; line-height: 1.2; color: var(--muted); }
  .tiles dd { margin: 1px 0 0; font-size: 16px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
  @media (min-aspect-ratio: 1/1) { #panel.statsp { width: min(640px, calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); } .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (max-height: 640px) { #panel.statsp { gap: 8px; } .tiles { gap: 1px 12px; } .tiles div { padding: 2px 0 1px; } .tiles dt { font-size: 11.5px; } .tiles dd { font-size: 14.5px; line-height: 1.2; } }
  @media (max-height: 400px) { #panel.statsp h2 { font-size: 18px; } .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  @media (max-width: 360px) { .tiles { column-gap: 10px; } .tiles dd { font-size: 14px; } }
  @media (max-height: 600px) { #panel.statsp { padding-top: 16px; padding-bottom: 12px; } #panel.statsp h2 { font-size: 20px; } }
  .foot { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .foot .grow { flex: 1 0 auto; white-space: nowrap; }      /* never shrinks under its words: on a narrow phone the links wrap below it */
  .link { color: var(--muted); text-decoration: none; font-size: 13px; min-height: 28px; display: inline-flex; align-items: center; line-height: 1.2; }
  .links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; }
  .gift { color: var(--ink); }
  /* results (rule 69): the stars in a row, each with its name; how many right in big; the buttons in one row */
  .stars3 { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; text-align: center; }
  .stars3 li { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 13px; line-height: 1.15; color: var(--ink); min-width: 0; }
  .stars3 li.off { color: var(--muted); }
  .stars3 svg { width: 26px; height: 26px; }
  .stars3 span { text-wrap: balance; overflow-wrap: anywhere; }
  .won { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 16px; color: var(--muted); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
  .won b { font-size: 30px; font-weight: 600; color: var(--ink); line-height: 1; }
  .lead { margin: 0; font-size: 16px; line-height: 1.3; }
  #panel.result .actions.row { flex-wrap: nowrap; gap: 8px; }
  #panel.result .actions.row .btn { flex: 1 1 auto; min-width: 0; padding: 0 12px; font-size: 16px; }
  @media (max-width: 360px) { #panel.result { padding-left: 16px; padding-right: 16px; } #panel.result .actions.row { gap: 6px; }
    #panel.result .actions.row .btn { padding: 0 8px; font-size: 14.5px; } #panel.result .btn svg.back { margin-right: 3px; } }
  @media (max-height: 600px) { #panel.result { gap: 10px; padding-top: 16px; padding-bottom: 12px; } #panel.result .btn { height: 42px; } }
  .toast { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); box-sizing: border-box; z-index: 6;
    background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 500; line-height: 1.3; padding: 9px 16px; border-radius: 22px; box-shadow: var(--sh); pointer-events: none; text-align: center; animation: toastin 160ms ease-out; }
  @keyframes toastin { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }      /* a notice drops 8 px and appears, 160 ms */
  .lvl { font-size: 12px; letter-spacing: 0.03em; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .pager { flex: none; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .pager .round { width: 36px; height: 36px; }
  .prev { display: block; width: 100%; height: clamp(52px, 8vh, 84px); border-radius: 14px; box-shadow: var(--sh); }

  /* the looks: a tile each, drawn by the game's own code. Its name is read aloud, shown on hover or focus, and said above the tiles for
     the one worn and under them for the one tried on. Every look opens by playing: one still closed shows a lock. */
  #panel.looks { height: min(calc(100% - 24px), 720px); max-height: none; overflow: hidden; padding: 16px 18px 14px; gap: 10px; }
  @media (max-aspect-ratio: 1/1) { #panel.looks { height: min(720px, calc(100% - 52px - env(safe-area-inset-bottom, 0px) - var(--safe-top, 0px))); } }
  .lkhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
  .lkmain { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
  #lkList { flex: 1 1 0; min-height: 0; overflow: hidden; position: relative; list-style: none; margin: 0; padding: 0; }
  .lhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
  .chips.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
  @media (max-width: 400px) { .chips.lgrid { grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 5px; } }
  @media (max-width: 360px) { .chips.lgrid { grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 4px; } }
  @media (max-aspect-ratio: 1/1) and (max-height: 700px) { #panel.looks { gap: 7px; padding-top: 12px; padding-bottom: 10px; } #panel.looks h2 { font-size: 20px; } #panel.looks .prev { height: 44px; }
    #panel.looks .btn { height: 42px; } #panel.looks .pager .round { width: 32px; height: 32px; } #panel.looks .tab { min-height: 30px; } }
  .ltile { position: relative; aspect-ratio: 1; width: 100%; min-width: 0; padding: 0; box-sizing: border-box; border-radius: 14px; box-shadow: var(--sh); overflow: hidden;
    display: grid; place-items: center; color: var(--ink); background-color: var(--chip); background-size: cover; background-position: center; }      /* a tile: paper on the card, with the cutout shadow */
  .ltile .sk { width: 70%; height: 70%; }
  .ltile[aria-pressed="true"] { background-color: var(--ink); color: var(--paper); }
  .ltile.bgl[aria-pressed="true"] { box-shadow: var(--sh), inset 0 0 0 2.5px var(--ink), inset 0 0 0 4.5px var(--card); }
  .ltile.try { box-shadow: var(--sh), inset 0 0 0 2px var(--player); }
  .ltile.locked .sk { opacity: 0.34; }
  .ltile.locked.bgl::after { content: ""; position: absolute; inset: 0; background: var(--card); opacity: 0.55; }
  .ltile .badge { position: absolute; right: 2px; bottom: 2px; z-index: 1; width: 16px; height: 16px; border-radius: 8px; background: var(--card); color: var(--ink); display: grid; place-items: center; }
  .ltile .badge .ico { width: 8px; height: 10px; }
  .abtip { position: absolute; z-index: 8; pointer-events: none; box-sizing: border-box; max-width: min(calc(240px * var(--k)), calc(100% - 16px)); background: var(--ink); color: var(--paper);
    border-radius: calc(14px * var(--k)); padding: calc(5px * var(--k)) calc(11px * var(--k)); box-shadow: var(--sh);
    font-size: calc(12px * var(--k)); font-weight: 500; line-height: 1.25; }
  .sk { width: 16px; height: 16px; display: inline-block; flex: none; background: currentColor; -webkit-mask-image: var(--m); mask-image: var(--m); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
  @media (min-height: 501px) and (min-aspect-ratio: 1/1) { #panel.looks { width: min(720px, calc(100% - 32px)); } .chips.lgrid { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 8px; } }
  @media (max-height: 500px) and (min-aspect-ratio: 1/1) {
    #panel.looks { width: min(720px, calc(100% - 32px)); display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-rows: minmax(0, 1fr) auto; gap: 10px 18px; padding: 14px 16px 12px; }
    #panel.looks .lkside { display: flex; flex-direction: column; gap: 8px; grid-column: 1; grid-row: 1; min-height: 0; }
    #panel.looks .lkmain { grid-column: 2; grid-row: 1 / span 2; }
    #panel.looks .lkact { grid-column: 1; grid-row: 2; }
  }
  #panel.looks .lkside { display: contents; }
  @media (max-height: 500px) and (min-aspect-ratio: 1/1) { #panel.looks .lkside { display: flex; } }
  .lock { display: inline-flex; align-items: center; gap: 4px; }

  /* the site's corner of the menu: back to the games, and who is playing. The same in every game of the site. */
  .sitebar { position: absolute; top: calc(8px + var(--safe-top, 0px)); left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px));
    display: flex; justify-content: space-between; align-items: center; gap: 12px; pointer-events: none; z-index: 5; }
  .pill { pointer-events: auto; box-sizing: border-box; height: 36px; padding: 0 14px 0 10px; display: inline-flex; align-items: center; gap: 6px; min-width: 0;
    background: var(--card); border-radius: 18px; box-shadow: var(--sh); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
  .pill svg { width: 12px; height: 12px; flex: none; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .pill.who { padding: 0 14px 0 11px; max-width: 62%; }
  .pill.who #mWhoIcon { display: inline-flex; flex: none; }
  .pill.who #mWho { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  @media (min-aspect-ratio: 1/1) { .pill.who { max-width: calc(50% - 190px - 20px); } }
  @media (min-aspect-ratio: 1/1) and (max-width: 700px) { .pill.who { padding: 0 10px; } .pill.who #mWho { display: none; } }
  #sitebar:not([hidden]) ~ .toast { top: calc(52px + var(--safe-top, 0px)); }
  @media (min-aspect-ratio: 1/1) { #sitebar:not([hidden]) ~ .toast { top: calc(10px + var(--safe-top, 0px)); max-width: min(360px, calc(100% - 32px)); } }
  .idline { margin: 0; display: flex; align-items: center; gap: 10px; min-width: 0; }
  .idline .sk { width: 28px; height: 28px; }
  .idline b { font-size: 22px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ptiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  @media (max-height: 500px) { .ptiles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } #panel.prof { gap: 8px; padding-top: 14px; padding-bottom: 12px; } #panel.prof h2 { font-size: 19px; } #panel.prof .btn { height: 40px; } }
  @media (min-aspect-ratio: 1/1) { #panel.prof { width: min(560px, calc(100% - 32px)); } }
  .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  /* ---- small screens (rules 5 and 69): everything fits, nothing scrolls and no word is cut, from 320 by 568 to a phone on its side */
  /* the topic stepper on a narrow phone: the name gets the whole width between the arrows, the stars go under it */
  @media (max-width: 380px) {
    .stepper { grid-template-columns: 36px minmax(0, 1fr) 36px; grid-template-areas: "prev name next" "prev stars next" "prev meta next"; gap: 1px 8px; }
    #mStars { justify-self: start; } .stars svg { width: 15px; height: 15px; }
    .stepper .round { width: 36px; height: 36px; }
    .route-n { font-size: 19px; }
  }
  /* a short phone held upright: the menu tightens */
  @media (max-aspect-ratio: 1/1) and (max-height: 620px) {
    #menu { gap: 8px; padding: 14px 16px 10px; } #menu h1 { font-size: 32px; } #menu .btn { height: 44px; } #menu .actions.more .btn { height: 36px; }
    .subjects button { min-height: 30px; } .diffbar button { height: 28px; } .kick { margin-bottom: 4px; }
    .numshow { height: calc(44px * var(--k)); } .keys button { height: calc(38px * var(--k)); } .qcard { min-height: calc(70px * var(--k)); }
  }
  /* the results' row of buttons on the smallest phones: one row, every word whole */
  @media (max-width: 360px) {
    #panel.result { width: calc(100% - 20px); padding-left: 12px; padding-right: 12px; }
    #panel.result .actions.row { gap: 5px; } #panel.result .actions.row .btn { padding: 0 7px; font-size: 14px; } #panel.result .btn svg.back { margin-right: 2px; width: 10px; }
  }
  /* a phone on its side: the menu in two columns under the site's corner, and the question beside its answers */
  @media (max-height: 520px) and (min-aspect-ratio: 5/4) {
    #menu { top: calc(52px + var(--safe-top, 0px)); transform: translateX(-50%); width: calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); max-width: 760px;
      max-height: calc(100% - 60px - var(--safe-top, 0px) - env(safe-area-inset-bottom, 0px)); padding: 12px 16px 10px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-areas: "head step" "subj step" "subj modes" "diff more" "foot foot"; gap: 8px 22px; align-items: start; }
    #menu .mhead { grid-area: head; } #menu .msubj { grid-area: subj; } #menu .mdiff { grid-area: diff; } #menu .stepper { grid-area: step; } #menu .modes { grid-area: modes; } #menu .more { grid-area: more; align-self: end; } #menu .foot { grid-area: foot; } #menu #tune { grid-column: 1 / -1; }
    #menu .stepper { grid-template-columns: 36px minmax(0, 1fr) 36px; grid-template-areas: "prev name next" "prev stars next" "prev meta next"; gap: 1px 8px; }
    #mStars { justify-self: start; } .stars svg { width: 15px; height: 15px; } .stepper .round { width: 36px; height: 36px; } .route-n { font-size: 19px; }
    #panel.lesson { width: min(660px, calc(100% - 32px)); gap: 8px; padding-top: 12px; padding-bottom: 10px; } .lsnpic { height: clamp(56px, 20vh, 110px); } #panel.lesson h2 { font-size: 20px; }
    .lsnt { font-size: 15px; line-height: 1.35; } .lsnex { font-size: 18px; padding: 4px 14px; } #panel.lesson .btn { height: 40px; }
    #menu h1 { font-size: 30px; } #mTag { display: none; } #menu .btn { height: 42px; } #menu .actions.more .btn { height: 36px; } .subjects button { min-height: 30px; } .diffbar button { height: 28px; } .kick { margin-bottom: 4px; }
    #play { width: min(calc(900px * var(--k)), 100%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto auto auto auto minmax(0, 1fr); gap: 6px 14px; align-content: start; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
    #play .qmeta { grid-column: 1 / -1; grid-row: 1; min-height: 18px; }
    #play .qcard { grid-column: 1; grid-row: 2 / -1; max-height: none; min-height: 0; align-self: stretch; }
    #qOpts, #qMatch, #qPad, #qReveal { grid-column: 2; }
    .opt { height: 46px; min-height: 40px; } .opts.stack .opt { height: 40px; min-height: 36px; } .match .opt { height: 40px; min-height: 36px; }
    #play.rv .opt, #play.rv .opts.stack .opt, #play.rv .match .opt, #play.rv .opts.ord .opt { height: 38px; }
    #play.rv .qcard { min-height: 0; }
    .numshow { height: 38px; } .keys button { height: 34px; } .keys { gap: 5px; } .numpad { gap: 6px; }
    .reveal { gap: 6px; } .verdict { font-size: 18px; } .verdict .sub { font-size: 16px; } .fact { font-size: 14px; padding: 6px 10px; } .rvgo .btn { height: 40px; } .tapnext { font-size: 12px; }
  }
  @media (prefers-reduced-motion: reduce) { .hearts.hit { animation: none; } }