:root { --navy:#100b2c; --ink:#171039; --violet:#7c5cff; --coral:#ff6b72; --teal:#43dcc1; --gold:#ffd45c; --paper:#fffaf0; --muted:#6e6886; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--navy); color:white; font-family:"Trebuchet MS",system-ui,sans-serif; }
button { font:inherit; }
button:focus-visible { outline:4px solid var(--gold); outline-offset:3px; }
.screen { min-height:100svh; display:none; position:relative; overflow:hidden; }
.screen.active { display:flex; }
.hero-screen { padding:clamp(18px,4vw,44px); flex-direction:column; justify-content:space-between; background:linear-gradient(90deg,rgba(10,7,31,.97) 0%,rgba(18,11,48,.8) 40%,rgba(18,11,48,.08) 73%),url("assets/story/sparkbound-hero.jpg") center/cover; }
.hero-screen:after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 72% 57%,rgba(255,211,92,.18),transparent 28%); }
.topbar,.game-header,.parent-header { display:flex; align-items:center; justify-content:space-between; gap:18px; position:relative; z-index:2; }
.brand { font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif; font-weight:700; letter-spacing:.12em; font-size:clamp(16px,2vw,21px); }
.brand-mark { color:var(--gold); margin-right:8px; }
.icon-button,.listen-button,.parent-entry,.secondary,.round-button { border:1px solid rgba(255,255,255,.24); color:white; background:rgba(12,8,38,.62); backdrop-filter:blur(12px); }
.icon-button { min-height:48px; border-radius:16px; padding:10px 15px; }
.hero-copy { z-index:1; width:min(610px,92vw); margin:auto 0; }
.panel { background:rgba(17,11,48,.77); border:1px solid rgba(255,255,255,.18); box-shadow:0 24px 70px rgba(3,2,18,.45); backdrop-filter:blur(15px); border-radius:30px; }
.hero-copy { padding:clamp(25px,4vw,48px); }
.eyebrow { margin:0 0 7px; color:var(--gold); font-weight:900; font-size:12px; letter-spacing:.18em; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:580px; margin-bottom:17px; font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif; font-size:clamp(38px,6vw,68px); line-height:.98; letter-spacing:-.045em; }
h2 { margin-bottom:0; font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif; font-size:clamp(25px,4vw,40px); line-height:1; }
.lead { color:#f1eefe; font-size:clamp(17px,2.2vw,22px); line-height:1.45; }
.primary { border:0; border-radius:18px; min-height:62px; padding:0 24px; color:#140d35; background:linear-gradient(135deg,var(--gold),#ffac5c); font-weight:900; font-size:18px; box-shadow:0 10px 0 #b95e44,0 16px 28px rgba(0,0,0,.25); cursor:pointer; }
.primary:active { transform:translateY(6px); box-shadow:0 4px 0 #b95e44; }
.primary span { margin-left:15px; }
.micro { margin:20px 0 0; font-size:13px; opacity:.75; }
.parent-entry { z-index:2; align-self:flex-end; border-radius:50px; min-height:48px; padding:8px 18px 8px 9px; display:flex; align-items:center; gap:10px; cursor:pointer; }
.hold-ring { width:30px; height:30px; display:block; border:3px solid rgba(255,255,255,.28); border-top-color:var(--teal); border-radius:50%; }
.parent-entry.holding .hold-ring { animation:spin 1.1s linear; }
@keyframes spin { to { transform:rotate(360deg); } }

.game-screen { flex-direction:column; background:#150f38; }
.game-backdrop { position:absolute; inset:0; overflow:hidden; background:radial-gradient(circle at 50% 0,rgba(124,92,255,.3),transparent 38%),linear-gradient(160deg,#18113e 0%,#0e2741 100%); }
.game-backdrop:before { content:""; position:absolute; inset:0; opacity:.13; background-image:linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,black,transparent 72%); }
.game-backdrop:after { content:""; position:absolute; width:min(55vw,520px); aspect-ratio:1.8; left:50%; bottom:-10%; transform:translateX(-50%); border:2px solid rgba(255,212,92,.12); border-bottom:0; border-radius:50% 50% 0 0; box-shadow:0 0 80px rgba(67,220,193,.08); }
.game-header { padding:18px clamp(16px,4vw,38px) 10px; }
.round-button { width:50px; height:50px; border-radius:50%; font-size:28px; cursor:pointer; }
.session-count { min-width:64px; padding:11px 14px; border-radius:18px; text-align:center; background:rgba(16,11,44,.8); font-size:18px; font-weight:900; }
.race-panel { position:relative; z-index:1; width:min(730px,92vw); margin:4px auto 10px; }
.race-labels { display:flex; justify-content:space-between; padding:0 8px 6px; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.race-track { height:18px; position:relative; border:2px solid rgba(255,255,255,.35); border-radius:20px; background:rgba(8,5,29,.76); }
.progress { position:absolute; left:0; top:0; height:100%; border-radius:20px; transition:width .45s ease; }
.hero-progress { width:0; background:linear-gradient(90deg,var(--teal),var(--gold)); }
.storm-progress { width:0; opacity:.5; background:linear-gradient(90deg,#817b9d,var(--violet)); }
.token { position:absolute; top:50%; transform:translate(-50%,-50%); font-size:24px; transition:left .45s ease; }
.hero-token { left:2%; color:var(--gold); text-shadow:0 0 10px var(--gold); }
.creature-token { left:50%; color:var(--coral); }
.storm-token { left:98%; color:#c2baff; }
.question-wrap { position:relative; z-index:1; display:grid; place-items:center; flex:1; padding:12px 16px 24px; }
.question-card { width:min(700px,96vw); min-height:470px; padding:clamp(20px,4vw,36px); border-radius:32px; color:var(--ink); background:rgba(255,250,240,.97); box-shadow:0 24px 60px rgba(0,0,0,.38),inset 0 0 0 3px rgba(255,255,255,.6); }
.question-topline { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.strategy-tag { color:#5a40c9; background:#eee9ff; border-radius:50px; padding:8px 12px; font-weight:900; font-size:12px; letter-spacing:.1em; }
.listen-button { color:#45367b; background:white; border-color:#ddd6f4; min-height:43px; border-radius:14px; padding:7px 13px; cursor:pointer; }
.prompt { margin:26px auto 7px; text-align:center; font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif; font-size:clamp(60px,12vw,100px); line-height:1; font-weight:700; letter-spacing:-.04em; }
.instruction { color:var(--muted); text-align:center; margin-bottom:24px; }
.answers { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.answer { min-height:78px; border:3px solid #ddd5fa; border-radius:20px; background:white; color:var(--ink); font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif; font-size:clamp(27px,5vw,42px); font-weight:700; box-shadow:0 6px 0 #cbc1eb; cursor:pointer; }
.answer:active { transform:translateY(4px); box-shadow:0 2px 0 #cbc1eb; }
.answer.correct { border-color:#25b99f; background:#dffbf5; color:#087b69; }
.answer.wrong { border-color:#ff9c9e; background:#fff0ef; color:#ad4045; }
.answers.locked .answer:not(.correct):not(.wrong) { opacity:.5; }
.feedback { margin-top:15px; border-radius:18px; padding:15px 18px; color:#3d3261; background:#eee9ff; font-weight:800; text-align:center; }
.feedback strong { color:#4d31c4; }
.feedback button { margin-left:12px; border:0; border-radius:12px; padding:10px 15px; background:var(--violet); color:white; font-weight:900; }
.hidden { display:none !important; }

.complete-screen { align-items:center; justify-content:center; padding:24px; background:radial-gradient(circle at 50% 10%,#5b3bb6 0,#1b123f 50%,#100b2c 100%); }
.complete-card { width:min(650px,96vw); padding:clamp(28px,5vw,50px); text-align:center; }
.creature-orb { width:95px; height:95px; display:grid; place-items:center; margin:12px auto 20px; border-radius:50%; color:var(--gold); background:radial-gradient(circle,#ff766f,#7739ac); font-size:48px; box-shadow:0 0 45px rgba(255,212,92,.42); }
.result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:25px 0; }
.result-grid div { padding:14px 7px; border-radius:18px; background:rgba(255,255,255,.08); }
.result-grid strong,.result-grid span { display:block; }
.result-grid strong { color:var(--gold); font-size:28px; }
.result-grid span { font-size:11px; opacity:.75; text-transform:uppercase; }
.comic-unlock { text-align:left; margin:20px 0 25px; padding:15px 18px; border-left:5px solid var(--teal); background:rgba(67,220,193,.1); }
.comic-unlock span { color:var(--teal); font-size:11px; font-weight:900; letter-spacing:.12em; }
.comic-unlock p { margin:5px 0 0; }
.complete-card .primary,.complete-card .secondary { width:100%; margin-top:10px; }
.secondary { min-height:52px; border-radius:16px; cursor:pointer; }

.parent-screen { color:var(--ink); background:#f3efff; flex-direction:column; overflow:auto; }
.parent-header { padding:24px clamp(20px,5vw,54px); color:white; background:var(--ink); justify-content:flex-start; }
.parent-content { width:min(960px,94vw); margin:25px auto 60px; }
.summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.summary-grid article,.parent-card,.reset-area { background:white; border-radius:20px; padding:20px; box-shadow:0 8px 28px rgba(41,30,80,.08); }
.summary-grid span,.summary-grid small,.summary-grid strong { display:block; }
.summary-grid span { color:var(--muted); font-size:12px; text-transform:uppercase; font-weight:900; }
.summary-grid strong { font-size:34px; margin:4px 0; }
.summary-grid small { color:var(--muted); }
.parent-card,.reset-area { margin-top:16px; }
.parent-card h3 { margin-bottom:6px; font-size:21px; }
.parent-card p,.reset-area p { color:var(--muted); }
.weekly-facts { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.weekly-facts button { min-height:55px; border:2px solid #d9d2ef; border-radius:14px; background:#faf8ff; font-weight:900; font-size:17px; }
.weekly-facts button.checked { background:#dffbf5; border-color:var(--teal); }
.skill-row { display:grid; grid-template-columns:140px 1fr 50px; align-items:center; gap:12px; margin-top:12px; }
.skill-meter { height:11px; border-radius:10px; background:#ece8f6; overflow:hidden; }
.skill-meter i { display:block; height:100%; border-radius:10px; background:linear-gradient(90deg,var(--violet),var(--teal)); }
.danger { min-height:44px; border:1px solid #ffc4c4; background:#fff2f1; color:#9e2d35; border-radius:12px; padding:10px 15px; }

@media (max-width:700px) {
  .icon-button span { display:none; }
  .question-card { min-height:440px; }
  .summary-grid { grid-template-columns:repeat(2,1fr); }
  .weekly-facts { grid-template-columns:repeat(2,1fr); }
  .skill-row { grid-template-columns:105px 1fr 38px; }
}
@media (max-height:650px) and (orientation:landscape) {
  .game-header { padding-top:10px; }
  .question-card { min-height:auto; padding:18px 24px; }
  .prompt { margin:10px auto 2px; font-size:58px; }
  .instruction { margin-bottom:12px; }
  .answer { min-height:60px; }
  .race-panel { margin-bottom:3px; }
}
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none !important; transition:none !important; } }

/* Strategy-based learning screens */
.glass-button { min-height:48px; padding:10px 15px; border:1px solid rgba(255,255,255,.25); border-radius:16px; color:white; background:rgba(12,8,38,.62); backdrop-filter:blur(12px); }
.mission-screen { flex-direction:column; padding:clamp(20px,4vw,45px); background:linear-gradient(rgba(14,9,42,.82),rgba(14,9,42,.94)),url("assets/quest-bg.jpg") center/cover; }
.story-header,.lesson-header { display:flex; align-items:center; gap:18px; position:relative; z-index:2; }
.story-header { width:min(1050px,96vw); margin:0 auto 28px; }
.mission-grid { width:min(1120px,96vw); margin:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; position:relative; z-index:1; }
.mission-card { min-height:310px; padding:22px; display:flex; flex-direction:column; align-items:flex-start; text-align:left; border:1px solid rgba(255,255,255,.22); border-radius:28px; color:white; background:rgba(23,16,57,.86); box-shadow:0 22px 55px rgba(0,0,0,.3); cursor:pointer; }
.mission-card:hover,.mission-card:focus-visible { transform:translateY(-4px); border-color:var(--gold); }
.mission-number { color:var(--gold); font-size:12px; letter-spacing:.16em; font-weight:900; }
.mission-icon { width:82px; height:82px; margin:30px 0; display:grid; place-items:center; border-radius:24px; color:var(--gold); background:linear-gradient(145deg,#5a3bc1,#243c76); font-size:46px; }
.mission-card strong { font-size:23px; }
.mission-card small { margin:7px 0 23px; color:#ddd7f6; font-size:15px; }
.mission-card i { margin-top:auto; padding:7px 10px; border-radius:20px; color:#171039; background:var(--teal); font-size:12px; font-style:normal; font-weight:900; }
.path-note { position:relative; z-index:1; margin:28px auto 0; color:#ddd7f6; text-align:center; }

.lesson-screen { flex-direction:column; color:white; background:radial-gradient(circle at 50% 0,rgba(124,92,255,.25),transparent 35%),linear-gradient(160deg,#18113e,#0d2b42); }
.lesson-screen:before { content:""; position:absolute; inset:0; opacity:.09; background-image:linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px); background-size:52px 52px; }
.lesson-header { padding:18px clamp(16px,4vw,42px) 12px; }
.step-count { margin-left:auto; min-width:68px; padding:12px; border-radius:17px; background:rgba(9,7,30,.65); text-align:center; font-weight:900; }
.lesson-progress { width:min(760px,88vw); height:8px; margin:0 auto; overflow:hidden; border-radius:12px; background:rgba(255,255,255,.16); position:relative; z-index:1; }
.lesson-progress i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--teal),var(--gold)); transition:width .35s ease; }
.lesson-stage { flex:1; padding:18px; display:grid; place-items:center; position:relative; z-index:1; }
.learning-card { width:min(760px,96vw); min-height:520px; padding:clamp(22px,4vw,38px); border-radius:30px; color:var(--ink); background:#fffdf6; box-shadow:0 25px 65px rgba(0,0,0,.35); }
.learning-topline { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.support-badge { padding:8px 11px; border-radius:30px; color:#4c35b0; background:#ede9ff; font-size:11px; font-weight:900; letter-spacing:.1em; }
.quiet-button { min-height:44px; padding:8px 14px; border:2px solid #ded8ef; border-radius:14px; color:#493b76; background:white; font-weight:900; cursor:pointer; }
.learning-card h3 { margin:24px 0 5px; text-align:center; font-size:clamp(25px,4vw,37px); }
.question-prompt { margin-bottom:16px; color:var(--muted); text-align:center; }
.math-area { min-height:190px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:24px; }
.frame-group { display:flex; align-items:center; gap:12px; }
.frame-wrap { text-align:center; }
.frame-label { min-height:23px; margin:7px 0 0; color:#625681; font-weight:900; }
.ten-frame { width:290px; display:grid; grid-template-columns:repeat(5,1fr); gap:5px; padding:7px; border:4px solid #30245d; border-radius:13px; background:white; }
.ten-frame.strip { width:min(610px,82vw); grid-template-columns:repeat(10,1fr); }
.frame-cell { position:relative; aspect-ratio:1; min-width:0; display:grid; place-items:center; border:2px solid #b9afd5; border-radius:8px; background:#f9f7ff; }
.ten-frame:not(.strip) .frame-cell:nth-child(5),.ten-frame.strip .frame-cell:nth-child(5) { border-right-color:#5a4a8a; border-right-width:4px; }
.counter { width:72%; aspect-ratio:1; border-radius:50%; box-shadow:inset 0 -5px 0 rgba(0,0,0,.12); }
.counter.a { background:var(--teal); }
.counter.b { background:repeating-linear-gradient(45deg,var(--coral) 0 7px,#ff9f91 7px 12px); }
.counter.added { background-color:var(--gold); background-image:radial-gradient(#7b5920 18%,transparent 20%); background-size:9px 9px; }
.frame-cell.selectable { cursor:pointer; border-color:#8b72ef; background:#f0edff; }
.frame-cell.selectable:after { content:"+"; color:#8b72ef; font-size:25px; font-weight:900; }
.frame-cell.selectable:active { transform:scale(.9); background:#fff1b8; }
.frame-cell.movable:after { content:"↑"; }
.frame-cell.selected { background:#fff5c8; border-color:#e3a930; }
.operator { color:#665b85; font-size:35px; font-weight:900; }
.equation-line { width:100%; text-align:center; font-size:clamp(27px,5vw,45px); font-weight:900; }
.equation-line .accent { color:#6b49da; }
.mind-equation { padding:28px; border:3px solid #e5def8; border-radius:24px; background:white; font-size:clamp(48px,9vw,76px); }
.answer-area { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:16px; }
.answer-choice { min-height:64px; border:3px solid #ddd5fa; border-radius:18px; color:var(--ink); background:white; box-shadow:0 5px 0 #c9bfe8; font-size:27px; font-weight:900; cursor:pointer; }
.answer-choice.correct { color:#087b69; background:#dffbf5; border-color:#25b99f; }
.answer-choice.wrong { color:#ad4045; background:#fff0ef; border-color:#ff9c9e; }
.feedback { margin-top:14px; padding:14px 16px; border-radius:16px; color:#3d3261; background:#eee9ff; text-align:center; font-weight:800; }
.feedback strong { color:#4d31c4; }
.learning-controls { min-height:60px; margin-top:14px; display:flex; align-items:center; justify-content:center; gap:10px; }
.compact { min-height:48px; margin-left:auto; padding:0 18px; box-shadow:0 6px 0 #b95e44; }
.setting-buttons { display:flex; flex-wrap:wrap; gap:9px; }
.setting-buttons button { padding:11px 14px; border:2px solid #d8d0ed; border-radius:13px; background:#faf8ff; font-weight:900; }
.setting-buttons button.selected { border-color:#6d50e6; color:#5134c5; background:#eee9ff; }

@media (max-width:1000px) {
  .mission-grid { grid-template-columns:repeat(2,1fr); max-width:760px; }
  .mission-card { min-height:245px; }
}
@media (max-width:600px) {
  .mission-grid { grid-template-columns:1fr; max-width:580px; }
  .mission-card { min-height:150px; display:grid; grid-template-columns:56px 1fr; grid-template-rows:auto auto auto; column-gap:16px; }
  .mission-icon { width:56px; height:56px; margin:0; grid-row:1/4; font-size:30px; }
  .mission-number { display:none; }
  .mission-card i { justify-self:start; }
  .answer-area { grid-template-columns:repeat(2,1fr); }
  .ten-frame { width:min(290px,82vw); }
  .frame-group { flex-direction:column; }
  .frame-group .operator { line-height:.5; }
}
@media (max-height:680px) and (orientation:landscape) {
  .lesson-header { padding-top:9px; }
  .lesson-stage { padding:8px 14px 14px; }
  .learning-card { min-height:auto; padding:17px 24px; }
  .learning-card h3 { margin-top:10px; }
  .math-area { min-height:140px; }
  .ten-frame { width:235px; }
  .answer-choice { min-height:52px; }
}

/* Portfolio game mechanics */
.portfolio-grid { grid-template-columns:repeat(3,1fr); max-width:980px; }
.portfolio-grid .mission-card { min-height:330px; }
.rows-card .mission-icon { background:linear-gradient(145deg,#4766d3,#26346d); }
.duel-card .mission-icon { background:linear-gradient(145deg,#a33f8e,#4e2f91); }
.orders-card .mission-icon { background:linear-gradient(145deg,#198f83,#21537b); }
.game-card { position:relative; overflow:hidden; }
.story-strip { min-height:58px; margin:-12px -12px 0; padding:10px 15px; display:flex; align-items:center; gap:12px; border-radius:18px; color:#30245d; background:linear-gradient(90deg,#f1ecff,#e7fbf6); }
.story-strip span { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:12px; background:white; font-size:24px; box-shadow:0 4px 12px rgba(62,42,115,.12); }
.story-strip > div { min-width:0; }
.story-strip small { display:block; margin-bottom:2px; color:#6b49da; font-size:10px; font-weight:900; letter-spacing:.13em; }
.story-strip p { margin:0; font-weight:900; line-height:1.25; }
.world-progress { min-height:38px; margin:8px 0 -3px; display:flex; align-items:center; justify-content:center; gap:13px; color:#70678c; }
.world-progress small { font-size:9px; font-weight:900; letter-spacing:.13em; }
.world-progress > div { display:flex; align-items:center; gap:7px; }
.world-progress i { width:27px; height:27px; display:grid; place-items:center; border:2px solid #d8d1eb; border-radius:50%; color:#9189a8; background:white; font-size:13px; font-style:normal; }
.world-progress i.current { border-color:#8b72ef; color:#6b49da; box-shadow:0 0 0 4px #eee9ff; }
.world-progress i.won { border-color:#25b99f; color:#087b69; background:#dffbf5; animation:world-node .4s both; }
.story-panel { width:min(210px,58vw); margin:8px auto 4px; overflow:hidden; border:3px solid #ddd5fa; border-radius:20px; background:white; box-shadow:0 9px 20px rgba(35,24,78,.16); animation:reveal-in .48s both; }
.story-panel img { width:100%; aspect-ratio:1; display:block; object-fit:contain; background:#171039; }
.story-panel figcaption { margin:0; padding:8px 10px; color:#55477c; background:white; font-size:10px; font-weight:900; letter-spacing:.12em; text-align:center; }
.ending-image { width:min(280px,68vw); aspect-ratio:1; display:block; margin:12px auto 18px; object-fit:contain; background:#171039; border:3px solid rgba(255,255,255,.35); border-radius:22px; box-shadow:0 16px 35px rgba(0,0,0,.3); animation:reveal-in .55s both; }
.game-card .learning-topline { margin-top:13px; }
.game-card h3 { margin-top:18px; }
.game-area { min-height:155px; }
.game-card.story-only .game-area { display:none; }
.story-choice { min-height:96px; padding:14px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:5px; border:3px solid #ddd5fa; border-radius:18px; color:var(--ink); background:white; box-shadow:0 5px 0 #c9bfe8; text-align:left; cursor:pointer; }
.story-choice { grid-column:span 2; }
.story-choice strong { font-size:17px; }
.story-choice small { color:#6e6886; line-height:1.25; }
.story-choice.chosen { border-color:#25b99f; background:#dffbf5; transform:translateY(-4px); }

.ten-row { width:min(600px,84vw); display:grid; grid-template-columns:repeat(10,1fr); gap:5px; padding:8px; border:4px solid #30245d; border-radius:15px; background:white; }
.row-cell { aspect-ratio:1; border:2px solid #b9afd5; border-radius:8px; background:#f9f7ff; }
.row-cell:nth-child(5) { border-right-width:4px; border-right-color:#5a4a8a; }
.row-cell.filled { border-color:#31bba5; background:#43dcc1; box-shadow:inset 0 -5px 0 rgba(0,0,0,.1); }
.row-cell.new { border-color:#d29b20; background:#ffd45c; animation:row-pop .42s both; }
.row-cell.hint { background:#fff1ad; animation:hint-pulse .85s ease-in-out infinite alternate; }
.row-result { display:grid; justify-items:center; gap:12px; }
.leftover { margin:0; display:flex; align-items:center; gap:9px; color:#645783; font-weight:900; }

.mini-bar { display:inline-flex; gap:3px; padding:4px; border-radius:8px; background:#e9e4fb; }
.mini-bar i { width:24px; height:31px; display:block; border:2px solid #6d50e6; border-radius:5px; background:#8f78ef; }
.bar-choice,.split-choice,.number-card,.bundle-card { min-height:76px; border:3px solid #ddd5fa; border-radius:18px; color:var(--ink); background:white; box-shadow:0 5px 0 #c9bfe8; cursor:pointer; }
.bar-choice { padding:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.bar-choice strong,.bundle-card strong { font-size:20px; }
.bar-choice.wrong,.split-choice.wrong { border-color:#ff9c9e; background:#fff0ef; animation:nudge .35s; }
.split-choice { padding:9px; display:flex; align-items:center; justify-content:center; gap:6px; }
.split-choice > span:nth-child(2) { color:#ad4775; font-size:20px; }
.split-choice .mini-bar i { width:18px; height:25px; }

.duel-board { width:min(520px,82vw); display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.duel-column { min-height:108px; padding:7px; display:grid; place-items:center; align-content:space-between; gap:5px; border:3px solid #d9d1ef; border-radius:15px; color:#6c6189; background:white; }
.duel-column strong { font-size:22px; }
.duel-column .claim-sparks { min-height:18px; color:#6a49da; font-size:13px; letter-spacing:2px; }
.duel-column.target { border-color:#ffbd50; background:#fff4c9; box-shadow:0 0 0 5px rgba(255,212,92,.18); animation:target-glow .9s ease-in-out infinite alternate; }
.tiny-frame { width:58px; display:grid; grid-template-columns:repeat(5,1fr); gap:2px; padding:3px; border:2px solid #463875; border-radius:6px; background:#fff; }
.tiny-frame i { aspect-ratio:1; display:block; border:1px solid #c3badc; border-radius:2px; background:#f7f4ff; }
.tiny-frame i:nth-child(5) { border-right-width:2px; border-right-color:#695a91; }
.tiny-frame i.filled { border-color:#24aa96; background:#43dcc1; }
.column-frame { width:62px; }
.number-card { min-height:104px; padding:8px; display:grid; place-items:center; gap:5px; }
.number-card > strong { font-size:27px; line-height:1; }
.number-card .card-frame { width:78px; padding:4px; gap:3px; border-width:3px; }
.number-card .card-frame i { border-radius:3px; }
.number-card.selected,.bundle-card.selected { border-color:#6d50e6; transform:translateY(-6px); box-shadow:0 11px 0 #b9afe0; }
.number-card.winning { border-color:#25b99f; background:#dffbf5; animation:card-win .45s both; }
.number-card.wrong,.bundle-card.wrong { border-color:#ff9c9e; background:#fff0ef; }
.hint-card { outline:5px solid rgba(255,212,92,.7); outline-offset:2px; }

.order-box { min-width:180px; padding:15px 28px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:0 13px; border:4px solid #30245d; border-radius:22px; background:linear-gradient(145deg,#fff,#e9fbf7); box-shadow:inset 0 -8px 0 rgba(67,220,193,.16); }
.order-box span { grid-row:1/3; font-size:46px; }
.order-box p { margin:0; color:#6e6886; font-size:11px; font-weight:900; letter-spacing:.13em; }
.order-box strong { font-size:43px; }
.bundle-card { padding:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.bundle-card .mini-bar i { width:18px; height:25px; background:#ff8d82; border-color:#cd5e68; }
.pack-frame .counter.arriving { animation:counter-arrive .45s both; }
.packing .pack-frame { animation:pack-away .48s both; }

.spark-burst { position:absolute; left:50%; top:45%; width:10px; height:10px; pointer-events:none; }
.spark-burst i { --angle:0deg; --delay:0s; position:absolute; width:9px; height:9px; border-radius:50%; background:var(--gold); opacity:0; }
.celebrate .spark-burst i { animation:spark-fly .72s var(--delay) ease-out both; transform:rotate(var(--angle)) translateX(0); }
.celebrate .story-strip { animation:story-glow .7s ease-out; }
.soft-shake { animation:nudge .35s; }

@keyframes row-pop { from { transform:scale(.35); opacity:.25; } 70% { transform:scale(1.13); } to { transform:scale(1); opacity:1; } }
@keyframes hint-pulse { to { box-shadow:inset 0 0 0 4px #ffc94c; } }
@keyframes target-glow { to { transform:translateY(-3px); box-shadow:0 7px 20px rgba(255,188,69,.35); } }
@keyframes card-win { 50% { transform:translateY(-14px) rotate(-2deg); } to { transform:translateY(-7px); } }
@keyframes counter-arrive { from { transform:translateY(-35px) scale(.5); opacity:0; } 70% { transform:translateY(4px) scale(1.1); } to { transform:none; opacity:1; } }
@keyframes pack-away { to { transform:scale(.45) translateY(55px); opacity:0; } }
@keyframes spark-fly { 0% { opacity:1; transform:rotate(var(--angle)) translateX(0) scale(.5); } 70% { opacity:1; } 100% { opacity:0; transform:rotate(var(--angle)) translateX(145px) scale(1.2); } }
@keyframes story-glow { 35% { background:#fff0a6; transform:scale(1.015); } }
@keyframes nudge { 25% { transform:translateX(-7px); } 50% { transform:translateX(7px); } 75% { transform:translateX(-4px); } }
@keyframes world-node { from { transform:scale(.55); } 70% { transform:scale(1.18); } to { transform:scale(1); } }
@keyframes reveal-in { from { transform:translateY(18px) scale(.92); opacity:0; } to { transform:none; opacity:1; } }

@media (max-width:1000px) {
  .portfolio-grid { grid-template-columns:repeat(3,1fr); max-width:920px; }
  .portfolio-grid .mission-card { min-height:300px; }
}
@media (max-width:760px) {
  .portfolio-grid { grid-template-columns:1fr; max-width:580px; }
  .portfolio-grid .mission-card { min-height:150px; }
  .answer-area { grid-template-columns:repeat(2,1fr); }
  .ten-row { width:min(600px,88vw); gap:3px; padding:5px; }
  .mini-bar i { width:19px; height:27px; }
  .story-strip { font-size:14px; }
  .world-progress { gap:8px; }
  .world-progress small { display:none; }
  .world-progress i { width:24px; height:24px; }
  .duel-board { gap:4px; }
  .duel-column { min-height:92px; padding:5px 2px; }
  .column-frame { width:49px; }
  .number-card .card-frame { width:68px; }
}
@media (max-height:680px) and (orientation:landscape) {
  .story-panel { width:130px; }
}

/* Order target shown as a two-by-five frame */
.order-box .order-frame { grid-column:1/3; justify-self:center; margin-top:10px; width:78px; padding:4px; gap:3px; border-width:3px; }
.reset-area summary { min-height:44px; line-height:44px; cursor:pointer; }

/* Short landscape: keep the question and answers on one screen */
@media (max-height:680px) and (orientation:landscape) {
  .lesson-header { padding-bottom:6px; }
  .lesson-stage { padding:6px 14px 8px; }
  .learning-card { padding:10px 24px 12px; }
  .game-card .learning-topline { margin-top:6px; }
  .game-card h3 { margin-top:6px; }
  .question-prompt { margin-bottom:6px; }
  .math-area, .game-area { min-height:0; }
  .world-progress { min-height:30px; margin:4px 0 0; }
  .answer-area { margin-top:8px; }
  .learning-controls { min-height:48px; margin-top:8px; }
  .feedback { margin-top:8px; padding:10px 14px; }
}

/* Short landscape: story screens put the art beside the text so it can be larger */
@media (max-height:680px) and (orientation:landscape) {
  .game-card.story-only { display:grid; grid-template-columns:min(300px,38vw) 1fr; column-gap:22px; align-content:center; }
  .game-card.story-only > * { grid-column:2; }
  .game-card.story-only .story-strip { margin:0; }
  .game-card.story-only .story-panel { grid-column:1; grid-row:1 / span 8; align-self:center; width:100%; margin:0; }
  .game-card.story-only .story-choice { min-height:72px; padding:10px 14px; }
  .complete-card { width:min(900px,96vw); padding:20px 28px; display:grid; grid-template-columns:min(300px,36vw) 1fr; column-gap:28px; align-content:center; text-align:left; }
  .complete-card > * { grid-column:2; }
  .complete-card .ending-image { grid-column:1; grid-row:1 / span 8; align-self:center; width:100%; margin:0; }
  .complete-card .lead { margin-bottom:0; }
  .complete-card .result-grid { margin:14px 0; }
  .complete-card .comic-unlock { margin:0 0 12px; }
  .complete-card .primary,.complete-card .secondary { margin-top:8px; }
  .complete-card .primary { min-height:52px; }
}

/* Short landscape: tighten tall Duel and Orders boards */
@media (max-height:680px) and (orientation:landscape) {
  .duel-column { min-height:90px; }
  .number-card { min-height:92px; }
  .order-box { padding:8px 24px; }
  .order-box span { font-size:34px; }
  .order-box strong { font-size:34px; }
  .order-box .order-frame { margin-top:4px; }
}

/* Ten Rows split choices wrap instead of running past the card edge */
.split-answers { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.split-answers .split-choice { flex:0 1 auto; min-width:0; }
@media (max-height:680px) and (orientation:landscape) {
  .split-answers { gap:8px; }
  .split-answers .split-choice { min-height:56px; padding:4px 6px; gap:3px; }
  .split-choice > span:nth-child(2) { font-size:15px; }
  .split-choice .mini-bar { padding:2px; gap:2px; }
  .split-choice .mini-bar i { width:11px; height:20px; border-width:1px; }
}

/* Short landscape on a Fire tablet: the browser bars leave about 520 to 540 px of height */
@media (max-height:600px) and (orientation:landscape) {
  .lesson-header { padding-top:4px; padding-bottom:4px; }
  .lesson-header .round-button { width:46px; height:46px; }
  .step-count { padding:8px 12px; }
  .lesson-stage { padding:4px 14px 6px; }
  .learning-card { padding:8px 24px 10px; }
  .story-strip { min-height:44px; padding:6px 14px; margin-top:-8px; }
  .world-progress { min-height:26px; margin:2px 0 0; }
  .game-card .learning-topline { margin-top:4px; }
  .game-card h3 { margin-top:4px; font-size:28px; }
  .question-prompt { margin-bottom:4px; }
  .learning-controls { min-height:44px; margin-top:6px; }
  .learning-controls .compact { min-height:44px; }
  .mind-equation { padding:12px; font-size:clamp(40px,7vw,60px); }
}

/* Very short landscape (about 500 px): drop the decorative progress dots during exercises, tighten the ending */
@media (max-height:540px) and (orientation:landscape) {
  .game-card:not(.story-only) .world-progress { display:none; }
  .complete-card { padding:12px 24px; }
  .complete-card .eyebrow { margin-bottom:2px; }
  .complete-card h2 { font-size:28px; }
  .complete-card .result-grid { margin:8px 0; }
  .complete-card .result-grid div { padding:8px 6px; }
  .complete-card .comic-unlock { padding:8px 14px; margin:0 0 8px; }
  .complete-card .primary { min-height:48px; margin-top:6px; }
  .complete-card .secondary { min-height:48px; margin-top:6px; }
}

/* Story Sparks, collection, unlock celebration and pet powers */
.collection-link { margin-left:auto; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; cursor:pointer; }
.collection-link strong { color:var(--gold); }
.collection-screen { flex-direction:column; padding:clamp(14px,3vw,34px); color:white; overflow-y:auto; background:linear-gradient(rgba(14,9,42,.84),rgba(14,9,42,.95)),url("assets/quest-bg.jpg") center/cover; }
.collection-screen .story-header,.collection-screen .collection-progress,.collection-screen .collection-body { width:100%; max-width:1050px; }
.collection-header { margin-bottom:8px; }
.collection-header .glass-button { cursor:pointer; font-weight:900; }
.spark-total { margin-left:auto; padding:6px 16px; border-radius:16px; text-align:center; background:rgba(255,255,255,.1); }
.spark-total strong { display:block; color:var(--gold); font-size:28px; line-height:1.1; }
.spark-total span { font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.8; }
.collection-progress { margin:0 auto 12px; color:var(--gold); font-weight:900; font-size:18px; }
.collection-body { margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr); gap:16px; padding-bottom:28px; align-items:start; }
.character-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.char-card { min-height:44px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px; border:3px solid transparent; border-radius:20px; color:white; font:inherit; background:rgba(255,255,255,.08); }
button.char-card { cursor:pointer; }
.char-card.locked { background:rgba(255,255,255,.05); color:rgba(255,255,255,.75); }
.char-card small { font-size:13px; opacity:.85; }
.portrait { position:relative; width:100%; max-width:132px; aspect-ratio:1; border-radius:18px; overflow:hidden; }
.reward-art { display:block; width:100%; height:100%; object-fit:cover; }
.acc-badge { position:absolute; right:4%; bottom:4%; width:38%; height:38%; border-radius:50%; border:3px solid var(--gold); background:var(--paper); }
.silhouette { width:100%; max-width:132px; aspect-ratio:1; border-radius:18px; background:rgba(255,255,255,.08); }
.silhouette svg { display:block; width:100%; height:100%; fill:rgba(255,255,255,.2); }
.detail-note { margin:4px 0 0; font-size:14px; opacity:.75; }
.detail-row { display:grid; grid-template-columns:84px minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px; border:3px solid transparent; border-radius:18px; background:rgba(255,255,255,.07); }
.detail-row.on { border-color:var(--teal); background:rgba(67,220,193,.12); }
.detail-row.locked { color:rgba(255,255,255,.75); }
.detail-row .reward-art,.detail-row .silhouette { width:84px; height:84px; border-radius:14px; }
.row-copy strong { display:block; font-size:18px; }
.row-copy small { display:block; margin-top:2px; font-size:14px; line-height:1.3; opacity:.88; }
.row-copy .power-note { color:var(--gold); }
.row-copy .power-note:empty { display:none; }
.big-action { min-width:116px; min-height:56px; padding:0 18px; border:0; border-radius:16px; color:#140d35; font-weight:900; font-size:17px; cursor:pointer; background:linear-gradient(135deg,var(--gold),#ffac5c); }
.detail-row.on .big-action { background:white; }
.reward-chip { margin-top:10px; padding:8px 12px; display:flex; align-items:center; justify-content:center; gap:12px; border-radius:18px; background:#fff3cf; color:#4a3a14; }
.reward-leader .portrait { width:52px; border-radius:14px; }
.reward-copy { text-align:left; }
.reward-copy strong { display:block; font-size:17px; color:#7a4a00; }
.reward-copy small { display:block; font-size:13px; color:#5c4f86; }
.reward-copy small:empty { display:none; }
.power-button { display:inline-flex; align-items:center; gap:8px; min-height:48px; cursor:pointer; }
.power-button .reward-art { width:32px; height:32px; border-radius:50%; }
.power-button span { white-space:nowrap; }
.reward-chip { justify-content:space-between; }
.unlock-overlay { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:14px; background:rgba(10,6,30,.84); }
.unlock-card { width:min(560px,94vw); max-height:94svh; overflow:auto; padding:20px; border:2px solid var(--gold); border-radius:28px; text-align:center; color:white; background:var(--ink); animation:unlock-pop .5s ease-out both; }
.unlock-card h2 { margin:0 0 12px; font-size:clamp(24px,5vw,34px); }
.unlock-items { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:14px; }
.unlock-item { margin:0; width:min(150px,38vw); font-weight:900; }
.unlock-item .reward-art { height:auto; aspect-ratio:1; border-radius:18px; }
.unlock-item figcaption { margin-top:6px; }
.unlock-actions { display:grid; gap:10px; }
.unlock-actions button { margin:0; }
@keyframes unlock-pop { from { transform:scale(.88); opacity:0; } to { transform:scale(1); opacity:1; } }
.fx-host { position:relative; }
.fx-host.fx-pathlight::after,.fx-host.fx-storm::after,.fx-host.fx-portal::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; animation:fx-fade 1.2s ease-out both; }
.fx-pathlight::after { background:linear-gradient(100deg,transparent 15%,rgba(255,212,92,.55) 45%,rgba(67,220,193,.5) 55%,transparent 85%); }
.fx-storm::after { background:radial-gradient(circle at 50% 40%,rgba(255,107,114,.6),rgba(255,212,92,.25) 40%,transparent 68%); }
.fx-portal::after { background:radial-gradient(circle at 50% 50%,transparent 26%,rgba(124,92,255,.6) 38%,rgba(67,220,193,.35) 48%,transparent 60%); }
@keyframes fx-fade { 0% { opacity:0; } 25% { opacity:1; } 100% { opacity:0; } }
@media (min-width:760px) and (orientation:landscape) {
  .character-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .unlock-actions { grid-template-columns:1fr 1fr; }
}
@media (max-width:520px) {
  .detail-row { grid-template-columns:72px minmax(0,1fr); }
  .detail-row .reward-art,.detail-row .silhouette { width:72px; height:72px; }
  .big-action { grid-column:1 / -1; }
  .collection-link { font-size:14px; padding:8px 10px; }
}
@media (max-height:680px) and (orientation:landscape) {
  .portrait,.silhouette { max-width:104px; }
  .reward-chip { margin-top:6px; padding:5px 10px; gap:10px; }
  .reward-leader .portrait { width:44px; }
  .reward-copy strong { font-size:16px; }
  .unlock-card { padding:14px 18px; }
  .unlock-item { width:min(112px,24vw); }
  .unlock-card h2 { margin-bottom:8px; }
  .unlock-items { margin-bottom:10px; gap:10px; }
}
@media (max-height:540px) and (orientation:landscape) {
  .game-card.story-only .learning-topline { display:none; }
  .unlock-card { padding:10px 16px; }
  .unlock-card .eyebrow { display:none; }
  .unlock-card h2 { margin-bottom:6px; font-size:22px; }
  .unlock-item { width:min(92px,20vw); }
  .unlock-item figcaption { margin-top:3px; font-size:13px; }
  .unlock-items { margin-bottom:8px; gap:8px; }
  .unlock-actions button { min-height:48px; padding:0 16px; font-size:16px; }
}
@media (prefers-reduced-motion:reduce) { .fx-host::after,.fx-host.fx-pathlight::after,.fx-host.fx-storm::after,.fx-host.fx-portal::after { display:none; } }

/* Progress trail and lore */
.spark-trail { width:100%; max-width:1050px; margin:0 auto 6px; }
.trail-scale { display:flex; justify-content:space-between; margin-top:6px; font-size:13px; font-weight:800; opacity:.85; }
.mission-progress { margin:8px 0 0; text-align:center; color:var(--gold); font-weight:900; }
.mission-progress:empty { display:none; }
.unlock-next { margin:0 0 10px; color:var(--gold); font-weight:800; font-size:14px; }
.unlock-next:empty { display:none; }
.row-copy .status { font-weight:800; opacity:1; color:var(--teal); }
.row-copy small + small { margin-top:3px; }
@media (max-height:540px) and (orientation:landscape) {
  .unlock-next { margin-bottom:6px; font-size:13px; }
}


/* Unlock reveal. Timeline (seconds): 0 card pops, wobbling "?" card; 0.4 to 1.3 smoke builds; 1.3 shockwave, star sparks, item bursts out; 2 to 3 smoke clears.
   Motion only: with reduced motion the finished item, caption and title show at once. */
.unlock-card { --reveal:1.3s; }
.unlock-item { --d:0s; }
.unlock-overlay { overflow:hidden; }
.reveal-art { position:relative; }
.reveal-art .reward-art { animation:reveal-art .75s calc(var(--reveal) + var(--d)) cubic-bezier(.2,1.5,.4,1) both; }
.reveal-art::before { content:"?"; position:absolute; inset:0; z-index:2; display:grid; place-items:center; border-radius:18px; color:var(--gold); font-size:clamp(36px,9vw,56px); font-weight:900; background:radial-gradient(circle at 50% 40%,#4b3a99,#1d1448); box-shadow:inset 0 0 0 3px rgba(255,212,92,.55),0 0 24px rgba(124,92,255,.7); opacity:0; pointer-events:none; animation:reveal-veil calc(var(--reveal) + .6s) var(--d) ease-in-out both; }
.reveal-art::after { content:""; position:absolute; inset:-30%; z-index:3; border-radius:50%; background:radial-gradient(circle,rgba(255,250,210,.9),rgba(255,212,92,.35) 38%,transparent 68%); opacity:0; pointer-events:none; animation:reveal-flash .7s calc(var(--reveal) + var(--d) - .05s) ease-out both; }
.unlock-item figcaption { animation:reveal-fade .45s calc(var(--reveal) + .55s + var(--d)) ease-out both; }
.unlock-card h2 { animation:reveal-fade .45s var(--title-delay,1.4s) ease-out both; }
.unlock-items { animation:reveal-thump .5s var(--reveal) ease-out both; }
.reveal-fx { --reveal:1.3s; position:absolute; inset:0; z-index:5; overflow:hidden; pointer-events:none; }
.fx-burst { --d:0s; position:absolute; width:0; height:0; }
.fx-burst .smoke { --size:90px; --dx:0px; --dy:0px; --t0:.5s; position:absolute; left:calc(var(--size) / -2); top:calc(var(--size) / -2); width:var(--size); height:var(--size); border-radius:50%; background:radial-gradient(circle at 40% 35%,rgba(226,218,255,.95),rgba(139,118,214,.62) 55%,rgba(80,62,150,0) 72%); filter:blur(5px); opacity:0; animation:smoke-puff 1.7s calc(var(--t0) + var(--d)) ease-out both; }
.fx-burst .shock { position:absolute; left:-10px; top:-10px; width:20px; height:20px; border:5px solid var(--gold); border-radius:50%; opacity:0; animation:reveal-shock .85s calc(var(--reveal) + var(--d) - .05s) ease-out forwards; }
.fx-burst .star { --dx:0px; --dy:0px; --s:20px; --spin:0deg; position:absolute; left:calc(var(--s) / -2); top:calc(var(--s) / -2); width:var(--s); height:var(--s); background:var(--gold); clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); opacity:0; animation:star-fly 1.15s calc(var(--reveal) + var(--d)) cubic-bezier(.1,.7,.3,1) both; }
.fx-burst .star.teal { background:var(--teal); }
.fx-burst .star.coral { background:var(--coral); }
.fx-burst .star.white { background:#fff8e0; }
@keyframes reveal-veil { 0% { opacity:0; transform:scale(.9); } 8% { opacity:1; transform:scale(1); } 22% { transform:rotate(-3deg); } 32% { transform:rotate(3deg); } 42% { transform:rotate(-5deg) scale(1.02); } 52% { transform:rotate(5deg) scale(1.03); } 62% { transform:rotate(-6deg) scale(1.05); } 70% { opacity:1; transform:rotate(0) scale(1.1); } 100% { opacity:0; transform:scale(1.35); } }
@keyframes reveal-flash { 0% { opacity:0; transform:scale(.5); } 30% { opacity:1; } 100% { opacity:0; transform:scale(1.5); } }
@keyframes reveal-art { 0% { opacity:0; transform:scale(.4); filter:brightness(2.4); } 15% { opacity:1; } 100% { opacity:1; transform:scale(1); filter:none; } }
@keyframes reveal-fade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes reveal-thump { 0%,100% { transform:none; } 30% { transform:scale(1.07); } }
@keyframes reveal-shock { 0% { opacity:1; transform:scale(.4); } 100% { opacity:0; transform:scale(16); } }
@keyframes smoke-puff { 0% { opacity:0; transform:translate(0,0) scale(.3); } 18% { opacity:.95; } 48% { opacity:.9; transform:translate(calc(var(--dx) * .5),calc(var(--dy) * .5)) scale(1); } 100% { opacity:0; transform:translate(var(--dx),calc(var(--dy) - 30px)) scale(1.8); } }
@keyframes star-fly { 0% { opacity:0; transform:translate(0,0) rotate(0) scale(.2); } 12% { opacity:1; } 70% { opacity:1; } 100% { opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--spin)) scale(.5); } }
@media (max-height:540px) and (orientation:landscape) { .reveal-art::before { font-size:34px; } .fx-burst .smoke { transform-origin:center; } }
@media (prefers-reduced-motion:reduce) { .reveal-art::before,.reveal-art::after,.reveal-fx { display:none; } }

/* Full-page character view: portrait fills the left at full screen height, lore and extras on the right. */
.character-screen { flex-direction:row; padding:0; color:white; background:linear-gradient(rgba(14,9,42,.9),rgba(14,9,42,.97)),url("assets/quest-bg.jpg") center/cover; }
.character-art { flex:0 0 min(52vw,100svh); height:100svh; background:#1a1240; }
.character-art .portrait { width:100%; max-width:none; height:100%; aspect-ratio:auto; border-radius:0; }
.character-art .portrait .reward-art { object-fit:cover; }
.character-art .acc-badge { right:5%; bottom:5%; width:26%; height:auto; aspect-ratio:1; border-width:5px; }
.character-side { flex:1; min-width:0; height:100svh; overflow-y:auto; padding:16px 22px 28px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.character-body { width:100%; display:grid; gap:12px; }
.character-name { margin:4px 0 0; font-size:clamp(30px,5vw,44px); }
.character-lore { margin:0; font-size:clamp(16px,2.2vw,19px); line-height:1.5; }
@media (orientation:portrait), (max-width:700px) {
  .character-screen { flex-direction:column; overflow-y:auto; }
  .character-art { flex:none; width:100%; height:auto; aspect-ratio:1; max-height:62svh; }
  .character-side { height:auto; overflow:visible; }
}
@media (max-height:540px) and (orientation:landscape) {
  .character-side { padding:12px 18px 20px; gap:8px; }
  .character-name { font-size:30px; }
  .character-lore { font-size:15px; line-height:1.4; }
  .character-grid .portrait,.character-grid .silhouette { max-width:104px; }
}

/* Sparks bar: one proportional scale from 0 to the goal. */
.spark-trail { padding:0 12px; box-sizing:border-box; }
.mission-trail { width:min(720px,90vw); margin:16px auto 0; color:white; }
.trail-track { position:relative; height:16px; margin:12px 0 4px; border-radius:99px; background:rgba(255,255,255,.14); }
.trail-band { position:absolute; top:-3px; bottom:-3px; border-radius:99px; background:rgba(67,220,193,.3); box-shadow:inset 0 0 0 1px rgba(67,220,193,.55); }
.trail-fill { position:absolute; left:0; top:0; bottom:0; border-radius:99px; background:linear-gradient(90deg,var(--teal),var(--gold)); }
.trail-track.done { box-shadow:0 0 18px rgba(255,212,92,.7); }
.game-tick { position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:rgba(255,255,255,.55); }
.game-tick.reached { background:rgba(16,11,44,.45); }
.trail-dot { position:absolute; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; border:2px solid rgba(255,255,255,.7); background:#241a55; box-sizing:border-box; }
.trail-dot.reached { border-color:#fff3c4; background:var(--gold); }
.trail-dot.next { width:22px; height:22px; margin:-11px 0 0 -11px; border:3px solid var(--gold); background:#241a55; box-shadow:0 0 0 4px rgba(255,212,92,.3); }
.trail-knob { position:absolute; top:50%; z-index:2; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; background:radial-gradient(circle at 40% 35%,#fffbe0,var(--gold) 55%,#ff9d4a); border:3px solid #241a55; box-shadow:0 0 10px rgba(255,212,92,.9); }
.trail-scale { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 12px; margin-top:8px; font-size:13px; font-weight:800; opacity:.9; }

.character-side .spark-trail { width:100%; padding:0 6px; }
.character-side .collection-progress { margin:0; font-size:16px; }
@media (max-height:540px) and (orientation:landscape) { .character-side .trail-track { margin-top:6px; } .character-side .collection-progress { font-size:14px; } }

/* The Story page: overarching lore, readable top to bottom. */
.story-link { display:block; margin:14px auto 0; min-height:48px; cursor:pointer; font-weight:800; }
.lore-screen { flex-direction:column; padding:clamp(14px,3vw,34px); color:white; overflow-y:auto; background:linear-gradient(rgba(14,9,42,.88),rgba(14,9,42,.96)),url("assets/quest-bg.jpg") center/cover; }
.lore-screen .story-header { width:100%; max-width:900px; margin:0 auto 14px; }
.lore-header .glass-button { cursor:pointer; font-weight:900; }
.lore-header h2 { font-size:clamp(22px,4vw,32px); }
.lore-body { width:100%; max-width:900px; margin:0 auto; padding-bottom:36px; }
.lore-hero { display:block; width:100%; max-height:42svh; object-fit:cover; border-radius:24px; border:1px solid rgba(255,255,255,.2); }
.lore-card { margin:16px 0 0; padding:18px 22px; border-radius:24px; background:rgba(17,11,48,.77); border:1px solid rgba(255,255,255,.18); }
.lore-card h3 { margin:0 0 8px; font-size:clamp(22px,3.4vw,30px); }
.lore-card p { margin:0 0 10px; font-size:clamp(16px,2.2vw,19px); line-height:1.55; }
.lore-card p:last-child { margin-bottom:0; }
.lore-card .eyebrow { margin-bottom:6px; }
.lore-quests { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:6px; }
.lore-quest img { display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:16px; border:2px solid rgba(255,255,255,.2); }
.lore-quest h4 { margin:10px 0 4px; font-size:20px; color:var(--gold); }
.lore-quest p { font-size:16px; }
@media (max-width:700px), (orientation:portrait) { .lore-quests { grid-template-columns:1fr; } .lore-quest { display:grid; grid-template-columns:96px minmax(0,1fr); gap:6px 14px; align-items:start; } .lore-quest img { grid-row:1 / span 2; } .lore-quest h4 { margin:0; } }
@media (max-height:540px) and (orientation:landscape) { .lore-hero { max-height:34svh; } .lore-card { padding:14px 18px; } }

/* Games screen on short landscape tablets: keep the sparks bar and the Story button on screen without scrolling. */
@media (max-height:640px) and (orientation:landscape) {
  .mission-screen { padding:14px clamp(18px,3vw,34px); }
  .mission-screen .story-header { margin-bottom:10px; }
  .portfolio-grid { margin:0 auto; }
  .portfolio-grid .mission-card { min-height:0; padding:12px 14px; display:grid; grid-template-columns:52px minmax(0,1fr); grid-template-rows:auto auto auto; column-gap:12px; align-content:start; border-radius:22px; }
  .portfolio-grid .mission-icon { width:52px; height:52px; margin:0; grid-row:1 / 4; font-size:26px; border-radius:16px; }
  .portfolio-grid .mission-card small { margin:2px 0 6px; font-size:13px; }
  .portfolio-grid .mission-card > :not(.mission-icon) { grid-column:2; }
  .portfolio-grid .mission-card i { justify-self:start; margin-top:0; white-space:nowrap; }
  .mission-screen .path-note { display:none; }
  .mission-trail { margin-top:12px; }
  .story-link { margin-top:8px; min-height:44px; }
  .mission-progress { margin-top:4px; }
}

/* Parent view: keep the progress safe */
.safety-actions { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 4px; }
.safety-actions .quiet-button { min-height:48px; }
.storage-status { font-size:14px; }
.code-box { width:100%; box-sizing:border-box; margin:10px 0 0; padding:10px 12px; border:2px solid #d9d2ef; border-radius:14px; background:#faf8ff; color:var(--ink); font:14px/1.4 ui-monospace,Menlo,monospace; resize:vertical; }
.restore-area { margin-top:14px; }
.restore-area summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-weight:900; }
.undo-area { margin-top:12px; padding:12px 14px; border-radius:14px; background:#fff3cf; }
.undo-area p { margin:0 0 8px; color:#5c4a14; }