/* Kiff Kiff — ambiance « Red Corner ».
   Un boudoir suranné : velours bordeaux, capitonné, moulures et dorures,
   lumière de bougies. Pimenté, mais chaleureux. */
:root {
  --chili-color: #FF3B55;
  --pill-bg: rgba(43, 4, 12, .45);
  --pill-line: var(--gold-lo);
  --pill-fg: var(--cream);
  --pill-on-bg: var(--foil);
  --pill-on-line: var(--gold-hi);
  --pill-on-fg: var(--velvet-lo);
  --chili-on-pill: #B3001E;
  --call-color: var(--gold-hi);
  --velvet: #6B0F22;
  --velvet-hi: #9C1A33;
  --velvet-lo: #2B040C;
  --wine: #43071A;
  --gold: #D9AE5B;
  --gold-hi: #F6DDA0;
  --gold-lo: #8C6424;
  --cream: #F7E9D3;
  --blush: #E9A6B0;
  --flame: #FFC56B;

  --foil: linear-gradient(100deg, #8C6424 0%, #F6DDA0 22%, #C9963F 40%, #FFF0C4 52%, #B8873A 68%, #F2D38C 84%, #8C6424 100%);

  /* Romain du roi : Baskervville (ANRT), cousine libre du caractère de Louis XIV, pour les roues et la phrase */
  --f-display: "Baskervville", "Baskerville", "Baskerville Old Face", Georgia, serif;
  --f-title: "Cinzel", "Trajan Pro", "Optima", Georgia, serif;
  --f-script: "Great Vibes", "Snell Roundhand", "Apple Chancery", cursive;
  --f-ui: "Jost", "Futura", "Century Gothic", "Trebuchet MS", sans-serif;

  --theme-color: #2B040C;
  --confetti: #D9AE5B, #F6DDA0, #E9A6B0, #C2213F, #F7E9D3, #D9AE5B;
  --confetti-shapes: petal, sparkle, petal, sparkle, sparkle, petal;

  --velvet-bg:
    radial-gradient(ellipse 90% 55% at 50% 12%, rgba(255, 176, 96, .24), transparent 62%),
    radial-gradient(ellipse 60% 40% at 92% 100%, rgba(255, 176, 96, .2), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .2) 0 3px, rgba(255, 255, 255, .03) 3px 5px, transparent 5px 14px),
    radial-gradient(ellipse 140% 100% at 50% 40%, var(--velvet-hi), var(--velvet) 46%, var(--velvet-lo) 100%);
}

body {
  background: var(--velvet-bg);
  background-color: var(--velvet-lo);
  color: var(--cream);
  font-family: var(--f-ui);
  caret-color: var(--gold-hi);
}
::selection { background: var(--gold); color: var(--velvet-lo); }
:focus-visible { outline: 1.5px solid var(--gold-hi); outline-offset: 4px; border-radius: 8px; }

/* Velours : grain doux */
.grain {
  display: block;
  opacity: .35;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 1 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

/* Cadre doré à moulures, lueur et bougies : au-dessus de tout, sans gêner le doigt */
.deco { z-index: 20; }
.deco-frame {
  display: block;
  position: absolute;
  top: max(7px, env(safe-area-inset-top, 0px));
  bottom: max(7px, env(safe-area-inset-bottom, 0px));
  left: max(7px, env(safe-area-inset-left, 0px));
  right: max(7px, env(safe-area-inset-right, 0px));
  border: 1.5px solid var(--gold);
  border-radius: 6px;
  box-shadow: inset 0 0 0 4px rgba(43, 4, 12, .55), inset 0 0 0 5px var(--gold-lo), 0 0 0 1px rgba(43, 4, 12, .6);
}
.deco-frame::before, .deco-frame::after {
  content: "";
  position: absolute;
  left: -6px; right: -6px;
  height: 48px;
}
.deco-frame::before { top: -6px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'><g transform=''><g fill='none' stroke='%23D9AE5B' stroke-linecap='round'><path d='M3 58 V22 C3 11 11 3 22 3 H58' stroke-width='1.6'/><path d='M10 50 V25 C10 16 16 10 25 10 H50' stroke-width='1'/><path d='M22 22 C30 14 40 16 38 24 C36 30 28 28 30 23' stroke-width='1.3'/><path d='M22 22 C14 30 16 40 24 38 C30 36 28 28 23 30' stroke-width='1.3'/></g><circle cx='22' cy='22' r='2.6' fill='%23F6DDA0'/><path d='M58 3 l4 -2.5 l4 2.5 l-4 2.5z M3 58 l-2.5 4 l2.5 4 l2.5 -4z' fill='%23D9AE5B'/></g></svg>") 0 0 / 48px 48px no-repeat, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'><g transform='translate(70 0) scale(-1 1)'><g fill='none' stroke='%23D9AE5B' stroke-linecap='round'><path d='M3 58 V22 C3 11 11 3 22 3 H58' stroke-width='1.6'/><path d='M10 50 V25 C10 16 16 10 25 10 H50' stroke-width='1'/><path d='M22 22 C30 14 40 16 38 24 C36 30 28 28 30 23' stroke-width='1.3'/><path d='M22 22 C14 30 16 40 24 38 C30 36 28 28 23 30' stroke-width='1.3'/></g><circle cx='22' cy='22' r='2.6' fill='%23F6DDA0'/><path d='M58 3 l4 -2.5 l4 2.5 l-4 2.5z M3 58 l-2.5 4 l2.5 4 l2.5 -4z' fill='%23D9AE5B'/></g></svg>") 100% 0 / 48px 48px no-repeat; }
.deco-frame::after { bottom: -6px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'><g transform='translate(0 70) scale(1 -1)'><g fill='none' stroke='%23D9AE5B' stroke-linecap='round'><path d='M3 58 V22 C3 11 11 3 22 3 H58' stroke-width='1.6'/><path d='M10 50 V25 C10 16 16 10 25 10 H50' stroke-width='1'/><path d='M22 22 C30 14 40 16 38 24 C36 30 28 28 30 23' stroke-width='1.3'/><path d='M22 22 C14 30 16 40 24 38 C30 36 28 28 23 30' stroke-width='1.3'/></g><circle cx='22' cy='22' r='2.6' fill='%23F6DDA0'/><path d='M58 3 l4 -2.5 l4 2.5 l-4 2.5z M3 58 l-2.5 4 l2.5 4 l2.5 -4z' fill='%23D9AE5B'/></g></svg>") 0 100% / 48px 48px no-repeat, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'><g transform='translate(70 70) scale(-1 -1)'><g fill='none' stroke='%23D9AE5B' stroke-linecap='round'><path d='M3 58 V22 C3 11 11 3 22 3 H58' stroke-width='1.6'/><path d='M10 50 V25 C10 16 16 10 25 10 H50' stroke-width='1'/><path d='M22 22 C30 14 40 16 38 24 C36 30 28 28 30 23' stroke-width='1.3'/><path d='M22 22 C14 30 16 40 24 38 C30 36 28 28 23 30' stroke-width='1.3'/></g><circle cx='22' cy='22' r='2.6' fill='%23F6DDA0'/><path d='M58 3 l4 -2.5 l4 2.5 l-4 2.5z M3 58 l-2.5 4 l2.5 4 l2.5 -4z' fill='%23D9AE5B'/></g></svg>") 100% 100% / 48px 48px no-repeat; }
.deco-glow {
  display: block;
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at calc(100% - 44px) calc(100% - 70px), rgba(255, 190, 110, .32), transparent 34%);
  mix-blend-mode: screen;
  animation: glow 3.2s ease-in-out infinite;
}
@keyframes glow { 0%, 100% { opacity: .85; } 30% { opacity: 1; } 55% { opacity: .7; } 80% { opacity: .95; } }
.deco-candles {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  position: absolute;
  right: max(18px, calc(env(safe-area-inset-right, 0px) + 12px));
  bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 10px));
  transform: scale(.82);
  transform-origin: right bottom;
}
body:has(#ov-start:not([hidden])) .deco-candles,
body:has(#ov-invited:not([hidden])) .deco-candles,
body:has(#ov-edit:not([hidden])) .deco-candles,
body:has(#ov-skins:not([hidden])) .deco-candles { display: none; }
.candle {
  position: relative;
  width: 11px;
  height: 30px;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(90deg, #C9B08F, #FFF6E6 40%, #EADBC4 70%, #B79C79);
  box-shadow: 0 0 10px rgba(255, 190, 110, .35);
}
.candle--tall { height: 40px; }
.candle--short { height: 21px; }
.candle::before { /* coulure */
  content: "";
  position: absolute;
  left: 2px; top: -1px;
  width: 4px; height: 9px;
  border-radius: 0 0 3px 3px;
  background: #FFF6E6;
}
.candle i {
  position: absolute;
  left: 50%; bottom: 100%;
  width: 9px; height: 17px;
  margin: 0 0 1px -4.5px;
  border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 72%, #FFFFFF 0 18%, #FFE7A3 34%, var(--flame) 58%, rgba(255, 120, 40, .6) 80%, transparent 100%);
  box-shadow: 0 0 14px 5px rgba(255, 180, 90, .45);
  transform-origin: 50% 100%;
  animation: flicker 1.8s ease-in-out infinite;
}
.candle:nth-child(2) i { animation-duration: 2.3s; animation-delay: -.6s; }
.candle:nth-child(3) i { animation-duration: 1.5s; animation-delay: -1.1s; }
@keyframes flicker {
  0%, 100% { transform: scale(1, 1) skewX(0); }
  20% { transform: scale(.92, 1.08) skewX(3deg); }
  45% { transform: scale(1.04, .94) skewX(-2deg); }
  70% { transform: scale(.96, 1.05) skewX(2deg); }
}
.is-pulse .candle i { animation: flare .9s ease-out; }
@keyframes flare { 30% { transform: scale(1.35, 1.5); box-shadow: 0 0 26px 10px rgba(255, 190, 100, .6); } }

/* Feuille d’or */
.logo .ink, .poster-title .ink, .party-title .ink, .handoff-title {
  background: var(--foil);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(43, 4, 12, .8)) drop-shadow(0 0 10px rgba(255, 190, 110, .25));
}

/* ---------- En-tête ---------- */
.app { gap: 9px; padding-top: 20px; padding-left: max(22px, env(safe-area-inset-left, 0px)); padding-right: max(22px, env(safe-area-inset-right, 0px)); padding-bottom: 22px; }
.logo { font-family: var(--f-title); font-weight: 800; font-size: 23px; letter-spacing: .05em; font-variant-ligatures: none; display: flex; flex-direction: column; align-items: flex-start; }
.sticker {
  height: 40px;
  border: 1.5px solid var(--gold);
  background: rgba(43, 4, 12, .45);
  color: var(--gold-hi);
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: .03em;
}
.sticker--round { width: 40px; border-radius: 50%; }
.sticker--pass { padding: 0 16px; border-radius: 999px; }
.sticker:active { background: rgba(217, 174, 91, .2); }

.hint { font-size: 14.5px; font-weight: 300; line-height: 1.42; color: var(--cream); }
.hint b { font-weight: 600; color: var(--gold-hi); }
.hint .undo { font-weight: 500; color: var(--blush); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }

/* ---------- Switches : bouton doré sur velours ---------- */
.track {
  background: linear-gradient(var(--velvet-lo), var(--wine));
  box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 4px var(--velvet-lo), 0 0 0 5px var(--gold-lo), inset 0 3px 6px rgba(0, 0, 0, .6);
  transition: background .4s, box-shadow .4s;
}
.knob {
  top: 5px; left: 5px;
  width: 32px; height: 32px;
  background: radial-gradient(circle at 34% 28%, #FFF8E0 0 8%, var(--gold-hi) 22%, var(--gold) 52%, var(--gold-lo) 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .55);
}
.knob::after { background: var(--velvet); }
.switch[aria-checked="true"] .track {
  background: linear-gradient(#C33A55, #7E1430);
  box-shadow: 0 0 0 1.5px var(--gold-hi), 0 0 0 4px var(--velvet-lo), 0 0 0 5px var(--gold-lo), inset 0 3px 6px rgba(0, 0, 0, .35), 0 0 22px rgba(233, 166, 176, .45);
}
.sw-label { font-family: var(--f-script); font-size: 38px; line-height: 1.05; color: var(--gold-hi); padding-right: 8px; }
.switch[aria-checked="true"] .sw-label { color: #FFE9EE; text-shadow: 0 0 14px rgba(233, 166, 176, .8); }
.sw-owner { font-size: 12.5px; font-weight: 400; letter-spacing: .06em; color: var(--blush); }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.08); } 28% { transform: scale(1); } 42% { transform: scale(1.06); } }

/* ---------- L’écrin capitonné ---------- */
.press {
  gap: 10px;
  padding: 14px 12px 14px;
  border-radius: 20px;
  background:
    radial-gradient(circle, rgba(255, 220, 160, .55) 0 1.6px, rgba(0, 0, 0, .55) 2.6px, transparent 4px) 0 0 / 30px 30px,
    radial-gradient(circle, rgba(255, 220, 160, .55) 0 1.6px, rgba(0, 0, 0, .55) 2.6px, transparent 4px) 15px 15px / 30px 30px,
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 21.2px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 21.2px),
    radial-gradient(ellipse at 50% 30%, #7E1430, var(--wine) 75%);
  box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 5px var(--velvet-lo), 0 0 0 6.5px var(--gold-lo), 0 0 0 8px var(--gold), 0 18px 30px rgba(0, 0, 0, .5);
}

/* que tu me / de te : grande plaque de velours, curseur en feuille d’or qui glisse */
.press-row { gap: 10px; }
.dir {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 54px;
  padding: 4px;
  border-radius: 999px;
  background: linear-gradient(var(--velvet-lo), var(--wine));
  box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 4px var(--velvet-lo), 0 0 0 5px var(--gold-lo), inset 0 3px 8px rgba(0, 0, 0, .65);
}
.dir::before {
  content: "";
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--foil);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(0, 0, 0, .18);
  transition: transform .5s cubic-bezier(.3, 1.35, .45, 1);
}
.dir[data-dir="te"]::before { transform: translateX(100%); }
.dir-or { display: none; }
.dir button {
  z-index: 1;
  min-height: 0;
  padding: 0 4px 2px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0;
  color: var(--cream);
  opacity: .72;
  transition: color .35s, opacity .35s;
}
.dir button[aria-pressed="true"] { opacity: 1; color: var(--velvet-lo); }
.dir.is-locked button[aria-pressed="false"] { opacity: .28; }

/* Hasard : médaillon doré, dé seul */
.sticker--dice {
  flex: none;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #FFF8E0 0 6%, var(--gold-hi) 22%, var(--gold) 55%, var(--gold-lo) 100%);
  color: var(--velvet-lo);
  box-shadow: 0 0 0 1.5px var(--gold-hi), 0 0 0 4px var(--velvet-lo), 0 0 0 5px var(--gold-lo), 0 4px 10px rgba(0, 0, 0, .5);
}
.sticker--dice svg { width: 26px; height: 26px; }
.sticker--dice span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sticker--dice:active { transform: translateY(1px) rotate(-12deg); }

/* Rouleaux : cadres dorés, tambours de velours satiné */
.strips { gap: 10px; }
.reel {
  --item-h: 37px;
  border-radius: 10px;
  background: linear-gradient(#8C6424, #F6DDA0 18%, #B8873A 36%, #FFF0C4 50%, #A97C30 66%, #E9C77E 84%, #8C6424);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
  transition: opacity .35s, filter .35s;
}
.reel-strip, .reel-shade { inset: 5px; border-radius: 6px; }
.reel-strip {
  background: linear-gradient(var(--velvet-lo), #5A0C1E 30%, #7E1430 50%, #5A0C1E 70%, var(--velvet-lo));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5);
}
.reel-shade {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='12'><path d='M0 6 L5 0 L10 6 L5 12Z' fill='%23F6DDA0'/></svg>") 5px 50% / 8px 10px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='12'><path d='M0 6 L5 0 L10 6 L5 12Z' fill='%23F6DDA0'/></svg>") calc(100% - 5px) 50% / 8px 10px no-repeat,
    linear-gradient(transparent calc(50% - var(--item-h) / 2 - .5px), rgba(217, 174, 91, .55) calc(50% - var(--item-h) / 2 - .5px), rgba(217, 174, 91, .55) calc(50% - var(--item-h) / 2 + .5px), transparent calc(50% - var(--item-h) / 2 + .5px), transparent calc(50% + var(--item-h) / 2 - .5px), rgba(217, 174, 91, .55) calc(50% + var(--item-h) / 2 - .5px), rgba(217, 174, 91, .55) calc(50% + var(--item-h) / 2 + .5px), transparent calc(50% + var(--item-h) / 2 + .5px)),
    linear-gradient(rgba(10, 0, 3, .85), rgba(10, 0, 3, .3) 24%, rgba(10, 0, 3, 0) 40%, rgba(255, 210, 190, .07) 50%, rgba(10, 0, 3, 0) 60%, rgba(10, 0, 3, .3) 76%, rgba(10, 0, 3, .85));
}
.reel-item {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 20px;
  color: var(--cream);
}
.reel-item.is-center { font-weight: 700; color: var(--gold-hi); text-shadow: 0 0 12px rgba(255, 190, 110, .35); }
.reel-item.is-long { font-size: 17.5px; }
.reel-item.is-xlong { font-size: 15.5px; letter-spacing: -.01em; }
.reel-item.is-xxlong { font-size: 13.5px; letter-spacing: -.015em; }
.reel-item.is-placeholder { color: var(--blush); font-weight: 400; }

.reel.is-locked { filter: brightness(.5) saturate(.6); opacity: .7; }
/* Sceau de cire « changé » */
.stamp {
  right: -10px; top: -16px;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50% 46% 52% 48% / 48% 52% 46% 50%;
  background: radial-gradient(circle at 38% 32%, #E0546B 0 10%, #B3203A 40%, #6E0B1E 100%);
  box-shadow: 0 0 0 3px rgba(150, 18, 40, .9), 0 3px 6px rgba(0, 0, 0, .5), inset 0 0 0 6px rgba(0, 0, 0, .12);
  color: var(--gold-hi);
  font-family: var(--f-script);
  font-size: 17px;
  line-height: 1;
  transform: rotate(-12deg) scale(0);
}
.reel.is-changed .stamp { transform: rotate(-12deg) scale(1); }

/* ---------- Boutons ---------- */
.btn {
  border-radius: 999px;
  background: var(--foil);
  color: var(--velvet-lo);
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .05em;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(0, 0, 0, .2);
}
.btn:active { transform: translateY(2px); }
.btn--paper { background: rgba(43, 4, 12, .55); color: var(--gold-hi); box-shadow: inset 0 0 0 1.5px var(--gold), 0 6px 18px rgba(0, 0, 0, .4); }
.btn--line { background: transparent; color: var(--gold-hi); box-shadow: inset 0 0 0 1.5px var(--gold); }
.link-btn { font-weight: 400; font-size: 15px; color: var(--blush); text-decoration-color: var(--gold); }

/* ---------- Écrans superposés ---------- */
.overlay {
  background: var(--velvet-bg);
  background-color: var(--velvet-lo);
  color: var(--cream);
  padding-left: max(30px, env(safe-area-inset-left, 0px));
  padding-right: max(30px, env(safe-area-inset-right, 0px));
  padding-top: max(36px, env(safe-area-inset-top, 0px));
  padding-bottom: max(70px, env(safe-area-inset-bottom, 0px));
  animation: curtain .6s cubic-bezier(.2, .8, .2, 1);
}
@keyframes curtain { from { opacity: 0; filter: brightness(.3); } }
.sheet { align-items: center; text-align: center; }

.poster-title { align-items: center; font-family: var(--f-title); font-weight: 800; font-size: clamp(58px, 20vw, 104px); line-height: .98; letter-spacing: .06em; font-variant-ligatures: none; }
.poster-sub { font-family: var(--f-script); font-size: 30px; line-height: 1.1; color: var(--blush); }
.poster-rules { font-size: 15.5px; font-weight: 300; line-height: 1.55; max-width: 32ch; align-self: center; }
.start-form { text-align: left; }
.start-form label, .skins legend, .piment-row-label { font-size: 13px; font-weight: 500; letter-spacing: .08em; color: var(--gold); }
.start-form input, .sheet--edit input {
  padding: 0 2px;
  border: 0;
  border-bottom: 1.5px solid var(--gold);
  border-radius: 0;
  background: transparent;
  color: var(--cream);
  font: 500 22px var(--f-display);
}
.start-form input::placeholder, .sheet--edit input::placeholder { color: var(--blush); opacity: .55; }
.start-form input:focus, .sheet--edit input:focus { border-bottom-color: var(--gold-hi); box-shadow: 0 1px 0 var(--gold-hi); }
.skin-swatch { box-shadow: 0 0 0 1px var(--gold-lo); }
.skin-opt input:checked + .skin-swatch { outline-color: var(--gold-hi); }
.skin-name { font-size: 13px; color: var(--cream); }
.skin-opt input:checked ~ .skin-name { color: var(--gold-hi); }

.overlay--handoff { background: radial-gradient(ellipse 80% 50% at 50% 40%, rgba(255, 176, 96, .2), transparent 70%), linear-gradient(var(--wine), var(--velvet-lo)); }
.handoff-title { font-family: var(--f-title); font-weight: 700; font-size: clamp(36px, 11vw, 58px); line-height: 1.08; letter-spacing: .04em; }
.handoff-kicker { font-family: var(--f-script); font-size: 30px; color: var(--blush); }
.handoff-text { font-size: 16.5px; font-weight: 300; line-height: 1.55; max-width: 28ch; }
.overlay--handoff .btn { margin-top: 14px; }

.overlay--pass { background: linear-gradient(var(--velvet-lo), #160106); }
.pass-title { font-family: var(--f-script); font-size: clamp(64px, 20vw, 96px); line-height: 1.1; color: var(--gold-hi); }
.pass-text { font-size: 17px; font-weight: 300; }

.overlay--edit { background: rgba(20, 1, 6, .78); padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
.sheet--edit {
  padding: 24px 22px 18px;
  text-align: left;
  border-radius: 6px;
  background: linear-gradient(var(--wine), var(--velvet-lo));
  box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 5px var(--velvet-lo), 0 0 0 6px var(--gold-lo), 0 20px 40px rgba(0, 0, 0, .6);
}
.edit-label { font-family: var(--f-script); font-size: 36px; color: var(--gold-hi); }
.edit-preview { font-size: 15px; font-weight: 300; }
.edit-preview mark { background: rgba(233, 166, 176, .3); color: var(--gold-hi); padding: 0 3px; border-radius: 3px; }
.edit-hint { font-size: 13.5px; font-weight: 300; color: var(--blush); }

.overlay--party { background: radial-gradient(circle at 50% 38%, rgba(255, 196, 120, .5), rgba(156, 26, 51, .2) 40%, transparent 70%), var(--velvet-bg); background-color: var(--velvet-lo); }
.party-title { font-family: var(--f-title); font-weight: 800; font-size: clamp(44px, 14vw, 76px); line-height: 1; letter-spacing: .05em; font-variant-ligatures: none; animation: unveil 1.1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes unveil { from { letter-spacing: .25em; opacity: 0; filter: blur(8px); } }
.party-sentence {
  padding: 18px 22px;
  border-radius: 4px;
  background: linear-gradient(#FBF1E1, var(--cream));
  color: var(--wine);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(19px, 5.6vw, 24px);
  line-height: 1.3;
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 5px #FBF1E1, inset 0 0 0 6px var(--gold-lo), 0 18px 36px rgba(0, 0, 0, .5);
  animation: unveil 1.1s .25s cubic-bezier(.2, .8, .2, 1) both;
}
.party-text { font-size: 15.5px; font-weight: 400; color: var(--cream); text-shadow: 0 1px 6px var(--velvet-lo); }
.overlay--party .btn { margin-top: 10px; }

/* Petits écrans */
@media (max-height: 720px) {
  .poster-title { font-size: clamp(48px, 16vw, 84px); }
  .poster-neon { font-size: 38px; }
  .poster-event { font-size: 12px; }
  .poster-sub { font-size: 26px; }
}
@media (max-height: 660px) {
  .app { gap: 6px; padding-top: 14px; padding-bottom: 18px; }
  .logo { font-size: 21px; }
  .logo-sub { font-size: 18px; }
  .poster-event { display: none; }
  .hint { font-size: 13.5px; }
  .sw-label { font-size: 34px; }
  .track { width: 66px; height: 38px; }
  .knob { width: 28px; height: 28px; }
  .switch[aria-checked="true"] .knob { transform: translateX(28px); }
  .press { padding: 10px; gap: 8px; }
  .strips { gap: 8px; }
  .reel { --item-h: 33px; min-height: 56px; }
  .reel-item { font-size: 19px; }
  .reel-item.is-long { font-size: 16px; }
  .reel-item.is-xlong { font-size: 14px; }
  .reel-item.is-xxlong { font-size: 12.5px; }
  .dir { height: 48px; }
  .dir button { font-size: 20px; }
  .sticker--dice { width: 48px; height: 48px; }
}

/* Piment */
.piment-name { font-family: var(--f-display); font-weight: 700; font-size: 15.5px; }
.piment-tdesc { font-weight: 300; }
.piment-row { border-radius: 999px; padding: 6px 18px; }
.piment-row-cta { font-weight: 400; color: var(--gold-hi); text-decoration-color: var(--gold); }
.piment-toggle input:checked + .piment-toggle-body .pgroup { background: var(--velvet-lo); }
.piment-error { color: var(--blush); }
.piment-btn .chili.is-on { filter: drop-shadow(0 0 4px rgba(255, 59, 85, .8)); }

/* ---------- Le Red Corner du Nostra, soirée Décadanse ---------- */
.logo-sub {
  display: block;
  align-self: flex-end;
  margin: -3px -4px 0 0;
  font-family: var(--f-script);
  font-weight: 400;
  font-size: 21px;
  letter-spacing: 0;
  line-height: .9;
  color: var(--blush);
  text-shadow: 0 0 10px rgba(255, 59, 85, .55);
}
/* Enseigne au néon rouge */
.poster-neon {
  display: block;
  margin: 0 0 -6px;
  font-family: var(--f-script);
  font-size: 48px;
  line-height: 1.1;
  color: #FFE3E8;
  text-shadow: 0 0 3px #FFB3C0, 0 0 9px #FF2A4A, 0 0 18px #FF0033, 0 0 34px #D1002A, 0 0 60px rgba(209, 0, 42, .7);
  transform: rotate(-4deg);
  animation: neon 6s linear infinite;
}
@keyframes neon {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: .55; text-shadow: 0 0 2px #FFB3C0, 0 0 6px #FF2A4A; }
}
.poster-venue {
  display: block;
  align-self: flex-end;
  margin: -.12em 4% 0 0;
  font-family: var(--f-script);
  font-weight: 400;
  font-size: .38em;
  letter-spacing: 0;
  line-height: 1;
  color: var(--gold-hi);
  text-shadow: 0 2px 0 rgba(43, 4, 12, .8);
}
.poster-event {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  margin-top: 2px;
  font-family: var(--f-title);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .28em;
  color: var(--gold);
}
.poster-event::before, .poster-event::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.poster-event::after { background: linear-gradient(90deg, var(--gold), transparent); }
.party-venue { display: block; margin-top: -10px; font-family: var(--f-script); font-size: 28px; line-height: 1.1; color: var(--blush); text-shadow: 0 0 12px rgba(255, 59, 85, .6); }
/* Reflets de boule à facettes qui glissent sur le velours */
.deco-ball {
  display: block;
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  opacity: .55;
  background:
    radial-gradient(circle, rgba(255, 240, 225, .7) 0 1.4px, transparent 2.4px) 0 0 / 97px 131px,
    radial-gradient(circle, rgba(255, 180, 195, .55) 0 2px, transparent 3.2px) 40px 60px / 149px 173px,
    radial-gradient(circle, rgba(255, 220, 160, .5) 0 1.2px, transparent 2px) 70px 20px / 61px 89px;
  animation: facettes 38s linear infinite;
}
@keyframes facettes { to { background-position: 97px 131px, -109px 233px, 131px 198px; } }

/* Accueil : « Kiff Kiff » sur une ligne, l’enseigne au néon au-dessus */
.poster-title { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: .28em; font-size: clamp(44px, 17vw, 74px); line-height: 1; }
.poster-venue { flex-basis: 100%; text-align: right; margin: -.05em 6% 0 0; font-size: .5em; }
@media (max-height: 720px) {
  .poster-title { font-size: clamp(40px, 14vw, 60px); }
}

/* Estampille piment */
:root { --reel-chili: #FF4D63; --reel-chili-bg: rgba(255, 59, 85, .16); --reel-chili-line: rgba(255, 77, 99, .7); --reel-chili-glow: rgba(255, 59, 85, .9); }

/* Accueil en écrans, tour de jeu par modales */
.step-title { font-family: var(--f-script); font-size: 48px; font-weight: 400; color: var(--gold-hi); }
.rules li b { color: var(--gold-hi); font-weight: 500; }
.actions { padding-right: 44px; }
body:has(#ov-one:not([hidden])) .deco-candles,
body:has(#ov-note:not([hidden])) .deco-candles,
body:has(#ov-duo:not([hidden])) .deco-candles,
body:has(#ov-piment:not([hidden])) .deco-candles { display: none; }
:root { --orig-hl: rgba(246, 221, 160, .38); --orig-line: var(--gold-hi); --mark-bg: rgba(233, 166, 176, .55); }
.stamp .stamp-txt { display: none; }
.stamp svg { width: 26px; height: 26px; }
.press-row.is-changed > .stamp--dir { transform: rotate(-12deg) scale(1); }
.where-label { font-size: 13px; font-weight: 500; letter-spacing: .08em; color: var(--gold); }
.overlay--party .party-foot { padding-bottom: 44px; }

.inv-from { color: var(--cream); font-size: 17px; }
.inv-from b, .overlay--invited .rules li b { color: var(--gold-hi); font-weight: 500; }

/* Emblème néon sans mot, jeu d’icônes (19 octobre 2026) */
.emblem { --e-line: #FFE3EC; --e-glow: #FF3D7F; --e-glow-o: .55; --e-dash: 250 9 400; width: 128px;
  filter: drop-shadow(0 0 3px #FF3D7F) drop-shadow(0 0 9px #FF3D7F) drop-shadow(0 0 22px rgba(255, 61, 127, .75)); animation: neon-buzz 5s infinite; }
@keyframes neon-buzz { 0%, 46%, 48%, 100% { opacity: 1; } 47% { opacity: .55; } 72% { opacity: .85; } 73% { opacity: 1; } }
.emblem--party { --e-dash: none; width: 140px; animation: none; }
.icon-btn { --icon-line: var(--gold); --icon-fg: var(--gold-hi); --icon-bg: rgba(43, 4, 12, .45); }
.icon-label { color: var(--cream); }
.icon-btn--card { --card-btn-bg: var(--foil); --card-btn-fg: var(--velvet-lo); }
.pill { color: var(--cream); background: rgba(43, 4, 12, .4); box-shadow: inset 0 0 0 1px var(--gold); }
.pill .ic { color: var(--gold-hi); }
.foot-link, .step-back { color: var(--gold-hi); }
.deal-card { background: rgba(30, 2, 8, .38); box-shadow: inset 0 0 0 1px rgba(217, 174, 91, .55); }
.deal-badge { color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--gold); }
.deal-card-title { font-family: var(--f-ui); color: var(--cream); }
.kiffs-btn .ic { color: #FF7AA2; }