/* ==========================================================
   PLUS — styles-phase2.css
   Thèmes skins (Jungle, Océan) + Écran de sélection + Multiplication
   ========================================================== */

/* ─────────────────────────────────────────────────────────
   1. THÈME JUNGLE
   ───────────────────────────────────────────────────────── */
#plus-app[data-skin="jungle"] {
  --plus-bg:         #071407;
  --plus-surface:    #0d2e0d;
  --plus-text:       #e8f5e9;
  --plus-muted:      #81c784;
  --plus-accent:     #2ecc40;
  --plus-accent2:    #f9e642;
  --plus-gold:       #f9e642;
  --plus-correct:    #a5d6a7;
  --plus-danger:     #ff5252;
  --plus-shadow:     0 4px 24px rgba(46,204,64,.35);
}

/* Écrans de jeu Jungle */
#plus-app[data-skin="jungle"] #screen-game,
#plus-app[data-skin="jungle"] #screen-multiply {
  background: linear-gradient(180deg, #0d2e0d 0%, #071407 100%);
}
#plus-app[data-skin="jungle"] #screen-skin {
  background: radial-gradient(ellipse at 50% 40%, #0d2e0d 0%, #030803 100%);
}
#plus-app[data-skin="jungle"] #plus-symbol {
  text-shadow:
    0 0 20px rgba(46,204,64,1),
    0 0 50px rgba(46,204,64,.7),
    0 0 90px rgba(249,230,66,.4),
    0 4px 0 rgba(10,40,10,.8);
}
#plus-app[data-skin="jungle"] #plus-symbol:hover {
  filter: brightness(1.3) drop-shadow(0 0 24px #f9e642);
}

/* ─────────────────────────────────────────────────────────
   2. THÈME OCÉAN
   ───────────────────────────────────────────────────────── */
#plus-app[data-skin="ocean"] {
  --plus-bg:         #001422;
  --plus-surface:    #00243a;
  --plus-text:       #e0f7fa;
  --plus-muted:      #4dd0e1;
  --plus-accent:     #0099cc;
  --plus-accent2:    #00e5ff;
  --plus-gold:       #7de5ff;
  --plus-correct:    #80deea;
  --plus-danger:     #ff5252;
  --plus-shadow:     0 4px 24px rgba(0,153,204,.35);
}

#plus-app[data-skin="ocean"] #screen-game,
#plus-app[data-skin="ocean"] #screen-multiply {
  background: linear-gradient(180deg, #00243a 0%, #001422 100%);
}
#plus-app[data-skin="ocean"] #screen-skin {
  background: radial-gradient(ellipse at 50% 40%, #00243a 0%, #000810 100%);
}
#plus-app[data-skin="ocean"] #plus-symbol {
  text-shadow:
    0 0 20px rgba(0,153,204,1),
    0 0 50px rgba(0,153,204,.7),
    0 0 90px rgba(0,229,255,.4),
    0 4px 0 rgba(0,20,40,.8);
}
#plus-app[data-skin="ocean"] #plus-symbol:hover {
  filter: brightness(1.3) drop-shadow(0 0 24px #00e5ff);
}

/* ─────────────────────────────────────────────────────────
   3. ÉCRAN SÉLECTION DE SKIN
   ───────────────────────────────────────────────────────── */
#screen-skin {
  background: radial-gradient(ellipse at 50% 40%, #1a1a3a 0%, #000010 100%);
  gap: 28px;
  flex-direction: column;
}

#skin-title {
  font-size: clamp(1rem, 4vw, 1.8rem);
  font-weight: 700;
  color: var(--plus-text);
  letter-spacing: .06em;
  text-align: center;
  opacity: .85;
  margin: 0;
}

#skin-grid {
  display: flex;
  flex-direction: row;
  gap: clamp(12px, 4vw, 28px);
  justify-content: center;
  align-items: stretch;
  padding: 0 16px;
}

.skin-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: clamp(90px, 24vw, 150px);
  aspect-ratio: 1 / 1.15;
  background: rgba(255,255,255,.06);
  border: 2px solid rgba(255,255,255,.18);
  border-radius: 20px;
  color: var(--plus-text);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  animation: skin-card-in .5s cubic-bezier(.34,1.56,.64,1) both;
  touch-action: manipulation;
}
.skin-btn:hover:not(:disabled) {
  background: rgba(255,255,255,.14);
  border-color: var(--plus-accent2);
  transform: translateY(-6px) scale(1.04);
}
.skin-btn:active:not(:disabled) {
  transform: scale(.95);
}
.skin-btn.chosen {
  background: rgba(var(--plus-accent-raw, 124,77,255),.22);
  border-color: var(--plus-accent);
  transform: scale(1.08);
}
.skin-btn:disabled { cursor: default; }
.skin-btn:focus-visible {
  outline: 2px solid var(--plus-accent2);
  outline-offset: 3px;
}

.skin-icon {
  font-size: clamp(2.2rem, 8vw, 3.8rem);
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(255,255,255,.3));
}
.skin-name {
  font-size: clamp(.75rem, 2.5vw, 1rem);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--plus-muted);
}

@keyframes skin-card-in {
  from { transform: translateY(30px) scale(.85); opacity: 0; }
  to   { transform: translateY(0)    scale(1);   opacity: 1; }
}

/* ─────────────────────────────────────────────────────────
   4. ÉCRAN MULTIPLICATION (miroir de screen-game)
   ───────────────────────────────────────────────────────── */
#screen-multiply {
  background: linear-gradient(180deg, #1a1a3a 0%, #050510 100%);
  flex-direction: column;
  padding: 12px 16px 16px;
  gap: 0;
}

/* Question multiplication */
#multiply-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;
}

/* Canvas animation multiplication */
#canvas-multiply {
  position: relative;
  z-index: 10;
  width: 100%;
  flex: 1;
  min-height: 0;
  max-height: 38vh;
  border-radius: var(--plus-radius);
}
#canvas-multiply.shake {
  animation: canvas-shake .5s cubic-bezier(.36,.07,.19,.97) both;
}

/* Answers multiplication */
#multiply-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;
}

/* Feedback */
#multiply-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 */
#multiply-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;
}
#multiply-level-badge.levelup {
  animation: badge-levelup 2s ease both;
  color: var(--plus-gold);
  border-color: var(--plus-gold);
  background: rgba(255,215,64,.15);
}

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

/* ─────────────────────────────────────────────────────────
   5. DÉCORATIONS PROGRESSIVES DU MONDE
   ───────────────────────────────────────────────────────── */
#game-world-decos,
#multiply-world-decos {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.world-deco {
  position: absolute;
  font-size: clamp(1.1rem, 3.5vw, 2rem);
  opacity: 0;
  animation: deco-appear 1.2s cubic-bezier(.34,1.56,.64,1) forwards;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
@keyframes deco-appear {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  60%  { opacity: .9; }
  to   { transform: scale(1) rotate(5deg);  opacity: .7; }
}

/* ─────────────────────────────────────────────────────────
   6. RESPONSIVE PHASE 2
   ───────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  #skin-grid            { gap: 10px; }
  .skin-btn             { width: clamp(80px, 28vw, 110px); border-radius: 16px; }
  .skin-icon            { font-size: clamp(1.8rem, 7vw, 2.8rem); }
  #multiply-answers     { gap: 8px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  #skin-grid            { gap: 16px; }
  .skin-btn             { width: 90px; aspect-ratio: auto; padding: 10px 0; }
  #canvas-multiply      { max-height: 28vh; }
  #multiply-answers .answer-btn { min-height: 48px; padding: 6px 0; }
}