/* ================================================================
   SCHUKO MASTER — Kampe Games — Styles
   ================================================================ */

:root{--navy:#0B214A;--turq:#00E6BC;--lime:#04FFB4;--mint:#C5FFDF;--lemon:#FFFFAB;--fire:#E74C3C}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
html,body{width:100%;height:100%;overflow:hidden;font-family:'Baloo 2',cursive;background:var(--navy);touch-action:none}
body{padding-top:env(safe-area-inset-top);padding-top:constant(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-bottom:constant(safe-area-inset-bottom)}
#W{position:relative;width:100%;max-width:430px;margin:0 auto;height:100%;overflow:hidden;background:linear-gradient(180deg,#0B214A 0%,#0D2D5E 40%,#0F1B2D 100%)}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;transition:opacity .35s;z-index:10}
.scr.off{opacity:0;pointer-events:none;z-index:-1}
.btn{background:var(--turq);color:var(--navy);border:none;font-family:'Baloo 2',cursive;font-size:18px;font-weight:700;padding:14px 44px;border-radius:50px;cursor:pointer;box-shadow:0 4px 16px rgba(0,230,188,.3);transition:transform .1s;letter-spacing:.5px}
.btn:active{transform:scale(.96)}

/* ===== INTRO ===== */
#intro{align-items:center;justify-content:center;padding:20px;background:linear-gradient(180deg,#0B214A 0%,#0D2D5E 40%,#0F1B2D 100%)}
.intro-card{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;width:100%;gap:2px}
.intro-badge{font-size:50px;margin-bottom:0}
.intro-title{font-size:22px;font-weight:800;color:#fff;text-shadow:0 3px 16px rgba(0,0,0,.5);margin-bottom:6px;text-align:center}
.intro-av{width:200px;height:262px;object-fit:contain;filter:drop-shadow(0 4px 24px rgba(0,0,0,.6));margin-bottom:-36px;position:relative;z-index:1}
.intro-bub{position:relative;z-index:2;background:#fff;color:var(--navy);padding:18px 22px;border-radius:22px;box-shadow:0 4px 24px rgba(0,0,0,.35);font-size:15px;font-weight:600;line-height:1.4;text-align:center;margin-bottom:18px;width:100%}

/* ===== HUD ===== */
.hud{position:absolute;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;padding-right:66px;background:linear-gradient(180deg,rgba(11,33,74,.95)0%,rgba(11,33,74,.4)70%,transparent 100%);padding-bottom:28px;pointer-events:none}
.hud>*{pointer-events:auto}
.hud-left{display:flex;align-items:center;gap:8px}
.hud-phase{background:rgba(0,0,0,.35);padding:4px 12px;border-radius:16px;color:rgba(255,255,255,.8);font-size:13px;font-weight:600}
.hud-score{background:rgba(0,0,0,.35);padding:4px 12px;border-radius:16px;color:var(--turq);font-size:14px;font-weight:700}
.hud-lives{display:flex;gap:3px}
.hud-heart{font-size:20px;transition:all .3s ease}
.hud-heart.lost{opacity:.2;transform:scale(.7)}
@keyframes livesShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.hud-lives.shaking{animation:livesShake .3s ease-out}

/* ===== PLAY BODY ===== */
.play-body{position:relative;z-index:10;flex:1;display:flex;flex-direction:column;padding-top:48px;overflow:hidden}

/* ===== MISSION BAR ===== */
.mission-bar{display:flex;align-items:center;gap:8px;padding:6px 12px;flex-shrink:0;background:rgba(0,230,188,.08);border-bottom:1px solid rgba(0,230,188,.15)}
.mission-text{flex:1;color:var(--turq);font-size:13px;font-weight:700;line-height:1.25}
.mission-hint{width:36px;height:36px;border-radius:50%;background:rgba(255,255,171,.15);border:2px solid rgba(255,255,171,.3);color:var(--lemon);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;padding:0}
.mission-hint:active{transform:scale(.92)}
.mission-hint.pulse{animation:hintPulse 1.5s ease-in-out infinite}
.mission-hint.used{opacity:.35;pointer-events:none}
@keyframes hintPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,171,0)}50%{box-shadow:0 0 0 6px rgba(255,255,171,.35)}}

/* ===== CIRCUIT / SCHUKO SVG AREA ===== */
.circuit-area{flex:0 1 auto;display:flex;align-items:center;justify-content:center;padding:5px 10px 2px;min-height:0;overflow:hidden}
.circuit-area svg{width:100%;height:auto}

/* SVG terminals (bornes) */
.circuit-area .terminal{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.3);stroke-width:2;cursor:pointer;transition:all .3s}
.circuit-area .terminal.highlight{stroke:var(--lemon);stroke-width:3;fill:rgba(255,255,171,.25);filter:drop-shadow(0 0 8px rgba(255,255,171,.6));animation:termPulse 1s ease-in-out infinite}
.circuit-area .terminal.filled{fill:var(--lime);stroke:var(--lime);filter:drop-shadow(0 0 6px rgba(4,255,180,.5))}
.circuit-area .terminal.error{fill:var(--fire);stroke:var(--fire);animation:shake .4s}
.circuit-area .terminal-label{fill:rgba(255,255,255,.85);font-size:10px;font-weight:700;font-family:'Baloo 2',cursive;pointer-events:none}
.circuit-area .terminal-label.highlight-label{fill:var(--lemon);font-size:11px}
.circuit-area .terminal-hit{fill:transparent;stroke:none;cursor:pointer}

/* SVG wires */
.circuit-area .wire{stroke-width:3;stroke-dasharray:6 4;transition:all .4s;cursor:default}
.circuit-area .wire-empty{stroke:rgba(255,255,255,.3)}
.circuit-area .wire-connected{stroke-dasharray:none;filter:drop-shadow(0 0 6px rgba(4,255,180,.4))}
.circuit-area .wire-error{stroke:var(--fire);stroke-dasharray:none}
.circuit-area .wire-drop{stroke:transparent;stroke-width:28;fill:none;cursor:pointer;pointer-events:stroke}

/* (N2 error zones removed — now uses images + multiple choice) */

@keyframes termPulse{0%,100%{stroke-width:3;filter:drop-shadow(0 0 6px rgba(255,255,171,.4))}50%{stroke-width:4;filter:drop-shadow(0 0 12px rgba(255,255,171,.8))}}

/* ===== CHARACTER ROW ===== */
.char-row{display:flex;align-items:center;gap:8px;padding:4px 10px;padding-bottom:0;flex-shrink:0;min-height:0}
.char-av{width:120px;height:157px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));flex-shrink:0}
.char-bubble{background:rgba(255,255,255,.1);color:#fff;font-size:13px;font-weight:600;padding:8px 12px;border-radius:14px;line-height:1.3;flex:1;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.char-bubble.show{opacity:1;transform:translateY(0)}

/* ===== CABLE TRAY (N1) ===== */
.cable-tray{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;flex-shrink:0;padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
.cable-tray.has-chips{background:linear-gradient(180deg,rgba(255,255,255,.06)0%,rgba(255,255,255,.02)100%);border-top:1px solid rgba(255,255,255,.1)}
.cable-tray.hidden{display:none}
.cable-chip{width:60px;height:38px;padding:0;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:grab;font-size:13px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s,opacity .15s;box-shadow:0 2px 10px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.15)}
.cable-chip:active{transform:scale(1.06)}
.cable-chip.dragging{opacity:.25}
.cable-chip.used{opacity:.3;pointer-events:none}

/* Cable colors */
.cable-marron{background:#8B5E3C;border:2px solid #6B4020}
.cable-azul{background:#2E86C1;border:2px solid #1A5276}
.cable-negro{background:#1B1B1B;border:2px solid #000}
.cable-gris{background:#555;border:2px solid #333}
.cable-verde-amarillo{background:repeating-linear-gradient(135deg,#27AE60 0px,#27AE60 5px,#F1C40F 5px,#F1C40F 10px);border:2px solid #1E8449}

/* ===== N2 ERROR IMAGE ===== */
.n2-error-img{width:95%;max-height:95%;object-fit:contain;border-radius:12px;margin:0 auto;display:block}

/* ===== ERROR TRAY (N2) ===== */
.error-tray{display:none;padding:6px 12px;flex-shrink:0;text-align:center}
.error-tray.show{display:block}
.error-tray .error-counter{color:var(--turq);font-size:14px;font-weight:700}
.n2-options{display:flex;flex-direction:column;gap:6px}
.n2-option{background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.15);border-radius:12px;padding:10px 14px;cursor:pointer;transition:all .2s;color:#fff;font-size:13px;font-weight:700;text-align:center;font-family:'Baloo 2',cursive}
.n2-option:active{transform:scale(.97)}
.n2-option.correct{border-color:var(--lime);background:rgba(4,255,180,.15);color:var(--lime)}
.n2-option.wrong{border-color:var(--fire);background:rgba(231,76,60,.15);color:var(--fire);animation:shake .35s ease-out}

/* ===== TIMER WRAP (N3) ===== */
.timer-wrap{display:none;padding:6px 12px;flex-shrink:0}
.timer-wrap.show{display:block}

/* ===== CHECK TRAY (N3) — drag to reorder ===== */
.check-tray{display:none;flex-direction:column;gap:6px;padding:6px 12px;flex-shrink:0}
.check-tray.show{display:flex}
.check-row{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.15);border-radius:12px;padding:8px 10px;cursor:grab;transition:border-color .2s,background .2s;touch-action:none}
.check-row:active{cursor:grabbing}
.check-num{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.12);color:var(--turq);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Baloo 2',cursive}
.check-text{flex:1;color:#fff;font-size:12px;font-weight:700;font-family:'Baloo 2',cursive;line-height:1.2}
.check-grip{color:rgba(255,255,255,.3);font-size:16px;flex-shrink:0;cursor:grab}
.check-row.correct{border-color:var(--lime);background:rgba(4,255,180,.15)}
.check-row.correct .check-num{background:var(--lime);color:var(--navy)}
.check-row.correct .check-text{color:var(--lime)}
.check-row.wrong{border-color:var(--fire);background:rgba(231,76,60,.15);animation:shake .35s ease-out}
.check-row.wrong .check-num{background:var(--fire);color:#fff}
.check-row.wrong .check-text{color:var(--fire)}
.check-row.check-dragging{position:fixed;z-index:500;opacity:.9;box-shadow:0 8px 32px rgba(0,0,0,.5);pointer-events:none;border-color:var(--turq)}
.check-placeholder{background:rgba(0,230,188,.08);border:2px dashed rgba(0,230,188,.3);border-radius:12px;transition:height .15s}
.check-confirm{margin-top:4px;font-size:15px;padding:10px 30px;align-self:center}

/* ===== VERDICT AREA (N3) ===== */
.verdict-area{display:none;flex-direction:column;gap:12px;padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom));flex-shrink:0;margin-bottom:8px}
.verdict-area.show{display:flex}
.timer-bar{width:100%;height:8px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden}
.timer-fill{width:100%;height:100%;background:var(--turq);border-radius:4px;transition:width linear}
.timer-fill.warning{background:var(--fire)}
.verdict-btns{display:flex;gap:12px;justify-content:center}
.verdict-btn{flex:1;max-width:160px;padding:14px 10px;border-radius:16px;font-family:'Baloo 2',cursive;font-size:16px;font-weight:700;cursor:pointer;transition:all .15s;border:2px solid}
.verdict-btn:active{transform:scale(.96)}
.verdict-ok{background:rgba(4,255,180,.1);border-color:var(--lime);color:var(--lime)}
.verdict-no{background:rgba(231,76,60,.1);border-color:var(--fire);color:var(--fire)}
.verdict-btn.correct{background:rgba(4,255,180,.3);box-shadow:0 0 16px rgba(4,255,180,.3)}
.verdict-btn.wrong{animation:shake .35s ease-out}
.verdict-btn.disabled{opacity:.3;pointer-events:none}

/* ===== DRAG GHOST ===== */
.drag-ghost{position:fixed;z-index:500;pointer-events:none;display:none}
.drag-ghost.active{display:flex}

/* ===== FEEDBACK OVERLAY ===== */
.feedback-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(11,33,74,.93);z-index:60;opacity:0;pointer-events:none;transition:opacity .3s;padding:20px}
.feedback-overlay.show{opacity:1;pointer-events:auto}
.fb-av{width:200px;height:262px;object-fit:contain;filter:drop-shadow(0 4px 20px rgba(0,0,0,.5));margin-bottom:10px}
.fb-text{color:#fff;font-size:17px;font-weight:700;text-align:center;line-height:1.4;margin-bottom:4px}
.fb-sub{color:var(--lemon);font-size:13px;font-weight:600;text-align:center;max-width:320px;line-height:1.3;margin-bottom:16px}
.fb-btn{font-size:16px;padding:12px 36px}

/* ===== FLASH OVERLAY ===== */
.flash-overlay{position:fixed;inset:0;z-index:999;pointer-events:none;opacity:0}
.flash-overlay.flash-green{background:var(--lime);animation:flashAnim .35s ease-out forwards}
.flash-overlay.flash-red{background:var(--fire);animation:flashAnim .35s ease-out forwards}
@keyframes flashAnim{0%{opacity:.3}100%{opacity:0}}

/* ===== RESULTS ===== */
#results{align-items:center;justify-content:center;padding:16px 20px;z-index:200;background:var(--navy)}
.res-inner{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;width:100%;gap:4px}
.res-badge{color:var(--turq);font-size:15px;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px}
.res-scores{display:flex;gap:28px;margin-bottom:4px}
.res-col{text-align:center}
.res-val{font-size:38px;font-weight:800;color:var(--lime)}
.res-record-val{color:var(--lemon)}
.res-label{font-size:12px;color:rgba(255,255,255,.5);font-weight:600}
.res-new{color:var(--lemon);font-size:15px;font-weight:800;display:none}
.res-new.show{display:block;animation:popIn .3s ease-out}
.res-av{width:200px;height:262px;object-fit:contain;filter:drop-shadow(0 4px 22px rgba(0,0,0,.5));margin-bottom:-40px;position:relative;z-index:1}
.res-msg{position:relative;z-index:2;background:var(--navy);border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:16px 22px;width:100%;max-width:340px;color:#fff;font-size:15px;font-weight:600;text-align:center;line-height:1.3}
#results .btn{margin-top:14px}

/* ===== ANIMATIONS ===== */
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.shake{animation:shake .4s ease-out}
@keyframes popIn{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.pop-in{animation:popIn .25s ease-out}
@keyframes slideUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
.slide-up{animation:slideUp .3s ease-out}