/* style.css - lemonlemonlemon.fr */
*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  user-select: none; -webkit-user-select: none;
}
:root {
  --lemon:      #FFE135;
  --lemon-dark: #c8860a;
  --lemon-bg:   #fffdf0;
  --black:      #1a1a18;
  --white:      #ffffff;
  --font-title: 'Paytone One', sans-serif;
  --font-body:  'Nunito', sans-serif;
}
html { font-size: 16px; }
body {
  font-family: var(--font-body);
  background: var(--lemon-bg); color: var(--black);
  min-height: 100vh; overflow: hidden;
  position: relative; transition: background .5s;
}
body.night-mode { background: #0d0d0b; color: var(--lemon); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (hover:hover) {
  body { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 100 100'><text y='.9em' font-size='80'>🍋</text></svg>") 16 16, auto; }
  button,[role='button'] { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 100 100'><text y='.9em' font-size='80'>🍋</text></svg>") 16 16, pointer; }
}

/* =============================================
   CHARACTERS
============================================= */
.character { position:fixed; bottom:0; z-index:10; }
.character-left  { left:20px; width:110px; }
.character-right { right:20px; display:flex; align-items:flex-end; gap:0; }
.waiter-svg,.receiver-svg,.receiver2-svg {
  filter: drop-shadow(2px 3px 6px rgba(0,0,0,.12));
  animation: charBob 3s ease-in-out infinite;
}
.receiver-svg  { width:95px; animation-duration:3.1s; }
.receiver2-svg { width:78px; animation-duration:2.8s; animation-delay:-1.2s; margin-left:-8px; }
.waiter-svg    { width:100%; }
@keyframes charBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

.speech-bubble {
  position:absolute; bottom:210px; left:95px;
  background:var(--white); border:2px solid var(--lemon-dark);
  border-radius:16px 16px 16px 4px; padding:8px 12px;
  font-size:13px; font-weight:700; color:var(--lemon-dark);
  opacity:0; transform:scale(.8); transform-origin:bottom left;
  transition:opacity .2s, transform .2s; pointer-events:none;
  max-width:180px; z-index:20;
}
.speech-bubble.visible { opacity:1; transform:scale(1); }
.speech-bubble::before { content:''; position:absolute; bottom:-10px; left:12px; border:5px solid transparent; border-top-color:var(--lemon-dark); }
.speech-bubble-right { left:auto; right:95px; border-radius:16px 16px 4px 16px; transform-origin:bottom right; }
.speech-bubble-right::before { left:auto; right:12px; }

.flying-lemon { position:fixed; font-size:32px; bottom:160px; right:130px; opacity:0; pointer-events:none; z-index:20; }
.flying-lemon.throwing { animation:throwL 1.4s cubic-bezier(.25,.46,.45,.94) forwards; }
@keyframes throwL { 0%{opacity:1;transform:translate(0,0) rotate(0deg)} 40%{transform:translate(-200px,-120px) rotate(180deg)} 80%{transform:translate(-380px,20px) rotate(340deg);opacity:1} 100%{transform:translate(-420px,30px) rotate(360deg);opacity:0} }
.flying-lemon-2 { position:absolute; font-size:22px; bottom:120px; right:85px; opacity:0; pointer-events:none; z-index:20; }
.flying-lemon-2.passing { animation:passL .8s cubic-bezier(.25,.46,.45,.94) forwards; }
@keyframes passL { 0%{opacity:1;transform:translate(0,0) rotate(0deg)} 50%{transform:translate(-50px,-40px) rotate(180deg);opacity:1} 100%{transform:translate(-90px,0) rotate(360deg);opacity:0} }

/* =============================================
   MAIN
============================================= */
.main-content {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  min-height:100vh; padding:40px 20px; gap:24px;
  max-width:900px; margin:0 auto;
}
.site-title {
  font-family:var(--font-title); font-size:clamp(28px,6vw,56px);
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  color:var(--lemon-dark); text-shadow:3px 3px 0 var(--lemon);
}
.site-title span { animation:titleWiggle 2.4s ease-in-out infinite; }
.site-title span:nth-child(2) { animation-delay:.3s; }
.site-title span:nth-child(3) { animation-delay:.6s; }
@keyframes titleWiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-2deg)} 75%{transform:rotate(2deg)} }

.lemon-wrapper {
  position:relative; width:clamp(160px,40vw,240px); height:clamp(160px,40vw,240px); outline:none;
}
.lemon-svg { width:100%; height:100%; filter:drop-shadow(2px 6px 12px rgba(200,134,10,.22)); }
.lemon-svg.squeezing { animation:squeeze 300ms cubic-bezier(.36,.07,.19,.97); }
@keyframes squeeze { 0%{transform:scale(1)} 30%{transform:scaleX(1.2) scaleY(.75)} 60%{transform:scaleX(.9) scaleY(1.1)} 100%{transform:scale(1)} }
.lemon-svg.bored { animation:boredYawn 2s ease-in-out; }
@keyframes boredYawn { 0%{transform:rotate(0)} 20%{transform:rotate(-5deg) scaleY(.95)} 50%{transform:rotate(5deg) scaleY(1.05)} 80%{transform:rotate(-3deg)} 100%{transform:rotate(0)} }
.juice-canvas { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }

/* Bulle BD lemon */
.lemon-bubble {
  position:absolute; top:-10px; right:-140px;
  background:var(--white); border:3px solid var(--black);
  border-radius:18px; padding:10px 14px;
  font-size:15px; font-weight:800; color:var(--black);
  white-space:nowrap; pointer-events:none; z-index:30;
  opacity:0; transform:scale(.7); transform-origin:bottom left;
  transition:opacity .25s, transform .25s cubic-bezier(.34,1.56,.64,1);
  box-shadow:2px 2px 0 var(--black);
}
.lemon-bubble::before { content:''; position:absolute; bottom:14px; left:-17px; border:8px solid transparent; border-right-color:var(--black); }
.lemon-bubble::after  { content:''; position:absolute; bottom:16px; left:-12px; border:6px solid transparent; border-right-color:var(--white); }
.lemon-bubble.visible { opacity:1; transform:scale(1); }

/* Counter */
.counter-section { display:flex; flex-direction:column; align-items:center; gap:12px; }
.flap-label { font-size:13px; font-weight:600; color:var(--lemon-dark); letter-spacing:.08em; text-transform:uppercase; }
.flap-display { display:flex; gap:5px; align-items:center; padding:12px; background:var(--black); border-radius:12px; }
.flap-digit {
  width:clamp(36px,8vw,52px); height:clamp(50px,11vw,72px);
  background:#111; border-radius:5px; display:flex; align-items:center; justify-content:center;
  font-size:clamp(28px,6vw,44px); font-weight:700; font-family:'Courier New',monospace;
  color:var(--lemon); position:relative; overflow:hidden; border:1px solid #2a2a28;
}
.flap-digit.flipping { animation:flipCard 180ms ease-in-out; }
@keyframes flipCard { 0%{transform:scaleY(1)} 40%{transform:scaleY(.05);background:#2a2a28} 60%{transform:scaleY(.05)} 100%{transform:scaleY(1)} }
.flap-sep { font-size:clamp(28px,6vw,44px); font-weight:700; color:var(--lemon); font-family:'Courier New',monospace; padding-bottom:4px; }

.toast-area { height:36px; display:flex; align-items:center; justify-content:center; }
.toast {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--black); color:#f0f0ec; font-size:13px; font-weight:600;
  padding:6px 16px; border-radius:99px; opacity:0; transform:translateY(6px);
  transition:opacity .3s, transform .3s; pointer-events:none; white-space:nowrap; max-width:90vw;
}
.toast.visible { opacity:1; transform:translateY(0); }
.toast.fading  { opacity:0; transform:translateY(-4px); }
.toast-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--lemon); }
.personal-counter { font-size:12px; font-weight:600; color:var(--lemon-dark); opacity:.75; }

/* Rage */
body.rage-mode { animation:rageBg .15s ease-in-out infinite alternate; }
@keyframes rageBg { from{background:var(--lemon-bg)} to{background:#fff176} }
body.rage-mode .lemon-svg { animation:rageLemon .1s ease-in-out infinite alternate; }
@keyframes rageLemon { from{transform:rotate(-4deg) scale(1.05)} to{transform:rotate(4deg) scale(.97)} }

/* Rain */
.lemon-rain { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:200; overflow:hidden; }
.rain-lemon { position:absolute; top:-60px; font-size:32px; animation:fallDown linear forwards; }
@keyframes fallDown { 0%{transform:translateY(0) rotate(0deg);opacity:1} 100%{transform:translateY(110vh) rotate(720deg);opacity:.2} }

/* Context menu */
.custom-context-menu {
  position:fixed; background:var(--white); border:2px solid var(--lemon);
  border-radius:12px; padding:6px 0; box-shadow:4px 4px 0 var(--lemon-dark);
  z-index:500; opacity:0; pointer-events:none; transform:scale(.9);
  transform-origin:top left; transition:opacity .15s, transform .15s; min-width:200px;
}
.custom-context-menu.visible { opacity:1; pointer-events:all; transform:scale(1); }
.context-item { padding:10px 18px; font-size:14px; font-weight:600; cursor:pointer; transition:background .1s; }
.context-item:hover { background:var(--lemon-bg); }

/* =============================================
   ACHIEVEMENT QUEUE (Steam style)
   Chaque notif est creee dynamiquement et positionnee
============================================= */
.achievement {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(180px);
  background: var(--black); color: var(--white);
  border-radius: 10px; padding: 13px 18px;
  display: flex; align-items: center; gap: 12px;
  z-index: 99999; opacity: 0; pointer-events: none;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s;
  width: 340px;
  border: 2px solid var(--lemon);
  will-change: transform, opacity;
}
.achievement.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.achievement-icon  { font-size: 26px; flex-shrink: 0; }
.achievement-title { font-size: 12px; font-weight: 800; color: var(--lemon); text-transform: uppercase; letter-spacing: .06em; }
.achievement-sub   { font-size: 13px; font-weight: 600; margin-top: 2px; }

/* Combo */
.combo-display {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0);
  font-family:var(--font-title); font-size:clamp(48px,12vw,96px); color:var(--lemon-dark);
  text-shadow:4px 4px 0 var(--lemon); pointer-events:none; z-index:400; opacity:0;
}
.combo-display.show { animation:comboPop .6s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes comboPop { 0%{transform:translate(-50%,-50%) scale(0);opacity:1} 50%{transform:translate(-50%,-50%) scale(1.1);opacity:1} 80%{transform:translate(-50%,-60%) scale(1);opacity:1} 100%{transform:translate(-50%,-80%) scale(.8);opacity:0} }

/* Cursor burst */
.cursor-burst { position:fixed; pointer-events:none; z-index:600; font-size:20px; }
.cursor-burst span { position:absolute; animation:burstFly .7s ease-out forwards; }
@keyframes burstFly { 0%{transform:translate(0,0) scale(1);opacity:1} 100%{transform:translate(var(--bx),var(--by)) scale(.3);opacity:0} }

/* Mobile */
@media (max-width:600px) {
  .character-left  { width:72px; left:2px; }
  .character-right { right:2px; }
  .receiver-svg    { width:62px; }
  .receiver2-svg   { width:50px; }
  .main-content    { padding:36px 12px 90px; }
  /* Bulle du lemon : centree JUSTE au-dessus du lemon, texte sur
     plusieurs lignes (sinon nowrap deborde et la bulle parait decalee),
     fleche qui pointe vers le BAS (vers la bouche du lemon). */
  .lemon-bubble {
    top:auto; bottom:calc(100% + 14px); right:auto; left:50%;
    transform:scale(.7) translateX(-50%); transform-origin:bottom center;
    font-size:13px; white-space:normal; max-width:200px; text-align:center;
    line-height:1.3;
  }
  .lemon-bubble.visible { transform:scale(1) translateX(-50%); }
  .lemon-bubble::before { bottom:-15px; left:50%; top:auto;
    border:8px solid transparent; border-top-color:var(--black);
    border-right-color:transparent; transform:translateX(-50%); }
  .lemon-bubble::after  { bottom:-10px; left:50%; top:auto;
    border:6px solid transparent; border-top-color:var(--white);
    border-right-color:transparent; transform:translateX(-50%); }
  .achievement     { min-width: 220px; max-width: calc(100vw - 24px); }
  /* Personnages plus petits sur mobile -> bulles repositionnees
     plus bas et plus pres pour rester collees au-dessus de la tete */
  .speech-bubble       { bottom:120px; left:60px; max-width:140px; font-size:12px; padding:6px 9px; }
  .speech-bubble-right { left:auto; right:60px; }
  /* Compteur 9 chiffres : reduit pour ne pas deborder sur mobile */
  .flap-display { gap:2px; padding:7px; max-width:100%; overflow:hidden; }
  .flap-digit   { width:clamp(22px,8.5vw,34px); height:clamp(34px,12vw,48px); font-size:clamp(18px,6.5vw,30px); border-radius:4px; }
  .flap-sep     { font-size:clamp(16px,5vw,26px); }
  .flap-label   { font-size:11px; text-align:center; }
}
@media (max-width:380px) {
  .speech-bubble       { bottom:96px; left:48px; max-width:120px; font-size:11px; }
  .speech-bubble-right { left:auto; right:48px; }
  .flap-display { gap:1px; padding:5px; }
  .flap-digit   { width:clamp(18px,8vw,26px); height:clamp(28px,11vw,38px); font-size:clamp(15px,6vw,22px); }
  .flap-sep     { font-size:14px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* Bouton "fuir comme une mauviette" (apparait en rage mode) */
#cowardBtn {
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  z-index:1200; background:#222; color:#bbb; border:1px solid #555;
  border-radius:8px; padding:9px 18px; font:600 13px/1 system-ui,sans-serif;
  cursor:pointer; opacity:.85; transition:opacity .2s,transform .2s;
  animation:cowardIn .3s ease-out;
}
#cowardBtn:hover { opacity:1; transform:translateX(-50%) scale(1.05); color:#fff; }
#cowardBtn:disabled { opacity:.4; cursor:default; }
@keyframes cowardIn { from{opacity:0;transform:translateX(-50%) translateY(20px)} to{opacity:.85;transform:translateX(-50%) translateY(0)} }

/* Effets temporaires des mots secrets (banane / disco / nuit) */
body.fx-disco { animation:fxDisco .35s steps(1) infinite; }
@keyframes fxDisco {
  0%{filter:hue-rotate(0deg) saturate(1.6)} 25%{filter:hue-rotate(90deg) saturate(1.8)}
  50%{filter:hue-rotate(180deg) saturate(1.6)} 75%{filter:hue-rotate(270deg) saturate(1.8)}
  100%{filter:hue-rotate(360deg) saturate(1.6)}
}
body.fx-night { filter:invert(1) hue-rotate(180deg); transition:filter .5s; }
body.fx-banana::after {
  content:'🍌'; position:fixed; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:40vmin; opacity:.12; pointer-events:none;
  z-index:9999; animation:fxBanana 5s ease-in-out;
}
@keyframes fxBanana { 0%,100%{opacity:0} 20%,80%{opacity:.14} }