/* ============================================================
   SIX SEVEN — style.css
   ============================================================ */

:root {
  --blue:       #2196f3;
  --blue-dark:  #1565c0;
  --blue-light: #64b5f6;
  --blue-glow:  rgba(33,150,243,0.7);
  --white:      #ffffff;
  --black:      #0d0d0d;
  --yellow:     #ffe033;
  --orange:     #ff9800;
  --gold:       #ffc107;
  --bg:         #0a1628;
  --bg2:        #0d1f3c;
  --font-px:    'Press Start 2P', monospace;
  --font-round: 'Lilita One', cursive;
}

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

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-round);
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s;
}
body.chaos { background: #07101f; }
body.won   { background: #020810; }

/* ── Canvas fond ── */
#bgCanvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}

/* ── Flash ── */
#flash {
  position: fixed; inset: 0;
  background: #fff;
  opacity: 0; pointer-events: none;
  z-index: 600; transition: opacity 0.04s;
}

/* ── Particles ── */
#particles {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 60; overflow: hidden;
}
.particle {
  position: absolute;
  font-family: var(--font-round);
  font-weight: 900;
  pointer-events: none;
  animation: pFly 1s ease-out forwards;
}
@keyframes pFly {
  0%   { opacity:1; transform:translateY(0) rotate(0) scale(1); }
  100% { opacity:0; transform:translateY(-150px) rotate(var(--rot,30deg)) scale(0.3); }
}

/* ── CONTENEUR SHOW FINAL ── */
#win-show {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 200;
  overflow: hidden;
}

/* Pluie de "67" */
.rain-item {
  position: absolute;
  font-family: var(--font-round);
  font-weight: 900;
  pointer-events: none;
  top: -150px;
  animation: rainFall linear forwards;
  user-select: none;
  will-change: transform;
}
@keyframes rainFall {
  0%   { opacity:0;   transform: translateY(0)     rotate(var(--tilt,0deg)) scale(1); }
  6%   { opacity:1; }
  92%  { opacity:1; }
  100% { opacity:0;   transform: translateY(115vh) rotate(var(--tilt,0deg)) scale(0.7); }
}

/* Confettis carrés */
.confetti {
  position: absolute;
  width: var(--sz, 12px);
  height: var(--sz, 12px);
  background: var(--col, #ffe033);
  pointer-events: none;
  top: -20px;
  animation: confettiFall linear forwards;
  will-change: transform;
}
@keyframes confettiFall {
  0%   { opacity:1; transform: translateY(0) rotate(0deg); }
  100% { opacity:0; transform: translateY(115vh) rotate(var(--spin, 720deg)); }
}

/* Étoiles / éclairs qui partent des coins */
.corner-burst {
  position: absolute;
  font-size: var(--fs, 40px);
  pointer-events: none;
  animation: burstOut ease-out forwards;
}
@keyframes burstOut {
  0%   { opacity:1; transform: translate(0,0) scale(0.2) rotate(0deg); }
  60%  { opacity:1; }
  100% { opacity:0; transform: translate(var(--tx,0), var(--ty,0)) scale(1.4) rotate(var(--rot2,360deg)); }
}

/* Anneau d'ondes ── */
.ripple-ring {
  position: absolute;
  border-radius: 50%;
  border: 4px solid var(--col, rgba(33,150,243,0.8));
  pointer-events: none;
  animation: ringExpand ease-out forwards;
  transform: translate(-50%,-50%);
}
@keyframes ringExpand {
  0%   { width:0; height:0; opacity:1; }
  100% { width:600px; height:600px; opacity:0; }
}

/* Texte FINAL qui tourne ── */
.orbit-text {
  position: absolute;
  font-family: var(--font-round);
  font-weight: 900;
  color: var(--yellow);
  text-shadow: 3px 3px 0 var(--orange), 0 0 20px rgba(255,224,51,0.8);
  pointer-events: none;
  white-space: nowrap;
  animation: orbitSpin linear infinite;
  transform-origin: var(--ox,0) var(--oy,0);
}
@keyframes orbitSpin {
  from { transform: rotate(0deg) translateX(var(--r,200px)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--r,200px)) rotate(-360deg); }
}

/* Grand "67" central explosif ── */
#big67 {
  position: fixed;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 300;
  pointer-events: none;
  opacity: 0;
}
#big67.active { animation: big67Anim 3s ease forwards; }
#big67 span {
  font-family: var(--font-round);
  font-size: clamp(160px, 35vw, 320px);
  color: var(--yellow);
  text-shadow:
    8px 8px 0 var(--orange),
    16px 16px 0 #8b4000,
    0 0 80px rgba(255,224,51,1),
    0 0 160px rgba(255,152,0,0.7);
  letter-spacing: -0.02em;
  line-height: 1;
}
@keyframes big67Anim {
  0%   { opacity:0; transform: scale(0.05) rotate(-20deg); }
  12%  { opacity:1; transform: scale(1.35) rotate(6deg); }
  22%  { transform: scale(0.85) rotate(-4deg); }
  32%  { transform: scale(1.15) rotate(3deg); }
  44%  { transform: scale(0.97) rotate(-1deg); }
  55%  { transform: scale(1) rotate(0); opacity:1; }
  80%  { opacity:1; }
  100% { opacity:0; transform: scale(2); }
}

/* Image brainrot overlay ── */
#brainrot-overlay {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 250; pointer-events: none;
  opacity: 0;
}
#brainrot-overlay.active { animation: brainrotPop 5s ease forwards; }

#brainrot-img {
  width: min(360px, 65vw);
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 40px rgba(33,150,243,1))
    drop-shadow(0 0 100px rgba(33,150,243,0.6));
  animation: imgWiggle 0.14s ease-in-out infinite;
}
#brainrot-label {
  font-family: var(--font-round);
  font-size: clamp(28px, 7vw, 56px);
  color: var(--yellow);
  text-shadow: 4px 4px 0 var(--orange), 0 0 40px rgba(255,224,51,1);
  margin-top: 14px;
  animation: labelBounce 0.2s infinite alternate;
}
@keyframes brainrotPop {
  0%   { opacity:0; transform: scale(0.05) rotate(-15deg); }
  10%  { opacity:1; transform: scale(1.2) rotate(6deg); }
  20%  { transform: scale(0.9) rotate(-4deg); }
  32%  { transform: scale(1.08) rotate(2deg); }
  44%  { transform: scale(1) rotate(0); opacity:1; }
  78%  { opacity:1; }
  100% { opacity:0; transform: scale(1.5); }
}
@keyframes imgWiggle {
  0%  { transform: rotate(-3deg) scale(1.03); }
  100%{ transform: rotate(3deg) scale(0.97); }
}
@keyframes labelBounce {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.07) translateY(-6px); }
}

/* Compteur 67s ── */
#win-timer {
  position: fixed;
  top: 18px; right: 22px;
  font-family: var(--font-px);
  font-size: 13px;
  color: var(--yellow);
  text-shadow: 0 0 12px rgba(255,224,51,0.9);
  z-index: 500;
  opacity: 0;
  transition: opacity 0.3s;
  background: rgba(0,0,0,0.5);
  padding: 8px 14px;
  border: 2px solid var(--yellow);
  border-radius: 6px;
}
#win-timer.visible { opacity: 1; }

/* ── Scene ── */
.scene {
  position: relative; z-index: 10;
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
  padding: 16px;
  transition: transform 0.06s ease;
}

/* ── Header ── */
.header { text-align: center; }

.header__wiki {
  display: inline-block;
  font-family: var(--font-px);
  font-size: 7px;
  color: var(--blue-light);
  text-decoration: none;
  letter-spacing: 0.15em;
  opacity: 0.75;
  margin-bottom: 8px;
  padding: 5px 10px;
  border: 1px solid rgba(100,181,246,0.3);
  border-radius: 4px;
  transition: opacity 0.2s, border-color 0.2s, color 0.2s;
}
.header__wiki:hover {
  opacity: 1;
  color: var(--yellow);
  border-color: var(--yellow);
  text-shadow: 0 0 10px rgba(255,224,51,0.7);
}

.header__title {
  font-family: var(--font-round);
  font-size: clamp(52px, 13vw, 110px);
  line-height: 0.95;
  display: flex; gap: 14px; align-items: baseline;
}
.t-six {
  color: var(--blue-light);
  text-shadow: 5px 5px 0 var(--blue-dark), 0 0 30px var(--blue-glow);
  -webkit-text-stroke: 2px var(--blue-dark);
}
.t-seven {
  color: var(--white);
  text-shadow: 5px 5px 0 #334, 0 0 20px rgba(255,255,255,0.2);
  -webkit-text-stroke: 2px #334;
}

/* ── Personnage ── */
.char-wrap {
  position: relative;
  width: min(200px, 44vw);
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s cubic-bezier(.34,1.56,.64,1);
  filter: drop-shadow(0 8px 28px rgba(33,150,243,0.5));
}
.char-wrap:hover  { transform: scale(1.07) translateY(-4px); }
.char-wrap:active { transform: scale(0.94) translateY(4px); }

#charImg {
  width: 100%; height: auto; display: block;
  border-radius: 14px; pointer-events: none; -webkit-user-drag: none;
}

.char-badge {
  position: absolute;
  top: -14px; right: -14px;
  width: 52px; height: 52px;
  background: var(--yellow);
  border: 4px solid var(--orange);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-round);
  font-size: 20px; color: var(--black);
  box-shadow: 0 4px 18px rgba(255,224,51,0.7);
  transition: transform 0.1s cubic-bezier(.34,1.56,.64,1);
  z-index: 2;
}

/* ── Bouton ── */
.btn {
  background: var(--blue); color: var(--white);
  border: none; font-family: var(--font-px);
  font-size: clamp(8px, 2vw, 12px); letter-spacing: 0.12em;
  padding: 15px 30px; cursor: pointer;
  text-transform: uppercase; outline: none;
  user-select: none; overflow: hidden; position: relative;
  border-radius: 8px;
  box-shadow: 0 7px 0 var(--blue-dark), 0 9px 0 rgba(0,0,0,0.4), 0 0 35px var(--blue-glow);
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}
.btn:hover {
  background: var(--blue-light);
  box-shadow: 0 7px 0 var(--blue-dark), 0 9px 0 rgba(0,0,0,0.4), 0 0 60px var(--blue-glow);
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(6px);
  box-shadow: 0 1px 0 var(--blue-dark), 0 2px 0 rgba(0,0,0,0.4), 0 0 20px var(--blue-glow);
}
.btn:disabled { cursor:not-allowed; opacity:0.65; }
body.chaos .btn:not(:disabled) { animation: btnChaos 0.22s infinite alternate; }
@keyframes btnChaos {
  from { background:var(--blue); box-shadow:0 7px 0 var(--blue-dark),0 0 35px var(--blue-glow); }
  to   { background:var(--yellow); color:var(--black); box-shadow:0 7px 0 var(--orange),0 0 70px rgba(255,224,51,.8); }
}
.ripple {
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,0.35);
  transform:scale(0);
  animation:rippleAnim 0.5s ease-out forwards;
  pointer-events:none;
}
@keyframes rippleAnim { to { transform:scale(5); opacity:0; } }

/* ── Progress ── */
.progress-wrap { width: min(340px, 82vw); }
.progress-meta {
  display:flex; justify-content:space-between;
  font-family:var(--font-px); font-size:7px;
  color:rgba(100,181,246,0.55); margin-bottom:7px; letter-spacing:0.12em;
}
.progress-track {
  width:100%; height:18px;
  background:rgba(255,255,255,0.07);
  border-radius:9px; overflow:hidden;
  border:2px solid rgba(33,150,243,0.3);
}
.progress-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--blue-dark),var(--blue),var(--blue-light));
  border-radius:9px;
  transition:width 0.2s ease;
  box-shadow:0 0 14px var(--blue-glow);
  position:relative; overflow:hidden;
}
.progress-fill::after {
  content:''; position:absolute;
  top:0; left:-60%; width:50%; height:100%;
  background:rgba(255,255,255,0.25);
  transform:skewX(-20deg);
  animation:barShine 1.8s ease-in-out infinite;
}
@keyframes barShine { 0%{left:-60%} 100%{left:130%} }

/* ── Hint ── */
.hint {
  font-family:var(--font-px); font-size:7px;
  color:rgba(255,255,255,0.2);
  letter-spacing:0.15em; text-align:center;
  animation:hintBlink 2.2s steps(1) infinite;
}
@keyframes hintBlink { 0%,48%{opacity:1} 50%,100%{opacity:0} }

/* ── Chip ── */
.chip {
  position:fixed;
  font-family:var(--font-round); font-weight:900; font-size:16px;
  color:var(--yellow); text-shadow:2px 2px 0 var(--orange);
  pointer-events:none; z-index:55;
  animation:chipFloat 0.8s ease-out forwards;
}
@keyframes chipFloat { 0%{opacity:1;transform:translateY(0) scale(1.2)} 100%{opacity:0;transform:translateY(-90px) scale(0.6)} }

/* ── Shakes ── */
@keyframes shakeLow {
  0%,100%{transform:translate(0,0) rotate(0)}
  30%{transform:translate(-4px,2px) rotate(-0.5deg)}
  70%{transform:translate(4px,-2px) rotate(0.5deg)}
}
@keyframes shakeMid {
  0%,100%{transform:translate(0,0) rotate(0)}
  15%{transform:translate(-10px,6px) rotate(-2deg)}
  35%{transform:translate(10px,-6px) rotate(2deg)}
  55%{transform:translate(-6px,10px) rotate(-1.5deg)}
  75%{transform:translate(5px,-4px) rotate(1deg)}
}
@keyframes shakeHigh {
  0%,100%{transform:translate(0,0) rotate(0)}
  10%{transform:translate(-18px,11px) rotate(-4deg)}
  20%{transform:translate(18px,-11px) rotate(4deg)}
  30%{transform:translate(-12px,18px) rotate(-3deg)}
  40%{transform:translate(12px,-7px) rotate(3deg)}
  50%{transform:translate(-22px,9px) rotate(-5deg)}
  60%{transform:translate(22px,-9px) rotate(5deg)}
  70%{transform:translate(-9px,22px) rotate(-3deg)}
  80%{transform:translate(9px,-15px) rotate(3deg)}
  90%{transform:translate(-5px,11px) rotate(-1deg)}
}
.shake-low  { animation:shakeLow  0.35s ease both; }
.shake-mid  { animation:shakeMid  0.42s ease both; }
.shake-high { animation:shakeHigh 0.5s  ease both; }

/* ============================================================
   ÉCRAN FIN DE SHOW — Recommencer / Donner
   ============================================================ */
#end-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 700;
  background: rgba(5, 12, 28, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
#end-screen.visible {
  opacity: 1;
  pointer-events: all;
}

.end-card {
  background: linear-gradient(160deg, #0d1f3c 0%, #0a1628 60%, #0d2540 100%);
  border: 3px solid var(--blue);
  border-radius: 20px;
  padding: 44px 48px;
  max-width: min(520px, 90vw);
  width: 100%;
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(33,150,243,0.2),
    0 0 60px rgba(33,150,243,0.35),
    0 30px 80px rgba(0,0,0,0.7);
  animation: cardBounceIn 0.5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes cardBounceIn {
  from { transform: scale(0.6) translateY(40px); opacity:0; }
  to   { transform: scale(1)   translateY(0);    opacity:1; }
}

.end-card__emoji {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 10px;
  display: block;
  animation: spinOnce 0.8s ease both;
  animation-delay: 0.3s;
}
@keyframes spinOnce {
  from { transform: rotate(-180deg) scale(0); }
  to   { transform: rotate(0deg)    scale(1); }
}

.end-card__title {
  font-family: var(--font-round);
  font-size: clamp(28px, 6vw, 46px);
  color: var(--yellow);
  text-shadow: 4px 4px 0 var(--orange), 0 0 30px rgba(255,224,51,0.6);
  margin-bottom: 6px;
  line-height: 1.1;
}

.end-card__sub {
  font-family: var(--font-px);
  font-size: 8px;
  color: var(--blue-light);
  opacity: 0.65;
  letter-spacing: 0.18em;
  margin-bottom: 32px;
}

.end-card__btns {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.end-btn {
  display: block;
  width: 100%;
  padding: 16px 24px;
  border: none;
  border-radius: 10px;
  font-family: var(--font-px);
  font-size: clamp(8px, 2vw, 11px);
  letter-spacing: 0.14em;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
  position: relative;
  overflow: hidden;
}
.end-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background 0.15s;
}
.end-btn:hover::after { background: rgba(255,255,255,0.08); }
.end-btn:hover { transform: translateY(-3px); }
.end-btn:active { transform: translateY(2px); }

/* Bouton recommencer */
.end-btn--restart {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 6px 0 var(--blue-dark), 0 0 30px var(--blue-glow);
}
.end-btn--restart:hover {
  box-shadow: 0 6px 0 var(--blue-dark), 0 0 55px var(--blue-glow);
}

/* Bouton donation */
.end-btn--donate {
  background: linear-gradient(135deg, #f5a623, #f7971e, #ffd200);
  color: #1a0a00;
  font-weight: 900;
  box-shadow: 0 6px 0 #c47d00, 0 0 30px rgba(255,210,0,0.5);
}
.end-btn--donate:hover {
  box-shadow: 0 6px 0 #c47d00, 0 0 60px rgba(255,210,0,0.8);
  filter: brightness(1.08);
}

.end-btn__icon { margin-right: 8px; }