/* ==========================================================
   PLUS — Le Jeu  |  styles.css
   Skin : Cosmos (Phase 1)
   ========================================================== */

/* 1. DESIGN TOKENS ---------------------------------------- */
:root {
  --plus-bg:         #0a0a1a;
  --plus-surface:    #0f0f2e;
  --plus-text:       #e8eaf6;
  --plus-muted:      #7986cb;
  --plus-accent:     #7c4dff;
  --plus-accent2:    #00e5ff;
  --plus-gold:       #ffd740;
  --plus-correct:    #69f0ae;
  --plus-danger:     #ff5252;
  --plus-radius:     16px;
  --plus-shadow:     0 4px 24px rgba(124,77,255,.35);
  --plus-transition: .4s cubic-bezier(.4,0,.2,1);
}

/* 2. FULL-SCREEN LAYOUT OVERRIDE -------------------------- */
body:has(#plus-app) {
  background: var(--plus-bg);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
body:has(#plus-app) .header,
body:has(#plus-app) .footer { display: none; }
body:has(#plus-app) .container {
  padding: 0;
  max-width: none;
  margin: 0;
}

/* 3. APP CONTAINER ---------------------------------------- */
#plus-app {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  font-family: system-ui, -apple-system, sans-serif;
  color: var(--plus-text);
}

/* 4. SCREENS ---------------------------------------------- */
.plus-screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--plus-transition);
}
.plus-screen.active { display: flex; }
.plus-screen.visible { opacity: 1; }

/* ─────────────────────────────────────────────────────────
   5. LANDING SCREEN
   ───────────────────────────────────────────────────────── */
#screen-landing {
  background: #000010;
  cursor: pointer;
}
#canvas-landing {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#plus-symbol {
  position: relative;
  z-index: 10;
  font-size: clamp(6rem, 25vw, 16rem);
  font-weight: 900;
  line-height: 1;
  color: #fff;
  text-shadow:
    0 0 20px rgba(124,77,255,1),
    0 0 50px rgba(124,77,255,.7),
    0 0 90px rgba(0,229,255,.4),
    0 4px 0 rgba(60,20,140,.8);
  cursor: pointer;
  animation: plus-float 3.5s ease-in-out infinite,
             plus-glow  2s   ease-in-out infinite alternate;
  display: flex;
  align-items: center;
  justify-content: center;
}
#plus-symbol:hover  { filter: brightness(1.3) drop-shadow(0 0 24px #00e5ff); }
#plus-symbol:active { filter: brightness(1.6); }
#plus-symbol.exploding {
  animation: plus-explode .35s ease-out forwards;
}
@keyframes plus-float {
  0%,100% { transform: translateY(0)    rotate(-3deg); }
  50%     { transform: translateY(-22px) rotate(3deg);  }
}
@keyframes plus-glow {
  from { text-shadow:
    0 0 20px rgba(124,77,255,1), 0 0 50px rgba(124,77,255,.7); }
  to   { text-shadow:
    0 0 40px rgba(0,229,255,1),  0 0 80px rgba(0,229,255,.6),
    0 0 130px rgba(124,77,255,.4); }
}
@keyframes plus-explode {
  to { transform: scale(3.5); opacity: 0; }
}
.landing-hint {
  position: absolute;
  bottom: 14%;
  z-index: 10;
  margin: 0;
  color: var(--plus-muted);
  font-size: clamp(.75rem, 2.5vw, 1rem);
  letter-spacing: .25em;
  text-transform: uppercase;
  animation: hint-pulse 2.5s ease-in-out infinite;
}
@keyframes hint-pulse {
  0%,100% { opacity: .3; }
  50%     { opacity: .8; }
}

/* ─────────────────────────────────────────────────────────
   6. COUNTER SCREEN
   ───────────────────────────────────────────────────────── */
#screen-counter {
  cursor: pointer;
  background: #000010;
  transition: background 1s ease, opacity .8s ease;
  gap: 8px;
}
#counter-number {
  position: relative;
  z-index: 10;
  font-size: clamp(6rem, 32vw, 20rem);
  font-weight: 900;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 40px rgba(255,255,255,.4), 0 4px 16px rgba(0,0,0,.6);
  letter-spacing: -.04em;
}
#counter-number.pop {
  animation: num-pop .45s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes num-pop {
  from { transform: scale(.25) rotate(-12deg); opacity: 0; }
  to   { transform: scale(1)   rotate(0deg);   opacity: 1; }
}
#counter-objects {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 80vw;
  min-height: 2.5em;
  font-size: clamp(1.4rem, 5vw, 2.8rem);
}
.counter-obj {
  display: inline-block;
  animation: obj-in .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes obj-in {
  from { transform: scale(0) translateY(18px); opacity: 0; }
  to   { transform: scale(1) translateY(0);    opacity: 1; }
}
.counter-tap-hint {
  position: absolute;
  bottom: 22px;
  z-index: 10;
  margin: 0;
  color: rgba(255,255,255,.25);
  font-size: .8rem;
  letter-spacing: .1em;
}
#counter-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: rgba(255,255,255,.1);
}
#counter-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--plus-accent), var(--plus-accent2));
  width: 0;
  border-radius: 2px;
  transition: none;
}

/* ─────────────────────────────────────────────────────────
   7. GAME SCREEN
   ───────────────────────────────────────────────────────── */
#screen-game {
  background: linear-gradient(180deg, #0c0c22 0%, #050510 100%);
  flex-direction: column;
  padding: 12px 16px 16px;
  gap: 0;
}

/* Question */
#game-question {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2.5vw, 20px);
  margin-bottom: 8px;
  flex-shrink: 0;
  min-height: 80px;
}
.op-num {
  font-size: clamp(2.8rem, 11vw, 5.5rem);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 18px rgba(124,77,255,.7);
}
.op-sym {
  font-size: clamp(2.2rem, 8vw, 4.2rem);
  font-weight: 700;
  color: var(--plus-accent2);
}
.op-q {
  font-size: clamp(2.8rem, 11vw, 5.5rem);
  font-weight: 900;
  color: var(--plus-gold);
  animation: q-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes q-pulse {
  from { text-shadow: 0 0 8px  rgba(255,215,64,.4); }
  to   { text-shadow: 0 0 28px rgba(255,215,64,1);   }
}

/* Canvas animation */
#canvas-game {
  position: relative;
  z-index: 10;
  width: 100%;
  flex: 1;
  min-height: 0;
  max-height: 38vh;
  border-radius: var(--plus-radius);
}
#canvas-game.shake {
  animation: canvas-shake .5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes canvas-shake {
  10%,90%      { transform: translateX(-5px); }
  20%,80%      { transform: translateX(7px);  }
  30%,50%,70%  { transform: translateX(-7px); }
  40%,60%      { transform: translateX(7px);  }
}

/* Answers */
#game-answers {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 2.5vw, 14px);
  width: 100%;
  max-width: 460px;
  margin-top: 10px;
  flex-shrink: 0;
}
.answer-btn {
  background: rgba(124,77,255,.12);
  border: 2px solid rgba(124,77,255,.35);
  color: #fff;
  border-radius: var(--plus-radius);
  font-size: clamp(2rem, 8vw, 3.8rem);
  font-weight: 900;
  padding: clamp(10px, 2.5vw, 20px) 0;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}
.answer-btn:hover:not(:disabled) {
  background: rgba(124,77,255,.3);
  border-color: var(--plus-accent);
  transform: scale(1.04);
}
.answer-btn:active:not(:disabled) { transform: scale(.96); }
.answer-btn:disabled               { cursor: default; opacity: .7; }
.answer-btn:focus-visible {
  outline: 2px solid var(--plus-accent2);
  outline-offset: 2px;
}
.answer-btn.correct {
  background: rgba(105,240,174,.25);
  border-color: var(--plus-correct);
  animation: btn-correct .35s cubic-bezier(.34,1.56,.64,1);
}
.answer-btn.wrong {
  background: rgba(255,82,82,.18);
  border-color: var(--plus-danger);
  animation: btn-wrong .5s ease;
}
@keyframes btn-correct {
  50% { transform: scale(1.1); }
}
@keyframes btn-wrong {
  20%      { transform: translateX(-9px); }
  40%,80%  { transform: translateX(9px);  }
  60%      { transform: translateX(-9px); }
}

/* Feedback icon */
#game-feedback {
  position: absolute;
  top: 8%;
  right: 5%;
  z-index: 20;
  font-size: clamp(2rem, 8vw, 3.5rem);
  font-weight: 900;
  pointer-events: none;
}

/* Level badge */
#game-level-badge {
  position: absolute;
  top: 10px;
  left: 14px;
  z-index: 20;
  background: rgba(124,77,255,.2);
  border: 1px solid rgba(124,77,255,.4);
  border-radius: 8px;
  padding: 3px 10px;
  font-size: .78rem;
  color: var(--plus-muted);
  letter-spacing: .04em;
}
#game-level-badge.levelup {
  animation: badge-levelup 2s ease both;
  color: var(--plus-gold);
  border-color: var(--plus-gold);
  background: rgba(255,215,64,.15);
}
@keyframes badge-levelup {
  0%   { transform: scale(.8);  opacity: 0; }
  15%  { transform: scale(1.12); opacity: 1; }
  85%  { transform: scale(1);   opacity: 1; }
  100% { transform: scale(.8);  opacity: 0; }
}

/* World progress bar */
#game-world-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,.08);
}
#game-world-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--plus-accent), var(--plus-gold));
  width: 0;
  transition: width .9s ease;
  border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────
   8. STATES / UTILITIES
   ───────────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* ─────────────────────────────────────────────────────────
   9. RESPONSIVE
   ───────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  #game-answers { gap: 8px; }
  .answer-btn   { min-height: 60px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  #counter-number { font-size: 28vh; }
  #canvas-game    { max-height: 28vh; }
  .answer-btn     { min-height: 48px; padding: 6px 0; }
}