* { box-sizing: border-box; }
:root {
  --font: "Nunito", "Baloo 2", system-ui, "Noto Sans", sans-serif;
  --head: "Baloo 2", "Nunito", system-ui, "Noto Sans", sans-serif;
  --emerald: #1E6B5C; --cobalt: #1F4E9C; --saffron: #E0A526; --terra: #C0643B;
  --r: 16px;
}
/* ---------------------------------------------------------------- themes */
body[data-theme="light"] {
  --bg-img: url(assets/bg-day.webp); --bg: #EFE4D0;
  --ink: #27292F; --muted: #6E665A; --card: rgba(255, 251, 243, .9); --card-line: rgba(30, 107, 92, .18);
  --btn: #FFFFFF; --btn-line: rgba(39, 41, 47, .14); --btn-ink: #27292F; --primary: #1E6B5C; --primary-ink: #FFFFFF;
  --chip: rgba(30, 107, 92, .1); --chip-on: #1E6B5C; --chip-on-ink: #fff; --shade: rgba(20, 24, 30, .38);
  --pad: #FFFFFF; --pad-ink: #1F4E9C; --pad-sub: #9A907F; --accent: #1F4E9C;
  --b-paper: #FFFBF3; --b-paper2: #F7F0E2; --b-given: #23262E; --b-user: #1F4E9C; --b-note: #7A7266;
  --b-line: #DDD1BC; --b-box: #1E6B5C; --b-area: rgba(31, 78, 156, .07); --b-same: rgba(224, 165, 38, .32);
  --b-sel: rgba(31, 78, 156, .17); --b-err: #C0392B; --b-errbg: rgba(192, 57, 43, .13); --b-hint: #1F4E9C;
  --b-hintbg: rgba(30, 107, 92, .13); --b-diag: rgba(224, 165, 38, .11); --b-cage: #5B5347; --b-glaze: #8CC7B6;
  --b-star: #E0A526; --b-frame: #1E6B5C; --b-key: #1E6B5C;
  color-scheme: light;
}
body[data-theme="dark"] {
  --bg-img: url(assets/bg-night.webp); --bg: #141B2D;
  --ink: #ECE6DA; --muted: #A7AEBD; --card: rgba(24, 31, 48, .9); --card-line: rgba(143, 184, 255, .16);
  --btn: #232C42; --btn-line: rgba(236, 230, 218, .12); --btn-ink: #ECE6DA; --primary: #3E9C86; --primary-ink: #fff;
  --chip: rgba(143, 184, 255, .1); --chip-on: #3E9C86; --chip-on-ink: #fff; --shade: rgba(5, 8, 16, .55);
  --pad: #202A40; --pad-ink: #A9C6FF; --pad-sub: #7E879A; --accent: #8FB8FF;
  --b-paper: #1B2233; --b-paper2: #1F2739; --b-given: #ECE6DA; --b-user: #8FB8FF; --b-note: #9AA3B5;
  --b-line: #33405A; --b-box: #4FB39A; --b-area: rgba(143, 184, 255, .08); --b-same: rgba(224, 165, 38, .28);
  --b-sel: rgba(143, 184, 255, .2); --b-err: #FF8A7A; --b-errbg: rgba(255, 120, 100, .17); --b-hint: #8FB8FF;
  --b-hintbg: rgba(79, 179, 154, .17); --b-diag: rgba(224, 165, 38, .09); --b-cage: #BDB6A8; --b-glaze: #3F8F7C;
  --b-star: #E0A526; --b-frame: #2C6B5E; --b-key: #4FB39A;
  color-scheme: dark;
}
/* colour-blind safe (Okabe–Ito): blue = good/you, vermilion = wrong, yellow = same digit */
body[data-cb="1"] { --b-err: #D55E00; --b-errbg: rgba(213, 94, 0, .16); --b-key: #0072B2; --b-hint: #0072B2; --b-same: rgba(240, 228, 66, .5); --b-user: #0060A8; --pad-ink: #0060A8; }
body[data-theme="dark"][data-cb="1"] { --b-err: #FF9F4A; --b-key: #56B4E9; --b-hint: #56B4E9; --b-user: #7CC4F0; --b-same: rgba(240, 228, 66, .3); --pad-ink: #7CC4F0; }

html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--font); font-weight: 700;
  overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
#bg { position: fixed; inset: 0; background: var(--bg-img) center / cover no-repeat, var(--bg); }
#bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(0, 0, 0, .12)); }
#app { position: fixed; inset: 0; overflow: hidden; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--head); margin: 0; font-weight: 700; }
.sub { color: var(--muted); font-weight: 600; margin: 0; line-height: 1.35; }
.sub.small, .small { font-size: 13px; }

/* ---------------------------------------------------------------- buttons */
.btn {
  border: 1px solid var(--btn-line); background: var(--btn); color: var(--btn-ink); border-radius: 12px;
  padding: 10px 18px; font-weight: 800; font-size: 16px; cursor: pointer; line-height: 1.15;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06); transition: transform .08s, box-shadow .15s, filter .15s; min-height: 44px;
}
.btn:hover { filter: brightness(1.04); box-shadow: 0 3px 10px rgba(0, 0, 0, .1); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.primary { background: var(--primary); color: var(--primary-ink); border-color: transparent; }
.btn.ghost { background: var(--btn); }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.ibtn {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--btn-line); background: var(--btn);
  color: var(--btn-ink); cursor: pointer; display: inline-grid; place-items: center; padding: 0; flex: none; font-size: 20px;
}
.ibtn:not(.small) { position: relative; }
.ibtn:not(.small)::before { content: ''; position: absolute; inset: -5px; } /* ≥ 44 px touch target even when drawn at 34–36 px */
.ibtn svg { width: 22px; height: 22px; fill: currentColor; }
.ibtn.small { width: 30px; height: 30px; font-size: 14px; border-radius: 9px; }
.ibtn:active { transform: scale(.95); }
:focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px; }
.row { display: flex; gap: 10px; justify-content: center; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 10px; min-width: 220px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--card-line); border-radius: 999px; padding: 6px 12px; font-size: 14px; }

/* ---------------------------------------------------------------- home */
.screen { position: absolute; inset: 0; }
#home { overflow-y: auto; padding: max(14px, env(safe-area-inset-top)) 16px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.home-head { width: 100%; max-width: 1080px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.logo { display: flex; align-items: center; gap: 12px; }
.logo-star { width: 50px; height: 50px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .15)); }
.logo-star .s1 { fill: var(--emerald); } .logo-star .s2 { fill: var(--saffron); } .logo-star .s3 { fill: var(--cobalt); }
.logo h1 { font-size: 34px; line-height: 1; letter-spacing: .01em; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); }
body[data-theme="dark"] .logo h1 { text-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.logo .lb { color: var(--emerald); }
body[data-theme="dark"] .logo .lb { color: #5CC2A6; }
.head-actions { display: flex; align-items: center; gap: 8px; }
.continue {
  width: 100%; max-width: 1080px; display: flex; align-items: center; gap: 12px; border: none; cursor: pointer;
  background: var(--primary); color: var(--primary-ink); border-radius: 14px; padding: 12px 18px; font-weight: 800; font-size: 16px;
  box-shadow: 0 4px 16px rgba(30, 107, 92, .25); text-align: left;
}
.play-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .2); font-size: 12px; flex: none; }
.cards { width: 100%; max-width: 1080px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.card {
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r); padding: 16px;
  display: flex; flex-direction: column; gap: 12px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 28px rgba(40, 30, 10, .08); position: relative; overflow: hidden;
}
.card::before { /* zellige band */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: repeating-linear-gradient(90deg, var(--emerald) 0 10px, var(--saffron) 10px 14px, var(--cobalt) 14px 24px, var(--saffron) 24px 28px);
  opacity: .85;
}
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.card h2 { font-size: 22px; }
.card .date { color: var(--muted); font-size: 14px; white-space: nowrap; }
.tag { font-size: 13px; color: var(--muted); }
.card .row { justify-content: flex-start; flex-wrap: wrap; }
.card .row .btn { flex: 1 1 auto; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lchip {
  border: 1px solid var(--btn-line); background: var(--btn); color: var(--btn-ink); border-radius: 999px; padding: 6px 12px;
  font-size: 14px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; min-height: 34px;
}
.lchip.on { background: var(--chip-on); color: var(--chip-on-ink); border-color: transparent; }
.lchip .ok { color: var(--saffron); font-size: 13px; }
.lchip.on .ok { color: #FFE39A; }
.chips.small .lchip { font-size: 13px; padding: 5px 11px; }
.levels { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lvl {
  border: 1px solid var(--btn-line); background: var(--btn); color: var(--btn-ink); border-radius: 12px; padding: 8px 10px;
  text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 1px; min-height: 48px;
}
.lvl b { font-size: 15px; }
.lvl span { font-size: 12px; color: var(--muted); font-weight: 600; }
.lvl.on { background: var(--chip-on); color: var(--chip-on-ink); border-color: transparent; }
.lvl.on span { color: rgba(255, 255, 255, .8); }
.variant { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--card-line); }
.variant:first-of-type { border-top: none; padding-top: 0; }
.v-head { display: flex; flex-direction: column; gap: 2px; }
.v-head b { font-size: 16px; }
.v-head .sub { font-size: 13px; }
.trophy-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.trophy-line svg { width: 22px; height: 22px; flex: none; }
.home-nav { width: 100%; max-width: 1080px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.home-nav .btn { flex: 1 1 140px; max-width: 240px; background: var(--card); backdrop-filter: blur(6px); }
.chip.streak { color: var(--ink); }
.chip.streak::before { content: ""; width: 14px; height: 14px; background: var(--saffron); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

/* ---------------------------------------------------------------- game */
#game { display: flex; flex-direction: column; padding: max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom)); gap: 8px; }
.topbar { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 1100px; margin: 0 auto; }
.g-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.1; background: var(--card); border: 1px solid var(--card-line); border-radius: 12px; padding: 5px 12px; }
.g-title b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-title span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-stats { display: flex; align-items: center; gap: 8px; }
.g-mist, .g-time { background: var(--card); border: 1px solid var(--card-line); border-radius: 12px; padding: 0 12px; height: 40px; display: inline-flex; align-items: center; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.g-mist .short { display: none; }
.g-mist.warn { color: var(--b-err); }
.g-mist.bump { animation: bump .35s ease; }
@keyframes bump { 40% { transform: scale(1.15); } }
.play { flex: 1; min-height: 0; display: flex; gap: 16px; width: 100%; max-width: 1100px; margin: 0 auto; }
.board-wrap { flex: 1; min-width: 0; min-height: 0; display: grid; place-items: center; position: relative; }
#board { display: block; touch-action: manipulation; border-radius: 14px; box-shadow: 0 12px 34px rgba(30, 30, 20, .18); cursor: pointer; }
.paused-cover { position: absolute; inset: 0; margin: auto; width: 180px; height: 56px; display: flex; align-items: center; justify-content: center; gap: 10px; border: none; border-radius: 999px; background: var(--primary); color: #fff; font-weight: 800; font-size: 18px; cursor: pointer; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); }
.side { width: 340px; flex: none; display: flex; flex-direction: column; gap: 10px; justify-content: center; position: relative; }
.controls { display: flex; flex-direction: column; gap: 10px; }
.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tool {
  position: relative; border: 1px solid var(--btn-line); background: var(--card); color: var(--btn-ink); border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; min-height: 60px;
  cursor: pointer; font-size: 12.5px; font-weight: 800; backdrop-filter: blur(6px); line-height: 1.1; text-align: center;
}
.tool svg { width: 24px; height: 24px; color: var(--accent); }
.tool:active { transform: scale(.96); }
.tool:disabled { opacity: .4; }
.tool .badge { position: absolute; top: 3px; right: 4px; font-style: normal; font-size: 12px; line-height: 15px; background: var(--muted); color: #fff; border-radius: 999px; padding: 1px 6px; }
.tool .badge.on { background: var(--primary); }
.tool.on { outline: 2px solid var(--primary); }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.num {
  border: 1px solid var(--btn-line); background: var(--pad); color: var(--pad-ink); border-radius: 14px; cursor: pointer;
  font-family: var(--font); font-weight: 800; font-size: 34px; line-height: 1; min-height: 64px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; box-shadow: 0 2px 0 rgba(0, 0, 0, .05); transition: transform .06s;
}
.num small { font-size: 12px; color: var(--pad-sub); font-weight: 700; }
.num:active { transform: scale(.95); }
.num.done { opacity: .35; }
.num.hl { outline: 2px solid var(--saffron); }
body.notes .num { color: var(--muted); font-size: 26px; }
body.large .num { font-size: 40px; }
body.large .num small { font-size: 12px; }
.pad.six { grid-template-columns: repeat(3, 1fr); }

.hintbox {
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12); backdrop-filter: blur(8px); animation: rise .2s ease;
}
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }
.hb-head { display: flex; align-items: center; gap: 8px; }
.hb-head b { font-family: var(--head); font-size: 19px; color: var(--primary); flex: 1; }
body[data-theme="dark"] .hb-head b { color: #5CC2A6; }
.hb-head span { font-size: 12px; color: var(--muted); }
#hb-text { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 600; }
body.large #hb-text { font-size: 18px; }
.hb-note { margin: 0; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.hintbox .row .btn { flex: 1; padding: 8px 10px; }

/* ---------------------------------------------------------------- cat */
.cat { position: absolute; width: 120px; pointer-events: auto; cursor: pointer; z-index: 3; transition: opacity .3s; }
.cat img { width: 100%; display: block; transform-origin: 50% 100%; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .18)); }
.cat.sleep img { animation: breathe 3.6s ease-in-out infinite; }
.cat.sit img, .cat.happy img { animation: perk .35s ease-out; }
@keyframes breathe { 50% { transform: scale(1.015, 1.035); } }
@keyframes perk { 0% { transform: scale(.94, 1.06) translateY(4px); } 60% { transform: scale(1.03, .97); } }
.cat .zz { position: absolute; right: 18%; top: 8%; font-family: var(--head); color: var(--muted); font-size: 18px; opacity: 0; pointer-events: none; }
.cat.sleep .zz { animation: zz 4s ease-in-out infinite; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 6px) scale(.7); } 30% { opacity: .8; } 100% { opacity: 0; transform: translate(12px, -26px) scale(1.2); } }
.bubble {
  position: absolute; bottom: 92%; right: 30%; width: max-content; max-width: 220px; background: var(--card); color: var(--ink);
  border: 1px solid var(--card-line); border-radius: 14px; padding: 8px 12px; font-size: 13px; font-weight: 700; line-height: 1.3;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .14); animation: rise .2s ease; pointer-events: none;
}
.bubble::after { content: ""; position: absolute; bottom: -7px; right: 24px; width: 12px; height: 12px; background: inherit; border: inherit; border-top: none; border-left: none; transform: rotate(45deg); }
.cat-spot { min-height: 0; }
.cat.inline { position: relative; width: 60px; margin: -10px 0 -8px; }
.cat.inline .bubble { right: 0; bottom: auto; top: 100%; margin-top: 6px; z-index: 5; }
.cat.inline .bubble::after { display: none; }

/* ---------------------------------------------------------------- overlays / modals */
.overlay { position: absolute; inset: 0; background: var(--shade); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; } }
.modal {
  background: var(--card); color: var(--ink); border: 1px solid var(--card-line); border-radius: 20px; padding: 20px;
  width: min(420px, 100%); max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; align-items: stretch;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25); animation: pop .22s cubic-bezier(.2, .9, .3, 1.2); backdrop-filter: blur(10px); text-align: center;
}
body[data-theme="light"] .modal { background: rgba(255, 251, 243, .97); }
body[data-theme="dark"] .modal { background: rgba(24, 31, 48, .97); }
.modal.wide { width: min(680px, 100%); }
.modal h2 { font-size: 26px; }
.modal h3 { font-size: 17px; text-align: left; margin-top: 4px; }
@keyframes pop { from { transform: scale(.94); opacity: 0; } }
.loader { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; font-size: 18px; text-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.spin-star { width: 64px; height: 64px; fill: var(--saffron); animation: spin 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.result .res-star { width: 72px; height: 72px; margin: -4px auto 0; fill: var(--saffron); animation: spin 8s linear infinite; }
.result.lost .res-star { fill: var(--muted); animation: none; }
.res-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.res-stats div { background: var(--chip); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.res-stats small { font-size: 12px; color: var(--muted); }
.res-stats b { font-size: 20px; font-variant-numeric: tabular-nums; }
.res-stats .new { color: var(--saffron); font-size: 11px; }
.badge-line { margin: 0; color: var(--primary); font-weight: 800; }
body[data-theme="dark"] .badge-line { color: #5CC2A6; }

/* settings */
.set-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; }
.set-group { display: flex; flex-direction: column; gap: 8px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; font-size: 15px; }
.set-row select { font: inherit; font-size: 14px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--btn-line); background: var(--btn); color: var(--btn-ink); max-width: 55%; }
.set-row input[type=checkbox] { appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--btn-line); position: relative; cursor: pointer; flex: none; transition: background .15s; }
.set-row input[type=checkbox]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: left .15s; }
.set-row input[type=checkbox]:checked { background: var(--primary); }
.set-row input[type=checkbox]:checked::after { left: 21px; }

/* calendar */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cal-head b { font-size: 18px; text-transform: capitalize; }
.cal-trophies { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 14px; color: var(--muted); flex-wrap: wrap; }
.cal-trophies .tro { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; }
.cal-trophies svg { width: 34px; height: 34px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; width: 100%; max-width: 400px; margin: 0 auto; }
.cal-grid .wd { font-size: 11px; color: var(--muted); padding-bottom: 2px; }
.day {
  aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--btn-line); background: var(--btn); color: var(--btn-ink); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; position: relative; padding: 0;
}
.day:disabled { opacity: .35; cursor: default; }
.day.today { outline: 2px solid var(--primary); }
.day.sel { background: var(--chip-on); color: #fff; }
.day .dots { display: flex; gap: 2px; margin-top: 2px; height: 5px; }
.day .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--saffron); }
.day.all { background: linear-gradient(135deg, rgba(224, 165, 38, .35), rgba(30, 107, 92, .25)); }
.cal-pick { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.cal-pick .chips { justify-content: center; }

/* stats */
.tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; text-align: left; }
.stat-card { background: var(--chip); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.stat-card b { font-size: 15px; margin-bottom: 2px; }
.stat-card div { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-weight: 600; }
.stat-card div span:last-child { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-daily { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* trophies */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; text-align: left; }
.ach { display: flex; gap: 10px; align-items: center; background: var(--chip); border-radius: 14px; padding: 8px 10px; }
.ach svg { width: 38px; height: 38px; flex: none; }
.ach.off svg { opacity: .25; filter: grayscale(1); }
.ach.off { color: var(--muted); }
.ach b { font-size: 14px; display: block; }
.ach small { font-size: 12px; color: var(--muted); font-weight: 600; line-height: 1.25; display: block; }
.month-trophies { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.month-trophies .mt { display: flex; flex-direction: column; align-items: center; font-size: 12px; color: var(--muted); gap: 2px; min-width: 64px; }
.month-trophies svg { width: 40px; height: 40px; }

/* learn */
.learn { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.learn h3 { display: flex; align-items: center; gap: 8px; }
.learn h3 i { font-style: normal; font-size: 12px; background: var(--chip); border-radius: 999px; padding: 2px 8px; color: var(--muted); }
.tech { display: grid; grid-template-columns: 22px 1fr; gap: 2px 8px; padding: 6px 0; border-bottom: 1px dashed var(--card-line); }
.tech .tick { grid-row: span 2; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--btn-line); display: grid; place-items: center; font-size: 12px; color: #fff; margin-top: 2px; }
.tech.seen .tick { background: var(--primary); border-color: var(--primary); }
.tech b { font-size: 15px; }
.tech span { font-size: 13.5px; color: var(--muted); font-weight: 600; line-height: 1.35; }

.howto { text-align: left; margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-weight: 600; line-height: 1.4; }
.keys { font-size: 13px; color: var(--muted); margin: 0; }

.toast {
  position: absolute; top: max(62px, calc(env(safe-area-inset-top) + 56px)); left: 50%; transform: translateX(-50%); z-index: 20;
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 800;
  max-width: calc(100% - 32px); text-align: center; box-shadow: 0 8px 22px rgba(0, 0, 0, .2); animation: rise .2s ease; pointer-events: none;
}
body[data-theme="dark"] .toast { background: #ECE6DA; color: #141B2D; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 980px) { .cards { grid-template-columns: 1fr 1fr; } .card.variants { grid-column: span 2; } .card.variants { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } .card.variants .card-h { grid-column: 1 / -1; } .variant { border-top: none; padding: 0; } }
@media (max-width: 680px) {
  .cards { grid-template-columns: 1fr; } .card.variants { grid-column: auto; display: flex; } .variant { border-top: 1px solid var(--card-line); padding-top: 10px; } .variant:first-of-type { border-top: none; padding-top: 0; }
  .logo h1 { font-size: 28px; } .logo-star { width: 42px; height: 42px; }
  .set-cols { grid-template-columns: 1fr; }
}
/* portrait: board on top, controls below */
@media (orientation: portrait), (max-aspect-ratio: 1/1) {
  .play { flex-direction: column; gap: 8px; }
  .board-wrap { flex: 1 1 auto; }
  .side { width: 100%; max-width: 560px; margin: 0 auto; flex: none; }
  .tools { grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .tool { min-height: 52px; font-size: 12px; padding: 6px 2px; }
  .tool svg { width: 22px; height: 22px; }
  .pad { grid-template-columns: repeat(9, 1fr); gap: 5px; }
  .pad.six { grid-template-columns: repeat(6, 1fr); }
  .num { min-height: 56px; font-size: 28px; border-radius: 12px; }
  .cat-game { display: none; }
  .g-title span { display: none; }
  .play { justify-content: center; }
  .g-mist .full { display: none; } .g-mist .short { display: inline; }
}
@media (orientation: portrait) and (min-height: 740px) {
  .num { min-height: 68px; font-size: 32px; }
  .tool { min-height: 60px; }
}
@media (orientation: portrait) and (max-width: 420px) {
  /* phones: 3 × 2 tool grid so labels stay ≥ 12 px in every language (there is spare height under the board) */
  .tools { grid-template-columns: repeat(3, 1fr); }
  .tool { min-height: 54px; padding: 4px 3px; font-size: 12px; }
  .tool span { font-size: 12px; }
  .num { min-height: 52px; font-size: 26px; }
  .g-mist, .g-time { padding: 0 8px; font-size: 14px; height: 36px; }
  .ibtn { width: 36px; height: 36px; }
  #game { padding-left: 6px; padding-right: 6px; }
}
/* short landscape phones */
@media (orientation: landscape) and (max-height: 520px) {
  .side { width: 300px; gap: 6px; }
  .tool { min-height: 44px; font-size: 11px; padding: 4px 2px; }
  .tool span { display: none; }
  .num { min-height: 44px; font-size: 24px; }
  .num small { display: none; }
  .tools, .pad { gap: 5px; }
  .topbar .g-title span { display: none; }
  .ibtn { width: 34px; height: 34px; }
  .g-mist, .g-time { height: 34px; }
  .cat-game { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
body.motion *, body.motion *::before, body.motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }