/* Kiff Kiff — ambiance « Classé X ».
   Un dossier d’agent secret : papier de rapport, machine à écrire, tampons rouges, mots caviardés.
   Ce qui s’écrit ici n’en sort pas ; rien n’est déclassifié sans vos deux signatures. */
:root {
  --paper: #F6F5F0;
  --paper-2: #ECEAE2;
  --paper-3: #DAD6CA;
  --kraft: #C9AE7C;
  --kraft-hi: #D6BE8F;
  --kraft-lo: #9C7F4D;
  --ink: #141414;
  --ink-2: #3D3B36;
  --red: #C8102E;
  --red-hi: #E5283F;

  --chili-color: #C8102E;
  --pill-bg: var(--paper);
  --pill-line: var(--ink);
  --pill-fg: var(--ink);
  --pill-on-bg: var(--ink);
  --pill-on-line: var(--ink);
  --pill-on-fg: var(--paper);
  --chili-on-pill: #FF5C6E;
  --call-color: var(--red);

  --f-display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --f-ui: "Courier Prime", "Courier New", monospace;

  --theme-color: #141414;
  --confetti: #C8102E, #141414, #F2EFE8, #C8102E, #3D3B36, #141414;
  --confetti-shapes: rect, rect, dot, rect, rect;
  --orig-hl: rgba(200, 16, 46, .14);
  --orig-line: var(--red);
  --mark-bg: rgba(200, 16, 46, .22);
  --reel-chili: #C8102E; --reel-chili-bg: rgba(200, 16, 46, .1); --reel-chili-line: rgba(200, 16, 46, .55); --reel-chili-glow: rgba(200, 16, 46, .5);
  --badge-bg: #C8102E;
}

/* La chemise cartonnée du dossier ; les pièces sont des feuilles blanches tapées à la machine */
body { background: var(--kraft); color: var(--ink); font-family: var(--f-ui); caret-color: var(--red); }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px dashed var(--red); outline-offset: 3px; }

/* Grain de papier de rapport */
.grain {
  display: block;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.42  0 0 0 0 0.36  0 0 0 .22 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ---------- En-tête ---------- */
.app { gap: 10px; padding-top: 16px; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); padding-bottom: 20px; }
.logo { font-family: var(--f-display); font-weight: 400; font-size: 26px; letter-spacing: .02em; text-transform: uppercase; }
.sticker {
  height: 40px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 14px;
}
.sticker--round { width: 40px; }
.sticker--pass { padding: 0 12px; }
.sticker:active { background: var(--paper-2); }

.hint { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.hint b { font-weight: 700; color: var(--ink); }
.hint .undo { font-weight: 700; color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

.sw-label { font-family: var(--f-display); font-weight: 400; font-size: 34px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: var(--ink); }
.sw-owner { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }

/* ---------- La pièce à conviction : les roues ---------- */
.press {
  position: relative;
  gap: 10px;
  padding: 14px 12px 12px;
  border-radius: 2px;
  background: var(--paper);
  box-shadow: 0 1px 0 var(--paper-3), 0 10px 22px rgba(60, 40, 10, .35);
  transform: rotate(-.4deg);
}
/* Le trombone qui tient la pièce */
.press::before {
  content: "";
  position: absolute;
  top: -24px; left: 22px;
  width: 16px; height: 40px;
  border: 3px solid #8E9299;
  border-radius: 10px;
  box-shadow: inset 0 0 0 3px transparent, 4px 0 0 -1px rgba(0, 0, 0, .12);
  background: linear-gradient(90deg, transparent 5px, #8E9299 5px 8px, transparent 8px) center 12px / 100% 22px no-repeat;
  z-index: 3;
  pointer-events: none;
}
.press-row { gap: 10px; }
.dir {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 50px;
  padding: 3px;
  border-radius: 2px;
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.dir::before {
  content: "";
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  background: var(--ink);
  transition: transform .35s cubic-bezier(.3, 1.2, .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; font-family: var(--f-ui); font-weight: 700; font-size: 18px; color: var(--ink); transition: color .3s; }
.dir button[aria-pressed="true"] { color: var(--paper); }
.dir.is-locked button[aria-pressed="false"] { opacity: .35; }

.sticker--dice { flex: none; width: 50px; height: 50px; padding: 0; border: 2px solid var(--ink); border-radius: 2px; background: var(--paper); color: var(--ink); }
.sticker--dice svg { width: 24px; height: 24px; }
.sticker--dice span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sticker--dice:active { transform: rotate(-8deg); }

/* Chaque roue : une bande de rapport, la ligne lue surlignée au marqueur noir */
.strips { gap: 8px; }
.reel { --item-h: 37px; border-radius: 2px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); transition: opacity .3s; }
.reel-strip, .reel-shade { inset: 2px; border-radius: 0; }
.reel-strip { background: linear-gradient(transparent calc(50% - var(--item-h) / 2), var(--ink) calc(50% - var(--item-h) / 2), var(--ink) calc(50% + var(--item-h) / 2), transparent calc(50% + var(--item-h) / 2)), var(--paper); }
/* Le tambour : la feuille s’enroule en haut et en bas */
.reel-shade {
  background: linear-gradient(rgba(60, 52, 36, .5), rgba(60, 52, 36, .14) 22%, rgba(60, 52, 36, 0) 38%, rgba(60, 52, 36, 0) 62%, rgba(60, 52, 36, .14) 78%, rgba(60, 52, 36, .5));
  box-shadow: inset 0 8px 8px -6px rgba(0, 0, 0, .45), inset 0 -8px 8px -6px rgba(0, 0, 0, .45);
}
.reel-item { font-family: var(--f-ui); font-weight: 400; font-size: 18px; color: var(--ink-2); }
.reel-item.is-center { font-weight: 700; color: var(--paper); }
.reel-item.is-long { font-size: 16px; }
.reel-item.is-xlong { font-size: 14.5px; letter-spacing: -.02em; }
.reel-item.is-xxlong { font-size: 13px; letter-spacing: -.03em; }
.reel-item.is-placeholder { color: var(--red); font-weight: 700; }
.reel-item.is-center.is-placeholder { color: #FF8A98; }
.reel.is-locked { opacity: .4; }
/* Tampon « changé » */
.stamp {
  right: -6px; top: -14px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 3px solid var(--red);
  border-radius: 3px;
  background: var(--paper);
  color: var(--red);
  transform: rotate(-10deg) scale(0);
}
.reel.is-changed .stamp, .press-row.is-changed > .stamp--dir { transform: rotate(-10deg) scale(1); }
.stamp .stamp-txt { display: none; }
.stamp svg { width: 22px; height: 22px; }

/* ---------- Boutons ---------- */
.btn { border-radius: 2px; background: var(--ink); color: var(--paper); font-family: var(--f-display); font-weight: 400; font-size: 21px; letter-spacing: .05em; text-transform: uppercase; }
.btn:active { transform: translateY(1px); background: #2A2A2A; }
.btn .ic { stroke-width: 2; }
.btn--paper { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.link-btn { font-weight: 700; font-size: 15px; color: var(--ink); text-decoration-color: var(--red); text-decoration-thickness: 2px; }

/* ---------- Écrans superposés ---------- */
.overlay { background: var(--kraft); color: var(--ink); padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.sheet { align-items: stretch; text-align: left; }

/* Accueil : le dossier, son tampon */
/* Chaque étape de l’accueil est une feuille du dossier, posée de travers sur la chemise */
.step > .sheet, #ov-invited .step > .sheet {
  position: relative;
  box-sizing: border-box;
  padding: 26px 20px 22px;
  background: var(--paper);
  border-radius: 2px;
  box-shadow: 0 1px 0 var(--paper-3), 0 14px 30px rgba(60, 40, 10, .35);
  transform: rotate(-.6deg);
}
.welcome { position: relative; animation: thud .9s .35s both; }
@keyframes thud { 0%, 55% { transform: rotate(-.6deg); } 62% { transform: rotate(-.6deg) translateY(3px); } 72% { transform: rotate(-.6deg) translateY(-1px); } 100% { transform: rotate(-.6deg); } }
.welcome::before {
  content: "CLASSÉ X";
  position: absolute;
  top: 132px; right: 2px;
  padding: 2px 10px;
  border: 3px solid var(--red);
  border-radius: 3px;
  font-family: var(--f-display);
  font-size: 22px;
  letter-spacing: .08em;
  color: var(--red);
  transform: rotate(11deg);
  opacity: .9;
  pointer-events: none;
  animation: stamp-slam .55s .3s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes stamp-slam { from { transform: scale(2.6) rotate(-4deg); opacity: 0; } 70% { opacity: .95; } to { transform: scale(1) rotate(11deg); opacity: .9; } }
#ov-start .welcome::after {
  content: "DOSSIER OUVERT À DEUX · NE PAS DIFFUSER";
  order: -1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink-2);
}
.poster-title { align-items: flex-start; font-family: var(--f-display); font-weight: 400; font-size: clamp(70px, 23vw, 92px); line-height: .9; letter-spacing: .01em; text-transform: uppercase; }
.sheet h2.poster-title, .sheet h2.party-title, .sheet h2.step-title, .sheet h2.handoff-title, .sheet h2.pass-title, .sheet h2.edit-label { font-weight: 400; }
.poster-sub { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.welcome .emblem { align-self: flex-start; margin-left: -4px; }
.welcome .age-note, .welcome .games-title { text-align: center; }
.inv-from { font-size: 17px; }
.inv-from b, .overlay--invited .rules li b { color: var(--red); }

.age-note { color: var(--ink-2); opacity: 1; font-size: 12.5px; }

.start-form { text-align: left; }
.start-form label, .piment-row-label, .where-label { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.start-form input, .sheet--edit input {
  padding: 0 4px;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 700 20px var(--f-ui);
}
.start-form input::placeholder, .sheet--edit input::placeholder { color: var(--ink-2); opacity: .55; }
.start-form input:focus, .sheet--edit input:focus { border-bottom-color: var(--red); }
.where-btn { border-radius: 2px; }
.piment-choice { border-radius: 2px; }
.step-title { font-family: var(--f-display); font-size: 40px; letter-spacing: .02em; text-transform: uppercase; text-align: left; }
.step-text { text-align: left; color: var(--ink-2); }
.rules li::before { border-radius: 2px; font-family: var(--f-ui); }
.rules li b { color: var(--ink); }
.skin-swatch { box-shadow: 0 0 0 2px var(--ink); border-radius: 2px; }
.skin-opt input:checked + .skin-swatch { outline-color: var(--red); }
.skin-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.skin-opt input:checked ~ .skin-name { color: var(--red); }

/* Passage de main : le dossier change de bureau, fond noir */
.overlay--handoff, .overlay--pass { background: var(--ink); color: var(--paper); }
.overlay--handoff .link-btn, .overlay--pass .link-btn { color: var(--paper); }
.overlay--handoff .btn, .overlay--pass .btn { background: var(--paper); color: var(--ink); }
.overlay--handoff .btn--line, .overlay--pass .btn--line { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 2px var(--paper); }
.handoff-title { font-family: var(--f-display); font-size: clamp(36px, 11vw, 54px); line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.handoff-kicker { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red-hi); }
.handoff-text { font-size: 16px; line-height: 1.5; }
.overlay--handoff .btn { margin-top: 12px; }
.offer-sentence, .wait-sentence {
  padding: 16px 16px;
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: clamp(18px, 5.2vw, 21px);
  line-height: 1.45;
}
.pass-title { font-family: var(--f-display); font-size: clamp(60px, 19vw, 90px); letter-spacing: .02em; text-transform: uppercase; }
.pass-text { font-size: 16px; }
.overlay--handoff .emblem, .overlay--pass .emblem { --e-line: var(--paper); }

.overlay--edit { background: rgba(20, 20, 20, .72); padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
.sheet--edit { padding: 22px 20px 18px; text-align: left; border-radius: 2px; background: var(--paper); box-shadow: 0 0 0 2px var(--ink), 0 24px 50px rgba(0, 0, 0, .5); }
.edit-label { font-family: var(--f-display); font-size: 30px; letter-spacing: .03em; text-transform: uppercase; }
.edit-preview { font-size: 15px; color: var(--ink-2); }
.edit-preview mark { background: var(--mark-bg); color: var(--ink); padding: 0 3px; }
.edit-hint { font-size: 13.5px; color: var(--ink-2); }

/* Célébration : déclassifié */
.overlay--party { background: var(--ink); color: var(--paper); }
.overlay--party .sheet { align-items: center; text-align: center; }
.overlay--party .link-btn { color: var(--paper); }
.party-title { font-family: var(--f-display); font-size: clamp(54px, 17vw, 82px); line-height: .95; letter-spacing: .02em; text-transform: uppercase; animation: stampin .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes stampin { from { transform: scale(1.8) rotate(-8deg); opacity: 0; } to { transform: rotate(-3deg); opacity: 1; } }
.party-text { font-size: 15px; font-weight: 700; letter-spacing: .04em; color: #D9D4C8; }
.party-sentence {
  padding: 22px 18px;
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: clamp(18px, 5.4vw, 22px);
  line-height: 1.45;
  box-shadow: inset 0 0 0 2px var(--ink);
}
.overlay--party .btn { margin-top: 10px; background: var(--red); color: var(--paper); }
.overlay--party .pill { color: var(--paper); background: transparent; box-shadow: inset 0 0 0 2px var(--paper); letter-spacing: -.02em; }
.overlay--party .foot-link { color: var(--paper); }
.overlay--party .emblem { --e-line: var(--paper); --e-glow: var(--red); --e-glow-o: 1; }

/* Piment */
.piment-name { font-family: var(--f-ui); font-weight: 700; font-size: 16px; }
.piment-error { color: var(--red); }

/* Emblème et icônes */
.emblem { --e-line: var(--ink); --e-glow: var(--red); --e-glow-o: .95; width: 100px; }
.icon-btn { --icon-line: var(--ink); --icon-fg: var(--ink); --icon-bg: var(--paper); }
.icon-btn > .ic { border-radius: 2px; box-shadow: inset 0 0 0 2px var(--ink); }
.icon-btn--bare > .ic { box-shadow: none; }
.icon-label { color: var(--ink); font-weight: 700; }
.icon-btn--card { --card-btn-bg: var(--red); --card-btn-fg: var(--paper); }
.icon-btn--card > .ic { box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.pill { color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); border-radius: 2px; font-weight: 700; }
.foot-link { color: var(--ink); font-weight: 700; }
.step-back { color: var(--ink); }
.deal-card { border-radius: 2px; background: var(--paper-2); box-shadow: inset 0 0 0 2px var(--ink); }
.deal-card-title { font-family: var(--f-ui); font-weight: 700; }
.deal-badge { border-radius: 2px; color: var(--red); box-shadow: inset 0 0 0 2px var(--red); }
.kiffs-btn .ic { color: var(--red); }
.game, .games-open { border-radius: 2px; background: var(--paper-2); box-shadow: inset 0 0 0 2px var(--ink); }
.game.is-mine { background: var(--ink); color: var(--paper); box-shadow: none; }
.game.is-mine .game-x { color: var(--paper); }
.games-title { color: var(--ink); opacity: 1; letter-spacing: .12em; }
.badge { border-radius: 2px; }
.kiffs-item { border-radius: 2px; box-shadow: inset 0 0 0 2px var(--ink); background: var(--paper-2); }
.kiffs-text { font-family: var(--f-ui); }

/* Petits écrans */
@media (max-height: 720px) {
  .poster-title { font-size: clamp(60px, 19vw, 78px); }
}
@media (max-height: 660px) {
  .app { gap: 7px; padding-top: 12px; padding-bottom: 16px; }
  .logo { font-size: 22px; }
  .sw-label { font-size: 30px; }
  .press { padding: 10px; gap: 8px; }
  .reel { --item-h: 33px; min-height: 56px; }
  .reel-item { font-size: 16.5px; }
  .dir { height: 44px; }
  .dir button { font-size: 16.5px; }
  .sticker--dice { width: 44px; height: 44px; }
}

/* La pièce reçue se déclassifie : les bandes noires s’effacent ligne à ligne */
.offer-sentence, .wait-sentence { position: relative; overflow: hidden; }
#ov-offer:not([hidden]) .offer-sentence::after {
  content: "";
  position: absolute;
  inset: 16px 16px;
  background: repeating-linear-gradient(var(--ink) 0 1.15em, transparent 1.15em 1.45em);
  pointer-events: none;
  animation: declassify 1.1s .35s steps(12, end) forwards;
}
@keyframes declassify { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }

/* Kiff kiff : la pièce est tamponnée « déclassifié » */
.party-card::after {
  content: "DÉCLASSIFIÉ";
  position: absolute;
  right: 10px; bottom: -14px;
  padding: 2px 10px;
  border: 3px solid var(--red);
  border-radius: 3px;
  background: rgba(246, 245, 240, .85);
  font-family: var(--f-display);
  font-size: 22px;
  letter-spacing: .08em;
  color: var(--red);
  transform: rotate(-9deg);
  pointer-events: none;
  animation: stamp-slam2 .5s .6s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes stamp-slam2 { from { transform: scale(2.4) rotate(6deg); opacity: 0; } to { transform: scale(1) rotate(-9deg); opacity: 1; } }

/* Passage de main : la transmission se tape à la machine */
.handoff-kicker::after { content: "▌"; margin-left: 2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* Les cartes et listes sont des fiches blanches */
.game, .games-open, .deal-card, .kiffs-item { background: var(--paper); }
.sheet--edit { background: var(--paper); }
.icon-btn { --icon-bg: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  #ov-offer:not([hidden]) .offer-sentence::after { display: none; }
  .welcome, .welcome::before, .party-card::after { animation: none; }
}
/* Écran d’attente : mots des icônes sur le fond noir */
.overlay--handoff .icon-label { color: var(--paper); }
/* Cloche activée, sur le fond noir de l’attente : tampon rouge */
.overlay--handoff #wait-notif[aria-pressed="true"] > .ic, #ov-duo #duo-notif[aria-pressed="true"] > .ic { background: var(--red); color: var(--paper); box-shadow: none; }

.welcome-intro { text-align: left; }