/* ==================================================================
 * Doodoku
 * Phone-first. One column, at most 520px wide, centred on bigger screens.
 * ================================================================== */

/* ------------------------------------------------------------------
 * Colour schemes. js/themes.js lists them; the head script in
 * index.html sets data-theme before first paint.
 *
 * --c0 … --c9 are each scheme's ten yard colours (ten for the 10×10 finale), chosen to suit it
 * (bakery, garden, berry patch, candy shop, lantern-lit, moonlit) while
 * staying apart: no two closer than ~0.063 in OKLab. Re-check after any
 * change. The colour-blind textures follow position, so --c0 is always dots.
 * ------------------------------------------------------------------ */
:root,
:root[data-theme="biscuit"] {
  --bg: #FBF6EE;
  --page: #EFE6D8;
  --surface: #FFFDF9;
  --line: #E6DACA;
  --line-soft: #F3EADC;
  --chip: #F3EADC;
  --track: #F0E6D8;
  --dashed: #D6C6B0;
  --ink: #2B1D16;
  --ink-rgb: 43, 29, 22;
  --muted: #7A6656;
  --faint: #9A8674;
  --accent: #B8743A;
  --on-accent: #FFFDF9;
  --accent-ink: #8A5326;
  --hero: #2B1D16;
  --hero-ink: #FBF6EE;
  --hero-muted: #D9CBB8;
  --hero-accent: #E3B47E;
  --hero-btn: #FBF6EE;
  --hero-btn-ink: #2B1D16;
  --solid: #2B1D16;
  --on-solid: #FBF6EE;
  --danger: #B7473C;
  --danger-line: #EBC9C4;
  --tab-off: #B5A592;
  --c0: #C9B5EC;
  --c1: #FFCB94;
  --c2: #9FC4FF;
  --c3: #B8E0A6;
  --c4: #E2DDD6;
  --c5: #FF9C85;
  --c6: #EAF294;
  --c7: #C9BC9C;
  --c8: #F2B1D0;
  --c9: #80EBF7;
  --scrim: rgba(43, 29, 22, .5);
  color-scheme: light;
}

:root[data-theme="midnight"] {
  --spent-base: #8A8079;
  --bg: #1C1512;
  --page: #140F0C;
  --surface: #261D18;
  --line: #3A2D25;
  --line-soft: #30251F;
  --chip: #33271F;
  --track: #33271F;
  --dashed: #4A3A30;
  --ink: #F4EADC;
  --ink-rgb: 244, 234, 220;
  --muted: #BCA894;
  --faint: #9B8774;
  --accent: #D79457;
  --on-accent: #1C1512;
  --accent-ink: #E8B27E;
  --hero: #3A2B21;
  --hero-ink: #F8EFE3;
  --hero-muted: #CDBBA6;
  --hero-accent: #EBB884;
  --hero-btn: #F4EADC;
  --hero-btn-ink: #1C1512;
  --solid: #F4EADC;
  --on-solid: #1C1512;
  --danger: #E06A5C;
  --danger-line: #5A2E28;
  --tab-off: #6E5D50;
  --c0: #E0A355;
  --c1: #C66B5A;
  --c2: #A884BC;
  --c3: #5FAFA7;
  --c4: #D9C46A;
  --c5: #CB8BA2;
  --c6: #7B99D1;
  --c7: #BDAA8B;
  --c8: #86B776;
  --c9: #A18B32;
  --scrim: rgba(0, 0, 0, .6);
  color-scheme: dark;
}

:root[data-theme="meadow"] {
  --bg: #F2F5EB;
  --page: #E4EAD9;
  --surface: #FCFDF8;
  --line: #D9E1CB;
  --line-soft: #E6ECDA;
  --chip: #E6ECDA;
  --track: #E2E9D5;
  --dashed: #C3CFAF;
  --ink: #1F2A1C;
  --ink-rgb: 31, 42, 28;
  --muted: #5E6C57;
  --faint: #829078;
  --accent: #5E8A3E;
  --on-accent: #FCFDF8;
  --accent-ink: #44692B;
  --hero: #26351F;
  --hero-ink: #F2F5EB;
  --hero-muted: #C9D5BC;
  --hero-accent: #BCD995;
  --hero-btn: #F2F5EB;
  --hero-btn-ink: #1F2A1C;
  --solid: #26351F;
  --on-solid: #F2F5EB;
  --danger: #B7473C;
  --danger-line: #EBC9C4;
  --tab-off: #A3AF97;
  --c0: #B5D39B;
  --c1: #F6DC7A;
  --c2: #98B4F2;
  --c3: #F2B3C6;
  --c4: #D5B0EE;
  --c5: #EDA27F;
  --c6: #A3E2D2;
  --c7: #E6D4AC;
  --c8: #CBD3E0;
  --c9: #7FD4FC;
  --scrim: rgba(31, 42, 28, .5);
  color-scheme: light;
}

:root[data-theme="blueberry"] {
  --bg: #F1F3F9;
  --page: #E2E6F1;
  --surface: #FCFDFF;
  --line: #D9DFEE;
  --line-soft: #E5E9F4;
  --chip: #E5E9F4;
  --track: #E1E6F2;
  --dashed: #BEC7DE;
  --ink: #1B2236;
  --ink-rgb: 27, 34, 54;
  --muted: #5C6580;
  --faint: #7F88A0;
  --accent: #4F6BD8;
  --on-accent: #FCFDFF;
  --accent-ink: #3A52B0;
  --hero: #1F2843;
  --hero-ink: #F1F3F9;
  --hero-muted: #C3CAE0;
  --hero-accent: #AAB9F6;
  --hero-btn: #F1F3F9;
  --hero-btn-ink: #1B2236;
  --solid: #1F2843;
  --on-solid: #F1F3F9;
  --danger: #C2413F;
  --danger-line: #EDC9C9;
  --tab-off: #A1A9C0;
  --c0: #A7B8F8;
  --c1: #F39DB8;
  --c2: #F7E58F;
  --c3: #A6E3CB;
  --c4: #DCAEE8;
  --c5: #FFC59C;
  --c6: #A6DDF7;
  --c7: #CFCDD3;
  --c8: #C4EA96;
  --c9: #FACCFC;
  --scrim: rgba(27, 34, 54, .5);
  color-scheme: light;
}

:root[data-theme="bubblegum"] {
  --bg: #FBF0F3;
  --page: #F2E0E6;
  --surface: #FFFCFD;
  --line: #EED6DD;
  --line-soft: #F6E4E9;
  --chip: #F6E2E8;
  --track: #F3DFE5;
  --dashed: #E0BDC8;
  --ink: #33181F;
  --ink-rgb: 51, 24, 31;
  --muted: #84606A;
  --faint: #A2808A;
  --accent: #D2557A;
  --on-accent: #FFFCFD;
  --accent-ink: #A83D5E;
  --hero: #3B1B26;
  --hero-ink: #FBF0F3;
  --hero-muted: #E2C6CF;
  --hero-accent: #F5B0C5;
  --hero-btn: #FBF0F3;
  --hero-btn-ink: #33181F;
  --solid: #3B1B26;
  --on-solid: #FBF0F3;
  --danger: #B7473C;
  --danger-line: #EBC9C4;
  --tab-off: #C2A2AC;
  --c0: #F2A3DA;
  --c1: #A6D2F8;
  --c2: #FBE48B;
  --c3: #A3E7CC;
  --c4: #C3A9F3;
  --c5: #FFBE87;
  --c6: #FF8E8C;
  --c7: #EEE4DC;
  --c8: #C2EC92;
  --c9: #F3CAFC;
  --scrim: rgba(51, 24, 31, .5);
  color-scheme: light;
}

:root[data-theme="nightwalk"] {
  --spent-base: #8A8079;
  --bg: #10151F;
  --page: #0A0E16;
  --surface: #182030;
  --line: #273249;
  --line-soft: #1F2839;
  --chip: #212B40;
  --track: #212B40;
  --dashed: #34405C;
  --ink: #E8ECF6;
  --ink-rgb: 232, 236, 246;
  --muted: #A3ACC3;
  --faint: #7F89A3;
  --accent: #8AA4FF;
  --on-accent: #10151F;
  --accent-ink: #A9BCFF;
  --hero: #222C46;
  --hero-ink: #EEF1FA;
  --hero-muted: #BAC3DB;
  --hero-accent: #A9BCFF;
  --hero-btn: #E8ECF6;
  --hero-btn-ink: #10151F;
  --solid: #E8ECF6;
  --on-solid: #10151F;
  --danger: #F07A6E;
  --danger-line: #4F2B2B;
  --tab-off: #56617C;
  --c0: #C8CEE0;
  --c1: #A496E3;
  --c2: #5FC4C6;
  --c3: #7AACF1;
  --c4: #DE92B8;
  --c5: #9CCB8A;
  --c6: #E7BA6C;
  --c7: #E78E7E;
  --c8: #C9D27C;
  --c9: #969037;
  --scrim: rgba(0, 0, 0, .62);
  color-scheme: dark;
}

/* ------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------ */
* { box-sizing: border-box; }
*::-webkit-scrollbar { display: none; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: 'Nunito', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  transition: background-color .25s;
}
button { font-family: inherit; color: inherit; -webkit-user-select: none; user-select: none; }
button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
img { -webkit-user-drag: none; user-select: none; }
[hidden] { display: none !important; }
.display { font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif; font-weight: 800; }

#app {
  position: relative;
  height: 100vh;
  height: 100dvh;
  max-width: 520px;
  margin: 0 auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background-color .25s;
}
@media (min-width: 560px) {
  #app { box-shadow: 0 0 0 1px var(--line), 0 20px 60px rgba(0, 0, 0, .12); }
}

.view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.screen {
  min-height: 100%;
  padding: calc(env(safe-area-inset-top) + 14px) 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: screen-in .22s ease-out;
}
@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen { animation: none; } }

/* ------------------------------------------------------------------
 * Shared pieces
 * ------------------------------------------------------------------ */
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.h1 { font: 800 30px/1 'Baloo 2', sans-serif; letter-spacing: -.5px; margin: 0; }
.eyebrow { font: 800 11px 'Nunito', sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }

.card {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 24px;
}
.hero {
  background: var(--hero);
  color: var(--hero-ink);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}
.hero .eyebrow { color: var(--hero-accent); }

.round-btn {
  width: 44px; height: 44px; flex: none;
  border-radius: 22px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font: 800 22px/1 'Nunito', sans-serif;
  padding: 0 0 3px;
}
.round-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }

.pill {
  height: 46px; padding: 0 22px; flex: none;
  border-radius: 23px; border: none;
  font: 800 15px 'Nunito', sans-serif;
  cursor: pointer;
}
.pill-hero { background: var(--hero-btn); color: var(--hero-btn-ink); }
.pill-accent { background: var(--accent); color: var(--on-accent); }

.btn-solid, .btn-ghost, .btn-outline {
  height: 52px; border-radius: 18px;
  font: 800 15px 'Nunito', sans-serif; cursor: pointer; padding: 0 18px;
}
.btn-solid { border: none; background: var(--solid); color: var(--on-solid); }
.btn-ghost { border: none; background: transparent; color: var(--accent-ink); }
.btn-outline { border: 1.5px solid var(--line); background: var(--surface); }
.btn-solid:disabled, .btn-outline:disabled { opacity: .6; cursor: default; }

.bubble {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 18px 18px 18px 4px;
  padding: 12px 14px;
  font: 600 14px/1.4 'Nunito', sans-serif;
  text-wrap: pretty;
}
.bubble-title { font: 800 16px 'Baloo 2', sans-serif; margin-bottom: 2px; }

.progress { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.progress > div { height: 100%; border-radius: 4px; background: var(--accent); transition: width .4s; }

.tile-grid { display: grid; gap: 8px; }
.tile-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile { background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; padding: 12px; text-align: center; }
.tile-v { font: 800 24px/1.2 'Baloo 2', sans-serif; }
.tile-l { font: 700 11px 'Nunito', sans-serif; color: var(--faint); }

/* ------------------------------------------------------------------
 * Tab bar
 * ------------------------------------------------------------------ */
.tabbar {
  flex: none;
  border-top: 1.5px solid var(--line);
  background: var(--surface);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 8px 8px calc(10px + env(safe-area-inset-bottom));
  transition: background-color .25s;
}
.tabbar button {
  border: none; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font: 800 11px 'Nunito', sans-serif;
  color: var(--tab-off);
  padding: 4px 0;
}
.tabbar svg { width: 24px; height: 24px; fill: currentColor; }
.tabbar button.on { color: var(--ink); }

/* ------------------------------------------------------------------
 * Splash
 * ------------------------------------------------------------------ */
.splash {
  position: fixed; inset: 0; z-index: 40;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer;
  transition: opacity .35s;
}
.splash.leaving { opacity: 0; pointer-events: none; }
.splash-heads { display: flex; margin-bottom: 8px; }
.splash-heads img { width: 62px; }
.splash-heads img:nth-child(1) { transform: rotate(-12deg) translateY(6px); }
.splash-heads img:nth-child(2) { width: 68px; }
.splash-heads img:nth-child(3) { transform: rotate(12deg) translateY(6px); }
.splash-title { font: 800 64px/1 'Baloo 2', sans-serif; letter-spacing: -1.5px; }
.splash-sub { font: 600 16px 'Nunito', sans-serif; color: var(--muted); }
.splash-dog { width: min(250px, 60vw); margin-top: 36px; animation: bob 1.6s ease-in-out infinite; }
.splash-cta { margin-top: 40px; font: 700 13px 'Nunito', sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
@keyframes bob { 50% { transform: translateY(-6px); } }

/* ------------------------------------------------------------------
 * Home
 * ------------------------------------------------------------------ */
.menu-btn { flex-direction: column; gap: 3px; padding: 0; }
.menu-btn i { width: 16px; height: 2px; background: var(--ink); border-radius: 2px; display: block; }
.home-greet { display: flex; align-items: flex-end; gap: 4px; margin: 4px 0 -6px; }
.home-greet img { width: 132px; flex: none; }
.home-greet .bubble { margin-bottom: 58px; }

.daily-hero { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.daily-hero .peek { position: absolute; right: -18px; top: -6px; width: 130px; opacity: .95; pointer-events: none; }
.daily-hero .title { font: 800 26px/1.05 'Baloo 2', sans-serif; max-width: 200px; }
.daily-hero .status { font: 600 13px/1.4 'Nunito', sans-serif; color: var(--hero-muted); max-width: 210px; }
.daily-hero .streak { font: 700 13px 'Nunito', sans-serif; color: var(--hero-accent); }

.adventure { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.adventure .lvl { font: 800 26px/1 'Baloo 2', sans-serif; }
.adventure .sub { font: 600 13px 'Nunito', sans-serif; color: var(--muted); margin-top: 4px; }

.learn-btn {
  height: 50px; border-radius: 25px;
  border: 1.5px dashed var(--dashed); background: transparent;
  font: 700 14px 'Nunito', sans-serif; color: var(--muted); cursor: pointer;
}

.install-card { padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.install-card img { width: 52px; flex: none; }
.install-card .txt { flex: 1; font: 600 13px/1.4 'Nunito', sans-serif; color: var(--muted); }
.install-card .txt strong { display: block; color: var(--ink); font: 800 15px 'Nunito', sans-serif; }
.install-card .acts { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.install-card .pill { height: 36px; padding: 0 14px; font-size: 13px; }
.install-card .btn-ghost { height: 28px; font-size: 12px; color: var(--faint); padding: 0; }

/* ------------------------------------------------------------------
 * Level map
 * ------------------------------------------------------------------ */
.chapter { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.chapter-name { font: 800 20px/1.1 'Baloo 2', sans-serif; }
.chapter-sub { font: 600 12px 'Nunito', sans-serif; color: var(--muted); margin-top: 2px; }
.chip { font: 800 12px 'Nunito', sans-serif; padding: 6px 10px; border-radius: 12px; background: var(--chip); color: var(--accent-ink); }
.level-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 6px; justify-items: center; }
.lv {
  width: 56px; height: 56px; border-radius: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center; position: relative;
  background: transparent; border: 2px dashed rgba(var(--ink-rgb), .16);
  font: 800 18px 'Baloo 2', sans-serif; color: rgba(var(--ink-rgb), .32);
  cursor: default;
}
.lv.open { color: var(--ink); cursor: pointer; }
.lv.cur { background: var(--solid); color: var(--on-solid); border: none; box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 45%, transparent); }
.lv.done { background: var(--chip); border: none; cursor: pointer; }
.lv.done img { width: 40px; height: 40px; object-fit: contain; margin-top: -2px; }
.lv.done > span:not(.lv-stars) {
  position: absolute; bottom: -4px; right: -4px;
  min-width: 20px; height: 20px; border-radius: 10px; padding: 0 4px;
  background: var(--surface); border: 1.5px solid var(--line);
  font: 800 10px/17px 'Nunito', sans-serif; color: var(--accent-ink);
}

/* ------------------------------------------------------------------
 * Game
 * ------------------------------------------------------------------ */
.game { gap: 12px; padding-top: calc(env(safe-area-inset-top) + 10px); padding-bottom: calc(env(safe-area-inset-bottom) + 16px); }
.game-title { text-align: center; min-width: 0; }
.game-title .t { font: 800 22px/1 'Baloo 2', sans-serif; }
.game-title .s { font: 600 12px 'Nunito', sans-serif; color: var(--muted); margin-top: 3px; }
.clock {
  min-width: 44px; height: 44px; border-radius: 22px; padding: 0 10px; flex: none;
  background: var(--chip); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font: 800 14px 'Nunito', sans-serif; font-variant-numeric: tabular-nums;
}
.mascot { display: flex; align-items: center; gap: 8px; height: 84px; }
.mascot img { width: 84px; height: 84px; object-fit: contain; flex: none; }
.mascot .bubble { border-radius: 16px 16px 16px 4px; padding: 10px 12px; font-size: 13px; line-height: 1.35; flex: 1; }
.lives-row { margin-bottom: -4px; gap: 10px; }
.lives { display: flex; gap: 2px; flex: none; }
/* Lives are bones; a wrong spot snaps one in half and greys it out. */
.bone { width: 36px; height: 18px; overflow: visible; }
.bone .half { fill: #F6E9D4; stroke: #8E765F; stroke-width: 1.8; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), fill .3s, stroke .3s, opacity .3s; }
.bone .l { transform-origin: 22px 11px; }
.bone .r { transform-origin: 22px 11px; }
.bone.lost .half { fill: var(--line); stroke: var(--faint); opacity: .7; }
.bone.lost .l { transform: translate(-2px, 2px) rotate(-22deg); }
.bone.lost .r { transform: translate(2px, 2px) rotate(22deg); }

.board-wrap { display: flex; justify-content: center; }
.board {
  --n: 5;
  width: min(100%, 460px, 54svh);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  border: 2px solid var(--line);
  border-radius: 16px;
  touch-action: none;
  box-shadow: 0 6px 0 var(--line-soft);
  container-type: inline-size;
  -webkit-user-select: none;
  user-select: none;
}
.cell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: var(--yc);
  border-right: 1px solid rgba(43, 29, 22, .12);
  border-bottom: 1px solid rgba(43, 29, 22, .12);
  cursor: pointer;
  transition: opacity .25s, box-shadow .2s;
}
.cell.re { border-right: none; }
.cell.be { border-bottom: none; }
.cell .x {
  position: absolute;
  font: 800 calc(100cqw / var(--n) * .66)/1 'Nunito', sans-serif;
  color: rgba(43, 29, 22, .28);
  opacity: 0; transform: scale(.4);
  transition: opacity .14s, transform .14s, color .14s;
  pointer-events: none;
}
.cell.marked .x { opacity: 1; transform: scale(1); color: rgba(43, 29, 22, .6); }
/* Auto-crossed cells wait for the doodle's landing to finish. */
.cell.auto .x { opacity: 1; transform: scale(1); transition-delay: .9s; }
.cell.wrong .x { color: #B7473C; }
.cell img {
  width: 90%; height: 90%; object-fit: contain; pointer-events: none;
  transform: scale(0) rotate(-20deg);
  transition: transform .22s cubic-bezier(.3, 1.7, .5, 1);
  filter: drop-shadow(0 2px 2px rgba(43, 29, 22, .25));
}
.cell.dood { cursor: default; }
.cell.dood img { transform: none; }
.cell.dood .x { opacity: 0; }
.cell.flash { box-shadow: inset 0 0 0 3px var(--accent); }
.cell.bad { box-shadow: inset 0 0 0 3px #B7473C; animation: shake .3s; }
.cell.dim { opacity: .32; }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

.game-actions { display: flex; gap: 10px; margin-top: 4px; }
.game-actions button { flex: 1; height: 52px; border-radius: 18px; font: 800 14px 'Nunito', sans-serif; cursor: pointer; }
.game-actions .btn-outline { padding: 0 8px; }
.game-actions .hint { flex: 1.3; border: none; background: var(--solid); color: var(--on-solid); }
.game-actions .hint.used { background: var(--line); color: var(--faint); cursor: default; }
/* Used-up yards fade toward the page. */
.cell.spent { background: color-mix(in oklab, var(--yc) 42%, var(--spent-base, var(--bg))); transition: background .4s, opacity .25s, box-shadow .2s; }

/* Colors claimed: one swatch per yard, a head lands in it when it is used up. */
.yards { display: flex; justify-content: flex-end; gap: 4px; min-width: 0; flex: 1; }
.yard {
  flex: 0 1 22px; min-width: 15px; aspect-ratio: 1; border-radius: 7px;
  background: var(--yc);
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .08);
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, transform .3s;
}
.yard img { width: 95%; height: 95%; object-fit: contain; transform: scale(0); transition: transform .35s cubic-bezier(.3, 1.7, .5, 1) .9s; }
.yards.fade .yard.done { background: color-mix(in oklab, var(--yc) 42%, var(--spent-base, var(--bg))); }
.yard.done img { transform: scale(1); }

/* The rules, drawn. */
.rules {
  display: flex; justify-content: center; align-items: center; gap: 4px;
  width: fit-content; margin: auto auto 0; padding: 6px 10px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px;
}
.rule { width: 38px; height: 38px; padding: 2px; flex: none; border: none; background: none; border-radius: 10px; cursor: pointer; }
.rule:active { background: var(--chip); }
.rule.tapped { animation: rule-bounce .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes rule-bounce { 0% { transform: scale(1); } 35% { transform: scale(1.22) rotate(-4deg); } 70% { transform: scale(.96); } 100% { transform: none; } }
.rule svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rule .g { fill: var(--chip); }
.rule .lit { fill: color-mix(in oklab, var(--accent) 38%, var(--chip)); }
.rule .yd { fill: var(--c2); }
.rule .no { stroke: var(--danger); stroke-width: 3.2; stroke-linecap: round; fill: none; }
.rule .x { stroke: rgba(var(--ink-rgb), .55); stroke-width: 3; stroke-linecap: round; fill: none; }
.rule .finger { fill: var(--surface); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.rule .ripple { fill: none; stroke: var(--accent); stroke-width: 1.8; opacity: .8; }
.rule .two { font: 900 12px 'Nunito', sans-serif; fill: var(--accent-ink); }
.rules-gap { width: 1.5px; height: 26px; background: var(--line); margin: 0 6px; }

/* End-of-game sheets */
.sheet-scrim {
  position: fixed; inset: 0; z-index: 30;
  background: var(--scrim);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fade-in .2s ease-out;
}
.sheet {
  width: 100%; max-width: 520px;
  background: var(--bg);
  border-radius: 32px 32px 0 0;
  padding: 0 24px calc(28px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  animation: sheet-up .32s cubic-bezier(.2, .9, .3, 1.1);
}
.sheet .art { width: 220px; margin-top: -70px; }
.sheet .art.run { width: 230px; margin-top: -90px; }
.sheet .big { font: 800 40px/1 'Baloo 2', sans-serif; letter-spacing: -.5px; text-align: center; }
.sheet .sub { font: 600 14px/1.45 'Nunito', sans-serif; color: var(--muted); text-align: center; text-wrap: pretty; max-width: 300px; }
.sheet .tile-grid { width: 100%; margin: 10px 0 6px; }
.sheet .tile { border-radius: 16px; padding: 12px 0; }
.sheet .tile-v { font-size: 22px; }
.sheet .tile-l { text-transform: uppercase; letter-spacing: 1px; }
.sheet .btn-solid { width: 100%; height: 56px; border-radius: 28px; font-size: 17px; margin-top: 4px; }
.sheet .btn-ghost { width: 100%; height: 50px; border-radius: 25px; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes sheet-up { from { transform: translateY(100%); } }

/* ------------------------------------------------------------------
 * Daily
 * ------------------------------------------------------------------ */
.daily-head { padding: 18px 20px; display: flex; align-items: center; gap: 14px; }
.daily-head .txt { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.daily-head .title { font: 800 22px/1.1 'Baloo 2', sans-serif; }
.daily-head .status { font: 600 13px 'Nunito', sans-serif; color: var(--hero-muted); }
.cal { padding: 16px; }
.cal-nav { width: 40px; height: 40px; border-radius: 20px; border: none; background: var(--chip); font: 800 18px 'Nunito', sans-serif; cursor: pointer; }
.cal-nav:disabled { opacity: .35; cursor: default; }
.cal-title { font: 800 18px 'Baloo 2', sans-serif; }
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { text-align: center; font: 800 11px 'Nunito', sans-serif; color: var(--faint); margin: 12px 0 6px; }
.day {
  height: 42px; border-radius: 12px; border: none; padding: 0;
  display: flex; align-items: center; justify-content: center; position: relative;
  background: transparent; font: 700 14px 'Nunito', sans-serif; color: rgba(var(--ink-rgb), .5);
  cursor: default;
}
.day.future, .day.before { color: rgba(var(--ink-rgb), .22); }
.day.open { cursor: pointer; color: rgba(var(--ink-rgb), .7); box-shadow: inset 0 0 0 1.5px var(--line); }
.day.today { background: var(--solid); color: var(--on-solid); cursor: pointer; box-shadow: none; }
.day.done { background: var(--chip); cursor: pointer; }
.day.done.today { box-shadow: inset 0 0 0 2px var(--ink); }
.day.done img { width: 30px; height: 30px; object-fit: contain; }
.day.done span { position: absolute; top: 1px; right: 3px; font: 800 9px 'Nunito', sans-serif; color: var(--accent-ink); }
.day.late img { opacity: .55; }
.footnote { font: 600 12px/1.5 'Nunito', sans-serif; color: var(--faint); text-align: center; padding: 0 12px; }

/* ------------------------------------------------------------------
 * Stats
 * ------------------------------------------------------------------ */
.stat { background: var(--surface); border: 1.5px solid var(--line); border-radius: 20px; padding: 16px; }
.stat-v { font: 800 32px/1 'Baloo 2', sans-serif; }
.stat-l { font: 700 13px 'Nunito', sans-serif; color: var(--muted); margin-top: 6px; }
.table { padding: 8px 18px; }
.trow { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; padding: 12px 0; font: 700 14px 'Nunito', sans-serif; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--line-soft); }
.trow:last-child { border-bottom: none; }
.trow span:not(:first-child) { text-align: right; }
.trow span:first-child { font-weight: 800; }
.trow span:last-child { color: var(--muted); }
.trow.head { padding: 10px 0; font: 800 11px 'Nunito', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); border-bottom: 1.5px solid var(--track); }
.trow.head span { font-weight: 800; color: var(--faint); }
.quip { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.quip img { width: 120px; flex: none; }
.quip div { font: 600 13px/1.45 'Nunito', sans-serif; color: var(--muted); text-wrap: pretty; }

/* ------------------------------------------------------------------
 * Settings
 * ------------------------------------------------------------------ */
.section-label { font: 800 11px 'Nunito', sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: var(--faint); margin: 6px 4px -4px; }
.toggles { padding: 4px 18px; }
.toggle { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; }
.toggle:last-child { border-bottom: none; }
.toggle .lbl { flex: 1; }
.toggle .lbl b { display: block; font: 800 15px 'Nunito', sans-serif; }
.toggle .lbl small { display: block; font: 600 12px/1.4 'Nunito', sans-serif; color: var(--faint); margin-top: 2px; }
.track { width: 50px; height: 30px; border-radius: 15px; background: var(--line); padding: 3px; flex: none; transition: background .2s; }
.track i { display: block; width: 24px; height: 24px; border-radius: 12px; background: #FFFDF9; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.toggle[aria-checked="true"] .track { background: var(--accent); }
.toggle[aria-checked="true"] .track i { transform: translateX(20px); }

.themes { padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.theme {
  border: 1.5px solid var(--line); border-radius: 18px; background: var(--bg);
  padding: 10px 8px 9px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font: 800 12px 'Nunito', sans-serif;
}
.theme.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.theme small { font: 600 10px 'Nunito', sans-serif; color: var(--faint); margin-top: -4px; }
.swatch { width: 54px; height: 38px; border-radius: 12px; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1.5px rgba(var(--ink-rgb), .14); }
.swatch i { position: absolute; border-radius: 50%; }
.swatch i:nth-child(1) { width: 20px; height: 20px; left: 8px; top: 9px; }
.swatch i:nth-child(2) { width: 14px; height: 14px; right: 9px; top: 12px; }
.swatch.system { background: linear-gradient(135deg, #FBF6EE 0 50%, #1C1512 50% 100%); }
.swatch.system i:nth-child(1) { background: #B8743A; }
.swatch.system i:nth-child(2) { background: #D79457; }

.stack { display: flex; flex-direction: column; gap: 10px; }
.stack .btn-outline, .stack .btn-danger { text-align: left; display: flex; align-items: center; justify-content: space-between; }
.stack .btn-outline small { font: 700 12px 'Nunito', sans-serif; color: var(--faint); }
.btn-danger { height: 52px; border-radius: 18px; border: 1.5px solid var(--danger-line); background: transparent; color: var(--danger); font: 800 15px 'Nunito', sans-serif; cursor: pointer; padding: 0 18px; }
.btn-danger.armed { border: none; background: var(--danger); color: #FFF; }
.signoff { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; }
.signoff img { width: 110px; }
.signoff div { font: 600 12px 'Nunito', sans-serif; color: var(--faint); }

/* ------------------------------------------------------------------
 * How to play
 * ------------------------------------------------------------------ */
.howto { gap: 16px; padding-bottom: calc(env(safe-area-inset-bottom) + 20px); }
.dots { display: flex; gap: 6px; }
.dots i { display: block; width: 8px; height: 8px; border-radius: 4px; background: var(--line); transition: width .2s, background .2s; }
.dots i.on { width: 22px; background: var(--ink); }
.skip { height: 44px; padding: 0 6px; border: none; background: transparent; font: 800 14px 'Nunito', sans-serif; color: var(--faint); cursor: pointer; }
.tut-num { text-align: center; margin-top: 8px; }
.tut-title { font: 800 32px/1.05 'Baloo 2', sans-serif; text-align: center; }
.tut-body { font: 600 15px/1.45 'Nunito', sans-serif; color: var(--muted); text-align: center; text-wrap: pretty; padding: 0 8px; min-height: 44px; }
.howto .board { width: min(100%, 310px, 40svh); }
.howto .cell { cursor: default; }
.tut-actions { display: flex; gap: 10px; margin-top: auto; }
.tut-actions button { height: 56px; border-radius: 28px; font: 800 16px 'Nunito', sans-serif; cursor: pointer; }
.tut-actions .btn-outline { flex: 1; }
.tut-actions .btn-solid { flex: 2; }

/* ------------------------------------------------------------------
 * Toasts
 * ------------------------------------------------------------------ */
.toast {
  position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom)); z-index: 50;
  transform: translateX(-50%);
  background: var(--solid); color: var(--on-solid);
  padding: 12px 18px; border-radius: 16px;
  font: 700 14px 'Nunito', sans-serif;
  width: max-content; max-width: calc(100vw - 32px); text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  animation: toast-in .2s ease-out;
  pointer-events: none;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

.update-toast {
  position: fixed; z-index: 60;
  left: 50%; transform: translateX(-50%);
  bottom: calc(92px + env(safe-area-inset-bottom));
  width: min(488px, calc(100vw - 24px));
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 22px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .22);
  padding: 10px 10px 10px 8px;
  display: flex; align-items: center; gap: 8px;
  animation: toast-in .25s ease-out;
}
.update-toast img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.update-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font: 600 12px/1.35 'Nunito', sans-serif; color: var(--muted); }
.update-text strong { font: 800 15px 'Baloo 2', sans-serif; color: var(--ink); }
.update-toast button { height: 40px; border-radius: 20px; padding: 0 14px; font-size: 14px; }

/* ------------------------------------------------------------------
 * Share sheet (where the system share sheet is missing)
 * ------------------------------------------------------------------ */
#share-sheet .sheet-scrim { z-index: 70; }
.sheet.share { padding-top: 0; max-height: 100dvh; overflow-y: auto; }
.share-preview {
  width: min(100%, 300px);
  aspect-ratio: 1080 / 1350;
  border-radius: 20px;
  box-shadow: 0 0 0 1.5px var(--line), 0 14px 30px rgba(0, 0, 0, .14);
  margin: 6px 0 8px;
}
.sheet.share .btn-solid, .sheet.share .btn-outline { width: 100%; height: 54px; border-radius: 27px; font-size: 16px; }
.share-save { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.share-link { border: none; background: none; font: 800 13px 'Nunito', sans-serif; color: var(--faint); cursor: pointer; margin-top: -6px; padding: 6px 12px; text-decoration: underline; text-underline-offset: 3px; }
.sheet .sheet-next { width: 100%; height: 52px; border-radius: 26px; font-size: 16px; }

/* ------------------------------------------------------------------
 * A doodle lands: a paw drops from the sky and presses the cell, the
 * head pops out big, then shrinks to size with a kiss. js/app.js
 * celebrate() places the paw; the timings below are shared with it.
 * ------------------------------------------------------------------ */
.cell.c-tl { border-top-left-radius: 13px; }
.cell.c-tr { border-top-right-radius: 13px; }
.cell.c-bl { border-bottom-left-radius: 13px; }
.cell.c-br { border-bottom-right-radius: 13px; }
.cell.pop { z-index: 3; animation: cell-press .7s ease-out; }
.cell.pop img { animation: dood-in .9s .36s both; }
@keyframes cell-press {
  0%, 38% { transform: none; }
  48% { transform: scale(.86); }
  64% { transform: scale(1.04); }
  80%, 100% { transform: none; }
}
@keyframes dood-in {
  0% { transform: scale(0) rotate(-14deg); animation-timing-function: cubic-bezier(.2, 1.4, .5, 1); }
  28% { transform: scale(1.65) rotate(6deg); }
  48% { transform: scale(1.6) rotate(-3deg); animation-timing-function: cubic-bezier(.5, 0, .4, 1.4); }
  72% { transform: scale(.88, 1.1) rotate(0); }
  86% { transform: scale(1.06, .95); }
  100% { transform: none; }
}
.paw-drop {
  position: fixed; z-index: 45; pointer-events: none;
  width: var(--s); height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .2));
  animation: paw-press .66s both;
}
.paw-drop svg { width: 100%; height: 100%; display: block; }
/* The paw comes down out of the screen onto the cell: big and faint
   overhead, shrinking to the cell as it lands, then lifting away. */
@keyframes paw-press {
  0% { transform: scale(2.8) rotate(-10deg); opacity: 0; animation-timing-function: cubic-bezier(.45, 0, .85, .5); }
  18% { opacity: .85; }
  45% { transform: scale(1) rotate(0); opacity: 1; animation-timing-function: ease-out; }
  56% { transform: scale(.9, .82); }
  68% { transform: scale(1.05); opacity: 1; animation-timing-function: ease-in; }
  100% { transform: scale(2.2) rotate(8deg); opacity: 0; }
}
.land-fx { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.land-fx .puff {
  position: absolute; inset: 6%;
  border-radius: 50%; border: 3px solid rgba(var(--ink-rgb), .25);
  opacity: 0;
  animation: puff .45s .3s ease-out both;
}
.land-fx .kiss {
  position: absolute; right: 2%; top: 2%;
  font: 800 calc(100cqw / var(--n) * .34)/1 'Nunito', sans-serif; font-style: normal;
  color: #E2557A;
  opacity: 0;
  animation: kiss .75s .86s ease-out both;
}
@keyframes puff { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.4); opacity: 0; } }
@keyframes kiss {
  0% { transform: translate(-30%, 30%) scale(.3) rotate(-10deg); opacity: 0; }
  25% { transform: translate(0, 0) scale(1.15) rotate(8deg); opacity: 1; }
  100% { transform: translate(25%, -95%) scale(.85) rotate(14deg); opacity: 0; }
}
.mascot img.hop { animation: hop .45s .36s ease-out; }
@keyframes hop { 30% { transform: translateY(-10px) rotate(-4deg); } 60% { transform: translateY(0) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) {
  .cell.pop, .cell.pop img, .mascot img.hop, .land-fx { animation: none; }
  .land-fx { display: none; }
}

/* ------------------------------------------------------------------
 * Safety net (index.html): shown only if the app fails to start
 * ------------------------------------------------------------------ */
.rescue {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px; text-align: center;
  font: 600 15px/1.45 'Nunito', system-ui, sans-serif; color: var(--muted);
}
.rescue img { width: 200px; }
.rescue strong { font: 800 26px/1.1 'Baloo 2', system-ui, sans-serif; color: var(--ink); }
.rescue span { max-width: 300px; }
.rescue .btn-solid { margin-top: 10px; padding: 0 26px; border-radius: 26px; }

/* ------------------------------------------------------------------
 * Color-blind patterns (Settings): one texture per palette colour, so
 * yards can be told apart without colour. Each is a single tile, sized
 * to a quarter cell so it runs on unbroken from cell to cell. Under an
 * ×, a wrong × or a doodle the texture dims rather than going, so a
 * marked cell still says which yard it belongs to.
 *
 * The --pN textures are declared on the cell itself (not :root) so a
 * cell can dim its own by changing --pat.
 * ------------------------------------------------------------------ */
.cell, .yard {
  --p0: radial-gradient(circle, var(--pat) 0 19%, transparent 22%);
  --p1: linear-gradient(45deg, var(--pat) 0 12.5%, transparent 12.5% 50%, var(--pat) 50% 62.5%, transparent 62.5%);
  --p2: linear-gradient(135deg, var(--pat) 0 12.5%, transparent 12.5% 50%, var(--pat) 50% 62.5%, transparent 62.5%);
  --p3: linear-gradient(0deg, var(--pat) 0 24%, transparent 24%);
  --p4: linear-gradient(90deg, var(--pat) 0 24%, transparent 24%);
  --p5: linear-gradient(0deg, var(--pat) 0 14%, transparent 14%), linear-gradient(90deg, var(--pat) 0 14%, transparent 14%);
  --p6: linear-gradient(45deg, var(--pat) 0 8%, transparent 8% 50%, var(--pat) 50% 58%, transparent 58%), linear-gradient(135deg, var(--pat) 0 8%, transparent 8% 50%, var(--pat) 50% 58%, transparent 58%);
  --p7: conic-gradient(var(--pat) 0 25%, transparent 0 50%, var(--pat) 0 75%, transparent 0);
  --p8: radial-gradient(circle, transparent 0 20%, var(--pat) 22% 34%, transparent 36%);
  --p9: conic-gradient(from 45deg, var(--pat) 0 25%, transparent 0);
}
:root { --pat: rgba(43, 29, 22, .11); --pat-dim: rgba(43, 29, 22, .05); }
:root[data-theme="midnight"], :root[data-theme="nightwalk"] { --pat: rgba(0, 0, 0, .16); --pat-dim: rgba(0, 0, 0, .07); }
.board.patterns .cell { background-image: var(--yp); background-size: calc(100cqw / var(--n) / 4) calc(100cqw / var(--n) / 4); }
.board.patterns .cell.marked, .board.patterns .cell.auto, .board.patterns .cell.wrong, .board.patterns .cell.dood { --pat: var(--pat-dim); }
.yards.patterns .yard { background-image: var(--yp); background-size: 5.5px 5.5px; }

/* ------------------------------------------------------------------
 * Small delights: pet the pup, zoomies on a win, pause
 * ------------------------------------------------------------------ */
.pet { border: none; background: none; padding: 0; cursor: pointer; position: relative; flex: none; line-height: 0; }
.home-greet .pet img { width: 132px; }
.pet img.wiggle { animation: wiggle .7s ease-in-out; transform-origin: 50% 90%; }
@keyframes wiggle {
  15% { transform: rotate(-7deg) translateY(-3px); } 30% { transform: rotate(6deg); }
  45% { transform: rotate(-5deg) translateY(-2px); } 60% { transform: rotate(4deg); } 80% { transform: rotate(-1deg); }
}
.pet-heart {
  position: absolute; left: 55%; top: 10%;
  font: 800 22px/1 'Nunito', sans-serif; color: #E2557A; pointer-events: none;
  animation: pet-heart 1s ease-out forwards;
}
@keyframes pet-heart {
  0% { transform: translate(-50%, 6px) scale(.4); opacity: 0; }
  25% { opacity: 1; transform: translate(-50%, -4px) scale(1.1); }
  100% { transform: translate(-30%, -38px) scale(.9) rotate(12deg); opacity: 0; }
}

/* Zoomies: each pup hops in turn once the puzzle is solved. */
.cell.zoomies img { animation: zoomies .5s var(--zd, 0ms) cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes zoomies {
  0%, 100% { transform: none; }
  35% { transform: translateY(-34%) scale(1.15, .9) rotate(-8deg); }
  55% { transform: translateY(-40%) scale(.95, 1.08) rotate(6deg); }
  80% { transform: translateY(0) scale(1.08, .92); }
}

/* Pause: the clock is the button; the board blurs under a cover. */
button.clock { border: none; cursor: pointer; font-family: inherit; }
.board-wrap { position: relative; }
.board.paused { filter: blur(12px) saturate(.6); pointer-events: none; transition: filter .25s; }
.pause-cover {
  position: absolute; inset: 0; z-index: 5; margin: auto;
  width: min(100%, 460px, 54svh); aspect-ratio: 1;
  border: none; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font: 600 14px 'Nunito', sans-serif; color: var(--muted);
}
.pause-cover img { width: 120px; }
.pause-cover b { font: 800 28px/1 'Baloo 2', sans-serif; color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .pet img.wiggle, .cell.zoomies img { animation: none; }
  .pet-heart { display: none; }
}

/* ------------------------------------------------------------------
 * Stars, bosses, free play, names, maybe marks, sweeps
 * ------------------------------------------------------------------ */
.level-grid { row-gap: 18px; }
.lv-stars { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); display: flex; gap: 0; font: 900 10px/1 'Nunito', sans-serif; letter-spacing: -1px; white-space: nowrap; }
.lv-stars i, .win-stars i, .stars i { font-style: normal; color: var(--line); }
.lv-stars i.on, .win-stars i.on, .stars i.on { color: #F2B33D; }
.lv.done > span:not(.lv-stars) { bottom: auto; top: -4px; }
.lv.boss { border: 2px dashed #E3A92D; }
.lv.boss.cur { border: none; box-shadow: 0 0 0 5px rgba(242, 179, 61, .55); }
.lv.boss.done { border: 2px solid #E3A92D; }
.lv .crown { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font: 900 15px/1 'Nunito', sans-serif; color: #E3A92D; text-shadow: 0 1px 0 var(--surface); }
.win-stars { display: flex; gap: 6px; margin-top: -6px; font: 900 34px/1 'Nunito', sans-serif; }
.win-stars i { transform: scale(0); animation: star-pop .45s cubic-bezier(.3, 1.8, .5, 1) forwards; }
.win-stars i:nth-child(2) { animation-delay: .15s; }
.win-stars i:nth-child(3) { animation-delay: .3s; }
@keyframes star-pop { to { transform: none; } }

.freeplay .sizes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.freeplay .size { height: 52px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--bg); font: 800 15px 'Baloo 2', sans-serif; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.freeplay .size small { font: 700 9px 'Nunito', sans-serif; color: var(--accent-ink); text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }
.freeplay .size.resume { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.freeplay.locked { opacity: .7; }

.names { padding: 6px 18px; }
.names label { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.names label:last-child { border-bottom: none; }
.names span { flex: 1; font: 800 15px 'Nunito', sans-serif; }
.names input {
  width: 46%; height: 40px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--bg); color: var(--ink); padding: 0 12px;
  font: 700 15px 'Nunito', sans-serif;
}
.names input:focus { outline: none; border-color: var(--accent); }

/* Maybe marks: a small dot, from the pencil button. */
.cell.maybe::before {
  content: ''; position: absolute; width: 22%; height: 22%; border-radius: 50%;
  background: rgba(43, 29, 22, .45); pointer-events: none;
}
.game-actions .pencil { flex: .8; }
.game-actions .pencil.on { background: var(--chip); border-color: var(--accent); color: var(--accent-ink); }

/* A placed pup completes its row and column: a shimmer runs out along both. */
.cell.sweep::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: rgba(255, 255, 255, .55); opacity: 0;
  animation: sweep .5s var(--sd, 0ms) ease-out;
}
@keyframes sweep { 30% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cell.sweep::after, .win-stars i { animation: none; transform: none; } }

/* ------------------------------------------------------------------
 * Coat picker (Settings → Your pack)
 * ------------------------------------------------------------------ */
.coat-pick { padding: 12px 0 14px; display: flex; flex-direction: column; gap: 10px; }
.coat-pick > span { font: 800 15px 'Nunito', sans-serif; }
.coats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.coat {
  border: 1.5px solid var(--line); border-radius: 16px; background: var(--bg);
  padding: 6px 2px 5px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.coat img { width: 44px; height: 44px; object-fit: contain; }
.coat small { font: 800 10px 'Nunito', sans-serif; color: var(--muted); }
.coat.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.coat.on small { color: var(--accent-ink); }
.coat-mix { width: 44px; height: 44px; display: grid; grid-template-columns: 1fr 1fr; }
.coat-mix img { width: 22px; height: 22px; }

/* Dark coats on dark schemes: a faint warm rim light lifts the black and
   chocolate pups off the page. Board cells and swatches are light already. */
:root[data-theme="midnight"], :root[data-theme="nightwalk"] {
  --dog-halo: drop-shadow(0 0 1.5px rgba(255, 240, 225, .6)) drop-shadow(0 0 10px rgba(255, 240, 225, .16));
}
.pet img, .peek, .sheet .art, .splash-dog, .splash-heads img, .pause-cover img, .quip img,
.signoff img, .coat img, .install-card img, .lv img, .day img, .update-toast img, .rescue img {
  filter: var(--dog-halo, none);
}

/* ------------------------------------------------------------------
 * Landscape. A phone on its side has no height to spare, so the tabs
 * become a rail down the left, each screen splits into two columns, and
 * in play the board takes the left with everything else stacked beside
 * it. Only where the portrait column would not fit: a tablet or monitor
 * that is wide but tall keeps the phone layout.
 *
 * .lcols / .lcol and .sheet-body wrap the halves of a screen. In portrait
 * they are display: contents, so the column reads exactly as it always
 * has; .footnote and .tut-actions use order to keep their portrait spot.
 * ------------------------------------------------------------------ */
.sheet-body, .lcols, .lcol, .chapters { display: contents; }
.daily-head ~ .footnote, .tut-actions, .home-greet ~ .adventure { order: 1; }
.lcol > .install-card, .lcol > .learn-btn { order: 2; }

@media (orientation: landscape) and (max-height: 720px) {
  #app { max-width: none; box-shadow: none; flex-direction: row; }

  /* Tabs: a rail on the left. */
  .tabbar {
    order: -1;
    grid-template-columns: none; grid-auto-rows: min-content;
    align-content: center; gap: 6px;
    border-top: none; border-right: 1.5px solid var(--line);
    padding: calc(env(safe-area-inset-top) + 8px) 6px calc(env(safe-area-inset-bottom) + 8px) calc(env(safe-area-inset-left) + 6px);
    width: calc(env(safe-area-inset-left) + 84px);
  }
  .tabbar button { padding: 8px 0; }
  .view { width: 0; }

  .screen {
    width: 100%; max-width: 1000px; margin: 0 auto;
    padding: calc(env(safe-area-inset-top) + 14px) calc(env(safe-area-inset-right) + 24px)
      calc(env(safe-area-inset-bottom) + 20px) calc(env(safe-area-inset-left) + 24px);
  }
  #app:has(> #tabs:not([hidden])) .screen { padding-left: 24px; }

  .lcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .lcol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; align-items: start; }

  /* Home: the pup and the adventure on the left, today's daily on the right. */
  .home-greet .pet img { width: clamp(84px, 13vw, 110px); }
  .home-greet .bubble { margin-bottom: 44px; }
  .daily-hero .peek { width: clamp(96px, 14vw, 130px); }
  .daily-hero .eyebrow { padding-right: 56px; }

  /* Settings: the cards hold their own spacing; the labels sit snug. */
  .lcol > .section-label:first-child { margin-top: 0; }

  /* How to play: the words and buttons beside the little board. */
  .howto .lcols { flex: 1; align-items: center; }
  .tut-text { justify-content: center; }
  .tut-num { margin-top: 0; }
  .tut-actions { margin-top: 8px; }
  .howto .board { width: min(100%, 300px, calc(100svh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }

  /* Splash: the pup beside the name. */
  .splash {
    display: grid; justify-content: center; align-content: center; column-gap: 48px; row-gap: 6px;
    grid-template-columns: auto auto;
  }
  .splash-dog { grid-column: 1; grid-row: 1 / span 4; align-self: center; width: min(230px, 56svh); margin: 0; }
  .splash-heads, .splash-title, .splash-sub, .splash-cta { grid-column: 2; justify-self: center; }
  .splash-cta { margin-top: 24px; }

  /* Nothing sits along the bottom now, so toasts drop lower. */
  .toast { bottom: calc(20px + env(safe-area-inset-bottom)); }
  .update-toast { bottom: calc(16px + env(safe-area-inset-bottom)); }

  .game {
    --side: clamp(250px, 34vw, 360px);
    --board: min(
      calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 28px),
      calc(100vw - var(--side) - env(safe-area-inset-left) - env(safe-area-inset-right) - 72px),
      640px);
    max-width: none;
    display: grid;
    grid-template-columns: var(--board) var(--side);
    grid-template-rows: auto auto auto 1fr auto auto;
    grid-template-areas: "board head" "board mascot" "board lives" "board ." "board actions" "board rules";
    justify-content: center;
    column-gap: 28px;
    row-gap: 10px;
    padding: calc(env(safe-area-inset-top) + 12px) calc(env(safe-area-inset-right) + 20px)
      calc(env(safe-area-inset-bottom) + 14px) calc(env(safe-area-inset-left) + 20px);
  }
  .game > .row:first-child { grid-area: head; }
  .game > .mascot { grid-area: mascot; }
  .game > .lives-row { grid-area: lives; margin: 0; }
  .game > .board-wrap { grid-area: board; align-self: center; }
  .game > .game-actions { grid-area: actions; margin: 0; }
  .game > .rules { grid-area: rules; margin: 0 auto; }
  .game > #g-sheet { display: contents; }
  .game .board, .game .pause-cover { width: var(--board); }

  /* End-of-game sheets sit centred, the pup beside the words. */
  #g-sheet .sheet-scrim { align-items: center; padding: 12px calc(env(safe-area-inset-right) + 12px) 12px calc(env(safe-area-inset-left) + 12px); }
  #g-sheet .sheet {
    max-width: 640px; max-height: 100%; overflow-y: auto;
    border-radius: 32px; padding: 18px 28px;
    flex-direction: row; gap: 24px;
  }
  #g-sheet .sheet .art, #g-sheet .sheet .art.run { width: 170px; margin: 0; flex: none; }
  #g-sheet .sheet-body { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; min-width: 0; }
  #g-sheet .sheet .big { font-size: 32px; }
  #g-sheet .sheet .tile-grid { margin: 4px 0 2px; }
  #g-sheet .sheet .tile { padding: 8px 0; }
  #g-sheet .sheet .btn-solid, #g-sheet .sheet .sheet-next { height: 48px; margin-top: 0; }
  #g-sheet .sheet .btn-ghost { height: 42px; }
  .share-preview { width: min(100%, 300px, calc((100dvh - 230px) * .8)); }
}
@media (orientation: landscape) and (max-height: 400px) {
  .game { row-gap: 8px; }
  .mascot { height: 64px; }
  .mascot img { width: 64px; height: 64px; }
  .game-actions button { height: 46px; }
  .rule { width: 32px; height: 32px; }
  #g-sheet .sheet .art, #g-sheet .sheet .art.run { width: 130px; }
}