/* Tiptoe Safari: warm savanna palette, chunky game buttons, light and dark themes. */
:root {
  --bg: #f3e8cf;
  --bg2: #ead9b0;
  --surface: #fffaf0;
  --surface2: #f6ecd4;
  --ink: #2d2a26;
  --muted: #7a7160;
  --line: #dccfae;
  --primary: #3f9d6b;
  --primary-d: #2f7d54;
  --accent: #f08a3c;
  --danger: #d9534f;
  --star: #f5b82e;
  --cover: #ffd77a;
  --hint: #2f8fe0;
  --cell: #d8cdb4;
  --cell-open: #fffdf7;
  --shadow: 0 6px 18px rgba(80, 60, 20, 0.14);
  --band0: #e3efc9; --band1: #ecefc6; --band2: #f2e9c2; --band3: #f4e0bb; --band4: #f1d9bd;
  --band5: #dcebcf; --band6: #cde5cd; --band7: #bcdcc6; --band8: #d3cfe4; --band9: #e4c9cf;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161d18;
    --bg2: #1d2820;
    --surface: #243127;
    --surface2: #2c3b2f;
    --ink: #f1eadb;
    --muted: #a8b0a0;
    --line: #3a4b3d;
    --primary: #52b884;
    --primary-d: #3f9d6b;
    --accent: #f59a52;
    --danger: #ea6a66;
    --cover: #8a6f1f;
    --hint: #5db1ff;
    --cell: #3a4a3e;
    --cell-open: #2d3b30;
    --shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    --band0: #23331f; --band1: #2a331f; --band2: #33321f; --band3: #38301f; --band4: #3a2f22;
    --band5: #213a2b; --band6: #1f3a31; --band7: #1d3a38; --band8: #2c2b44; --band9: #3d2630;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body {
  background: linear-gradient(var(--bg), var(--bg2)) fixed;
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.4;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--hint); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }

.gi { width: 1.25em; height: 1.25em; flex: none; display: block; }
/* Twemoji art (opt-in with ?art=twemoji) is drawn with <img>, so size it like the inline SVG art */
img.art { width: 100%; height: 100%; display: block; object-fit: contain; }

/* ---- layout ------------------------------------------------------------------------------------ */
.app { max-width: 560px; margin: 0 auto; min-height: 100dvh; }
.app.view-play, .app.view-daily, .app.view-tutorial, .app.view-lesson { max-width: 1000px; } /* every screen that shows a board gets the wide layout */
.screen { padding: max(10px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); animation: enter 0.25s ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }

.bar { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; min-height: 52px; }
.bar-title { text-align: center; min-width: 0; }
.bar-title h1 { margin: 0; font-size: 20px; line-height: 1.2; }
.bar-title p { margin: 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-right { min-width: 44px; display: flex; justify-content: flex-end; }
.bar-gap { display: block; width: 44px; }

.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--surface); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12); display: grid; place-items: center; }
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line); font-size: 14px; white-space: nowrap; }
.chip .gi { width: 1.1em; height: 1.1em; color: var(--star); }
.chip b { font-weight: 800; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 22px; border-radius: 999px; border: 0;
  background: var(--surface); font-weight: 700; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.16);
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16); }
.btn.primary { background: var(--primary); color: #fff; box-shadow: 0 4px 0 var(--primary-d); }
.btn.primary:active { box-shadow: 0 1px 0 var(--primary-d); }
.btn.danger { background: var(--danger); color: #fff; box-shadow: 0 4px 0 rgba(120, 30, 30, 0.5); }
.btn.xl { width: 100%; min-height: 58px; font-size: 20px; }
.row { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.row .btn { flex: 1; }
.row.center { justify-content: center; }

.toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translate(-50%, 20px);
  background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 50; max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- dialogs ----------------------------------------------------------------------------------- */
dialog#modal { border: 0; padding: 0; background: transparent; color: var(--ink); max-width: none; max-height: none; overflow: visible; }
dialog#modal::backdrop { background: rgba(20, 16, 8, 0.55); backdrop-filter: blur(2px); }
dialog#modal.sheet {
  width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
  background: var(--surface); border-radius: 24px; padding: 20px; box-shadow: var(--shadow);
  animation: pop-in 0.22s ease-out;
}
dialog#modal.small { width: min(360px, calc(100vw - 24px)); }
@keyframes pop-in { from { opacity: 0; transform: scale(0.94) translateY(8px); } }
dialog h2 { margin: 0 0 8px; font-size: 22px; }

/* ---- home -------------------------------------------------------------------------------------- */
.home { display: flex; flex-direction: column; gap: 16px; min-height: 100dvh; }
.home-top { display: flex; justify-content: flex-end; }
.hero { text-align: center; padding: 8px 0 0; }
.hero h1 { margin: 6px 0 4px; font-size: clamp(34px, 9vw, 46px); line-height: 1.05; letter-spacing: -0.5px; }
.tagline { margin: 0 auto; max-width: 30ch; color: var(--muted); }
.scene { position: relative; height: 150px; margin: 0 auto; max-width: 420px; }
.scene > span { position: absolute; display: block; }
.scene svg { width: 100%; height: 100%; display: block; }
.sc-hero { left: 4%; bottom: 14px; width: 72px; height: 72px; animation: bob 1.6s ease-in-out infinite; z-index: 2; }
.sc-home { right: 3%; bottom: 8px; width: 96px; height: 96px; }
.sc-trail { left: 20%; right: 24%; bottom: 22px; height: 0; border-top: 5px dotted var(--primary); opacity: 0.7; }
.sc-lurk { width: 44px; height: 44px; bottom: 28px; opacity: 0.95; }
.sc-lurk.l1 { left: 33%; }
.sc-lurk.l2 { left: 47%; bottom: 50px; width: 52px; height: 52px; }
.sc-lurk.l3 { left: 62%; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.stats { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.menu-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; border: 0; border-radius: 20px;
  background: var(--surface); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12); font-weight: 700; font-size: 15px;
}
.menu-btn .gi { width: 28px; height: 28px; color: var(--primary); }
.menu-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12); }

/* ---- journey map ------------------------------------------------------------------------------- */
.lead { margin: 4px 4px 12px; text-align: center; color: var(--muted); font-size: 14px; }
.map { --u: 1px; position: relative; width: 100%; margin: 0 auto 8px; }
.map > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.band { stroke: rgba(0, 0, 0, 0.05); stroke-width: 1; }
.b0 { fill: var(--band0); } .b1 { fill: var(--band1); } .b2 { fill: var(--band2); } .b3 { fill: var(--band3); } .b4 { fill: var(--band4); }
.b5 { fill: var(--band5); } .b6 { fill: var(--band6); } .b7 { fill: var(--band7); } .b8 { fill: var(--band8); } .b9 { fill: var(--band9); }
svg .trail { fill: none; stroke: var(--muted); stroke-width: 6; stroke-dasharray: 2 11; stroke-linecap: round; opacity: 0.55; }
svg .trail.walked { stroke: var(--primary); stroke-width: 9; stroke-dasharray: none; opacity: 1; }
.lab { position: absolute; left: calc(14 * var(--u)); display: flex; align-items: center; gap: calc(6 * var(--u)); font-weight: 800; font-size: max(11px, calc(12.5 * var(--u))); color: var(--ink); opacity: 0.8; pointer-events: none; }
.lab-ico { width: calc(20 * var(--u)); height: calc(20 * var(--u)); display: block; }
.lab-ico svg { width: 100%; height: 100%; display: block; }
.node {
  position: absolute; transform: translate(-50%, -50%); width: calc(46 * var(--u)); height: calc(46 * var(--u)); min-width: 38px; min-height: 38px;
  border-radius: 50%; border: calc(3 * var(--u)) solid var(--surface); background: var(--surface); color: var(--ink);
  display: grid; place-items: center; box-shadow: 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, 0.18); z-index: 2;
}
.node .num { font-weight: 800; font-size: max(15px, calc(18 * var(--u))); line-height: 1; }
.node .gi { width: 45%; height: 45%; color: var(--muted); }
.node.done { background: var(--primary); color: #fff; }
.node.current { background: var(--accent); color: #fff; animation: pulse 1.6s ease-in-out infinite; z-index: 3; }
.node.locked { background: var(--surface2); opacity: 0.85; }
.node:active { transform: translate(-50%, -48%); }
.nstars { position: absolute; top: calc(100% + calc(1 * var(--u))); left: 50%; transform: translateX(-50%); display: flex; gap: 0; pointer-events: none; }
.nstars .st { width: calc(14 * var(--u)); height: calc(14 * var(--u)); min-width: 10px; min-height: 10px; display: block; }
.nstars .st svg { width: 100%; height: 100%; display: block; }
.st.on { color: var(--star); }
.st.off { color: rgba(0, 0, 0, 0.18); }
@keyframes pulse { 50% { box-shadow: 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, 0.18), 0 0 0 calc(8 * var(--u)) rgba(240, 138, 60, 0.3); } }
.lurk { position: absolute; width: calc(26 * var(--u)); height: calc(26 * var(--u)); min-width: 22px; min-height: 22px; pointer-events: none; z-index: 1; }
.lurk svg { width: 100%; height: 100%; display: block; }
.lurk.done { opacity: 0.3; filter: grayscale(0.7); }
.lurk.locked { opacity: 0.55; }
.pin { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; font-weight: 800; font-size: max(11px, calc(12 * var(--u))); z-index: 1; }
.pin-start .gi { width: calc(26 * var(--u)); height: calc(26 * var(--u)); color: var(--primary-d); }
.pin .house { width: calc(60 * var(--u)); height: calc(60 * var(--u)); display: block; }
.pin .house svg { width: 100%; height: 100%; display: block; }
.traveler {
  --hop: 0px; position: absolute; width: calc(44 * var(--u)); height: calc(44 * var(--u)); min-width: 34px; min-height: 34px;
  transform: translate(-50%, calc(-96% - var(--hop))); z-index: 5; pointer-events: none;
}
.traveler span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28); padding: 12%; }
.traveler svg { width: 100%; height: 100%; display: block; }
.cta { position: sticky; bottom: 0; padding: 14px 0 max(4px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg2) 45%); z-index: 6; }
.map-done { text-align: center; color: var(--muted); margin: 0; }

/* ---- play -------------------------------------------------------------------------------------- */
.play { display: flex; flex-direction: column; min-height: 100dvh; padding-bottom: 0; }
.trip { position: relative; height: 30px; margin: 2px 16px 0 10px; }
.trip-track { position: absolute; left: 0; right: 0; top: 13px; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.12); overflow: hidden; }
.trip-fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width 0.4s; }
.trip-me { position: absolute; top: 0; width: 28px; height: 28px; transform: translateX(-50%); background: #fff; border: 2px solid var(--accent); border-radius: 50%; padding: 2px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); }
.trip-me svg { width: 100%; height: 100%; display: block; }
.trip-home { position: absolute; right: -6px; top: 2px; color: var(--primary-d); }
.trip-home .gi { width: 26px; height: 26px; }
.hud { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin: 6px 2px 10px; }
.hearts { display: flex; gap: 2px; }
.heart .gi { width: 28px; height: 28px; }
.heart.on { color: #e5484d; }
.heart.off { color: rgba(0, 0, 0, 0.18); }
.story { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }
.pred { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px; padding: 2px 12px 2px 4px; }
.pred svg { width: 30px; height: 30px; display: block; }
.pred b { font-size: 18px; min-width: 1ch; }

.play-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; flex: 1; align-content: start; }
.board-col { min-width: 0; }
.side { display: none; }
.board {
  --n: 5; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px; padding: 8px;
  width: min(100%, 560px, calc(100dvh - 330px)); min-width: min(100%, 300px); margin: 0 auto;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.cell { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 10px; background: var(--cell); cursor: pointer; overflow: hidden; }
.cell .ico { position: absolute; inset: 6% 24% 24% 6%; display: block; }
.cell .ico svg { width: 100%; height: 100%; display: block; }
.cell.hidden { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12); }
.cell.hidden:hover { filter: brightness(1.05); }
.cell.open { background: var(--cell-open); box-shadow: inset 0 0 0 1.5px var(--line); }
.cell .num {
  position: absolute; right: 3%; bottom: 3%; min-width: 48%; height: 48%; display: none; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--ink); color: var(--surface); font-weight: 800; font-size: clamp(12px, 3.8vw, 20px); line-height: 1;
}
.cell.open .num { display: flex; }
.cell.open.zero .num { background: var(--primary); color: #fff; }
.cell .mark { position: absolute; right: 6%; top: 2%; font-size: clamp(12px, 4vw, 20px); line-height: 1; color: var(--danger); font-weight: 800; }
.cell.flag .mark::after { content: "⚑"; }
.cell.trap { background: var(--danger); }
.cell.trap .ico { inset: 8%; }
.cell.trap .mark { display: none; }
.cell.cover { outline: 3px solid var(--cover); outline-offset: -3px; }
.cell.cover.hidden { background-image: linear-gradient(var(--cover), var(--cover)); background-blend-mode: soft-light; }
.cell.pinned { box-shadow: inset 0 0 0 3px var(--ink); }
.cell.hint-safe { outline: 3px solid var(--primary); outline-offset: -3px; animation: blink 1s ease-in-out infinite; }
.cell.hint-mine { outline: 3px solid var(--danger); outline-offset: -3px; animation: blink 1s ease-in-out infinite; }
.cell.hint-src { outline: 3px dashed var(--hint); outline-offset: -3px; }
@keyframes pop { from { transform: scale(0.8); } to { transform: scale(1); } }
@keyframes blink { 50% { opacity: 0.55; } }

.msg { min-height: 3em; margin: 10px 6px 4px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.35; }
.tip { color: var(--muted); font-size: 12px; margin: 12px 0 0; line-height: 1.4; }

.toolbar {
  position: sticky; bottom: 0; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap;
  margin: 8px -16px 0; padding: 10px 16px max(12px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg2) 88%, transparent); backdrop-filter: blur(8px); border-top: 1.5px solid var(--line);
}
.seg { display: inline-flex; background: var(--surface2); border: 1.5px solid var(--line); border-radius: 999px; padding: 3px; }
.seg.wide { display: flex; }
.seg.wide .seg-btn { flex: 1; }
.seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: transparent; border-radius: 999px; padding: 8px 14px; font-weight: 700; min-height: 40px; }
.seg-btn[aria-pressed="true"] { background: var(--primary); color: #fff; }
.tool { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 8px 14px; border-radius: 999px; border: 0; background: var(--surface); font-weight: 700; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.14); }
.tool:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.14); }
.tool .gi { color: var(--accent); }
.badge { font-style: normal; font-size: 11px; font-weight: 800; background: var(--danger); color: #fff; border-radius: 999px; min-width: 18px; height: 18px; display: inline-grid; place-items: center; padding: 0 5px; margin-left: 2px; }
@media (max-width: 600px) {
  .tool.icon-only span { display: none; }
  .tool.icon-only { padding: 8px 14px; }
}
@media (max-width: 400px) {
  .tool span { display: none; }
  .tool .badge { position: absolute; top: -4px; right: -4px; }
  .toolbar .seg-btn span { display: none; }
  .toolbar .seg-btn { padding: 8px 16px; }
  .tool { padding: 8px 14px; }
}

@media (min-width: 860px) {
  .play-body { grid-template-columns: minmax(0, 560px) 300px; justify-content: center; }
  .side { display: block; background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; padding: 14px; align-self: start; }
  .side h3 { margin: 0 0 10px; font-size: 15px; }
  .only-narrow { display: none; }
  .board { width: min(100%, 560px, calc(100dvh - 300px)); }
}

/* legend cards and the small view diagrams */
.legend { display: flex; flex-direction: column; gap: 8px; }
.sp { display: flex; gap: 10px; align-items: center; background: var(--surface2); border: 1.5px solid var(--line); border-radius: 14px; padding: 8px 10px; }
.sp b { display: block; font-size: 14px; }
.sp small { color: var(--muted); font-size: 12px; line-height: 1.25; display: block; }
.mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; width: 70px; flex: none; }
.mini i { aspect-ratio: 1; background: var(--cell); border-radius: 2px; display: block; }
.mini i.on { background: var(--cover); }
.mini i.me { background: var(--cell-open); box-shadow: inset 0 0 0 1px var(--ink); }
.mini i svg { width: 100%; height: 100%; display: block; }
.mini.big { width: 168px; gap: 2px; }
.new-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; vertical-align: 1px; }

/* ---- lessons ----------------------------------------------------------------------------------- */
.lesson { position: relative; }
.lesson-fig { display: flex; gap: 18px; align-items: center; justify-content: center; margin: 4px 0 10px; }
.lesson-badge { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lesson-icon { display: block; width: 58px; height: 58px; }
.lesson-icon svg { width: 100%; height: 100%; display: block; }
.bignum { min-width: 42px; height: 42px; padding: 0 10px; border-radius: 999px; background: var(--ink); color: var(--surface); font-weight: 800; font-size: 22px; display: flex; align-items: center; justify-content: center; }
.lesson-text { margin: 8px 0; padding-left: 20px; line-height: 1.5; font-size: 15px; }
.lesson-text li { margin-bottom: 4px; }
.lesson-note { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.lessons { display: grid; gap: 14px; margin-top: 8px; }
.howto .lesson { background: var(--surface); border: 1.5px solid var(--line); border-radius: 20px; padding: 16px; }
.howto .lesson h2 { margin-top: 0; }

/* ---- results ----------------------------------------------------------------------------------- */
.result, .finale, .confirm { position: relative; text-align: center; }
.result-hero { display: block; width: 84px; height: 84px; margin: -8px auto 4px; background: #fff; border: 4px solid var(--primary); border-radius: 50%; padding: 10px; box-shadow: var(--shadow); animation: bob 1.4s ease-in-out infinite; }
.result-hero svg { width: 100%; height: 100%; display: block; }
.result-hero.caught { border-color: var(--danger); animation: shake 0.5s ease-in-out 2; }
@keyframes shake { 25% { transform: translateX(-8px) rotate(-6deg); } 75% { transform: translateX(8px) rotate(6deg); } }
.sub { color: var(--muted); margin: 0 0 8px; font-size: 14px; }
.big-stars { display: flex; justify-content: center; gap: 6px; margin: 6px 0; }
.big-stars .st .gi { width: 50px; height: 50px; }
.big-stars .st.on { transform: scale(0); }
.big-stars .st.on.pop { animation: star-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) forwards; }
@keyframes star-pop { from { transform: scale(0) rotate(-40deg); } to { transform: scale(1) rotate(0); } }
.score { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px 0 8px; }
.score b { font-size: 44px; line-height: 1; letter-spacing: -1px; }
.new-best { background: var(--accent); color: #fff; font-weight: 800; font-size: 12px; padding: 3px 10px; border-radius: 999px; animation: bob 1s ease-in-out infinite; }
.breakdown { margin: 8px 0 0; padding: 10px 14px; background: var(--surface2); border-radius: 14px; text-align: left; }
.breakdown div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 14px; }
.breakdown dt { color: var(--muted); }
.breakdown small { display: block; font-size: 11px; }
.breakdown dd { margin: 0; font-weight: 800; white-space: nowrap; }
.breakdown dd.neg { color: var(--danger); }
.best { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.finale-art { display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin-bottom: 4px; }
.traveler-big { width: 84px; height: 84px; background: #fff; border: 4px solid var(--accent); border-radius: 50%; padding: 10px; animation: bob 1s ease-in-out infinite; }
.house-big { width: 110px; height: 110px; }
.traveler-big svg, .house-big svg { width: 100%; height: 100%; display: block; }
.finale-stats { font-weight: 800; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -14px; left: calc(var(--i) * 3.5%); width: 8px; height: 13px; border-radius: 2px; background: var(--star); animation: fall 1.9s ease-in forwards; animation-delay: calc(var(--i) * 45ms); }
.confetti i:nth-child(3n) { background: var(--primary); }
.confetti i:nth-child(3n + 1) { background: var(--accent); }
.confetti i:nth-child(5n) { background: var(--hint); }
@keyframes fall { to { transform: translateY(520px) rotate(540deg); opacity: 0; } }

/* ---- scores ------------------------------------------------------------------------------------ */
.player-card { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; margin: 8px 0 14px; padding: 14px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 20px; }
.avatar { width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); padding: 6px; display: block; }
.avatar svg { width: 100%; height: 100%; display: block; }
.player-card b { display: block; font-size: 18px; }
.player-card small { color: var(--muted); }
.player-card dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 0; }
.player-card dl div { background: var(--surface2); border-radius: 12px; padding: 8px; text-align: center; }
.player-card dt { font-size: 11px; color: var(--muted); }
.player-card dd { margin: 0; font-weight: 800; font-size: 17px; }
.tabs { display: flex; gap: 6px; background: var(--surface2); border: 1.5px solid var(--line); border-radius: 999px; padding: 3px; margin-bottom: 12px; }
.tab { flex: 1; border: 0; background: transparent; border-radius: 999px; padding: 8px 6px; font-weight: 700; font-size: 13px; min-height: 40px; }
.tab[aria-selected="true"] { background: var(--primary); color: #fff; }
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rank-row { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 8px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; padding: 8px 12px; }
.rank-row.me { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.rk { font-weight: 800; color: var(--muted); text-align: center; }
.nm b { display: block; font-size: 15px; }
.nm small { color: var(--muted); font-size: 12px; }
.rs { display: flex; }
.rs .st { width: 15px; height: 15px; display: block; }
.rs .st svg { width: 100%; height: 100%; display: block; }
.val { font-weight: 800; font-size: 17px; }
.empty { text-align: center; color: var(--muted); padding: 28px 12px; }
.notice { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1.5px dashed var(--line); border-radius: 16px; padding: 16px; }
.notice .gi { width: 28px; height: 28px; color: var(--primary); margin-top: 2px; }
.notice p { margin: 0 0 6px; }

/* ---- settings ---------------------------------------------------------------------------------- */
.card { background: var(--surface); border: 1.5px solid var(--line); border-radius: 20px; padding: 16px; margin: 12px 0; }
.card h2 { margin: 0 0 10px; font-size: 16px; }
.travelers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.trv { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border: 2px solid var(--line); border-radius: 16px; background: var(--surface2); }
.trv span { display: block; width: 100%; max-width: 52px; }
.trv svg { width: 100%; display: block; }
.trv small { font-size: 11px; font-weight: 700; }
.trv[aria-checked="true"] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, var(--surface)); }
.field { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
.field input { border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; background: var(--surface2); font-weight: 600; }
.switch-row { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-weight: 700; }
.switch { width: 54px; height: 32px; border-radius: 999px; border: 0; background: var(--line); position: relative; padding: 0; transition: background 0.15s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); transition: transform 0.15s; }
.switch[aria-checked="true"] { background: var(--primary); }
.switch[aria-checked="true"] i { transform: translateX(22px); }
.card .btn.danger { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .big-stars .st.on { transform: none; }
}

/* ---- surprises: cascades, treasure, hats, friends, wardrobe ------------------------------------------ */
.cell.pop { animation: pop 0.22s ease-out backwards; animation-delay: var(--d, 0ms); }
.board { position: relative; }
.cell .gem { position: absolute; left: 6%; bottom: 6%; width: 36%; height: 36%; display: none; pointer-events: none; }
.cell.open .gem { display: block; }
.cell .gem svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); }
.cell.treasure { box-shadow: inset 0 0 0 2px var(--star); }
.gain { position: absolute; z-index: 6; display: flex; align-items: center; gap: 4px; font-size: 20px; color: var(--accent); text-shadow: 0 1px 0 #fff; pointer-events: none; animation: float-up 1.4s ease-out forwards; }
.gain svg { width: 28px; height: 28px; }
@keyframes float-up {
  from { opacity: 0; transform: translate(-50%, 8px) scale(0.6); }
  15% { opacity: 1; transform: translate(-50%, -8px) scale(1.15); }
  to { opacity: 0; transform: translate(-50%, -56px) scale(1); }
}
.badge.free { background: var(--primary); }
.found { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; font-weight: 800; }
.found svg { width: 28px; height: 28px; }
.found span { margin-left: 2px; }

.chip.carrot svg { width: 1.3em; height: 1.3em; color: inherit; }

/* hat on a traveler portrait */
.hat { position: absolute; left: 50%; top: -30%; width: 78%; transform: translateX(-50%) rotate(-4deg); pointer-events: none; z-index: 3; }
.hat svg { width: 100%; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
.traveler span, .result-hero, .avatar, .traveler-big { position: relative; }
.traveler span { overflow: visible; }

/* the home menu now has five buttons: let the last one span the row */
.menu-grid .menu-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
.menu-ico { display: block; width: 52px; height: 32px; }
.menu-ico svg { width: 100%; height: 100%; display: block; }

/* surprise event sheet */
.event { text-align: center; }
.event-friend { display: block; width: 84px; height: 84px; margin: -6px auto 6px; background: #fff; border: 4px solid var(--hint); border-radius: 50%; padding: 10px; box-shadow: var(--shadow); animation: bob 1.4s ease-in-out infinite; }
.event-friend svg { width: 100%; height: 100%; display: block; }
.event p { margin: 0 0 8px; line-height: 1.45; }
.reward { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 20px; color: var(--accent); }
.reward svg { width: 30px; height: 30px; }

/* wardrobe */
.wardrobe .preview { display: grid; place-items: center; margin: 44px 0 6px; }
.avatar.big { width: 124px; height: 124px; padding: 14px; border-width: 4px; }
.wardrobe .stats { margin: 14px 0; }
.hat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hat-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 10px; background: var(--surface); border: 2px solid var(--line); border-radius: 18px; text-align: center; }
.hat-card.worn { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.hat-art { display: block; width: 88px; height: 56px; }
.hat-art svg { width: 100%; height: 100%; display: block; }
.hat-art.none { display: grid; place-items: center; font-size: 28px; color: var(--muted); }
.hat-card .btn { width: 100%; min-height: 40px; padding: 6px 12px; font-size: 14px; }
.hat-card .btn[aria-disabled="true"] { opacity: 0.45; }
.hat-card .btn[aria-pressed="true"] { background: var(--surface2); color: var(--muted); box-shadow: none; }
.price { display: inline-flex; align-items: center; gap: 3px; }
.price svg { width: 18px; height: 18px; }

/* ---- pacing: story cards, bosses, picnics, friends ------------------------------------------------------ */
.tale { text-align: center; }
.tale-pic { display: block; width: 88px; height: 88px; margin: -6px auto 6px; background: #fff; border: 4px solid var(--hint); border-radius: 50%; padding: 10px; box-shadow: var(--shadow); animation: bob 1.5s ease-in-out infinite; }
.tale-pic.boss { border-color: var(--danger); }
.tale-pic svg { width: 100%; height: 100%; display: block; }
.tale p { margin: 0 0 6px; line-height: 1.45; }
.boss-won { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0; font-size: 17px; color: var(--danger); }
.boss-ico, .friend-ico { display: inline-block; width: 40px; height: 40px; flex: none; }
.boss-ico svg, .friend-ico svg { width: 100%; height: 100%; display: block; }
.joins { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 6px; font-weight: 700; color: var(--primary-d); }
.joins .friend-ico { width: 34px; height: 34px; background: #fff; border: 2px solid var(--hint); border-radius: 50%; padding: 3px; }

/* map: boss and picnic nodes */
.node.boss { width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-color: var(--star); box-shadow: 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, 0.2), 0 0 0 calc(3 * var(--u)) rgba(245, 184, 46, 0.45); }
.node.boss .num { font-size: max(17px, calc(21 * var(--u))); }
.node.picnic { border-style: dashed; }
.node .kind { position: absolute; top: -14%; right: -18%; width: 46%; height: 46%; min-width: 20px; min-height: 20px; display: block; background: #fff; border: 2px solid var(--line); border-radius: 50%; padding: 2px; pointer-events: none; }
.node .kind svg { width: 100%; height: 100%; display: block; }
.node.locked .kind { opacity: 0.7; }

/* friends that follow the traveler on the map */
.followers { position: absolute; right: 64%; bottom: 6%; display: flex; flex-direction: row-reverse; pointer-events: none; }
.followers i { display: block; width: calc(26 * var(--u)); height: calc(26 * var(--u)); min-width: 22px; min-height: 22px; margin-right: calc(-9 * var(--u)); background: #fff; border: 2px solid var(--hint); border-radius: 50%; padding: 2px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.followers i svg { width: 100%; height: 100%; display: block; }
.traveler { overflow: visible; }

/* wardrobe: friends row */
.friends-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 10px 14px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; }
.friends-row b { margin-right: 6px; font-size: 14px; }
.friends-row .friend-ico { width: 38px; height: 38px; background: #fff; border: 2px solid var(--hint); border-radius: 50%; padding: 3px; }
.friends-row small { color: var(--muted); }

/* ---- a predator gets you ------------------------------------------------------------------------------ */
.board.shake { animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes shake {
  10%, 90% { transform: translate3d(-3px, 0, 0) rotate(-0.4deg); }
  20%, 80% { transform: translate3d(6px, 2px, 0) rotate(0.6deg); }
  30%, 50%, 70% { transform: translate3d(-9px, -2px, 0) rotate(-0.8deg); }
  40%, 60% { transform: translate3d(9px, 2px, 0) rotate(0.8deg); }
}
.board.nope { animation: nope 0.35s ease-in-out; }
@keyframes nope { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.hit-flash { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(220, 38, 38, 0) 35%, rgba(220, 38, 38, 0.62) 100%); animation: flash 0.65s ease-out forwards; }
@keyframes flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.pounce { position: absolute; width: calc(var(--s) * 3); height: calc(var(--s) * 3); transform: translate(-50%, -50%); pointer-events: none; z-index: 8; }
.pounce .beast { position: absolute; inset: 0; opacity: 0; animation: lunge 1s cubic-bezier(0.2, 0.9, 0.3, 1.15) forwards; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4)); }
.pounce .beast svg { width: 100%; height: 100%; display: block; }
@keyframes lunge {
  0% { opacity: 0; transform: scale(0.15) rotate(-12deg); }
  22% { opacity: 1; transform: scale(1.15) rotate(-5deg); }
  55% { opacity: 1; transform: scale(1) rotate(3deg); }
  100% { opacity: 0; transform: scale(1.12) rotate(0); }
}
.pounce .claws { position: absolute; inset: 8%; opacity: 0; animation: claws 1s ease-out forwards; }
.pounce .claws svg { width: 100%; height: 100%; display: block; }
.pounce .c { stroke: #ff2d2d; stroke-width: 7; stroke-dasharray: 120; stroke-dashoffset: 120; animation: slash 0.3s ease-out forwards; }
.pounce .c1 { animation-delay: 0.12s; }
.pounce .c2 { animation-delay: 0.18s; }
.pounce .c3 { animation-delay: 0.24s; }
@keyframes slash { to { stroke-dashoffset: 0; } }
@keyframes claws { 0%, 10% { opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.pounce .roar {
  position: absolute; left: 50%; top: -4%; opacity: 0; white-space: nowrap; transform: translateX(-50%) scale(0.5);
  font-size: calc(var(--s) * 0.62); font-weight: 900; letter-spacing: 1px; color: #fff; -webkit-text-stroke: 3px var(--danger); paint-order: stroke fill;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); animation: roar 1s ease-out forwards;
}
@keyframes roar {
  0%, 15% { opacity: 0; transform: translateX(-50%) scale(0.5); }
  30% { opacity: 1; transform: translateX(-50%) scale(1.2); }
  70% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(1); }
}
.heart.break { animation: heart-break 0.7s ease-out; }
@keyframes heart-break {
  0% { transform: scale(1.5); color: #e5484d; }
  25% { transform: scale(0.7) rotate(-18deg); }
  50% { transform: scale(1.2) rotate(12deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ---- fireworks ----------------------------------------------------------------------------------------- */
#fx-layer { position: fixed; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; pointer-events: none; }

/* ---- tutorial coach -------------------------------------------------------------------------------------- */
.coach { display: flex; gap: 10px; align-items: center; margin: 0 0 10px; padding: 10px 12px; background: var(--surface); border: 2px solid var(--hint); border-radius: 18px; box-shadow: var(--shadow); }
.coach-pic { position: relative; flex: none; width: 48px; height: 48px; background: #fff; border: 3px solid var(--accent); border-radius: 50%; padding: 4px; }
.coach-pic svg { width: 100%; height: 100%; display: block; }
.coach p { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 600; min-height: 2.8em; display: flex; align-items: center; }
.cell.coach-target { outline: 4px solid var(--hint); outline-offset: -4px; animation: blink 0.9s ease-in-out infinite; }
.seg-btn.nudge { animation: nudge 0.6s ease-in-out 3; box-shadow: 0 0 0 3px var(--hint); }
@keyframes nudge { 50% { transform: scale(1.12); } }
.chip.skip { border: 1.5px solid var(--line); font-weight: 700; cursor: pointer; }

/* ---- rocks and row/column totals ----------------------------------------------------------------------- */
.board { --lw: 28px; }
.cell.rock { background: color-mix(in srgb, var(--cell) 70%, #8f8b82); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15); cursor: default; }
.cell.rock .ico { inset: 4%; }
.cell.rock .num, .cell.rock .mark, .cell.rock .gem { display: none; }
.cell.rock:hover { filter: none; }
.board.with-lines { align-content: start; }
.lineclue {
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--surface2); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line);
  font-weight: 800; font-size: clamp(12px, 3.6vw, 17px); line-height: 1;
}
.lineclue.col { height: var(--lw); }
.lineclue.row { width: var(--lw); }
.lineclue.pinned { background: var(--cover); box-shadow: inset 0 0 0 2px var(--ink); }
.lineclue.hint-src { outline: 3px dashed var(--hint); outline-offset: -3px; }
.lineclue.done { opacity: 0.4; }
.lineclue:active { transform: scale(0.94); }

/* lesson pictures for the two rules */
.mini i.rock { background: color-mix(in srgb, var(--cell) 70%, #8f8b82); }
.mini i.rock svg { width: 100%; height: 100%; display: block; }
.mini i.beyond { opacity: 0.4; filter: grayscale(0.7); }
.mini i.beyond svg { width: 100%; height: 100%; display: block; }
.lines-fig { display: grid; grid-template-columns: repeat(5, 30px); gap: 3px; }
.lines-fig .lf-tot { display: grid; place-items: center; height: 30px; border-radius: 8px; background: var(--surface2); box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 800; font-size: 15px; }
.lines-fig .lf-corner { display: block; }
.lines-fig .lf-tile { display: block; width: 30px; height: 30px; border-radius: 6px; background: var(--cell); }
.lines-fig .lf-tile.trap { background: var(--cell-open); box-shadow: inset 0 0 0 1.5px var(--line); }
.lines-fig .lf-tile svg { width: 100%; height: 100%; display: block; }
.rule-ico { display: block; width: 44px; height: 44px; flex: none; }
.rule-ico svg { width: 100%; height: 100%; display: block; }

/* ---- easier play ------------------------------------------------------------------------------- */
/* remaining count badge: how many predators a number still has to find */
.cell .rem {
  position: absolute; right: 3%; top: 3%; min-width: 1.5em; height: 1.5em; padding: 0 0.25em; border-radius: 999px;
  display: none; place-items: center; font-size: clamp(9px, 2.6vw, 12px); font-weight: 800; line-height: 1;
  background: var(--primary); color: #fff; pointer-events: none;
}
.cell.open .rem:not(:empty) { display: grid; }
.cell.open.over .rem { background: var(--danger); }
.cell.open.sat { background: color-mix(in srgb, var(--cell-open) 82%, var(--primary)); }
.cell.open.over { box-shadow: inset 0 0 0 2.5px var(--danger); }

/* green "safe" note, shaped like a check so it never depends on colour alone */
.cell.note { box-shadow: inset 0 0 0 3px var(--primary), inset 0 -3px 0 rgba(0, 0, 0, 0.12); }
.cell.note .mark::after { content: "✓"; color: var(--primary); }
.cell.armed { outline: 3px solid var(--ink); outline-offset: -3px; animation: blink 0.9s ease-in-out infinite; }
.cell.hit-why { box-shadow: inset 0 0 0 3px var(--danger); }

/* hint steps differ by shape too: the tile to open has a solid frame and a check, the predator a double frame and a flag */
.cell.hint-safe::after, .cell.hint-mine::after {
  content: ""; position: absolute; left: 6%; top: 4%; font-weight: 800; font-size: clamp(12px, 4vw, 20px); line-height: 1; pointer-events: none;
}
.cell.hint-safe::after { content: "✓"; color: var(--primary); }
.cell.hint-mine::after { content: "⚑"; color: var(--danger); }
.cell.hint-mine { outline-style: double; outline-width: 5px; }

.undo-wrap { display: flex; justify-content: center; min-height: 0; }
.undo {
  display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 6px; padding: 8px 18px; min-height: 44px; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--bg2); font-weight: 800; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2); animation: undo-in 0.2s ease-out;
}
.undo[hidden] { display: none; }
@keyframes undo-in { from { transform: translateY(6px); opacity: 0; } }
.tool.nudge { animation: nudge 0.6s ease-in-out 3; box-shadow: 0 0 0 3px var(--hint); }

/* big tiles: the board keeps a minimum tile size and scrolls sideways if it must */
.board-scroll { overflow-x: auto; overscroll-behavior-x: contain; margin: 0 -4px; padding: 0 4px; }
.big-tiles .board { width: max(min(100%, 560px, calc(100dvh - 330px)), calc(var(--n) * 44px + 16px + (var(--n) - 1) * 4px)); }
.big-tiles .board.with-lines { width: max(min(100%, 560px, calc(100dvh - 330px)), calc(var(--n) * 44px + var(--lw) + 24px + var(--n) * 4px)); }
.big-tiles .board-scroll { overflow-x: auto; }
.big-tiles .board { margin-left: 0; margin-right: 0; }
@media (min-width: 560px) { .big-tiles .board { margin-left: auto; margin-right: auto; } }

/* high contrast and patterns */
[data-contrast="high"] {
  --line: #1c1c1c; --muted: #3a3a3a; --cover: #1560d4;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-contrast="high"] { --line: #f2f2f2; --muted: #e0e0e0; --cover: #6fb0ff; } }
[data-contrast="high"] .cell.hidden { box-shadow: inset 0 0 0 2px var(--ink); background-image: repeating-linear-gradient(45deg, transparent 0 6px, rgba(0, 0, 0, 0.1) 6px 8px); }
[data-contrast="high"] .cell.open { box-shadow: inset 0 0 0 2px var(--ink); }
[data-contrast="high"] .cell.trap { background-image: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(255, 255, 255, 0.28) 6px 9px); }
[data-contrast="high"] .cell.flag { box-shadow: inset 0 0 0 3px var(--danger); }
[data-contrast="high"] .cell.cover { outline-width: 4px; outline-style: dotted; }
[data-contrast="high"] .cell .num { font-weight: 900; }
[data-contrast="high"] .cell.hint-src { outline-width: 4px; }

/* settings: switches with a description, and the backup box */
.switch-row small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 2px; max-width: 34ch; }
.backup-box { width: 100%; box-sizing: border-box; min-height: 5.5em; margin: 8px 0; padding: 10px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface2); color: var(--ink); font: 12px/1.4 ui-monospace, Menlo, monospace; word-break: break-all; resize: vertical; }
.keys { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 6px 0 0; }

.undo-wrap { position: relative; }
.zoom-chip { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 4px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 700; font-size: 13px; color: var(--ink); }
.zoom-chip .gi { width: 18px; height: 18px; color: var(--accent); }
.zoom-chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.zoom-chip[aria-pressed="true"] .gi { color: #fff; }
.undo-wrap:has(.zoom-chip:not([hidden])) { min-height: 40px; }
/* on a zoomed board the row totals stay at the left edge while the tiles scroll */
.lineclue.row { position: sticky; left: 0; z-index: 2; }

/* phones: only the active mode keeps its label, so the toolbar stays on one row */
@media (max-width: 520px) {
  .toolbar .seg-btn[aria-pressed="false"] span { display: none; }
  .toolbar .seg-btn[aria-pressed="false"] { padding: 8px 14px; }
  .toolbar .tool span { display: none; }
  .toolbar .tool { padding: 8px 14px; }
  .toolbar .tool .badge { position: absolute; top: -4px; right: -4px; }
}

/* ---- daily challenge ----------------------------------------------------------------------------- */
.daily-card { display: flex; align-items: center; gap: 12px; width: 100%; margin: 12px 0 0; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); text-align: left; color: var(--ink); }
.daily-card .daily-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--star); font-size: 22px; flex: none; }
.daily-card.done .daily-ico { background: var(--primary); color: #fff; }
.daily-card .daily-ico .gi { width: 24px; height: 24px; }
.daily-text { flex: 1; min-width: 0; }
.daily-text b { display: block; font-size: 16px; }
.daily-text small { display: block; color: var(--muted); font-size: 13px; }
.daily-streak { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 800; }
.streak-box { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: 6px 0 2px; flex-wrap: wrap; }
.streak-box .flame { font-size: 24px; }
.streak-box b { font-size: 28px; }
.streak-box small { flex-basis: 100%; text-align: center; color: var(--muted); }
.share-box { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--surface2); border: 1.5px solid var(--line); font: 14px/1.45 ui-monospace, Menlo, monospace; white-space: pre-wrap; text-align: left; overflow-wrap: anywhere; }

/* ---- sticker book ---------------------------------------------------------------------------------- */
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.sticker { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px 12px; text-align: center; border: 1.5px solid var(--line); border-radius: 18px; background: var(--surface); }
.sticker b { font-size: 15px; }
.sticker small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.sticker em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
.sticker-art { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--star) 35%, var(--surface)); box-shadow: inset 0 0 0 3px var(--star); }
.sticker-art svg { width: 70%; height: 70%; display: block; }
.sticker-art[data-kind="glyph"] svg { color: var(--primary-d); }
.sticker.on { box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08); }
.sticker.off .sticker-art { background: var(--surface2); box-shadow: inset 0 0 0 3px var(--line); }
.sticker.off .sticker-art svg { filter: grayscale(1); opacity: 0.35; }
.sticker-lock { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--line); }
.sticker-lock .gi { width: 14px; height: 14px; color: var(--muted); }
.sticker.off b { color: var(--muted); }
.sticker-prog { width: 80%; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.sticker-prog i { display: block; height: 100%; background: var(--primary); }
.fresh-stickers { margin: 10px 0 0; padding: 8px; border-radius: 14px; background: var(--surface2); border: 1.5px dashed var(--star); }
.fresh-stickers p { margin: 0 0 6px; font-weight: 800; font-size: 13px; }
.fresh-stickers .sticker { border: 0; background: transparent; box-shadow: none; padding: 4px; flex-direction: row; text-align: left; gap: 10px; }
.fresh-stickers .sticker-art { width: 44px; height: 44px; flex: none; }
.sticker-text { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; }
.fresh-stickers .sticker-text { align-items: flex-start; width: auto; }
.menu-btn { position: relative; }
.menu-count { position: absolute; top: 6px; right: 10px; font-size: 12px; font-weight: 800; color: var(--muted); }

.lesson-wrap { margin-bottom: 18px; }
.lesson-wrap .row.center { justify-content: center; margin-top: 8px; }
.lesson-wrap .btn .gi { width: 18px; height: 18px; }

/* ---- blitz ------------------------------------------------------------------------------------------ */
.blitz-hud { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; }
.blitz-bar { position: relative; flex: 1; height: 30px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line); overflow: hidden; }
.blitz-bar i { position: absolute; inset: 0 auto 0 0; background: var(--primary); transition: width 0.12s linear; }
.blitz-bar i.low { background: var(--danger); animation: blink 0.5s ease-in-out infinite; }
.blitz-bar b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; color: var(--ink); mix-blend-mode: normal; text-shadow: 0 0 4px var(--surface); }
.gain.neg { color: var(--danger); }
.gain.pos { color: var(--primary-d); }
.blitz-intro p { max-width: 34ch; }
.blitz-result .score b { font-size: 56px; }
.menu-btn small.menu-count { font-variant-numeric: tabular-nums; }

/* ---- Tet event --------------------------------------------------------------------------------------- */
.tet-banner { display: flex; align-items: center; gap: 12px; margin: 10px 0 0; padding: 10px 14px; border-radius: 16px; color: #fff3d6; background: linear-gradient(135deg, #c2271f, #e04a2f); box-shadow: 0 3px 0 rgba(120, 20, 10, 0.35); }
.tet-banner .tet-ico { flex: none; width: 38px; height: 38px; }
.tet-banner .tet-ico svg { width: 100%; height: 100%; display: block; }
.tet-banner b { display: block; font-size: 16px; color: #ffd24d; }
.tet-banner small { display: block; font-size: 12.5px; line-height: 1.3; opacity: 0.95; }
.tet-banner em { margin-left: auto; font-style: normal; font-weight: 800; font-size: 13px; background: rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
[data-season="tet"] .home h1 { color: #c2271f; }
@media (prefers-color-scheme: dark) { [data-season="tet"] .home h1 { color: #ff8a70; } }

/* result sheets can be taller than a phone screen: keep their buttons in reach while the rest scrolls */
dialog#modal.sheet .result > .row { position: sticky; bottom: -20px; margin: 12px -20px -20px; padding: 12px 20px 20px; background: linear-gradient(to bottom, transparent, var(--surface) 22%); }
.breakdown dd { display: inline-flex; align-items: center; gap: 4px; }
.breakdown dd svg { width: 20px; height: 20px; }
.share-box { font-size: 13px; }
/* Blitz keeps the label on its skip button: it costs time, so it must say so */
.blitz .toolbar .tool span { display: inline; }

/* ---- Night Safari: sleepy owls and territories ---------------------------------------------------- */
.cell.owl .num { min-width: 0; padding: 0 0.5em; font-size: clamp(9px, 2.5vw, 13px); letter-spacing: 0.02em; }
/* each territory has its own tint on the tiles that are still hidden, plus a small total in its first tile */
.cell.hidden.rg0 { background: color-mix(in srgb, var(--cell) 62%, #f08c7c); }
.cell.hidden.rg1 { background: color-mix(in srgb, var(--cell) 62%, #6fc08f); }
.cell.hidden.rg2 { background: color-mix(in srgb, var(--cell) 62%, #6fa8e6); }
.cell.hidden.rg3 { background: color-mix(in srgb, var(--cell) 62%, #e6c75a); }
.cell.hidden.rg4 { background: color-mix(in srgb, var(--cell) 62%, #ac90de); }
.cell.hidden.rg5 { background: color-mix(in srgb, var(--cell) 62%, #f2a65a); }
.cell.open.rg0 { box-shadow: inset 0 0 0 3px #f08c7c; }
.cell.open.rg1 { box-shadow: inset 0 0 0 3px #6fc08f; }
.cell.open.rg2 { box-shadow: inset 0 0 0 3px #6fa8e6; }
.cell.open.rg3 { box-shadow: inset 0 0 0 3px #e6c75a; }
.cell.open.rg4 { box-shadow: inset 0 0 0 3px #ac90de; }
.cell.open.rg5 { box-shadow: inset 0 0 0 3px #f2a65a; }
.lineclue.region { position: relative; z-index: 3; align-self: start; justify-self: start; min-width: 22px; height: 22px; padding: 0 5px; margin: 2px; border-radius: 999px; font-size: 13px; background: var(--surface); box-shadow: 0 0 0 2px var(--ink); }
.lineclue.region.rg0 { background: #f8c9c0; } .lineclue.region.rg1 { background: #bfe5cd; } .lineclue.region.rg2 { background: #c2daf6; }
.lineclue.region.rg3 { background: #f4e6a8; } .lineclue.region.rg4 { background: #d9cbf0; } .lineclue.region.rg5 { background: #f8d9b8; }
.lineclue.region.pinned { box-shadow: 0 0 0 3px var(--ink); }
/* territories without relying on colour: each gets its own hatching in high-contrast mode */
[data-contrast="high"] .cell.hidden.rg0 { background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(0, 0, 0, 0.18) 5px 7px); }
[data-contrast="high"] .cell.hidden.rg1 { background-image: repeating-linear-gradient(-45deg, transparent 0 5px, rgba(0, 0, 0, 0.18) 5px 7px); }
[data-contrast="high"] .cell.hidden.rg2 { background-image: repeating-linear-gradient(0deg, transparent 0 5px, rgba(0, 0, 0, 0.18) 5px 7px); }
[data-contrast="high"] .cell.hidden.rg3 { background-image: repeating-linear-gradient(90deg, transparent 0 5px, rgba(0, 0, 0, 0.18) 5px 7px); }
[data-contrast="high"] .cell.hidden.rg4 { background-image: radial-gradient(rgba(0, 0, 0, 0.25) 1.5px, transparent 2px); background-size: 8px 8px; }
[data-contrast="high"] .cell.hidden.rg5 { background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(0, 0, 0, 0.18) 4px 5px, transparent 5px 9px, rgba(0, 0, 0, 0.18) 9px 10px); }
.regions-fig { display: grid; grid-template-columns: repeat(4, 38px); gap: 2px; }
.regions-fig .lf-tile { position: relative; display: block; width: 38px; height: 38px; border-radius: 6px; }
.regions-fig .lf-tile.trap svg { width: 100%; height: 100%; display: block; }
.regions-fig .lf-tot { position: absolute; left: 2px; top: 2px; min-width: 16px; height: 16px; display: grid; place-items: center; font-size: 11px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1.5px var(--ink); }
.regions-fig .rg0 { background: #f8c9c0; } .regions-fig .rg1 { background: #bfe5cd; } .regions-fig .rg2 { background: #c2daf6; } .regions-fig .rg3 { background: #f4e6a8; }

.night { --n-bg: #25305c; --n-card: #34407a; }
.night-progress { text-align: center; color: var(--muted); font-weight: 700; margin: 4px 0 12px; }
.night-stage { margin: 0 0 18px; padding: 14px; border-radius: 20px; background: linear-gradient(160deg, #2b3868, #1d2547); color: #eef1ff; box-shadow: var(--shadow); }
.night-stage h2 { margin: 0 0 12px; font-size: 17px; color: #ffe08a; }
.night-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.night-node { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; aspect-ratio: 1; min-height: 62px; border: 0; border-radius: 16px; background: #3c4a8a; color: #fff; font-weight: 800; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
.night-node b { font-size: 18px; }
.night-node.done { background: #4a5ca8; }
.night-node.boss { box-shadow: 0 0 0 2px #ffe08a, 0 3px 0 rgba(0, 0, 0, 0.3); }
.night-node:disabled { opacity: 0.55; cursor: not-allowed; }
.night-node .st { width: 11px; height: 11px; }
.night-stars { display: inline-flex; }
.night-lock .gi { width: 16px; height: 16px; }
.night-boss { position: absolute; top: -8px; right: -6px; width: 26px; height: 26px; border-radius: 50%; background: #1d2547; padding: 2px; }
.night-boss svg { width: 100%; height: 100%; display: block; }
.night-locked { text-align: center; }
.night-locked .night-moon .gi { width: 40px; height: 40px; color: #6a78c8; }
.menu-btn.night-btn { background: linear-gradient(160deg, #2b3868, #1d2547); color: #eef1ff; border-color: #1d2547; }
.menu-btn.night-btn .gi { color: #ffe08a; }
.menu-btn.night-btn .menu-count { color: #c6cdf5; }

.board-switch { margin: 0 0 10px; }
.verified-note { text-align: center; font-size: 12px; margin: 10px 0 0; }

/* ---- wide play screens ---------------------------------------------------------------------------------------------
   The quick start and the practice lessons have no side panel: one column, centred, with the coach box exactly as wide as
   the board, and the whole thing centred in the window. */
.play-body.solo { grid-template-columns: minmax(0, 560px); justify-content: center; align-content: center; }
.play-body.solo .board-col { width: min(100%, 560px, calc(100dvh - 280px)); min-width: min(100%, 300px); margin: 0 auto; }
.play-body.solo .board { width: 100%; }
.play-body.solo .coach p { font-size: 16px; }
.play-body.solo .msg { min-height: 1.4em; }

/* beside the board, the lookout panel scrolls on its own when it is long (the daily challenge can have every species) */
@media (min-width: 930px) {
  .side { position: sticky; top: 10px; max-height: calc(100dvh - 20px); overflow-y: auto; }
}
/* When the panel has many cards (4 or more: the daily challenge, the later levels), or the window is a tablet, the panel goes under
   the board as a row of cards that scrolls sideways, so the board can be as wide as the window allows. */
@media (min-width: 600px) {
  .play-body.tips-below { grid-template-columns: minmax(0, 1fr); }
  .play-body.tips-below .board { width: min(100%, 600px, calc(100dvh - 330px)); }
  .play-body.tips-below .side { display: block; position: static; max-height: none; overflow: visible; background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; padding: 12px 14px; }
  .play-body.tips-below .side h3 { margin: 0 0 8px; font-size: 15px; }
  .play-body.tips-below .side .legend { flex-direction: row; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .play-body.tips-below .side .legend .sp { flex: 0 0 min(270px, 78%); scroll-snap-align: start; }
  .play-body.tips-below .side .tip { margin-top: 4px; }
  .play-body.tips-below ~ .toolbar .only-narrow, .tips-below .only-narrow { display: none; }
}
@media (min-width: 600px) and (max-width: 929px) {
  .play-body { grid-template-columns: minmax(0, 1fr); }
  .board { width: min(100%, 560px, calc(100dvh - 330px)); }
  .side { display: block; background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; padding: 12px 14px; }
  .side h3 { margin: 0 0 8px; font-size: 15px; }
  .side .legend { flex-direction: row; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .side .legend .sp { flex: 0 0 min(270px, 78%); scroll-snap-align: start; }
  .side .tip { margin-top: 4px; }
  .only-narrow { display: none; }
}