/* Beer Pong Online - page de mise a jour (teaser moteur graphique 2.0)
 * Autonome : aucune dependance au reste du site. Polices systeme uniquement.
 * Version CSS seule (sans WebGL) = .card-fb ; quand WebGL tourne, html.fx cache .card-fb
 * et le canvas #fx dessine la carte a l'emplacement de .stage.
 */

:root {
  --neon: hsl(355, 100%, 58%);
  --neon-a55: hsla(355, 100%, 58%, .55);
  --neon-a25: hsla(355, 100%, 58%, .25);
  --gold: #ffc83c;
  --gold-hi: #ffe9a6;
  --ink: #f6f1ff;
  --muted: rgba(246, 241, 255, .6);
  --faint: rgba(246, 241, 255, .42);

  /* Largeur de carte : ~55 % de la hauteur de l'ecran (ratio 5:7), bornee en largeur. */
  --cw: min(calc(55vh * 5 / 7), 72vw, 360px);
  --ch: calc(var(--cw) * 1.4);
}
@supports (height: 1dvh) {
  :root { --cw: min(calc(55dvh * 5 / 7), 72vw, 360px); }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  margin: 0;
  background: #05020a;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: #05020a;
  overflow-x: hidden;
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation; /* pas de zoom double-tap (plinko / boutons) */
}

/* ---------- Fond + canvas ---------- */

.bg {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 62% at 50% 40%, #190a30 0%, #0b0419 55%, #030108 100%);
}

#fx {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}
html.fx #fx { opacity: 1; }

/* ---------- Mise en page ---------- */

.page {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding:
    calc(env(safe-area-inset-top, 0px) + 12px)
    calc(env(safe-area-inset-right, 0px) + 16px)
    calc(env(safe-area-inset-bottom, 0px) + 16px)
    calc(env(safe-area-inset-left, 0px) + 16px);
}
@supports (height: 1dvh) {
  .page { min-height: 100dvh; }
}

.stage {
  position: relative;
  flex: none;
  width: var(--cw);
  height: var(--ch);
  margin: 4px 0 18px;
  touch-action: none; /* glisser sur la carte = la faire pencher, sans scroller */
  -webkit-tap-highlight-color: transparent;
}

.copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 460px;
  transition: opacity .3s ease, transform .3s ease;
}

.title {
  margin: 0;
  font-size: clamp(1.3rem, 6.2vw, 1.9rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .01em;
  text-shadow: 0 0 18px hsla(355, 100%, 58%, .45), 0 2px 0 rgba(0, 0, 0, .4);
}

.subtitle {
  margin: .5em 0 0;
  font-size: clamp(.88rem, 3.7vw, 1.05rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--gold-hi);
}
.subtitle .v2 { font-weight: 800; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .subtitle {
    background: linear-gradient(90deg, #ffd777, #fff3cf 50%, #ffc83c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.teaser {
  margin: .95em 0 0;
  min-height: 1.5em;
  font-size: clamp(.92rem, 3.8vw, 1.08rem);
  font-style: italic;
  line-height: 1.4;
  color: #d8c8ff;
  transition: opacity .45s ease, transform .45s ease, filter .45s ease;
}
.teaser.out {
  opacity: 0;
  transform: translateY(6px);
  filter: blur(2px);
}

/* Petit shimmer d'attente (pas un vrai pourcentage) */
.wait {
  position: relative;
  width: min(180px, 52vw);
  height: 4px;
  margin: 16px 0 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}
.wait::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--neon) 35%, var(--gold-hi) 70%, transparent);
  animation: shimmer 1.9s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

.status {
  margin: 0;
  min-height: 1.3em;
  font-size: .78rem;
  line-height: 1.3;
  color: var(--muted);
}

.retry {
  margin: 2px 0 0;
  padding: 12px 18px;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--gold);
  font: inherit;
  font-size: .85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 200, 60, .45);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.retry:hover { color: var(--gold-hi); }
.retry:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.retry[disabled] { opacity: .5; cursor: default; }

.sign {
  margin: 2px 0 0;
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--faint);
}
.sign__heart {
  display: inline-block;
  color: var(--neon);
  animation: beat 2.4s ease-in-out infinite;
}
@keyframes beat {
  0%, 100% { transform: scale(1); }
  12%      { transform: scale(1.25); }
  24%      { transform: scale(1); }
}

/* ---------- Plinko teasing (easter egg) — sous le texte ---------- */

.plinko {
  margin: 14px 0 4px;
  width: min(320px, 100%);
  padding: 10px 10px 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 59, 48, .12);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.plinko__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.plinko__hint {
  margin: 0;
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: left;
}
.plinko__score {
  flex: none;
  font-size: .85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--gold-hi);
  text-shadow: 0 0 10px rgba(255, 200, 60, .35);
}
.plinko__c {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 200;
  border-radius: 10px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 59, 48, .14), transparent 70%),
    linear-gradient(180deg, #12081c 0%, #08040e 100%);
  touch-action: manipulation;
}
.plinko__drop {
  display: block;
  width: 100%;
  margin-top: 8px;
  min-height: 42px;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff4d3d, #c81414);
  color: #fff;
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 4px 14px rgba(200, 20, 20, .35);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.plinko__drop:active { transform: translateY(1px); }
.plinko__drop:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.plinko__drop[disabled] { opacity: .45; cursor: default; }
html.is-ready .plinko { opacity: .35; pointer-events: none; }
@media (orientation: landscape) and (max-height: 520px) {
  .plinko { margin-top: 8px; padding: 6px; }
  .plinko__c { aspect-ratio: 320 / 140; }
  .plinko__drop { min-height: 36px; font-size: .78rem; }
}

/* Telephone en paysage (peu de hauteur) : carte a gauche, texte a droite */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --cw: min(calc(72vh * 5 / 7), 34vw, 300px); }
  @supports (height: 1dvh) {
    :root { --cw: min(calc(72dvh * 5 / 7), 34vw, 300px); }
  }
  .page { flex-direction: row; gap: 4vw; }
  .stage { margin: 0; }
  .copy { width: auto; max-width: 44vw; }
}

/* ---------- Version CSS seule de la carte ---------- */

.card-fb {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: calc(var(--cw) * .077);
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 38%, rgba(120, 40, 200, .30), transparent 62%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 11px),
    linear-gradient(160deg, #1a0a33 0%, #0b0418 55%, #05020c 100%);
  box-shadow:
    0 0 0 2px var(--neon),
    0 0 22px 2px var(--neon-a55),
    0 0 64px 6px var(--neon-a25),
    inset 0 0 22px hsla(355, 100%, 58%, .28);
  animation: fb-float 5.5s ease-in-out infinite;
  transition: opacity .5s ease, visibility .5s ease;
}
.card-fb::before { /* cadre or */
  content: "";
  position: absolute;
  left: 4.5%; right: 4.5%; top: 3.2%; bottom: 3.2%;
  border: 1px solid rgba(255, 200, 60, .55);
  border-radius: calc(var(--cw) * .05);
}
.card-fb::after { /* reflet holo */
  content: "";
  position: absolute;
  top: -20%; bottom: -20%; left: 0; right: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 90, 140, .28) 39%,
    rgba(255, 220, 120, .38) 45%,
    rgba(120, 255, 220, .32) 50%,
    rgba(120, 160, 255, .32) 55%,
    transparent 64%);
  background-size: 300% 100%;
  background-position: 22% 0;
  mix-blend-mode: screen;
  animation: fb-sweep 4.8s ease-in-out infinite;
}
.card-fb__logo {
  position: absolute;
  left: 50%; top: 50%;
  width: 68%;
  height: auto;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: drop-shadow(0 0 12px var(--neon-a55));
}
.card-fb__j { /* seulement si le logo ne charge pas */
  display: none;
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: calc(var(--cw) * .6);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  color: var(--neon);
  text-shadow: 0 0 18px var(--neon-a55);
}
.card-fb.nologo .card-fb__logo { display: none; }
.card-fb.nologo .card-fb__j { display: block; }

@keyframes fb-float {
  0%, 100% { transform: translateY(0) rotate(-.6deg); }
  50%      { transform: translateY(-6px) rotate(.6deg); }
}
@keyframes fb-sweep {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

.fb-hearts {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  transition: opacity .5s ease, visibility .5s ease;
}
.fb-heart {
  position: absolute;
  left: var(--x);
  bottom: 6%;
  font-style: normal;
  font-size: calc(var(--cw) * .07);
  line-height: 1;
  color: hsl(355, 100%, 62%);
  text-shadow: 0 0 8px var(--neon-a55);
  opacity: 0;
  animation: fb-heart 6s linear infinite;
  animation-delay: var(--d, 0s);
}
@keyframes fb-heart {
  0%   { opacity: 0;  transform: translate(0, 0) scale(.6); }
  12%  { opacity: .9; }
  100% { opacity: 0;  transform: translate(var(--sx, 0px), calc(var(--ch) * -.85)) scale(1.05); }
}

/* WebGL actif : on cache la version CSS (la place reste reservee par .stage) */
html.fx .card-fb,
html.fx .fb-hearts { opacity: 0; visibility: hidden; }
html.fx .card-fb,
html.fx .card-fb::after,
html.fx .fb-heart { animation: none; }   /* inutile de les animer cachees */

/* ---------- Fin de mise a jour ---------- */

.ready {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(ellipse at 50% 45%, rgba(5, 2, 10, .35), rgba(5, 2, 10, .82));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility .28s ease;
}
.ready__t {
  margin: 0;
  font-size: clamp(2rem, 10vw, 3.4rem);
  font-weight: 900;
  letter-spacing: .01em;
  color: var(--gold-hi);
  text-shadow: 0 0 24px rgba(255, 200, 60, .55), 0 0 60px var(--neon-a55);
  transform: scale(.9);
  transition: transform .45s cubic-bezier(.2, 1.4, .4, 1);
}
html.is-ready .ready { opacity: 1; visibility: visible; }
html.is-ready .ready__t { transform: scale(1); }
html.is-ready .copy { opacity: .12; transform: scale(.98); }

.burst {
  position: fixed;
  width: 0; height: 0;
  z-index: 6;
  pointer-events: none;
}
.burst i {
  position: absolute;
  left: 0; top: 0;
  width: 14px; height: 14px;
  background: var(--gold-hi);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
  animation: burst .95s cubic-bezier(.12, .7, .25, 1) forwards;
  animation-delay: var(--dl, 0s);
}
.burst i:nth-child(3n)   { background: #fff; width: 10px; height: 10px; }
.burst i:nth-child(3n+1) { background: var(--neon); }
@keyframes burst {
  0%   { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) translateX(0) scale(.4); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--d)) scale(1.1); }
}

.preview-tag {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
  z-index: 7;
  margin: 0;
  text-align: center;
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 200, 60, .75);
  pointer-events: none;
}

/* ---------- Mouvement reduit : version statique ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .burst { display: none; }
}