/* Feed my prout (the card game, once Le Grand Repas): its styles.
   One phone-width column: HUD, stink meter, accomplices, the scene, the combo preview, the gauge, your hand, Digest + PUSH.
   v0.1's skin: belly pink, aubergine ink, pea-gas green; cards carry their family colour on a thick outline. */
:root {
  --bg: #FFEDE8;
  --bg-2: #FFDDD4;
  --card: #FFF8F5;
  --ink: #34152F;
  --ink-soft: #6B4663;
  --line: #34152F;
  --shadow: #34152F;
  --gas: #A3C72C;
  --gas-ink: #4A6311;
  --chili: #E4472A;
  --gold: #FFBF1F;
  --on-fill: #34152F;
  --eye: #FFFFFF;
  --blush: #FF8FA3;
  --cap: #3E7BD6;
  --legend: #8E6CFF;
  /* volume and odour, everywhere (Tom, 2026-10-30): the push's two boxes, and every number that adds to them */
  --vol: #8CCB45; --odo: #AE92FF; --box-ink: #24101F; --vol-ink: #3F7A10; --odo-ink: #6440D8;
  --overlay: rgba(52, 21, 47, .58);
  --f-logo: "Rubik Bubbles", "Bagel Fat One", system-ui, sans-serif;
  --f-display: "Bagel Fat One", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --f-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* the phone's bars: env() in browsers, and Capacitor's own numbers in the Android app (it draws the game under
     the status bar and sets --safe-area-inset-*); both are 0 where there's nothing to clear */
  --sat: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px));
  --sab: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px));
  --sal: max(env(safe-area-inset-left, 0px), var(--safe-area-inset-left, 0px));
  --sar: max(env(safe-area-inset-right, 0px), var(--safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1E0E1C; --bg-2: #2A1529; --card: #331A31;
    --ink: #FFE8E1; --ink-soft: #D4B4CA; --line: #F2CCDD; --shadow: #070206;
    --gas: #B4DA3C; --gas-ink: #C6EA5C; --chili: #FF6A47; --gold: #FFC93D;
    --overlay: rgba(0, 0, 0, .64); --vol-ink: #A6E06A; --odo-ink: #C6B4FF;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1E0E1C; --bg-2: #2A1529; --card: #331A31;
  --ink: #FFE8E1; --ink-soft: #D4B4CA; --line: #F2CCDD; --shadow: #070206;
  --gas: #B4DA3C; --gas-ink: #C6EA5C; --chili: #FF6A47; --gold: #FFC93D;
  --overlay: rgba(0, 0, 0, .64); --vol-ink: #A6E06A; --odo-ink: #C6B4FF;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.4;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
#app { height: 100%; }
button { font-family: inherit; color: inherit; touch-action: manipulation; cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--chili); outline-offset: 2px; }
[hidden] { display: none !important; }

.screen { height: 100%; max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; user-select: none; -webkit-user-select: none;
  padding-left: max(16px, var(--sal)); padding-right: max(16px, var(--sar)); }
.chip { font-weight: 900; font-size: 13px; background: var(--card); border: 2px solid var(--line); border-radius: 999px; padding: 6px 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chip-gold { background: var(--gold); color: var(--on-fill); border-color: var(--on-fill); }

/* ---------- title ---------- */
.title-screen { position: relative; justify-content: flex-start; padding-block: calc(54px + var(--sat)) calc(16px + var(--sab)); overflow-y: auto; }
.t-right { display: flex; gap: 6px; }
.t-top { position: absolute; top: calc(12px + var(--sat)); left: max(16px, var(--sal)); right: max(16px, var(--sar)); display: flex; justify-content: space-between; gap: 8px; }
.t-main { display: grid; gap: 14px; justify-items: center; text-align: center; margin-block: auto; }
.logo { margin: 0; font-family: var(--f-logo); font-weight: 400; font-size: 44px; line-height: 1; text-wrap: balance; }
.t-sub { margin: -6px 0 0; font-family: var(--f-display); font-size: 22px; color: var(--gas-ink); }
.t-prout { width: 170px; }
.t-pitch { margin: 0; max-width: 30em; font-size: 15.5px; font-weight: 700; color: var(--ink-soft); }
.t-actions { display: grid; gap: 10px; width: min(320px, 100%); }
.t-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.t-buddy { margin: -2px 0 0; max-width: 30em; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-soft); text-wrap: balance; background: none; border: 0; padding: 2px 4px; }
.t-change { display: inline-block; margin-left: 4px; padding: 1px 8px; border: 2px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-size: 11.5px; font-weight: 900; }
.t-buddy b { color: var(--ink); }
.t-gauge { width: min(320px, 100%); }
.t-stats { margin: 0; font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---------- run screen ---------- */
.run-screen { gap: 7px; padding-block: calc(8px + var(--sat)) calc(10px + var(--sab)); }
.hud { display: flex; align-items: center; gap: 6px; }
.hud-where { flex: 1; min-width: 0; }
.hud-where b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 18px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-where small { display: block; font-size: 11px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meter-row { display: flex; align-items: center; gap: 8px; }
.meter { position: relative; flex: 1; height: 24px; border-radius: 999px; border: 2.5px solid var(--line); background: var(--card); overflow: hidden; }
.meter-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--gas), var(--gold)); }
.meter-text { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 3px var(--card), 0 0 3px var(--card), 0 0 6px var(--card); }
.counts { display: flex; gap: 6px; font-weight: 900; font-size: 14px; font-variant-numeric: tabular-nums; }
.luck { font: inherit; font-weight: 900; background: none; border: 0; padding: 0; color: inherit; }
.luck.hot { color: var(--legend); animation: hop 1.1s ease-in-out infinite; }
.accs { display: flex; gap: 5px; min-height: 30px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.accs::-webkit-scrollbar { display: none; }
.acc-chip { flex: none; display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 11.5px; background: var(--card); border: 2px solid var(--line); border-radius: 10px; padding: 3px 7px 3px 4px; }
.acc-chip i { font-style: normal; font-size: 17px; line-height: 1; }
.acc-chip.buddy { border-color: var(--legend); box-shadow: 0 0 0 2px rgba(142, 108, 255, .35); }
.acc-free, .acc-empty { font-size: 11.5px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }

.scene { --s-top: #FBE6F2; --s-bottom: #F5D2E3; --s-floor: #E7B6CE; --s-ink: #34152F;
  flex: 1 1 auto; min-height: 150px; max-height: 420px; position: relative; overflow: hidden; border: 3px solid var(--line); border-radius: 22px;
  background: linear-gradient(var(--s-top), var(--s-bottom)); touch-action: none; cursor: pointer; isolation: isolate; }
.scene::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20%; background: var(--s-floor); z-index: 0; }
.scene[data-look="space"] { background:
  radial-gradient(1.6px 1.6px at 12% 22%, #FFFFFF 60%, transparent 61%), radial-gradient(1.4px 1.4px at 34% 12%, #FFFFFF 60%, transparent 61%),
  radial-gradient(2px 2px at 58% 30%, #FFF6C9 60%, transparent 61%), radial-gradient(1.4px 1.4px at 76% 18%, #FFFFFF 60%, transparent 61%),
  radial-gradient(1.8px 1.8px at 90% 40%, #FFFFFF 60%, transparent 61%), radial-gradient(1.4px 1.4px at 22% 48%, #FFFFFF 60%, transparent 61%),
  linear-gradient(var(--s-top), var(--s-bottom)); }
.props span { position: absolute; z-index: 1; opacity: .85; line-height: 1; pointer-events: none; }
.prop-ic { width: 100%; height: auto; display: block; }
.scene-boss { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 4; font-size: 11.5px; font-weight: 900; text-align: center; color: #FFFFFF;
  background: rgba(52, 21, 47, .78); border-radius: 10px; padding: 4px 8px; pointer-events: none; }
.result { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 4; text-align: center; color: var(--s-ink); pointer-events: none; display: grid; gap: 2px; }
.result b { font-family: var(--f-display); font-weight: 400; font-size: 24px; line-height: 1.05; }
.result b:empty { display: none; }
.result span { font-size: 12.5px; font-weight: 800; opacity: .85; text-wrap: balance; }
.result.stamp b { animation: stamp .38s cubic-bezier(.3, 1.8, .5, 1); }
.prout-wrap { position: absolute; left: 50%; bottom: 14%; width: min(40%, 170px); z-index: 2; pointer-events: none;
  transform: translateX(-50%) scale(var(--size, 1)); transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.3, 1.6, .5, 1); }
.prout { width: 100%; height: auto; display: block; overflow: visible; transform-origin: 50% 90%; animation: bob 2.8s ease-in-out infinite; }
.prout.charging, .mini { animation: none; }
.ln-out { fill: var(--on-fill); stroke: var(--on-fill); stroke-width: 6; }
.body { fill: var(--pc); }
.gloss { fill: var(--eye); opacity: .55; }
.blush { fill: var(--blush); opacity: .7; }
.eye { fill: var(--eye); }
.pupil, .ink-fill { fill: var(--on-fill); }
.ln { fill: none; stroke: var(--on-fill); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cap { fill: var(--cap); stroke: var(--on-fill); stroke-width: 2; stroke-linejoin: round; }
.crown { fill: var(--gold); stroke: var(--on-fill); stroke-width: 2; stroke-linejoin: round; }
.mono { fill: none; stroke: var(--gold); stroke-width: 1.8; }
.halo-o { fill: none; stroke: var(--on-fill); stroke-width: 5.5; }
.halo-i { fill: none; stroke: var(--gold); stroke-width: 2.6; }
.horn { fill: var(--chili); stroke: var(--on-fill); stroke-width: 2; stroke-linejoin: round; }
.bow { fill: #FF5FA2; stroke: var(--on-fill); stroke-width: 2; stroke-linejoin: round; }
.face, .acc { display: none; }
.prout[data-face="idle"] .f-idle, .prout[data-face="strain"] .f-strain, .prout[data-face="happy"] .f-happy,
.prout[data-face="shock"] .f-shock, .prout[data-face="sad"] .f-sad { display: inline; }
.prout[data-stage="0"] .acc-curl, .prout[data-stage="1"] .acc-cap,
.prout[data-stage="2"] .acc-stache, .prout[data-stage="3"] .acc-stache, .prout[data-stage="3"] .acc-mono,
.prout[data-stage="4"] .acc-stache, .prout[data-stage="4"] .acc-mono, .prout[data-stage="4"] .acc-crown,
.prout[data-acc~="crown"] .acc-crown, .prout[data-acc~="halo"] .acc-halo, .prout[data-acc~="horns"] .acc-horns, .prout[data-acc~="bow"] .acc-bow,
.prout[data-acc~="cap"] .acc-cap, .prout[data-acc~="curl"] .acc-curl, .prout[data-acc~="stache"] .acc-stache, .prout[data-acc~="mono"] .acc-mono { display: inline; }
.dcard.unknown .prout .face, .dcard.unknown .gloss, .dcard.unknown .blush { display: none; }
.witnesses { position: absolute; left: 0; right: 0; bottom: 5%; z-index: 3; display: flex; justify-content: space-between; padding: 0 5%; pointer-events: none; }
.w-side { display: flex; gap: 6px; }
.w-left .witness { --fx: -170px; }
.w-right .witness { --fx: 170px; }
.witness { position: relative; display: inline-block; font-size: 30px; line-height: 1; }
.witness .wit { width: 40px; height: 47px; display: block; }
.witness.flee { animation: flee 1.9s ease-in-out; }
.bubble { position: absolute; bottom: 104%; left: 50%; transform: translateX(-50%) scale(0); background: var(--eye); border: 2px solid var(--on-fill); border-radius: 12px;
  font-size: 17px; padding: 2px 5px; line-height: 1.1; opacity: 0; }
.bubble.show { animation: bubble 1.5s ease-out; }
.fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.puff { position: absolute; border-radius: 50%; border: 2.5px solid var(--on-fill); pointer-events: none; }
.toast { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 6; background: var(--card); color: var(--ink); border: 3px solid var(--line); border-radius: 16px;
  box-shadow: 4px 4px 0 var(--shadow); padding: 8px 10px; display: flex; gap: 10px; align-items: center; pointer-events: none; }
.toast.in { animation: toastIn .4s cubic-bezier(.3, 1.6, .5, 1); }
.toast svg { width: 54px; flex: none; }
.toast div { display: grid; gap: 1px; min-width: 0; }
.toast small { font-size: 10.5px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--gas-ink); }
.toast b { font-family: var(--f-display); font-weight: 400; font-size: 16px; line-height: 1.1; }
.toast span { font-size: 12px; color: var(--ink-soft); }
.toast .t-emoji { font-size: 34px; line-height: 1; flex: none; color: inherit; }

/* the push line: the form, like a hand's name, then volume × odour in two boxes */
.preview { display: grid; gap: 4px; flex: none; font-size: 13px; font-weight: 800; }
.pv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.pv-form { min-width: 0; padding: 0; border: 0; background: none; font-family: var(--f-display); font-size: 19px; line-height: 1.05; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.lv { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--gold); color: #34152F; border: 2px solid var(--line);
  font: 900 11px/1 var(--f-body); font-style: normal; vertical-align: 3px; }
.shop-grid.one { grid-template-columns: minmax(0, 1fr); }
/* the shop's top: what's next, and your run one tap away */
.shop-top { display: flex; align-items: center; gap: 8px; } .shop-top .note { flex: 1; min-width: 0; } .shop-top .btn-s { flex: none; display: inline-flex; align-items: center; gap: 4px; }
/* Les Festins: gold while feasting, grey while digesting */
.acc-chip.festin.feast { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.acc-chip.festin.digest { opacity: .55; filter: grayscale(.7); }
.offer.festin { border-color: var(--gold); border-style: dashed; }
.mine-row.festin { opacity: .85; }
/* your run: a summary, what each Accomplice is worth now, your Recettes, the deck by where its foods are */
.run-sum { display: flex; flex-wrap: wrap; gap: 6px; }
.run-sum > span { display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px; border: 2px solid var(--line); border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 800; }
.acc-now, .mine-row small.acc-now { display: block; margin-top: 1px; font-weight: 900; color: #34152F; background: var(--gold); border-radius: 999px; padding: 0 7px; width: fit-content; }
.rec-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rec-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); font-weight: 900; font-size: 13px; }
.deck-card.dim { opacity: .45; }
.o-recette { font-family: var(--f-display); font-size: 22px; line-height: 1; padding: 6px 14px; border-radius: 12px; border: 3px solid var(--line); background: var(--gold); color: #34152F; }
#h-deck small { font-size: .75em; opacity: .7; }
.pv-form small { font-family: var(--f-body); font-size: 11.5px; font-weight: 900; color: var(--ink-soft); margin-left: 2px; }
span.pv-form { font-family: var(--f-body); font-size: 14px; font-weight: 900; color: var(--ink-soft); }
.pv-streak { flex: none; margin-left: auto; font-family: var(--f-display); font-size: 15px; line-height: 1.1; color: var(--box-ink); background: var(--odo); border: 2px solid var(--line); border-radius: 999px; padding: 0 8px; }
.pv-streak.hot { background: var(--chili); color: #fff; }
.pv-need { flex: none; font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pv-need b { color: var(--ink); }
.pv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.box { position: relative; display: grid; justify-items: center; padding: 3px 4px 2px; border-radius: 12px; border: 3px solid var(--line); color: var(--box-ink);
  font-family: var(--f-display); font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.box small { font-family: var(--f-body); font-size: 8.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-top: 1px; }
.box.vol { background: var(--vol); } .box.odo { background: var(--odo); }
.pv-row.none .box { opacity: .45; }
.pv-x { font-family: var(--f-display); font-size: 18px; }
.pv-eq { min-width: 64px; text-align: right; font-size: 13px; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pv-eq b { font-family: var(--f-display); font-weight: 400; font-size: 19px; color: var(--ink); }
.pv-t { display: inline-block; font-weight: 900; color: var(--box-ink); background: var(--gold); border-radius: 7px; padding: 0 4px; font-size: 11.5px; }
.bump { animation: bump .28s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes bump { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* the push counting itself: chips pop over each food, and over the boxes */
.pop-chip { position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); z-index: 6; pointer-events: none;
  white-space: nowrap; border: 2px solid var(--line); border-radius: 8px; padding: 0 5px; color: var(--box-ink); font-size: 9.5px; font-weight: 900; line-height: 1.35;
  animation: chipIn .5s ease-out both; }
.pop-chip b { font-family: var(--f-display); font-weight: 400; font-size: 14px; }
.pop-chip.big { font-size: 11px; padding: 1px 7px; } .pop-chip.big b { font-size: 19px; }
.pv-eq.fire b { color: var(--chili); animation: burn .45s ease-in-out infinite alternate; }
@keyframes burn { from { text-shadow: 0 0 4px var(--gold), 0 -2px 8px var(--chili); } to { text-shadow: 0 0 9px var(--gold), 0 -6px 16px var(--chili); } }
.pop-chip.v { background: var(--vol); } .pop-chip.o { background: var(--odo); } .pop-chip.bad { background: var(--chili); color: #fff; }
@keyframes chipIn { 0% { opacity: 0; scale: .4; translate: 0 6px; } 25% { opacity: 1; scale: 1.1; translate: 0 0; } 75% { opacity: 1; scale: 1; translate: 0 -4px; } 100% { opacity: 0; scale: 1; translate: 0 -10px; } }
/* volume and odour in any text */
.vv { color: var(--vol-ink); font-weight: 900; } .oo { color: var(--odo-ink); font-weight: 900; }
.gauge { position: relative; height: 22px; flex: none; border-radius: 999px; border: 2.5px solid var(--line); background: var(--card); overflow: hidden; }
.gauge-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--gas); }
.gauge[data-state="gold"] .gauge-fill { background: var(--gold); }
.gauge[data-state="over"] .gauge-fill { background: var(--chili); }
/* Fantôme: past half-way the fill fades out; the prout's swelling and its rumble are all you have */
.gauge-fill { transition: opacity .25s ease; }
.gauge[data-state="hidden"] .gauge-fill { opacity: 0; }
.gauge-zone { position: absolute; top: 0; bottom: 0; border-inline: 2.5px solid var(--line); transition: left .2s ease, width .2s ease;
  background: repeating-linear-gradient(45deg, rgba(255, 191, 31, .75) 0 7px, rgba(255, 191, 31, .35) 7px 14px); }
.gauge-pile { position: absolute; top: 0; bottom: 0; left: 32%; width: 36%; background: rgba(255, 255, 255, .55); }
.gauge.live .gauge-zone { transition: none; }

.hand { display: flex; gap: 4px; justify-content: center; flex: none; padding-top: 10px; }
.card { position: relative; flex: 1 1 0; max-width: 58px; min-width: 0; height: 74px; padding: 4px 2px 3px; border-radius: 12px; border: 3px solid var(--cc, var(--line));
  background: var(--card); box-shadow: 0 3px 0 var(--line); display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center; transition: transform .12s ease; }
.card.on { transform: translateY(-10px); box-shadow: 0 5px 0 var(--line), 0 0 0 3px var(--gold); }
.c-vol { font-weight: 900; font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; }
.c-emoji { font-size: 25px; line-height: 1; }
.c-name { font-size: 8.5px; font-weight: 900; line-height: 1.05; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ciqual's names are long: two lines, cut with an ellipsis; the full name is in the card's label */
.c-name.long { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; font-size: 8px; overflow-wrap: anywhere; }
/* the family's symbol, in place of a picture until build step 4 draws each food */
.c-sym, .o-sym, .fam-sym { flex: none; fill: var(--fc); stroke: var(--line); stroke-width: 1.6; stroke-linejoin: round; }
.c-sym { width: 24px; height: 24px; }
.o-sym { width: 32px; height: 32px; }
.c-sym .shine, .o-sym .shine, .fam-sym .shine { fill: rgba(255, 255, 255, .75); stroke: none; }
.c-sym .eye, .o-sym .eye, .fam-sym .eye { fill: var(--line); stroke: none; }
.c-odo { position: absolute; top: -8px; right: -6px; font-size: 10px; font-weight: 900; background: var(--legend); color: #FFFFFF; border: 2px solid var(--on-fill); border-radius: 999px; padding: 0 4px; }
.c-count { position: absolute; top: -8px; left: -6px; font-size: 10px; font-weight: 900; background: var(--card); border: 2px solid var(--line); border-radius: 999px; padding: 0 4px; }
.actions-row { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px; flex: none; }
.digest { height: 58px; font-weight: 900; font-size: 14px; border-radius: 18px; border: 3px solid var(--line); background: var(--card); padding: 0 6px; }
.digest:disabled { opacity: .45; }
.hold { height: 58px; font-family: var(--f-display); font-size: 26px; letter-spacing: .04em; border-radius: 18px; border: 3px solid var(--line); background: var(--gas); color: var(--on-fill);
  box-shadow: 0 6px 0 var(--shadow); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .06s, box-shadow .06s; margin-bottom: 6px; }
.hold.is-down { transform: translateY(4px); box-shadow: 0 2px 0 var(--shadow); }

/* ---------- sheets ---------- */
.sheet-back { position: fixed; inset: 0; z-index: 20; background: var(--overlay); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; max-width: 520px; max-height: min(90%, calc(100% - var(--sat) - 12px)); margin: 0 auto; background: var(--bg); border: 3px solid var(--line); border-bottom: 0;
  border-radius: 24px 24px 0 0; display: flex; flex-direction: column; animation: sheetUp .28s ease-out; padding-bottom: var(--sab); }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; border-bottom: 2px solid var(--bg-2); }
.sheet-head h2 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 24px; }
.sheet-extra { flex: 1; font-weight: 900; color: var(--gas-ink); font-variant-numeric: tabular-nums; }
.sheet-body { overflow-y: auto; padding: 12px 16px 22px; display: grid; gap: 10px; overscroll-behavior: contain; }
.sheet-body h3 { margin: 8px 0 0; font-family: var(--f-display); font-weight: 400; font-size: 19px; }
.note { margin: 0; font-size: 13px; color: var(--ink-soft); }
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.shop-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.offer { background: var(--card); border: 3px solid var(--cc, var(--line)); border-radius: 16px; padding: 10px 8px; display: grid; gap: 4px; justify-items: center; text-align: center; align-content: start; }
.offer.sold { opacity: .55; }
/* Le Marché's stall stands out: it can sell any food at all */
.offer.tagged { position: relative; border-style: dashed; }
.o-tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; background: var(--gold); color: #34152F; border: 2px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.o-emoji { font-size: 32px; line-height: 1; }
.offer b { font-size: 13.5px; line-height: 1.15; }
.offer small { font-size: 11.5px; color: var(--ink-soft); line-height: 1.25; min-height: 2.5em; }
.o-sold { font-size: 12px; font-weight: 900; color: var(--gas-ink); }
.btn-s { font-weight: 900; font-size: 13px; border-radius: 12px; border: 2px solid var(--on-fill); background: var(--gas); color: var(--on-fill); padding: 8px 12px; white-space: nowrap; }
.btn-s.alt { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-s.danger { background: var(--chili); color: #FFFFFF; }
.btn-s:disabled { opacity: .45; }
.shop-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.mine { display: grid; gap: 6px; }
.mine-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 6px 8px; font-size: 13px; }
.mine-row small { color: var(--ink-soft); }
.next-btn { margin-top: 6px; }
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; padding-top: 8px; }
.deck-card { max-width: none; }
.deck-card:disabled { cursor: default; }
.dexgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dcard { background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 8px 6px; text-align: center; display: grid; gap: 3px; align-content: start; }
.dcard svg { width: 60px; margin: 0 auto; }
.dcard.unknown { border-style: dashed; background: transparent; }
.dcard.unknown svg { opacity: .35; }
.dcard b { font-size: 12.5px; line-height: 1.15; }
.dcard small { font-size: 11px; line-height: 1.25; color: var(--ink-soft); }
.dcard .seen { font-weight: 900; color: var(--gas-ink); }
.rar { font-size: 9.5px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--gas-ink); }
.item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.ico { font-size: 24px; text-align: center; line-height: 1; }
.item h4 { margin: 0; font-size: 15px; font-weight: 900; }
.item p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-soft); }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 30; background: var(--overlay); display: grid; place-items: center;
  padding: calc(16px + var(--sat)) max(16px, var(--sar)) calc(16px + var(--sab)) max(16px, var(--sal)); }
.ov-card { width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto; overflow-x: hidden; background: var(--bg); border: 3px solid var(--line); border-radius: 28px; box-shadow: 7px 7px 0 var(--shadow);
  padding: 22px 20px; text-align: center; display: grid; gap: 12px; animation: pop .4s cubic-bezier(.3, 1.6, .5, 1); }
.ov-card h2 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 28px; line-height: 1.05; text-wrap: balance; }
.ov-card .logo { font-size: 36px; }
.eyebrow { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--gas-ink); }
.lede { margin: 0; font-size: 16px; font-weight: 700; }
.soft { margin: 0; font-size: 14px; color: var(--ink-soft); }
.ov-prout { width: 140px; margin: 0 auto; }
.ov-prout svg { animation: evolve 1.2s cubic-bezier(.3, 1.4, .5, 1); }
.sit-wit { font-size: 46px; line-height: 1; animation: hop 1.4s ease-in-out infinite; display: flex; justify-content: center; gap: 4px; }
.sit-wit .wit { width: 46px; height: 54px; }
.sit-wit .wit.big { width: 72px; height: 84px; }
.rule { background: var(--card); border: 2.5px solid var(--chili); border-radius: 14px; padding: 8px 12px; font-weight: 800; font-size: 14px; }
.rule small { display: block; font-size: 10.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--chili); }
.coins, .stats { margin: 0; display: grid; gap: 4px; text-align: left; }
.coins div { display: flex; justify-content: space-between; font-size: 14px; font-weight: 800; padding: 3px 8px; }
.coins dd, .stats dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 900; }
.coins .total { border-top: 2px solid var(--bg-2); padding-top: 6px; font-size: 16px; }
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; text-align: center; }
.stats div { background: var(--card); border-radius: 12px; padding: 6px; }
.stats dt { font-size: 10.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.stats dd { font-size: 16px; }
.actions { display: grid; gap: 8px; }
.actions.row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.btn { font-family: var(--f-display); font-size: 20px; border-radius: 18px; border: 3px solid var(--line); background: var(--gas); color: var(--on-fill); padding: 12px 16px; box-shadow: 0 5px 0 var(--shadow); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--shadow); }
.btn.alt { background: var(--card); color: var(--ink); }
.btn.small { font-size: 16px; padding: 9px 12px; }
.btn:disabled { opacity: .5; }

/* ---------- legendary prouts ---------- */
.aura { position: relative; isolation: isolate; }
.aura::before { content: ""; position: absolute; inset: -14%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--a1, var(--gold)), transparent); opacity: .7; }
.aura::after { content: ""; position: absolute; inset: -26%; z-index: -2; border-radius: 50%; opacity: .4;
  background: repeating-conic-gradient(var(--a2, var(--gold)) 0 9deg, transparent 9deg 24deg);
  -webkit-mask: radial-gradient(closest-side, #000 35%, transparent); mask: radial-gradient(closest-side, #000 35%, transparent);
  animation: spin 16s linear infinite; }
.aura.myth::after { opacity: .6; animation-duration: 7s;
  background: repeating-conic-gradient(#FF5F7A 0 9deg, transparent 9deg 15deg, #FFD23F 15deg 24deg, transparent 24deg 30deg, #5FE3A1 30deg 39deg, transparent 39deg 45deg, #6FA8FF 45deg 54deg, transparent 54deg 60deg); }
.aura.tease { --a1: #FFE58A; --a2: #FFBF1F; }
.aura.tease .prout { animation: tease .45s ease-in-out infinite; }
.ov-legend { width: 150px; margin: 10px auto 6px; }
.ov-legend .aura:not(.tease) .prout { animation: evolve 1.2s cubic-bezier(.3, 1.4, .5, 1), bob 2.8s ease-in-out 1.2s infinite; }
.myth-ink { color: var(--legend); }
.powers { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; text-align: left; }
.powers li { font-size: 13.5px; font-weight: 800; background: var(--card); border-radius: 10px; padding: 5px 9px; }
.stars { color: var(--gold); -webkit-text-stroke: .6px var(--on-fill); margin-right: 2px; }
.lgauge { position: relative; height: 22px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); overflow: hidden; }
.lgauge i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #C2AEFF, var(--legend)); }
.lgauge span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: var(--ink);
  text-shadow: 0 0 3px var(--card), 0 0 3px var(--card), 0 0 6px var(--card); }
.lgauge.hot i { animation: glow 1.1s ease-in-out infinite; }
.lgrid { display: grid; gap: 10px; }
.lcard { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: start; overflow: hidden;
  background: var(--card); border: 3px solid var(--line); border-radius: 18px; padding: 12px 10px; }
.lcard.on { box-shadow: 0 0 0 3px var(--gold); }
.lcard .aura { width: 84px; margin-top: 14px; }
.l-info { display: grid; gap: 4px; min-width: 0; }
.l-info b { font-family: var(--f-display); font-weight: 400; font-size: 17px; line-height: 1.1; }
.l-info .powers li { background: none; padding: 0; font-size: 12.5px; }
.l-meta { font-size: 11.5px; color: var(--ink-soft); line-height: 1.3; }
.l-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.lempty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 14px 0; }
.lempty .aura { width: 110px; }

/* ---------- mini-games ---------- */
.quiz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.quiz-btn { display: grid; gap: 4px; justify-items: center; padding: 12px 4px; border-radius: 16px; border: 3px solid var(--line); background: var(--card); font-weight: 900; font-size: 13px; }
.quiz-btn i { font-style: normal; font-size: 34px; line-height: 1; }
.quiz-btn.lit { background: var(--gold); color: var(--on-fill); transform: scale(1.06); }
.quiz-btn:disabled { opacity: 1; }
.bubble-field { position: relative; height: 300px; border-radius: 18px; border: 3px solid var(--line); overflow: hidden; background: linear-gradient(#FFF3DC, #F6DDB2); touch-action: none; }
.gbubble { position: absolute; bottom: -62px; width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 3px solid #34152F; font-size: 22px;
  background: radial-gradient(circle at 35% 32%, #FFF8D6, #FFC93D 58%, #E39A00); box-shadow: 0 0 16px #FFD54F; }
.gbubble.rainbow { background: conic-gradient(#FF5F7A, #FFD23F, #5FE3A1, #6FA8FF, #C27BFF, #FF5F7A); box-shadow: 0 0 18px #C2AEFF; }
.press { position: relative; height: 34px; border-radius: 999px; border: 3px solid var(--line); background: var(--card); overflow: hidden; }
.press-band { position: absolute; top: 0; bottom: 0; left: 35%; width: 30%; background: rgba(163, 199, 44, .55); border-inline: 2.5px solid var(--line); }
.press-needle { position: absolute; top: -2px; bottom: -2px; width: 8px; margin-left: -4px; left: 30%; background: var(--chili); border: 2px solid var(--on-fill); border-radius: 4px; }
.press-needle.ok { background: var(--gas); }
.mini-hold { width: 100%; }

@keyframes bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-6px) scale(1.03, .97); } }
@keyframes pop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }
@keyframes stamp { 0% { transform: scale(1.8) rotate(-6deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes flee { 0% { transform: none; opacity: 1; } 22% { transform: translateX(var(--fx)) rotate(18deg); opacity: 0; } 78% { transform: translateX(var(--fx)); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes bubble { 0% { transform: translateX(-50%) scale(0); opacity: 0; } 15% { transform: translateX(-50%) scale(1.15); opacity: 1; } 25%, 80% { transform: translateX(-50%) scale(1); opacity: 1; } 100% { transform: translateX(-50%) scale(1); opacity: 0; } }
@keyframes toastIn { 0% { transform: translateY(-120%); } 100% { transform: translateY(0); } }
@keyframes sheetUp { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes tease { 0%, 100% { transform: rotate(-5deg) scale(1); } 50% { transform: rotate(5deg) scale(1.07); } }
@keyframes glow { 0%, 100% { filter: none; } 50% { filter: brightness(1.35); } }
@keyframes evolve { 0% { transform: scale(.4); filter: brightness(3); } 60% { transform: scale(1.2); filter: brightness(1.4); } 100% { transform: scale(1); filter: none; } }

@media (max-height: 680px) {
  .card { height: 64px; }
  .c-emoji { font-size: 21px; }
  .c-sym { width: 21px; height: 21px; }
  .hold, .digest { height: 50px; }
  .hold { font-size: 22px; }
  .scene { min-height: 120px; }
}
/* reduced motion: .reduce-motion on <html>, the phone's setting until the player chooses in Settings (settings.js) */
.reduce-motion .prout, .reduce-motion .sit-wit, .reduce-motion .ov-prout svg, .reduce-motion .aura::after, .reduce-motion .aura.tease .prout,
.reduce-motion .ov-legend .aura:not(.tease) .prout, .reduce-motion .luck.hot, .reduce-motion .lgauge.hot i { animation: none; }
.reduce-motion .gauge-zone, .reduce-motion .prout-wrap, .reduce-motion .card { transition: none; }

/* the Piment choice before a run */
.piments { display: grid; gap: 6px; text-align: left; }
.piments .btn-s { display: grid; gap: 1px; justify-items: start; text-align: left; padding: 8px 12px; white-space: normal; min-width: 0; }
.piments small { font-size: 11.5px; font-weight: 700; opacity: .85; }

/* food icons (icons.js) and the family badge in a card's corner */
.c-ic { width: 30px; height: 30px; flex: none; }
.o-ic { width: 44px; height: 44px; flex: none; }
.c-fam { position: absolute; top: -7px; left: -7px; width: 19px; height: 19px; fill: var(--fc); stroke: var(--line); stroke-width: 1.8; stroke-linejoin: round; }
.c-fam .shine { fill: rgba(255, 255, 255, .75); stroke: none; }
.c-fam .eye { fill: var(--line); stroke: none; }
@media (max-width: 380px) { .c-ic { width: 26px; height: 26px; } }

/* drawn people: one face at a time (characters.js) */
.wit .wf { display: none; }
.wit .f-idle, .witness[data-face="happy"] .wit .f-happy, .witness[data-face="gag"] .wit .f-gag, .witness[data-face="shock"] .wit .f-shock, .witness[data-face="meh"] .wit .f-meh { display: inline; }
.witness[data-face="happy"] .wit .f-idle, .witness[data-face="gag"] .wit .f-idle, .witness[data-face="shock"] .wit .f-idle, .witness[data-face="meh"] .wit .f-idle { display: none; }
.wit .f-heart { display: inline; }
.witness:not([data-face="idle"]) .wit .f-heart { display: none; }
.bubble { font-size: 11px; font-weight: 900; white-space: nowrap; }
.ui-ic { width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none; }
.mini-ic { width: 20px; height: 22px; flex: none; vertical-align: middle; }
.acc-chip .mini-ic { width: 18px; height: 20px; }
.toast .t-ic { width: 46px; height: 52px; flex: none; }
.offer .o-ic { width: 44px; height: 46px; }
.quiz-btn .o-ic { width: 40px; height: 40px; }

/* Le Bidou, the jar, the collection, a prout's page (prouts.js) */
/* Le Bidou's family picture (prouts.js, renderBidou; Tom, 2026-10-31: "like a family picture"): a photo taped up at
   home, everyone on a picnic blanket under a string of bunting. Only the page's tokens, so it wears light, dark and a
   zone's palette. Each prout is a .fam-one: its shadow, its canvas (bobbing on its own timing), and .fam-hit, its body,
   which takes the taps (front rows over back ones). */
.t-prout.fam { position: relative; width: min(100%, var(--fw, 360px)); padding: 7px 7px 10px; background: var(--card);
  border: 2.5px solid var(--line); border-radius: 10px; box-shadow: 0 3px 0 var(--line); rotate: -1deg; margin-top: 6px; }
.t-prout.fam::before, .t-prout.fam::after { content: ""; position: absolute; top: -9px; left: 12px; z-index: 72; width: 46px; height: 17px;
  border-radius: 2px; background: var(--gold); opacity: .6; rotate: -9deg; pointer-events: none; }
.t-prout.fam::after { left: auto; right: 12px; rotate: 8deg; background: var(--gas); }
.fam-photo { position: relative; overflow: hidden; isolation: isolate; border: 2px solid var(--line); border-radius: 5px; background: linear-gradient(var(--bg-2), var(--bg) 75%); }
.fam-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .1; background: radial-gradient(circle, var(--line) 0 1.2px, transparent 1.7px) 0 0 / 15px 15px; }
.fam-flags { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: auto; }
.fam-flags .s { fill: none; stroke: var(--line); stroke-width: 1.3; opacity: .55; }
.fam-flags path:not(.s) { stroke: var(--line); stroke-width: 1.2; stroke-linejoin: round; }
.fam-flags .f0 { fill: var(--gold); } .fam-flags .f1 { fill: var(--gas); } .fam-flags .f2 { fill: var(--chili); } .fam-flags .f3 { fill: var(--legend); }
.fam-blanket { position: absolute; left: 2%; right: 2%; bottom: -16%; z-index: 0; overflow: hidden; border: 2.5px solid var(--line); border-radius: 14px;
  background: var(--card); transform: perspective(260px) rotateX(38deg); transform-origin: 50% 100%; }
.fam-blanket::before, .fam-blanket::after { content: ""; position: absolute; inset: 0; opacity: .3; background: linear-gradient(90deg, var(--chili) 50%, transparent 0) 0 0 / 20px 20px; }
.fam-blanket::after { background-image: linear-gradient(var(--chili) 50%, transparent 0); }
.fam-one { position: absolute; aspect-ratio: 1; pointer-events: none; transform-origin: 50% var(--foot); }
.fam-canvas { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% var(--foot); animation: famBob var(--bd, 2.8s) ease-in-out var(--bdl, 0s) infinite; }
.fam-hit { position: absolute; left: 50%; top: var(--mid); width: var(--hw); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  pointer-events: auto; touch-action: none; cursor: pointer; } /* touch-action: a hold that drifts a little stays a hold */
.fam-shadow { position: absolute; left: 50%; top: var(--foot); width: var(--sw); height: 9%; translate: -50% -55%; border-radius: 50%; background: var(--shadow); opacity: .22; }
.fam-one.buddy .fam-shadow { background: var(--gold); opacity: .75; } /* the one who comes along stands in gold */
.fam-one.fam-on { z-index: 60 !important; }
.fam-one.fam-on .fam-canvas { animation-play-state: paused; }
.fam-one.fam-wig { animation: famWig .8s ease-in-out; }
.fam-puff { position: absolute; left: calc(50% + var(--dir) * 24%); top: calc(var(--foot) - 16%); width: 26%; height: 17%; translate: -50% 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 28% 62%, var(--gas) 0 24%, transparent 26%), radial-gradient(circle at 58% 40%, var(--gas) 0 30%, transparent 32%),
    radial-gradient(circle at 82% 68%, var(--gas) 0 19%, transparent 21%);
  animation: famPuff 1s ease-out forwards; }
.fam-tags { position: absolute; inset: 9px 9px 12px; z-index: 70; pointer-events: none; }
.fam-tag { position: absolute; translate: -50% -100%; pointer-events: auto; padding: 3px 10px; font: inherit; font-size: 12.5px; font-weight: 900; white-space: nowrap;
  color: var(--ink); background: var(--card); border: 2px solid var(--line); border-radius: 999px; box-shadow: 0 2px 0 var(--line); animation: tipIn .18s ease-out; }
.fam-tag i { font-style: normal; color: var(--ink-soft); }
.fam-more { position: absolute; right: -10px; bottom: -12px; z-index: 71; padding: 4px 10px; }
.fam-empty { position: absolute; left: 50%; top: 20%; z-index: 1; width: 28%; aspect-ratio: 1.25; translate: -50% 0; display: grid; place-items: center;
  border: 3px dashed var(--ink-soft); border-radius: 50%; font-style: normal; font-family: var(--f-display); font-size: 30px; color: var(--ink-soft); opacity: .7; }
@keyframes famBob { 50% { transform: translateY(-3%) scale(1.025, .975); } }
@keyframes famWig { 20% { rotate: -7deg; } 45% { rotate: 6deg; } 70% { rotate: -3deg; } }
@keyframes famPuff { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: translate(calc(var(--dir) * 45%), -55%) scale(1.25); } }
.reduce-motion .fam-canvas, .reduce-motion .fam-one, .reduce-motion .fam-tag { animation: none; }
.reduce-motion .fam-puff { display: none; }
.scene-prout { width: 190px; }
.scene-canvas { width: 100%; height: auto; display: block; }
.jar { position: relative; width: 170px; height: 180px; margin: 0 auto; border: 4px solid var(--line); border-radius: 26px 26px 34px 34px; background: rgba(255, 255, 255, .25); box-shadow: 0 0 0 0 var(--glow); animation: jarShake .9s ease-in-out, jarGlow 1.6s ease-in-out infinite; }
.jar-lid { position: absolute; left: 18px; right: 18px; top: -16px; height: 20px; border: 4px solid var(--line); border-radius: 8px; background: var(--glow); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.jar.open .jar-lid { transform: translate(40px, -46px) rotate(35deg); }
.jar-in { display: grid; place-items: center; height: 100%; }
.jar-prout, .ppage-canvas { width: 150px; height: auto; }
.grow-box { display: grid; place-items: center; }
@keyframes jarShake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-6deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(3deg); } }
@keyframes jarGlow { 50% { box-shadow: 0 0 26px 6px var(--glow); } }
.sorts { display: flex; flex-wrap: wrap; gap: 6px; }
/* the collection's filters: all, favourites, each family */
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-f { display: inline-flex; align-items: center; gap: 3px; min-height: 32px; padding: 2px 10px; border: 2px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-weight: 900; font-size: 13px; }
.chip-f.on { background: var(--gold); color: #34152F; }
.chip-f .z-fam { width: 18px; height: 18px; }
.coll-head { margin: 6px 0 0; }
.pcard { position: relative; }
.pc-fav { position: absolute; top: 4px; right: 7px; color: var(--gold); font-size: 16px; line-height: 1; -webkit-text-stroke: 1px var(--line); }
.pcard small.pc-along { color: var(--box-ink); background: var(--gold); border-radius: 999px; padding: 0 6px; font-weight: 900; }
.coll, .pick-prout { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.pcard { display: grid; justify-items: center; gap: 2px; padding: 6px 4px 8px; background: var(--card); color: var(--ink); border: 3px solid var(--line); border-radius: 14px; font: inherit; cursor: pointer; text-align: center; }
.pcard b { font-size: 12.5px; }
.pcard small { font-size: 10.5px; color: var(--ink-soft); line-height: 1.2; }
.pcard.r-R { border-color: var(--gas); }
.pcard.r-E { border-color: var(--chili); }
.pcard.r-L { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.pcard.along { outline: 3px dashed var(--gold); outline-offset: 2px; }
.pcard-canvas { width: 84px; height: auto; }
.ppage { display: grid; gap: 8px; justify-items: center; text-align: center; }
.acc-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: center; font-size: 12px; }
.code { font-family: ui-monospace, Menlo, monospace; letter-spacing: .04em; user-select: all; -webkit-user-select: all; }
input, textarea, .share pre { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }
/* a dialog that needs a choice, tapped outside */
.nudge { animation: nudge .32s ease-in-out; }
@keyframes nudge { 0%, 100% { translate: 0; } 25% { translate: -6px; } 75% { translate: 6px; } }
.fork { display: grid; gap: 8px; }
.reduce-motion .jar { animation: none; }

/* a basket's five cards, turning one by one (meta.js) */
.basket { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; perspective: 600px; }
.bcard { position: relative; aspect-ratio: 3 / 4; }
.bcard-back, .bcard-face { position: absolute; inset: 0; border: 3px solid var(--line); border-radius: 10px; backface-visibility: hidden; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.bcard-back { background: repeating-linear-gradient(45deg, var(--gas) 0 6px, var(--gas-soft, #E3EFB8) 6px 12px); }
.bcard-face { background: var(--card); border-color: var(--cc, var(--line)); transform: rotateY(180deg); display: grid; justify-items: center; align-content: center; gap: 2px; padding: 2px; }
.bcard.flip .bcard-back { transform: rotateY(-180deg); }
.bcard.flip .bcard-face { transform: rotateY(0); }
.bcard-face b { font-size: 9px; line-height: 1.1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.bcard-face small { font-size: 8px; color: var(--ink-soft); }
.bcard-face .o-ic { width: 32px; height: 32px; }
.bcard.r-E .bcard-face, .bcard.r-L .bcard-face { box-shadow: 0 0 12px 2px var(--gold); }
.t-row { flex-wrap: wrap; justify-content: center; }

/* friends: the share text, the codes (social.js) */
.share { display: grid; gap: 6px; justify-items: center; }
.share pre { margin: 0; padding: 8px 12px; border: 2px dashed var(--line); border-radius: 12px; background: var(--card); font: 700 13px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; text-align: left; user-select: all; }
.share pre.copied { border-style: solid; border-color: var(--gas); }
.code-in { width: 100%; padding: 10px 12px; border: 3px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: 800 16px/1.2 ui-monospace, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; }
.err { color: var(--chili); }
.wit.visit, .sit-wit .visit { object-fit: contain; }

/* the six moments (spec 10): flashes, the trophy landing, growing up */
.flash { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.flash.pile { background: radial-gradient(circle at 50% 60%, rgba(255, 191, 31, .55), transparent 60%); animation: flashOut .7s ease-out forwards; }
.flash.dore { background: linear-gradient(110deg, transparent 30%, rgba(255, 215, 90, .8) 50%, transparent 70%); background-size: 250% 100%; animation: sweep 1.1s ease-in-out forwards; }
@keyframes flashOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes sweep { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.trophy-drop { animation: drop .7s cubic-bezier(.3, 1.6, .5, 1); }
.grow-pop { animation: growPop 1.2s ease-out; }
@keyframes drop { from { transform: translateY(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes growPop { 0% { transform: scale(.6); } 40% { transform: scale(1.25); } 70% { transform: scale(.95); } 100% { transform: scale(1); } }
.fork { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fork .pcard-canvas { width: 110px; }
.reduce-motion .trophy-drop, .reduce-motion .grow-pop { animation: none; }

/* ---------- understanding the game (guide.js, history.js): Tom's review, 2026-10-30 ---------- */
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin-left: 2px; border-radius: 999px; background: var(--chili); color: #FFFFFF; font-family: var(--f-body); font-size: 12px; font-weight: 900; vertical-align: 2px; }
.book-item, .h-run, button.item { width: 100%; text-align: left; font: inherit; color: var(--ink); }
.book-list { display: grid; gap: 8px; }

/* a tip: one new thing, once, in a small bubble pointing at it (audit 2, #2). No backdrop: the game goes on around it.
   guide.js places it (top, left) and its arrow (--ax, data-side); what it points at glows (.tip-to). */
.coach { position: fixed; top: 0; left: 0; z-index: 41; width: min(310px, calc(100vw - 16px)); background: var(--card); color: var(--ink);
  border: 3px solid var(--legend); border-radius: 18px; box-shadow: 4px 4px 0 var(--shadow); padding: 9px 12px 10px; display: grid; gap: 3px;
  transform-origin: var(--ax, 50%) 100%; animation: tipIn .3s cubic-bezier(.3, 1.6, .5, 1); }
.coach[data-side="below"] { transform-origin: var(--ax, 50%) 0; }
.coach::after { content: ""; position: absolute; left: calc(var(--ax, 50%) - 8px); width: 13px; height: 13px; background: var(--card); border: 3px solid var(--legend); transform: rotate(45deg); }
.coach[data-side="above"]::after { bottom: -9px; border-top: 0; border-left: 0; }
.coach[data-side="below"]::after { top: -9px; border-bottom: 0; border-right: 0; }
.coach[data-side="none"]::after { display: none; }
.coach h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 18px; line-height: 1.1; }
.coach p:not(.eyebrow) { margin: 0; font-size: 13.5px; line-height: 1.35; }
.coach .eyebrow { font-size: 10.5px; }
.coach-acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; margin-top: 3px; }
.coach-acts .btn-s { padding: 6px 11px; }
.tip-to { outline: 3px solid var(--legend); outline-offset: 3px; animation: tipRing 1.4s ease-in-out infinite; }
@keyframes tipIn { 0% { transform: scale(.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes tipRing { 50% { outline-color: rgba(142, 108, 255, .25); } }
@media (prefers-reduced-motion: reduce) { .tip-to { animation: none; } }
/* plain words the first time (audit 2, #11): a French name with what it means, under it */
.sense { display: block; font-family: var(--f-body); font-size: max(11px, .55em); font-weight: 800; line-height: 1.15; color: var(--ink-soft); letter-spacing: 0; text-transform: none; }
.coach h3 .sense { display: inline; margin-left: 4px; font-size: 12.5px; }
button .sense { color: inherit; opacity: .78; }

/* the mix a push makes, next to your prout; the special prout puffing out */
.mix-bubble { position: absolute; left: 8px; top: 34%; z-index: 4; display: grid; justify-items: center; gap: 0; max-width: 92px; padding: 4px 6px 5px; background: rgba(255, 255, 255, .78);
  border: 2px solid var(--line); border-radius: 16px; color: #34152F; pointer-events: none; }
.mix-bubble::after { content: ""; position: absolute; right: -9px; bottom: 6px; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .78); border: 2px solid var(--line); }
.mix-bubble small { font-size: 9.5px; font-weight: 900; line-height: 1.05; text-align: center; }
.mix-ic { width: 52px; height: 52px; display: block; }
.mix-q { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 3px dashed var(--line); font-family: var(--f-display); font-size: 28px; color: var(--ink-soft); background: var(--card); }
.mix-q.small { width: 34px; height: 34px; font-size: 18px; border-width: 2px; }
.mix-bubble .mix-q.small { color: #6B4663; background: #FFF8F5; border-color: #34152F; }
.mix-puff { position: absolute; width: 64px; height: 64px; pointer-events: none; }
.mix-puff-ic { width: 64px; height: 64px; }
.pv-i { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 2px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); color: var(--ink);
  font-style: normal; font-size: 11px; font-weight: 900; vertical-align: 1px; }
.preview { cursor: pointer; }
/* a card's top: its number, and its traits' signs */
.c-top { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 13px; }
.c-top.s { justify-content: space-between; }
.card .c-vol { color: var(--vol-ink); font-size: 12px; }
.c-signs { display: flex; }
.c-signs .sign + .sign { margin-left: -3px; }
.sign { display: inline-grid; place-items: center; flex: none; width: 13px; height: 13px; border-radius: 50%; background: var(--gold); color: #34152F; border: 1.5px solid #34152F; }
.sg { width: 9px; height: 9px; display: block; }
.sg .ln { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sg .cut { fill: none; stroke: var(--gold); stroke-width: 1; stroke-linecap: round; }
.sg .dot { fill: var(--gold); }
.c-name.w { white-space: normal; text-overflow: clip; overflow-wrap: normal; word-break: normal; line-height: 1.02; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.card, .offer, .bcard, .h-food, .mine-row, .acc-chip { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.o-signs { display: flex; justify-content: center; gap: 2px; margin-top: 3px; }

/* a food, read in full */
.zoom { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.z-card { position: relative; display: grid; place-items: center; width: 92px; height: 116px; border-radius: 18px; border: 4px solid var(--cc, var(--line)); background: var(--card); box-shadow: 0 4px 0 var(--line); }
.z-card .c-fam { width: 26px; height: 26px; top: -10px; left: -10px; }
.z-card .c-vol { position: absolute; top: 6px; right: 8px; font-size: 15px; }
.z-ic { width: 70px; height: 70px; }
.z-head { display: grid; gap: 4px; min-width: 0; }
.z-head h2 { font-size: 24px; overflow-wrap: anywhere; }
.z-fam { width: 18px; height: 18px; vertical-align: -3px; fill: var(--fc); stroke: var(--line); stroke-width: 1.8; stroke-linejoin: round; }
.z-fam .shine { fill: rgba(255, 255, 255, .75); stroke: none; }
.z-fam .eye { fill: var(--line); stroke: none; }
.z-fam-line, .z-mine { margin: 0; font-size: 14px; }
.z-mine { background: var(--bg-2); border-radius: 12px; padding: 8px 10px; font-weight: 700; }
.ov-card h3 { margin: 4px 0 0; font-family: var(--f-display); font-weight: 400; font-size: 18px; }
.z-push { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.z-push li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: center; background: var(--card); border-radius: 10px; padding: 5px 9px; font-size: 13px; font-weight: 800; }
.z-push li small { grid-column: 1; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.z-push .z-mix { grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: center; max-width: 96px; font-size: 10px; text-align: center; line-height: 1.1; }
.z-mix .mix-ic { width: 46px; height: 46px; }
.z-traits { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.z-traits li { display: flex; gap: 7px; align-items: flex-start; font-weight: 700; font-size: 13.5px; line-height: 1.35; }
.z-traits .sign { width: 18px; height: 18px; margin-top: 1px; }
.z-traits .sg { width: 12px; height: 12px; }
.z-more { justify-self: start; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 800; color: var(--ink-soft); text-decoration: underline; }
.z-acc { border-color: var(--line); }
/* every form, like a list of hands */
.forms { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.forms li { display: grid; grid-template-columns: minmax(0, 1fr) 46px auto 46px; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 12px; background: var(--bg-2); }
.forms li.on { outline: 3px solid var(--gold); }
.forms li span:first-child { display: grid; text-align: left; }
.forms li small { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.forms i { font-style: normal; font-weight: 900; }
.mini-box { text-align: center; border: 2px solid var(--line); border-radius: 8px; color: var(--box-ink); font-family: var(--f-display); font-size: 16px; padding: 1px 0; }
.mini-box.v { background: var(--vol); } .mini-box.o { background: var(--odo); }

/* a push, explained */
.why-head { display: flex; align-items: center; gap: 12px; text-align: left; }
.why-head .mix-ic { width: 88px; height: 88px; flex: none; }
.why-head h2 { font-size: 24px; }
.why { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; text-align: left; }
.why li { font-size: 13px; font-weight: 700; background: var(--card); border-radius: 10px; padding: 5px 9px; border-left: 5px solid var(--line); }
.why .w-form { border-left-color: var(--gas); font-weight: 900; }
.why .w-food { border-left-color: var(--gold); }
.why .w-add { border-left-color: var(--legend); }
.why .w-mult { border-left-color: var(--chili); }
.why-total { margin: 0; font-size: 16px; text-align: center; }
.timing { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 0; text-align: center; }
.timing div { background: var(--card); border-radius: 10px; padding: 5px 2px; }
.timing dt { font-size: 10px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.timing dd { margin: 0; font-size: 12px; font-weight: 800; }
.timing dd + dd { font-size: 14px; font-weight: 900; }

/* the book */
.book { display: grid; gap: 10px; }
.book p, .book li, .book dd { font-size: 14px; line-height: 1.45; }
.book p { margin: 0; }
.book h4, .fed h4, .pp-box h4 { margin: 6px 0 0; font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--gas-ink); }
.book-back { justify-self: start; }
.steps { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.book-dl { display: grid; gap: 6px; margin: 0; }
.book-dl div { background: var(--card); border-radius: 12px; padding: 7px 10px; }
.book-dl dt { font-weight: 900; }
.book-dl dd { margin: 0; color: var(--ink-soft); }
.book-fams { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.book-fams li { display: flex; gap: 10px; align-items: center; background: var(--card); border-radius: 12px; padding: 7px 10px; }
.book-fams .z-fam { width: 26px; height: 26px; flex: none; }
.book-fams div { display: grid; }
.book-fams span { color: var(--ink-soft); font-size: 13px; }
.book-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.book-table th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding: 4px 6px; }
.book-table td { padding: 5px 6px; border-top: 2px solid var(--bg-2); font-variant-numeric: tabular-nums; }
.book a { color: var(--gas-ink); font-weight: 900; }
.book .powers i { color: var(--ink-soft); font-weight: 700; }
.mixes { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.mix { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; background: var(--card); border: 3px solid var(--line); border-radius: 14px; text-align: center; }
.mix .mix-ic { width: 64px; height: 64px; }
.mix b { font-size: 12px; line-height: 1.15; }
.mix small { font-size: 10.5px; color: var(--ink-soft); line-height: 1.2; }
.mix.unknown { border-style: dashed; }
.mix.unknown b { color: var(--ink-soft); }

/* L'Étagère */
.shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.shelf-item { display: grid; justify-items: center; gap: 4px; text-align: center; background: var(--card); border: 3px solid var(--line); border-radius: 16px; padding: 10px 8px; }
.shelf-item h4 { margin: 0; font-size: 16px; font-weight: 900; }
.shelf-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 2px; min-height: 48px; }
.shelf-ic { width: 34px; height: 40px; }

/* a prout's page, the pick, what it ate */
.pp-box { width: 100%; display: grid; gap: 6px; text-align: left; background: var(--bg-2); border-radius: 16px; padding: 10px 12px; }
.pp-box p { margin: 0; font-size: 13.5px; }
.pp-box .pp-sub { font-weight: 900; font-size: 12.5px; }
.soft-txt { color: var(--ink-soft); font-weight: 700; }
.diet { display: grid; gap: 4px; }
.diet-row { display: grid; grid-template-columns: 104px minmax(0, 1fr) 62px; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 800; }
.diet-row b { text-align: right; font-variant-numeric: tabular-nums; }
.diet-row small { color: var(--gas-ink); }
.diet-bar { display: block; height: 12px; border-radius: 999px; background: var(--card); border: 2px solid var(--line); overflow: hidden; }
.diet-bar i { display: block; height: 100%; }
.stagebar { display: grid; gap: 4px; }
.sb-track { position: relative; display: block; height: 14px; border-radius: 999px; background: var(--card); border: 2px solid var(--line); overflow: hidden; }
.sb-old, .sb-new { position: absolute; top: 0; bottom: 0; }
.sb-old { left: 0; background: var(--gas); }
.sb-new { background: var(--gold); }
.sb-names { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 800; color: var(--ink-soft); }
.sb-names .on { color: var(--ink); font-weight: 900; text-decoration: underline 2px var(--gas); }
.sb-names .past { color: var(--gas-ink); }
.sb-num { font-size: 11.5px; font-weight: 800; color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
.fed { display: grid; gap: 6px; text-align: left; }
.fed-chips { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.fed-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 5px; border-radius: 999px; border: 2px solid var(--fc); background: var(--card); font-size: 12.5px; font-weight: 900; }
.pick-list { display: grid; gap: 6px; max-height: 52vh; overflow-y: auto; }
.pick-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; padding: 6px 10px 6px 6px; background: var(--card); color: var(--ink); border: 3px solid var(--line); border-radius: 16px; font: inherit; }
.pick-row.r-R { border-color: var(--gas); }
.pick-row.r-E { border-color: var(--chili); }
.pick-row.r-L { border-color: var(--gold); }
.pick-row.along { outline: 3px dashed var(--gold); outline-offset: 2px; }
.pick-row div { display: grid; gap: 1px; min-width: 0; }
.pick-row b { font-size: 15px; }
.pick-row small { font-size: 11.5px; color: var(--ink-soft); line-height: 1.25; }
.pick-blurb { color: var(--ink) !important; font-weight: 700; }
.pick-canvas { width: 72px; height: auto; }
.mine-read { display: inline-flex; align-items: center; gap: 4px; min-width: 0; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; }
.o-read { display: grid; justify-items: center; gap: 4px; background: none; border: 0; padding: 0; font: inherit; color: inherit; }
.o-read b { font-size: 13.5px; line-height: 1.15; }

/* the history */
.hist { display: grid; gap: 8px; }
.h-head { display: grid; gap: 6px; }
.h-head h3 { margin: 0; }
.h-trace { letter-spacing: 1px; }
.h-sit { margin: 8px 0 0; font-family: var(--f-display); font-weight: 400; font-size: 17px; }
.h-sit small { font-family: var(--f-body); font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.h-rule { margin-top: -4px; }
.h-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.h-push { display: grid; gap: 3px; background: var(--card); border: 2px solid var(--line); border-left-width: 6px; border-radius: 12px; padding: 6px 9px; }
.h-push.o-perfect { border-left-color: var(--gas); }
.h-push.o-pile, .h-push.o-dore { border-left-color: var(--gold); }
.h-push.o-pfft { border-left-color: var(--ink-soft); }
.h-push.o-accident { border-left-color: #8A5A2A; }
.h-top { display: flex; align-items: center; gap: 8px; }
.h-n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-2); font-size: 11px; font-weight: 900; }
.h-o { font-family: var(--f-display); font-size: 15px; flex: 1; }
.h-t { font-weight: 900; font-variant-numeric: tabular-nums; }
.h-foods { display: flex; flex-wrap: wrap; gap: 4px; }
.h-food { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 9px; border: 2.5px solid var(--cc, var(--line)); background: var(--bg); }
.h-ic { width: 26px; height: 26px; }
.h-what, .h-names, .h-math { margin: 0; font-size: 12.5px; }
.h-names { color: var(--ink-soft); font-size: 11.5px; }
.h-math { font-weight: 800; font-variant-numeric: tabular-nums; }
.h-ev { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 9px; border-radius: 10px; background: var(--bg-2); }
.h-ev .h-food { width: 28px; height: 28px; }
.h-ev .h-ic { width: 20px; height: 20px; }
.h-ok { background: rgba(163, 199, 44, .25); }
.h-bad { background: rgba(228, 71, 42, .18); }
.h-fed { background: var(--bg-2); border-radius: 14px; padding: 8px 10px; }
.h-fed summary { font-weight: 900; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .coach { animation: none; } }
.ppage .actions.row { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ppage .actions .btn-s { white-space: normal; padding: 8px 6px; }
/* the prouts pushes release (guide.js) */
.tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
em.new { display: inline-block; font-style: normal; font-family: var(--f-body); font-size: 10px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #FFFFFF; background: var(--chili); border-radius: 999px; padding: 1px 6px; vertical-align: 3px; }
.mix-bubble em.new { margin-top: 2px; }
.mix-bubble small { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-combo { margin-left: auto; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px dashed var(--line); border-radius: 50%; background: var(--bg); }
.h-combo-ic { width: 40px; height: 40px; }
.combo-foods { justify-content: center; }
.book-kinds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.book-kinds li { display: flex; align-items: center; gap: 6px; background: var(--card); border-radius: 12px; padding: 4px 8px 4px 4px; }
.book-kinds .mix-ic { width: 44px; height: 44px; flex: none; }
.book-kinds div { display: grid; min-width: 0; }
.book-kinds b { font-size: 12.5px; line-height: 1.15; }
.book-kinds small { font-size: 10.5px; color: var(--ink-soft); line-height: 1.2; }
.coll .pcard b { text-align: center; line-height: 1.15; }

/* ---------- Settings (settings.js): help with the push and comfort, audit 2, 2026-10-30 ---------- */
.reduce-motion .coach { animation: none; }
.settings { display: grid; gap: 8px; }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.set-row h4 { margin: 0; font-size: 15px; font-weight: 900; }
.set-row p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.set-tog { min-width: 64px; min-height: 40px; }
.set-row .seg { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.set-row .seg .btn-s { min-height: 40px; }
#t-sound { min-width: 44px; padding-block: 4px; } #t-sound .ui-ic { width: 20px; height: 20px; vertical-align: -5px; }
/* Le Bidou's practice gauge (prouts.js): under the prouts, taking no room until it shows */
.practice-slot { position: relative; height: 0; margin-top: -14px; z-index: 3; }
.practice { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: min(300px, calc(100vw - 48px)); display: grid; gap: 4px;
  padding: 5px 10px 8px; background: var(--card); border: 2px solid var(--line); border-radius: 14px; box-shadow: 0 3px 0 var(--line); text-align: left; }
.practice .pr-say { margin: 0; font-size: 12.5px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.practice .pr-say b { font-family: var(--f-display); font-weight: 400; font-size: 17px; color: var(--ink); }
.practice.done .pr-say b { color: var(--gas-ink); }

/* ---------- La Carte, Next up, the end card, codes that come back (carte.js, progress.js, history.js, social.js) ---------- */
.goal-bar { display: block; height: 7px; border-radius: 999px; background: var(--bg-2); border: 1.5px solid var(--line); overflow: hidden; }
.goal-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gas), var(--gold)); }
/* La Carte: each menu a card with its colour (its look, for the zones to come) */
.carte { display: grid; gap: 8px; }
.carte-item { display: grid; gap: 3px; justify-items: start; text-align: left; font: inherit; color: var(--ink); background: var(--card); border: 3px solid var(--line);
  border-left: 10px solid var(--mc, var(--gas)); border-radius: 16px; padding: 10px 12px; box-shadow: 0 4px 0 var(--line); }
button.carte-item:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--line); }
.ci-head b { font-family: var(--f-display); font-weight: 400; font-size: 19px; line-height: 1.1; }
.ci-rule { font-size: 13.5px; font-weight: 800; }
.ci-pack, .ci-rec, .ci-goal { font-size: 12px; color: var(--ink-soft); line-height: 1.3; }
.ci-rec { font-weight: 900; color: var(--gas-ink); }
.carte-item.shut { box-shadow: none; border-style: dashed; border-left-style: solid; opacity: .82; }
.carte-item.shut .ci-head b { color: var(--ink-soft); }
.carte-item.shut .goal-bar { width: 100%; }
/* Le Buffet's draft and Menu du Chef's Accomplice: one out of three */
.draft { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; justify-items: center; }
.draft .card.draft-opt { max-width: 92px; width: 100%; height: 118px; }
.draft .card.draft-opt .c-ic { width: 46px; height: 46px; }
.draft { padding-bottom: 6px; }
.draft-tag { position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 9.5px; font-weight: 900; padding: 1px 6px; border-radius: 999px; background: var(--gold); color: var(--on-fill); border: 1.5px solid var(--line); }
.draft.accs-3 { grid-template-columns: 1fr; }
.draft-opt.acc { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; width: 100%; text-align: left; font: inherit; color: var(--ink);
  background: var(--card); border: 3px solid var(--line); border-radius: 14px; padding: 8px 10px; box-shadow: 0 3px 0 var(--line); }
.draft-opt.acc .o-ic { grid-row: 1 / 3; }
.draft-opt.acc small { font-size: 12px; color: var(--ink-soft); line-height: 1.25; }
.draft-deck { justify-content: center; }
.draft-deck .h-food { width: 30px; height: 30px; }
.draft-deck .h-ic { width: 21px; height: 21px; }
/* between worlds: a good place to stop, said quietly */
.stop-here { margin: 0; font-size: 13px; font-weight: 800; color: var(--gas-ink); background: var(--card); border: 2px dashed var(--gas); border-radius: 12px; padding: 7px 10px; }
/* the end card: the true gap, the best push again, what moved, two equal buttons */
.gap { margin: 0; font-size: 15px; font-weight: 900; }
.end-best { display: grid; gap: 6px; background: var(--card); border: 3px solid var(--line); border-radius: 18px; padding: 10px 12px; box-shadow: 0 4px 0 var(--line); }
.eb-row { display: flex; align-items: center; gap: 12px; text-align: left; }
.eb-art { position: relative; flex: none; display: grid; place-items: center; width: 100px; height: 100px; padding: 0; border: 2px dashed var(--line); border-radius: 50%; background: var(--bg); }
.eb-prout { width: 92px; height: 92px; }
.eb-play { position: absolute; right: -2px; bottom: 2px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gas); color: var(--on-fill); border: 2px solid var(--line); font-style: normal; font-size: 11px; }
.eb-art.pop .eb-prout { animation: growPop 1.1s ease-out; }
.eb-txt { display: grid; gap: 2px; min-width: 0; }
.eb-score { font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--ink); }
.eb-txt span { font-size: 13.5px; font-weight: 900; }
.eb-txt small { font-size: 12px; color: var(--ink-soft); }
.eb-foods { justify-content: center; }
.end-moved { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.end-moved li { background: var(--card); border-radius: 12px; padding: 7px 10px; font-size: 13.5px; font-weight: 700; }
.end-moved .mini-ic { margin-right: 2px; }
.end-moved .ui-ic { width: 18px; height: 18px; vertical-align: -4px; }
.em-prout { display: flex; gap: 10px; align-items: center; }
.em-prout > div { flex: 1; display: grid; gap: 4px; min-width: 0; }
.em-ic { width: 52px; height: 52px; flex: none; }
.em-grew { font-weight: 900; color: var(--gas-ink); }
.em-new { border: 2px solid var(--gold); }
.em-pin { display: grid; gap: 4px; }
.em-pin small { font-size: 10.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--legend); }
.end-fed { text-align: left; background: var(--card); border-radius: 12px; padding: 6px 10px; }
.end-fed summary { cursor: pointer; font-size: 13px; font-weight: 900; color: var(--ink-soft); }
.end-fed .fed { margin-top: 6px; }
.end-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.end-acts .btn { font-size: 17px; padding: 11px 8px; text-wrap: balance; }
.reduce-motion .eb-art.pop .eb-prout { animation: none; }
/* Next up, on Le Bidou under the legend gauge */
.t-next { width: min(320px, 100%); display: grid; gap: 6px; text-align: left; }
.nx-head { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.nx-head b { font-family: var(--f-display); font-weight: 400; font-size: 17px; }
.nx-head small { font-size: 11.5px; font-weight: 800; color: var(--ink-soft); }
.nx-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; align-items: center; font: inherit; color: var(--ink); text-align: left;
  background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 6px 10px; min-height: 44px; }
.nx-row.pinned { border-color: var(--legend); box-shadow: 0 0 0 2px var(--legend); }
.nx-icon { display: grid; place-items: center; width: 32px; height: 32px; }
.nx-icon .ui-ic { width: 22px; height: 22px; }
.nx-ic { width: 30px; height: 30px; }
.nx-menu { display: block; width: 22px; height: 22px; border-radius: 7px; background: var(--mc); border: 2px solid var(--line); }
.nx-txt { display: grid; gap: 2px; min-width: 0; }
.nx-txt b { font-size: 13.5px; line-height: 1.15; }
.nx-txt small { font-size: 11.5px; font-weight: 800; color: var(--ink-soft); line-height: 1.2; }
.nx-pin { font-size: 10.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); border: 1.5px solid var(--line); border-radius: 999px; padding: 2px 7px; }
.nx-row.pinned .nx-pin { background: var(--legend); color: #FFFFFF; border-color: var(--legend); }
.item.pinned-goal .goal-bar { margin-top: 4px; }
/* the collection's Accomplices: those to come as silhouettes, with how far their deed is */
.tabs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tabs.three .btn-s { padding-inline: 4px; font-size: 12px; white-space: normal; }
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.acc-card { display: grid; justify-items: center; align-content: start; gap: 3px; font: inherit; color: var(--ink); text-align: center; background: var(--card); border: 3px solid var(--line); border-radius: 14px; padding: 8px 6px; }
.acc-card b { font-size: 12.5px; line-height: 1.15; }
.acc-card small { font-size: 10.5px; color: var(--ink-soft); line-height: 1.25; }
.acc-card .goal-bar { width: 100%; }
.ac-ic { width: 46px; height: 48px; }
.acc-card.shut { border-style: dashed; background: var(--bg); }
.acc-card.shut .ac-ic { filter: brightness(0); opacity: .3; }
/* codes that come back: a duel's two scores side by side; Le Menu du jour's month, counted, never a streak */
.duel-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.duel-vs.one { grid-template-columns: minmax(0, 220px); justify-content: center; }
.duel-vs > div { display: grid; gap: 1px; background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 8px; }
.duel-vs small { font-size: 10.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.duel-vs b { font-family: var(--f-display); font-weight: 400; font-size: 24px; line-height: 1.1; }
.duel-vs span { font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.menu-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 260px; margin: 0 auto; }
.menu-dots i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--bg-2); opacity: .55; }
.menu-dots i.on { background: var(--gas); opacity: 1; }
.menu-dots i.now { opacity: 1; }

/* round 9c (twists.js, push.js): a situation's twist and the boss ahead, under the HUD and in the shop; a risky gauge
   on the push line; a Festin waiting in the run's strip to be tapped */
.notes { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; } /* side by side when both fit, else one under the other */
.notes[hidden] { display: none; }
.note-chip { flex: 1 1 auto; min-width: 0; max-width: 100%; display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 11.5px; font-weight: 800; color: var(--ink);
  text-align: left; background: var(--card); border: 2px solid var(--line); border-radius: 10px; padding: 3px 7px 3px 4px; cursor: pointer; }
.note-chip span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-chip b { font-weight: 900; }
.note-chip.twist.good { border-color: var(--gas); }
.note-chip.twist.bad { border-color: var(--chili); }
.note-chip.boss { border-color: var(--chili); border-style: dashed; }
.note-ic { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 14px; line-height: 1;
  color: var(--box-ink); background: var(--gas); }
.note-chip.twist.bad .note-ic { color: #FFFFFF; background: var(--chili); }
.note-host { flex: none; width: 22px; height: 22px; }
.shop-notes { margin: 6px 0 2px; }
.rule.twist.good { border-color: var(--gas); }
.rule.twist.good small { color: var(--gas-ink); }
/* a zone's special (zones.js), as a twist's: gold when it helps, red when it hinders */
.note-chip.special.good { border-color: var(--gold); }
.note-chip.special.bad { border-color: var(--chili); }
.note-chip.special .note-ic { background: var(--gold); color: var(--box-ink); }
.note-chip.special.bad .note-ic { color: #FFFFFF; background: var(--chili); }
.rule.special.good { border-color: var(--gold); }
.rule.special.bad { border-color: var(--chili); }
.ahead { margin-top: 6px; }
.pv-risk { flex: none; align-self: center; font-size: 11px; font-weight: 900; line-height: 1.2; color: #FFFFFF; background: var(--chili); border: 2px solid var(--line);
  border-radius: 999px; padding: 0 7px; white-space: nowrap; }
.acc-chip.festin.wait { border-color: var(--gold); border-style: dashed; animation: festin-wait 1.6s ease-in-out infinite; }
.acc-chip.festin.wait span { color: var(--ink); }
@keyframes festin-wait { 50% { box-shadow: 0 0 0 3px var(--gold); } }
.reduce-motion .acc-chip.festin.wait { animation: none; box-shadow: 0 0 0 2px var(--gold); }

/* Baskets opened all at once (Tom, 2026-10-30): each food once, with how many came; the grid wraps and scrolls. */
.basket.many { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); max-height: 52vh; overflow-y: auto; padding: 4px; }
.bcard-n { position: absolute; top: 2px; right: 3px; font-style: normal; font-weight: 800; font-size: 10px; background: var(--ink); color: var(--bg); border-radius: 8px; padding: 0 4px; }
.b-hint { text-align: center; margin: 4px 0 0; }
/* a jar or a basket opening (ceremony, meta.js; sound agent, 2026-10-31): its button waits, dimmed, until what came out
   shows, and a jar's prout's name and powers come up as it does */
.ov-card .jar ~ :not(.btn) { transition: opacity .35s ease-out, translate .35s ease-out; }
.ov-card.ceremony .jar ~ :not(.btn) { opacity: 0; translate: 0 6px; }
.ov-card .jar ~ .btn, .ov-card .basket ~ .btn { transition: opacity .3s; }
.ov-card.ceremony .jar ~ .btn, .ov-card.ceremony .basket ~ .btn { opacity: .45; }
.shelf-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

/* What a run earns (Tom, 2026-10-30): a basket for each boss, on the boss chip, its card, the cleared screen, Your run. */
.note-prize { flex: none; display: inline-flex; align-items: center; gap: 1px; font-style: normal; font-weight: 900; font-size: 11px; color: var(--ink); margin-left: auto; }
.note-basket { width: 18px; height: 16px; }
.prize { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 800; margin: 6px 0; }
.prize-ic { width: 26px; height: 22px; flex: none; }
.earn p { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.earn p span { min-width: 0; }

/* A zone's backdrop (zones.js, its look.backdrop): drawn behind the props, the whole scene wide. */
.props .backdrop { inset: 0; width: 100%; height: 100%; opacity: 1; z-index: 0; }
.props .backdrop svg { width: 100%; height: 100%; display: block; }
.carte-item .ci-when { font-style: normal; font-size: 11px; font-weight: 900; color: var(--bg); background: var(--mc); border-radius: 8px; padding: 1px 6px; }

/* La Carte as a map (map.js): the world drawn in code, places as buttons on it, the chosen one's cards below. The map
   keeps its own colours in both themes; the pins grow with the sheet (cqw: % of the map's width), from a small phone to
   the sheet's widest, never with the zoom. A pin is its dot, anchored on its place; its name sits beside it (side-b,
   -r, -l, -t: mapSides, for each zoom). No stacking context on a pin, so every name stays above every dot.
   The zoom (map.js; Tom, 2026-10-31: "a map with zoom in/out to be able to really select the country"): the view clips
   the drawing, which scales in its own layer (.map-world), promoted only while it moves, so at rest it's drawn again at
   its size, sharp. overflow: clip isn't a scroller: the sheet's grid keeps the map's height, and a pin reached by Tab
   can't scroll it. The map's own gestures (touch-action: none there; the sheet scrolls everywhere else). */
/* no overflow: hidden on the map itself: in the sheet's scrolling grid a row would shrink it to nothing */
.map { position: relative; isolation: isolate; container-type: inline-size; width: 100%; max-width: 100%; border: 3px solid var(--line); border-radius: 18px; margin: 6px 0 10px; box-shadow: 0 4px 0 var(--shadow); }
.map-view { position: relative; aspect-ratio: 400 / 250; overflow: hidden; overflow: clip; border-radius: 15px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.map-view.zoomed { cursor: grab; }
.map-view.moving { cursor: grabbing; }
.map-world { position: absolute; inset: 0; transform-origin: 0 0; }
.map-view.moving .map-world { will-change: transform; }
.map-svg { display: block; width: 100%; height: 100%; }
/* + − and the whole world, top right, as stickers; one that can't go further is greyed (aria-disabled: it keeps focus) */
.map-zoom { position: absolute; z-index: 6; top: 7px; right: 7px; display: flex; gap: 6px; }
.map-zoom button { position: relative; box-sizing: border-box; width: clamp(30px, 9.4cqw, 38px); height: clamp(30px, 9.4cqw, 38px); display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 2.5px solid #34152F; background: #FFF8F5; color: #34152F; box-shadow: 0 2px 0 #34152F; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.map-zoom button::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; } /* a finger's room */
.map-zoom button:active:not([aria-disabled="true"]) { translate: 0 2px; box-shadow: none; }
.map-zoom button[aria-disabled="true"] { box-shadow: none; border-color: #9C8A97; cursor: default; }
.map-zoom button[aria-disabled="true"] .ui-ic { opacity: .35; filter: grayscale(1); }
.map-zoom .ui-ic { width: 70%; height: 70%; vertical-align: 0; }
/* a name that would cover another or a dot at this zoom waits for a closer one (mapLabels) */
.map-pin .mp-name { transition: opacity .18s, visibility .18s; }
.map-pin.hush .mp-name { opacity: 0; visibility: hidden; }
.reduce-motion .map-pin .mp-name { transition: none; }
.map-svg .mp-bob { animation: mp-bob 3.2s ease-in-out infinite; }
@keyframes mp-bob { 50% { translate: 0 1.5px; rotate: 3deg; } }
.map-pin { --pd: clamp(25px, 8.8cqw, 40px); --lg: 2px; position: absolute; width: var(--pd); height: var(--pd); margin: calc(var(--pd) / -2) 0 0 calc(var(--pd) / -2);
  padding: 0; border: 0; border-radius: 50%; background: none; font: inherit; color: #34152F; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.map-pin .mp-dot { position: relative; z-index: 1; box-sizing: border-box; width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%;
  background: var(--mc); border: 3px solid #34152F; box-shadow: 0 3px 0 #34152F; font-style: normal; transition: scale .15s; }
.map-pin .mp-dot > svg { width: 66%; height: 66%; color: #34152F; }
.map-pin .mp-dot > b { font-family: var(--f-display); font-weight: 400; font-size: calc(var(--pd) * .5); line-height: 1; }
.map-pin .mp-name { position: absolute; z-index: 2; left: 50%; top: calc(100% + var(--lg)); translate: -50% 0; font-size: clamp(9px, 2.9cqw, 12.5px); font-weight: 900; line-height: 1.3;
  color: #34152F; background: #FFF8F5; border: 2px solid #34152F; border-radius: 8px; box-shadow: 0 2px 0 #34152F; padding: 0 5px; white-space: nowrap; }
.map-pin.side-t .mp-name { top: auto; bottom: calc(100% + var(--lg) + 2px); }
.map-pin.side-r .mp-name { left: calc(100% + var(--lg)); top: 50%; translate: 0 -50%; }
.map-pin.side-l .mp-name { left: auto; right: calc(100% + var(--lg)); top: 50%; translate: 0 -50%; }
.map-pin:hover .mp-dot { scale: 1.08; }
.map-pin.shut .mp-dot { background: color-mix(in srgb, var(--mc) 28%, #E4DEE2); border-style: dashed; box-shadow: 0 2px 0 #34152F; }
.map-pin.shut .mp-dot > svg, .map-pin.shut .mp-dot > b { opacity: .4; filter: grayscale(.8); }
.map-pin .mp-lock { position: absolute; right: -7px; bottom: -6px; width: 52%; height: 52%; display: grid; place-items: center; border-radius: 50%; background: #FFF8F5; border: 2px solid #34152F; }
.map-pin .mp-lock svg { width: 80%; height: 80%; color: #34152F; }
.map-pin.shut .mp-name { color: #6B4663; background: #EDE6EA; border-style: dashed; box-shadow: none; }
.map-pin.at { --lg: 9px; }
.map-pin.at .mp-dot { z-index: 3; scale: 1.18; box-shadow: 0 0 0 3px #FFE27A, 0 0 0 5px #34152F, 0 3px 0 5px #34152F; }
.map-pin.at .mp-name { z-index: 4; color: #FFF8F5; background: #34152F; }
.map-pin.event .mp-dot { animation: pin-hop 1.6s ease-in-out infinite; }
@keyframes pin-hop { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.reduce-motion .map-pin.event .mp-dot, .reduce-motion .map-svg .mp-bob { animation: none; }
.reduce-motion .map-pin .mp-dot { transition: none; }
.map-at { margin: 4px 0 2px; }

/* A boss stands above its rule's line, bigger, in every scene (the zones' agents found the line hid it, 2026-10-30). */
.scene:has(.scene-boss:not([hidden])) .witness .wit { width: 64px; height: 75px; }
.scene:has(.scene-boss:not([hidden])) .witnesses { bottom: 52px; }
@media (max-height: 680px) { .scene:has(.scene-boss:not([hidden])) .witness .wit { width: 50px; height: 58px; } }

/* A zone's recipe book (carte.js): its famous dishes, found or still to find. */
.recipes { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; }
.recipes li { display: grid; gap: 1px; background: var(--card); border: 2px dashed var(--line); border-radius: 12px; padding: 6px 10px; opacity: .8; }
.recipes li.found { border-style: solid; opacity: 1; }
.recipes li b { font-weight: 900; }
.recipes li span, .recipes li small { font-size: 12px; color: var(--ink-soft); }
.carte-item .ci-recipes { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 900; border: 2px solid var(--line); border-radius: 10px; padding: 1px 8px; background: var(--bg-2); }
.carte-item .ci-recipes svg { width: 16px; height: 16px; }
.carte-item .ci-special { font-size: 12.5px; }
/* the game you're in (carte.js): its card on La Carte when travelling, the place on the title */
.carte-item .ci-here { align-self: flex-start; font-size: 11.5px; font-weight: 900; border-radius: 10px; padding: 1px 8px; background: var(--gas); color: var(--box-ink); }
.t-where { display: inline-flex; align-items: center; gap: 6px; margin: 2px auto 0; font: 900 14px var(--f-body, inherit); color: var(--ink); background: var(--card); border: 2px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 6px; }
.t-where i { width: 22px; height: 22px; border-radius: 50%; background: var(--mc, var(--gas)); border: 2px solid var(--line); }
.t-where small { color: var(--ink-soft); font-weight: 800; }

/* a room's door on a situation's card (rooms.js) */
.room-door { display: flex; gap: 10px; align-items: center; text-align: left; margin: 10px 0 12px; padding: 10px 12px; border: 3px dashed var(--mc, var(--line)); border-radius: 16px; background: var(--bg-2); }
.room-door .rd-art { flex: none; width: 72px; }
.room-door .rd-art svg { display: block; width: 100%; height: auto; }
.room-door .rd-text { min-width: 0; display: grid; gap: 4px; justify-items: start; }
.room-door .rd-text p { margin: 0; font-size: 13px; }
.room-door .rd-text .soft { font-size: 12px; }

/* ---------- The shop, reworked (shop agent, 2026-10-31; Tom: "nice alignments, all buy price at the bottom of cards so
   they are align"). Every offer is one card of one size in a two-column grid: its name (two lines kept), its picture in a
   box of one height, its words, and its price pinned at the foot, so names, pictures and prices line up across a row.
   Sections have small headers by kind. Sold: faded, with a stamp where the price was. Out of reach: the price says why,
   red for coins short, grey for a rule (no slot free…). Then La Poêle's preview, and a read card's glossary lines. ---------- */
.shop-sec { display: grid; gap: 6px; }
.sheet-body .shop-h { margin: 8px 0 0; display: flex; align-items: center; gap: 8px; font-family: var(--f-body); font-weight: 900; font-size: 12px;
  line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.sheet-body .shop-h::after { content: ''; flex: 1; height: 2px; border-radius: 2px; background: var(--bg-2); }
.shop-sec > .note { font-size: 12px; margin-top: -2px; }
.shop-sec .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.shop-sec .offer { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-height: 218px; padding: 9px 8px 8px;
  border-radius: 16px; box-shadow: 0 3px 0 var(--shadow); }
.o-name { display: flex; align-items: flex-end; justify-content: center; height: 2.3em; font-size: 13.5px; font-weight: 900; line-height: 1.15; color: var(--ink); }
.o-name > span { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.o-art { flex: none; height: 84px; display: grid; place-items: center; }
.shop-sec .o-art .o-ic { width: 56px; height: 56px; }
.o-art .card.o-read { width: 62px; height: 80px; max-width: none; flex: none; padding: 4px 2px 3px; border: 3px solid var(--cc, var(--line)); background: var(--card);
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center; gap: 0; }
.o-text { flex: 1; display: grid; align-content: start; gap: 3px; font-size: 11.5px; line-height: 1.3; color: var(--ink-soft); }
.shop-sec .o-text small { display: block; font-size: inherit; min-height: 0; }
.o-text .o-what { font-weight: 900; color: var(--ink); }
.o-text .o-more { font-size: 11px; opacity: .9; }
.shop-sec .o-text .o-traits { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 7px; font-weight: 800; color: var(--ink); }
.o-traits > span { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.o-foot { flex: none; display: grid; }
.o-buy { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 38px; padding: 5px 8px; border-radius: 12px; border: 2px solid var(--on-fill);
  background: var(--gas); color: var(--on-fill); box-shadow: 0 3px 0 var(--shadow); font-weight: 900; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.o-buy .ui-ic { width: 18px; height: 18px; vertical-align: 0; }
.o-buy:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--shadow); }
.shop-sec .o-buy .o-why { min-height: 0; color: inherit; font-size: 11px; line-height: 1.2; font-weight: 900; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.o-why::before { content: '·'; margin-right: 5px; }
.offer.poor .o-buy, .offer.full .o-buy { background: transparent; box-shadow: none; border-style: dashed; opacity: 1; }
.offer.poor .o-buy { color: var(--chili); border-color: var(--chili); }
.offer.full .o-buy { color: var(--ink-soft); border-color: var(--ink-soft); }
.offer.full .o-art, .offer.poor .o-art { opacity: .75; }
.shop-sec .offer.sold { opacity: 1; box-shadow: none; border-style: solid; }
.offer.sold .o-name, .offer.sold .o-art, .offer.sold .o-text { opacity: .4; filter: grayscale(.7); }
.o-sold { display: flex; align-items: center; justify-content: center; min-height: 38px; border-radius: 12px; border: 2px solid var(--on-fill); background: var(--gas);
  color: var(--box-ink); font-weight: 900; font-size: 13px; rotate: -3deg; }
/* a Recette: its form on a gold tile (a pan for a famous dish), and the level it goes to */
.o-recette { position: relative; display: inline-grid; place-items: center; }
.shop-sec .o-recette { font-size: 21px; padding: 8px 14px; box-shadow: 0 3px 0 var(--shadow); }
.o-recette.dish { width: 76px; height: 60px; padding: 0; }
.o-recette.dish .ui-ic { width: 42px; height: 42px; vertical-align: 0; }
.o-lv { position: absolute; right: -12px; bottom: -11px; font: 900 11px/1 var(--f-body); font-style: normal; white-space: nowrap; color: var(--ink); background: var(--card);
  border: 2px solid var(--line); border-radius: 999px; padding: 2px 6px; }
.z-recette .o-recette { font-size: 17px; padding: 6px 8px; max-width: 84px; overflow-wrap: anywhere; text-align: center; }
/* the tools: new offers and a food removed, side by side, each price at its end */
.shop-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.shop-tool { display: flex; align-items: center; gap: 6px; min-height: 44px; white-space: normal; text-align: left; line-height: 1.15; }
.shop-tool > span:not(.o-price) { flex: 1; min-width: 0; }
.shop-tool .o-price { flex: none; display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }

/* La Poêle's preview (Tom, 2026-10-31): the two foods, the card they make, how; it stays in view while you pick */
.poele-pv { position: sticky; top: -12px; z-index: 2; display: grid; gap: 7px; justify-items: center; padding: 12px 10px 10px; background: var(--card);
  border: 3px solid var(--line); border-radius: 18px; box-shadow: 0 3px 0 var(--shadow); }
.pp-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pp-card { flex: none; width: 58px; height: 74px; max-width: none; }
.pp-card.pp-out { width: 70px; height: 90px; box-shadow: 0 3px 0 var(--line), 0 0 0 3px var(--gold); }
.pp-slot { display: grid; place-items: center; width: 58px; height: 74px; border: 3px dashed var(--ink-soft); border-radius: 12px; font-family: var(--f-display); font-size: 22px; color: var(--ink-soft); }
.pp-slot.pp-out { width: 70px; height: 90px; }
.pp-op { font-style: normal; font-family: var(--f-display); font-size: 22px; color: var(--ink-soft); }
.pp-name { margin: 0; font-weight: 900; font-size: 14px; line-height: 1.2; text-align: center; }
.pp-how { margin: 0; max-width: 34em; font-size: 12.5px; line-height: 1.35; text-align: center; color: var(--ink-soft); }
.pp-go { display: inline-flex; align-items: center; gap: 5px; min-width: 60%; justify-content: center; }

/* a read card's glossary: each game word its text names (a trait, a family, a form, Doré…), and what it does */
.z-gloss { padding-top: 7px; border-top: 2px dashed var(--bg-2); }
.z-gloss .z-fam { flex: none; margin-top: 1px; vertical-align: 0; }
/* an Accomplice, a Festin, a condiment or La Poêle sits on a plate: light in both themes, so a dark pan still shows */
.shop-sec .o-art > .o-ic { width: 66px; height: 66px; padding: 9px; border-radius: 50%; background: #FFF8F5; border: 2px solid var(--line); }
.shop-tool > .ui-ic { width: 22px; height: 22px; padding: 2px; border-radius: 50%; background: #FFF8F5; vertical-align: 0; } /* the scissors show in the dark too */

/* ---------- Le Rot du jour (rot.js): the day's page, and its button on Le Bidou ---------- */
/* Le Bidou's button: a pill under the family picture; a badge while a prize waits (its number) or something is new (a dot) */
.t-rot { display: inline-flex; align-items: center; gap: 7px; margin: -4px auto 0; font: 900 14.5px/1.15 var(--f-body); color: var(--ink); text-align: left;
  background: var(--card); border: 2.5px solid var(--line); border-radius: 999px; padding: 5px 12px 5px 7px; box-shadow: 0 3px 0 var(--shadow); }
.t-rot:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shadow); }
.t-rot > .ui-ic { width: 28px; height: 28px; vertical-align: 0; }
.t-rot .badge { margin-left: 0; vertical-align: 0; }
.t-rot .badge.dot { min-width: 12px; width: 12px; height: 12px; padding: 0; border: 2px solid var(--card); box-sizing: content-box; }
/* the page's title wears the game's look: the logo's letters, a burp's wave in the place's colour */
.rot-title { font-family: var(--f-logo); font-size: 25px; line-height: 1.1; color: var(--ink);
  text-decoration: underline wavy var(--mc, var(--gas)); text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-skip-ink: none; }
.rot { display: grid; gap: 10px; }
/* the masthead: the family picture's bunting, the day, where you are */
.rot-mast { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; gap: 2px; padding: 27px 10px 9px; text-align: center;
  border: 2px solid var(--line); border-radius: 16px; background: linear-gradient(var(--bg-2), var(--card) 80%); }
.rot-mast .fam-flags { z-index: -1; }
.rot-date { margin: 0; font-family: var(--f-display); font-size: 19px; line-height: 1.15; }
.rot-date::first-letter { text-transform: uppercase; }
.rot-where { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.rot-where i { width: 14px; height: 14px; border-radius: 50%; background: var(--mc, var(--gas)); border: 2px solid var(--line); }
/* each piece of news: a box with its small heading */
.rot-box { display: grid; gap: 4px; justify-items: start; min-width: 0; background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.rot-box > b { font-size: 15px; line-height: 1.2; }
.rot-box .btn-s { margin-top: 4px; }
.rot-k { margin: 0; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--gas-ink); }
.rot-menu.hot { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); background: linear-gradient(135deg, var(--card) 55%, color-mix(in srgb, var(--gold) 24%, var(--card))); }
.rot-trace { font-size: 15px; letter-spacing: 1px; line-height: 1.2; overflow-wrap: anywhere; }
.rot-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; }
.rot-col { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.rot-col b { font-size: 14.5px; line-height: 1.2; }
.rot-col small { font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.rot-col .note { font-size: 12.5px; }
.rot-vimg { width: 92px; height: 92px; margin: -6px -4px; scale: 1.3; } /* the prout fills its corner of the box */
.rot-card { flex: none; width: 58px; height: 74px; max-width: none; }
.rot-lines { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13.5px; }
.rot-ask { border-style: dashed; border-color: var(--legend); }
.rot-ask p:not(.rot-k) { margin: 0; font-size: 13.5px; }
.rot-acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* the quests: three places, each its picture, its words, how far, and what it gives (or Take it, once done) */
.rot-quests { display: grid; gap: 8px; }
.rq-list { display: grid; gap: 8px; }
.rq { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 9px 10px 9px 9px; }
.rq.new { border-color: var(--legend); }
.rq.done { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.rq.empty { grid-template-columns: 36px minmax(0, 1fr); border-style: dashed; background: transparent; }
.rq.empty .rq-txt b { font-size: 13px; font-weight: 800; color: var(--ink-soft); }
/* its picture sits on a plate, light in both themes, so La Poêle's dark pan still shows (as in the shop) */
.rq-ic { --line: #34152F; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #FFF8F5; border: 2px solid var(--ink); color: #34152F; }
.rq-ic svg { width: 24px; height: 24px; vertical-align: 0; }
.rq-txt { display: grid; gap: 3px; min-width: 0; }
.rq-txt b { font-size: 14px; line-height: 1.2; }
.rq-txt small { font-size: 12px; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.rq-prize, .rq-take { display: grid; justify-items: center; gap: 1px; max-width: 88px; font-size: 11.5px; font-weight: 900; line-height: 1.1; text-align: center; white-space: normal; }
.rq-prize .ui-ic, .rq-take .ui-ic { width: 18px; height: 18px; vertical-align: 0; }
.rq-basket { width: 28px; height: 24px; }
.rq-take { padding: 6px 9px; }
.rq-go { font-size: 13px; }
/* its row in Settings, in the app: the hour, a step at a time */
.set-row .rot-hour { grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; }
.rot-hour b { text-align: center; font-size: 16px; font-variant-numeric: tabular-nums; }
.rot-hour .btn-s { font-size: 18px; padding: 4px 0; }

/* ---------- La Tablée (online.js; game agent, 2026-10-31): friends, trades and gifts, the age question, the parent
   gate, Erase my data. Built on Le Rot du jour's boxes (.rot-box, .rot-k, .rot-col) and the page's tokens only, so it
   wears light, dark and every place's colours. ---------- */
/* Le Bidou: its button beside Le Rot du jour's, two pills on one line (they wrap on a narrow phone) */
.t-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -4px 0 0; }
.t-pills .t-rot { margin: 0; }
.t-tab > .ui-ic { width: 30px; height: 30px; }
/* the sheet: a box per part; a status line; offline said plainly, not in red */
.tab .rot-box { width: 100%; }
.tab-say { margin: 0; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 800; background: color-mix(in srgb, var(--gas) 22%, var(--card)); border: 2px solid var(--gas); }
.tab-say.bad { background: color-mix(in srgb, var(--chili) 14%, var(--card)); border-color: var(--chili); }
.tab-off { display: flex; align-items: center; gap: 6px; }
.tab-off .ui-ic { flex: none; width: 20px; height: 20px; }
.tab-mast .rot-date { font-family: var(--f-logo); font-size: 26px; }
.tab-q { margin: 0; font-size: 15px; font-weight: 800; }
.tab-year { font-family: var(--f-body); letter-spacing: 0; text-transform: none; }
.tab-link { font-weight: 900; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
a.btn-s.tab-link { display: inline-block; text-decoration: none; text-align: center; }
.tab-acts { display: grid; gap: 8px; justify-items: stretch; }
.tab-big { font-size: 15px; padding: 12px 14px; white-space: normal; }
.tab-two { display: flex; flex-wrap: wrap; gap: 8px; }
.tab-small { padding: 5px 10px; font-size: 12px; }
.tab-center { text-align: center; }
.tab-tickets { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); }
.tab-tickets .ui-ic { width: 22px; height: 22px; }
.tab-drop { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--gold); text-shadow: 0 1px 0 var(--shadow); }
.tab-drop .ui-ic { width: 26px; height: 26px; }
/* you: your companion, your table name, your code to show */
.tab-me { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; }
.tab-meimg { width: 64px; height: 64px; scale: 1.25; }
.tab-name { font-family: var(--f-display); font-weight: 400; font-size: 19px; line-height: 1.1; }
.tab-codebox { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; width: 100%;
  padding: 8px 10px; border: 2px dashed var(--line); border-radius: 12px; background: var(--bg); }
.tab-codebox small { grid-column: 1 / -1; font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.tab-code { font: 900 21px/1.2 ui-monospace, Menlo, monospace; letter-spacing: .08em; user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; }
.tab-wide { grid-column: 1 / -1; }
/* rows: a friend, a request, an offer */
.tab-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 6px 0; text-align: left;
  font: inherit; color: inherit; background: none; border: 0; border-top: 2px solid var(--bg-2); }
.tab-box .rot-k + .tab-row { border-top: 0; }
button.tab-row:active { background: var(--bg-2); }
.tab-row .tab-two { justify-content: flex-end; }
.tab-face { width: 46px; height: 46px; scale: 1.2; }
.tab-noface { display: grid; place-items: center; border: 2px dashed var(--ink-soft); border-radius: 50%; scale: .8; font-weight: 900; color: var(--ink-soft); }
.tab-go { font-size: 24px; font-weight: 900; color: var(--ink-soft); }
.tab-addrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; width: 100%; }
.tab-addrow .code-in { min-width: 0; }
.tab-board-l { margin: 0; padding-left: 22px; width: 100%; display: grid; gap: 3px; font-size: 14px; }
.tab-board-l li { display: flex; justify-content: space-between; gap: 8px; }
.tab-board-l li.me { font-weight: 900; color: var(--gas-ink); }
.tab-board-l b { font-variant-numeric: tabular-nums; }
/* a friend's place: their name, their family picture (Le Bidou's, in the sheet), stickers, the quiet buttons */
.tab-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.t-prout.fam.tab-photo { justify-self: center; rotate: 1deg; margin: 10px 0 4px; }
.tab-photo .fam-photo:empty { min-height: 120px; }
.tab-photo > .note { padding: 30px 10px; text-align: center; }
.fam-hit.tab-hit { border: 0; padding: 0; background: none; touch-action: manipulation; }
.tab-stickers { display: flex; flex-wrap: wrap; gap: 6px; }
.tab-st { padding: 0; border: 0; background: none; font: inherit; border-radius: 999px; }
.tab-st:disabled { opacity: .5; }
.tab-sticker { display: inline-flex; align-items: center; gap: 3px; padding: 5px 11px; border: 2.5px solid var(--on-fill); border-radius: 999px; rotate: -3deg;
  background: var(--sc, var(--gold)); color: var(--on-fill); font: 400 15px/1.1 var(--f-display); box-shadow: 0 2px 0 var(--shadow); }
.tab-st:nth-child(even) .tab-sticker { rotate: 3deg; }
.tab-sticker .ui-ic { width: 18px; height: 18px; }
.tab-st:active .tab-sticker { transform: translateY(2px); box-shadow: none; }
.tab-hear { vertical-align: middle; }
.tab-quiet { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 6px; }
.tab-quiet .note { width: 100%; text-align: center; }
/* a prout seen whole: picture, name, kind, stage and stars, rarity, its powers now, its birthplace */
.tab-whole { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; }
.tab-wimg { width: 96px; height: 96px; }
.tab-pw li { font-size: 12.5px; padding: 4px 8px; background: var(--bg); }
.tab-whole .from-line { font-size: 12.5px; }
/* picking one of theirs and one of yours */
.tab-picks { display: flex; gap: 6px; overflow-x: auto; width: 100%; padding: 2px 2px 6px; overscroll-behavior-x: contain; }
.tab-pick { flex: none; display: grid; justify-items: center; gap: 1px; width: 76px; padding: 4px 2px 5px; font: inherit; color: var(--ink);
  background: var(--bg); border: 2px solid var(--line); border-radius: 14px; }
.tab-pick.on { border-color: var(--gas); box-shadow: 0 0 0 2px var(--gas); background: color-mix(in srgb, var(--gas) 18%, var(--bg)); }
.tab-pick:disabled { opacity: .5; }
.tab-pick small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 900; }
.tab-pick i { font-style: normal; font-size: 10px; font-weight: 800; color: var(--ink-soft); line-height: 1.1; }
.tab-pimg { width: 60px; height: 60px; }
/* the parent gate: four answers; the one held fills over three seconds (it works with reduced motion too: it's the
   clock, not a decoration) */
.tab-gate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.tab-gate .btn { position: relative; overflow: hidden; font-size: 24px; touch-action: none; -webkit-user-select: none; user-select: none; }
.tab-gate .btn span { position: relative; z-index: 1; }
.tab-gate .btn::before { content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: 0 50%; background: var(--gas); }
.tab-gate .btn.holding::before { transform: scaleX(1); transition: transform 3s linear; }
.reduce-motion .tab-gate .btn.holding::before { transition: transform 3s linear; }
.tab-gate + .note { margin-top: 8px; }
/* Erase it: the one red button, never the one with the focus; stickers in a line of news, smaller */
.ov-card .btn.tab-erase-go { background: var(--chili); color: #FFFFFF; }
.rot-lines .tab-sticker { font-size: 12.5px; padding: 2px 8px; border-width: 2px; box-shadow: none; }
.rot-lines .tab-sticker .ui-ic { width: 15px; height: 15px; }
/* ---------- skipping the tutorial (guide.js): a new save's "First time here?", Settings' Tips and tutorial ---------- */
.knows-acts { display: grid; gap: 10px; }
.knows-acts .btn { display: grid; gap: 4px; padding: 12px 14px; text-wrap: balance; }
.knows-acts .btn small { font-family: var(--f-body); font-size: 13px; font-weight: 700; line-height: 1.3; }
.set-row .seg.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.set-row .seg.two .btn-s { white-space: normal; text-wrap: balance; }

/* ---------- La Boutique (boutique.js; boutique agent, 2026-10-31): the shop for real money, its skins, the family
   picture's sheet. Tom: you see exactly what you buy; the shop is found, never pushed. Built on Le Rot du jour's boxes
   and the page's tokens, so it wears light, dark and every place's colours; a skin's own colours are fixed, outlined in
   the page's line. ---------- */
/* Le Bidou's button: a quiet chip at the very bottom, no badge */
.t-btq { display: inline-flex; align-items: center; gap: 6px; margin: 2px auto 6px; padding: 4px 11px 4px 6px; color: var(--ink-soft); font-weight: 800; }
.t-btq > .ui-ic { width: 22px; height: 22px; vertical-align: 0; }
.t-btq .sense { font-weight: 700; }
/* the sheet: the masthead, what it promises, its parts; each thing a row: its picture, its words, its price */
.btq .rot-box { width: 100%; }
.btq-mast > .ui-ic { width: 34px; height: 34px; margin-bottom: 2px; }
.btq-mast .rot-date { font-family: var(--f-logo); font-size: 26px; }
.btq-rules { margin: 0; padding: 8px 12px; list-style: none; display: grid; gap: 4px; border-radius: 16px;
  background: color-mix(in srgb, var(--gas) 16%, var(--card)); border: 2px solid color-mix(in srgb, var(--gas) 60%, var(--line)); }
.btq-rules li { position: relative; padding-left: 20px; font-size: 13px; font-weight: 800; line-height: 1.3; }
.btq-rules li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 900; color: var(--gas-ink); }
.btq-mast { padding-bottom: 7px; }
.btq-h { margin: 8px 0 0; font-size: 14px; }
.btq-h small { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.btq-item { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 8px 0; border-top: 2px solid var(--bg-2); }
.btq-box .rot-k + .note + .btq-item, .btq-h + .btq-item { border-top: 0; }
.btq-txt b { font-size: 14px; }
.btq-txt small { font-weight: 700; line-height: 1.3; }
.btq-txt .btq-free { font-weight: 900; color: var(--gas-ink); }
.btq-act { display: grid; justify-items: end; gap: 4px; }
.btq-buy { min-width: 74px; font-size: 14px; font-variant-numeric: tabular-nums; }
.btq-test { font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.btq-owned { font-size: 13px; font-weight: 900; color: var(--gas-ink); white-space: nowrap; }
.btq-wait { max-width: 86px; font-size: 12px; font-weight: 900; line-height: 1.15; text-align: right; color: var(--legend); }
.btn-s.btq-on { background: var(--gold); }
.btq-closed { font-weight: 800; color: var(--ink); }
/* the pictures: a Passeport booklet in its place's colour, tickets, a corner of the picture, a prout in its hat */
.btq-pv { justify-self: center; }
.btq-pass { position: relative; display: grid; place-items: center; width: 50px; height: 64px; border: 2.5px solid var(--line); border-radius: 5px 11px 11px 5px;
  background: var(--mc); box-shadow: inset 6px 0 0 rgba(0, 0, 0, .14), 0 2px 0 var(--shadow); }
.btq-pass::after { content: ""; position: absolute; left: 12px; right: 9px; bottom: 9px; height: 3px; border-radius: 2px; background: #FFE58A; opacity: .9; }
.btq-pass i { display: grid; place-items: center; width: 34px; height: 34px; margin-top: -8px; border-radius: 50%; background: #FFF8F5; border: 2px solid #34152F; }
.btq-pass svg { width: 24px; height: 24px; }
.btq-tix { position: relative; display: block; width: 62px; height: 52px; }
.btq-tix .ui-ic { position: absolute; width: 38px; height: 38px; left: 2px; top: 2px; color: var(--ink); }
.btq-tix .ui-ic:nth-child(2) { left: 12px; top: 8px; rotate: 8deg; }
.btq-tix .ui-ic:nth-child(3) { left: 22px; top: 14px; rotate: 16deg; }
.btq-tix b { position: absolute; right: -2px; bottom: -4px; font: 400 17px/1 var(--f-display); color: var(--ink); text-shadow: 0 1px 0 var(--card); }
.btq-hat { display: block; width: 66px; height: 66px; }
.btq-hatimg { width: 66px; height: 66px; scale: 1.9; transform-origin: 50% 60%; } /* the prout fills its corner, hat and all */
/* a small family picture: the frame (the house's, or a skin), the blanket, the companion on it */
.t-prout.fam.btq-frame { --fw: 66px; display: block; width: 66px; padding: 4px 4px 5px; margin: 0; rotate: -2deg; box-shadow: 0 2px 0 var(--line); border-width: 2px; }
.t-prout.fam.btq-frame:not(.fr-wood):not(.fr-gold):not(.fr-cloud)::before, .t-prout.fam.btq-frame:not(.fr-wood):not(.fr-gold):not(.fr-cloud)::after { top: -5px; left: 5px; width: 20px; height: 8px; }
.t-prout.fam.btq-frame:not(.fr-wood):not(.fr-gold):not(.fr-cloud)::after { left: auto; right: 5px; }
.btq-mphoto { display: block; aspect-ratio: 1.25; border-width: 1.5px; }
.btq-mphoto .fam-blanket { border-width: 1.5px; border-radius: 7px; }
.btq-mprout { position: absolute; left: 50%; bottom: 8%; width: 46%; translate: -50% 0; z-index: 1; }
.btq-mimg { display: block; width: 100%; height: auto; }
.btq-mphoto .fam-flags { opacity: .9; }

/* The skins (Tom, 2026-10-31: drawn in the game's style, with code). Blankets: on .fam-blanket, under the family. */
.fam-blanket.bk-beans { background:
    radial-gradient(5.5px 3.6px at 6px 6px, #FBE6BE 92%, #0000) 0 0 / 18px 13px,
    radial-gradient(6.6px 4.6px at 6px 6.4px, #8B3A1A 92%, #0000) 0 0 / 18px 13px,
    radial-gradient(5.5px 3.6px at 6px 6px, #FBE6BE 92%, #0000) 9px 6.5px / 18px 13px,
    radial-gradient(6.6px 4.6px at 6px 6.4px, #8B3A1A 92%, #0000) 9px 6.5px / 18px 13px,
    #E8662F; }
.fam-blanket.bk-melon { background:
    radial-gradient(1.7px 2.8px at 50% 50%, #34152F 90%, #0000) 0 0 / 17px 14px,
    radial-gradient(1.7px 2.8px at 50% 50%, #34152F 90%, #0000) 8.5px 7px / 17px 14px,
    #FF6F7D; box-shadow: inset 0 0 0 4px #D8F2B0, inset 0 0 0 9px #3E9B4F; }
.fam-blanket.bk-night { background:
    radial-gradient(circle at 81% 34%, #263463 0 8.5px, #0000 9px),
    radial-gradient(circle at 78% 40%, #FFE58A 0 9px, #0000 9.5px),
    radial-gradient(circle, #FFE58A 0 1.4px, #0000 2px) 0 0 / 23px 17px,
    radial-gradient(circle, #FFFFFF 0 1px, #0000 1.5px) 11px 8px / 23px 17px,
    #263463; }
.fam-blanket.bk-beans::before, .fam-blanket.bk-beans::after, .fam-blanket.bk-melon::before, .fam-blanket.bk-melon::after,
.fam-blanket.bk-night::before, .fam-blanket.bk-night::after { display: none; }
/* Frames: on the picture itself (.fam), in place of its tape. Wood: hung on a nail by a string. */
.fam.fr-wood { padding: 11px; border-radius: 4px; background: linear-gradient(rgba(255, 255, 255, .14), rgba(0, 0, 0, .14)),
    repeating-linear-gradient(97deg, #B9814B 0 6px, #A86F3C 6px 8px, #C48E57 8px 15px, #9C6535 15px 16px); box-shadow: inset 0 0 0 2px rgba(255, 236, 200, .35), 0 3px 0 var(--line); }
.fam.fr-wood .fam-photo { border-color: #4A2A12; box-shadow: 0 0 0 2px #E2B884; }
.fam.fr-wood::before { top: -19px; left: 50%; width: 44%; height: 20px; translate: -50% 0; rotate: none; opacity: 1; border-radius: 0; background:
    linear-gradient(to top right, #0000 calc(50% - 1.2px), var(--line) calc(50% - 1.2px) calc(50% + 1.2px), #0000 calc(50% + 1.2px)) left / 50% 100% no-repeat,
    linear-gradient(to top left, #0000 calc(50% - 1.2px), var(--line) calc(50% - 1.2px) calc(50% + 1.2px), #0000 calc(50% + 1.2px)) right / 50% 100% no-repeat; }
.fam.fr-wood::after { top: -24px; left: 50%; right: auto; width: 10px; height: 10px; translate: -50% 0; rotate: none; opacity: 1; border-radius: 50%; background: #C0C8D0; border: 2px solid var(--line); }
.t-prout.fam.fr-wood:not(.btq-frame) { margin-top: 26px; }
/* Gold: a museum's frame, its four corners in relief */
.fam.fr-gold { padding: 11px; border-radius: 6px; border-color: var(--line); background:
    radial-gradient(circle, #FFF6C4 0 2.5px, #B37A00 3px 4.2px, #0000 4.6px) 0 0 / 11px 11px no-repeat,
    radial-gradient(circle, #FFF6C4 0 2.5px, #B37A00 3px 4.2px, #0000 4.6px) 100% 0 / 11px 11px no-repeat,
    radial-gradient(circle, #FFF6C4 0 2.5px, #B37A00 3px 4.2px, #0000 4.6px) 0 100% / 11px 11px no-repeat,
    radial-gradient(circle, #FFF6C4 0 2.5px, #B37A00 3px 4.2px, #0000 4.6px) 100% 100% / 11px 11px no-repeat,
    linear-gradient(135deg, #FFE58A 0%, #E9A400 24%, #FFE58A 46%, #CF9100 72%, #FFD45A 100%);
  box-shadow: inset 0 0 0 2px #FFF3B0, inset 0 0 0 4px #B37A00, 0 3px 0 var(--line); }
.fam.fr-gold .fam-photo { border-color: #8A5A00; box-shadow: 0 0 0 2px #FFF3B0; }
.fam.fr-gold::before, .fam.fr-gold::after { display: none; }
.t-prout.fam.btq-frame.fr-gold { padding: 6px; }
.t-prout.fam.btq-frame.fr-wood { padding: 6px; }
.t-prout.fam.btq-frame.fr-wood::before, .t-prout.fam.btq-frame.fr-wood::after { display: none; } /* no string in small */
/* Cloud: puffs all round, light in both themes (a cloud is light), drawn behind the picture once (it never moves) */
.fam.fr-cloud { padding: 15px; background: none; border: 0; box-shadow: none; }
.fam.fr-cloud::before { --cl: color-mix(in srgb, #FFFFFF 78%, var(--card)); content: ""; inset: 0; top: 0; left: 0; width: auto; height: auto; z-index: -1; rotate: none; opacity: 1; border-radius: 0;
  background: radial-gradient(circle closest-side, var(--cl) 97%, #0000) 0 0 / 22px 22px round, linear-gradient(var(--cl), var(--cl)) 11px 11px / calc(100% - 22px) calc(100% - 22px) no-repeat;
  filter: drop-shadow(2.4px 0 0 var(--line)) drop-shadow(-2.4px 0 0 var(--line)) drop-shadow(0 2.4px 0 var(--line)) drop-shadow(0 -2.4px 0 var(--line)) drop-shadow(0 3px 0 var(--shadow)); }
.fam.fr-cloud::after { display: none; }
.t-prout.fam.btq-frame.fr-cloud { padding: 7px; box-shadow: none; }
.t-prout.fam.btq-frame.fr-cloud::before { background-size: 12px 12px, calc(100% - 12px) calc(100% - 12px); background-position: 0 0, 6px 6px;
  filter: drop-shadow(1.6px 0 0 var(--line)) drop-shadow(-1.6px 0 0 var(--line)) drop-shadow(0 1.6px 0 var(--line)) drop-shadow(0 -1.6px 0 var(--line)); }
/* the picture's own button (only with a blanket or a frame of yours), bottom left, as "+n" is bottom right */
.fam-look { position: absolute; left: -10px; bottom: -12px; z-index: 71; display: grid; place-items: center; padding: 3px 7px; }
.fam-look .ui-ic { width: 20px; height: 20px; }
/* the picture's sheet: each choice in small, the one in use in gold */
.btq-looks { display: flex; flex-wrap: wrap; gap: 10px; }
.btq-look { display: grid; justify-items: center; gap: 4px; width: 96px; padding: 8px 4px 6px; font: inherit; color: var(--ink); background: var(--bg); border: 2px solid var(--line); border-radius: 14px; }
.btq-look.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); background: color-mix(in srgb, var(--gold) 16%, var(--bg)); }
.btq-look small { font-size: 11.5px; font-weight: 900; line-height: 1.15; text-align: center; }
.btq-look .btq-frame { margin: 4px 0 2px; }