/* Kiff Kiff — ambiance « Arty » : fanzine risographe.
   Papier jaune citron, deux encres (rose fluo, bleu) qui se chevauchent en violet,
   grain d’impression, repérage légèrement décalé. Les rouleaux sont des bandes de
   papier imprimées ; la phrase se lit de haut en bas, du switch « J’ai envie »
   au switch de réponse. */
:root {
  --chili-color: #FF2E63;
  --pill-line: var(--blue);
  --pill-fg: var(--blue);
  --pill-on-bg: var(--blue);
  --pill-on-fg: var(--paper);
  --chili-on-pill: var(--pink);
  --call-color: var(--pink);
  --paper: #FFE45C;
  --paper-hi: #FFF08F;
  --pink: #FF48B0;
  --blue: #2E4FA3;
  --violet: #2E1670;
  --pink-soft: #FF9ACF;

  --f-display: "Bagel Fat One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --f-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --theme-color: #FFE45C;
  --confetti: #FFE45C, #2E4FA3, #2E1670, #FFF08F, #FFE45C, #2E4FA3;
  --confetti-shapes: dot, rect, dot, rect, rect;
  --halftone-pink: radial-gradient(circle, var(--pink) 1.25px, transparent 1.7px) 0 0 / 5px 5px;
  --halftone-blue: radial-gradient(circle, var(--blue) 1.25px, transparent 1.7px) 0 0 / 5px 5px;

  color-scheme: light;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
[hidden] { display: none !important; }
body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--violet);
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  caret-color: var(--pink);
}
::selection { background: var(--pink); color: var(--violet); }
input { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px dashed var(--blue); outline-offset: 4px; }

/* Grain d’impression posé sur tout l’écran */
.grain {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.09  0 0 0 0 0.44  0 0 0 1.6 -0.55'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

/* Lettrage en deux passages d’encre, légèrement hors repérage */
.ink {
  --ink-a: var(--blue);
  --ink-b: var(--pink);
  --mx: 3px;
  --my: 2px;
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: transparent;
}
.ink::before, .ink::after {
  content: attr(data-ink);
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ink::after { color: var(--ink-b); transform: translate(var(--mx), var(--my)); z-index: 0; }
.ink::before { color: var(--ink-a); mix-blend-mode: multiply; z-index: 1; }
.ink--flat::before { mix-blend-mode: normal; }
.is-pulse .ink::after, .ink.is-pulse::after { animation: register .42s steps(3) 2; }
@keyframes register {
  0% { transform: translate(var(--mx), var(--my)); }
  33% { transform: translate(-2px, 4px); }
  66% { transform: translate(5px, -1px); }
  100% { transform: translate(var(--mx), var(--my)); }
}

/* ---------- Mise en page ---------- */
.app {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 10px 14px;
}

.top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.logo {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.01em;
  transform: rotate(-3deg);
  transform-origin: left center;
  white-space: nowrap;
}
.top-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.sticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2.5px solid var(--blue);
  background: var(--paper);
  color: var(--blue);
  font-family: var(--f-ui);
  font-weight: 750;
  font-stretch: 105%;
  cursor: pointer;
}
.sticker:active { transform: translate(1px, 2px); }
.sticker--round { width: 40px; height: 40px; border-radius: 50%; }
.sticker--pass { height: 40px; padding: 0 14px; border-radius: 999px; font-size: 15px; transform: rotate(2deg); }
.sticker--pass:active { transform: rotate(2deg) translate(1px, 2px); }
.sticker .cross { display: none; }
.sticker[aria-pressed="true"] .cross { display: inline; }
.sticker[aria-pressed="true"] .wave { display: none; }

.hint {
  margin: 0;
  min-height: 2.7em;
  font-size: 15px;
  font-stretch: 96%;
  line-height: 1.35;
  color: var(--violet);
  text-wrap: pretty;
}
.hint b { font-weight: 800; color: var(--blue); }
.hint .undo {
  border: 0; background: none; padding: 0;
  font-weight: 800; color: var(--blue);
  text-decoration: underline wavy var(--pink);
  text-underline-offset: 4px;
  cursor: pointer;
}

/* ---------- Switches (début et fin de phrase, même dessin) ---------- */
.switch {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 2px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: opacity .3s;
}
.switch:disabled { cursor: default; }
.track {
  position: relative;
  flex: none;
  width: 76px;
  height: 42px;
  border: 3px solid var(--blue);
  border-radius: 999px;
  background: var(--paper);
  transition: background-color .3s cubic-bezier(.2, .8, .2, 1);
}
.track::before {
  content: "";
  position: absolute;
  inset: 4px 6px 4px 6px;
  border-radius: 999px;
  background: var(--halftone-blue);
  opacity: .35;
}
.knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--pink);
  transition: transform .5s cubic-bezier(.3, 1.6, .45, 1);
  display: grid; place-items: center;
}
.knob::after {
  content: "";
  width: 14px; height: 13px;
  background: var(--paper);
  clip-path: path("M7 13 C3 9.5 0 7.3 0 4 C0 1.7 1.8 0 3.8 0 C5.2 0 6.3.7 7 1.8 C7.7.7 8.8 0 10.2 0 C12.2 0 14 1.7 14 4 C14 7.3 11 9.5 7 13Z");
  transform: scale(0);
  transition: transform .3s .12s cubic-bezier(.3, 1.8, .5, 1);
}
.switch[aria-checked="true"] .track { background: var(--blue); }
.switch[aria-checked="true"] .track::before { opacity: 0; }
.switch[aria-checked="true"] .knob { transform: translateX(34px); }
.switch[aria-checked="true"] .knob::after { transform: scale(1); }

.sw-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sw-label {
  font-family: var(--f-display);
  font-size: 32px;
  line-height: 1.02;
  white-space: nowrap;
}
.switch[aria-checked="true"] .sw-label { --ink-a: var(--pink); --ink-b: var(--blue); }
.sw-owner { font-size: 13px; font-weight: 700; font-stretch: 90%; color: var(--blue); }

@keyframes call {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-5deg); }
  40% { transform: rotate(4deg); }
  60% { transform: rotate(0); }
}

/* ---------- La presse : sélecteur, hasard et bandes ---------- */
.press {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.press-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; }

.dir { display: flex; align-items: center; gap: 2px; min-width: 0; }
.dir button {
  position: relative;
  z-index: 0;
  min-height: 42px;
  padding: 4px 10px;
  border: 0;
  background: none;
  font-weight: 800;
  font-size: 19px;
  font-stretch: 100%;
  color: var(--blue);
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s;
}
.dir button::before {
  content: "";
  position: absolute;
  inset: 8px 2px 6px;
  z-index: -1;
  background: var(--pink);
  transform: rotate(-2deg) scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.2, .9, .2, 1);
}
.dir button[aria-pressed="true"] { color: var(--violet); }
.dir button[aria-pressed="true"]::before { transform: rotate(-2deg) scaleX(1); }
.dir button[aria-pressed="false"] { opacity: .7; }
.dir-or { font-weight: 300; font-size: 22px; color: var(--blue); }
.dir.is-locked button { cursor: default; }
.dir.is-locked button[aria-pressed="false"] { opacity: .3; }

.sticker--dice {
  flex: none;
  height: 46px;
  padding: 0 14px 0 10px;
  border-radius: 14px;
  background: var(--blue);
  border-color: var(--blue);
  color: var(--paper);
  font-size: 16px;
  transform: rotate(-4deg);
}
.sticker--dice:active { transform: rotate(-4deg) translate(1px, 2px); }

.strips {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 2px 8px 8px 2px;
}

/* ---------- Rouleaux en bandes de papier ---------- */
.reel {
  --item-h: 38px;
  --fill: var(--pink);
  --text: var(--violet);
  --shade: var(--halftone-blue);
  --rot: -1.2deg;
  position: relative;
  flex: 1;
  min-height: 66px;
  touch-action: none;
  cursor: grab;
  color: var(--text);
  transform: rotate(var(--rot));
  transition: opacity .3s;
}
.reel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fill-bg, var(--fill));
  transition: opacity .3s;
}
/* ombre imprimée en trame, dans l’autre encre */
.reel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  transform: translate(7px, 7px);
  background: var(--shade);
  transition: opacity .3s;
}
.strip--blue { --fill: var(--blue); --text: var(--paper); --shade: var(--halftone-pink); --rot: .9deg; }
.strip--pink2 { --fill: var(--paper-hi); --text: var(--violet); --rot: -.6deg; }
.strip--pink2 { --fill-bg: radial-gradient(circle, var(--pink) .9px, transparent 1.3px) 0 0 / 5px 5px, var(--paper-hi); }
.strip--pink2 .reel-item.is-center { text-shadow: 0 0 6px var(--paper-hi), 0 0 2px var(--paper-hi); }
.reel:active { cursor: grabbing; }
.reel:focus-visible { outline-offset: 5px; }

.reel-strip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 520px;
  transform-style: preserve-3d;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
}
.reel-item {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: var(--item-h);
  margin-top: calc(var(--item-h) / -2);
  display: flex; align-items: center; justify-content: center;
  padding: 0 14px;
  font-weight: 700;
  font-size: 21px;
  font-stretch: 100%;
  white-space: nowrap;
  color: var(--text);
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.reel-item.is-center { font-weight: 850; font-stretch: 108%; }
.reel-item.is-long { font-size: 17px; font-stretch: 94%; }
.reel-item.is-long.is-center { font-stretch: 96%; }
.reel-item.is-xlong { font-size: 15.5px; font-stretch: 86%; }
.reel-item.is-xlong.is-center { font-stretch: 88%; }
.reel-item.is-xxlong { font-size: 14px; font-stretch: 82%; }
.reel-item.is-xxlong.is-center { font-stretch: 84%; }
.reel-item.is-placeholder { font-style: italic; font-weight: 600; }

/* Ombrage du tambour : la trame se resserre vers le haut et le bas,
   deux encoches marquent la ligne lue */
.reel-shade {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='14'><path d='M0 0 L9 7 L0 14Z' fill='%232E1670'/></svg>") left 50% / 9px 14px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='14'><path d='M9 0 L0 7 L9 14Z' fill='%232E1670'/></svg>") right 50% / 9px 14px no-repeat;
}
.reel-shade::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, var(--violet) 1.15px, transparent 1.55px) 0 0 / 4px 4px,
    linear-gradient(rgba(46, 22, 112, .75), transparent 40%, transparent 60%, rgba(46, 22, 112, .75));
  -webkit-mask-image: linear-gradient(#000, rgba(0, 0, 0, .7) 20%, transparent 38%, transparent 62%, rgba(0, 0, 0, .7) 80%, #000);
  mask-image: linear-gradient(#000, rgba(0, 0, 0, .7) 20%, transparent 38%, transparent 62%, rgba(0, 0, 0, .7) 80%, #000);
  opacity: .62;
}
.strip--blue .reel-shade::before {
  background:
    radial-gradient(circle, #13245C 1.15px, transparent 1.55px) 0 0 / 4px 4px,
    linear-gradient(rgba(19, 36, 92, .7), transparent 40%, transparent 60%, rgba(19, 36, 92, .7));
  opacity: .8;
}
.reel.is-locked .reel-shade { opacity: .25; }

/* Bande verrouillée : l’encre est retirée, il reste le tracé */
.reel.is-locked { cursor: not-allowed; --text: var(--blue); outline: 2.5px dashed var(--blue); outline-offset: -2px; }
.reel.is-locked::before, .reel.is-locked::after { opacity: 0; }
.reel.is-locked .reel-strip { opacity: .55; }
.reel.is-locked .reel-item.is-center { text-shadow: none; }

/* Bande changée : tampon « changé » */
.stamp {
  position: absolute;
  right: -6px; top: -12px;
  z-index: 3;
  padding: 2px 8px 3px;
  border: 2.5px solid var(--pink);
  border-radius: 6px;
  background: var(--paper);
  color: var(--pink);
  font-family: var(--f-display);
  font-size: 15px;
  line-height: 1.1;
  transform: rotate(8deg) scale(0);
  transition: transform .35s cubic-bezier(.3, 1.8, .5, 1);
  pointer-events: none;
}
.reel.is-changed .stamp { transform: rotate(8deg) scale(1); }

.reel.is-nope { animation: nope .32s ease; }
@keyframes nope {
  20% { transform: rotate(var(--rot)) translateX(-7px); }
  50% { transform: rotate(var(--rot)) translateX(6px); }
  80% { transform: rotate(var(--rot)) translateX(-3px); }
}

/* ---------- Boutons ---------- */
.btn {
  position: relative;
  z-index: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: none;
  --btn-bg: var(--pink);
  --btn-shade: var(--halftone-blue);
  color: var(--violet);
  font-weight: 850;
  font-stretch: 108%;
  font-size: 18px;
  cursor: pointer;
}
.btn::before, .btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.btn::before { z-index: -2; background: var(--btn-shade); transform: translate(5px, 5px); }
.btn::after { z-index: -1; background: var(--btn-bg); }
.btn:active { transform: translate(3px, 3px); }
.btn:active::before { transform: translate(2px, 2px); }
.btn--paper { --btn-bg: var(--paper); --btn-shade: var(--halftone-pink); color: var(--blue); }
.btn--line { --btn-bg: transparent; color: var(--blue); box-shadow: inset 0 0 0 3px var(--blue); }
.btn--line::before { display: none; }
.link-btn {
  border: 0; background: none; padding: 10px;
  font-weight: 750; font-size: 16px;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* ---------- Écrans superposés ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: max(24px, env(safe-area-inset-top, 0px));
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  padding-left: max(18px, env(safe-area-inset-left, 0px));
  padding-right: max(18px, env(safe-area-inset-right, 0px));
  background: var(--paper);
  animation: inkin .32s cubic-bezier(.2, .8, .2, 1);
}
@keyframes inkin { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.sheet {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.sheet h2 { margin: 0; font-weight: 400; max-width: 100%; overflow-wrap: break-word; }
.sheet p { margin: 0; text-wrap: pretty; }
.stack { display: flex; flex-direction: column; gap: 14px; width: 100%; align-items: stretch; margin-top: 8px; }

/* Accueil : affiche */
.poster-title {
  width: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--f-display);
  font-size: clamp(88px, 31vw, 150px);
  line-height: .84;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.poster-title .ink { --mx: 6px; --my: 5px; }
.poster-title .ink:first-child { transform: rotate(-4deg); }
.poster-title .ink:last-child { --ink-a: var(--pink); --ink-b: var(--blue); align-self: flex-end; margin-right: 4%; transform: rotate(3deg); }
.poster-sub, .poster-rules { align-self: stretch; }
.poster-sub { font-weight: 850; font-stretch: 112%; font-size: 18px; color: var(--blue); }
.poster-rules { font-size: 17px; font-stretch: 96%; max-width: 34ch; }
.start-form {
  width: 100%;
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 4px;
}
.start-form label { font-weight: 800; font-size: 15px; margin-top: 8px; color: var(--blue); }
.start-form input, .sheet--edit input {
  width: 100%;
  min-height: 50px;
  padding: 0 4px;
  border: 0;
  border-bottom: 3px solid var(--blue);
  border-radius: 0;
  background: transparent;
  color: var(--violet);
  font: 700 22px var(--f-ui);
  font-stretch: 104%;
  outline: none;
}
.start-form input::placeholder, .sheet--edit input::placeholder { color: var(--pink); opacity: 1; }
.start-form input:focus, .sheet--edit input:focus { border-bottom-color: var(--pink); }
.start-form .btn { margin-top: 22px; align-self: stretch; }

/* Passage du téléphone : page bleue */
.overlay--handoff { background: var(--blue); color: var(--paper); }
.handoff-title {
  font-family: var(--f-display);
  font-size: clamp(46px, 15vw, 76px);
  line-height: .95;
  color: var(--paper);
  text-shadow: 4px 4px 0 var(--pink);
}
.handoff-kicker { font-weight: 850; font-stretch: 112%; font-size: 20px; color: var(--pink-soft); }
.handoff-text { font-size: 18px; max-width: 30ch; }
.overlay--handoff .link-btn { color: var(--paper); text-decoration-color: var(--pink); }
.overlay--handoff .btn { margin-top: 12px; }

/* On passe : page rose */
.overlay--pass { background: var(--pink); color: var(--violet); }
.pass-title { font-family: var(--f-display); font-size: clamp(56px, 18vw, 88px); line-height: .95; }
.pass-title .ink { --ink-a: var(--blue); --ink-b: var(--paper); }
.pass-text { font-size: 19px; font-weight: 700; }
.overlay--pass .btn { --btn-bg: var(--paper); color: var(--blue); }
.overlay--pass .btn--line { --btn-bg: transparent; }
.overlay--pass .link-btn { color: var(--violet); }

/* Texte libre */
.overlay--edit { align-items: end; background: rgba(46, 22, 112, .72); }
.sheet--edit {
  position: relative;
  padding: 22px 20px 18px;
  color: var(--violet);
  gap: 10px;
  align-items: stretch;
  transform: rotate(-.8deg);
}
.sheet--edit::before, .sheet--edit::after { content: ""; position: absolute; inset: 0; }
.sheet--edit::before { z-index: -2; background: var(--halftone-pink); transform: translate(8px, 8px); }
.sheet--edit::after { z-index: -1; background: var(--paper); }
.edit-label { font-family: var(--f-display); font-size: 28px; color: var(--blue); }
.edit-preview { font-size: 15px; }
.edit-preview mark { background: var(--pink); color: var(--violet); padding: 0 3px; }
.edit-hint { font-size: 14px; color: var(--blue); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* Célébration : page rose, trame bleue qui éclate */
.overlay--party { background: var(--pink); color: var(--violet); align-items: center; }
.overlay--party::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, var(--blue) 1.6px, transparent 2.2px) 0 0 / 9px 9px;
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0, #000 18%, transparent 58%);
  mask-image: radial-gradient(circle at 50% 42%, #000 0, #000 18%, transparent 58%);
  opacity: .5;
  animation: burst 1.1s cubic-bezier(.2, .9, .2, 1) both;
}
@keyframes burst { from { transform: scale(.15); opacity: 0; } to { transform: scale(1); opacity: .5; } }
#confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.overlay--party .sheet { position: relative; z-index: 2; }
.party-title {
  font-family: var(--f-display);
  font-size: clamp(60px, 20vw, 104px);
  line-height: .9;
  animation: stampin .6s cubic-bezier(.3, 1.6, .5, 1) both .1s;
}
.party-title .ink { --ink-a: var(--paper); --ink-b: var(--blue); --mx: 6px; --my: 5px; }
@keyframes stampin { from { transform: scale(2.2) rotate(-12deg); opacity: 0; } to { transform: scale(1) rotate(-4deg); opacity: 1; } }
.party-title { transform: rotate(-4deg); }
.party-sentence {
  padding: 14px 16px;
  background: var(--paper);
  color: var(--violet);
  font-size: clamp(21px, 6vw, 26px);
  font-weight: 800;
  font-stretch: 100%;
  line-height: 1.22;
  transform: rotate(1.2deg);
  box-shadow: none;
}
.party-text { font-size: 16px; font-weight: 700; }
.overlay--party .btn { margin-top: 8px; --btn-bg: var(--blue); --btn-shade: radial-gradient(circle, var(--paper) 1.25px, transparent 1.7px) 0 0 / 5px 5px; color: var(--paper); }

/* Petits écrans */
@media (max-height: 720px) {
  .poster-title { font-size: clamp(64px, 23vw, 110px); }
  .poster-rules { font-size: 16px; }
}
@media (max-height: 660px) {
  .app { gap: 7px; padding-top: 6px; }
  .logo { font-size: 28px; }
  .sw-label { font-size: 26px; }
  .track { width: 66px; height: 38px; }
  .knob { width: 26px; height: 26px; }
  .switch[aria-checked="true"] .knob { transform: translateX(28px); }
  .hint { font-size: 14px; }
  .strips { gap: 11px; }
  .reel { --item-h: 34px; min-height: 56px; }
  .reel-item { font-size: 19px; }
  .reel-item.is-long { font-size: 16px; }
  .reel-item.is-xlong { font-size: 14.5px; }
  .reel-item.is-xxlong { font-size: 13px; }
  .dir button { min-height: 38px; font-size: 17px; }
  .sticker--dice { height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Piment */
.piment-row-label { font-weight: 800; font-size: 16px; font-stretch: 104%; }
.piment-name { font-family: var(--f-ui); font-weight: 800; font-stretch: 104%; }
.piment-error { color: #D81B60; }
.sheet--edit .edit-hint { color: var(--blue); }

/* Estampille piment sur chaque bande */
:root { --reel-chili: #FF48B0; --reel-chili-bg: var(--violet); }

/* Accueil en écrans, tour de jeu par modales */
.step-title { font-family: var(--f-display); font-size: 42px; color: var(--blue); }
.rules li b { color: var(--blue); }
.overlay--offer .btn--line { color: var(--paper); box-shadow: inset 0 0 0 3px var(--paper); }
:root { --orig-hl: rgba(255, 228, 92, .85); --orig-line: var(--pink); --mark-bg: var(--pink); }
.where-label { font-weight: 800; color: var(--blue); }

.inv-from { font-weight: 700; color: var(--violet); }
.inv-from b { color: var(--blue); font-weight: 850; }
.overlay--handoff .btn--line { --btn-bg: transparent; color: var(--paper); box-shadow: inset 0 0 0 3px var(--paper); }

/* Emblème et jeu d’icônes (19 octobre 2026) */
.emblem { --e-line: var(--blue); --e-glow: var(--pink); --e-glow-o: .95; }
.overlay--party .emblem { --e-line: var(--violet); --e-glow: var(--paper); --e-glow-o: 1; }
.icon-btn { --icon-line: var(--blue); --icon-fg: var(--blue); --icon-bg: var(--paper-hi); }
.icon-label { color: var(--blue); font-weight: 700; }
.icon-btn--card { --card-btn-bg: var(--blue); --card-btn-fg: var(--paper); }
.pill { color: var(--violet); font-weight: 700; background: var(--paper); box-shadow: inset 0 0 0 2px var(--violet); }
.foot-link { font-weight: 700; }
.deal-card { box-shadow: inset 0 0 0 2px var(--blue); background: var(--paper-hi); }
.deal-badge { color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
/* Écran d’attente : emblème et mots des icônes sur le fond bleu */
.overlay--handoff .emblem { --e-line: var(--paper); --e-glow: var(--pink); --e-glow-o: 1; }
.overlay--handoff .icon-label { color: var(--paper); }
/* Cloche activée, sur le fond bleu de l’attente : rose plein */
.overlay--handoff #wait-notif[aria-pressed="true"] > .ic { background: var(--pink); color: var(--paper); box-shadow: none; }