/* mag.css — shared styles for the Magellan Academy graphics/gamification layer.
   Loaded on every page. Additive only; scoped under .mag-* so it can't collide
   with the existing site CSS. Delete-safe. See GRAPHICS-GAMIFICATION-PLAN.md.    */

/* ---- toast host (reused by FX + badge popups) ------------------------- */
#mag-toasts{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:8px; z-index:9999; pointer-events:none;
  width:min(92vw,420px);
}
.mag-toast{
  pointer-events:auto; background:var(--card,#fff); color:var(--ink,#14202b);
  border:1px solid var(--line,#d9e6e6); border-radius:12px;
  padding:10px 14px; font:600 14px/1.35 var(--font,system-ui,sans-serif);
  box-shadow:0 8px 30px rgba(0,0,0,.14);
  opacity:0; transform:translateY(12px); transition:opacity .35s ease, transform .35s ease;
}
.mag-toast.in{ opacity:1; transform:translateY(0); }
.mag-toast.good{ border-color:var(--accent2,#2ca6a4); }
.mag-toast.win{ border-color:var(--accent,#e8a33d); }

/* ---- XP bar base (Cluster B fills this with a View-Transition) --------- */
.mag-xpbar{ height:8px; border-radius:99px; background:var(--line,#e3ecec); overflow:hidden; }
.mag-xpbar > i{ display:block; height:100%; background:linear-gradient(90deg,var(--accent2,#2ca6a4),var(--accent,#e8a33d)); width:0; transition:width .6s cubic-bezier(.2,.7,.2,1); }

/* ---- floating mute button (Cluster B) --------------------------------- */
#mag-mute{
  position:fixed; left:14px; bottom:96px; z-index:9989; /* above the profile dock (#mag-dock owns the corner) */
  width:40px; height:40px; border-radius:50%; line-height:1;
  border:1px solid var(--line,#d9e6e6); background:var(--card,#fff);
  font-size:18px; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.12);
  transition:transform .15s ease;
}
#mag-mute:hover{ transform:translateY(-2px); }
#mag-mute:focus-visible{ outline:2px solid var(--accent2,#2ca6a4); outline-offset:2px; }

/* ---- #/map conquest map (Cluster A) ----------------------------------- */
.mag-map-head{ padding:20px 20px 6px; }
.mag-map-head h1{ margin:0 0 4px; }
.mag-map-head p{ margin:0 0 10px; color:var(--ink2,#57677a); font-size:14px; }
.mag-map-legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink2,#57677a); }
.mag-map-legend i.mm{ display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:5px; vertical-align:-1px; border:2px solid #fff; box-shadow:0 0 0 1px #cdd9d9; }
.mag-map-legend i.av{ background:rgba(44,166,164,.3); }
.mag-map-legend i.ip{ background:rgba(44,166,164,.85); }
.mag-map-legend i.ma{ background:#2ca6a4; box-shadow:0 0 0 2px #e8a33d; }
.mag-map-legend i.pf{ background:#e8a33d; box-shadow:0 0 0 1px #b9791f; }
#mag-map{ width:100%; height:calc(100vh - 210px); min-height:360px; }
#mag-map-fab{ position:fixed; right:14px; bottom:14px; z-index:9999; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; text-decoration:none; background:var(--card,#fff); border:1px solid var(--line,#d9e6e6); box-shadow:0 4px 14px rgba(0,0,0,.14); }

/* ---- #/lesson explorables (Cluster C) --------------------------------- */
.mag-explore{ margin:26px 0; padding:18px; border:1px solid var(--line,#d9e6e6); border-radius:14px; background:color-mix(in srgb, var(--card,#fff) 100%, transparent); }
.mag-explore > h2{ margin:0 0 12px; font-size:18px; }
.mag-x{ margin:0 0 18px; padding:14px; border-radius:12px; background:var(--bg,#eef4f4); }
.mag-x:last-child{ margin-bottom:0; }
.mag-x h3{ margin:0 0 6px; font-size:15px; }
.mx-intro{ margin:0 0 10px; font-size:13px; color:var(--ink2,#57677a); }
.mx-graph, .mx-echart{ width:100%; }
.mx-echart{ height:280px; }
.mx-svg{ width:100%; height:auto; display:block; }
.mx-axis{ stroke:var(--line,#cdd9d9); stroke-width:1; }
.mx-path{ stroke:var(--accent2,#2ca6a4); stroke-width:2.5; }
.mx-guide{ stroke:var(--accent,#e8a33d); stroke-width:1; stroke-dasharray:3 3; }
.mx-dot{ fill:var(--accent,#e8a33d); stroke:#fff; stroke-width:1.5; }
.mx-axl{ fill:var(--ink2,#57677a); font-size:10px; }
.mx-controls{ display:flex; flex-direction:column; gap:8px; margin:10px 0; }
.mx-ctl{ display:grid; grid-template-columns:1fr 1.4fr auto; align-items:center; gap:10px; font-size:13px; }
.mx-ctl input[type=range]{ width:100%; accent-color:var(--accent2,#2ca6a4); }
.mx-val{ min-width:64px; text-align:right; font-variant-numeric:tabular-nums; }
.mx-out{ display:flex; justify-content:space-between; align-items:baseline; padding:8px 10px; border-radius:8px; background:var(--card,#fff); border:1px solid var(--line,#d9e6e6); }
.mx-out .mx-y{ font-size:18px; color:var(--primary,#0d5c63); font-variant-numeric:tabular-nums; }
.mx-src{ margin:8px 0 0; font-size:11px; color:var(--ink2,#57677a); }
.mx-src a{ color:inherit; }
.mx-step{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; padding:8px 0; }
.mx-step.in{ opacity:1; transform:none; }
.mx-fig{ font-size:30px; }
.mx-fallback{ color:var(--ink2,#57677a); font-size:13px; }
/* semantic zoom (technique 13) */
.mz-stage{ display:flex; align-items:center; justify-content:center; height:170px; background:radial-gradient(circle at 50% 45%, #fff, var(--bg,#eef4f4)); border-radius:12px; overflow:hidden; }
.mz-level{ display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.mz-glyph{ font-size:58px; line-height:1; }
.mz-label{ font-weight:700; font-size:15px; }
.mz-scale{ font-size:12px; color:var(--ink2,#57677a); font-variant-numeric:tabular-nums; }
.mz-cap{ margin:8px 2px 0; min-height:34px; font-size:13px; color:var(--ink,#14202b); text-align:center; }
.mz-ctl{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.mz-ctl button{ border:1px solid var(--line,#d9e6e6); background:var(--card,#fff); border-radius:8px; padding:6px 10px; cursor:pointer; font-size:14px; }
.mz-range{ flex:1; accent-color:var(--accent2,#2ca6a4); }
.mz-dots{ display:flex; gap:6px; justify-content:center; margin-top:10px; }
.mz-dots i{ width:8px; height:8px; border-radius:50%; background:var(--line,#d9e6e6); }
.mz-dots i.on{ background:var(--accent2,#2ca6a4); transform:scale(1.3); }
.mz-dots i.past{ background:var(--accent,#e8a33d); }
.mz-level.zin{ animation:mzin .4s ease; }
.mz-level.zout{ animation:mzout .4s ease; }
@keyframes mzin{ from{ transform:scale(.55); opacity:0; } to{ transform:scale(1); opacity:1; } }
@keyframes mzout{ from{ transform:scale(1.6); opacity:0; } to{ transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .mx-step{ transition:none; } .mz-level.zin,.mz-level.zout{ animation:none; } }

/* ---- #/lesson 3D model + #/atlas (Cluster D) -------------------------- */
.mag-model{ margin:26px 0; }
.mag-model > h2{ margin:0 0 10px; font-size:18px; }
.mv-hs{ background:var(--accent,#e8a33d); border:2px solid #fff; border-radius:50%; width:18px; height:18px; padding:0; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.3); position:relative; }
.mv-lab{ position:absolute; left:22px; top:50%; transform:translateY(-50%); white-space:nowrap; background:rgba(20,32,43,.9); color:#fff; font:600 11px/1 var(--font,system-ui,sans-serif); padding:4px 7px; border-radius:6px; opacity:0; transition:opacity .15s; pointer-events:none; }
.mv-hs:hover .mv-lab, .mv-hs:focus .mv-lab{ opacity:1; }
.mv-ar{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); background:var(--primary,#0d5c63); color:#fff; border:0; border-radius:99px; padding:9px 16px; font:600 13px var(--font,system-ui); cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.2); }
.mv-cap{ margin:8px 0 0; font-size:13px; color:var(--ink,#14202b); }
.mv-attr{ margin:4px 0 0; font-size:11px; color:var(--ink2,#57677a); }
.mag-atlas-head{ padding:20px 20px 6px; }
.mag-atlas-head h1{ margin:0 0 4px; }
.mag-atlas-head p{ margin:0; color:var(--ink2,#57677a); font-size:14px; }
#mag-atlas-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; padding:16px 20px; }
.mag-atlas-card{ display:block; text-decoration:none; color:inherit; border:1px solid var(--line,#d9e6e6); border-radius:12px; overflow:hidden; background:var(--card,#fff); transition:transform .15s ease, box-shadow .15s ease; }
.mag-atlas-card:hover{ transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.12); }
.mag-atlas-card > span{ display:block; padding:9px 12px; font-weight:600; font-size:13px; }
@media (prefers-reduced-motion: reduce){ .mag-atlas-card:hover{ transform:none; } }

/* ---- #/play Answer Drop game (Cluster D bonus) ------------------------ */
.mag-play-wrap{ padding:16px 20px; max-width:640px; margin:0 auto; }
.mp-hud{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:14px; margin-bottom:8px; }
.mp-hud .back{ text-decoration:none; color:var(--ink2,#57677a); }
.mp-lives{ letter-spacing:2px; }
.mp-score{ color:var(--ink2,#57677a); font-variant-numeric:tabular-nums; }
.mp-q{ font-weight:600; font-size:16px; min-height:46px; padding:10px 12px; background:var(--card,#fff); border:1px solid var(--line,#d9e6e6); border-radius:10px; margin-bottom:10px; }
#mag-play{ display:block; width:100%; background:linear-gradient(180deg,var(--bg,#eef4f4),#dfeaea); border-radius:12px; border:1px solid var(--line,#d9e6e6); touch-action:manipulation; cursor:pointer; }
.mp-hint{ font-size:12px; color:var(--ink2,#57677a); text-align:center; margin:8px 0 0; }
.mp-end{ text-align:center; padding:30px 16px; }
.mp-end h2{ margin:0 0 8px; }
.mp-end-cta{ display:flex; gap:10px; justify-content:center; margin-top:14px; }
.mp-launch{ background:var(--accent2,#2ca6a4) !important; color:#fff !important; border-color:transparent !important; }

/* ---- scrollytelling reveal (technique 1) ------------------------------ */
.mag-reveal{ opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); will-change:opacity, transform; }
.mag-reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .mag-reveal{ opacity:1 !important; transform:none !important; transition:none; } }

/* ---- real image gallery (Wave 7, licensed) ---------------------------- */
.mag-pics{ margin:22px 0; }
.mag-pics > h2{ margin:0 0 4px; font-size:18px; }
.mp-note{ margin:0 0 12px; font-size:12px; color:var(--ink2,#57677a); }
.mp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.mp-fig{ margin:0; border:1px solid var(--line,#d9e6e6); border-radius:10px; overflow:hidden; background:var(--card,#fff); display:flex; flex-direction:column; }
.mp-fig img{ width:100%; height:120px; object-fit:cover; display:block; background:var(--bg,#eef4f4); }
.mp-fig figcaption{ padding:6px 8px; font-size:10px; line-height:1.35; color:var(--ink2,#57677a); }
.mp-lic{ color:var(--primary,#0d5c63); font-weight:600; }
.mp-fig a{ color:inherit; }
.mp-lightbox{ position:fixed; inset:0; z-index:10000; background:rgba(10,18,24,.86); display:flex; align-items:center; justify-content:center; padding:24px; cursor:zoom-out; }
.mp-lb-in{ position:relative; max-width:92vw; max-height:92vh; text-align:center; }
.mp-lb-in img{ max-width:92vw; max-height:80vh; border-radius:8px; background:#fff; }
.mp-lb-in p{ color:#e7eef0; font-size:12px; margin:10px 0 0; }
.mp-lb-in a{ color:#9fe0dd; }
.mp-lb-x{ position:absolute; top:-14px; right:-14px; width:34px; height:34px; border-radius:50%; border:0; background:#fff; cursor:pointer; font-size:15px; }

/* ---- utility ---------------------------------------------------------- */
.mag-hidden{ display:none !important; }
.mag-canvas-fx{ position:fixed; inset:0; pointer-events:none; z-index:9998; }

/* ---- respect reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .mag-toast{ transition:none; }
  .mag-xpbar > i{ transition:none; }
  #mag-mute:hover{ transform:none; }
  .mag-canvas-fx{ display:none !important; }   /* no confetti/particles */
}