*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% 0,#263d69,#070b15 70%);color:#f8f9ff;font-family:system-ui,Segoe UI,sans-serif;min-height:100vh}.hud{height:72px;padding:10px 22px;background:#080d18ee;border-bottom:1px solid #ffffff22;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:5}.logo{font-size:14px}.logo:first-letter{color:#ffd76a}.logo small{display:block;color:#94a1bc;font-size:10px;margin-top:3px}.stats{font-size:14px}.screen{display:none;min-height:calc(100vh - 105px);padding:28px 16px}.screen.active{display:block}.hero{max-width:820px;margin:5vh auto;text-align:center;padding:50px 20px}.magic{color:#ffd66a;letter-spacing:4px;font-size:12px}.hero h1{font-size:clamp(50px,9vw,92px);line-height:.9;margin:22px 0}.hero p{max-width:650px;margin:0 auto 28px;color:#c6d0e3;line-height:1.7;font-size:17px}.hero input{background:#101a30;border:1px solid #ffffff25;border-radius:12px;padding:14px 16px;color:white;width:280px;font-size:16px;margin-bottom:12px}.hero>small{display:block;color:#71809e;margin-top:25px}.panel{max-width:1150px;margin:auto;background:#101a30ee;border:1px solid #ffffff1e;border-radius:24px;padding:24px;box-shadow:0 25px 70px #0008}.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.top small{color:#ffd66a;letter-spacing:2px}.top h2{font-size:34px;margin:5px 0}button{border:1px solid #ffffff20;background:#ffffff10;color:white;padding:12px 17px;border-radius:12px;font-weight:750;cursor:pointer;margin:4px}button:hover{transform:translateY(-2px);background:#ffffff1b}.gold{background:linear-gradient(135deg,#ffd86a,#ff9765);color:#111522;border:0}.rpg{max-width:1200px;margin:auto;display:grid;grid-template-columns:265px 1fr;gap:18px}.sidebar,.arena{background:#101a30ee;border:1px solid #ffffff20;border-radius:22px;padding:16px}.portrait{text-align:center;background:#ffffff08;border-radius:18px;padding:10px}.portrait img{width:100%;height:190px;object-fit:contain}.portrait b{display:block}.sidebar #dialogue{min-height:130px;padding:17px 7px;color:#cbd4e7;line-height:1.5}.realmLabel{display:block;color:#ffd66a;letter-spacing:2px;font-size:11px;margin-bottom:6px}.bar,.master{height:11px;background:#ffffff10;border-radius:20px;overflow:hidden}.bar span,.master span{display:block;height:100%;width:0;background:#ffd66a;transition:.4s}.tiny{font-size:12px;color:#9ba8c1;margin:12px 0}.scene{height:285px;border-radius:18px;background:linear-gradient(#11233b,#0a1423);display:flex;align-items:center;justify-content:center}.trees{text-align:center;font-size:39px;line-height:2}.challenge{margin-top:15px;background:#0a1220;border-radius:18px;padding:20px}.qmeta{display:flex;justify-content:space-between;color:#8290aa;font-size:12px}.question{text-align:center;font-size:20px;line-height:1.6;margin:18px 0}.answers{display:grid;grid-template-columns:1fr 1fr;gap:10px}.answers button{text-align:left;background:#192844}.answers button.correct{outline:3px solid #5de39a}.answers button.wrong{outline:3px solid #ff6d79}.feedback{text-align:center;min-height:42px;padding:10px}.book article{background:#ffffff08;padding:22px;border-radius:18px;margin-bottom:16px}.formula{text-align:center;font-size:22px}.master{margin:10px 0}.victory{text-align:center;margin-top:10vh}.victory>div{font-size:100px}.victory h1{font-size:54px}.victory small{color:#ffd66a;letter-spacing:3px}.victory p{color:#c8d1e4;font-size:18px}footer{text-align:center;color:#75819b;font-size:11px;padding:12px}
.challenge{overflow-wrap:anywhere}.question{max-width:900px;margin-left:auto;margin-right:auto}.question mjx-container{font-size:1.05em}.formula mjx-container{max-width:100%;overflow-x:auto;overflow-y:hidden}.answers button{min-height:54px}.tools{text-align:center;margin-top:8px}

/* ---------- Carte de Mathéméria : plan libre, position absolue, taille explicite à chaque palier ---------- */
.worldmap{isolation:isolate;position:relative;overflow:hidden;outline:none;border-radius:20px;border:1px solid #ffffff15;background:radial-gradient(circle at 25% 70%,#315c3855,transparent 25%),radial-gradient(circle at 75% 30%,#55457a44,transparent 25%),#0c1728;height:560px;touch-action:none}
.map-stars{position:absolute;inset:0;opacity:.32;background-image:radial-gradient(circle,#fff 1px,transparent 1.5px);background-size:47px 53px;animation:stars 18s linear infinite;pointer-events:none}
@keyframes stars{from{background-position:0 0}to{background-position:47px 53px}}
#realmLayer{position:absolute;inset:0;z-index:2}
.realm{position:absolute;transform:translate(-50%,-50%);width:118px;height:100px;margin:0;padding:10px 8px;border:1px solid #ffffff22;border-radius:18px;background:linear-gradient(145deg,#1b3154,#12223b);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;color:#fff;box-shadow:0 10px 22px #0007;overflow:hidden;cursor:default;pointer-events:none}
.realm span{font-size:12px;font-weight:800;text-align:center;line-height:1.2}
.realm small{font-size:9px;color:#aebbd0;text-align:center}
.realm .status{position:absolute;top:7px;right:9px;font-size:9px;color:#aebbd0;letter-spacing:1px}
.realm.active{border-color:#ffd66a99;box-shadow:0 0 0 1px #ffd66a22,0 12px 26px #0008}
.realm.active .status{color:#ffd66a}
.realm.locked{opacity:.4}
.realm.locked .avatarMini{filter:grayscale(.7)}
.avatarMini{height:52px;width:60px;display:flex;justify-content:center;align-items:center;overflow:hidden;border-radius:12px;background:#07111f;border:1px solid #ffffff18;box-shadow:inset 0 0 16px #0008}
.avatarMini img{height:100%;width:100%;object-fit:contain}

.heroSprite{position:absolute;z-index:4;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid #ffd66a;box-shadow:0 6px 18px #000a,0 0 0 4px #ffd66a22;display:flex;align-items:center;justify-content:center;font-size:22px;transition:left .08s linear,top .08s linear}

.realmPrompt{position:absolute;z-index:6;transform:translate(-50%,-118%);background:#101a30f2;border:1px solid #ffd66a55;border-radius:16px;padding:12px 14px;display:flex;gap:10px;align-items:center;min-width:230px;box-shadow:0 15px 35px #000a;pointer-events:auto}
.realmPrompt.hidden{display:none}
.realmPrompt .portraitSmall{width:44px;height:44px;border-radius:10px;overflow:hidden;background:#07111f;flex:none;display:flex;align-items:center;justify-content:center}
.realmPrompt .portraitSmall img{width:100%;height:100%;object-fit:contain}
.realmPrompt .promptText{flex:1;min-width:0}
.realmPrompt .promptText b{display:block;font-size:13px}
.realmPrompt .promptText small{display:block;color:#9ba8c1;font-size:10px;line-height:1.4}
.realmPrompt .promptActions{display:flex;flex-direction:column;gap:4px}
.realmPrompt .promptActions button{margin:0;padding:7px 10px;font-size:11px}

.dpad{display:none;position:absolute;z-index:7;left:14px;bottom:14px;width:132px;height:132px;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,42px);gap:4px}
.dpadBtn{background:#101a30cc;border:1px solid #ffd66a55;border-radius:10px;color:#ffd66a;font-size:16px;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;touch-action:none;padding:0;margin:0}
.dpadUp{grid-column:2;grid-row:1}.dpadLeft{grid-column:1;grid-row:2}.dpadRight{grid-column:3;grid-row:2}.dpadDown{grid-column:2;grid-row:3}

@media(max-width:800px){
  .hud{height:auto;gap:8px;align-items:flex-start;flex-direction:column}
  .rpg{grid-template-columns:1fr}
  .portrait{display:flex;align-items:center;gap:10px;text-align:left}
  .portrait img{width:100px;height:100px}
  .sidebar #dialogue{min-height:80px}
  .answers{grid-template-columns:1fr}
  .screen{padding:14px 10px}
  .panel,.sidebar,.arena{padding:14px}
  .top h2{font-size:26px}
  .question{font-size:18px;line-height:1.75}
  .formula{font-size:19px;overflow-x:auto}
  .worldmap{height:420px}
  .dpad{display:grid}
  .realm{width:96px;height:82px}
  .realm .avatarMini{height:42px;width:48px}
  .realm span{font-size:11px}
  .heroSprite{width:38px;height:38px;font-size:19px}
  .realmPrompt{min-width:190px;padding:10px}
  .avatarGrid{gap:8px}
  .avatarChoiceImg{height:52px;width:52px}
}
@media(max-width:520px){
  .worldmap{height:340px}
  .realm{width:82px;height:72px}
  .realm .avatarMini{height:36px;width:42px}
  .realm span{font-size:10px}
  .realm small{display:none}
  .dpad{left:10px;bottom:10px;width:118px;height:118px;grid-template-columns:repeat(3,37px);grid-template-rows:repeat(3,37px)}
}

/* ---------- Création du héros ---------- */
.avatarPicker{max-width:440px;margin:0 auto 18px}
.avatarPickerLabel{display:block;color:#ffd66a;letter-spacing:2px;margin-bottom:10px;font-size:11px}
.avatarGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.avatarChoice{background:#101a30;border:2px solid #ffffff20;border-radius:14px;padding:10px 6px;color:#c6d0e3;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font-size:11px;font-weight:700}
.avatarChoice:hover{border-color:#ffd66a77;transform:translateY(-2px)}
.avatarChoice.selected{border-color:#ffd66a;background:#1b2c4a;color:#ffd66a;box-shadow:0 0 0 1px #ffd66a55}
.avatarChoiceImg{height:64px;width:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:32px;box-shadow:inset 0 0 20px #00000033,0 6px 14px #0006}
.mapHint{text-align:center;color:#8fa0c6;font-size:12px;margin:6px 0 16px}

/* ---------- Mode Révision ---------- */
.revisionMenu{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.revisionMenu button{width:100%;text-align:left;background:linear-gradient(145deg,#1b3154,#12223b);border:1px solid #ffffff22;border-radius:16px;padding:14px 18px;color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;transition:transform .15s,border-color .15s}
.revisionMenu button:hover{transform:translateX(4px);border-color:#ffd66a77}
.revisionMenu button small{display:block;color:#9ba8c1;font-weight:500;font-size:11px;margin-top:3px}
.revisionMenu button.revAll{background:linear-gradient(145deg,#7a4b1e,#c98a2c);border-color:#ffd66a99}
.revisionMenu button.revDisabled{opacity:.4;cursor:not-allowed;transform:none!important}
.revScoreBadge{color:#ffd66a;font-size:20px;font-weight:800}

/* ---------- Bac blanc chronométré ---------- */
.examTimerBox{font-size:30px;font-weight:800;color:#ffd66a;text-align:center;padding:8px 0 14px;letter-spacing:1px}
.examTimerLow{color:#ff6d79;animation:examPulse 1s infinite}
@keyframes examPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- Suivi de progression ---------- */
.progressRow{background:linear-gradient(145deg,#1b3154,#12223b);border:1px solid #ffffff22;border-radius:14px;padding:12px 16px;margin-bottom:10px}
.progressRow .rowTop{display:flex;justify-content:space-between;align-items:baseline;font-weight:800}
.progressRow small{color:#9ba8c1}
.progressRow .bar{margin-top:8px}
.examHistRow{display:flex;justify-content:space-between;align-items:center;background:#ffffff08;border-radius:10px;padding:10px 14px;margin-bottom:6px;font-size:13px;gap:10px}
.examHistRow b{color:#ffd66a}
.examHistEmpty{color:#8fa0c6;font-size:13px;text-align:center;padding:20px}