/* ═══════════════════════════════════════
   QUIZ.CSS — Académie Pirate
   Map îles, quiz section, question cards,
   MCQ, write mode, boss, streaks, results
   TOUTES les classes utilisées par quiz.js
═══════════════════════════════════════ */

/* ── SECTION MAP ÎLES ── */
.panel-frame{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:16px}
.map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.sec-sub{text-align:center}

/* ── CARTE ÎLE ── */
.isle{background:var(--card);border:3px solid var(--ink);box-shadow:4px 4px 0 #000;overflow:hidden;cursor:pointer;transition:all .25s;display:flex;flex-direction:column}
.isle:hover{transform:translateY(-4px) scale(1.02);border-color:rgba(255,215,0,.4);box-shadow:6px 6px 0 #000,0 0 30px rgba(255,215,0,.15)}
.isle.done{border-color:rgba(6,214,160,.3)}
.isle-img-zone{position:relative;height:175px;overflow:hidden;background:linear-gradient(135deg,#0a0d1a,#1a1030);flex-shrink:0}
.isle-char-img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s;image-rendering:auto}
.isle:hover .isle-char-img{transform:scale(1.08) translateY(-4px)}
.isle-img-zone::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,0,0,.3) 1px,transparent 1px);background-size:4px 4px;mix-blend-mode:multiply;pointer-events:none}
.isle-fade{position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(transparent,var(--card));z-index:2;pointer-events:none}
.isle-skel{position:absolute;inset:0;background:linear-gradient(90deg,#0f1629 25%,#1a2035 50%,#0f1629 75%);background-size:200% 100%;animation:skel 1.5s infinite;display:flex;align-items:center;justify-content:center;font-size:3rem}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
.isle-foot{padding:10px 12px 14px;background:var(--card);border-top:2px solid var(--ink);flex:1;display:flex;flex-direction:column;justify-content:space-between}
.isle-name{font-family:'Bangers',cursive;font-size:1.05rem;letter-spacing:2px;color:var(--gold2)}
.isle-topic{font-size:.68rem;color:#4a5568;text-transform:uppercase;letter-spacing:1px;font-weight:800;margin-top:2px}
.isle-stars{font-size:.85rem;letter-spacing:2px;margin-top:6px}
.isle-label{position:absolute;top:8px;left:8px;z-index:5;background:rgba(0,0,0,.8);border:1.5px solid rgba(255,255,255,.15);font-family:'Bangers',cursive;font-size:.65rem;letter-spacing:1.5px;padding:2px 7px;border-radius:2px;color:var(--gold)}
.world-line{text-align:center;margin:20px 0 0;font-size:.65rem;color:#1f2937;letter-spacing:3px;text-transform:uppercase;font-weight:700}

/* ── QUIZ SECTION ── */
#quiz-sec{display:none;position:relative;z-index:5;max-width:660px;margin:0 auto;padding:14px 12px 50px}
.qhdr{text-align:center;margin-bottom:18px;position:relative}
.back-btn{position:absolute;left:0;top:4px;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.1);border-radius:8px;color:var(--white);font-size:.75rem;font-weight:800;padding:5px 11px;cursor:pointer;transition:all .2s;font-family:'Nunito',sans-serif}
.back-btn:hover{background:rgba(255,255,255,.12);transform:translateX(-2px)}
.q-island-title{font-family:'Bangers',cursive;font-size:clamp(1.3rem,5vw,1.9rem);letter-spacing:3px;color:var(--gold)}
.q-prog-wrap{margin-top:10px}
.q-prog-track{height:10px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.q-prog-fill{height:100%;background:linear-gradient(90deg,var(--blue),#a855f7);border-radius:99px;transition:width .5s ease}
.q-prog-lbl{font-size:.65rem;color:#374151;text-align:right;margin-top:3px;font-weight:700}

/* ── QUESTION CARD — MANGA PANEL STYLE ── */
.q-card{background:var(--card);border:3px solid var(--ink);box-shadow:4px 4px 0 #000,inset 0 0 0 1px rgba(255,255,255,.04);margin-bottom:3px;overflow:hidden;animation:panelIn .35s cubic-bezier(.4,0,.2,1);position:relative}
@keyframes panelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* Character panel at top */
.char-panel{display:flex;height:110px;border-bottom:3px solid var(--ink);position:relative;overflow:hidden}
.char-panel-img{width:100px;flex-shrink:0;position:relative;overflow:hidden;border-right:3px solid var(--ink)}
.char-panel-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.char-panel-img::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(75deg,transparent,transparent 8px,rgba(255,255,255,.025) 8px,rgba(255,255,255,.025) 9px);pointer-events:none}
.char-panel-speech{flex:1;padding:12px 14px;background:linear-gradient(135deg,#0c1225,#0f1a30);display:flex;flex-direction:column;justify-content:center;gap:6px;position:relative}
.char-panel-speech::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-30deg,transparent,transparent 20px,rgba(255,255,255,.012) 20px,rgba(255,255,255,.012) 21px);pointer-events:none}
.char-name-badge{font-family:'Bangers',cursive;font-size:.75rem;letter-spacing:2px;color:var(--gold);border-bottom:1.5px solid rgba(245,166,35,.3);padding-bottom:3px;width:fit-content}
.speech-bubble{background:rgba(255,255,255,.92);color:#1a1a2e;border:2px solid #000;border-radius:12px 12px 12px 3px;padding:8px 12px;font-size:.82rem;font-weight:800;line-height:1.3;position:relative;z-index:2;font-family:'Nunito',sans-serif;box-shadow:2px 2px 0 rgba(0,0,0,.5)}
.speech-bubble::before{content:'';position:absolute;bottom:-10px;left:10px;border:8px solid transparent;border-top-color:#000}
.speech-bubble::after{content:'';position:absolute;bottom:-7px;left:11px;border:7px solid transparent;border-top-color:rgba(255,255,255,.92)}

/* Question body */
.q-body{padding:16px}
.q-num{font-size:.62rem;color:#374151;text-transform:uppercase;letter-spacing:2px;font-weight:800;margin-bottom:8px}
.q-txt{font-size:1rem;font-weight:800;line-height:1.6;color:#e2e8f0;margin-bottom:14px;border-left:3px solid var(--gold);padding-left:12px}
.q-blank{display:inline-block;min-width:44px;border-bottom:3px solid var(--gold);color:var(--gold);font-weight:900;text-align:center;padding:0 5px;animation:blinkUnderline 1.5s ease-in-out infinite}
@keyframes blinkUnderline{0%,100%{border-color:var(--gold)}50%{border-color:var(--gold2)}}

/* ── MCQ OPTIONS ── */
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.08);border-radius:0;cursor:pointer;transition:all .15s;font-size:.92rem;font-weight:800;font-family:'Nunito',sans-serif;color:var(--white);text-align:left;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden}
.opt::before{content:'';position:absolute;top:50%;left:-20px;width:0;height:0;background:rgba(245,166,35,.12);border-radius:50%;transform:translateY(-50%);transition:width .3s,height .3s,left .3s}
.opt:hover::before{width:200px;height:200px;left:-40px}
.opt:hover:not(:disabled){border-color:var(--gold);transform:translateX(4px)}
.opt:disabled{cursor:default;transform:none!important}
.opt-key{width:30px;height:30px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-family:'Bangers',cursive;font-size:.85rem;letter-spacing:1px;flex-shrink:0;color:var(--gold);transition:all .2s}
.opt.selected{border-color:var(--gold);background:rgba(245,166,35,.1)}
.opt.selected .opt-key{background:var(--gold);color:#000}
.opt.correct{background:rgba(6,214,160,.12);border-color:var(--green);color:var(--green)}
.opt.correct .opt-key{background:var(--green);border-color:var(--green);color:#000}
.opt.wrong{background:rgba(230,57,70,.12);border-color:var(--red);color:#fca5a5}
.opt.wrong .opt-key{background:var(--red);border-color:var(--red);color:#fff}

/* ── FEEDBACK ── */
.fb{display:none;margin-top:10px;padding:10px 14px;font-size:.84rem;font-weight:700;border-left:4px solid;border-radius:0}
.fb.show{display:block;animation:panelIn .3s ease}
.fb.ok{background:rgba(6,214,160,.08);border-color:var(--green);color:var(--green)}
.fb.ko{background:rgba(230,57,70,.08);border-color:var(--red);color:#fca5a5}
.expl{display:none;margin-top:8px;padding:8px 12px;font-size:.78rem;font-weight:700;background:rgba(58,134,255,.07);border:1px solid rgba(58,134,255,.2);color:#93c5fd}
.expl.show{display:block;animation:panelIn .3s ease .15s both}

/* ── STREAK ── */
.streak-bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;background:rgba(255,255,255,.03);border-bottom:2px solid var(--ink);font-family:'Bangers',cursive;font-size:1rem;letter-spacing:2px;color:var(--gold)}
.streak-dots{display:flex;gap:4px}
.streak-dot{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);transition:all .3s}
.streak-dot.lit{background:var(--gold);border-color:var(--gold2);box-shadow:0 0 8px var(--gold)}

/* ── BOSS ── */
.boss-question{border-color:var(--red)!important;box-shadow:4px 4px 0 #000,0 0 30px rgba(230,57,70,.2)!important}
.boss-question::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(230,57,70,.05) 8px,rgba(230,57,70,.05) 9px);pointer-events:none}
.boss-banner{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding:8px 12px;background:rgba(230,57,70,.2);border-radius:8px;border-left:4px solid var(--red)}
.boss-banner-img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:3px solid var(--red);box-shadow:0 0 16px rgba(230,57,70,.5)}
.boss-banner-text{display:flex;flex-direction:column;gap:2px}
.boss-banner-label{font-family:'Bangers',cursive;font-size:.75rem;letter-spacing:2px;color:var(--red);text-shadow:1px 1px 0 #000}
.boss-banner-name{font-family:'Bangers',cursive;font-size:1.3rem;letter-spacing:2px;color:#fff;text-shadow:2px 2px 0 #000}
.boss-banner-hp{display:flex;align-items:center;gap:6px;margin-top:2px}
.boss-hp-bar{height:6px;flex:1;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden}
.boss-hp-fill{height:100%;background:linear-gradient(90deg,#e63946,#f97316);width:100%;border-radius:99px;transition:width .5s ease}
.boss-hp-lbl{font-size:.6rem;font-family:'Nunito',sans-serif;font-weight:800;color:rgba(255,255,255,.6);white-space:nowrap}

/* ── BUTTONS ── */
.btn{display:block;width:100%;padding:15px;font-family:'Bangers',cursive;font-size:1.1rem;letter-spacing:3px;border:none;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden}
.btn-gold{background:var(--gold);color:#000;border:3px solid #000;box-shadow:4px 4px 0 #000;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
.btn-gold:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
.btn-gold:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
.btn-outline{background:transparent;border:3px solid var(--gold);color:var(--gold);margin-top:10px;box-shadow:4px 4px 0 rgba(245,166,35,.3);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
.btn-outline:hover{background:rgba(245,166,35,.1);transform:translate(-2px,-2px)}
.btn-sm{font-size:.85rem;padding:10px 16px}
.submit-wrap{padding:16px 0;border-top:3px solid var(--ink);margin-top:6px}

/* ── WRITE MODE ── */
.write-zone{display:flex;flex-direction:column;gap:12px}
.write-prompt{font-size:.82rem;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.verb-badge{background:linear-gradient(135deg,var(--gold),#d97706);color:#000;font-family:'Bangers',cursive;font-size:.85rem;letter-spacing:2px;padding:3px 10px;border-radius:4px;box-shadow:2px 2px 0 rgba(0,0,0,.4)}
.level-badge{display:inline-flex;align-items:center;gap:4px;font-size:.65rem;font-weight:800;padding:2px 8px;border-radius:99px;text-transform:uppercase;letter-spacing:1px}
.level-badge.lv1{background:rgba(6,214,160,.15);color:var(--green);border:1px solid rgba(6,214,160,.3)}
.level-badge.lv2{background:rgba(245,166,35,.15);color:var(--gold);border:1px solid rgba(245,166,35,.3)}
.level-badge.lv3{background:rgba(230,57,70,.15);color:var(--red);border:1px solid rgba(230,57,70,.3)}
.write-input-wrap{position:relative;display:flex;align-items:center;gap:10px}
.write-input{flex:1;background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.12);border-radius:0;color:var(--white);font-family:'Nunito',sans-serif;font-size:1.1rem;font-weight:800;padding:12px 16px;outline:none;transition:border-color .2s,box-shadow .2s;caret-color:var(--gold);width:100%}
.write-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,166,35,.15)}
.write-input.correct-input{border-color:var(--green)!important;background:rgba(6,214,160,.08)!important;color:var(--green)}
.write-input.wrong-input{border-color:var(--red)!important;background:rgba(230,57,70,.08)!important;color:#fca5a5}
.write-input:disabled{cursor:not-allowed;opacity:.8}
.accent-bar{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px}
.acc-btn{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.15);border-radius:6px;color:var(--gold2);font-size:.85rem;font-weight:800;font-family:'Nunito',sans-serif;padding:4px 9px;cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent}
.acc-btn:hover{background:rgba(245,166,35,.2);border-color:var(--gold)}
.hint-btn{background:rgba(58,134,255,.12);border:1.5px solid rgba(58,134,255,.25);border-radius:6px;color:#93c5fd;font-size:.72rem;font-weight:800;font-family:'Nunito',sans-serif;padding:5px 12px;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent}
.hint-btn:hover{background:rgba(58,134,255,.2)}
.hint-box{display:none;background:rgba(58,134,255,.08);border:1px solid rgba(58,134,255,.2);border-radius:8px;padding:8px 12px;font-size:.78rem;color:#93c5fd;font-weight:700;animation:panelIn .25s ease}
.hint-box.show{display:block}
.answer-reveal{font-family:'Bangers',cursive;font-size:1.1rem;letter-spacing:2px;color:var(--gold2);background:rgba(245,166,35,.1);border:2px solid rgba(245,166,35,.3);border-radius:6px;padding:6px 14px;display:inline-block;margin-top:4px;box-shadow:2px 2px 0 rgba(0,0,0,.3)}
.level-track{display:flex;gap:4px;align-items:center;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
.level-step{display:flex;align-items:center;gap:3px;font-size:.65rem;font-weight:800;padding:3px 8px;border-radius:99px;border:1.5px solid rgba(255,255,255,.1);color:#374151;background:rgba(255,255,255,.04)}
.level-step.active{border-color:var(--gold);color:var(--gold);background:rgba(245,166,35,.1)}
.level-step.done{border-color:var(--green);color:var(--green);background:rgba(6,214,160,.1)}

/* ── RESULT CARD ── */
.result-card{background:var(--card);border:3px solid var(--gold);box-shadow:6px 6px 0 rgba(245,166,35,.3),0 0 40px rgba(245,166,35,.15);overflow:hidden;margin-top:16px;animation:resultPop .6s cubic-bezier(.175,.885,.32,1.275);position:relative}
@keyframes resultPop{from{opacity:0;transform:scale(.6) rotate(-3deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.result-banner{height:180px;position:relative;overflow:hidden;border-bottom:3px solid var(--gold)}
.result-banner img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.result-banner-overlay{position:absolute;inset:0;background:linear-gradient(0deg,var(--card) 0%,rgba(0,0,0,.1) 60%)}
.result-banner-emoji{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:5rem;background:linear-gradient(135deg,#0a0d1a,#1a1030)}
.result-lines{position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 100%,transparent 0deg,transparent 4deg,rgba(255,255,255,.03) 4deg,rgba(255,255,255,.03) 5deg);pointer-events:none}
.result-score-overlay{position:absolute;bottom:10px;left:0;right:0;text-align:center;z-index:5}
.result-score-big{font-family:'Bangers',cursive;font-size:5rem;letter-spacing:2px;line-height:1;-webkit-text-stroke:3px #000;color:var(--gold);filter:drop-shadow(0 0 20px rgba(245,166,35,.6));text-shadow:4px 4px 0 #000}
.result-body{padding:18px 16px;text-align:center}
.result-title{font-family:'Bangers',cursive;font-size:clamp(1.3rem,5vw,1.9rem);letter-spacing:3px;color:var(--gold2);margin-bottom:4px}
.result-stars{font-size:1.2rem;letter-spacing:2px;margin:4px 0}
.result-gif-wrap{text-align:center;margin:10px 0}
.result-gif{width:100%;max-width:320px;border-radius:12px;border:3px solid var(--gold2);box-shadow:0 0 20px rgba(255,200,0,.3)}
.result-xp{font-family:'Bangers',cursive;font-size:1rem;letter-spacing:2px;color:var(--green);margin:8px 0 12px}

/* ══════════════════════════════════
   📱 RESPONSIVE MOBILE — CORRECTIONS COMPLÈTES
   ══════════════════════════════════ */

/* ── Base mobile-first (appliqué par défaut) ── */
.q-card {
  margin: 8px 4px !important;
  border-radius: 14px !important;
}
.opt {
  min-height: 56px !important;  /* Apple touch target */
  padding: 14px 12px !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.opt-key {
  min-width: 44px !important;
  height: 44px !important;
  font-size: 1.1rem !important;
}
.q-txt {
  font-size: clamp(1rem, 4.5vw, 1.25rem) !important;
  line-height: 1.4;
}
.speech-bubble {
  font-size: clamp(0.8rem, 3.5vw, 0.92rem) !important;
}
.result-score-big {
  font-size: clamp(3rem, 12vw, 5rem) !important;
}
.write-input {
  font-size: clamp(1rem, 4.5vw, 1.1rem) !important;
  min-height: 50px !important;
}
.acc-btn, .hint-btn {
  min-height: 44px !important;
  min-width: 44px !important;
}

/* ── Tablettes et desktop ── */
@media (min-width: 768px) {
  #quiz-sec { max-width: 660px; margin: 0 auto; }
  .q-card { margin: 14px auto !important; }
  .char-panel { flex-direction: row !important; height: 110px !important; }
  .char-panel-img { width: 100px !important; height: 110px !important; border-right: 3px solid var(--ink); border-bottom: 0 !important; }
}

/* ── Petits téléphones (<375px) ── */
@media (max-width: 375px) {
  .char-panel {
    flex-direction: column !important;
    height: auto !important;
  }
  .char-panel-img {
    width: 100% !important;
    height: 80px !important;
    border-right: 0 !important;
    border-bottom: 3px solid var(--ink) !important;
  }
  .speech-bubble {
    font-size: clamp(0.75rem, 4vw, 0.85rem) !important;
  }
  .q-txt {
    font-size: clamp(0.95rem, 5vw, 1.1rem) !important;
  }
  .opt {
    font-size: clamp(0.9rem, 4.5vw, 1rem) !important;
  }
  .accent-bar {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px !important;
  }
}

/* ── Très petits écrans (<320px) ── */
@media (max-width: 320px) {
  .q-txt { font-size: 0.95rem !important; }
  .opt { font-size: 0.9rem !important; min-height: 52px !important; }
  .result-score-big { font-size: clamp(2.5rem, 14vw, 4rem) !important; }
  .btn { font-size: 1rem !important; padding: 14px !important; }
}

/* ── Orientation portrait sur mobile ── */
@media (max-height: 600px) and (orientation: portrait) {
  .char-panel { height: auto !important; }
  .char-panel-img { height: 70px !important; }
  .result-banner { height: clamp(120px, 35vw, 160px) !important; }
  #quiz-sec { padding-bottom: 20px !important; }
}

/* ── Tactile : désactiver hover inutile ── */
@media (hover: none) and (pointer: coarse) {
  .opt:hover, .btn:hover, .isle:hover, .acc-btn:hover, .hint-btn:hover {
    transform: none !important;
  }
  .opt:active, .btn:active, .isle:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s;
  }
}

/* ── iOS fixes ── */
@supports (-webkit-touch-callout: none) {
  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  .qhdr {
    padding-top: env(safe-area-inset-top, 0);
  }
  .submit-wrap {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}