/* ---------------------------------------------------------------------------
   Shared learning sheet. Both modes — tap-on-screen (index.html) and
   scan-the-poster (scan.html) — open the SAME panel, so a class that learns
   one interface has learned both.
   --------------------------------------------------------------------------- */
:root{
  --blue:#1783FF;
  --blue-deep:#0B57C7;
  --ink:#0B1A33;
  --ink-soft:#41546F;
  --cyan:#4FE3FF;
  --paper:#F4F8FF;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:'Heebo',system-ui,sans-serif;color:var(--ink)}

.scrim{position:fixed;inset:0;z-index:50;background:rgba(6,14,28,.55);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .28s ease}
.scrim.on{opacity:1;pointer-events:auto}

.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:51;
  max-height:min(86vh,780px);
  border-radius:26px 26px 0 0;overflow:hidden;
  background:linear-gradient(180deg,#0B1A33 0%,#122A4E 46%,#0B1A33 100%);
  color:#fff;
  transform:translateY(102%);transition:transform .38s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;
  box-shadow:0 -18px 60px rgba(6,14,28,.5);
  padding-bottom:env(safe-area-inset-bottom);
}
.sheet.on{transform:translateY(0)}
.sheet.tall{height:78vh}
.grab{width:46px;height:5px;border-radius:99px;background:rgba(255,255,255,.28);margin:10px auto 2px;flex:none}
.sheet header{padding:6px 20px 10px;flex:none;display:flex;align-items:flex-start;gap:12px}
.sheet header .txt{flex:1;min-width:0}
.sheet h2{font-size:1.28rem;font-weight:900;letter-spacing:-.02em}
.sheet h2 small{display:block;font-size:.82rem;font-weight:500;color:#9EC4F2;margin-top:2px;letter-spacing:0}
.closebtn{flex:none;width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.1rem;line-height:1;font-family:inherit}

/* the hologram stage inside the sheet (screen mode only) */
.holo{position:relative;flex:none;height:min(38vh,300px);min-height:190px;margin:0 14px;
  border-radius:20px;overflow:hidden;background-color:#0A182F;
  box-shadow:inset 0 0 0 1px rgba(79,227,255,.22)}
.holo::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(79,227,255,.055) 0 2px, transparent 2px 5px)}
.holo::after{content:'';position:absolute;left:22%;right:22%;bottom:10px;height:16px;z-index:1;
  background:radial-gradient(50% 50% at 50% 50%, rgba(79,227,255,.55) 0%, rgba(79,227,255,0) 72%);
  border-radius:50%}
model-viewer{width:100%;height:100%;position:relative;z-index:1;--poster-color:transparent;background:transparent}
.holo .loading{position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  color:#8FD8EC;font-size:.9rem;font-weight:600;pointer-events:none;transition:opacity .3s}
.holo .loading.gone{opacity:0}

.sheet .body{flex:1;overflow-y:auto;padding:16px 20px 26px;-webkit-overflow-scrolling:touch}
.facts{list-style:none;display:flex;flex-direction:column;gap:10px}
.facts li{display:flex;gap:11px;align-items:flex-start;
  background:rgba(255,255,255,.055);border-radius:14px;padding:12px 14px;
  font-size:.95rem;line-height:1.55;color:#E8F1FF;border:1px solid rgba(255,255,255,.06)}
.facts li b{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  background:var(--c);color:#08182E;font-size:.78rem;font-weight:900;margin-top:1px}

.quiz{margin-top:20px;border-radius:18px;padding:16px;
  background:linear-gradient(150deg, rgba(79,227,255,.13) 0%, rgba(23,131,255,.10) 100%);
  border:1px solid rgba(79,227,255,.24)}
.quiz .kicker{font-size:.74rem;font-weight:800;color:var(--cyan);letter-spacing:.06em}
.quiz h3{font-size:1.02rem;font-weight:800;margin:6px 0 12px;line-height:1.4}
.quiz .opts{display:flex;flex-direction:column;gap:8px}
.quiz .opts button{font-family:inherit;font-size:.94rem;font-weight:700;cursor:pointer;text-align:right;
  padding:12px 14px;border-radius:12px;color:#fff;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.14);
  transition:background .18s, border-color .18s, transform .12s}
.quiz .opts button:active{transform:scale(.985)}
.quiz .opts button.right{background:rgba(76,222,128,.22);border-color:#4ADE80}
.quiz .opts button.wrong{background:rgba(248,113,113,.18);border-color:#F87171}
.quiz .opts button[disabled]{cursor:default}
.quiz .why{margin-top:12px;font-size:.9rem;line-height:1.55;color:#CFE6FF;
  max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease, opacity .3s ease}
.quiz .why.on{max-height:240px;opacity:1}

.scorepill{font-size:.78rem;font-weight:800;color:var(--cyan);
  background:rgba(79,227,255,.12);border:1px solid rgba(79,227,255,.3);
  padding:5px 11px;border-radius:999px;white-space:nowrap}

.ar-cta{margin-top:18px;width:100%;font-family:inherit;font-size:1rem;font-weight:800;
  cursor:pointer;border:none;border-radius:14px;padding:15px;color:#08182E;
  background:linear-gradient(140deg,var(--cyan) 0%, #22B8E6 100%);
  box-shadow:0 8px 22px rgba(79,227,255,.24);
  display:flex;align-items:center;justify-content:center;gap:9px}
.ar-cta[hidden]{display:none}