:root{--panel:#08101d;--text:#f8fafc;--muted:#b9c6d8;--gold:#ffd166;--blue:#5ca7ff;--green:#4ade80;--purple:#a78bfa;--orange:#fb923c;--heroAccent:#2563eb;--heroAccentSoft:rgba(37,99,235,.16)}
*{box-sizing:border-box}html,body{height:100%;overscroll-behavior:none}body{margin:0;background:#040713;color:var(--text);font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;overflow-x:hidden}body.inGame{overflow:hidden}
.header{padding:10px 16px;text-align:center;position:relative;z-index:3;background:linear-gradient(135deg,#5b2219,#7b4228,#1f3c69,#6d28d9);box-shadow:0 8px 26px rgba(0,0,0,.35)}
.header h1{font-size:clamp(26px,4vw,42px);margin:0;font-weight:1000}.sub{margin-top:4px;color:#fff7ed;font-size:15px}
.wrap{max-width:1520px;margin:0 auto;padding:8px}.screen{display:none}.panel,.side,.modalBox{background:rgba(7,12,27,.96);border:1px solid rgba(255,255,255,.12);border-radius:24px;box-shadow:0 20px 55px rgba(0,0,0,.38)}.panel{padding:16px}
.selectGrid{display:grid;grid-template-columns:minmax(560px,1.15fr) minmax(350px,.85fr);gap:16px}
.roster{position:relative;overflow:hidden;border-radius:20px;border:3px solid #34415f;background:#020617}.roster img{width:100%;display:block}
.hot{position:absolute;top:12%;height:73%;border:4px solid transparent;border-radius:16px;cursor:pointer}.hot:hover,.hot.active{border-color:transparent;box-shadow:none;background:rgba(255,209,102,.06)}.hs-nova{left:1.1%;width:24.8%}.hs-atlas{left:26.2%;width:23.4%}.hs-byte{left:49.7%;width:23.9%}.hs-maya{left:74%;width:24.7%}
.pill{display:inline-block;border-radius:999px;padding:7px 12px;background:color-mix(in srgb, var(--heroAccent) 18%, white 82%);color:#1e3a8a;font-weight:900}.heroInfo h2{font-size:36px;margin:10px 0 4px}.role{font-size:21px;color:#cbd5e1;margin-bottom:12px}.heroContent{display:grid;grid-template-columns:180px 1fr;gap:16px}.heroPortrait{width:100%;border-radius:18px;border:2px solid #3a4a70}.heroDesc{line-height:1.5;color:#e2e8f0}.stats{display:grid;gap:9px;margin-top:12px}.stat{display:grid;grid-template-columns:120px 1fr;gap:10px}.bar{height:12px;border-radius:999px;background:#0f172a;overflow:hidden}.bar span{display:block;height:100%;background:linear-gradient(90deg,#7dd3fc,#fbbf24)}
.btnRow{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}.btn{border:0;border-radius:16px;padding:12px 16px;font-weight:950;font-size:16px;cursor:pointer;color:white;box-shadow:0 8px 18px rgba(0,0,0,.25)}.primary{background:linear-gradient(#60a5fa,#2563eb)}.green{background:linear-gradient(#4ade80,#15803d)}.purple{background:linear-gradient(#c084fc,#7c3aed)}.orange{background:linear-gradient(#fdba74,#ea580c)}.silver{background:linear-gradient(#e5e7eb,#94a3b8);color:#111827}
.hud{display:grid;grid-template-columns:1.2fr .9fr .8fr .8fr 1.2fr;gap:10px;margin-bottom:12px}.hud .box{background:#08101d;border:1px solid rgba(125,211,252,.22);border-radius:16px;padding:10px 12px}.label{display:block;color:#93dfff;font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.value{font-size:20px;font-weight:1000}
.gameGrid{display:grid;grid-template-columns:minmax(820px,1fr) 380px;gap:16px}.gameShell{padding:6px}#canvas{display:block;width:100%;height:auto;border-radius:24px;border:4px solid #f8fafc;background:#111827}.side{padding:16px}.side h2{font-size:30px;margin:0 0 8px}.side p{color:#e2e8f0;line-height:1.5;font-size:17px}.feedback{min-height:58px;font-size:18px;color:#fef08a;font-weight:900}
.miniPanel{background:#111827;border-radius:16px;padding:12px 14px;margin-top:10px}.miniTitle{font-weight:900;color:#93dfff;margin-bottom:6px}.miniPanel ul{margin:0;padding-left:18px;color:#dbeafe;line-height:1.45}
.progress{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}.badge{font-size:12px;font-weight:950;text-align:center;border-radius:12px;background:#172036;color:#dbeafe;padding:9px 6px}.badge.now{background:#78350f;color:#ffedd5}.badge.done{background:#14532d;color:#dcfce7}.kbd{display:inline-block;background:#020617;border:1px solid #334155;border-radius:8px;padding:2px 8px;font-weight:900}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:99;align-items:center;justify-content:center;padding:18px}.modalBox{max-width:980px;width:min(100%,980px);padding:24px}.modalGrid{display:grid;grid-template-columns:180px 1fr;gap:18px}.avatarPane{display:flex;align-items:flex-start;justify-content:center}.emojiAvatar,.imgAvatar{width:150px;height:150px;border-radius:24px;border:2px solid #34415f;background:#0f172a;display:flex;align-items:center;justify-content:center;overflow:hidden}.emojiAvatar{font-size:72px}.imgAvatar img{width:100%;height:100%;object-fit:cover}
.modalBox h2{font-size:32px;margin:0 0 8px}.modalBox p{font-size:20px;line-height:1.5;color:#e2e8f0}.choice{display:block;width:100%;text-align:left;margin:8px 0;border:0;border-radius:16px;padding:14px 15px;font-size:18px;font-weight:900;background:#dbeafe;color:#0f172a;cursor:pointer}.choice:hover{background:#bfdbfe}
.winGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.winCard{background:#111827;border-radius:16px;padding:14px;min-height:120px}.winCard h3{margin:0 0 8px;font-size:20px}.hintTag{display:inline-block;margin-top:8px;background:#082f49;color:#dbeafe;padding:6px 10px;border-radius:999px;font-weight:900;font-size:12px}
@media(max-width:1120px){.selectGrid,.gameGrid{grid-template-columns:1fr}.hud{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.heroContent,.modalGrid{grid-template-columns:1fr}.progress{grid-template-columns:repeat(2,1fr)}}


body.inGame .wrap{height:calc(100vh - 98px);overflow:hidden;display:flex;flex-direction:column}
body.inGame #game{display:flex;flex-direction:column;flex:1;min-height:0}
body.inGame .gameGrid{flex:1;min-height:0;align-items:stretch}
body.inGame .gameShell{display:flex;align-items:flex-start;justify-content:center;overflow:hidden;min-height:0;padding-top:0}
body.inGame #canvas{width:100%;max-height:calc(100vh - 212px);height:auto;touch-action:none}
body.inGame .side{overflow:auto;max-height:100%}


.nearbyCard{margin-top:12px;background:linear-gradient(180deg,#111827,#0b1224);border:1px solid rgba(147,197,253,.22);border-radius:16px;padding:12px 14px;min-height:72px}
.nearbyCard .small{font-size:12px;color:#93dfff;font-weight:900;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.nearbyCard .name{font-size:18px;font-weight:1000;color:#fff;margin-bottom:3px}
.nearbyCard .desc{font-size:14px;line-height:1.35;color:#cbd5e1}

.objectiveCard{margin-top:12px;background:linear-gradient(180deg,#1f2937,#111827);border:1px solid rgba(251,191,36,.28);border-radius:16px;padding:12px 14px;min-height:86px}
.objectiveCard .small{font-size:12px;color:#fde68a;font-weight:900;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.objectiveCard .name{font-size:18px;font-weight:1000;color:#fff;margin-bottom:4px}
.objectiveCard .desc{font-size:14px;line-height:1.35;color:#fef3c7}
.tokenPop{position:absolute;pointer-events:none;background:#fef3c7;color:#78350f;border-radius:999px;padding:4px 10px;font-weight:1000;box-shadow:0 8px 18px rgba(0,0,0,.25)}
.gameShell{position:relative}
.puzzleGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:12px}
.puzzleCard{border:0;border-radius:16px;background:#dbeafe;color:#0f172a;padding:14px;font-weight:950;text-align:left;cursor:pointer;min-height:92px}
.puzzleCard:hover{background:#bfdbfe;transform:translateY(-1px)}
.puzzleCard.good{background:#bbf7d0}.puzzleCard.bad{background:#fecaca}
.travelCard{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.62);opacity:0;pointer-events:none;transition:.25s}
.travelCard.show{opacity:1;pointer-events:auto}.travelInner{min-width:360px;max-width:620px;border-radius:28px;background:linear-gradient(135deg,#0f172a,#1e3a8a,#6d28d9);border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 80px rgba(0,0,0,.45);padding:28px;text-align:center}.travelInner .icon{font-size:64px}.travelInner .title{font-size:30px;font-weight:1000;margin-top:8px}.travelInner .sub{font-size:17px;color:#e0f2fe;margin-top:8px}

/* V21 mood lift: brighter, less heavy interface around the canvas */
:root{--panel:#fffaf0;--text:#0f172a;--muted:#475569;--gold:#f59e0b;--blue:#2563eb;--green:#16a34a;--purple:#7c3aed;--orange:#ea580c}
body{background:radial-gradient(circle at 20% 8%,#e0f2fe 0,#fef9c3 32%,#fce7f3 65%,#eef2ff 100%);color:var(--text)}
.header{background:linear-gradient(135deg,#38bdf8,#22c55e,#facc15,#fb7185,#a78bfa);box-shadow:0 10px 28px rgba(37,99,235,.18)}
.header h1{text-shadow:0 2px 12px rgba(255,255,255,.55);color:#0f172a}.sub{color:#1e293b;font-weight:800}
.panel,.side,.modalBox{background:rgba(255,255,255,.91);color:#0f172a;border:1px solid rgba(255,255,255,.72);box-shadow:0 18px 48px rgba(30,64,175,.18)}
.roster{border-color:#facc15;background:#eff6ff}.pill{background:#dbeafe;color:#1e3a8a}.role,.heroDesc,.side p,.modalBox p{color:#334155}.heroPortrait{border-color:#93c5fd}.bar{background:#dbeafe}
.hud .box{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(239,246,255,.92));border-color:rgba(59,130,246,.28)}.label{color:#0369a1}.value{color:#0f172a}
#canvas{border-color:#fff7ed;box-shadow:0 16px 42px rgba(14,116,144,.22);background:#fef3c7}.side h2{color:#0f172a}.feedback{color:#92400e}.miniPanel{background:linear-gradient(180deg,#f0f9ff,#fff7ed);color:#0f172a}.miniPanel ul{color:#334155}.kbd{background:#e0f2fe;border-color:#7dd3fc;color:#075985}
.badge{background:#e0f2fe;color:#075985}.badge.now{background:#fef3c7;color:#92400e}.badge.done{background:#dcfce7;color:#166534}
.nearbyCard{background:linear-gradient(180deg,#eff6ff,#ffffff);border-color:rgba(37,99,235,.22)}.nearbyCard .small{color:#0369a1}.nearbyCard .name{color:#0f172a}.nearbyCard .desc{color:#475569}
.objectiveCard{background:linear-gradient(180deg,#fff7ed,#fefce8);border-color:rgba(245,158,11,.32)}.objectiveCard .small{color:#b45309}.objectiveCard .name{color:#0f172a}.objectiveCard .desc{color:#78350f}
.modal{background:rgba(15,23,42,.48);backdrop-filter:blur(4px)}.emojiAvatar,.imgAvatar{background:#eff6ff;border-color:#93c5fd}.choice{background:#e0f2fe;color:#0f172a}.choice:hover{background:#bae6fd}.winCard{background:linear-gradient(180deg,#eff6ff,#fff7ed);color:#0f172a}.hintTag{background:#dbeafe;color:#1e3a8a}
.travelCard{background:rgba(15,23,42,.35);backdrop-filter:blur(5px)}.travelInner{background:linear-gradient(135deg,#e0f2fe,#dcfce7,#fef3c7,#fce7f3);color:#0f172a;border-color:rgba(255,255,255,.78);box-shadow:0 28px 72px rgba(14,116,144,.24)}.travelInner .sub{color:#334155}

/* V38: full-body teacher profile portraits in dialogue modals */
.modalGrid{grid-template-columns:200px 1fr}
.imgAvatar{width:170px;height:220px}
.imgAvatar img{width:100%;height:100%;object-fit:contain;padding:8px}


/* V39: remove the oversized page banner/header and reclaim vertical space */
.header{display:none!important}
.wrap{padding:6px 10px!important}
body.inGame .wrap{height:100vh!important}
body.inGame #canvas{max-height:calc(100vh - 140px)!important}
body:not(.inGame) .wrap{padding-top:10px!important}

/* V67 senior polish */
.selectGrid.refinedSelect{grid-template-columns:minmax(720px,1.15fr) minmax(420px,.85fr);align-items:start}
.rosterPanel{padding:20px 20px 22px}
.selectHeader h2{margin:10px 0 8px;font-size:34px;line-height:1.05;color:#10213d}
.selectHeader p{margin:0 0 18px;color:#47607f;font-size:16px;line-height:1.55}
.rosterCards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.heroCard{position:relative;border:2px solid rgba(245,158,11,.35);background:linear-gradient(180deg,#fffdf8,#fff7e8);border-radius:26px;padding:14px;cursor:pointer;transition:.2s transform,.2s box-shadow,.2s border-color;box-shadow:0 10px 26px rgba(15,23,42,.08);overflow:hidden}
.heroCard:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(15,23,42,.14);border-color:rgba(37,99,235,.45)}
.heroCard.active{border-color:var(--heroAccent);box-shadow:0 18px 40px color-mix(in srgb, var(--heroAccent) 28%, transparent), inset 0 0 0 1px rgba(255,255,255,.65)}
.heroCard::after{content:'';position:absolute;inset:auto -18px -28px auto;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.14),rgba(59,130,246,0));pointer-events:none}
.heroCardTop{display:flex;align-items:flex-start;gap:12px}
.heroThumbPane{width:132px;min-width:132px;height:162px;border-radius:22px;background:radial-gradient(circle at 50% 28%,#dbeafe 0,#dbeafe 46%,#fff7e8 47%,#fff7e8 100%);border:1px solid rgba(59,130,246,.18);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8px}
.heroThumbPane img{max-width:100%;max-height:92%;width:auto;height:auto;display:block;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(15,23,42,.12))}
.heroCardBody{flex:1;display:flex;flex-direction:column;min-width:0}
.heroCardName{font-size:28px;font-weight:1000;line-height:1;color:#10213d;margin:2px 0 4px}
.heroCardRole{font-size:14px;color:#5b6472;font-weight:800;margin-bottom:10px}
.heroTagRow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.heroMiniTag{font-size:12px;font-weight:900;padding:5px 10px;border-radius:999px;background:#e0f2fe;color:#075985}.heroMiniTag.warm{background:#fff7ed;color:#c2410c}
.heroStatMini{display:grid;gap:6px;margin-top:auto}.miniMeter{height:9px;border-radius:999px;background:#dbeafe;overflow:hidden}.miniMeter span{display:block;height:100%;background:linear-gradient(90deg,#38bdf8,#fbbf24)}
.heroCardFooter{display:flex;justify-content:space-between;align-items:center;margin-top:10px}.heroFocus{font-size:13px;font-weight:900;color:var(--heroAccent)}.heroSelectHint{font-size:12px;font-weight:800;color:#64748b}
.heroInfo.deluxe{padding:20px 22px 22px;border-color:color-mix(in srgb, var(--heroAccent) 26%, rgba(255,255,255,.10)); box-shadow:0 20px 55px rgba(0,0,0,.18), 0 0 0 1px color-mix(in srgb, var(--heroAccent) 18%, transparent)}
.heroInfoTop{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.heroMeta{flex:1}
.deluxe h2{font-size:52px;line-height:.95;margin:4px 0 8px;color:#10213d}.deluxe .role{font-size:24px;color:#475569;margin-bottom:0}
.deluxeHeroContent{grid-template-columns:240px 1fr;gap:20px;align-items:start}.heroPortraitWrap{position:relative;border-radius:28px;background:linear-gradient(180deg,#fff7e8,#ffffff);border:1px solid color-mix(in srgb, var(--heroAccent) 22%, rgba(245,158,11,.22));padding:14px;overflow:hidden;min-height:330px}
.heroAura{position:absolute;inset:18px 18px auto 18px;height:180px;border-radius:999px;background:radial-gradient(circle at center,#dbeafe 0,#dbeafe 58%,rgba(219,234,254,0) 60%)}
.deluxe .heroPortrait{position:relative;z-index:1;width:100%;border:0;border-radius:0;object-fit:contain;object-position:center bottom;image-rendering:auto;filter:drop-shadow(0 16px 24px rgba(15,23,42,.12))}
.heroHighlights{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.heroHighlight{padding:8px 12px;border-radius:14px;background:#eff6ff;color:#1e3a8a;font-size:13px;font-weight:900}
.deluxeStats{margin-top:10px}.deluxeStats .stat{grid-template-columns:120px 1fr;align-items:center}.deluxeStats .bar{height:14px;background:#d9e7f9}.deluxeStats .bar span{background:linear-gradient(90deg,#6cc5f4,#f4bd28)}
.heroInfo .heroDesc{font-size:17px;line-height:1.7;color:#334155}
@media(max-width:1240px){.selectGrid.refinedSelect{grid-template-columns:1fr}.deluxe h2{font-size:42px}}
@media(max-width:760px){.rosterCards{grid-template-columns:1fr}.deluxeHeroContent{grid-template-columns:1fr}.heroThumbPane{width:116px;min-width:116px;height:150px}}

/* V76 portrait polish */
.deluxe .heroPortrait{max-height:395px;}
.heroPortraitWrap{display:flex;align-items:flex-start;justify-content:center;}


/* V117 lesson layout cleanup */
.modalBox{max-width:860px!important;width:min(100%,860px)!important;max-height:88vh;overflow:auto;padding:20px 22px}
.modalGrid{grid-template-columns:150px 1fr!important;gap:16px;align-items:start}
.imgAvatar,.emojiAvatar{width:120px;height:120px}
.modalBox h2{font-size:28px;margin-bottom:6px}
#modalBody{font-size:16px;line-height:1.45;margin:0 0 10px;color:#334155}
.lessonTabs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.lessonTab{border:1px solid #93c5fd;background:#eff6ff;color:#1e3a8a;border-radius:999px;padding:8px 14px;font-size:14px;font-weight:800;cursor:pointer}
.lessonTab.active{background:#2563eb;color:#fff;border-color:#2563eb}
.lessonPage{display:none}
.lessonCard{background:#f8fafc;border:1px solid rgba(15,23,42,.10);border-radius:18px;padding:16px}
.lessonLead{font-size:18px;font-weight:900;color:#0f172a;margin-bottom:8px}
.lessonBodyText{font-size:15px;line-height:1.5;color:#334155;margin-bottom:10px}
.lessonSummary{font-size:15px;line-height:1.45;color:#0f172a;margin-bottom:8px}
.lessonBullet{font-size:15px;line-height:1.45;color:#1f2937;margin:4px 0}
.lessonCanvasWrap{max-width:620px;margin:0 auto}
.lessonInlineActions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
@media(max-width:720px){.modalBox{padding:16px}.modalGrid{grid-template-columns:1fr!important}.avatarPane{justify-content:flex-start}.imgAvatar,.emojiAvatar{width:96px;height:96px}}


/* V118 Training Academy modal polish */
.modalBox{max-width:780px!important;width:min(100%,780px)!important;max-height:86vh;overflow:auto;padding:18px 20px!important}
.modalGrid{grid-template-columns:126px 1fr!important;gap:14px!important;align-items:start}
.imgAvatar,.emojiAvatar{width:106px!important;height:106px!important;border-radius:20px!important}
.imgAvatar img{width:100%;height:100%;object-fit:contain!important;padding:8px;box-sizing:border-box}
.modalBox h2{font-size:24px!important;margin:0 0 4px!important}
#modalBody{font-size:14px!important;line-height:1.38!important;margin:0 0 10px!important;color:#334155!important}
.lessonTabs{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
.lessonTab{border:1px solid #93c5fd;background:#eff6ff;color:#1e3a8a;border-radius:999px;padding:7px 12px;font-size:13px;font-weight:900;cursor:pointer}
.lessonTab.active{background:#2563eb;color:#fff;border-color:#2563eb}
.lessonPage{display:none}
.lessonCard{background:#f8fafc;border:1px solid rgba(15,23,42,.10);border-radius:16px;padding:13px 14px;margin-bottom:10px}
.lessonCard.compact{padding:12px 14px}
.lessonLead{font-size:17px;font-weight:900;color:#0f172a;margin-bottom:7px}
.lessonBodyText{font-size:14px;line-height:1.42;color:#334155;margin-bottom:8px}
.lessonSummary{font-size:14px;line-height:1.42;color:#0f172a;margin-bottom:8px}
.lessonBullet,.scaffoldStep{font-size:13.5px;line-height:1.38;color:#1f2937;margin:5px 0}
.scaffoldStep{border-left:3px solid #93c5fd;padding-left:9px}
.conceptChips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.conceptChips span{background:#dbeafe;color:#1e3a8a;border-radius:999px;padding:4px 8px;font-size:12px;font-weight:900}
.scoreRibbon{display:inline-block;background:#ecfdf5;color:#166534;border:1px solid #86efac;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:900;margin:0 0 10px}
.lessonCanvasWrap{max-width:560px;margin:0 auto}
.lessonInlineActions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.choice{font-size:15px!important;padding:10px 12px!important;border-radius:12px!important;margin:7px 0!important}
@media(max-width:720px){.modalBox{padding:14px!important}.modalGrid{grid-template-columns:1fr!important}.avatarPane{justify-content:flex-start}.imgAvatar,.emojiAvatar{width:92px!important;height:92px!important}}


/* V119 Training flow polish */
.lessonTabs .lessonTab{transition:transform .12s ease, background .12s ease}
.lessonTabs .lessonTab:hover{transform:translateY(-1px)}
.lessonInlineActions .btn{min-width:138px}


/* V123 modal portrait polish: taller dialogue portraits for clearer mentor profiles */
.modalGrid{grid-template-columns:190px 1fr;align-items:flex-start}
.avatarPane{align-items:flex-start;justify-content:center}
.imgAvatar,.emojiAvatar{width:160px!important;height:210px!important;border-radius:28px!important}
.imgAvatar img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center bottom!important;padding:4px!important;box-sizing:border-box}
@media(max-width:720px){.imgAvatar,.emojiAvatar{width:108px!important;height:136px!important}}


/* V127 scaffold slide deck */
.scaffoldDeck{background:linear-gradient(180deg,#f8fafc,#eef6ff)!important;border:1px solid rgba(37,99,235,.14)!important}
.scaffoldSlide{background:#fff;border:1px solid rgba(15,23,42,.10);border-radius:18px;padding:16px 18px;box-shadow:0 8px 22px rgba(15,23,42,.06)}
.slideCounter{display:inline-block;background:#dbeafe;color:#1e3a8a;border-radius:999px;padding:4px 10px;font-weight:900;font-size:12px;margin-bottom:10px}
.slideTitle{font-weight:950;font-size:20px;color:#0f172a;margin-bottom:8px}
.slideBody{font-size:15px;line-height:1.5;color:#334155;margin-bottom:12px}
.slideExample{background:#ecfdf5;border:1px solid #86efac;border-radius:14px;padding:10px 12px;color:#166534;font-size:14px;line-height:1.45;margin-bottom:10px}
.slideMiniQuiz{background:#fff7ed;border:1px solid #fed7aa;border-radius:14px;padding:10px 12px;color:#9a3412;font-size:14px;line-height:1.45}
.scaffoldControls{margin-top:12px;gap:10px}


/* V129 scaffold mini-graphics */
.slideGraphic{background:linear-gradient(180deg,#f8fbff,#eef6ff);border:1px solid rgba(37,99,235,.14);border-radius:16px;padding:12px 14px;margin-bottom:10px}
.graphicCaption{margin-top:8px;font-size:12.5px;font-weight:800;color:#475569}
.plotChoiceGraphic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.plotCard{border-radius:14px;padding:10px 8px;text-align:center;font-weight:900;font-size:13px;color:#0f172a;background:#fff;border:1px solid rgba(15,23,42,.10)}
.plotCard div{font-size:11.5px;font-weight:700;color:#475569;margin-top:3px}
.plotCard.heat{box-shadow:inset 0 0 0 2px rgba(245,158,11,.22)}
.plotCard.umap{box-shadow:inset 0 0 0 2px rgba(34,197,94,.22)}
.plotCard.pca{box-shadow:inset 0 0 0 2px rgba(59,130,246,.22)}
.plotCard.volcano{box-shadow:inset 0 0 0 2px rgba(239,68,68,.22)}
.heatmapGraphic .miniHeatmap{display:grid;grid-template-columns:repeat(6,24px);gap:4px;justify-content:center}
.heatmapGraphic .miniHeatmap span{display:block;width:24px;height:18px;border-radius:5px;background:#4f6fe6}
.heatmapGraphic .miniHeatmap span.warm{background:#d6518a}
.heatmapGraphic .miniHeatmap span.gold{background:#e2aa37}
.umapGraphic,.pcaGraphic,.volcanoGraphic{position:relative;min-height:130px;overflow:hidden}
.umapDots,.pcaDots,.volcanoDots{position:absolute}
.umapDots i,.pcaDots i,.volcanoDots i{display:block;position:absolute;width:10px;height:10px;border-radius:999px}
.umapDots.clusterA{left:52px;top:28px}.umapDots.clusterA i{background:#22c55e}.umapDots.clusterA i:nth-child(1){left:0;top:8px}.umapDots.clusterA i:nth-child(2){left:20px;top:0}.umapDots.clusterA i:nth-child(3){left:36px;top:15px}.umapDots.clusterA i:nth-child(4){left:12px;top:24px}.umapDots.clusterA i:nth-child(5){left:28px;top:34px}.umapDots.clusterA i:nth-child(6){left:46px;top:26px}
.umapDots.clusterB{left:198px;top:22px}.umapDots.clusterB i{background:#3b82f6}.umapDots.clusterB i:nth-child(1){left:0;top:6px}.umapDots.clusterB i:nth-child(2){left:16px;top:20px}.umapDots.clusterB i:nth-child(3){left:34px;top:4px}.umapDots.clusterB i:nth-child(4){left:46px;top:26px}.umapDots.clusterB i:nth-child(5){left:60px;top:10px}.umapDots.clusterB i:nth-child(6){left:22px;top:38px}
.umapDots.clusterC{left:124px;top:74px}.umapDots.clusterC i{background:#a855f7}.umapDots.clusterC i:nth-child(1){left:0;top:8px}.umapDots.clusterC i:nth-child(2){left:16px;top:0}.umapDots.clusterC i:nth-child(3){left:30px;top:14px}.umapDots.clusterC i:nth-child(4){left:12px;top:26px}.umapDots.clusterC i:nth-child(5){left:34px;top:28px}
.miniAxes{position:absolute;inset:12px 12px 26px 12px;border-left:2px solid rgba(100,116,139,.5);border-bottom:2px solid rgba(100,116,139,.5)}
.miniAxes .xlab,.miniAxes .ylab{position:absolute;font-size:11px;color:#334155}.miniAxes .xlab{right:4px;bottom:-18px}.miniAxes .ylab{left:-8px;top:-2px}
.pcaDots.day1{left:86px;top:34px}.pcaDots.day1 i{background:#647df0}.pcaDots.day1 i:nth-child(1){left:0;top:24px}.pcaDots.day1 i:nth-child(2){left:14px;top:10px}.pcaDots.day1 i:nth-child(3){left:30px;top:0}.pcaDots.day1 i:nth-child(4){left:44px;top:18px}.pcaDots.day1 i:nth-child(5){left:18px;top:34px}.pcaDots.day1 i:nth-child(6){left:52px;top:30px}
.pcaDots.day2{left:282px;top:28px}.pcaDots.day2 i{background:#d38a34}.pcaDots.day2 i:nth-child(1){left:0;top:24px}.pcaDots.day2 i:nth-child(2){left:14px;top:10px}.pcaDots.day2 i:nth-child(3){left:30px;top:0}.pcaDots.day2 i:nth-child(4){left:44px;top:18px}.pcaDots.day2 i:nth-child(5){left:18px;top:34px}.pcaDots.day2 i:nth-child(6){left:52px;top:30px}
.volcanoDots.low{left:70px;top:78px}.volcanoDots.low i{background:#7aa2ff}.volcanoDots.low i:nth-child(1){left:0;top:18px}.volcanoDots.low i:nth-child(2){left:52px;top:28px}.volcanoDots.low i:nth-child(3){left:108px;top:34px}.volcanoDots.low i:nth-child(4){left:170px;top:26px}
.volcanoDots.high{left:84px;top:18px}.volcanoDots.high i{background:#ef4444}.volcanoDots.high i:nth-child(1){left:0;top:46px}.volcanoDots.high i:nth-child(2){left:62px;top:14px}.volcanoDots.high i:nth-child(3){left:132px;top:2px}.volcanoDots.high i:nth-child(4){left:204px;top:18px}
.summaryGraphic{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.summaryNode{background:#fff;border:1px solid rgba(15,23,42,.12);border-radius:14px;padding:10px 12px;font-weight:900;color:#0f172a}
.summaryArrow{font-size:18px;font-weight:900;color:#2563eb}
@media(max-width:720px){.plotChoiceGraphic{grid-template-columns:repeat(2,minmax(0,1fr))}.umapGraphic,.pcaGraphic,.volcanoGraphic{min-height:150px}}


/* V131 modal/portrait fixes */
.modalBox{
  position:relative!important;
  overflow:auto!important;
}
#modalActions{
  position:sticky!important;
  bottom:0!important;
  left:0!important;
  z-index:30!important;
  display:flex!important;
  gap:10px!important;
  padding:12px 0 4px!important;
  margin-top:10px!important;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.96) 38%,rgba(255,255,255,.98))!important;
}
#modalActions .btn{box-shadow:0 12px 28px rgba(15,23,42,.20)!important}
.imgAvatar img[src$="sultan_modal.png"],
.imgAvatar img[src$="idris_modal.png"]{
  object-fit:cover!important;
  object-position:center top!important;
  padding:0!important;
}


/* V132 scaffold drawing fixes */
.svgGraphic{padding:10px 12px!important;min-height:128px!important}
.miniSvg{width:100%;height:128px;display:block}
.miniSvg .axis{stroke:#94a3b8;stroke-width:2}
.miniSvg .arrow{stroke:#64748b;stroke-width:2.5}
.miniSvg .svgText{font:700 12px system-ui,sans-serif;fill:#334155}
.miniSvg .svgLabel{font:900 13px system-ui,sans-serif;fill:#0f172a}
.miniSvg .blue{fill:#6d94f6}
.miniSvg .red{fill:#ef4444}
.miniSvg .blueBox{fill:#bfdbfe;stroke:#3b82f6;stroke-width:2}
.miniSvg .redBox{fill:#fecaca;stroke:#ef4444;stroke-width:2}

/* V132 stronger modal action visibility */
#modalActions{
  position:sticky!important;
  bottom:0!important;
  left:0!important;
  z-index:999!important;
  padding:14px 0 8px!important;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.98) 34%,#fff 100%)!important;
}
.imgAvatar img[src$="idris_modal.png"],
.imgAvatar img[src$="sultan_modal.png"]{
  object-fit:cover!important;
  object-position:center top!important;
  padding:0!important;
}


/* V133 compact modal action buttons: no long white strip */
#modalActions{
  position:sticky!important;
  bottom:10px!important;
  left:0!important;
  z-index:999!important;
  display:inline-flex!important;
  width:max-content!important;
  max-width:100%!important;
  gap:10px!important;
  padding:6px 0 0!important;
  margin-top:10px!important;
  background:transparent!important;
  box-shadow:none!important;
}
#modalActions::before,
#modalActions::after{display:none!important;content:none!important}
#modalActions .btn{
  box-shadow:0 12px 28px rgba(15,23,42,.22)!important;
}
.imgAvatar img[src$="idris.png"],
.imgAvatar img[src$="idris_modal.png"],
.imgAvatar img[src$="sultan_modal.png"]{
  object-fit:cover!important;
  object-position:center top!important;
  padding:0!important;
}

/* V151 story selector + modular story roster */
.centeredHeader{text-align:center;max-width:820px;margin:0 auto 22px}
.storyMenuPanel{padding:28px;overflow:hidden}
.storyCards{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:22px;margin-top:18px}
.storyCard{appearance:none;border:1px solid rgba(15,23,42,.12);background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(248,250,252,.90));border-radius:28px;padding:24px;text-align:left;display:grid;grid-template-columns:82px 1fr auto;gap:18px;align-items:center;min-height:190px;cursor:pointer;box-shadow:0 18px 46px rgba(15,23,42,.11);transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.storyCard:hover,.storyCard.active{transform:translateY(-3px);border-color:rgba(37,99,235,.42);box-shadow:0 24px 60px rgba(37,99,235,.16)}
.storyIcon{width:78px;height:78px;border-radius:24px;display:grid;place-items:center;font-size:42px;background:linear-gradient(135deg,#eff6ff,#fef3c7);box-shadow:inset 0 0 0 1px rgba(15,23,42,.07)}
.storyCardTitle{font-size:24px;font-weight:1000;color:#0f172a;margin-bottom:8px;letter-spacing:-.02em}
.storyCardText{font-weight:700;color:#475569;line-height:1.45;margin-bottom:12px}
.storyCardMeta{display:inline-flex;border-radius:999px;background:#f1f5f9;color:#1e3a8a;padding:7px 11px;font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.storySelectHint{font-weight:1000;color:#2563eb;white-space:nowrap}
.storyChosenBar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px;padding:14px 16px;border:1px solid rgba(15,23,42,.10);border-radius:22px;background:rgba(255,255,255,.82);box-shadow:0 12px 32px rgba(15,23,42,.08)}
.storyChosenBar strong{display:block;margin-top:4px;font-size:20px;color:#0f172a}
@media (max-width: 900px){.storyCards{grid-template-columns:1fr}.storyCard{grid-template-columns:64px 1fr}.storySelectHint{grid-column:2}.storyIcon{width:62px;height:62px;font-size:34px}.storyChosenBar{align-items:flex-start;flex-direction:column}}

.hud .box{min-width:0}
#hudBuilding{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* V207 character-select refresh */
.storyChosenBar{background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(239,246,255,.92));border:1px solid rgba(148,163,184,.24);border-radius:24px;padding:14px 18px;box-shadow:0 14px 36px rgba(37,99,235,.10)}
.rosterPanel{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(254,249,195,.34))}
.heroInfo.deluxe{background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(239,246,255,.80));position:relative;overflow:hidden}
.heroInfo.deluxe::before{content:'';position:absolute;right:-40px;top:-40px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle, color-mix(in srgb, var(--heroAccent) 20%, white 80%) 0%, rgba(255,255,255,0) 68%);pointer-events:none}
.heroCard{background:linear-gradient(180deg,#ffffff,#fffaf0);border:1px solid color-mix(in srgb, var(--cardAccent, #2563eb) 24%, #e2e8f0 76%);box-shadow:0 12px 28px rgba(15,23,42,.08);padding:16px}
.heroCard::before{content:'';position:absolute;left:16px;right:16px;top:0;height:6px;border-radius:0 0 12px 12px;background:linear-gradient(90deg,var(--cardAccent, #2563eb), color-mix(in srgb, var(--cardAccent, #2563eb) 35%, #f59e0b 65%))}
.heroCard::after{background:radial-gradient(circle, color-mix(in srgb, var(--cardAccent, #2563eb) 14%, white 86%), rgba(59,130,246,0))}
.heroCard.active{border-color:var(--heroAccent);transform:translateY(-2px)}
.heroThumbPane{background:radial-gradient(circle at 50% 28%,#dbeafe 0,#dbeafe 40%,#fef3c7 41%,#fff7ed 100%)}
.heroCardName{font-size:clamp(22px,2vw,25px);letter-spacing:.01em}
.heroCardRole{font-size:15px}
.heroTagRow{margin-bottom:12px}
.heroMiniTag{background:#e0f2fe;color:#0c4a6e}
.heroMiniTag.warm{background:#fef3c7;color:#92400e}
.heroAccomplishmentPreview{font-size:14px;line-height:1.45;color:#475569;background:linear-gradient(180deg,#ffffff,#f8fafc);border:1px solid rgba(148,163,184,.18);border-radius:16px;padding:10px 12px;min-height:66px}
.heroCardFooter{align-items:flex-start;gap:10px}
.heroFocus{max-width:72%;line-height:1.35;color:#334155}
.heroSelectHint{padding-top:2px}
.heroHighlights{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 12px}
.heroHighlight{background:color-mix(in srgb, var(--heroAccent) 14%, white 86%);color:#183b7a;border:1px solid color-mix(in srgb, var(--heroAccent) 18%, #dbeafe 82%)}
.heroAchievements{display:grid;gap:10px;margin-top:4px}
.heroSectionTitle{font-size:13px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase;color:#475569;margin:2px 0 4px}
.achievementItem{background:linear-gradient(180deg,#ffffff,#f8fafc);border:1px solid rgba(148,163,184,.22);border-left:5px solid color-mix(in srgb, var(--heroAccent) 58%, white 42%);border-radius:16px;padding:11px 14px;color:#334155;font-size:14px;line-height:1.45;box-shadow:0 8px 18px rgba(15,23,42,.04)}
.deluxeStats{display:grid;gap:9px;margin-top:14px;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(248,250,252,.94));border:1px solid rgba(148,163,184,.18);border-radius:18px;padding:14px}
.deluxeStats .stat{grid-template-columns:110px 1fr;color:#334155}
.deluxeStats .bar{background:#dbeafe}
.deluxeStats .bar span{background:linear-gradient(90deg, color-mix(in srgb, var(--heroAccent) 55%, white 45%), #f4bd28)}
@media(max-width:760px){.heroAccomplishmentPreview{min-height:auto}.heroFocus{max-width:none}}

/* V208 sheriff briefing */
.caseBriefingWrap{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:start;margin-top:4px}
.casePosterPane,.caseDialoguePane{background:linear-gradient(180deg,#fffef8,#f8fafc);border:1px solid rgba(148,163,184,.22);border-radius:20px;padding:14px;box-shadow:0 10px 24px rgba(15,23,42,.06)}
.casePaneTitle{font-size:12px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:#64748b;margin-bottom:10px}
.casePosterImg{display:block;width:100%;height:auto;border-radius:14px;border:1px solid rgba(148,163,184,.18);background:#fff}
.caseTypewriter{min-height:210px;white-space:pre-wrap;font-size:18px;line-height:1.6;color:#0f172a;background:linear-gradient(180deg,#fffdf7,#ffffff);border:1px solid rgba(251,191,36,.28);border-left:5px solid #f59e0b;border-radius:18px;padding:16px 18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.caseTypewriter::after{content:'▌';display:inline-block;margin-left:2px;color:#2563eb;animation:caretBlink 1s steps(1) infinite}
.caseHint{margin-top:10px;font-size:13px;color:#64748b}
#caseCloseBtn[disabled]{opacity:.6;cursor:not-allowed}
@keyframes caretBlink{50%{opacity:0}}
@media(max-width:720px){.caseBriefingWrap{grid-template-columns:1fr}.caseTypewriter{min-height:160px;font-size:16px}}


/* V209 cinematic sheriff case briefing */
.modal.caseModal{background:radial-gradient(circle at 50% 20%,rgba(30,64,175,.45),rgba(2,6,23,.82) 56%,rgba(0,0,0,.92));backdrop-filter:blur(7px)}
.modal.caseModal .modalBox{max-width:1120px!important;width:min(96vw,1120px)!important;background:linear-gradient(145deg,#111827,#1f2937 50%,#111827)!important;border:2px solid rgba(251,191,36,.55)!important;box-shadow:0 34px 100px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.08),0 0 42px rgba(251,191,36,.16)!important;color:#f8fafc}
.modal.caseModal .modalGrid{grid-template-columns:210px 1fr!important;gap:18px!important}
.modal.caseModal .imgAvatar{width:190px!important;height:260px!important;background:radial-gradient(circle at 50% 28%,#fef3c7 0,#f59e0b 42%,#0f172a 43%,#0f172a 100%)!important;border:2px solid rgba(251,191,36,.5)!important;box-shadow:0 18px 44px rgba(0,0,0,.35)}
.modal.caseModal .imgAvatar img{object-fit:contain!important;object-position:center bottom!important;padding:2px!important;filter:drop-shadow(0 14px 18px rgba(0,0,0,.35))}
.modal.caseModal #modalTitle{color:#fef3c7!important;font-size:30px!important;letter-spacing:.01em!important;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.modal.caseModal #modalBody{display:none!important}
.caseCinematic{position:relative}
.caseCinematic::before{content:'';position:absolute;inset:-10px;border-radius:24px;background:linear-gradient(90deg,rgba(251,191,36,.08),rgba(59,130,246,.08),rgba(251,191,36,.08));pointer-events:none}
.caseFileHeader{position:relative;display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;padding:14px 16px;border-radius:18px;background:linear-gradient(90deg,rgba(15,23,42,.96),rgba(51,65,85,.76));border:1px solid rgba(251,191,36,.28)}
.caseEyebrow{font-size:12px;font-weight:1000;letter-spacing:.14em;text-transform:uppercase;color:#93c5fd}
.caseHeadline{font-size:28px;line-height:1;font-weight:1000;color:#fff7ed;margin-top:4px}
.caseStamp{transform:rotate(-4deg);font-size:18px;font-weight:1000;letter-spacing:.08em;color:#991b1b;background:#fee2e2;border:3px solid #991b1b;border-radius:10px;padding:8px 12px;box-shadow:0 10px 24px rgba(0,0,0,.24)}
.modal.caseModal .caseBriefingWrap{display:grid;grid-template-columns:250px 1fr;gap:16px;align-items:stretch;margin-top:0}
.modal.caseModal .casePosterPane,.modal.caseModal .caseDialoguePane{background:linear-gradient(180deg,rgba(255,251,235,.97),rgba(255,247,237,.94));border:1px solid rgba(251,191,36,.4);border-radius:22px;padding:14px;box-shadow:0 18px 34px rgba(0,0,0,.22);color:#0f172a}
.modal.caseModal .casePaneTitle{font-size:12px;font-weight:1000;letter-spacing:.12em;text-transform:uppercase;color:#92400e;margin-bottom:10px}
.modal.caseModal .casePosterImg{width:100%;border-radius:16px;border:2px solid rgba(120,53,15,.18);box-shadow:0 14px 28px rgba(0,0,0,.18);background:#fff7ed}
.caseEvidenceTags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.caseEvidenceTags span{font-size:11px;font-weight:1000;color:#1e3a8a;background:#dbeafe;border-radius:999px;padding:6px 8px}
.caseScroll{background:linear-gradient(180deg,#fffdf3,#fffbeb);border:1px solid rgba(120,53,15,.22);border-radius:18px;padding:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.caseSpeaker{display:inline-block;font-size:12px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase;color:#fef3c7;background:#78350f;border-radius:999px;padding:6px 10px;margin-bottom:10px}
.modal.caseModal .caseTypewriter{min-height:236px;white-space:pre-wrap;font-size:20px;line-height:1.58;color:#111827;background:transparent;border:0;border-left:0;border-radius:0;padding:0;box-shadow:none;font-family:Georgia,'Times New Roman',serif;font-weight:700}
.modal.caseModal .caseTypewriter::after{content:'▌';display:inline-block;margin-left:2px;color:#b45309;animation:caretBlink .8s steps(1) infinite}
.caseIncidentGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.caseIncidentGrid div{background:rgba(15,23,42,.06);border:1px solid rgba(15,23,42,.08);border-radius:14px;padding:10px}
.caseIncidentGrid b{display:block;color:#78350f;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.caseIncidentGrid span{display:block;color:#334155;font-size:13px;font-weight:800;margin-top:4px}
.modal.caseModal .caseHint{font-size:13px;color:#64748b;margin-top:10px}
.caseAcceptBtn{background:linear-gradient(135deg,#f59e0b,#b45309)!important;color:#fff7ed!important;box-shadow:0 14px 30px rgba(180,83,9,.28)!important}
.caseAcceptBtn[disabled]{opacity:.55;filter:grayscale(.35);cursor:not-allowed}
@media(max-width:900px){.modal.caseModal .modalGrid{grid-template-columns:1fr!important}.modal.caseModal .avatarPane{display:none}.modal.caseModal .caseBriefingWrap{grid-template-columns:1fr}.caseIncidentGrid{grid-template-columns:1fr}.caseHeadline{font-size:22px}.modal.caseModal .caseTypewriter{font-size:17px;min-height:170px}}


/* V210 cinematic suspicious carriage offer */
.modal.offerModal{background:radial-gradient(circle at 50% 16%,rgba(91,33,182,.42),rgba(15,23,42,.82) 58%,rgba(2,6,23,.94));backdrop-filter:blur(8px)}
.modal.offerModal .modalBox{max-width:1180px!important;width:min(96vw,1180px)!important;background:linear-gradient(145deg,#0f172a,#1e293b 50%,#0f172a)!important;border:2px solid rgba(244,114,182,.28)!important;box-shadow:0 34px 110px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.06),0 0 40px rgba(168,85,247,.20)!important;color:#f8fafc}
.modal.offerModal .modalGrid{grid-template-columns:1fr!important}
.modal.offerModal .avatarPane{display:none!important}
.modal.offerModal #modalTitle{color:#fde68a!important;font-size:32px!important;letter-spacing:.01em!important;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.modal.offerModal #modalBody{display:none!important}
.offerHeader{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;padding:16px 18px;border-radius:22px;background:linear-gradient(90deg,rgba(30,41,59,.96),rgba(88,28,135,.72));border:1px solid rgba(244,114,182,.18)}
.offerEyebrow{font-size:12px;font-weight:1000;letter-spacing:.14em;text-transform:uppercase;color:#c4b5fd}
.offerHeadline{font-size:29px;line-height:1.04;font-weight:1000;color:#fff7ed;margin-top:4px}
.offerStamp{transform:rotate(-5deg);font-size:17px;font-weight:1000;letter-spacing:.08em;color:#831843;background:#fce7f3;border:3px solid #9d174d;border-radius:12px;padding:8px 12px;box-shadow:0 12px 26px rgba(0,0,0,.28)}
.offerSceneFrame{border-radius:24px;overflow:hidden;border:1px solid rgba(244,114,182,.22);box-shadow:0 18px 44px rgba(0,0,0,.22);margin-bottom:16px;background:#020617}
.offerSceneFrame img{display:block;width:100%;height:220px;object-fit:cover;object-position:center 28%}
.offerCastGrid{display:grid;grid-template-columns:240px 1fr 240px;gap:16px;align-items:stretch}
.offerCharCard,.offerDialoguePane{background:linear-gradient(180deg,rgba(255,251,235,.97),rgba(255,247,237,.95));border:1px solid rgba(251,191,36,.26);border-radius:22px;padding:14px;box-shadow:0 18px 34px rgba(0,0,0,.20);color:#0f172a}
.offerCharCard.hero{border-color:rgba(59,130,246,.26);background:linear-gradient(180deg,rgba(239,246,255,.98),rgba(248,250,252,.95))}
.offerCardLabel{display:inline-block;font-size:11px;font-weight:1000;letter-spacing:.12em;text-transform:uppercase;color:#7c2d12;background:#ffedd5;border-radius:999px;padding:6px 10px}
.offerCharCard.hero .offerCardLabel{color:#1e3a8a;background:#dbeafe}
.offerPortraitWrap{margin-top:12px;border-radius:18px;background:radial-gradient(circle at 50% 24%,#fef3c7 0,#f59e0b 38%,#0f172a 39%,#0f172a 100%);border:2px solid rgba(251,191,36,.38);overflow:hidden;height:230px;display:flex;align-items:flex-end;justify-content:center}
.offerCharCard.hero .offerPortraitWrap{background:radial-gradient(circle at 50% 24%,#dbeafe 0,#93c5fd 40%,#eff6ff 41%,#eff6ff 100%);border-color:rgba(59,130,246,.28)}
.offerPortraitWrap img{width:100%;height:100%;object-fit:contain;object-position:center bottom;padding:6px}
.offerCharName{font-size:22px;line-height:1.05;font-weight:1000;color:#111827;margin-top:12px}
.offerCharRole{font-size:14px;font-weight:800;color:#475569;margin-top:6px}
.offerPaneTitle{font-size:12px;font-weight:1000;letter-spacing:.12em;text-transform:uppercase;color:#92400e;margin-bottom:10px}
.offerScroll{background:linear-gradient(180deg,#fffdf3,#fffbeb);border:1px solid rgba(120,53,15,.22);border-radius:18px;padding:16px;min-height:280px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.offerSpeakerTag{display:inline-block;font-size:12px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase;color:#fef3c7;background:#78350f;border-radius:999px;padding:6px 10px;margin-bottom:10px}
.offerTypewriter{min-height:224px;white-space:pre-wrap;font-size:20px;line-height:1.6;color:#111827;font-family:Georgia,'Times New Roman',serif;font-weight:700}
.offerTypewriter::after{content:'▌';display:inline-block;margin-left:2px;color:#be123c;animation:caretBlink .8s steps(1) infinite}
.offerHint{margin-top:10px;font-size:13px;color:#64748b}
@media(max-width:980px){.offerCastGrid{grid-template-columns:1fr}.offerSceneFrame img{height:180px}.offerTypewriter{font-size:17px;min-height:180px}.offerHeadline{font-size:23px}}


/* V213 cinematic lesson intros for all teacher training points */
.modal.teachModal{background:radial-gradient(circle at 50% 16%,rgba(14,116,144,.30),rgba(15,23,42,.84) 58%,rgba(2,6,23,.95));backdrop-filter:blur(8px)}
.modal.teachModal .modalBox{max-width:1180px!important;width:min(96vw,1180px)!important;background:linear-gradient(145deg,#0f172a,#1e293b 52%,#0f172a)!important;border:2px solid rgba(56,189,248,.26)!important;box-shadow:0 34px 110px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.06),0 0 40px rgba(56,189,248,.16)!important;color:#f8fafc}
.modal.teachModal .modalGrid{grid-template-columns:1fr!important}
.modal.teachModal .avatarPane{display:none!important}
.modal.teachModal #modalTitle{color:#fefce8!important;font-size:31px!important;letter-spacing:.01em!important;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.modal.teachModal #modalBody{display:none!important}
.teachHeader{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;padding:16px 18px;border-radius:22px;background:linear-gradient(90deg,rgba(15,23,42,.96),rgba(8,145,178,.58));border:1px solid rgba(125,211,252,.20)}
.teachEyebrow{font-size:12px;font-weight:1000;letter-spacing:.14em;text-transform:uppercase;color:#bae6fd}
.teachHeadline{font-size:29px;line-height:1.04;font-weight:1000;color:#fff7ed;margin-top:4px}
.teachStamp{transform:rotate(-4deg);font-size:16px;font-weight:1000;letter-spacing:.08em;color:#155e75;background:#ecfeff;border:3px solid #0891b2;border-radius:12px;padding:8px 12px;box-shadow:0 12px 26px rgba(0,0,0,.28)}
.teachSceneFrame{position:relative;border-radius:24px;overflow:hidden;border:1px solid rgba(125,211,252,.22);box-shadow:0 18px 44px rgba(0,0,0,.22);margin-bottom:16px;background:#020617}
.teachSceneFrame img{display:block;width:100%;height:220px;object-fit:cover;object-position:center 30%;filter:saturate(1.03)}
.teachSceneCaption{position:absolute;left:14px;right:14px;bottom:14px;font-size:14px;font-weight:800;line-height:1.4;color:#fffaf0;background:linear-gradient(90deg,rgba(15,23,42,.84),rgba(15,23,42,.40));border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:10px 12px;box-shadow:0 10px 26px rgba(0,0,0,.22)}
.teachCastGrid{display:grid;grid-template-columns:240px 1fr 240px;gap:16px;align-items:stretch}
.teachCharCard,.teachDialoguePane{background:linear-gradient(180deg,rgba(255,251,235,.97),rgba(255,247,237,.95));border:1px solid rgba(251,191,36,.24);border-radius:22px;padding:14px;box-shadow:0 18px 34px rgba(0,0,0,.20);color:#0f172a}
.teachCharCard.hero{border-color:rgba(56,189,248,.22);background:linear-gradient(180deg,rgba(240,249,255,.98),rgba(248,250,252,.95))}
.teachCardLabel{display:inline-block;font-size:11px;font-weight:1000;letter-spacing:.12em;text-transform:uppercase;color:#7c2d12;background:#ffedd5;border-radius:999px;padding:6px 10px}
.teachCharCard.hero .teachCardLabel{color:#155e75;background:#cffafe}
.teachPortraitWrap{margin-top:12px;border-radius:18px;background:radial-gradient(circle at 50% 24%,#fef3c7 0,#f59e0b 38%,#0f172a 39%,#0f172a 100%);border:2px solid rgba(251,191,36,.38);overflow:hidden;height:230px;display:flex;align-items:flex-end;justify-content:center}
.teachPortraitWrap.hero,.teachCharCard.hero .teachPortraitWrap{background:radial-gradient(circle at 50% 24%,#d9f99d 0,#7dd3fc 32%,#ecfeff 33%,#eff6ff 100%);border-color:rgba(56,189,248,.32)}
.teachPortraitWrap img{width:100%;height:100%;object-fit:contain;object-position:center bottom;padding:6px}
.teachCharName{font-size:22px;line-height:1.05;font-weight:1000;color:#111827;margin-top:12px}
.teachCharRole{font-size:14px;font-weight:800;color:#475569;margin-top:6px}
.teachPaneTitle{font-size:12px;font-weight:1000;letter-spacing:.12em;text-transform:uppercase;color:#92400e;margin-bottom:10px}
.teachScroll{background:linear-gradient(180deg,#fffdf3,#fffbeb);border:1px solid rgba(120,53,15,.22);border-radius:18px;padding:16px;min-height:288px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.teachSpeakerTag{display:inline-block;font-size:12px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase;color:#fef3c7;background:#78350f;border-radius:999px;padding:6px 10px;margin-bottom:10px}
.teachTypewriter{min-height:228px;white-space:pre-wrap;font-size:20px;line-height:1.6;color:#111827;font-family:Georgia,'Times New Roman',serif;font-weight:700}
.teachTypewriter::after{content:'▌';display:inline-block;margin-left:2px;color:#0891b2;animation:caretBlink .8s steps(1) infinite}
.teachPreviewBox{margin-top:12px;background:linear-gradient(180deg,#f8fafc,#eff6ff);border:1px solid rgba(148,163,184,.18);border-radius:18px;padding:14px}
.teachPreviewTitle{font-size:12px;font-weight:1000;letter-spacing:.12em;text-transform:uppercase;color:#1e3a8a;margin-bottom:8px}
.teachPreviewBox ul{margin:0 0 0 18px;padding:0;color:#334155;font-size:14px;font-weight:700;line-height:1.55}
.teachPreviewBox li+li{margin-top:6px}
.teachPreviewNote{margin-top:10px;font-size:13px;color:#475569;font-weight:700}
@media(max-width:980px){.teachCastGrid{grid-template-columns:1fr}.teachSceneFrame img{height:180px}.teachTypewriter{font-size:17px;min-height:180px}.teachHeadline{font-size:23px}}


/* V216: literal full-poster dialogue cinematic format */
.modal.dialoguePosterModal{
  background:radial-gradient(circle at 50% 20%,rgba(120,53,15,.32),rgba(2,6,23,.88) 62%,rgba(0,0,0,.96));
  backdrop-filter:blur(8px);
}
.modal.dialoguePosterModal .modalBox{
  max-width:1500px!important;
  width:min(98vw,1500px)!important;
  max-height:96vh!important;
  overflow:auto!important;
  padding:14px 16px 18px!important;
  background:linear-gradient(180deg,#050608,#0a0d14 50%,#050608)!important;
  border:2px solid rgba(199,157,79,.48)!important;
  border-radius:18px!important;
  box-shadow:0 34px 120px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.04),0 0 50px rgba(217,168,72,.18)!important;
  color:#f8ecd2!important;
}
.modal.dialoguePosterModal .modalGrid{grid-template-columns:1fr!important}
.modal.dialoguePosterModal .avatarPane{display:none!important}
.modal.dialoguePosterModal #modalTitle{display:none!important}
.modal.dialoguePosterModal #modalBody{display:none!important}
.modal.dialoguePosterModal #modalActions{display:none!important}

.dialoguePoster{
  position:relative;
  min-height:calc(96vh - 44px);
  color:#f8ecd2;
  background:
    radial-gradient(circle at 52% 18%,rgba(120,76,22,.28),rgba(8,9,13,.96) 58%),
    linear-gradient(180deg,#0b0b10,#050608);
  border:1px solid rgba(211,169,88,.40);
  border-radius:18px;
  padding:14px 20px 18px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
  overflow:hidden;
}
.dialoguePoster::before,
.dialoguePoster::after{
  content:'';
  position:absolute;
  pointer-events:none;
  border-color:rgba(211,169,88,.50);
}
.dialoguePoster::before{inset:16px;border:2px solid rgba(211,169,88,.23);border-radius:18px}
.dialoguePoster::after{left:32px;right:32px;top:58px;height:2px;background:linear-gradient(90deg,transparent,rgba(211,169,88,.55),transparent)}

.posterTitleBlock{
  text-align:center;
  margin:0 auto 10px;
  position:relative;
  z-index:2;
}
.posterTitle{
  display:inline-block;
  min-width:min(680px,80vw);
  padding:10px 44px 8px;
  font-family:Georgia,serif;
  font-size:clamp(38px,4.3vw,64px);
  line-height:.96;
  font-weight:900;
  letter-spacing:.035em;
  text-transform:uppercase;
  color:#d9aa4a;
  background:linear-gradient(180deg,#17120d,#090a0f);
  border:2px solid rgba(211,169,88,.50);
  border-radius:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.06);
  text-shadow:0 4px 12px rgba(0,0,0,.65);
}
.posterSubtitle{
  margin-top:5px;
  font-size:clamp(14px,1.5vw,22px);
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#c9953a;
}

.posterScene{
  position:relative;
  z-index:1;
  height:220px;
  margin:0 30px 14px;
  border:1px solid rgba(211,169,88,.36);
  border-radius:12px;
  overflow:hidden;
  background:#03050a;
  box-shadow:0 18px 38px rgba(0,0,0,.32);
}
.posterScene img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  filter:saturate(1.05) contrast(1.02) brightness(.92);
}
.posterScene::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.32),transparent 20%,transparent 80%,rgba(0,0,0,.38));
  pointer-events:none;
}

.posterBody{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:300px 1fr 300px;
  gap:18px;
  align-items:stretch;
}
.posterSide{
  display:flex;
  align-items:stretch;
}
.posterSide{
  background:linear-gradient(180deg,#12121b,#07090f);
  border:1px solid rgba(211,169,88,.34);
  border-radius:16px;
  padding:10px;
  box-shadow:0 20px 36px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.03);
}
.posterRoleTag{
  display:inline-block;
  align-self:flex-start;
  padding:6px 12px;
  margin-bottom:10px;
  border-radius:999px;
  background:rgba(255,237,213,.95);
  color:#8a3d0a;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.posterSide{
  flex-direction:column;
  align-items:center;
}
.posterPortrait{
  width:232px;
  height:218px;
  border-radius:16px;
  background:radial-gradient(circle at 50% 32%,#33224c,#07101f 70%);
  border:2px solid rgba(211,169,88,.48);
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.posterSide.right .posterPortrait{
  background:radial-gradient(circle at 50% 32%,#b9dbff,#eaf4ff 62%,#07101f 63%);
}
.posterPortrait img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center bottom;
  padding:4px;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.38));
}
.posterName{
  margin-top:12px;
  font-family:Georgia,serif;
  font-size:clamp(22px,2vw,25px);
  line-height:1.0;
  font-weight:900;
  letter-spacing:.035em;
  text-transform:uppercase;
  text-align:center;
  color:#d9aa4a;
}
.posterRole{
  margin-top:6px;
  font-size:11px;
  line-height:1.22;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:900;
  text-align:center;
  color:#c59b50;
}
.posterSide.right .posterRoleTag{background:#dbeafe;color:#1e3a8a}
.posterSide.right .posterName{color:#f4d184}

.posterDialogue{
  min-height:370px;
  background:linear-gradient(180deg,rgba(27,19,14,.98),rgba(12,13,19,.98));
  border:1px solid rgba(211,169,88,.26);
  border-radius:16px;
  padding:14px;
  box-shadow:0 20px 36px rgba(0,0,0,.28);
}
.posterDialogueStack{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:424px;
  overflow:auto;
  padding:2px 4px 4px;
}
.posterBubble{
  position:relative;
  padding:13px 18px 15px;
  background:linear-gradient(180deg,#f5e6c5,#ead3a6);
  color:#21160d;
  border:2px solid rgba(104,66,18,.38);
  border-radius:14px;
  box-shadow:0 12px 26px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.28);
}
.posterBubble.left{margin-right:54px}
.posterBubble.hero{
  margin-left:54px;
  background:linear-gradient(180deg,#ead0a8,#daba88);
}
.posterBubbleSpeaker{
  font-size:18px;
  line-height:1.1;
  font-weight:1000;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#7a4b19;
  margin-bottom:6px;
}
.posterBubble.hero .posterBubbleSpeaker{color:#6d3911}
.posterBubbleBody{
  font-family:Georgia,serif;
  font-size:clamp(18px,1.45vw,23px);
  line-height:1.25;
  font-weight:800;
  white-space:pre-wrap;
}
.posterBubbleBody::after{
  content:'▌';
  display:inline-block;
  margin-left:2px;
  color:#a45b13;
  animation:caretBlink .8s steps(1) infinite;
}
.posterBubble.done .posterBubbleBody::after{display:none}

.posterFooter{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:14px;
  padding:10px 36px 0;
}
.posterPrompt{
  flex:1;
  color:#d9aa4a;
  font-size:clamp(14px,1.2vw,20px);
  line-height:1.35;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
}
.posterActions{
  display:flex;
  align-items:center;
  gap:10px;
}
.posterPrimaryBtn,.posterSecondaryBtn{
  border:none;
  border-radius:12px;
  padding:12px 18px;
  font-size:16px;
  font-weight:1000;
  cursor:pointer;
  white-space:nowrap;
}
.posterPrimaryBtn{
  color:#fff7ed;
  background:linear-gradient(180deg,#d69a25,#9b5d10);
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.posterPrimaryBtn:disabled{opacity:.48;cursor:not-allowed;filter:grayscale(.25)}
.posterSecondaryBtn{
  color:#111827;
  background:linear-gradient(180deg,#e5e7eb,#aab4c7);
}
.posterSecondaryBtn:disabled{opacity:.48;cursor:not-allowed;filter:grayscale(.25)}

@media(max-width:1120px){
  .posterBody{grid-template-columns:220px 1fr 220px}
  .posterPortrait{width:180px;height:230px}
  .posterName{font-size:22px}
  .posterScene{height:180px;margin-left:12px;margin-right:12px}
}
@media(max-width:860px){
  .posterBody{grid-template-columns:1fr}
  .posterSide{flex-direction:row;gap:14px;align-items:center;justify-content:flex-start}
  .posterPortrait{width:118px;height:142px;margin:0}
  .posterName,.posterRole{text-align:left}
  .posterScene{height:180px}
  .posterBubble.left,.posterBubble.hero{margin-left:0;margin-right:0}
  .posterFooter{padding:10px 4px 0;flex-direction:column}
  .posterTitle{min-width:auto;width:100%;font-size:34px}
}


/* V217 selection polish + compact hero info */
.heroCard{overflow:hidden;position:relative}
.heroCard.active{transform:translateY(-4px) scale(1.01);box-shadow:0 22px 52px color-mix(in srgb, var(--heroAccent) 28%, transparent), inset 0 0 0 1px rgba(255,255,255,.8)}
.heroCard.active .heroThumbPane{background:radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--cardAccent, #2563eb) 20%, #fff7ed 80%) 0, #fff7ed 35%, #fde68a 50%, #fff7ed 78%);border-color:color-mix(in srgb, var(--cardAccent, #2563eb) 38%, #f59e0b 62%);box-shadow:0 0 0 3px rgba(255,255,255,.8),0 16px 30px color-mix(in srgb, var(--cardAccent, #2563eb) 18%, transparent)}
.heroCard.active .heroThumbPane img{transform:translateY(-4px) scale(1.05);filter:brightness(1.08) saturate(1.08) drop-shadow(0 14px 18px rgba(15,23,42,.18));animation:heroBob 1.4s ease-in-out infinite}
.heroReadyBurst{position:absolute;right:14px;top:12px;padding:6px 10px;border-radius:999px;background:linear-gradient(180deg,#fde68a,#f59e0b);color:#5b2502;font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 10px 18px rgba(245,158,11,.22);opacity:0;transform:translateY(-8px) scale(.92);transition:.18s ease}
.heroCard.active .heroReadyBurst{opacity:1;transform:translateY(0) scale(1)}
.heroSelectHint{color:#c2410c;font-weight:1000}
.heroCardFooter{align-items:center}
.heroAccomplishmentPreview{min-height:auto}
.heroInfo.deluxe{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,245,255,.92));}
.heroInfoTop{margin-bottom:10px}
.deluxeHeroContent{grid-template-columns:210px 1fr;gap:16px}
.heroPortraitWrap{min-height:280px;padding:12px 12px 8px}
.heroAura{position:absolute;inset:8px 8px auto 8px;height:170px;border-radius:999px;background:radial-gradient(circle,color-mix(in srgb, var(--heroAccent) 22%, white 78%) 0,color-mix(in srgb, var(--heroAccent) 12%, white 88%) 42%,rgba(255,255,255,0) 68%);animation:heroGlow 2.2s ease-in-out infinite}
.heroPortrait{position:relative;z-index:1;filter:drop-shadow(0 16px 22px rgba(15,23,42,.15))}
.heroQuickBlurb{font-size:16px;font-weight:800;line-height:1.55;color:#334155}
.heroCatchphrase{display:inline-block;margin-top:10px;padding:8px 12px;border-radius:14px;background:color-mix(in srgb, var(--heroAccent) 10%, white 90%);color:#0f172a;font-size:14px;font-weight:900}
.heroHighlights{margin:14px 0 10px}
.heroAchievements{gap:8px}
.achievementItem.compact{padding:10px 12px;font-size:13px;line-height:1.4;border-left-width:4px}
.heroTraitStrip{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.traitPill{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:linear-gradient(180deg,#fffdf7,#fffbeb);border:1px solid color-mix(in srgb, var(--heroAccent) 24%, #fde68a 76%);color:#7a4b19;font-size:13px;font-weight:1000;box-shadow:0 8px 16px rgba(15,23,42,.04)}
@keyframes heroBob{0%,100%{transform:translateY(-4px) scale(1.05)}50%{transform:translateY(-8px) scale(1.07)}}
@keyframes heroGlow{0%,100%{opacity:.78;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}


/* V218 targeted polish */
.modal.storyStartModal .modalBox{max-width:900px!important;width:min(96vw,900px)!important}
.modal.storyStartModal .modalGrid{grid-template-columns:220px 1fr!important;gap:20px!important;align-items:center!important}
.modal.storyStartModal .imgAvatar{width:188px!important;height:248px!important;border-radius:28px!important;background:radial-gradient(circle at 50% 24%,#fff7ed 0,#dbeafe 34%,#eef2ff 58%,#eff6ff 100%)!important;border:2px solid #93c5fd!important;box-shadow:0 16px 40px rgba(37,99,235,.16)!important}
.modal.storyStartModal .imgAvatar img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center bottom!important;padding:0!important;filter:drop-shadow(0 16px 18px rgba(15,23,42,.12))}
.modal.storyStartModal .modalBox h2{font-size:30px!important;margin-bottom:8px!important}
.modal.storyStartModal .modalBox p,.modal.storyStartModal #modalBody{font-size:18px!important;line-height:1.55!important}
@media(max-width:720px){.modal.storyStartModal .modalGrid{grid-template-columns:1fr!important}.modal.storyStartModal .imgAvatar{width:136px!important;height:172px!important}}

.modal.dialoguePosterModal .posterActions{transform:translateY(-8px)}
.modal.dialoguePosterModal.alarmMode{
  background:radial-gradient(circle at 50% 22%,rgba(185,28,28,.40),rgba(8,9,13,.90) 56%,rgba(0,0,0,.96));
  animation:alarmPulse 1s ease-in-out infinite alternate;
}
.modal.dialoguePosterModal.alarmMode .modalBox{
  border-color:rgba(248,113,113,.78)!important;
  box-shadow:0 34px 120px rgba(0,0,0,.78),0 0 0 1px rgba(255,255,255,.04),0 0 56px rgba(239,68,68,.30)!important;
}
.modal.dialoguePosterModal.alarmMode .dialoguePoster{
  background:radial-gradient(circle at 50% 18%,rgba(185,28,28,.26),rgba(8,9,13,.98) 58%),linear-gradient(180deg,#12080a,#050608);
}
.modal.dialoguePosterModal.alarmMode .posterTitle{
  color:#fee2e2;
  border-color:rgba(248,113,113,.70);
  background:linear-gradient(180deg,#3f1115,#15070a);
  box-shadow:0 10px 24px rgba(0,0,0,.42),0 0 28px rgba(239,68,68,.18),inset 0 0 0 1px rgba(255,255,255,.06);
}
.modal.dialoguePosterModal.alarmMode .posterSubtitle,
.modal.dialoguePosterModal.alarmMode .posterPrompt{color:#fecaca}
.modal.dialoguePosterModal.alarmMode .posterBubble{
  box-shadow:0 12px 26px rgba(0,0,0,.28),0 0 0 1px rgba(248,113,113,.10), inset 0 0 0 1px rgba(255,255,255,.20);
}
@keyframes alarmPulse{
  0%{box-shadow:inset 0 0 0 0 rgba(239,68,68,0)}
  100%{box-shadow:inset 0 0 0 18px rgba(239,68,68,.10)}
}

/* === Frontier game + hero select refresh === */
body.frontierMenuMode{
  background:
    radial-gradient(circle at top, rgba(252,188,74,.12), transparent 34%),
    linear-gradient(180deg, #150812 0%, #190910 32%, #140914 100%);
}
body.frontierMenuMode .frontierWrap{
  max-width: min(1600px, 100vw - 22px);
  width: 100%;
}
#storySelect{ display:none !important; }
.frontierMenuScreen{
  padding: 18px;
}
.frontierMenuShell{
  position: relative;
  min-height: calc(100vh - 42px);
  border-radius: 36px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(17,10,20,.26), rgba(17,10,20,.72)),
    linear-gradient(90deg, rgba(8,6,18,.72), rgba(8,6,18,.20) 42%, rgba(8,6,18,.78)),
    url('assets/menu/select_bg.png') center center / cover no-repeat;
  border: 1px solid rgba(255,220,155,.22);
  box-shadow: 0 30px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
}
.frontierMenuShell::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,205,113,.12), transparent 28%),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.12));
  pointer-events: none;
}
.frontierMenuInner{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 28px 24px;
}
.pathLogoLockup{
  text-align: center;
  color: #fff6de;
  text-shadow: 0 6px 14px rgba(0,0,0,.45);
}
.menuPill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,226,164,.65);
  background: rgba(30,18,16,.72);
  color: #ffe3a5;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.pathTitle{
  margin: 0;
  font-size: clamp(2.3rem, 5vw, 4.35rem);
  line-height: .94;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff4d1;
}
.pathSubtitle{
  margin: 10px auto 0;
  max-width: 760px;
  font-size: clamp(.95rem, 2vw, 1.18rem);
  color: rgba(255,245,225,.92);
}
.stepBanner{
  display: flex;
  justify-content: center;
}
.stepBanner span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 18px;
  background: rgba(25,15,20,.70);
  border: 1px solid rgba(255,230,180,.20);
  color: #fff2c7;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 14px 26px rgba(0,0,0,.18);
}
.frontierStoryCards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.frontierStoryCards .frontierStoryCard{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(255,237,203,.14);
  background: linear-gradient(180deg, rgba(20,18,29,.90), rgba(13,13,24,.88));
  color: #fff;
  text-align: left;
  box-shadow: 0 18px 30px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.07);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.frontierStoryCards .frontierStoryCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 38px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.09);
}
.frontierStoryCards .frontierStoryCard.active{
  border-color: color-mix(in srgb, var(--storyAccent) 60%, white 20%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--storyAccent) 50%, white 15%), 0 24px 42px rgba(0,0,0,.30);
  transform: translateY(-5px);
}
.storyCardNumber{
  position: absolute;
  top: 12px;
  left: 12px;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 18px;
  color: #1f1208;
  background: linear-gradient(180deg, #ffe0a3, #f5a623);
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
  z-index: 1;
}
.storyCardPreview{
  aspect-ratio: 5 / 3.55;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.storyCardPreview img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.storyCardCaption{ display:flex; flex-direction:column; gap:7px; }
.storyCardEyebrow{
  color: color-mix(in srgb, var(--storyAccent) 60%, white 35%);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.frontierStoryCards .storyCardTitle{
  font-size: 1.2rem;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: .04em;
  color: #fff2cf;
}
.frontierStoryCards .storyCardText{
  margin: 0;
  color: rgba(255,245,225,.84);
  font-size: .95rem;
  line-height: 1.35;
}
.storyCardHint{
  margin-top: auto;
  align-self: flex-start;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .88rem;
  color: #fff7e6;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}
.frontierStoryCards .frontierStoryCard.active .storyCardHint{
  background: color-mix(in srgb, var(--storyAccent) 35%, rgba(255,255,255,.14));
}
.stepBannerHero{ margin-top: 4px; }
.frontierRoster{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.frontierRoster .frontierHeroCard{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
  padding: 12px 12px 14px;
  border-radius: 24px;
  border: 1px solid rgba(255,237,203,.12);
  background: linear-gradient(180deg, rgba(18,16,26,.90), rgba(12,12,23,.88));
  color: #fff;
  min-height: 314px;
  box-shadow: 0 18px 28px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, filter .18s ease;
}
.frontierRoster .frontierHeroCard.available:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.09);
}
.frontierRoster .frontierHeroCard.active{
  border-color: color-mix(in srgb, var(--cardAccent) 55%, white 20%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cardAccent) 45%, white 18%), 0 26px 42px rgba(0,0,0,.32);
  transform: translateY(-5px);
}
.frontierRoster .frontierHeroCard.locked{
  opacity: .62;
  filter: saturate(.55) grayscale(.08);
}
.heroCardPlayerFlag{
  position: absolute;
  top: 10px;
  left: 10px;
  min-width: 38px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .06em;
  background: linear-gradient(180deg, #ffe5a8, #f0a330);
  color: #221104;
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}
.frontierThumbPane{
  width: 100%;
  aspect-ratio: 6 / 7;
  border-radius: 20px;
  overflow: hidden;
  background: radial-gradient(circle at top, rgba(255,255,255,.10), rgba(255,255,255,.02));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.frontierThumbPane img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.frontierHeroName{
  color: #ffebb8;
  font-weight: 900;
  font-size: .98rem;
  line-height: 1.15;
  letter-spacing: .04em;
}
.frontierHeroRole{
  color: rgba(255,246,230,.88);
  font-size: .83rem;
  line-height: 1.3;
  min-height: 2.1em;
}
.frontierHeroStatus{
  margin-top: auto;
  width: 100%;
  min-height: 2.6em;
  padding: 9px 10px;
  border-radius: 15px;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.22;
  color: #fff8e9;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.09);
}
.frontierHeroCard.locked .frontierHeroStatus{
  color: rgba(255,235,199,.78);
  background: rgba(255,255,255,.05);
}
.frontierHeroCard.active .frontierHeroStatus{
  background: color-mix(in srgb, var(--cardAccent) 18%, rgba(255,255,255,.10));
}
.menuBottomBar{
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 180px;
  gap: 18px;
  align-items: center;
  margin-top: 4px;
}
.menuEdgeBtn{
  min-height: 62px;
  border-radius: 18px;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 16px 24px rgba(0,0,0,.16);
}
.menuActionStack{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.menuSelectionSummary{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(28,17,22,.80);
  border: 1px solid rgba(255,230,180,.18);
  color: #fff4d2;
  min-height: 44px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.summaryPath,
.summaryHero{ font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.summaryRole{ color: rgba(255,240,210,.84); }
.summaryDot{ opacity: .55; font-weight: 900; }
.frontierStartBtn{
  min-width: min(420px, 100%);
  min-height: 74px;
  border-radius: 20px;
  font-size: clamp(1.22rem, 2vw, 1.55rem);
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  box-shadow: 0 20px 34px rgba(0,0,0,.26);
}
.frontierStartBtn:disabled,
.frontierStartBtn.disabled{
  opacity: .55;
  cursor: not-allowed;
  filter: saturate(.72);
}
.menuMirror{ display:none; }
@media (max-width: 1400px){
  .frontierRoster{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1120px){
  .frontierStoryCards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menuBottomBar{ grid-template-columns: 1fr; }
  .menuEdgeBtn{ width: 100%; }
}
@media (max-width: 760px){
  .frontierMenuScreen{ padding: 10px; }
  .frontierMenuInner{ padding: 18px 14px 18px; }
  .frontierStoryCards,
  .frontierRoster{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .frontierRoster .frontierHeroCard{ min-height: 286px; }
  .pathTitle{ font-size: clamp(2rem, 11vw, 3rem); }
  .pathSubtitle{ font-size: .95rem; }
  .frontierStartBtn{ min-width: 100%; }
}
@media (max-width: 560px){
  .frontierStoryCards,
  .frontierRoster{ grid-template-columns: 1fr; }
  .stepBanner span{ font-size: .86rem; }
}
.frontierThumbPane,
.frontierThumbPane img{
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
}
.frontierThumbPane img{
  image-rendering: auto;
}
.frontierHeroCard:hover .frontierThumbPane,
.frontierHeroCard.hoverFace .frontierThumbPane,
.frontierHeroCard.active .frontierThumbPane{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 0 0 2px color-mix(in srgb, var(--cardAccent) 55%, white 18%),
    0 14px 26px rgba(0,0,0,.28);
}
.frontierHeroCard:hover .frontierThumbPane img,
.frontierHeroCard.hoverFace .frontierThumbPane img,
.frontierHeroCard.active .frontierThumbPane img{
  transform: scale(1.02);
  filter: saturate(1.08) brightness(1.04);
}

/* Four-star hero selection frame */
.frontierHeroCard{
  overflow: visible;
}
.heroSelectionFrame{
  position: absolute;
  inset: 6px;
  border-radius: 26px;
  border: 2px solid rgba(255, 224, 150, 0);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0);
  pointer-events: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease;
  opacity: .75;
}
.frameStar{
  position: absolute;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
  color: #2a1707;
  background: linear-gradient(180deg, #ffe9af 0%, #f6bf48 55%, #d88b17 100%);
  border: 1px solid rgba(96,53,8,.7);
  box-shadow: 0 8px 16px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.45);
  opacity: 0;
  transform: scale(.72);
  transition: opacity .18s ease, transform .18s ease, filter .18s ease;
}
.frameStar.tl{ top: -12px; left: -12px; }
.frameStar.tr{ top: -12px; right: -12px; }
.frameStar.bl{ bottom: -12px; left: -12px; }
.frameStar.br{ bottom: -12px; right: -12px; }
.frontierHeroCard.available:hover .heroSelectionFrame,
.frontierHeroCard.active .heroSelectionFrame,
.frontierHeroCard.hoverFace .heroSelectionFrame{
  border-color: color-mix(in srgb, var(--cardAccent) 42%, #ffde92 58%);
  box-shadow:
    inset 0 0 0 1px rgba(255,248,221,.28),
    0 0 0 2px color-mix(in srgb, var(--cardAccent) 35%, rgba(255,229,161,.9)),
    0 0 30px rgba(255,196,79,.22);
}
.frontierHeroCard.available:hover .frameStar,
.frontierHeroCard.active .frameStar,
.frontierHeroCard.hoverFace .frameStar{
  opacity: 1;
  transform: scale(1);
  filter: drop-shadow(0 0 10px rgba(255, 207, 86, .38));
}
.frontierHeroCard.locked .heroSelectionFrame{
  opacity: .32;
}
.frontierHeroCard.locked .frameStar{
  filter: grayscale(.35);
}
.frontierHeroCard.active .frameStar,
.frontierHeroCard.available:hover .frameStar,
.frontierHeroCard.hoverFace .frameStar{
  animation: frontierStarPulse 1.8s ease-in-out infinite alternate;
}
@keyframes frontierStarPulse{
  from{ transform: scale(.96); }
  to{ transform: scale(1.04); }
}

/* Compact one-page selector tune */
.frontierMenuScreen{
  padding: 12px;
}
.frontierMenuShell{
  min-height: calc(100vh - 24px);
}
.frontierMenuInner{
  gap: 12px;
  padding: 18px 20px 16px;
}
.menuPill{
  margin: 0 auto 8px;
  padding: 6px 14px;
  font-size: 11px;
}
.pathTitle{
  font-size: clamp(2rem, 4.2vw, 3.45rem);
}
.pathSubtitle{
  margin: 6px auto 0;
  max-width: 680px;
  font-size: clamp(.88rem, 1.45vw, .98rem);
}
.stepBanner span{
  padding: 8px 18px;
  border-radius: 15px;
  font-size: .95rem;
}
.frontierStoryCards{
  gap: 14px;
}
.frontierStoryCards .frontierStoryCard{
  gap: 10px;
  padding: 12px;
  border-radius: 20px;
}
.storyCardPreview{
  aspect-ratio: 16 / 9.4;
  border-radius: 14px;
}
.storyCardEyebrow{
  font-size: 11px;
}
.frontierStoryCards .storyCardTitle{
  font-size: 1.05rem;
}
.frontierStoryCards .storyCardText{
  font-size: .88rem;
  line-height: 1.28;
}
.storyCardHint{
  padding: 7px 11px;
  font-size: .82rem;
}
.stepBannerHero{
  margin-top: 0;
}
.frontierRoster{
  gap: 12px;
}
.frontierRoster .frontierHeroCard{
  min-height: 282px;
  padding: 10px 10px 12px;
  gap: 8px;
}
.heroCardPlayerFlag{
  top: 8px;
  left: 8px;
}
.frontierThumbPane{
  aspect-ratio: 6 / 5.7;
}
.frontierThumbPane img{
  object-position: center top;
}
.frontierHeroName{
  font-size: .93rem;
}
.frontierHeroRole{
  font-size: .78rem;
  min-height: 1.8em;
}
.frontierHeroStatus{
  min-height: 2.2em;
  padding: 7px 8px;
  font-size: .72rem;
}
.menuBottomBar{
  gap: 12px;
  margin-top: 0;
}
.menuEdgeBtn{
  min-height: 54px;
  font-size: .95rem;
}
.menuActionStack{
  gap: 8px;
}
.menuSelectionSummary{
  padding: 8px 14px;
  min-height: 38px;
  font-size: .92rem;
}
.frontierStartBtn{
  min-height: 62px;
  font-size: clamp(1.08rem, 1.8vw, 1.35rem);
}
@media (max-width: 1120px){
  .frontierMenuInner{
    gap: 14px;
  }
}

/* Scene-first data-center tour modal */
.modal.dialoguePosterModal.tourModal{
  background: radial-gradient(circle at 50% 18%, rgba(83,38,140,.28), rgba(2,6,23,.88) 58%, rgba(0,0,0,.96));
}
.modal.dialoguePosterModal.tourModal .modalBox{
  width: min(98.5vw, 1660px)!important;
  max-width: 1660px!important;
  padding: 12px!important;
  overflow: auto!important;
}
.tourCinematic{
  position: relative;
  min-height: calc(96vh - 34px);
  display: grid;
  grid-template-rows: auto minmax(420px, 1fr) auto;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(211,169,88,.42);
  background: radial-gradient(circle at 50% 8%, rgba(92,54,135,.22), rgba(4,7,12,.96) 58%), linear-gradient(180deg,#08070b,#030408);
  color: #f8ecd2;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  overflow: hidden;
}
.tourCinematic::before{
  content:'';
  position:absolute;
  inset:14px;
  pointer-events:none;
  border:2px solid rgba(211,169,88,.20);
  border-radius:16px;
}
.tourHeader{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 2px 18px 0;
  text-align: center;
}
.tourRoomBadge{
  min-width: 92px;
  padding: 10px 13px;
  border-radius: 999px;
  color: #190d04;
  background: linear-gradient(180deg,#ffe5a4,#d1911f);
  border: 1px solid rgba(95,55,9,.7);
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow:0 10px 20px rgba(0,0,0,.28);
}
.tourTitle{
  display:inline-block;
  padding: 8px 30px 7px;
  border-radius: 10px;
  border: 2px solid rgba(211,169,88,.50);
  background: linear-gradient(180deg,#17120d,#090a0f);
  color:#d9aa4a;
  font-family: Georgia, serif;
  font-size: clamp(30px, 4.1vw, 58px);
  font-weight: 1000;
  line-height:.98;
  letter-spacing:.04em;
  text-transform: uppercase;
  text-shadow:0 4px 12px rgba(0,0,0,.65);
}
.tourSubtitle{
  margin-top: 4px;
  color:#c9953a;
  font-size: clamp(13px, 1.3vw, 18px);
  font-weight: 1000;
  letter-spacing:.22em;
  text-transform: uppercase;
}
.tourCinematicScene{
  position: relative;
  z-index: 1;
  min-height: 420px;
  height: min(64vh, 640px);
  border: 1px solid rgba(211,169,88,.36);
  border-radius: 16px;
  overflow: hidden;
  background:#020409;
  box-shadow:0 24px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
}
.tourCinematicScene img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: contain;
  object-position:center center;
  filter:saturate(1.05) contrast(1.04) brightness(.88);
}
.tourCinematicScene::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 52%, transparent 45%, rgba(0,0,0,.26) 100%),
    linear-gradient(180deg, rgba(0,0,0,.12), transparent 18%, transparent 78%, rgba(0,0,0,.22));
}
.tourBubbleLayer{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}
.tourBubble{
  position:absolute;
  padding: 12px 16px 14px;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(249,231,196,.98), rgba(231,204,151,.96));
  color:#24160b;
  border:2px solid rgba(104,66,18,.48);
  box-shadow:0 16px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.30);
  opacity:0;
  transform:translateY(12px) scale(.98);
  transition:opacity .24s ease, transform .24s ease;
}
.tourBubble.visible{opacity:1;transform:translateY(0) scale(1)}
.tourBubble.hero{
  background: linear-gradient(180deg, rgba(237,208,168,.98), rgba(216,181,126,.96));
}
.tourBubble::after{
  content:'';
  position:absolute;
  width:18px;
  height:18px;
  left:24px;
  bottom:-10px;
  transform:rotate(45deg);
  background:inherit;
  border-right:2px solid rgba(104,66,18,.36);
  border-bottom:2px solid rgba(104,66,18,.36);
}
.tourBubble.hero::after{left:auto;right:26px}
.tourBubbleSpeaker{
  font-size:clamp(12px, 1vw, 16px);
  line-height:1.05;
  font-weight:1000;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:#7a4b19;
  margin-bottom:5px;
}
.tourBubbleBody{
  font-family: Georgia, serif;
  font-size:clamp(14px, 1.28vw, 20px);
  line-height:1.22;
  font-weight:850;
  white-space:pre-wrap;
}
.tourBubbleBody::after{
  content:'▌';
  display:inline-block;
  margin-left:2px;
  color:#a45b13;
  animation:caretBlink .8s steps(1) infinite;
}
.tourBubble.done .tourBubbleBody::after{display:none}
.tourFooter{
  position: relative;
  z-index: 2;
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items:center;
  padding: 2px 10px 0;
}
.tourClue{
  color:#d9aa4a;
  font-size:clamp(13px,1.1vw,18px);
  line-height:1.32;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
}
.tourActions{
  display:flex;
  gap:10px;
  align-items:center;
}
.tourPrimaryBtn,.tourSecondaryBtn{
  border:none;
  border-radius:12px;
  padding:12px 16px;
  font-size:15px;
  font-weight:1000;
  cursor:pointer;
  white-space:nowrap;
}
.tourPrimaryBtn{
  color:#fff7ed;
  background:linear-gradient(180deg,#d69a25,#9b5d10);
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.tourPrimaryBtn:disabled{opacity:.48;cursor:not-allowed;filter:grayscale(.2)}
.tourSecondaryBtn{
  color:#111827;
  background:linear-gradient(180deg,#e5e7eb,#aab4c7);
}
@media(max-width:980px){
  .tourHeader{grid-template-columns:1fr;padding:0 6px;gap:8px}
  .tourRoomBadge{justify-self:center;min-width:auto;padding:8px 12px}
  .tourCinematic{grid-template-rows:auto minmax(360px, 1fr) auto;padding:10px}
  .tourCinematicScene{height:min(60vh,520px);min-height:360px}
  .tourBubble{position:relative!important;left:auto!important;top:auto!important;max-width:none!important;margin:8px 10px 0}
  .tourBubbleLayer{display:flex;flex-direction:column;justify-content:flex-end;overflow:auto;padding-bottom:10px;background:linear-gradient(180deg,transparent 0,transparent 35%,rgba(0,0,0,.20) 100%)}
  .tourFooter{grid-template-columns:1fr}
  .tourActions{justify-content:center;flex-wrap:wrap}
}

/* Scene-first final choice / alarm / ending screens */
.finalCinematic.choiceCinematic .tourCinematicScene,
.finalCinematic.alarmCinematic .tourCinematicScene,
.finalCinematic.yesEndingCinematic .tourCinematicScene,
.finalCinematic.noEndingCinematic .tourCinematicScene{
  height:min(66vh,660px);
  min-height:440px;
}
.finalCinematic.choiceCinematic .tourTitle,
.finalCinematic.alarmCinematic .tourTitle,
.finalCinematic.yesEndingCinematic .tourTitle,
.finalCinematic.noEndingCinematic .tourTitle{
  font-size:clamp(28px,3.55vw,54px);
}
.finalCinematic.alarmCinematic{
  background:radial-gradient(circle at 50% 8%, rgba(180,28,28,.26), rgba(4,7,12,.96) 58%), linear-gradient(180deg,#100508,#030408);
}
.finalCinematic.alarmCinematic .tourTitle{
  color:#fecaca;
  border-color:rgba(248,113,113,.72);
  background:linear-gradient(180deg,#3f1115,#120507);
}
.finalCinematic.alarmCinematic .tourRoomBadge{
  color:#fff7ed;
  background:linear-gradient(180deg,#ef4444,#991b1b);
}
.finalCinematic.choiceCinematic .tourRoomBadge{
  background:linear-gradient(180deg,#fff0b8,#e0a22e);
}
.finalCinematic.yesEndingCinematic .tourRoomBadge,
.finalCinematic.noEndingCinematic .tourRoomBadge{
  background:linear-gradient(180deg,#d9f99d,#65a30d);
  color:#10250a;
}
.finalCinematic .tourPrimaryBtn:disabled,
.finalCinematic .tourSecondaryBtn:disabled{
  opacity:.48;
  cursor:not-allowed;
  filter:grayscale(.2);
}
.finalCinematic.choiceCinematic .tourActions{
  flex-wrap:wrap;
  justify-content:flex-end;
}
@media(max-width:980px){
  .finalCinematic.choiceCinematic .tourCinematicScene,
  .finalCinematic.alarmCinematic .tourCinematicScene,
  .finalCinematic.yesEndingCinematic .tourCinematicScene,
  .finalCinematic.noEndingCinematic .tourCinematicScene{
    height:min(60vh,520px);
    min-height:360px;
  }
}

/* Intro-first landing reveal */
.frontierMenuShell{
  background:
    linear-gradient(180deg, rgba(17,10,20,.16), rgba(17,10,20,.62)),
    linear-gradient(90deg, rgba(8,6,18,.68), rgba(8,6,18,.14) 42%, rgba(8,6,18,.72)),
    url('assets/menu/landing_intro_bg.png') center center / cover no-repeat;
}
.menuIntroSplash{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px;
  background:
    radial-gradient(circle at 50% 50%, rgba(7,8,18,.08), rgba(7,8,18,.42) 58%, rgba(7,8,18,.72)),
    linear-gradient(180deg, rgba(9,5,16,.10), rgba(9,5,16,.55));
  transition: opacity .9s ease, visibility .9s ease, transform 1.1s ease;
}
.menuIntroCopy{
  max-width: 760px;
  color: #fff5df;
  text-shadow: 0 10px 28px rgba(0,0,0,.52);
  backdrop-filter: blur(2px);
}
.menuIntroEyebrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,226,164,.62);
  background: rgba(30,18,16,.52);
  color: #ffe3a5;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.menuIntroTitle{
  margin: 0;
  font-size: clamp(2.3rem, 5vw, 4.4rem);
  line-height: .96;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.menuIntroText{
  margin: 14px auto 0;
  font-size: clamp(1rem, 1.7vw, 1.22rem);
  color: rgba(255,246,224,.92);
}
.frontierMenuScreen.menuIntroPending .frontierMenuInner{
  pointer-events: none;
}
.frontierMenuScreen.menuIntroDone .frontierMenuInner{
  pointer-events: auto;
}
.frontierMenuScreen .pathLogoLockup,
.frontierMenuScreen .stepBanner,
.frontierMenuScreen .menuBottomBar,
.frontierMenuScreen .frontierStoryCard,
.frontierMenuScreen .frontierHeroCard{
  transition: opacity .68s ease, transform .68s ease, filter .68s ease, box-shadow .18s ease, border-color .18s ease;
}
.frontierMenuScreen.menuIntroPending .pathLogoLockup,
.frontierMenuScreen.menuIntroPending .stepBanner,
.frontierMenuScreen.menuIntroPending .menuBottomBar,
.frontierMenuScreen.menuIntroPending .frontierStoryCard,
.frontierMenuScreen.menuIntroPending .frontierHeroCard{
  opacity: 0;
  transform: translateY(26px) scale(.98);
  filter: blur(8px);
}
.frontierMenuScreen.menuIntroPending.menuIntroReveal .pathLogoLockup,
.frontierMenuScreen.menuIntroPending.menuIntroReveal .stepBanner,
.frontierMenuScreen.menuIntroPending.menuIntroReveal .menuBottomBar,
.frontierMenuScreen.menuIntroPending.menuIntroReveal .frontierStoryCard,
.frontierMenuScreen.menuIntroPending.menuIntroReveal .frontierHeroCard{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.frontierMenuScreen.menuIntroPending.menuIntroReveal .pathLogoLockup{ transition-delay: .04s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .stepBanner:not(.stepBannerHero){ transition-delay: .28s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .frontierStoryCard:nth-child(1){ transition-delay: .50s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .frontierStoryCard:nth-child(2){ transition-delay: .68s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .frontierStoryCard:nth-child(3){ transition-delay: .86s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .stepBannerHero{ transition-delay: 1.06s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .frontierHeroCard:nth-child(1){ transition-delay: 1.24s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .frontierHeroCard:nth-child(2){ transition-delay: 1.36s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .frontierHeroCard:nth-child(3){ transition-delay: 1.48s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .frontierHeroCard:nth-child(4){ transition-delay: 1.60s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .frontierHeroCard:nth-child(5){ transition-delay: 1.72s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .frontierHeroCard:nth-child(6){ transition-delay: 1.84s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .menuBottomBar{ transition-delay: 2.02s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .menuIntroSplash{
  opacity: 0;
  visibility: hidden;
  transform: scale(1.02);
}
.frontierMenuScreen.menuIntroDone .menuIntroSplash{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
  .menuIntroSplash,
  .frontierMenuScreen .pathLogoLockup,
  .frontierMenuScreen .stepBanner,
  .frontierMenuScreen .menuBottomBar,
  .frontierMenuScreen .frontierStoryCard,
  .frontierMenuScreen .frontierHeroCard{
    transition: none !important;
  }
}

/* Intro splash: full uncropped picture for 4s, then 4s intro text */
.menuIntroSplash{
  padding: 0;
  background: #050508;
  overflow: hidden;
}
.menuIntroVisual{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050508;
}
.menuIntroVisual img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}
.menuIntroCopy{
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%) translateY(18px);
  width: min(82vw, 840px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s ease, transform .9s ease;
  text-shadow: 0 8px 24px rgba(0,0,0,.48);
}
.menuIntroEyebrow,
.menuIntroTitle,
.menuIntroText{
  background: none;
  backdrop-filter: none;
}
.menuIntroEyebrow{
  background: rgba(15, 9, 20, .52);
}
.menuIntroTitle{
  color: #fff4dc;
}
.menuIntroText{
  padding: 10px 18px;
  border-radius: 18px;
  background: rgba(15, 9, 20, .44);
  display: inline-block;
}
.frontierMenuScreen.menuIntroPhaseImage .menuIntroCopy{
  opacity: 0;
  transform: translateX(-50%) translateY(18px);
}
.frontierMenuScreen.menuIntroPhaseCopy .menuIntroCopy,
.frontierMenuScreen.menuIntroPending.menuIntroReveal .menuIntroCopy{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.frontierMenuScreen.menuIntroPhaseImage .menuIntroVisual img,
.frontierMenuScreen.menuIntroPhaseCopy .menuIntroVisual img{
  opacity: 1;
}
.menuIntroCopy{ backdrop-filter: none; }

/* Final intro/sponsor/full-screen refinements */
html, body{
  width: 100%;
  min-height: 100%;
}
body.frontierMenuMode{
  min-height: 100dvh;
  overflow-x: hidden;
}
body.frontierMenuMode .frontierWrap{
  width: 100vw;
  max-width: none;
  margin: 0;
}
.frontierMenuScreen{
  min-height: 100dvh;
  width: 100%;
}
.frontierMenuScreen.menuIntroPending{
  padding: 0 !important;
}
.frontierMenuScreen.menuIntroPending .frontierMenuShell{
  min-height: 100dvh !important;
  width: 100vw;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.frontierMenuScreen.menuIntroPending .menuIntroSplash{
  position: fixed;
  inset: 0;
  z-index: 9999;
  padding: 0 !important;
  background: #000 !important;
  overflow: hidden;
}
.frontierMenuScreen.menuIntroPending .menuIntroVisual{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.frontierMenuScreen.menuIntroPending .menuIntroVisual img{
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  object-fit: contain !important;
  object-position: center center !important;
  opacity: 1;
  display: block;
}
.menuIntroSponsor{
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%) scale(.98);
  width: min(78vw, 1120px);
  max-width: 1120px;
  text-align: center;
  opacity: 0;
  transition: opacity .7s ease, transform .7s ease;
  pointer-events: none;
  text-shadow: 0 10px 28px rgba(0,0,0,.52);
}
.menuIntroLogo{
  display: block;
  width: min(76vw, 980px);
  max-height: 32dvh;
  object-fit: contain;
  margin: 18px auto 0;
  filter: drop-shadow(0 22px 34px rgba(0,0,0,.55));
}
.frontierMenuScreen.menuIntroPhaseImage .menuIntroCopy,
.frontierMenuScreen.menuIntroPhaseImage .menuIntroSponsor{
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(.98);
}
.frontierMenuScreen.menuIntroPhaseSponsor .menuIntroSponsor,
.frontierMenuScreen.menuIntroPending.menuIntroReveal .menuIntroSponsor{
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1);
}
.frontierMenuScreen.menuIntroPending.menuIntroReveal .menuIntroSplash{
  opacity: 0;
  visibility: hidden;
  transform: scale(1.01);
  transition: opacity .9s ease, visibility .9s ease, transform 1.1s ease;
}
.frontierMenuScreen.menuIntroDone .menuIntroSplash{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Remove inherited old-card glow blobs/white covers from the new hero cards. */
.frontierHeroCard::before,
.frontierHeroCard::after{
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}
.frontierHeroCard .heroReadyBurst{
  display: none !important;
}

/* Cooler western marquee button instead of the blue default. */
.frontierStartBtn{
  position: relative;
  color: #fff3cf !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,231,150,.45), transparent 34%),
    linear-gradient(180deg, #e7461e 0%, #c52f18 45%, #8b1d12 100%) !important;
  border: 2px solid rgba(255,210,111,.78) !important;
  box-shadow:
    0 18px 34px rgba(0,0,0,.34),
    0 0 0 3px rgba(116,54,18,.46),
    inset 0 2px 0 rgba(255,255,255,.28),
    inset 0 -6px 14px rgba(52,13,8,.34) !important;
  text-shadow: 0 3px 0 rgba(87,24,9,.62), 0 0 18px rgba(255,213,109,.30);
  overflow: hidden;
}
.frontierStartBtn::before,
.frontierStartBtn::after{
  content: '★';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5d2503;
  background: linear-gradient(180deg, #ffe8a5, #e8a62b);
  border: 1px solid rgba(94,48,8,.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.50), 0 6px 14px rgba(0,0,0,.25);
}
.frontierStartBtn::before{ left: 18px; }
.frontierStartBtn::after{ right: 18px; }
.frontierStartBtn:hover:not(:disabled){
  filter: brightness(1.08) saturate(1.08);
  transform: translateY(-2px);
}

/* Keep the selector usable across screen sizes while preserving the full-screen feel. */
.frontierMenuShell{
  min-height: 100dvh;
  width: 100%;
}
.frontierMenuInner{
  min-height: 100dvh;
  box-sizing: border-box;
}
@media (max-height: 820px){
  .frontierMenuInner{ gap: 8px; padding-top: 12px; padding-bottom: 12px; }
  .pathTitle{ font-size: clamp(1.8rem, 3.45vw, 2.9rem); }
  .pathSubtitle{ display:none; }
  .stepBanner span{ padding: 6px 15px; font-size: .84rem; }
  .frontierStoryCards .frontierStoryCard{ padding: 10px; gap: 8px; }
  .storyCardPreview{ aspect-ratio: 16 / 8.2; }
  .frontierRoster .frontierHeroCard{ min-height: 242px; padding: 8px; gap: 6px; }
  .frontierThumbPane{ aspect-ratio: 6 / 4.9; }
  .frontierHeroRole{ min-height: 1.35em; }
  .frontierHeroStatus{ min-height: 1.8em; padding: 6px 7px; }
  .frontierStartBtn{ min-height: 54px; }
  .menuEdgeBtn{ min-height: 48px; }
}

/* Final pass: cinematic sponsor, clean hero cards, aligned western controls, and automatic fit. */
body.frontierMenuMode{
  overflow: hidden;
  background:#050508;
}
.frontierMenuScreen{
  padding: 0 !important;
  height: 100svh;
  min-height: 100svh;
  width: 100vw;
  overflow: hidden;
}
.frontierMenuShell{
  height: 100svh !important;
  min-height: 100svh !important;
  width: 100vw !important;
  border-radius: 0 !important;
  border: 0 !important;
  overflow: hidden;
}
.frontierMenuInner{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(1880px, calc(100vw - 18px)) !important;
  min-height: auto !important;
  max-height: none !important;
  box-sizing: border-box;
  transform: translate(-50%, -50%) scale(var(--menuScale, 1));
  transform-origin: center center;
  padding: clamp(10px, 1.1vw, 20px) clamp(14px, 1.35vw, 26px) clamp(10px, 1.1vw, 18px) !important;
}
.frontierMenuScreen.menuIntroPending .frontierMenuInner{
  transform: translate(-50%, -50%) scale(var(--menuScale, 1));
}
.menuIntroSponsor{
  width: min(84vw, 1220px) !important;
  max-width: 1220px !important;
  padding: clamp(22px, 3vw, 46px) clamp(26px, 4vw, 60px) !important;
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 190, 71, .18), rgba(18, 8, 13, .46) 55%, rgba(7, 4, 8, .58)),
    linear-gradient(180deg, rgba(255, 238, 193, .08), rgba(255,255,255,.025));
  border: 1px solid rgba(255, 219, 149, .42);
  box-shadow:
    0 38px 90px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 80px rgba(255, 147, 32, .18);
  overflow: hidden;
}
.menuIntroSponsor::before,
.menuIntroSponsor::after{
  content:'';
  position:absolute;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 222, 156, .72), transparent);
  pointer-events: none;
}
.menuIntroSponsor::before{ top: 20px; }
.menuIntroSponsor::after{ bottom: 20px; }
.menuIntroSponsor .menuIntroEyebrow,
.menuIntroSponsor .menuIntroEyebrow{
  margin-bottom: clamp(16px, 2vw, 28px);
  padding: 10px 22px;
  color: #ffe6aa;
  background: rgba(16, 8, 12, .54);
  border: 1px solid rgba(255, 226, 164, .48);
  font-size: clamp(12px, 1.15vw, 17px);
  letter-spacing: .42em;
  text-shadow: 0 0 22px rgba(255, 184, 66, .42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 30px rgba(0,0,0,.22);
}
.menuIntroLogo{
  width: min(78vw, 1080px) !important;
  max-height: min(44dvh, 420px) !important;
  filter: drop-shadow(0 28px 42px rgba(0,0,0,.58)) drop-shadow(0 0 22px rgba(255, 138, 32, .20));
  animation: sponsorFloat 3s ease-in-out infinite alternate;
}
@keyframes sponsorFloat{
  from{ transform: translateY(0) scale(.995); }
  to{ transform: translateY(-4px) scale(1.005); }
}

/* Remove the remaining white/gray card cover from inherited hero-card styles. */
.frontierHeroCard,
.frontierHeroCard:focus,
.frontierHeroCard:focus-visible{
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
.frontierHeroCard.heroCard::before,
.frontierHeroCard.heroCard::after,
.frontierHeroCard::before,
.frontierHeroCard::after{
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}
.frontierHeroCard .heroReadyBurst{ display:none !important; }
.frontierHeroCard .heroThumbPane,
.frontierHeroCard .frontierThumbPane,
.frontierHeroCard.active .heroThumbPane,
.frontierHeroCard.active .frontierThumbPane{
  padding: 0 !important;
  background: rgba(4, 6, 14, .66) !important;
  border: 1px solid rgba(255, 219, 149, .20) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 12px 24px rgba(0,0,0,.22) !important;
}
.frontierHeroCard .heroThumbPane img,
.frontierHeroCard .frontierThumbPane img,
.frontierHeroCard.active .heroThumbPane img,
.frontierHeroCard.active .frontierThumbPane img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center top !important;
  animation: none !important;
  filter: saturate(1.02) contrast(1.02) !important;
  transform: none !important;
}
.frontierHeroCard.available:hover .frontierThumbPane img,
.frontierHeroCard.hoverFace .frontierThumbPane img,
.frontierHeroCard.active .frontierThumbPane img{
  transform: scale(1.012) !important;
  filter: saturate(1.08) brightness(1.04) contrast(1.03) !important;
}

/* Bottom controls: same baseline, western treatment, less generic system-blue/gray. */
.menuBottomBar{
  grid-template-columns: minmax(176px, 230px) minmax(460px, 1fr) minmax(176px, 230px) !important;
  align-items: end !important;
  gap: clamp(12px, 1.6vw, 24px) !important;
  max-width: min(1720px, 100%) !important;
  width: 100%;
  margin: 0 auto !important;
}
.menuActionStack{ gap: 8px !important; }
.menuEdgeBtn{
  width: 100%;
  min-height: 58px !important;
  border-radius: 20px !important;
  color: #fff1c7 !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,226,150,.26), transparent 42%),
    linear-gradient(180deg, rgba(66,35,17,.96), rgba(29,17,18,.96)) !important;
  border: 1px solid rgba(255,211,127,.50) !important;
  box-shadow: 0 16px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.16) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.menuEdgeBtn:hover{
  transform: translateY(-2px);
  filter: brightness(1.08) saturate(1.04);
}
.frontierStartBtn{
  min-height: 66px !important;
  width: min(520px, 100%);
  margin: 0 auto;
  border-radius: 24px !important;
  letter-spacing: .12em;
}
.menuSelectionSummary{
  max-width: min(900px, 100%);
  margin: 0 auto;
  color:#fff0ca;
  border-color: rgba(255,214,135,.28) !important;
  background: rgba(24, 13, 17, .70) !important;
}
@media (max-width: 980px){
  .menuBottomBar{
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }
  .menuActionStack{ order:-1; }
}
@media (max-height: 720px){
  .frontierMenuInner{ padding-top: 8px !important; padding-bottom: 8px !important; gap: 7px !important; }
  .frontierRoster .frontierHeroCard{ min-height: 218px !important; }
  .frontierThumbPane{ aspect-ratio: 6 / 4.45 !important; }
  .frontierHeroName{ font-size:.84rem !important; }
  .frontierHeroRole{ font-size:.7rem !important; }
  .frontierHeroStatus{ display:none; }
  .menuSelectionSummary{ min-height:32px; padding:6px 12px; }
  .frontierStartBtn{ min-height:50px !important; }
  .menuEdgeBtn{ min-height:44px !important; }
}

/* In-story layout polish: remove unused white stretch below the canvas */
body.inGame .gameGrid{
  align-items:start!important;
}
body.inGame .gameShell{
  align-self:start!important;
  height:auto!important;
  min-height:0!important;
}
body.inGame #canvas{
  display:block;
  height:auto!important;
}

/* Side action layout: add clear route back to game/hero selection */
.side .btnRow{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.side .btnRow .btn{
  width:100%;
  min-height:46px;
  padding:11px 12px;
  border-radius:14px;
  font-size:15px;
}
#selectMenuBtn{
  grid-column:1 / -1;
}
.btn.menuBlue,
.menuBlue{
  color:#f8ecd2;
  background:linear-gradient(180deg,#1e4d7a 0%,#11375f 45%,#0b2545 100%);
  border:1px solid rgba(211,169,88,.45);
  box-shadow:0 10px 20px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn.menuBlue:hover,
.menuBlue:hover{
  filter:brightness(1.07) saturate(1.06);
}
@media(max-width:1120px){
  body.inGame .gameGrid{align-items:stretch!important;}
  body.inGame .gameShell{align-self:stretch!important;}
}

/* Gameplay screen: scene on top, cinematic control desk underneath */
body.inGame{
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,210,119,.12), transparent 34%),
    linear-gradient(180deg,#08070d 0%,#120a12 50%,#07070b 100%) !important;
}
body.inGame .wrap{
  width:100%;
  max-width:100vw;
  height:100vh;
  padding:8px 10px;
  overflow:hidden;
}
body.inGame #game{
  height:calc(100vh - 16px);
  display:flex !important;
  flex-direction:column;
  gap:8px;
  overflow:hidden;
}
body.inGame .hud{
  flex:0 0 auto;
  margin-bottom:0;
  gap:8px;
}
body.inGame .hud .box{
  padding:7px 10px;
  border-radius:13px;
  background:linear-gradient(180deg,rgba(17,19,29,.96),rgba(10,10,17,.96)) !important;
  border:1px solid rgba(211,169,88,.34) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.inGame .label{
  color:#e5b85c !important;
  font-size:10px;
  letter-spacing:.12em;
}
body.inGame .value{
  color:#fff1cf !important;
  font-size:clamp(15px,1.1vw,18px);
  line-height:1.1;
}
body.inGame .gameGrid{
  display:flex !important;
  flex-direction:column;
  gap:9px;
  min-height:0;
  flex:1 1 auto;
  align-items:center !important;
}
body.inGame .gameShell{
  flex:0 0 auto;
  width:min(100%, calc(var(--gameCanvasH, 52vh) * 1.7777778));
  height:var(--gameCanvasH, min(56vh, 610px)) !important;
  max-height:var(--gameCanvasH, min(56vh, 610px)) !important;
  margin:0 auto;
  padding:6px !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,rgba(22,18,18,.96),rgba(8,9,14,.98)) !important;
  border:1px solid rgba(211,169,88,.34) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05) !important;
  overflow:hidden !important;
}
body.inGame #canvas{
  display:block;
  width:100% !important;
  height:100% !important;
  border-radius:14px !important;
  border:3px solid rgba(255,230,184,.82) !important;
  background:#050608 !important;
  box-shadow:0 0 0 1px rgba(114,67,20,.55),0 12px 28px rgba(0,0,0,.30) !important;
}
body.inGame .side{
  flex:0 0 auto;
  width:min(100%, 1560px);
  height:var(--gameBottomH, 246px);
  max-height:var(--gameBottomH, 246px) !important;
  overflow:hidden !important;
  padding:10px !important;
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(320px,1.28fr) minmax(250px,.95fr);
  grid-template-rows:auto minmax(0,1fr) auto auto;
  gap:9px 10px;
  align-items:stretch;
  color:#f8ecd2 !important;
  background:
    radial-gradient(circle at 50% 0%,rgba(175,114,37,.18),transparent 36%),
    linear-gradient(180deg,rgba(15,14,22,.96),rgba(7,8,13,.98)) !important;
  border:1px solid rgba(211,169,88,.36) !important;
  border-radius:18px !important;
  box-shadow:0 18px 42px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
body.inGame .side h2{
  grid-column:1;
  grid-row:1;
  margin:0;
  color:#ffd47a !important;
  font-family:Georgia,serif;
  font-size:clamp(17px,1.35vw,24px) !important;
  line-height:1.08;
  letter-spacing:.02em;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}
body.inGame .side > p{
  grid-column:1;
  grid-row:2;
  margin:0;
  color:#ead6b5 !important;
  font-size:clamp(12px,.95vw,15px) !important;
  line-height:1.32 !important;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
}
body.inGame .feedback{
  grid-column:1;
  grid-row:3;
  min-height:0 !important;
  margin:0;
  padding:8px 10px;
  border-radius:13px;
  color:#ffcf6b !important;
  font-size:clamp(12px,.95vw,15px) !important;
  line-height:1.25;
  background:rgba(54,30,10,.48);
  border:1px solid rgba(211,169,88,.24);
  overflow:hidden;
}
body.inGame .objectiveCard,
body.inGame .nearbyCard,
body.inGame .miniPanel{
  margin:0 !important;
  padding:10px 11px !important;
  border-radius:14px !important;
  color:#f8ecd2 !important;
  background:linear-gradient(180deg,rgba(20,20,31,.94),rgba(11,12,20,.96)) !important;
  border:1px solid rgba(211,169,88,.27) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
  overflow:auto;
  scrollbar-width:thin;
}
body.inGame .objectiveCard{
  grid-column:2;
  grid-row:1 / 5;
}
body.inGame .nearbyCard{
  grid-column:3;
  grid-row:1 / 3;
}
body.inGame .miniPanel{
  grid-column:3;
  grid-row:3;
}
body.inGame .objectiveCard .small,
body.inGame .nearbyCard .small,
body.inGame .miniTitle{
  color:#ffce6a !important;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:1000;
  font-size:10px;
}
body.inGame .objectiveCard .name,
body.inGame .nearbyCard .name{
  color:#fff0ca !important;
  font-weight:1000;
  font-size:clamp(13px,1vw,16px);
  line-height:1.15;
  margin-top:3px;
}
body.inGame .objectiveCard .desc,
body.inGame .nearbyCard .desc,
body.inGame .miniPanel,
body.inGame .miniPanel ul{
  color:#dcc7a7 !important;
  font-size:clamp(11px,.82vw,13px) !important;
  line-height:1.28 !important;
}
body.inGame .miniPanel ul{
  margin:6px 0 0 16px;
  padding:0;
}
body.inGame .side .btnRow{
  grid-column:1 / 3;
  grid-row:4;
  margin:0 !important;
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  align-self:end;
}
body.inGame .side .btnRow .btn{
  min-height:38px !important;
  padding:8px 10px !important;
  border-radius:13px !important;
  font-size:clamp(11px,.86vw,14px) !important;
  line-height:1.1;
  white-space:normal;
  border:1px solid rgba(211,169,88,.32) !important;
  box-shadow:0 10px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
body.inGame #selectMenuBtn{
  grid-column:auto !important;
}
body.inGame .btn.menuBlue,
body.inGame .menuBlue{
  background:linear-gradient(180deg,#334869,#17253f 55%,#0d1528 100%) !important;
}
body.inGame #progress{
  grid-column:3;
  grid-row:4;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  overflow:auto;
  align-self:end;
  max-height:86px;
  padding-right:2px;
}
body.inGame .progress .badge,
body.inGame #progress .badge{
  min-height:28px;
  padding:6px 8px;
  border-radius:11px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(211,169,88,.18);
  color:#dcc7a7;
  font-size:clamp(10px,.76vw,12px);
  font-weight:900;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.inGame #progress .badge.done{
  background:rgba(32,155,97,.22);
  color:#b9f7d1;
  border-color:rgba(52,211,153,.25);
}
body.inGame .hintTag,
body.inGame .kbd{
  background:rgba(78,50,15,.62) !important;
  border-color:rgba(211,169,88,.38) !important;
  color:#ffe2a4 !important;
}
@media(max-width:1100px){
  body.inGame .wrap{overflow:auto;height:auto;min-height:100vh;}
  body.inGame #game{height:auto;min-height:100vh;overflow:visible;}
  body.inGame .gameShell{width:100%;height:auto!important;max-height:none!important;aspect-ratio:16/9;}
  body.inGame .side{height:auto;max-height:none!important;grid-template-columns:1fr;overflow:visible!important;}
  body.inGame .side h2,
  body.inGame .side > p,
  body.inGame .feedback,
  body.inGame .objectiveCard,
  body.inGame .nearbyCard,
  body.inGame .miniPanel,
  body.inGame .side .btnRow,
  body.inGame #progress{grid-column:1;grid-row:auto;}
  body.inGame .side .btnRow{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-height:760px) and (min-width:1101px){
  body.inGame .objectiveCard .desc,
  body.inGame .nearbyCard .desc,
  body.inGame .miniPanel,
  body.inGame .miniPanel ul{font-size:10px!important;line-height:1.18!important;}
  body.inGame .side .btnRow .btn{min-height:32px!important;padding:6px 8px!important;}
  body.inGame #progress{max-height:64px;}
}

/* Lesson modal close button: keep it away from scaffold/action controls */
.lessonCloseTop{
  position: sticky;
  top: 8px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: right;
  margin: -4px 0 10px 14px;
  padding: 10px 16px;
  border: 1px solid rgba(148,163,184,.45);
  border-radius: 999px;
  background: linear-gradient(180deg,#f8fafc,#cbd5e1);
  color: #0f172a;
  font-weight: 1000;
  font-size: 14px;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(15,23,42,.22);
}
.lessonCloseTop:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg,#ffffff,#dbeafe);
  border-color: rgba(59,130,246,.45);
}
.modal.lessonModal #modalActions{
  display: none !important;
}
.modal.lessonModal #modalContent::after{
  content: '';
  display: block;
  clear: both;
}
@media(max-width:720px){
  .lessonCloseTop{
    top: 6px;
    padding: 9px 13px;
    font-size: 13px;
  }
}


/* Sponsor splash, no big shadow panel */
.menuIntroSponsor{
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  text-shadow: none !important;
}
.menuIntroSponsor::before,
.menuIntroSponsor::after{
  content: none !important;
  display: none !important;
}
.menuIntroSponsor .menuIntroEyebrow{
  background: rgba(16, 8, 12, .36) !important;
  border: 1px solid rgba(255, 226, 164, .38) !important;
  box-shadow: none !important;
  text-shadow: 0 0 16px rgba(255, 184, 66, .32) !important;
  backdrop-filter: blur(4px);
}
.menuIntroLogo{
  filter: none !important;
}

/* Story 4 AI/ML path support */
.frontierStoryCards{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.aiFlowGraphic .summaryNode{
  min-width: 96px;
}
body.inGame .objectiveCard .desc{
  max-height: min(24vh, 260px);
  overflow: auto;
}
@media (max-width: 1420px){
  .frontierStoryCards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px){
  .frontierStoryCards{
    grid-template-columns: 1fr;
  }
}

/* Unified story gameplay dashboard for all paths */
body.inGame{
  overflow:hidden !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,205,96,.10), transparent 32%),
    linear-gradient(180deg,#05060b 0%,#0c0710 54%,#04050a 100%) !important;
}
body.inGame .wrap{
  width:100vw !important;
  max-width:100vw !important;
  height:100vh !important;
  padding:6px 10px 8px !important;
  overflow:hidden !important;
}
body.inGame #game{
  height:100% !important;
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  gap:7px !important;
  overflow:hidden !important;
}
body.inGame .hud{
  display:grid !important;
  grid-template-columns:1.15fr 1.15fr .72fr 1.05fr .72fr !important;
  gap:8px !important;
  margin:0 !important;
  min-height:0 !important;
}
body.inGame .hud .box{
  min-height:44px !important;
  padding:7px 11px !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,rgba(17,19,29,.98),rgba(9,10,16,.98)) !important;
  border:1px solid rgba(211,169,88,.46) !important;
  box-shadow:0 9px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.inGame .hud .label{
  color:#ffcd69 !important;
  font-size:10px !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}
body.inGame .hud .value{
  color:#fff2d0 !important;
  font-size:clamp(15px,1.05vw,18px) !important;
  line-height:1.1 !important;
}
body.inGame .gameGrid.storyDashboard,
body.inGame .gameGrid{
  display:grid !important;
  grid-template-columns:minmax(640px,1fr) minmax(350px,0.58fr) !important;
  grid-template-rows:minmax(0,1fr) minmax(88px,112px) !important;
  gap:8px 10px !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  flex:none !important;
}
body.inGame .gameShell{
  grid-column:1 !important;
  grid-row:1 !important;
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  min-height:0 !important;
  margin:0 !important;
  padding:6px !important;
  align-self:stretch !important;
  justify-self:stretch !important;
  display:flex !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  overflow:hidden !important;
  border-radius:16px !important;
  background:linear-gradient(180deg,rgba(22,18,18,.96),rgba(8,9,14,.98)) !important;
  border:1px solid rgba(211,169,88,.42) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
body.inGame #canvas{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  border-radius:13px !important;
  border:3px solid rgba(255,231,185,.86) !important;
  background:#050608 !important;
  box-shadow:0 0 0 1px rgba(114,67,20,.55),0 12px 28px rgba(0,0,0,.30) !important;
}
body.inGame .side,
body.inGame .storySidePanel{
  grid-column:2 !important;
  grid-row:1 / 3 !important;
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  min-height:0 !important;
  overflow:hidden !important;
  padding:9px !important;
  display:grid !important;
  grid-template-rows:minmax(150px,1fr) minmax(112px,.52fr) minmax(84px,.36fr) auto auto !important;
  grid-template-columns:1fr !important;
  gap:8px !important;
  align-items:stretch !important;
  color:#f8ecd2 !important;
  background:
    radial-gradient(circle at 50% 0%,rgba(175,114,37,.18),transparent 36%),
    linear-gradient(180deg,rgba(15,14,22,.96),rgba(7,8,13,.98)) !important;
  border:1px solid rgba(211,169,88,.38) !important;
  border-radius:16px !important;
  box-shadow:0 18px 42px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
body.inGame .side h2,
body.inGame .side > p,
body.inGame .feedback{
  display:none !important;
}
body.inGame .objectiveCard,
body.inGame .nearbyCard,
body.inGame .miniPanel{
  margin:0 !important;
  padding:10px 11px !important;
  border-radius:14px !important;
  color:#f8ecd2 !important;
  background:linear-gradient(180deg,rgba(20,20,31,.94),rgba(11,12,20,.96)) !important;
  border:1px solid rgba(211,169,88,.29) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
  overflow:auto !important;
  scrollbar-width:thin;
}
body.inGame .objectiveCard{grid-row:1 !important;grid-column:1 !important;}
body.inGame .nearbyCard{grid-row:2 !important;grid-column:1 !important;}
body.inGame .miniPanel{grid-row:3 !important;grid-column:1 !important;}
body.inGame .objectiveCard .small,
body.inGame .nearbyCard .small,
body.inGame .miniTitle{
  color:#ffce6a !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
  font-weight:1000 !important;
  font-size:10px !important;
}
body.inGame .objectiveCard .name,
body.inGame .nearbyCard .name{
  color:#fff0ca !important;
  font-weight:1000 !important;
  font-size:clamp(13px,1.02vw,17px) !important;
  line-height:1.15 !important;
  margin-top:3px !important;
}
body.inGame .objectiveCard .desc,
body.inGame .nearbyCard .desc,
body.inGame .miniPanel,
body.inGame .miniPanel ul{
  color:#dcc7a7 !important;
  font-size:clamp(10px,.78vw,13px) !important;
  line-height:1.25 !important;
}
body.inGame .miniPanel ul{margin:6px 0 0 16px !important;padding:0 !important;}
body.inGame .side .btnRow{
  grid-row:4 !important;
  grid-column:1 !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  margin:0 !important;
}
body.inGame .side .btnRow .btn{
  width:100% !important;
  min-height:38px !important;
  padding:8px 10px !important;
  border-radius:13px !important;
  font-size:clamp(11px,.86vw,14px) !important;
  line-height:1.1 !important;
  white-space:normal !important;
  border:1px solid rgba(211,169,88,.34) !important;
  box-shadow:0 10px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
body.inGame .choosePathWide,
body.inGame #selectMenuBtn{
  grid-row:5 !important;
  grid-column:1 !important;
  min-height:52px !important;
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  border-radius:15px !important;
  color:#ffe6ac !important;
  background:linear-gradient(180deg,#17243a 0%,#101827 55%,#090d17 100%) !important;
  border:1px solid rgba(211,169,88,.56) !important;
  box-shadow:0 12px 22px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
body.inGame .choosePathWide b{display:block;font-size:clamp(14px,1vw,18px);line-height:1.0;}
body.inGame .choosePathWide small{display:block;color:#d7c09b;font-size:11px;margin-top:2px;}
body.inGame .choosePathIcon{font-size:24px;line-height:1;}
body.inGame .storyBottomDesk{
  grid-column:1 !important;
  grid-row:2 !important;
  display:grid !important;
  grid-template-columns:minmax(360px,1.25fr) minmax(280px,.85fr) !important;
  gap:8px !important;
  min-height:0 !important;
}
body.inGame .lessonProgressPanel,
body.inGame .rewardPanel{
  min-height:0 !important;
  padding:10px 12px !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,rgba(20,20,31,.94),rgba(11,12,20,.96)) !important;
  border:1px solid rgba(211,169,88,.32) !important;
  color:#f8ecd2 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
  overflow:hidden !important;
}
body.inGame .deskTitle{
  color:#ffce6a !important;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:1000;
  font-size:clamp(11px,.9vw,14px);
}
body.inGame .deskSub{
  color:#dcc7a7 !important;
  font-size:clamp(10px,.75vw,12px);
  line-height:1.2;
  margin-top:3px;
}
body.inGame .lessonProgressPanel{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  gap:5px 12px !important;
}
body.inGame .lessonProgressPanel .deskTitle{grid-column:1;grid-row:1;}
body.inGame .lessonProgressPanel .deskSub{grid-column:1;grid-row:2;align-self:start;min-width:150px;}
body.inGame #progress{
  grid-column:2 !important;
  grid-row:1 / 3 !important;
  align-self:center !important;
  display:flex !important;
  gap:8px !important;
  align-items:center !important;
  overflow:hidden !important;
  padding:0 !important;
  max-height:none !important;
}
body.inGame #progress .badge,
body.inGame .progress .badge{
  flex:1 1 0 !important;
  min-width:0 !important;
  min-height:54px !important;
  padding:4px 3px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  border-radius:13px !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(211,169,88,.20) !important;
  color:#dcc7a7 !important;
  text-align:center !important;
}
body.inGame .progressNode{
  width:25px;
  height:25px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#ffe6ac;
  background:#141723;
  border:1px solid rgba(211,169,88,.56);
  font-weight:1000;
  font-size:11px;
}
body.inGame .progressLabel{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:clamp(9px,.68vw,11px);
  font-weight:900;
}
body.inGame #progress .badge.done{
  background:rgba(32,155,97,.22) !important;
  color:#b9f7d1 !important;
  border-color:rgba(52,211,153,.32) !important;
}
body.inGame #progress .badge.done .progressNode{
  background:rgba(32,155,97,.35);
  border-color:rgba(52,211,153,.48);
  color:#d7ffe6;
}
body.inGame .rewardPanel{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-right:86px !important;
}
body.inGame .rewardIcon{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  font-size:44px;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
body.inGame .hintTag,
body.inGame .kbd{
  background:rgba(78,50,15,.62) !important;
  border-color:rgba(211,169,88,.38) !important;
  color:#ffe2a4 !important;
}
@media(max-width:1150px){
  body.inGame{overflow:auto !important;}
  body.inGame .wrap{height:auto !important;min-height:100vh !important;overflow:visible !important;}
  body.inGame #game{height:auto !important;min-height:100vh !important;overflow:visible !important;}
  body.inGame .gameGrid.storyDashboard,
  body.inGame .gameGrid{
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto !important;
    overflow:visible !important;
  }
  body.inGame .gameShell{grid-column:1!important;grid-row:1!important;aspect-ratio:16/9;height:auto!important;}
  body.inGame .side{grid-column:1!important;grid-row:2!important;height:auto!important;max-height:none!important;overflow:visible!important;}
  body.inGame .storyBottomDesk{grid-column:1!important;grid-row:3!important;grid-template-columns:1fr!important;}
  body.inGame #progress{flex-wrap:wrap!important;}
  body.inGame #progress .badge{min-width:90px!important;}
}
@media(max-height:760px) and (min-width:1151px){
  body.inGame .hud .box{min-height:38px!important;padding:5px 9px!important;}
  body.inGame .objectiveCard .desc,
  body.inGame .nearbyCard .desc,
  body.inGame .miniPanel,
  body.inGame .miniPanel ul{font-size:10px!important;line-height:1.16!important;}
  body.inGame .side .btnRow .btn{min-height:32px!important;padding:6px 8px!important;}
  body.inGame .choosePathWide{min-height:44px!important;}
  body.inGame #progress .badge{min-height:44px!important;}
  body.inGame .progressLabel{display:none!important;}
}

/* Story card reveal timing fix: AI/ML card no longer appears early */
.frontierMenuScreen.menuIntroPending.menuIntroReveal .frontierStoryCard:nth-child(1){ transition-delay: .50s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .frontierStoryCard:nth-child(2){ transition-delay: .68s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .frontierStoryCard:nth-child(3){ transition-delay: .86s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .frontierStoryCard:nth-child(4){ transition-delay: 1.04s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .stepBannerHero{ transition-delay: 1.24s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .frontierHeroCard:nth-child(1){ transition-delay: 1.42s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .frontierHeroCard:nth-child(2){ transition-delay: 1.54s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .frontierHeroCard:nth-child(3){ transition-delay: 1.66s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .frontierHeroCard:nth-child(4){ transition-delay: 1.78s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .frontierHeroCard:nth-child(5){ transition-delay: 1.90s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .frontierHeroCard:nth-child(6){ transition-delay: 2.02s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .menuBottomBar{ transition-delay: 2.20s; }


/* V145 richer guided picture-story scaffolds */
.scaffoldSlide .slideWhy,
.scaffoldSlide .slideTakeaway{
  border-radius:14px;
  padding:11px 12px;
  font-size:14px;
  line-height:1.45;
  margin-bottom:10px;
}
.scaffoldSlide .slideWhy{background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a}
.scaffoldSlide .slideTakeaway{background:#eef2ff;border:1px solid #c7d2fe;color:#3730a3}
.slideInfoGrid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:760px){.slideInfoGrid{grid-template-columns:1fr 1fr}}
.richGraphic{background:linear-gradient(180deg,#fbfdff,#eef5ff)!important}
.vizFlow{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:8px}
.vizSplit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vizPanel{background:#fff;border:1px solid rgba(15,23,42,.10);border-radius:16px;padding:12px;box-shadow:0 4px 14px rgba(15,23,42,.05)}
.vizStoryTitle{font-size:13px;font-weight:900;color:#334155;margin-bottom:8px}
.vizPanelNote{margin-top:8px;font-size:12.5px;line-height:1.4;color:#475569}
.vizCard{background:#fff;border:1px solid rgba(15,23,42,.10);border-radius:16px;padding:11px 12px;min-width:110px;flex:1 1 120px;box-shadow:0 4px 14px rgba(15,23,42,.05)}
.vizCardIcon{font-size:24px;line-height:1;margin-bottom:6px}
.vizCardTitle{font-size:14px;font-weight:900;color:#0f172a;line-height:1.2}
.vizCardText{font-size:12.5px;color:#475569;line-height:1.35;margin-top:5px}
.vizCard.tone-blue{box-shadow:inset 0 0 0 2px rgba(59,130,246,.18)}
.vizCard.tone-green{box-shadow:inset 0 0 0 2px rgba(34,197,94,.18)}
.vizCard.tone-purple{box-shadow:inset 0 0 0 2px rgba(124,58,237,.18)}
.vizCard.tone-gold{box-shadow:inset 0 0 0 2px rgba(245,158,11,.22)}
.vizCard.tone-red{box-shadow:inset 0 0 0 2px rgba(239,68,68,.18)}
.vizArrow{align-self:center;font-size:20px;font-weight:900;color:#2563eb;padding:0 2px}
.vizTableWrap{overflow:auto;background:#fff;border:1px solid rgba(15,23,42,.10);border-radius:14px;padding:8px}
.vizTable{width:100%;border-collapse:collapse;font-size:12.5px}
.vizTable th,.vizTable td{padding:8px 10px;border-bottom:1px solid #e5e7eb;text-align:left;vertical-align:top}
.vizTable th{background:#f8fafc;color:#0f172a;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.vizTable tr:last-child td{border-bottom:none}
.vizBadgeRow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}
.vizBadge,.vizChip{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:900;border:1px solid transparent}
.vizBadge.tone-blue,.vizChip.tone-blue{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}
.vizBadge.tone-green,.vizChip.tone-green{background:#dcfce7;color:#166534;border-color:#86efac}
.vizBadge.tone-purple,.vizChip.tone-purple{background:#ede9fe;color:#6d28d9;border-color:#c4b5fd}
.vizBadge.tone-gold,.vizChip.tone-gold{background:#fef3c7;color:#92400e;border-color:#fcd34d}
.vizBadge.tone-red,.vizChip.tone-red{background:#fee2e2;color:#b91c1c;border-color:#fca5a5}
.vizChipRow{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.pixelGrid{display:grid;grid-template-columns:repeat(5,14px);gap:4px;justify-content:center;margin:4px 0 6px}
.pixelGrid span{display:block;width:14px;height:14px;border-radius:4px;background:#dbeafe;border:1px solid #bfdbfe}
.pixelGrid span.hot{background:#60a5fa;border-color:#2563eb}
.vizLayerFlow{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.vizLayerCol{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:68px}
.vizLayerLabel{font-size:12px;font-weight:900;color:#334155}
.vizNeuronStack{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:14px;padding:10px 12px;min-width:54px}
.vizNeuronStack i{display:block;width:14px;height:14px;border-radius:999px;background:#93c5fd}
.vizNeuronStack.tone-purple i{background:#c4b5fd}
.vizNeuronStack.tone-green i{background:#86efac}
.vizNeuronStack.tone-blue i{background:#93c5fd}
.vizBars{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid rgba(15,23,42,.10);border-radius:14px;padding:12px}
.vizBarRow{display:grid;grid-template-columns:120px 1fr 42px;gap:10px;align-items:center;font-size:12.5px;color:#334155;font-weight:700}
.vizBar{height:14px;background:#e5e7eb;border-radius:999px;overflow:hidden}
.vizBar i{display:block;height:100%;border-radius:999px}
.vizBar i.tone-blue{background:#60a5fa}.vizBar i.tone-green{background:#22c55e}.vizBar i.tone-purple{background:#8b5cf6}.vizBar i.tone-gold{background:#f59e0b}.vizBar i.tone-red{background:#ef4444}
.vizClusterBoard{position:relative;min-height:155px;background:#fff;border:1px solid rgba(15,23,42,.10);border-radius:14px;overflow:hidden}
.vizClusterBoard::before,.vizClusterBoard::after{content:'';position:absolute;inset:14px;border-left:1px dashed rgba(148,163,184,.35);border-bottom:1px dashed rgba(148,163,184,.35);pointer-events:none}
.vizClusterBoard .cluster{position:absolute;width:14px;height:14px;border-radius:999px;opacity:.95}
.vizClusterBoard .cluster.green{background:#22c55e}.vizClusterBoard .cluster.blue{background:#3b82f6}.vizClusterBoard .cluster.purple{background:#a855f7}.vizClusterBoard .cluster.red{background:#ef4444}
.vizClusterBoard .cluster.anomaly{box-shadow:0 0 0 6px rgba(239,68,68,.18)}
.vizPrompt{background:#fff;border:1px solid rgba(15,23,42,.10);border-radius:14px;padding:12px}
.vizPromptLabel{display:inline-block;background:#dbeafe;color:#1e3a8a;border-radius:999px;padding:4px 8px;font-size:12px;font-weight:900;margin-bottom:8px}
.vizPromptText{font-size:13px;line-height:1.45;color:#0f172a}
.scaffoldDeck .lessonLead{display:flex;align-items:center;gap:8px}
.scaffoldDeck .lessonLead::before{content:'🖼️';font-size:18px}
@media(max-width:720px){
  .vizSplit{grid-template-columns:1fr}
  .vizBarRow{grid-template-columns:1fr}
}


/* V146 lesson progress polish: clean numbered nodes */
body.inGame .lessonProgressPanel #progress,
body.inGame #progress{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:12px !important;
  overflow:visible !important;
  max-height:none !important;
  padding:0 !important;
}
body.inGame #progress .badge,
body.inGame .progress .badge{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  padding:0 !important;
  border-radius:14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(255,255,255,.085) !important;
  border:1px solid rgba(211,169,88,.34) !important;
  color:#ffe2a4 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.20) !important;
}
body.inGame .progressNode{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  min-height:30px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  font-size:15px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  color:#ffdd91 !important;
  background:rgba(6,8,14,.88) !important;
  border:1px solid rgba(255,221,145,.58) !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
body.inGame .progressLabel{display:none !important;}
body.inGame #progress .badge.done{
  background:rgba(32,155,97,.22) !important;
  border-color:rgba(52,211,153,.48) !important;
}
body.inGame #progress .badge.done .progressNode{
  color:#dcfce7 !important;
  border-color:rgba(134,239,172,.65) !important;
  background:rgba(20,83,45,.82) !important;
}
@media(max-width:900px){
  body.inGame #progress{gap:8px !important; flex-wrap:wrap !important; justify-content:flex-start !important;}
  body.inGame #progress .badge{width:42px !important;height:42px !important;min-width:42px !important;min-height:42px !important;}
  body.inGame .progressNode{width:27px !important;height:27px !important;min-width:27px !important;min-height:27px !important;font-size:13px !important;}
}

/* V146 rich scaffold badge placement polish */
.richGraphic > .vizBadgeRow{
  margin-top:-4px !important;
  margin-bottom:12px !important;
  position:relative !important;
  z-index:2 !important;
}
.richGraphic > .vizBadgeRow + .vizBars{
  margin-top:0 !important;
}
.vizBars{
  padding-top:14px !important;
}

/* Background music controls */
.musicControls{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1200;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid rgba(226,169,65,.58);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(42,24,13,.94),rgba(9,11,19,.94));
  box-shadow:0 10px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05);
  backdrop-filter:blur(8px);
}
.musicToggle{
  border:1px solid rgba(226,169,65,.70);
  border-radius:999px;
  padding:8px 14px;
  background:linear-gradient(180deg,#2a180d,#090b13);
  color:#ffd978;
  font-weight:900;
  letter-spacing:.05em;
  cursor:pointer;
}
.musicToggle:hover{filter:brightness(1.08);transform:translateY(-1px)}
.musicToggle.isPlaying{
  background:linear-gradient(180deg,#9a5a08,#321608);
  color:#fff3c4;
}
.musicToggle.isMuted{opacity:.78;}
.musicVolumeWrap{
  display:flex;
  align-items:center;
  gap:8px;
  color:#ffe9a8;
  font-weight:900;
  font-size:12px;
  letter-spacing:.04em;
  user-select:none;
}
.musicVolume{
  width:118px;
  accent-color:#f6c453;
  cursor:pointer;
}
body.inGame .musicControls{right:14px;bottom:12px}
@media(max-width:760px){
  .musicControls{right:10px;bottom:10px;gap:7px;padding:7px 8px;}
  .musicToggle{padding:7px 10px;font-size:12px;}
  .musicVolume{width:88px;}
  .musicVolumeWrap{font-size:11px;}
}

/* V160 Story 4 mini-game training missions */
.miniGameBox{
  margin:0 0 14px;
  padding:16px;
  border-radius:22px;
  background:linear-gradient(180deg,#071224,#0c1e35);
  border:1px solid rgba(245,180,70,.42);
  box-shadow:0 16px 34px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.06);
  color:#f8fbff;
}
.miniGameHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.miniGameEyebrow{
  color:#f7c66b;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.miniGameHeader h3{
  margin:3px 0 4px;
  font-size:20px;
  color:#fff4d2;
}
.miniGameHeader p{
  margin:0;
  color:#dbeafe;
  line-height:1.38;
}
.miniGameStatus{
  white-space:nowrap;
  border-radius:999px;
  padding:7px 11px;
  background:rgba(59,130,246,.18);
  color:#bfdbfe;
  border:1px solid rgba(59,130,246,.38);
  font-weight:900;
}
.miniGameStatus.done{
  background:rgba(34,197,94,.18);
  color:#bbf7d0;
  border-color:rgba(34,197,94,.42);
}
.miniGameTip{
  border-radius:16px;
  padding:10px 12px;
  margin-bottom:12px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  color:#fef3c7;
  font-size:13.5px;
  line-height:1.42;
}
.miniSequenceBoard{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:12px;
}
.miniSlots,
.miniTokenBank{
  min-height:160px;
  border-radius:18px;
  padding:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);
}
.miniSlots{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(105px,1fr));
  gap:9px;
}
.miniSlot{
  border:1px dashed rgba(245,180,70,.55);
  border-radius:16px;
  min-height:74px;
  background:rgba(255,255,255,.05);
  color:#fde68a;
  font-weight:900;
  cursor:pointer;
}
.miniSlot span{
  display:block;
  width:26px;
  height:26px;
  border-radius:50%;
  margin:0 auto 4px;
  background:#f2b84b;
  color:#170c04;
  line-height:26px;
}
.miniSlot.filled{
  border-style:solid;
  background:rgba(245,180,70,.15);
  color:#fff;
}
.miniTokenBank,
.miniChoiceGrid,
.miniBinGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
  gap:10px;
}
.miniToken,
.miniChoice,
.miniBinCard{
  text-align:left;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.05));
  color:#fff;
  border-radius:17px;
  padding:11px 12px;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}
.miniToken:hover,
.miniChoice:hover{
  transform:translateY(-2px);
  border-color:rgba(245,180,70,.72);
}
.miniToken b,
.miniChoice b,
.miniBinCard b{
  display:block;
  font-size:13px;
  color:#fff7d6;
}
.miniToken small,
.miniChoice small{
  display:block;
  color:#bfd6ef;
  line-height:1.3;
  margin-top:5px;
}
.miniChoice.picked{
  background:linear-gradient(180deg,rgba(34,197,94,.22),rgba(34,197,94,.10));
  border-color:rgba(74,222,128,.75);
}
.miniBinCard{
  cursor:default;
}
.miniBinButtons{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:10px;
}
.miniBinButtons button{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:#dbeafe;
  border-radius:999px;
  padding:7px 10px;
  font-weight:900;
  cursor:pointer;
}
.miniBinButtons button.active{
  background:#f2b84b;
  color:#170c04;
  border-color:#f2b84b;
}
.miniEmpty{
  display:grid;
  place-items:center;
  color:#cbd5e1;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  padding:12px;
}
.miniGameActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.miniFeedback{
  margin-top:12px;
  border-radius:16px;
  padding:11px 12px;
  font-weight:800;
  line-height:1.42;
}
.miniFeedback.good{
  background:rgba(34,197,94,.15);
  border:1px solid rgba(34,197,94,.40);
  color:#bbf7d0;
}
.miniFeedback.bad{
  background:rgba(251,113,133,.14);
  border:1px solid rgba(251,113,133,.38);
  color:#fecdd3;
}
@media(max-width:720px){
  .miniSequenceBoard{grid-template-columns:1fr;}
  .miniGameHeader{flex-direction:column;}
}


/* V170 Story 4 Ocean Saga training frame */
.modal.lessonModal.oceanLessonModal{
  background:
    radial-gradient(circle at 50% 14%, rgba(42,139,214,.22), transparent 34%),
    rgba(2,8,22,.86) !important;
  backdrop-filter: blur(5px) saturate(1.08);
}
.modal.lessonModal.oceanLessonModal .modalBox{
  max-width:1180px!important;
  width:min(96vw,1180px)!important;
  max-height:92vh!important;
  padding:18px 20px 22px!important;
  color:#f8fbff!important;
  background:
    linear-gradient(180deg,rgba(9,26,52,.98),rgba(5,16,34,.98) 50%,rgba(4,11,24,.98)),
    radial-gradient(circle at 50% 0%,rgba(51,178,255,.18),transparent 38%) !important;
  border:2px solid rgba(240,184,73,.72)!important;
  border-radius:30px!important;
  box-shadow:
    0 32px 90px rgba(0,0,0,.66),
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 0 34px rgba(17,107,164,.18),
    0 0 32px rgba(240,184,73,.18)!important;
  position:relative;
  overflow:auto!important;
}
.modal.lessonModal.oceanLessonModal .modalBox::before{
  content:'✦';
  position:absolute;
  top:-4px;
  left:50%;
  transform:translateX(-50%);
  width:88px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:0 0 44px 44px;
  background:linear-gradient(180deg,#f7d884,#b87317);
  color:#0b1730;
  font-size:34px;
  font-weight:900;
  box-shadow:0 12px 24px rgba(0,0,0,.38), inset 0 0 0 3px rgba(14,25,48,.35);
  z-index:4;
}
.modal.lessonModal.oceanLessonModal .modalGrid{
  grid-template-columns:245px 1fr!important;
  gap:22px!important;
  align-items:start!important;
}
.modal.lessonModal.oceanLessonModal .avatarPane{
  position:sticky;
  top:16px;
  display:flex!important;
  flex-direction:column;
  gap:12px;
  justify-content:flex-start!important;
  align-items:center!important;
  min-height:680px;
  padding:16px 12px;
  border:1px solid rgba(240,184,73,.45);
  border-radius:26px;
  background:
    linear-gradient(180deg,rgba(2,12,29,.82),rgba(5,18,40,.72)),
    radial-gradient(circle at 50% 0%,rgba(59,186,255,.16),transparent 55%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.modal.lessonModal.oceanLessonModal .avatarPane::before{
  content:'YOUR TEACHER';
  display:block;
  width:100%;
  color:#f7c66b;
  font-size:12px;
  font-weight:950;
  letter-spacing:.16em;
  text-align:center;
  text-transform:uppercase;
  margin-bottom:2px;
}
.modal.lessonModal.oceanLessonModal .imgAvatar,
.modal.lessonModal.oceanLessonModal .emojiAvatar{
  width:205px!important;
  height:360px!important;
  border-radius:24px!important;
  background:
    linear-gradient(180deg,#061832,#0d2a53)!important;
  border:2px solid rgba(240,184,73,.64)!important;
  box-shadow:0 18px 34px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.08)!important;
}
.modal.lessonModal.oceanLessonModal .imgAvatar img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center top!important;
  padding:0!important;
}
.modal.lessonModal.oceanLessonModal .modalBox h2,
.modal.lessonModal.oceanLessonModal #modalTitle{
  font-size:clamp(28px,3.2vw,42px)!important;
  color:#fff0bf!important;
  text-shadow:0 2px 0 rgba(0,0,0,.42),0 0 20px rgba(240,184,73,.18);
  letter-spacing:.01em;
  margin:0 0 7px!important;
  padding-right:92px;
}
.modal.lessonModal.oceanLessonModal #modalBody{
  color:#cfe4ff!important;
  font-size:15px!important;
  line-height:1.42!important;
  max-width:800px;
}
.modal.lessonModal.oceanLessonModal .lessonCloseTop{
  position:sticky;
  top:8px;
  float:right;
  z-index:90;
  margin:-2px 0 10px 14px;
  padding:11px 16px;
  border-radius:999px;
  background:linear-gradient(180deg,#f9d97d,#b97817)!important;
  color:#0b1730!important;
  border:1px solid rgba(255,239,177,.78)!important;
  box-shadow:0 14px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.35)!important;
}
.modal.lessonModal.oceanLessonModal .lessonTabs{
  gap:10px;
  margin:12px 0 14px!important;
  padding:5px;
  border:1px solid rgba(240,184,73,.28);
  border-radius:18px;
  background:rgba(1,10,24,.44);
}
.modal.lessonModal.oceanLessonModal .lessonTab{
  background:linear-gradient(180deg,rgba(22,51,88,.98),rgba(9,26,52,.98))!important;
  border:1px solid rgba(240,184,73,.35)!important;
  color:#ffe9b2!important;
  border-radius:14px!important;
  padding:10px 17px!important;
  text-transform:uppercase;
  letter-spacing:.04em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.modal.lessonModal.oceanLessonModal .lessonTab.active{
  background:linear-gradient(180deg,#0ea5e9,#0b5fa5)!important;
  color:white!important;
  border-color:#f8d979!important;
  box-shadow:0 0 0 1px rgba(255,245,190,.24),0 0 20px rgba(14,165,233,.28)!important;
}
.modal.lessonModal.oceanLessonModal .scoreRibbon{
  color:#0a1b31!important;
  background:linear-gradient(180deg,#dff7ff,#8bdfff)!important;
  border:1px solid rgba(245,211,111,.78)!important;
  box-shadow:0 6px 18px rgba(0,0,0,.24);
}
.modal.lessonModal.oceanLessonModal .lessonCard,
.modal.lessonModal.oceanLessonModal .scaffoldSlide,
.modal.lessonModal.oceanLessonModal #lessonPage_check .lessonCard{
  background:linear-gradient(180deg,rgba(8,31,61,.95),rgba(4,18,38,.95))!important;
  border:1px solid rgba(240,184,73,.38)!important;
  color:#f8fbff!important;
  box-shadow:0 16px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.modal.lessonModal.oceanLessonModal .lessonLead,
.modal.lessonModal.oceanLessonModal .slideTitle{
  color:#fff4d2!important;
}
.modal.lessonModal.oceanLessonModal .lessonBodyText,
.modal.lessonModal.oceanLessonModal .lessonSummary,
.modal.lessonModal.oceanLessonModal .lessonBullet,
.modal.lessonModal.oceanLessonModal .slideBody,
.modal.lessonModal.oceanLessonModal .graphicCaption,
.modal.lessonModal.oceanLessonModal .miniGameHeader p{
  color:#d9ebff!important;
}
.modal.lessonModal.oceanLessonModal .conceptChips span,
.modal.lessonModal.oceanLessonModal .slideCounter{
  background:rgba(14,165,233,.18)!important;
  color:#bcecff!important;
  border:1px solid rgba(14,165,233,.28);
}
.modal.lessonModal.oceanLessonModal .slideWhy{
  background:rgba(14,165,233,.14)!important;
  border-color:rgba(125,211,252,.38)!important;
  color:#d9f2ff!important;
}
.modal.lessonModal.oceanLessonModal .slideExample,
.modal.lessonModal.oceanLessonModal .slideTakeaway{
  background:rgba(10,63,68,.72)!important;
  border-color:rgba(52,211,153,.35)!important;
  color:#c9ffdf!important;
}
.modal.lessonModal.oceanLessonModal .slideMiniQuiz{
  background:rgba(75,43,11,.72)!important;
  border-color:rgba(245,158,11,.44)!important;
  color:#ffe0a3!important;
}
.modal.lessonModal.oceanLessonModal .richGraphic,
.modal.lessonModal.oceanLessonModal .slideGraphic{
  background:linear-gradient(180deg,rgba(12,43,82,.86),rgba(4,22,47,.86))!important;
  border:1px solid rgba(124,211,252,.28)!important;
}
.modal.lessonModal.oceanLessonModal .vizCard,
.modal.lessonModal.oceanLessonModal .vizPanel,
.modal.lessonModal.oceanLessonModal .vizTableWrap,
.modal.lessonModal.oceanLessonModal .vizBars,
.modal.lessonModal.oceanLessonModal .vizClusterBoard,
.modal.lessonModal.oceanLessonModal .vizPrompt{
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(255,255,255,.12)!important;
  color:#f8fbff!important;
}
.modal.lessonModal.oceanLessonModal .vizCardTitle,
.modal.lessonModal.oceanLessonModal .vizStoryTitle,
.modal.lessonModal.oceanLessonModal .vizPromptText,
.modal.lessonModal.oceanLessonModal .vizTable th,
.modal.lessonModal.oceanLessonModal .vizTable td{
  color:#f8fbff!important;
}
.modal.lessonModal.oceanLessonModal .vizCardText,
.modal.lessonModal.oceanLessonModal .vizPanelNote{
  color:#cbdff6!important;
}
.modal.lessonModal.oceanLessonModal .vizTable th{
  background:rgba(14,165,233,.14)!important;
}
.modal.lessonModal.oceanLessonModal .miniGameBox{
  background:
    linear-gradient(180deg,rgba(3,19,42,.98),rgba(3,13,30,.98))!important;
  border:1px solid rgba(240,184,73,.64)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,255,255,.06)!important;
}
.modal.lessonModal.oceanLessonModal .choice{
  background:rgba(219,234,254,.10)!important;
  color:#f8fbff!important;
  border:1px solid rgba(125,211,252,.18)!important;
}
.modal.lessonModal.oceanLessonModal .choice:hover{
  background:rgba(14,165,233,.24)!important;
}
@media(max-width:820px){
  .modal.lessonModal.oceanLessonModal .modalGrid{grid-template-columns:1fr!important;}
  .modal.lessonModal.oceanLessonModal .avatarPane{position:relative;min-height:auto;display:none!important;}
  .modal.lessonModal.oceanLessonModal #modalTitle{padding-right:0;}
}

/* V200 global training-system unification and portrait fixes */
.modal.lessonModal.oceanLessonModal .modalBox{
  max-width: min(96vw, 1240px) !important;
}
.modal.lessonModal.oceanLessonModal .imgAvatar,
.modal.lessonModal.oceanLessonModal .emojiAvatar{
  height: 320px !important;
}
.modal.lessonModal.oceanLessonModal .imgAvatar img{
  object-fit: cover !important;
  object-position: center 12% !important;
  transform: scale(1.08);
  transform-origin: center top;
}
.modal.lessonModal.oceanLessonModal .avatarPane{
  min-height: 620px !important;
}
/* Training/profile portraits in cinematic message cards should prioritize face/upper body */
.posterPortrait img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center 14% !important;
  padding: 0 !important;
}
.posterPortrait{
  background: radial-gradient(circle at 50% 22%, #12345d, #07101f 72%) !important;
}
/* Keep the global lesson tabs in the same ocean-academy style across stories */
.modal.lessonModal.oceanLessonModal .lessonCard.compact.scaffoldDeck,
.modal.lessonModal.oceanLessonModal .lessonPage .lessonCard{
  border-radius: 22px !important;
}
.modal.lessonModal.oceanLessonModal .lessonCanvasWrap canvas{
  background: linear-gradient(180deg, #082043, #031022) !important;
  border-color: rgba(240,184,73,.28) !important;
}
/* Story cards: richer illustrated poster feel */
.frontierStoryCards .frontierStoryCard{
  box-shadow: 0 22px 46px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.05) !important;
}
.frontierStoryCards .frontierStoryCard.active,
.frontierStoryCards .frontierStoryCard:hover{
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--storyAccent) 58%, #ffe6a0), 0 26px 58px rgba(0,0,0,.42) !important;
}
.storyCardPreview img{
  object-fit: cover !important;
  object-position: center center !important;
}
/* Visible NPC personal-space rings */
body.inGame canvas#gameCanvas{
  image-rendering: auto;
}

/* Story 3 privacy poster evidence case */
.dialoguePoster.privacyWarningPosterCase .posterScene{
  height: min(54vh, 560px);
  background: radial-gradient(circle at 50% 30%, rgba(255,220,142,.09), rgba(0,0,0,.42)), #070910;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialoguePoster.privacyWarningPosterCase .posterScene img{
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center center !important;
  image-rendering: auto;
}
.dialoguePoster.privacyWarningPosterCase .posterSide.left .posterPortrait img{
  object-fit: contain !important;
  background: #101018;
  padding: 6px;
}
.dialoguePoster.privacyWarningPosterCase .posterDialogue{
  background: linear-gradient(180deg, rgba(16,12,10,.78), rgba(12,10,16,.88));
}


/* V155 redesigned story-selection covers: environment + science together */
.frontierStoryCards .frontierStoryCard{
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(8, 18, 38, .98), rgba(11, 8, 20, .94)) !important;
  border:1px solid color-mix(in srgb, var(--storyAccent) 34%, rgba(255,225,160,.30)) !important;
}
.frontierStoryCards .frontierStoryCard::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 30% 5%, color-mix(in srgb, var(--storyAccent) 23%, transparent), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 24%);
  opacity:.9;
}
.storyCardPreview{
  position:relative;
  aspect-ratio:16 / 9.2 !important;
  border:1px solid color-mix(in srgb, var(--storyAccent) 42%, rgba(255,223,158,.50)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 18px color-mix(in srgb, var(--storyAccent) 26%, transparent),
    0 16px 28px rgba(0,0,0,.24) !important;
}
.storyCardPreview::after{
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  height:38%;
  background:linear-gradient(180deg, transparent, rgba(5,7,14,.72));
  pointer-events:none;
}
.storyCardNumber{
  z-index:3 !important;
  border:2px solid rgba(255,255,255,.35);
}
.storyCardEyebrow{
  color: color-mix(in srgb, var(--storyAccent) 74%, #ffffff 26%) !important;
}
.frontierStoryCards .storyCardTitle{
  color:#fff7df !important;
  text-shadow:0 2px 0 rgba(0,0,0,.35), 0 0 18px rgba(255,221,142,.10);
}
.storyCardHint{
  background:linear-gradient(180deg, color-mix(in srgb, var(--storyAccent) 40%, rgba(255,255,255,.14)), rgba(255,255,255,.08)) !important;
  border-color: color-mix(in srgb, var(--storyAccent) 46%, rgba(255,255,255,.18)) !important;
}

/* V150 Story 1 progress strip: flexible, scrollable, teacher-aware */
body.inGame .lessonProgressPanel{
  display:grid !important;
  grid-template-columns:minmax(150px,auto) minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  gap:4px 12px !important;
  align-items:center !important;
}
body.inGame .lessonProgressPanel .deskTitle{grid-column:1;grid-row:1;}
body.inGame .lessonProgressPanel .deskSub{grid-column:1;grid-row:2;min-width:0 !important;max-width:220px;}
body.inGame .lessonProgressPanel #progress,
body.inGame #progress{
  grid-column:2 !important;
  grid-row:1 / 3 !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:10px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:2px 2px 6px !important;
  scrollbar-width:thin;
  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  max-width:100% !important;
}
body.inGame #progress .badge,
body.inGame .progress .badge{
  flex:0 0 auto !important;
  scroll-snap-align:center;
}
body.inGame #progress .badge.current{
  background:rgba(37,99,235,.18) !important;
  border-color:rgba(96,165,250,.72) !important;
  box-shadow:inset 0 0 0 1px rgba(147,197,253,.24), 0 0 0 2px rgba(59,130,246,.12), 0 8px 18px rgba(15,23,42,.26) !important;
  transform:translateY(-1px);
}
body.inGame #progress .badge.current .progressNode{
  color:#eff6ff !important;
  background:rgba(29,78,216,.95) !important;
  border-color:rgba(191,219,254,.92) !important;
}
body.inGame #progress .badge.done.current{
  background:rgba(24,120,86,.32) !important;
  border-color:rgba(134,239,172,.64) !important;
}
body.inGame #progress .badge.done.current .progressNode{
  background:rgba(21,128,61,.92) !important;
  border-color:rgba(187,247,208,.92) !important;
  color:#ecfdf5 !important;
}
body.inGame #progress::-webkit-scrollbar{height:8px;}
body.inGame #progress::-webkit-scrollbar-thumb{background:rgba(211,169,88,.42);border-radius:999px;}
@media(max-width:980px){
  body.inGame .lessonProgressPanel{
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto !important;
  }
  body.inGame .lessonProgressPanel .deskTitle{grid-column:1;grid-row:1;}
  body.inGame .lessonProgressPanel .deskSub{grid-column:1;grid-row:2;max-width:none;}
  body.inGame .lessonProgressPanel #progress,
  body.inGame #progress{
    grid-column:1 !important;
    grid-row:3 !important;
    gap:8px !important;
  }
}

/* V131 Story 1 figure-rich overview scaffolds */
.figureQuad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.plotFigureCard{background:#fff;border:1px solid rgba(15,23,42,.10);border-radius:14px;padding:10px;overflow:hidden}
.plotFigureTitle{font-weight:900;font-size:13px;color:#0f172a;text-align:center;margin-bottom:6px}
.plotFigureCard .heatmapGraphic .miniHeatmap{transform:scale(.82);transform-origin:top center;margin-top:-4px}
.plotFigureCard .umapGraphic,.plotFigureCard .pcaGraphic,.plotFigureCard .volcanoGraphic{min-height:104px}
.plotFigureCard .graphicCaption{text-align:center;font-size:11.5px}
.figureSupportGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:stretch}
.supportFlowCard{display:flex;flex-direction:column;justify-content:center;gap:8px;background:#fff;border:1px solid rgba(15,23,42,.10);border-radius:14px;padding:12px}
.supportStep{background:linear-gradient(180deg,#f8fbff,#eef6ff);border:1px solid rgba(37,99,235,.12);border-radius:12px;padding:10px 12px;color:#334155}
.supportStep b{display:block;color:#0f172a;margin-bottom:2px}
.supportStep span{font-size:12.5px;line-height:1.35;display:block}
.supportArrow{text-align:center;font-size:18px;font-weight:900;color:#2563eb}
@media(max-width:720px){.figureQuad,.figureSupportGrid{grid-template-columns:1fr}}


/* V201 lighter story-lesson training surfaces and cleaner figure cards */
.modal.lessonModal.oceanLessonModal .lessonCard,
.modal.lessonModal.oceanLessonModal .scaffoldSlide,
.modal.lessonModal.oceanLessonModal #lessonPage_check .lessonCard{
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
  border:1px solid rgba(148,163,184,.22)!important;
  color:#0f172a!important;
  box-shadow:0 12px 32px rgba(15,23,42,.08)!important;
}
.modal.lessonModal.oceanLessonModal .lessonLead,
.modal.lessonModal.oceanLessonModal .slideTitle,
.modal.lessonModal.oceanLessonModal .lessonSummary,
.modal.lessonModal.oceanLessonModal .vizCardTitle,
.modal.lessonModal.oceanLessonModal .vizStoryTitle,
.modal.lessonModal.oceanLessonModal .vizPromptText,
.modal.lessonModal.oceanLessonModal .vizTable th,
.modal.lessonModal.oceanLessonModal .vizTable td,
.modal.lessonModal.oceanLessonModal .supportStep b,
.modal.lessonModal.oceanLessonModal .plotFigureTitle{
  color:#0f172a!important;
}
.modal.lessonModal.oceanLessonModal .lessonBodyText,
.modal.lessonModal.oceanLessonModal .lessonBullet,
.modal.lessonModal.oceanLessonModal .slideBody,
.modal.lessonModal.oceanLessonModal .graphicCaption,
.modal.lessonModal.oceanLessonModal .vizCardText,
.modal.lessonModal.oceanLessonModal .vizPanelNote,
.modal.lessonModal.oceanLessonModal .supportStep,
.modal.lessonModal.oceanLessonModal .miniGameHeader p,
.modal.lessonModal.oceanLessonModal .vizBarRow,
.modal.lessonModal.oceanLessonModal .vizLayerLabel,
.modal.lessonModal.oceanLessonModal .vizPromptText{
  color:#475569!important;
}
.modal.lessonModal.oceanLessonModal .conceptChips span,
.modal.lessonModal.oceanLessonModal .slideCounter{
  background:#e0f2fe!important;
  color:#075985!important;
  border:1px solid rgba(14,165,233,.22)!important;
}
.modal.lessonModal.oceanLessonModal .slideWhy{
  background:#eef6ff!important;
  border:1px solid #bfdbfe!important;
  color:#1e3a8a!important;
}
.modal.lessonModal.oceanLessonModal .slideExample,
.modal.lessonModal.oceanLessonModal .slideTakeaway{
  background:#f0fdf4!important;
  border:1px solid #bbf7d0!important;
  color:#166534!important;
}
.modal.lessonModal.oceanLessonModal .slideMiniQuiz{
  background:#fff7ed!important;
  border:1px solid #fed7aa!important;
  color:#9a3412!important;
}
.modal.lessonModal.oceanLessonModal .richGraphic,
.modal.lessonModal.oceanLessonModal .slideGraphic{
  background:linear-gradient(180deg,#fbfdff,#eef6ff)!important;
  border:1px solid rgba(59,130,246,.16)!important;
}
.modal.lessonModal.oceanLessonModal .vizCard,
.modal.lessonModal.oceanLessonModal .vizPanel,
.modal.lessonModal.oceanLessonModal .vizTableWrap,
.modal.lessonModal.oceanLessonModal .vizBars,
.modal.lessonModal.oceanLessonModal .vizClusterBoard,
.modal.lessonModal.oceanLessonModal .vizPrompt,
.modal.lessonModal.oceanLessonModal .plotFigureCard,
.modal.lessonModal.oceanLessonModal .supportFlowCard,
.modal.lessonModal.oceanLessonModal .vizNeuronStack{
  background:#ffffff!important;
  border:1px solid rgba(148,163,184,.18)!important;
  box-shadow:0 4px 14px rgba(15,23,42,.05)!important;
}
.modal.lessonModal.oceanLessonModal .vizTable th{background:#f8fafc!important}
.modal.lessonModal.oceanLessonModal .supportStep{background:linear-gradient(180deg,#f8fbff,#eef6ff)!important;border:1px solid rgba(59,130,246,.15)!important}
.modal.lessonModal.oceanLessonModal .summaryNode{background:#fff!important;border:1px solid rgba(148,163,184,.18)!important;color:#0f172a!important}
.modal.lessonModal.oceanLessonModal .svgGraphic{padding:12px 14px!important}
.modal.lessonModal.oceanLessonModal .miniSvg .svgText{fill:#334155!important}
.modal.lessonModal.oceanLessonModal .miniSvg .svgLabel{fill:#0f172a!important}
.modal.lessonModal.oceanLessonModal .miniSvg .axis{stroke:#94a3b8!important}
.modal.lessonModal.oceanLessonModal .miniSvg .arrow{stroke:#64748b!important}
.modal.lessonModal.oceanLessonModal .miniGameBox{background:#ffffff!important;border:1px solid rgba(148,163,184,.26)!important;box-shadow:0 14px 32px rgba(15,23,42,.08)!important}
.modal.lessonModal.oceanLessonModal .choice{background:#fff!important;color:#0f172a!important;border:1px solid rgba(148,163,184,.25)!important}
.modal.lessonModal.oceanLessonModal .choice:hover{background:#f8fbff!important;border-color:rgba(59,130,246,.35)!important}
.modal.lessonModal.oceanLessonModal .lessonCard,
.modal.lessonModal.oceanLessonModal .lessonCard.compact.scaffoldDeck,
.modal.lessonModal.oceanLessonModal #lessonPage_check .lessonCard,
.modal.lessonModal.oceanLessonModal .scaffoldSlide{border-radius:18px!important}


/* V202 restore teacher portrait framing after over-aggressive cropping */
.dialoguePoster.teacherPoster .posterPortrait img,
.dialoguePoster.offerPoster .posterPortrait img,
.dialoguePoster .posterSide.left .posterPortrait img,
.dialoguePoster .posterSide.right .posterPortrait img{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  padding:6px !important;
}
.dialoguePoster .posterPortrait{
  background:radial-gradient(circle at 50% 24%, #12345d, #07101f 74%) !important;
}
.dialoguePoster .posterSide.left .posterPortrait,
.dialoguePoster .posterSide.right .posterPortrait{
  align-items:flex-end !important;
  justify-content:center !important;
}


/* V15 mobile/story-card QA fixes */
.storyCardPreview{
  background:linear-gradient(180deg,#071225,#030712) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.storyCardPreview img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  padding:6px !important;
}
.mobileControls{
  display:none;
  position:fixed;
  left:calc(12px + env(safe-area-inset-left));
  right:calc(12px + env(safe-area-inset-right));
  bottom:calc(74px + env(safe-area-inset-bottom));
  z-index:1180;
  pointer-events:none;
  justify-content:space-between;
  align-items:flex-end;
}
.mobileDpad{
  width:138px;
  height:138px;
  position:relative;
  pointer-events:auto;
}
.mobileBtn,.mobileInteract{
  border:1px solid rgba(255,217,120,.72);
  background:linear-gradient(180deg,rgba(52,31,13,.92),rgba(9,11,19,.90));
  color:#fff3bf;
  box-shadow:0 10px 24px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
  user-select:none;
}
.mobileBtn{
  position:absolute;
  width:48px;
  height:48px;
  border-radius:16px;
  font-size:20px;
  font-weight:1000;
}
.mobileBtn.active,.mobileInteract:active{filter:brightness(1.22);transform:translateY(1px)}
.mobileUp{left:45px;top:0}
.mobileLeft{left:0;top:45px}
.mobileDown{left:45px;top:90px}
.mobileRight{left:90px;top:45px}
.mobileInteract{
  pointer-events:auto;
  width:76px;
  height:76px;
  border-radius:999px;
  font-size:27px;
  font-weight:1000;
}
@media(max-width:820px), (hover:none) and (pointer:coarse){
  body.inGame .mobileControls{display:flex;}
  body.inGame .wrap{height:100dvh;padding:4px;}
  body.inGame .hud{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:6px;}
  body.inGame .hud .box{padding:6px 8px;border-radius:12px;}
  body.inGame .hud .box:nth-child(3){display:none;}
  body.inGame .value{font-size:13px;}
  body.inGame .label{font-size:10px;}
  body.inGame .gameGrid{grid-template-columns:1fr !important;gap:6px;}
  body.inGame .gameShell{padding:3px;}
  body.inGame #canvas{max-height:calc(100dvh - 220px);border-width:2px;border-radius:16px;}
  body.inGame .storySidePanel{max-height:24dvh;overflow:auto;padding:8px;border-radius:16px;}
  body.inGame .storySidePanel .miniPanel,
  body.inGame .storySidePanel .btnRow{display:none;}
  body.inGame .storySidePanel h2{font-size:18px;margin-bottom:3px;}
  body.inGame .storySidePanel p,
  body.inGame .feedback{font-size:12px;line-height:1.25;min-height:0;}
  body.inGame .objectiveCard,
  body.inGame .nearbyCard{padding:7px 9px;margin-top:6px;min-height:0;border-radius:12px;}
  body.inGame .objectiveCard .desc,
  body.inGame .nearbyCard .desc{font-size:11px;line-height:1.25;}
  body.inGame .storyBottomDesk{display:none !important;}
  body.inGame .musicControls{left:calc(10px + env(safe-area-inset-left));right:auto;bottom:calc(8px + env(safe-area-inset-bottom));}
  .musicControls{touch-action:manipulation;}
  .musicVolume{touch-action:pan-x;}
}
@media(max-width:560px){
  .frontierStoryCards{grid-template-columns:1fr !important;}
  .storyCardPreview{aspect-ratio:16/10 !important;}
  .storyCardPreview img{padding:4px !important;}
}

/* V20 iPad / phone home-page scroll fix: keep desktop full-screen selector unchanged */
@media (max-width: 1180px), (hover:none) and (pointer:coarse){
  html,
  body{
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  body.frontierMenuMode{
    height:auto !important;
    min-height:100dvh !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    touch-action:pan-y !important;
  }
  body.frontierMenuMode .frontierWrap{
    width:100% !important;
    min-height:100dvh !important;
    height:auto !important;
    overflow:visible !important;
    padding:0 !important;
  }
  body.frontierMenuMode .frontierMenuScreen{
    height:auto !important;
    min-height:100dvh !important;
    overflow:visible !important;
    padding:0 !important;
    touch-action:pan-y !important;
  }
  body.frontierMenuMode .frontierMenuShell{
    height:auto !important;
    min-height:100dvh !important;
    overflow:visible !important;
    padding:10px max(10px, env(safe-area-inset-left)) calc(16px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right)) !important;
  }
  body.frontierMenuMode .frontierMenuInner{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    width:min(100%, 900px) !important;
    margin:0 auto !important;
    max-height:none !important;
    min-height:auto !important;
    overflow:visible !important;
    gap:12px !important;
    padding:14px 12px 18px !important;
  }
  body.frontierMenuMode .frontierStoryCards,
  body.frontierMenuMode .frontierRoster{
    overflow:visible !important;
  }
  body.frontierMenuMode .frontierStoryCards{
    grid-template-columns:1fr !important;
  }
  body.frontierMenuMode .frontierRoster{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
  body.frontierMenuMode .frontierStoryCards .frontierStoryCard,
  body.frontierMenuMode .frontierRoster .frontierHeroCard{
    min-height:auto !important;
  }
  body.frontierMenuMode .menuBottomBar{
    position:relative !important;
    bottom:auto !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding-bottom:calc(10px + env(safe-area-inset-bottom)) !important;
  }
}
@media (max-width: 640px){
  body.frontierMenuMode .frontierRoster{
    grid-template-columns:1fr !important;
  }
}


/* Auth + progress tracking layer */
.authScreen{
  position:fixed;
  inset:0;
  z-index:5000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:radial-gradient(circle at 50% 20%,rgba(38,99,235,.24),rgba(2,6,23,.96) 58%),linear-gradient(180deg,#07101f,#020617);
  color:#f8fafc;
}
.authScreen.hidden{display:none!important}
body.authLocked .wrap{filter:blur(3px);pointer-events:none;user-select:none}
.authCard{
  width:min(480px,100%);
  border:1px solid rgba(252,211,77,.38);
  border-radius:24px;
  padding:24px;
  background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(2,6,23,.96));
  box-shadow:0 30px 80px rgba(0,0,0,.46), inset 0 0 0 1px rgba(255,255,255,.04);
}
.authEyebrow{font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#facc15;font-size:12px;margin-bottom:8px}
.authCard h1{font-family:Georgia,serif;font-size:34px;margin:0 0 8px;color:#fde68a}
.authCard p{color:#cbd5e1;line-height:1.45;margin:0 0 18px}
.authForm{display:grid;gap:13px}
.authForm label{font-size:13px;font-weight:900;color:#e2e8f0;display:grid;gap:6px}
.authForm input{width:100%;box-sizing:border-box;border-radius:14px;border:1px solid rgba(148,163,184,.35);background:#f8fafc;color:#0f172a;padding:13px 14px;font-size:16px;font-weight:700;outline:none}
.authForm input:focus{border-color:#facc15;box-shadow:0 0 0 3px rgba(250,204,21,.18)}
.authStatus{min-height:22px;margin-top:12px;color:#fde68a;font-weight:800;font-size:13px}
.authCredit{
  margin:16px 0 0;
  padding-top:14px;
  border-top:1px solid rgba(148,163,184,.22);
  color:#94a3b8;
  font-size:12px;
  line-height:1.45;
  text-align:center;
}

.authCredit a{
  color:#fde68a;
  font-weight:900;
  text-decoration:none;
}

.authCredit a:hover,
.authCredit a:focus{
  text-decoration:underline;
}

.authCard .authSignup{
  margin:12px 0 0;
  color:#cbd5e1;
  font-size:14px;
  line-height:1.45;
  text-align:center;
}

.authCard .authSignup a{
  color:#fde68a;
  font-weight:900;
  text-decoration:underline;
  text-underline-offset:3px;
}

.authCard .authSignup a:hover,
.authCard .authSignup a:focus{
  color:#facc15;
}
.frontierStoryCard.locked{opacity:.46;filter:grayscale(.65);cursor:not-allowed!important}
.frontierStoryCard.locked .storyCardHint{background:#475569!important;color:#e2e8f0!important}
.authSessionBar{position:fixed;right:calc(12px + env(safe-area-inset-right));top:calc(10px + env(safe-area-inset-top));z-index:1200;display:flex;gap:8px;align-items:center;background:rgba(2,6,23,.72);color:#f8fafc;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 8px 6px 12px;backdrop-filter:blur(8px);font-size:12px;font-weight:800}
.authSessionBar button{border:0;border-radius:999px;padding:5px 9px;background:#facc15;color:#422006;font-weight:900}
@media(max-width:820px), (hover:none) and (pointer:coarse){.authCard{padding:20px;border-radius:20px}.authCard h1{font-size:28px}.authSessionBar{font-size:11px;top:auto;bottom:calc(8px + env(safe-area-inset-bottom));right:calc(10px + env(safe-area-inset-right))}}

/* V21 Story 1 readability + randomized mission layout polish */
.modal.lessonModal.oceanLessonModal .miniGameBox{background:linear-gradient(180deg,#ffffff,#f8fbff)!important;border:1px solid rgba(148,163,184,.26)!important;color:#0f172a!important;box-shadow:0 16px 34px rgba(15,23,42,.10)!important;}
.modal.lessonModal.oceanLessonModal .miniGameEyebrow{color:#92400e!important;letter-spacing:.10em!important;}
.modal.lessonModal.oceanLessonModal .miniGameHeader h3{color:#0f172a!important;}
.modal.lessonModal.oceanLessonModal .miniGameHeader p{color:#334155!important;}
.modal.lessonModal.oceanLessonModal .miniGameStatus{background:#dbeafe!important;color:#1d4ed8!important;border-color:#93c5fd!important;}
.modal.lessonModal.oceanLessonModal .miniGameStatus.done{background:#dcfce7!important;color:#166534!important;border-color:#86efac!important;}
.modal.lessonModal.oceanLessonModal .miniGameTip{background:#fff7ed!important;border:1px solid #fed7aa!important;color:#7c2d12!important;}
.modal.lessonModal.oceanLessonModal .miniSlots,.modal.lessonModal.oceanLessonModal .miniTokenBank,.modal.lessonModal.oceanLessonModal .miniChoiceGrid,.modal.lessonModal.oceanLessonModal .miniBinGrid{background:#f8fafc!important;border:1px solid rgba(148,163,184,.22)!important;}
.modal.lessonModal.oceanLessonModal .miniSlot{background:#fff!important;color:#334155!important;border:1px dashed #f59e0b!important;}
.modal.lessonModal.oceanLessonModal .miniSlot span{background:#f59e0b!important;color:#111827!important;}
.modal.lessonModal.oceanLessonModal .miniSlot.filled{background:#eff6ff!important;color:#0f172a!important;border-style:solid!important;border-color:#60a5fa!important;}
.modal.lessonModal.oceanLessonModal .miniToken,.modal.lessonModal.oceanLessonModal .miniChoice,.modal.lessonModal.oceanLessonModal .miniBinCard{background:linear-gradient(180deg,#ffffff,#f8fafc)!important;color:#0f172a!important;border:1px solid rgba(148,163,184,.32)!important;box-shadow:0 10px 22px rgba(15,23,42,.09)!important;}
.modal.lessonModal.oceanLessonModal .miniToken:hover,.modal.lessonModal.oceanLessonModal .miniChoice:hover{border-color:#2563eb!important;box-shadow:0 12px 24px rgba(37,99,235,.14)!important;}
.modal.lessonModal.oceanLessonModal .miniToken b,.modal.lessonModal.oceanLessonModal .miniChoice b,.modal.lessonModal.oceanLessonModal .miniBinCard b{color:#0f172a!important;}
.modal.lessonModal.oceanLessonModal .miniToken small,.modal.lessonModal.oceanLessonModal .miniChoice small,.modal.lessonModal.oceanLessonModal .miniBinCard small{color:#475569!important;}
.modal.lessonModal.oceanLessonModal .miniChoice.picked{background:#dcfce7!important;border-color:#22c55e!important;}
.modal.lessonModal.oceanLessonModal .miniBinButtons button{background:#eef2ff!important;color:#1e293b!important;border:1px solid #c7d2fe!important;}
.modal.lessonModal.oceanLessonModal .miniBinButtons button.active{background:#2563eb!important;color:#ffffff!important;border-color:#2563eb!important;}
.modal.lessonModal.oceanLessonModal .miniEmpty{background:#f1f5f9!important;color:#475569!important;}
.modal.lessonModal.oceanLessonModal .miniFeedback.good{background:#dcfce7!important;color:#166534!important;border:1px solid #86efac!important;}
.modal.lessonModal.oceanLessonModal .miniFeedback.bad{background:#fee2e2!important;color:#991b1b!important;border:1px solid #fecaca!important;}


/* V1.4 lesson/modal/mobile polish */
.scaffoldControls .btn.disabled,
.scaffoldControls .btn:disabled{
  opacity:.55!important;
  cursor:not-allowed!important;
  transform:none!important;
  filter:grayscale(.15);
}
.modal.lessonModal.oceanLessonModal .modalBox::before{
  top:12px!important;
  left:auto!important;
  right:18px!important;
  transform:none!important;
  width:54px!important;
  height:54px!important;
  border-radius:999px!important;
  font-size:28px!important;
  z-index:1!important;
  opacity:.96!important;
}
.modal.lessonModal.oceanLessonModal .modalGrid,
.modal.lessonModal.oceanLessonModal .modalBox h2,
.modal.lessonModal.oceanLessonModal #modalBody,
.modal.lessonModal.oceanLessonModal #modalContent{
  position:relative;
  z-index:2;
}
.modal.lessonModal.oceanLessonModal .lessonCanvasWrap{
  max-width:680px!important;
  overflow:visible!important;
}
.modal.lessonModal.oceanLessonModal .lessonCanvasWrap canvas{
  display:block!important;
  height:auto!important;
  min-height:320px!important;
  object-fit:contain!important;
  background:#f8fafc!important;
}
.modal.lessonModal.oceanLessonModal .plotFigureCard .umapGraphic,
.modal.lessonModal.oceanLessonModal .umapGraphic{
  min-height:165px!important;
  overflow:visible!important;
}
.modal.lessonModal.oceanLessonModal .richGraphic,
.modal.lessonModal.oceanLessonModal .slideGraphic,
.modal.lessonModal.oceanLessonModal .plotFigureCard{
  overflow:visible!important;
}
.gameShell{position:relative!important;}
@media(max-width:820px), (hover:none) and (pointer:coarse){
  body.inGame .mobileControls{
    position:absolute!important;
    left:14px!important;
    right:14px!important;
    bottom:14px!important;
    z-index:15!important;
    display:flex!important;
    pointer-events:none!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
  }
  body.inGame .mobileDpad{
    width:118px!important;
    height:118px!important;
    transform:scale(.92);
    transform-origin:left bottom;
  }
  body.inGame .mobileBtn{
    width:42px!important;
    height:42px!important;
    border-radius:14px!important;
    font-size:18px!important;
    background:linear-gradient(180deg,rgba(15,23,42,.72),rgba(2,6,23,.72))!important;
    backdrop-filter:blur(5px)!important;
  }
  body.inGame .mobileUp{left:38px!important;top:0!important}
  body.inGame .mobileLeft{left:0!important;top:38px!important}
  body.inGame .mobileDown{left:38px!important;top:76px!important}
  body.inGame .mobileRight{left:76px!important;top:38px!important}
  body.inGame .mobileInteract{
    width:64px!important;
    height:64px!important;
    font-size:24px!important;
    background:linear-gradient(180deg,rgba(245,158,11,.88),rgba(120,53,15,.82))!important;
    box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.16)!important;
  }
}
@media(max-width:760px){
  .modal.lessonModal.oceanLessonModal .modalBox::before{right:12px!important;top:8px!important;width:44px!important;height:44px!important;font-size:23px!important;}
}

/* V1.5 visual/layout polish */
.modal.lessonModal.oceanLessonModal .modalBox::before{
  right:96px!important;
  top:8px!important;
  z-index:0!important;
  opacity:.82!important;
}
.modal.lessonModal.oceanLessonModal .modalBox h2{
  padding-right:145px!important;
}
.modal.lessonModal.oceanLessonModal .lessonCanvasWrap{
  width:min(100%,760px)!important;
  max-width:760px!important;
  overflow:visible!important;
}
.modal.lessonModal.oceanLessonModal .lessonCanvasWrap canvas{
  width:100%!important;
  max-width:760px!important;
  aspect-ratio:2 / 1!important;
  height:auto!important;
  min-height:320px!important;
  overflow:visible!important;
}
.modal.lessonModal.oceanLessonModal #lessonPage_visual .lessonCard{
  overflow:visible!important;
}
@media(max-width:760px){
  .modal.lessonModal.oceanLessonModal .modalBox::before{display:none!important;}
  .modal.lessonModal.oceanLessonModal .modalBox h2{padding-right:0!important;}
  .modal.lessonModal.oceanLessonModal .lessonCanvasWrap canvas{min-height:220px!important;}
}

/* V1.6 mini-check answer + Explore visual readability */
.modal.lessonModal.oceanLessonModal .slideMiniQuiz{
  display:block!important;
}
.modal.lessonModal.oceanLessonModal .miniAnswerBtn{
  margin-top:10px;
  border:1px solid rgba(37,99,235,.35);
  background:linear-gradient(180deg,#eff6ff,#dbeafe);
  color:#1d4ed8;
  border-radius:999px;
  padding:7px 12px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 5px 14px rgba(37,99,235,.12);
}
.modal.lessonModal.oceanLessonModal .miniAnswerBtn:hover{filter:brightness(1.03)}
.modal.lessonModal.oceanLessonModal .miniAnswerBox{
  margin-top:9px;
  padding:10px 12px;
  background:#ecfdf5;
  border:1px solid #86efac;
  color:#14532d;
  border-radius:12px;
  line-height:1.45;
}
.modal.lessonModal.oceanLessonModal .lessonCanvasWrap{
  width:min(100%,820px)!important;
  max-width:820px!important;
}
.modal.lessonModal.oceanLessonModal .lessonCanvasWrap canvas{
  width:100%!important;
  max-width:820px!important;
  min-height:320px!important;
  image-rendering:auto!important;
}
@media(max-width:760px){
  .modal.lessonModal.oceanLessonModal .lessonCanvasWrap canvas{min-height:230px!important;}
}

/* V1.7 scaffold review navigation polish */
.scaffoldControls .btn[aria-disabled="false"]{
  opacity:1!important;
  cursor:pointer!important;
  filter:none!important;
}
.scaffoldControls .btn[aria-disabled="true"]{
  opacity:.55!important;
  cursor:not-allowed!important;
}


/* V1.9 hotfix: mini-check answer visibility and last-step next-disabled styling */
.slideMiniQuiz .miniAnswerBtn{
  margin-top:10px;
  border:1px solid rgba(37,99,235,.35);
  background:linear-gradient(180deg,#dbeafe,#bfdbfe);
  color:#1e3a8a;
  font-weight:900;
  border-radius:12px;
  padding:8px 12px;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(37,99,235,.12);
}
.slideMiniQuiz .miniAnswerBtn:hover{filter:brightness(1.03)}
.slideMiniQuiz .miniAnswerBox{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:#eff6ff;
  border:1px solid #93c5fd;
  color:#1e3a8a;
  line-height:1.35;
}
.scaffoldControls button:disabled,
.scaffoldControls button.disabled{
  opacity:.55;
  filter:grayscale(.25);
  cursor:not-allowed;
  transform:none !important;
}


/* V1.10 mini-check answer button: compact, visible, inline with each mini-check */
.modal.lessonModal.oceanLessonModal .slideMiniQuiz{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  gap:8px 10px!important;
  align-items:center!important;
}
.modal.lessonModal.oceanLessonModal .slideMiniQuiz .miniCheckPrompt{
  min-width:0!important;
}
.modal.lessonModal.oceanLessonModal .miniAnswerBtnSmall,
.modal.lessonModal.oceanLessonModal .slideMiniQuiz .miniAnswerBtn{
  margin:0!important;
  padding:5px 10px!important;
  border-radius:999px!important;
  font-size:12px!important;
  line-height:1!important;
  white-space:nowrap!important;
  border:1px solid rgba(37,99,235,.45)!important;
  background:linear-gradient(180deg,#eff6ff,#bfdbfe)!important;
  color:#1d4ed8!important;
  font-weight:900!important;
  box-shadow:0 5px 14px rgba(37,99,235,.14)!important;
}
.modal.lessonModal.oceanLessonModal .slideMiniQuiz .miniAnswerBox{
  grid-column:1 / -1!important;
  margin-top:2px!important;
}
.scaffoldControls button:disabled,
.scaffoldControls button.disabled{
  opacity:.55!important;
  cursor:not-allowed!important;
  filter:grayscale(.25)!important;
}

/* V1.11 mini-check layout: keep label/question on the left and show a small answer button on the right */
.modal.lessonModal.oceanLessonModal .slideMiniQuiz,
.slideMiniQuiz{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:8px 10px!important;
  align-items:center!important;
}
.slideMiniQuiz .miniCheckMain{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:4px 6px!important;
  align-items:baseline!important;
  min-width:0!important;
  text-align:left!important;
}
.slideMiniQuiz .miniCheckLabel{
  flex:0 0 auto!important;
  font-weight:900!important;
  color:#9a3412!important;
}
.slideMiniQuiz .miniCheckQuestion{
  flex:1 1 auto!important;
  min-width:180px!important;
  color:#9a3412!important;
}
.slideMiniQuiz .miniAnswerBtn,
.modal.lessonModal.oceanLessonModal .slideMiniQuiz .miniAnswerBtn{
  justify-self:end!important;
  align-self:center!important;
  margin:0!important;
  padding:5px 10px!important;
  border-radius:999px!important;
  font-size:12px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.slideMiniQuiz .miniAnswerBox{
  grid-column:1 / -1!important;
  margin-top:4px!important;
}
@media(max-width:680px){
  .modal.lessonModal.oceanLessonModal .slideMiniQuiz,
  .slideMiniQuiz{grid-template-columns:1fr!important;}
  .slideMiniQuiz .miniAnswerBtn{justify-self:start!important;}
}


/* V1.12 mini-check layout + answer button final fix */
.slideMiniQuiz,
.modal.lessonModal.oceanLessonModal .slideMiniQuiz{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  column-gap:12px !important;
  row-gap:8px !important;
  text-align:left !important;
}
.slideMiniQuiz .miniCheckPrompt,
.modal.lessonModal.oceanLessonModal .slideMiniQuiz .miniCheckPrompt{
  display:inline !important;
  min-width:0 !important;
  color:#9a3412 !important;
  text-align:left !important;
  justify-self:start !important;
}
.slideMiniQuiz .miniCheckPrompt b,
.slideMiniQuiz .miniCheckLabel{
  color:#9a3412 !important;
  font-weight:900 !important;
  margin-right:4px !important;
}
.slideMiniQuiz .miniCheckQuestion{
  color:#9a3412 !important;
  font-weight:650 !important;
}
.slideMiniQuiz .miniAnswerBtn,
.modal.lessonModal.oceanLessonModal .slideMiniQuiz .miniAnswerBtn{
  justify-self:end !important;
  align-self:center !important;
  white-space:nowrap !important;
  border:1px solid rgba(234,88,12,.35) !important;
  background:#fff7ed !important;
  color:#9a3412 !important;
  border-radius:999px !important;
  padding:7px 10px !important;
  font-size:12px !important;
  font-weight:900 !important;
  cursor:pointer !important;
  box-shadow:0 6px 14px rgba(15,23,42,.08) !important;
}
.slideMiniQuiz .miniAnswerBtn:hover,
.modal.lessonModal.oceanLessonModal .slideMiniQuiz .miniAnswerBtn:hover{
  background:#ffedd5 !important;
  transform:translateY(-1px);
}
.slideMiniQuiz .miniAnswerBox,
.modal.lessonModal.oceanLessonModal .slideMiniQuiz .miniAnswerBox{
  grid-column:1 / -1 !important;
  margin-top:2px !important;
  background:#fff !important;
  border:1px solid #fed7aa !important;
  color:#7c2d12 !important;
  border-radius:12px !important;
  padding:10px 12px !important;
  font-size:13px !important;
  line-height:1.45 !important;
  text-align:left !important;
}
@media(max-width:680px){
  .slideMiniQuiz,
  .modal.lessonModal.oceanLessonModal .slideMiniQuiz{
    grid-template-columns:1fr !important;
  }
  .slideMiniQuiz .miniAnswerBtn,
  .modal.lessonModal.oceanLessonModal .slideMiniQuiz .miniAnswerBtn{
    justify-self:start !important;
  }
}


/* V1.13 direct scaffold mini-check layout */
.slideMiniQuiz.miniCheckWithAnswer{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:10px 14px !important;
  text-align:left !important;
  justify-content:stretch !important;
}
.slideMiniQuiz.miniCheckWithAnswer .miniCheckPrompt{
  display:inline !important;
  text-align:left !important;
  justify-self:start !important;
  color:#9a3412 !important;
  line-height:1.35 !important;
  min-width:0 !important;
}
.slideMiniQuiz.miniCheckWithAnswer .miniCheckQuestion{
  margin-left:6px !important;
  white-space:normal !important;
  color:#9a3412 !important;
  font-weight:700 !important;
}
.slideMiniQuiz.miniCheckWithAnswer .miniAnswerBtn{
  justify-self:end !important;
  border:1px solid rgba(37,99,235,.32) !important;
  background:linear-gradient(180deg,#eff6ff,#dbeafe) !important;
  color:#1d4ed8 !important;
  border-radius:999px !important;
  padding:7px 12px !important;
  font-size:12px !important;
  font-weight:900 !important;
  cursor:pointer !important;
  box-shadow:0 6px 14px rgba(37,99,235,.12) !important;
}
.slideMiniQuiz.miniCheckWithAnswer .miniAnswerBox{
  grid-column:1 / -1 !important;
  margin-top:6px !important;
  padding:10px 12px !important;
  border-radius:14px !important;
  border:1px solid rgba(16,185,129,.28) !important;
  background:#ecfdf5 !important;
  color:#064e3b !important;
  text-align:left !important;
  line-height:1.45 !important;
}
@media (max-width: 700px){
  .slideMiniQuiz.miniCheckWithAnswer{
    grid-template-columns:1fr !important;
  }
  .slideMiniQuiz.miniCheckWithAnswer .miniAnswerBtn{
    justify-self:start !important;
  }
}


/* V1.14 mini-check answer layout + reveal */
.slideMiniQuiz.miniCheckV114,
.modal.lessonModal.oceanLessonModal .slideMiniQuiz.miniCheckV114{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:10px 14px !important;
  text-align:left !important;
}
.slideMiniQuiz.miniCheckV114 .miniCheckPrompt,
.modal.lessonModal.oceanLessonModal .slideMiniQuiz.miniCheckV114 .miniCheckPrompt{
  display:flex !important;
  align-items:baseline !important;
  justify-content:flex-start !important;
  gap:10px !important;
  min-width:0 !important;
  text-align:left !important;
  white-space:normal !important;
}
.slideMiniQuiz.miniCheckV114 .miniCheckQuestion,
.modal.lessonModal.oceanLessonModal .slideMiniQuiz.miniCheckV114 .miniCheckQuestion{
  display:inline !important;
  margin:0 !important;
  color:#9a3412 !important;
  font-weight:800 !important;
  text-align:left !important;
  white-space:normal !important;
}
.slideMiniQuiz.miniCheckV114 .miniAnswerBtn,
.modal.lessonModal.oceanLessonModal .slideMiniQuiz.miniCheckV114 .miniAnswerBtn{
  justify-self:end !important;
  align-self:center !important;
  border:1px solid rgba(234,88,12,.32) !important;
  background:linear-gradient(180deg,#fff7ed,#ffedd5) !important;
  color:#9a3412 !important;
  border-radius:999px !important;
  padding:8px 14px !important;
  font-size:13px !important;
  font-weight:900 !important;
  cursor:pointer !important;
}
.slideMiniQuiz.miniCheckV114 .miniAnswerBox,
.modal.lessonModal.oceanLessonModal .slideMiniQuiz.miniCheckV114 .miniAnswerBox{
  grid-column:1 / -1 !important;
  margin-top:4px !important;
  padding:11px 13px !important;
  border-radius:14px !important;
  border:1px solid rgba(16,185,129,.32) !important;
  background:#ecfdf5 !important;
  color:#064e3b !important;
  font-size:14px !important;
  line-height:1.45 !important;
  text-align:left !important;
  box-shadow:0 8px 18px rgba(16,185,129,.08) !important;
}
.slideMiniQuiz.miniCheckV114 .miniAnswerBox[hidden]{display:none !important;}
@media (max-width:700px){
  .slideMiniQuiz.miniCheckV114{grid-template-columns:1fr !important;}
  .slideMiniQuiz.miniCheckV114 .miniAnswerBtn{justify-self:start !important;}
}


/* V1.15 mini-check answer button hard layout */
.slideMiniQuiz.miniCheckV115,
.modal.lessonModal.oceanLessonModal .slideMiniQuiz.miniCheckV115{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:10px 14px !important;
  align-items:center !important;
  background:#fff7ed !important;
  border:1px solid #fed7aa !important;
  color:#9a3412 !important;
  padding:10px 12px !important;
  border-radius:14px !important;
}
.miniCheckMainV115{display:flex;gap:8px;align-items:baseline;min-width:0;flex-wrap:wrap;}
.miniCheckLabelV115{font-weight:900;color:#9a3412;white-space:nowrap;}
.miniCheckQuestionV115{color:#9a3412;font-weight:650;line-height:1.35;}
.miniAnswerBtnV115{
  border:1px solid #fb923c !important;
  background:linear-gradient(180deg,#fff7ed,#ffedd5) !important;
  color:#9a3412 !important;
  font-weight:900 !important;
  border-radius:999px !important;
  padding:6px 10px !important;
  font-size:12px !important;
  cursor:pointer !important;
  white-space:nowrap !important;
  justify-self:end !important;
  box-shadow:0 4px 10px rgba(154,52,18,.12) !important;
}
.miniAnswerBtnV115:hover{filter:brightness(1.03);transform:translateY(-1px);}
.miniAnswerBoxV115{
  grid-column:1 / -1 !important;
  background:#ecfdf5 !important;
  border:1px solid #86efac !important;
  color:#065f46 !important;
  padding:9px 11px !important;
  border-radius:12px !important;
  font-weight:650 !important;
  line-height:1.4 !important;
}
.miniAnswerBoxV115[hidden]{display:none !important;}
@media(max-width:720px){
  .slideMiniQuiz.miniCheckV115{grid-template-columns:1fr !important;}
  .miniAnswerBtnV115{justify-self:start !important;}
}

/* V1.16 standalone mini-check answer button + login music guard */
.slideMiniQuiz.miniCheckStandaloneV116,
.modal.lessonModal.oceanLessonModal .slideMiniQuiz.miniCheckStandaloneV116{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:10px 14px !important;
  align-items:center !important;
  background:#fff7ed !important;
  border:1px solid #fed7aa !important;
  color:#9a3412 !important;
  padding:10px 12px !important;
  border-radius:14px !important;
}
.miniCheckStandaloneMain{display:flex;gap:8px;align-items:baseline;min-width:0;flex-wrap:wrap;}
.miniCheckStandaloneLabel{font-weight:900;color:#9a3412;white-space:nowrap;}
.miniCheckStandaloneQuestion{color:#9a3412;font-weight:650;line-height:1.35;}
.miniAnswerBtnV116{
  border:1px solid #fb923c !important;
  background:linear-gradient(180deg,#fff7ed,#ffedd5) !important;
  color:#9a3412 !important;
  font-weight:900 !important;
  border-radius:999px !important;
  padding:6px 11px !important;
  font-size:12px !important;
  cursor:pointer !important;
  white-space:nowrap !important;
  justify-self:end !important;
  box-shadow:0 5px 12px rgba(154,52,18,.14) !important;
}
.miniAnswerBtnV116:hover{filter:brightness(1.03);transform:translateY(-1px);}
.miniAnswerBoxV116{
  grid-column:1 / -1 !important;
  background:#ecfdf5 !important;
  border:1px solid #86efac !important;
  color:#065f46 !important;
  padding:9px 11px !important;
  border-radius:12px !important;
  font-weight:650 !important;
  line-height:1.4 !important;
  margin-top:2px !important;
}
.miniAnswerBoxV116[hidden]{display:none !important;}
body.authLocked #musicControls{opacity:.55;}
@media(max-width:720px){
  .slideMiniQuiz.miniCheckStandaloneV116{grid-template-columns:1fr !important;}
  .miniAnswerBtnV116{justify-self:start !important;}
}

/* v1.17 mini-check answer button: one-click reveal and stable layout */
.slideMiniQuiz.miniCheckStandaloneV117,
.modal.lessonModal.oceanLessonModal .slideMiniQuiz.miniCheckStandaloneV117{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:10px 14px !important;
  align-items:center !important;
  padding:13px 14px !important;
  background:#fff7ed !important;
  border:1px solid #fed7aa !important;
  border-radius:14px !important;
  color:#9a3412 !important;
}
.miniCheckStandaloneMainV117{display:flex;gap:8px;align-items:baseline;min-width:0;flex-wrap:wrap;}
.miniCheckStandaloneLabelV117{font-weight:900;color:#9a3412;white-space:nowrap;}
.miniCheckStandaloneQuestionV117{color:#9a3412;font-weight:650;line-height:1.35;}
.miniAnswerBtnV117{
  border:1px solid #fdba74 !important;
  background:#fff !important;
  color:#9a3412 !important;
  border-radius:999px !important;
  padding:7px 11px !important;
  font-weight:900 !important;
  font-size:12px !important;
  cursor:pointer !important;
  box-shadow:0 4px 12px rgba(154,52,18,.12) !important;
  white-space:nowrap !important;
  touch-action:manipulation !important;
  pointer-events:auto !important;
}
.miniAnswerBtnV117:hover{filter:brightness(1.03);transform:translateY(-1px);}
.miniAnswerBoxV117{
  grid-column:1 / -1 !important;
  display:block;
  margin-top:2px !important;
  padding:10px 12px !important;
  border-radius:12px !important;
  border:1px solid #86efac !important;
  background:#f0fdf4 !important;
  color:#14532d !important;
  font-weight:700 !important;
  line-height:1.4 !important;
}
.miniAnswerBoxV117[hidden]{display:none !important;}
@media(max-width:720px){
  .slideMiniQuiz.miniCheckStandaloneV117{grid-template-columns:1fr !important;}
  .miniAnswerBtnV117{justify-self:start !important;}
}

/* V118 cleanup: simplify lesson/dialogue framing so the opening messages do not stack too many boxes */
.modal.dialoguePosterModal .modalBox{
  background:linear-gradient(180deg,#06080d,#0a0e16 62%,#06080d)!important;
  border:1px solid rgba(211,169,88,.34)!important;
  border-radius:16px!important;
  box-shadow:0 26px 70px rgba(0,0,0,.58)!important;
  padding:12px 14px 16px!important;
}
.dialoguePoster{
  background:linear-gradient(180deg,#090c13,#06080d 62%,#07090e)!important;
  border:1px solid rgba(211,169,88,.26)!important;
  border-radius:16px!important;
  box-shadow:none!important;
  padding:14px 16px 16px!important;
}
.dialoguePoster::before,
.dialoguePoster::after{
  display:none!important;
}
.posterTitleBlock{
  margin:0 auto 12px!important;
  padding-bottom:10px!important;
  border-bottom:1px solid rgba(211,169,88,.20);
}
.posterTitle{
  display:block!important;
  min-width:0!important;
  width:100%!important;
  padding:0!important;
  background:transparent!important;
  border:none!important;
  border-radius:0!important;
  box-shadow:none!important;
  text-shadow:0 3px 10px rgba(0,0,0,.45)!important;
}
.posterSubtitle{
  margin-top:6px!important;
}
.posterScene{
  margin:0 8px 12px!important;
  border:1px solid rgba(211,169,88,.24)!important;
  border-radius:12px!important;
  box-shadow:none!important;
}
.posterBody{
  gap:14px!important;
}
.posterSide,
.posterDialogue{
  box-shadow:none!important;
}
.posterSide{
  background:linear-gradient(180deg,rgba(14,17,25,.94),rgba(9,12,18,.96))!important;
  border:1px solid rgba(211,169,88,.22)!important;
  border-radius:14px!important;
}
.posterDialogue{
  background:linear-gradient(180deg,rgba(21,18,14,.96),rgba(10,12,18,.96))!important;
  border:1px solid rgba(211,169,88,.20)!important;
  border-radius:14px!important;
}
.posterPortrait{
  border-width:1px!important;
  box-shadow:none!important;
}
.posterBubble{
  box-shadow:0 10px 22px rgba(0,0,0,.20)!important;
}
.posterFooter{
  margin-top:12px!important;
  padding:8px 10px 0!important;
  border-top:1px solid rgba(211,169,88,.16);
}
@media(max-width:900px){
  .posterTitleBlock{padding-bottom:8px!important}
  .posterScene{margin:0 0 12px!important}
}

/* Story 1 Life Examples tab (teacher modal) */
.lifeExampleCard{
  overflow:hidden;
  background:linear-gradient(180deg,#fffaf0,#f8ecd2)!important;
  border:1px solid rgba(154,92,27,.28)!important;
  box-shadow:0 16px 34px rgba(80,43,12,.12), inset 0 1px 0 rgba(255,255,255,.72)!important;
}
.lifeExampleHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.lifeExampleTitle{color:#4b2e0d!important;margin-bottom:3px!important;}
.lifeExampleConcept{color:#1e4e8c;font-weight:900;font-size:14px;letter-spacing:.02em;}
.lifeExampleBadge{
  flex:0 0 auto;
  padding:7px 11px;
  border-radius:999px;
  color:#532b08;
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
  background:linear-gradient(180deg,#ffe7a6,#f4bd45);
  border:1px solid rgba(120,69,10,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.lifeExampleImageFrame{
  background:linear-gradient(180deg,#fff7e4,#edd9b1);
  border:1px solid rgba(126,71,16,.32);
  border-radius:18px;
  padding:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 10px 24px rgba(68,38,10,.12);
}
.lifeExampleImage{
  display:block;
  width:100%;
  height:auto;
  border-radius:13px;
  object-fit:contain;
  background:#fff4dc;
}
.lifeExampleSummary,
.lifeExampleTeacherNote{
  margin-top:12px;
  padding:10px 12px;
  border-radius:14px;
  font-size:14px;
  line-height:1.45;
}
.lifeExampleSummary{
  color:#65380f;
  background:#fff7ed;
  border:1px solid rgba(251,146,60,.30);
}
.lifeExampleTeacherNote{
  color:#1f3d21;
  background:#f0fdf4;
  border:1px solid rgba(74,146,81,.25);
}
.lifeExampleRibbon{margin-bottom:10px!important;}
.modal.lessonModal.oceanLessonModal .lifeExampleCard{
  background:linear-gradient(180deg,rgba(253,238,201,.98),rgba(231,198,136,.98))!important;
  border:1px solid rgba(248,217,121,.70)!important;
  color:#432307!important;
  box-shadow:0 18px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.38)!important;
}
.modal.lessonModal.oceanLessonModal .lifeExampleTitle{color:#3a2107!important;}
.modal.lessonModal.oceanLessonModal .lifeExampleConcept{color:#174b83!important;}
.modal.lessonModal.oceanLessonModal .lifeExampleSummary{color:#5a320e!important;background:rgba(255,247,237,.92)!important;border-color:rgba(180,83,9,.22)!important;}
.modal.lessonModal.oceanLessonModal .lifeExampleTeacherNote{color:#173a1f!important;background:rgba(240,253,244,.88)!important;border-color:rgba(22,101,52,.20)!important;}
@media(max-width:720px){
  .lifeExampleHeader{flex-direction:column;align-items:flex-start;}
  .lifeExampleBadge{font-size:11px;}
  .lifeExampleImageFrame{padding:5px;border-radius:14px;}
  .lifeExampleImage{border-radius:10px;}
}

/* V202 iPad fixes: keep lesson progress visible and make music volume touch-friendly */
@media(max-width:820px), (hover:none) and (pointer:coarse){
  body.inGame .storyBottomDesk{
    display:block !important;
    position:fixed !important;
    left:50% !important;
    right:auto !important;
    bottom:calc(12px + env(safe-area-inset-bottom)) !important;
    transform:translateX(-50%) !important;
    width:min(56vw,560px) !important;
    min-width:300px !important;
    height:auto !important;
    min-height:0 !important;
    z-index:1170 !important;
    pointer-events:none !important;
  }
  body.inGame .storyBottomDesk .rewardPanel{display:none !important;}
  body.inGame .storyBottomDesk .lessonProgressPanel{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    grid-template-rows:auto !important;
    align-items:center !important;
    gap:7px !important;
    min-height:0 !important;
    padding:6px 8px !important;
    border-radius:999px !important;
    background:linear-gradient(180deg,rgba(20,20,31,.92),rgba(7,9,16,.92)) !important;
    border:1px solid rgba(255,218,129,.42) !important;
    box-shadow:0 10px 22px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07) !important;
    backdrop-filter:blur(8px) !important;
    pointer-events:auto !important;
  }
  body.inGame .storyBottomDesk .lessonProgressPanel .deskTitle{display:none !important;}
  body.inGame .storyBottomDesk .lessonProgressPanel .deskSub{
    grid-column:1 !important;
    grid-row:1 !important;
    min-width:0 !important;
    max-width:128px !important;
    margin:0 !important;
    color:#ffe6ac !important;
    font-size:10px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  body.inGame .storyBottomDesk .lessonProgressPanel #progress,
  body.inGame .storyBottomDesk #progress{
    grid-column:2 !important;
    grid-row:1 !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:5px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:1px 1px 3px !important;
    max-width:100% !important;
    scroll-snap-type:x proximity !important;
    -webkit-overflow-scrolling:touch !important;
  }
  body.inGame .storyBottomDesk #progress .badge{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
    padding:1px !important;
    border-radius:999px !important;
  }
  body.inGame .storyBottomDesk .progressNode{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    min-height:24px !important;
    font-size:12px !important;
  }
  body.inGame .musicControls{
    left:calc(10px + env(safe-area-inset-left)) !important;
    right:auto !important;
    bottom:calc(8px + env(safe-area-inset-bottom)) !important;
    gap:10px !important;
    padding:8px 10px !important;
    z-index:1200 !important;
  }
  .musicControls{touch-action:manipulation !important;}
  .musicVolumeWrap{gap:10px !important;font-size:12px !important;}
  .musicVolume{
    width:142px !important;
    min-width:142px !important;
    height:32px !important;
    padding:0 !important;
    touch-action:none !important;
    -webkit-tap-highlight-color:transparent !important;
  }
}
@media(max-width:560px){
  body.inGame .storyBottomDesk{display:none !important;}
  .musicVolume{width:94px !important;min-width:94px !important;}
}


/* V132 Review update: keep Sultan comparison graphs fully visible inside four-panel scaffold */
.modal.lessonModal.oceanLessonModal .figureQuad.story1IntegratedFigureQuad{
  grid-template-columns:repeat(2,minmax(220px,1fr))!important;
  gap:14px!important;
  align-items:stretch!important;
}
.modal.lessonModal.oceanLessonModal .figureQuad.story1IntegratedFigureQuad .plotFigureCard{
  min-height:190px!important;
  overflow:visible!important;
  padding:12px!important;
}
.modal.lessonModal.oceanLessonModal .figureQuad.story1IntegratedFigureQuad .umapGraphic,
.modal.lessonModal.oceanLessonModal .figureQuad.story1IntegratedFigureQuad .pcaGraphic,
.modal.lessonModal.oceanLessonModal .figureQuad.story1IntegratedFigureQuad .volcanoGraphic{
  min-height:132px!important;
  overflow:visible!important;
}
.modal.lessonModal.oceanLessonModal .figureQuad.story1IntegratedFigureQuad .umapDots.clusterA{left:34px!important;top:36px!important}
.modal.lessonModal.oceanLessonModal .figureQuad.story1IntegratedFigureQuad .umapDots.clusterB{left:138px!important;top:32px!important}
.modal.lessonModal.oceanLessonModal .figureQuad.story1IntegratedFigureQuad .umapDots.clusterC{left:88px!important;top:84px!important}
.modal.lessonModal.oceanLessonModal .figureQuad.story1IntegratedFigureQuad .pcaDots.day1{left:40px!important;top:38px!important}
.modal.lessonModal.oceanLessonModal .figureQuad.story1IntegratedFigureQuad .pcaDots.day2{left:154px!important;top:30px!important}
.modal.lessonModal.oceanLessonModal .figureQuad.story1IntegratedFigureQuad .volcanoDots.low{left:38px!important;top:78px!important}
.modal.lessonModal.oceanLessonModal .figureQuad.story1IntegratedFigureQuad .volcanoDots.low i:nth-child(1){left:0!important;top:18px!important}
.modal.lessonModal.oceanLessonModal .figureQuad.story1IntegratedFigureQuad .volcanoDots.low i:nth-child(2){left:44px!important;top:28px!important}
.modal.lessonModal.oceanLessonModal .figureQuad.story1IntegratedFigureQuad .volcanoDots.low i:nth-child(3){left:92px!important;top:34px!important}
.modal.lessonModal.oceanLessonModal .figureQuad.story1IntegratedFigureQuad .volcanoDots.low i:nth-child(4){left:144px!important;top:26px!important}
.modal.lessonModal.oceanLessonModal .figureQuad.story1IntegratedFigureQuad .volcanoDots.high{left:44px!important;top:20px!important}
.modal.lessonModal.oceanLessonModal .figureQuad.story1IntegratedFigureQuad .volcanoDots.high i:nth-child(1){left:0!important;top:46px!important}
.modal.lessonModal.oceanLessonModal .figureQuad.story1IntegratedFigureQuad .volcanoDots.high i:nth-child(2){left:52px!important;top:14px!important}
.modal.lessonModal.oceanLessonModal .figureQuad.story1IntegratedFigureQuad .volcanoDots.high i:nth-child(3){left:112px!important;top:2px!important}
.modal.lessonModal.oceanLessonModal .figureQuad.story1IntegratedFigureQuad .volcanoDots.high i:nth-child(4){left:168px!important;top:18px!important}
@media(max-width:720px){
  .modal.lessonModal.oceanLessonModal .figureQuad.story1IntegratedFigureQuad{grid-template-columns:1fr!important}
}

/* Story 1 correlation heatmap centering and compact training card polish */
.centeredHeatmapPanel{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
}
.centeredHeatmapPanel .compactPlotCard{
  max-width:360px;
  width:min(100%,360px);
  margin:0 auto;
}
.centeredHeatmapGraphic{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.centeredHeatmapGraphic .miniHeatmap{
  margin-left:auto;
  margin-right:auto;
}

/* V2.20 Story 1 training polish: make concept definition stand out and keep visuals centered */
.modal.lessonModal.oceanLessonModal #scaffoldSlide .slideBody{
  background:#fff1f2!important;
  border:1px solid #fecdd3!important;
  color:#7f1d1d!important;
  border-radius:14px!important;
  padding:12px 14px!important;
  font-weight:750!important;
  box-shadow:inset 0 0 0 1px rgba(244,63,94,.05)!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .slideBody::before{
  content:'Concept definition';
  display:block;
  color:#be123c;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:4px;
}
.centeredTeachingFigure,
.centeredLegendPanel{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:178px!important;
}
.centeredTeachingFigure .heatmapGraphic,
.centeredTeachingFigure .story1CenteredUmap,
.centeredTeachingFigure .story1VolcanoPlotFixed,
.centeredTeachingFigure .pcaGraphic,
.centeredLegendPanel .legendCenterBox{
  margin:auto!important;
}
.centeredTeachingFigure .heatmapGraphic .miniHeatmap,
.centeredHeatmapGraphic .miniHeatmap{
  transform:none!important;
  transform-origin:center center!important;
  margin:0 auto!important;
}
.story1CenteredUmap{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:160px!important;
}
.story1CenteredUmap .umapGraphic{
  width:min(100%,340px)!important;
  min-height:150px!important;
  overflow:visible!important;
  margin:0 auto!important;
}
.story1CenteredUmap .umapDots.clusterA{left:44px!important;top:32px!important}
.story1CenteredUmap .umapDots.clusterB{left:198px!important;top:28px!important}
.story1CenteredUmap .umapDots.clusterC{left:120px!important;top:86px!important}
.axisPracticeCard{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:12px;align-items:stretch;width:100%}
.axisPracticePlot{position:relative;min-height:165px;background:#fff;border:1px solid rgba(15,23,42,.10);border-radius:16px;overflow:visible}
.axisPracticePlot .axisPoint{position:absolute;width:11px;height:11px;border-radius:999px;background:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.axisPracticePlot .axisPoint.p1{left:28%;top:65%}.axisPracticePlot .axisPoint.p2{left:50%;top:50%}.axisPracticePlot .axisPoint.p3{left:72%;top:34%}
.axisChecklist{background:#fff;border:1px solid rgba(15,23,42,.10);border-radius:16px;padding:12px;display:flex;flex-direction:column;justify-content:center;gap:8px;color:#334155;font-size:13px;line-height:1.35}
.axisChecklist b{color:#0f172a}.axisChecklist span{display:block}
.story1VolcanoPlotFixed{position:relative;width:min(100%,360px);min-height:190px;margin:0 auto 8px;overflow:visible;background:linear-gradient(180deg,#ffffff,#f8fbff);border-radius:16px}
.story1VolcanoPlotFixed .miniAxes{inset:18px 20px 42px 42px!important}
.story1VolcanoPlotFixed .miniAxes .xlab{right:0!important;bottom:-25px!important;white-space:nowrap;font-size:10px!important}
.story1VolcanoPlotFixed .miniAxes .ylab{left:-30px!important;top:2px!important;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:10px!important}
.story1VolcanoPlotFixed .vDot{position:absolute;width:10px;height:10px;border-radius:999px;display:block;z-index:2;box-shadow:0 0 0 3px rgba(15,23,42,.06)}
.story1VolcanoPlotFixed .vDot.blue{background:#60a5fa}.story1VolcanoPlotFixed .vDot.red{background:#ef4444}
.story1VolcanoPlotFixed .candidateZone{position:absolute;bottom:12px;font-size:10px;font-weight:900;color:#64748b;background:#fff;border:1px solid #e2e8f0;border-radius:999px;padding:3px 7px}
.story1VolcanoPlotFixed .candidateZone.left{left:44px}.story1VolcanoPlotFixed .candidateZone.right{right:20px}
.story1VolcanoPlotFixed.volcanoFinal .candidateZone.left,
.story1VolcanoPlotFixed.volcanoFinal .candidateZone.right{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.pcaBatchGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
.pcaBatchGrid .plotFigureCard{min-height:210px!important;overflow:visible!important}
.pcaSmallCentered,.pcaBiologySplit,.pcaBatchSplit{width:min(100%,360px)!important;min-height:165px!important;margin:0 auto!important;overflow:visible!important}
.pcaBiologySplit .pcaDots.day1{left:48px!important;top:46px!important}.pcaBiologySplit .pcaDots.day2{left:214px!important;top:42px!important}
.pcaBatchSplit .pcaDots.day1{left:58px!important;top:34px!important}.pcaBatchSplit .pcaDots.day2{left:220px!important;top:78px!important}
.centeredLegendPanel .vizBadgeRow{align-items:center!important;justify-content:center!important;margin:18px auto!important;min-height:62px!important}
@media(max-width:720px){
  .axisPracticeCard,.pcaBatchGrid{grid-template-columns:1fr!important}
  .story1VolcanoPlotFixed{min-height:210px!important}
}

/* V2.21 Overview emphasis: make the top concept-definition area the first thing students read */
.modal.lessonModal.oceanLessonModal .overviewHeroCard{
  background:linear-gradient(180deg,#fff8fb 0%, #fff 100%);
  border:1px solid rgba(244,63,94,.18);
  box-shadow:0 14px 34px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.75);
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionHero{
  position:relative;
  margin:12px 0 14px;
  padding:16px 18px 16px 20px;
  border-radius:18px;
  background:linear-gradient(135deg,#fff1f2 0%, #ffe4e6 52%, #fff7ed 100%);
  border:1px solid rgba(251,113,133,.34);
  box-shadow:0 10px 24px rgba(244,63,94,.12);
  overflow:hidden;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionHero::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:8px;
  background:linear-gradient(180deg,#ef4444,#f97316);
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionHero::after{
  content:'';
  position:absolute;
  right:-28px;
  top:-28px;
  width:120px;
  height:120px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,255,255,.7), rgba(255,255,255,0) 68%);
  pointer-events:none;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionEyebrow{
  font-size:11px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#be123c;
  margin-bottom:4px;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionTitle{
  font-size:18px;
  font-weight:900;
  color:#7f1d1d;
  margin-bottom:6px;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionText{
  font-size:15px;
  line-height:1.5;
  color:#881337;
  font-weight:800;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionNote{
  margin-top:8px;
  font-size:12px;
  line-height:1.45;
  color:#9f1239;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(251,113,133,.22);
  border-radius:12px;
  padding:8px 10px;
}
@media (max-width:700px){
  .modal.lessonModal.oceanLessonModal .overviewDefinitionHero{
    padding:14px 14px 14px 18px;
  }
  .modal.lessonModal.oceanLessonModal .overviewDefinitionTitle{
    font-size:17px;
  }
  .modal.lessonModal.oceanLessonModal .overviewDefinitionText{
    font-size:14px;
  }
}

/* V2.22 Apply the selected parchment-book overview template to all overview teaching points */
.modal.lessonModal.oceanLessonModal .overviewHeroCard{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
}
.modal.lessonModal.oceanLessonModal .overviewHeroCard > .lessonLead{
  margin:14px 18px 8px;
}
.modal.lessonModal.oceanLessonModal .overviewHeroCard > .conceptChips{
  margin:0 18px 10px;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionBookCard{
  position:relative;
  margin:0 8px 14px;
  padding:28px 22px 22px;
  border-radius:26px;
  background:
    radial-gradient(circle at 90% 15%, rgba(234,179,8,.18) 0 10%, transparent 10.5%),
    linear-gradient(180deg,#fffaf0 0%, #fff6e8 52%, #f8e8c8 100%);
  border:2px solid rgba(191,149,63,.85);
  box-shadow:
    0 18px 34px rgba(15,23,42,.20),
    inset 0 0 0 2px rgba(246,220,170,.75),
    inset 0 -12px 22px rgba(191,149,63,.10);
  overflow:hidden;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionBookCard::before,
.modal.lessonModal.oceanLessonModal .overviewDefinitionBookCard::after{
  content:'';
  position:absolute;
  top:16px;
  bottom:16px;
  width:16px;
  border:1px solid rgba(191,149,63,.35);
  border-radius:14px;
  pointer-events:none;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionBookCard::before{
  left:12px;
  border-right:none;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionBookCard::after{
  right:12px;
  border-left:none;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionRibbon{
  display:block;
  width:max-content;
  max-width:calc(100% - 40px);
  margin:0 auto 16px;
  padding:8px 26px;
  border-radius:0;
  background:linear-gradient(90deg,#8b1e3f 0%, #b43b61 48%, #8b1e3f 100%);
  color:#fff5d6;
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.09em;
  position:relative;
  box-shadow:0 8px 16px rgba(139,30,63,.18);
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionRibbon::before,
.modal.lessonModal.oceanLessonModal .overviewDefinitionRibbon::after{
  content:'';
  position:absolute;
  top:0;
  width:18px;
  height:100%;
  background:inherit;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionRibbon::before{
  left:-12px;
  clip-path:polygon(100% 0,0 50%,100% 100%);
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionRibbon::after{
  right:-12px;
  clip-path:polygon(0 0,100% 50%,0 100%);
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionBook{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:18px;
  align-items:center;
  padding:8px 4px 2px;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionSeal{
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionSealInner{
  width:96px;
  height:96px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:44px;
  color:#fff8e1;
  background:radial-gradient(circle at 35% 30%, #7c3aed 0%, #4834a8 55%, #2c2477 100%);
  border:4px solid #d4af37;
  box-shadow:0 10px 24px rgba(44,36,119,.25), inset 0 0 0 3px rgba(255,240,200,.35);
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionContent{
  min-width:0;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionEyebrow{
  display:none;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionTitle{
  font-size:22px;
  line-height:1.15;
  font-weight:900;
  color:#1e2b5c;
  margin-bottom:10px;
  text-align:left;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionText{
  font-size:15px;
  line-height:1.6;
  color:#25386f;
  font-weight:700;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionNote{
  margin-top:14px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  background:rgba(255,236,236,.72);
  border:1px solid rgba(228,124,124,.45);
  color:#8f2d47;
  border-radius:14px;
  padding:11px 12px;
  font-size:13px;
  line-height:1.45;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionNoteIcon{
  font-size:15px;
  line-height:1.2;
  flex:0 0 auto;
}
.modal.lessonModal.oceanLessonModal .overviewSupportPanel{
  position:relative;
  margin:0 8px;
  padding:16px 18px 16px;
  border-radius:22px;
  background:linear-gradient(180deg,#0d2048 0%, #081833 100%);
  border:1px solid rgba(212,175,55,.22);
  box-shadow:0 12px 22px rgba(2,8,23,.18), inset 0 0 0 1px rgba(255,255,255,.04);
}
.modal.lessonModal.oceanLessonModal .overviewSupportPanel .lessonBodyText,
.modal.lessonModal.oceanLessonModal .overviewSupportPanel .lessonSummary,
.modal.lessonModal.oceanLessonModal .overviewSupportPanel .lessonBullet{
  color:#f7f2e8;
}
.modal.lessonModal.oceanLessonModal .overviewSupportPanel .lessonSummary b{
  color:#fff0bf;
}
.modal.lessonModal.oceanLessonModal .overviewSupportPanel .lessonBullet{
  position:relative;
  padding-left:0;
}
.modal.lessonModal.oceanLessonModal .overviewSupportPanel::after{
  content:'✦';
  position:absolute;
  right:18px;
  bottom:14px;
  font-size:24px;
  color:rgba(212,175,55,.42);
}
@media (max-width:760px){
  .modal.lessonModal.oceanLessonModal .overviewDefinitionBook{
    grid-template-columns:1fr;
    text-align:center;
  }
  .modal.lessonModal.oceanLessonModal .overviewDefinitionContent,
  .modal.lessonModal.oceanLessonModal .overviewDefinitionTitle{
    text-align:center;
  }
  .modal.lessonModal.oceanLessonModal .overviewDefinitionNote{
    text-align:left;
  }
}


/* V2.23 Refined overview manuscript template: cleaner, brighter, and closer to the approved mockup */
.modal.lessonModal.oceanLessonModal .overviewHeroCard{
  background:#fff!important;
  border:0!important;
  box-shadow:none!important;
  padding:0 0 12px!important;
  overflow:hidden!important;
}
.modal.lessonModal.oceanLessonModal .overviewHeroCard > .lessonLead{
  margin:16px 18px 8px!important;
  font-size:18px!important;
}
.modal.lessonModal.oceanLessonModal .overviewHeroCard > .conceptChips{
  margin:0 18px 12px!important;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionBookCard{
  position:relative!important;
  margin:0 14px 14px!important;
  padding:30px 28px 26px!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 92% 22%, rgba(250,204,21,.18) 0 11%, transparent 11.5%),
    linear-gradient(180deg,#fffaf0 0%,#fff8e8 58%,#f7e7c5 100%)!important;
  border:2px solid rgba(180,130,40,.58)!important;
  box-shadow:
    0 16px 30px rgba(15,23,42,.12),
    inset 0 0 0 2px rgba(255,246,220,.92),
    inset 0 -12px 26px rgba(180,130,40,.10)!important;
  overflow:hidden!important;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionBookCard::before,
.modal.lessonModal.oceanLessonModal .overviewDefinitionBookCard::after{
  content:''!important;
  position:absolute!important;
  top:18px!important;
  bottom:18px!important;
  width:18px!important;
  background:transparent!important;
  border:1px solid rgba(180,130,40,.24)!important;
  border-radius:14px!important;
  pointer-events:none!important;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionBookCard::before{
  left:16px!important;
  border-right:none!important;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionBookCard::after{
  right:16px!important;
  border-left:none!important;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionRibbon{
  display:block!important;
  width:max-content!important;
  max-width:calc(100% - 70px)!important;
  margin:0 auto 20px!important;
  padding:9px 34px!important;
  background:linear-gradient(90deg,#80213f 0%,#ad385b 50%,#80213f 100%)!important;
  color:#fff5d6!important;
  border-radius:2px!important;
  border:1px solid rgba(255,232,165,.55)!important;
  box-shadow:0 8px 16px rgba(128,33,63,.20)!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
  text-align:center!important;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionRibbon::before,
.modal.lessonModal.oceanLessonModal .overviewDefinitionRibbon::after{
  background:linear-gradient(90deg,#80213f,#ad385b)!important;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionBook{
  display:grid!important;
  grid-template-columns:92px minmax(0,1fr)!important;
  gap:20px!important;
  align-items:center!important;
  max-width:760px!important;
  margin:0 auto!important;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionSeal{
  align-self:center!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionSealInner{
  width:76px!important;
  height:76px!important;
  font-size:34px!important;
  border-radius:999px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#fff8e1!important;
  background:
    radial-gradient(circle at 35% 30%,#7862ff 0%,#5b45d6 55%,#382c8d 100%)!important;
  border:4px solid #c7a23f!important;
  box-shadow:
    0 8px 18px rgba(56,44,141,.20),
    inset 0 0 0 3px rgba(255,240,200,.34)!important;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionContent{
  min-width:0!important;
  text-align:left!important;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionTitle{
  position:relative!important;
  margin:0 0 10px!important;
  color:#1e2a5c!important;
  font-size:23px!important;
  line-height:1.12!important;
  font-weight:950!important;
  letter-spacing:-.01em!important;
  text-align:left!important;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionTitle::before,
.modal.lessonModal.oceanLessonModal .overviewDefinitionTitle::after{
  content:'✦';
  color:#b8860b;
  font-size:14px;
  vertical-align:middle;
  margin:0 8px 0 0;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionTitle::after{
  margin:0 0 0 8px;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionText{
  color:#263a76!important;
  font-size:15px!important;
  line-height:1.55!important;
  font-weight:800!important;
  max-width:680px!important;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionNote{
  margin-top:14px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  max-width:660px!important;
  background:linear-gradient(180deg,rgba(255,244,244,.92),rgba(255,235,235,.88))!important;
  border:1px solid rgba(223,129,129,.52)!important;
  color:#7f1d3d!important;
  border-radius:12px!important;
  padding:10px 12px!important;
  font-size:12px!important;
  line-height:1.45!important;
  font-weight:650!important;
}
.modal.lessonModal.oceanLessonModal .overviewDefinitionNoteIcon{
  font-size:15px!important;
  line-height:1!important;
}
.modal.lessonModal.oceanLessonModal .overviewSupportPanel{
  position:relative!important;
  margin:0 14px 2px!important;
  padding:17px 20px!important;
  border-radius:20px!important;
  background:
    radial-gradient(circle at 93% 70%, rgba(212,175,55,.10), transparent 25%),
    linear-gradient(180deg,#102653 0%, #081a38 100%)!important;
  border:1px solid rgba(212,175,55,.28)!important;
  box-shadow:0 12px 22px rgba(2,8,23,.14), inset 0 0 0 1px rgba(255,255,255,.05)!important;
}
.modal.lessonModal.oceanLessonModal .overviewSupportPanel .lessonBodyText,
.modal.lessonModal.oceanLessonModal .overviewSupportPanel .lessonSummary,
.modal.lessonModal.oceanLessonModal .overviewSupportPanel .lessonBullet{
  color:#f8fafc!important;
  opacity:1!important;
  text-shadow:none!important;
}
.modal.lessonModal.oceanLessonModal .overviewSupportPanel .lessonBodyText{
  font-size:13px!important;
  line-height:1.45!important;
  margin-bottom:8px!important;
}
.modal.lessonModal.oceanLessonModal .overviewSupportPanel .lessonSummary{
  font-size:13px!important;
  line-height:1.5!important;
  margin:8px 0!important;
}
.modal.lessonModal.oceanLessonModal .overviewSupportPanel .lessonSummary b{
  color:#ffe8a3!important;
}
.modal.lessonModal.oceanLessonModal .overviewSupportPanel .lessonBullet{
  font-size:13px!important;
  line-height:1.55!important;
  margin-top:4px!important;
}
.modal.lessonModal.oceanLessonModal .overviewSupportPanel::after{
  content:'📖'!important;
  position:absolute!important;
  right:20px!important;
  bottom:14px!important;
  font-size:26px!important;
  opacity:.20!important;
  color:#d4af37!important;
}
@media (max-width:760px){
  .modal.lessonModal.oceanLessonModal .overviewDefinitionBookCard{
    padding:26px 18px 22px!important;
  }
  .modal.lessonModal.oceanLessonModal .overviewDefinitionBook{
    grid-template-columns:1fr!important;
    gap:12px!important;
    text-align:center!important;
  }
  .modal.lessonModal.oceanLessonModal .overviewDefinitionContent,
  .modal.lessonModal.oceanLessonModal .overviewDefinitionTitle,
  .modal.lessonModal.oceanLessonModal .overviewDefinitionText{
    text-align:center!important;
  }
  .modal.lessonModal.oceanLessonModal .overviewDefinitionNote{
    text-align:left!important;
  }
}

/* V2.24 Split learning flow into Start Here and Step-by-Step Story tabs */
.modal.lessonModal.oceanLessonModal .lessonTabs{
  align-items:center!important;
}
.modal.lessonModal.oceanLessonModal .lessonTab{
  padding:9px 14px!important;
  font-size:12px!important;
  white-space:nowrap!important;
}
.modal.lessonModal.oceanLessonModal .lessonTab[data-page="story"]{
  border-color:rgba(248,217,121,.52)!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryRibbon{
  margin-bottom:12px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck{
  margin-top:0!important;
}
@media (max-width:780px){
  .modal.lessonModal.oceanLessonModal .lessonTab{
    flex:1 1 auto!important;
    text-align:center!important;
    padding:8px 10px!important;
    font-size:11px!important;
  }
}

/* V2.24 requested-training verification polish: keep Step-by-Step visuals centered and inside their cards */
.modal.lessonModal.oceanLessonModal .stepStoryDeck .figureSupportGrid > .plotFigureCard,
.modal.lessonModal.oceanLessonModal .stepStoryDeck .centeredTeachingFigure,
.modal.lessonModal.oceanLessonModal .stepStoryDeck .centeredLegendPanel,
.modal.lessonModal.oceanLessonModal .stepStoryDeck .centeredHeatmapPanel{
  align-items:center!important;
  justify-content:center!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck .centeredTeachingFigure .heatmapGraphic,
.modal.lessonModal.oceanLessonModal .stepStoryDeck .centeredHeatmapGraphic,
.modal.lessonModal.oceanLessonModal .stepStoryDeck .centeredLegendPanel .legendCenterBox,
.modal.lessonModal.oceanLessonModal .stepStoryDeck .story1CenteredUmap{
  margin:auto!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck .story1VolcanoPlotFixed{
  overflow:hidden!important;
  border:1px solid rgba(148,163,184,.22)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck .story1VolcanoPlotFixed .miniAxes{
  inset:22px 28px 50px 48px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck .story1VolcanoPlotFixed .miniAxes .xlab{
  right:0!important;
  bottom:-28px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck .story1VolcanoPlotFixed .miniAxes .ylab{
  left:-38px!important;
  top:0!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck .story1VolcanoPlotFixed .candidateZone.left{left:50px!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck .story1VolcanoPlotFixed .candidateZone.right{right:28px!important}

/* V2.30 Start Here redesign: concept-specific split visualization for every Story 1 teaching example */
.modal.lessonModal.oceanLessonModal .story1StartHereCard{
  background:#fff;
  border:0;
  box-shadow:none;
  padding:0 0 10px;
}
.modal.lessonModal.oceanLessonModal .story1StartHereCard > .lessonLead{
  margin:14px 18px 8px;
}
.modal.lessonModal.oceanLessonModal .story1StartHereCard > .conceptChips{
  margin:0 18px 12px;
}
.modal.lessonModal.oceanLessonModal .startHereMasterCard{
  margin:0 14px 14px;
  padding:18px 20px;
  display:grid;
  grid-template-columns:minmax(0,1.06fr) 20px minmax(320px,.94fr);
  gap:18px;
  border-radius:28px;
  background:linear-gradient(180deg,#fffdf7 0%, #fff7e7 100%);
  border:2px solid rgba(193,151,67,.55);
  box-shadow:0 16px 28px rgba(15,23,42,.10), inset 0 0 0 2px rgba(255,246,220,.92);
}
.modal.lessonModal.oceanLessonModal .startHereVisualPane,
.modal.lessonModal.oceanLessonModal .startHereConceptPane{
  min-width:0;
}
.modal.lessonModal.oceanLessonModal .startHereVisualFrame{
  height:100%;
  padding:8px 6px 4px;
}
.modal.lessonModal.oceanLessonModal .startHereVisualTitle{
  margin:4px 0 16px;
  text-align:center;
  color:#4c2b6a;
  font-size:15px;
  font-weight:900;
  letter-spacing:.01em;
}
.modal.lessonModal.oceanLessonModal .startHereVisualHeader{
  text-align:center;
  color:#4a325f;
  font-size:13px;
  line-height:1.35;
  font-weight:800;
  margin:0 0 12px;
}
.modal.lessonModal.oceanLessonModal .startHereVisualFooter,
.modal.lessonModal.oceanLessonModal .startHereSquareRootHint{
  margin-top:12px;
  border-radius:14px;
  border:1px solid rgba(201,134,134,.35);
  background:linear-gradient(180deg,rgba(255,242,242,.92),rgba(255,236,236,.82));
  padding:10px 12px;
  color:#7c2d4a;
  font-size:12px;
  line-height:1.45;
  font-weight:650;
}
.modal.lessonModal.oceanLessonModal .startHereSplitDivider{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#c19037;
  font-size:18px;
}
.modal.lessonModal.oceanLessonModal .startHereSplitDivider span{
  display:inline-flex;
  width:20px;
  height:20px;
  align-items:center;
  justify-content:center;
}
.modal.lessonModal.oceanLessonModal .startHereDefinitionPane{
  height:100%;
  margin:0;
  padding:18px 16px 14px;
  border-radius:24px;
  background:linear-gradient(180deg,#fffef8 0%, #fff8ee 100%);
  border:1px solid rgba(191,149,63,.35);
  box-shadow:none;
}
.modal.lessonModal.oceanLessonModal .startHereDefinitionPane::before,
.modal.lessonModal.oceanLessonModal .startHereDefinitionPane::after{display:none;}
.modal.lessonModal.oceanLessonModal .startHereDefinitionPane .overviewDefinitionRibbon{
  margin:0 auto 18px;
}
.modal.lessonModal.oceanLessonModal .startHereDefinitionPane .overviewDefinitionContent{
  max-width:100%;
  text-align:left;
}
.modal.lessonModal.oceanLessonModal .startHereDefinitionPane .overviewDefinitionTitle{
  text-align:left;
  font-size:24px;
  color:#3f2359;
}
.modal.lessonModal.oceanLessonModal .startHereDefinitionPane .overviewDefinitionText{
  font-size:15px;
  color:#243a76;
  font-weight:800;
}
.modal.lessonModal.oceanLessonModal .startHereDefinitionPane .overviewDefinitionNote{
  margin-top:18px;
}

/* Left-panel generic pieces */
.modal.lessonModal.oceanLessonModal .startHereChoiceRow,
.modal.lessonModal.oceanLessonModal .startHereCenterGrid,
.modal.lessonModal.oceanLessonModal .startHereCompareBlocks,
.modal.lessonModal.oceanLessonModal .startHereSpreadGrid,
.modal.lessonModal.oceanLessonModal .startHereTripletGrid,
.modal.lessonModal.oceanLessonModal .startHereCorrLayout,
.modal.lessonModal.oceanLessonModal .startHerePcaFlow,
.modal.lessonModal.oceanLessonModal .startHereEvidenceFlow{
  display:grid;
  gap:12px;
}
.modal.lessonModal.oceanLessonModal .startHereChoiceRow{grid-template-columns:repeat(3,minmax(0,1fr));}
.modal.lessonModal.oceanLessonModal .startHereCenterGrid{grid-template-columns:repeat(3,minmax(0,1fr));}
.modal.lessonModal.oceanLessonModal .startHereCompareBlocks.two{grid-template-columns:repeat(2,minmax(0,1fr));}
.modal.lessonModal.oceanLessonModal .startHereCompareBlocks.three{grid-template-columns:repeat(3,minmax(0,1fr));}
.modal.lessonModal.oceanLessonModal .startHereSpreadGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
.modal.lessonModal.oceanLessonModal .startHereTripletGrid{grid-template-columns:repeat(3,minmax(0,1fr));}
.modal.lessonModal.oceanLessonModal .startHerePcaFlow{grid-template-columns:minmax(120px,1fr) 30px minmax(150px,1.2fr);align-items:center;}
.modal.lessonModal.oceanLessonModal .startHereEvidenceFlow{grid-template-columns:repeat(4,minmax(0,1fr));}

.modal.lessonModal.oceanLessonModal .startHereChoiceCard,
.modal.lessonModal.oceanLessonModal .startHereMiniPanel,
.modal.lessonModal.oceanLessonModal .startHereMeasureCard,
.modal.lessonModal.oceanLessonModal .evidencePillar{
  border-radius:18px;
  border:1px solid rgba(164,128,194,.28);
  background:rgba(255,255,255,.88);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);
  padding:12px 10px;
  text-align:center;
}
.modal.lessonModal.oceanLessonModal .startHereChoiceCard b,
.modal.lessonModal.oceanLessonModal .startHereMiniPanel .label,
.modal.lessonModal.oceanLessonModal .startHereMeasureCard b,
.modal.lessonModal.oceanLessonModal .evidencePillar{
  display:block;
  font-size:14px;
  color:#27386b;
  font-weight:900;
  margin-bottom:4px;
}
.modal.lessonModal.oceanLessonModal .startHereChoiceCard span,
.modal.lessonModal.oceanLessonModal .startHereMiniPanel .hint,
.modal.lessonModal.oceanLessonModal .startHereMeasureCard span{
  display:block;
  font-size:11px;
  line-height:1.35;
  color:#52616f;
}
.modal.lessonModal.oceanLessonModal .startHereChoiceCard.compare{border-color:#f0c482;background:#fffaf2;}
.modal.lessonModal.oceanLessonModal .startHereChoiceCard.group{border-color:#b7ddbe;background:#f4fbf3;}
.modal.lessonModal.oceanLessonModal .startHereChoiceCard.spot{border-color:#c8c3ef;background:#f7f5ff;}

.modal.lessonModal.oceanLessonModal .startHereValueStrip{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:8px 0 14px;
  flex-wrap:wrap;
}
.modal.lessonModal.oceanLessonModal .startHereValueStrip span{
  min-width:40px;
  padding:8px 0;
  border-radius:14px;
  background:linear-gradient(180deg,#f7f0ff,#eee5fb);
  border:1px solid rgba(134,92,182,.25);
  text-align:center;
  color:#512d6d;
  font-weight:900;
}
.modal.lessonModal.oceanLessonModal .startHereMiniPanel .value{
  font-size:22px;
  color:#24406f;
  font-weight:900;
  margin:4px 0;
}
.modal.lessonModal.oceanLessonModal .startHereMiniPanel.mean{background:#fff9ef;border-color:#f0c482;}
.modal.lessonModal.oceanLessonModal .startHereMiniPanel.median{background:#f4fbf3;border-color:#b7ddbe;}
.modal.lessonModal.oceanLessonModal .startHereMiniPanel.mode{background:#f7f5ff;border-color:#c8c3ef;}

.modal.lessonModal.oceanLessonModal .startHereNumberLine{
  position:relative;
  height:56px;
  margin:16px 8px 10px;
}
.modal.lessonModal.oceanLessonModal .startHereNumberLine .axis{
  position:absolute;
  left:4%; right:4%; top:32px; height:4px;
  border-radius:999px; background:#d7c399;
}
.modal.lessonModal.oceanLessonModal .startHereNumberLine .dot{
  position:absolute;
  top:18px; width:14px; height:14px; border-radius:50%;
  background:#6b4aa3; transform:translateX(-50%);
  box-shadow:0 0 0 4px rgba(107,74,163,.12);
}
.modal.lessonModal.oceanLessonModal .startHereNumberLine .dot.outlier{background:#d05858; box-shadow:0 0 0 4px rgba(208,88,88,.14);}

.modal.lessonModal.oceanLessonModal .startHereSpreadPanel{
  border-radius:18px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(164,128,194,.28);
  padding:12px;
}
.modal.lessonModal.oceanLessonModal .startHereSpreadPanel .spreadTitle,
.modal.lessonModal.oceanLessonModal .startHereSpreadPanel .spreadNote{
  text-align:center;
}
.modal.lessonModal.oceanLessonModal .startHereSpreadPanel .spreadTitle{font-size:13px;color:#27386b;font-weight:900;}
.modal.lessonModal.oceanLessonModal .startHereSpreadPanel .spreadNote{font-size:11px;color:#52616f;margin-top:6px;}
.modal.lessonModal.oceanLessonModal .startHereSpreadPanel .spreadLine{
  position:relative;height:54px;margin:8px 0 2px;
}
.modal.lessonModal.oceanLessonModal .startHereSpreadPanel .spreadLine::before{
  content:''; position:absolute; left:10%; right:10%; top:27px; height:3px; background:#d7c399; border-radius:999px;
}
.modal.lessonModal.oceanLessonModal .startHereSpreadPanel .spreadLine span{
  position:absolute; top:20px; width:14px; height:14px; border-radius:50%; background:#6b4aa3; transform:translateX(-50%);
}
.modal.lessonModal.oceanLessonModal .startHereSpreadPanel .spreadLine .mid{background:#d4a843; box-shadow:0 0 0 4px rgba(212,168,67,.16);}
.modal.lessonModal.oceanLessonModal .startHereSpreadPanel .spreadLine.tight span:nth-child(1){left:32%}
.modal.lessonModal.oceanLessonModal .startHereSpreadPanel .spreadLine.tight span:nth-child(2){left:43%}
.modal.lessonModal.oceanLessonModal .startHereSpreadPanel .spreadLine.tight span:nth-child(3){left:50%}
.modal.lessonModal.oceanLessonModal .startHereSpreadPanel .spreadLine.tight span:nth-child(4){left:57%}
.modal.lessonModal.oceanLessonModal .startHereSpreadPanel .spreadLine.tight span:nth-child(5){left:68%}
.modal.lessonModal.oceanLessonModal .startHereSpreadPanel .spreadLine.wide span:nth-child(1){left:18%}
.modal.lessonModal.oceanLessonModal .startHereSpreadPanel .spreadLine.wide span:nth-child(2){left:35%}
.modal.lessonModal.oceanLessonModal .startHereSpreadPanel .spreadLine.wide span:nth-child(3){left:50%}
.modal.lessonModal.oceanLessonModal .startHereSpreadPanel .spreadLine.wide span:nth-child(4){left:65%}
.modal.lessonModal.oceanLessonModal .startHereSpreadPanel .spreadLine.wide span:nth-child(5){left:82%}

.modal.lessonModal.oceanLessonModal .startHereScaleArrow{
  text-align:center; margin:10px 0; font-size:12px; font-weight:800; color:#6d4a7a;
}
.modal.lessonModal.oceanLessonModal .startHereMeasureCard{
  background:linear-gradient(180deg,#fff,#faf5ff);
}
.modal.lessonModal.oceanLessonModal .startHereMeasureCard span{font-size:17px;font-weight:900;color:#36523b;margin-top:6px;}
.modal.lessonModal.oceanLessonModal .startHereNormRow{
  display:flex; justify-content:center; gap:16px; margin:6px 0 10px; flex-wrap:wrap;
}
.modal.lessonModal.oceanLessonModal .normBadge{
  min-width:74px; padding:8px 12px; border-radius:14px; text-align:center;
  background:#eff8e9; border:1px solid rgba(132,173,110,.4); color:#2f6f2f; font-weight:900; font-size:18px;
}
.modal.lessonModal.oceanLessonModal .startHereMiniScale{
  display:grid; grid-template-columns:24px minmax(0,1fr) 24px; gap:10px; align-items:center; color:#3e4066; font-weight:800;
}
.modal.lessonModal.oceanLessonModal .startHereMiniScale .track{
  position:relative; height:16px;
}
.modal.lessonModal.oceanLessonModal .startHereMiniScale .track::before{
  content:''; position:absolute; left:0; right:0; top:7px; height:3px; background:#cdb887; border-radius:999px;
}
.modal.lessonModal.oceanLessonModal .startHereMiniScale .track i{
  position:absolute; top:1px; width:12px; height:12px; border-radius:50%; background:#57a55a; transform:translateX(-50%);
  box-shadow:0 0 0 4px rgba(87,165,90,.14);
}

.modal.lessonModal.oceanLessonModal .startHereHeatmapMini{
  display:grid; gap:5px; justify-content:center; margin:4px auto;
}
.modal.lessonModal.oceanLessonModal .startHereHeatmapMini.corr{grid-template-columns:repeat(3,54px);}
.modal.lessonModal.oceanLessonModal .startHereHeatmapMini.genes{grid-template-columns:repeat(4,42px);}
.modal.lessonModal.oceanLessonModal .startHereHeatmapMini .cell{
  height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:900; color:#14213d;
  border:1px solid rgba(255,255,255,.35);
}
.modal.lessonModal.oceanLessonModal .startHereHeatmapMini.genes .cell{height:32px;}
.modal.lessonModal.oceanLessonModal .startHereHeatmapMini .cell.hot{background:#de6f6f; color:#fff;}
.modal.lessonModal.oceanLessonModal .startHereHeatmapMini .cell.warm{background:#f1c56f;}
.modal.lessonModal.oceanLessonModal .startHereHeatmapMini .cell.pale{background:#f5eee0;}
.modal.lessonModal.oceanLessonModal .startHereHeatmapMini .cell.cool{background:#7aa3d8; color:#fff;}
.modal.lessonModal.oceanLessonModal .startHereLegendStack{
  display:grid; align-content:center; gap:8px; font-size:12px; color:#44515c; font-weight:700;
}
.modal.lessonModal.oceanLessonModal .startHereAxisTags,
.modal.lessonModal.oceanLessonModal .startHereGradientLegend{
  display:flex; justify-content:center; gap:18px; align-items:center; margin-top:10px; font-size:12px; color:#4d5967; font-weight:700; flex-wrap:wrap;
}
.modal.lessonModal.oceanLessonModal .startHereGradientLegend i{
  display:inline-block; width:110px; height:12px; border-radius:999px; background:linear-gradient(90deg,#7aa3d8,#f5eee0,#de6f6f); border:1px solid rgba(164,128,194,.25);
}

.modal.lessonModal.oceanLessonModal .startHereUmapMini,
.modal.lessonModal.oceanLessonModal .startHereScatterMini,
.modal.lessonModal.oceanLessonModal .startHereVolcanoMini{
  position:relative;
  height:176px;
  border-radius:20px;
  background:linear-gradient(180deg,#fff 0%,#f8f6ff 100%);
  border:1px solid rgba(164,128,194,.25);
  overflow:hidden;
}
.modal.lessonModal.oceanLessonModal .startHereUmapMini::before,
.modal.lessonModal.oceanLessonModal .startHereScatterMini::before,
.modal.lessonModal.oceanLessonModal .startHereVolcanoMini::before{
  content:''; position:absolute; left:14%; right:10%; bottom:18px; height:2px; background:#b8bdd4;
}
.modal.lessonModal.oceanLessonModal .startHereUmapMini::after,
.modal.lessonModal.oceanLessonModal .startHereScatterMini::after,
.modal.lessonModal.oceanLessonModal .startHereVolcanoMini::after{
  content:''; position:absolute; left:14%; top:12%; bottom:18px; width:2px; background:#b8bdd4;
}
.modal.lessonModal.oceanLessonModal .startHereUmapMini .dot,
.modal.lessonModal.oceanLessonModal .startHereScatterMini i,
.modal.lessonModal.oceanLessonModal .startHereVolcanoMini .pt{
  position:absolute; width:12px; height:12px; border-radius:50%; transform:translate(-50%,-50%);
}
.modal.lessonModal.oceanLessonModal .startHereUmapMini .dot.a{background:#7c5be4}
.modal.lessonModal.oceanLessonModal .startHereUmapMini .dot.b{background:#f2a93f}
.modal.lessonModal.oceanLessonModal .startHereUmapMini .dot.c{background:#5dbb77}
.modal.lessonModal.oceanLessonModal .startHereScatterMini i.blue{background:#6b7dff}
.modal.lessonModal.oceanLessonModal .startHereScatterMini i.gold{background:#e0ad49}
.modal.lessonModal.oceanLessonModal .startHereVolcanoMini .pt.muted{background:#90a4c4}
.modal.lessonModal.oceanLessonModal .startHereVolcanoMini .pt.sig{background:#d35656; box-shadow:0 0 0 5px rgba(211,86,86,.14);}
.modal.lessonModal.oceanLessonModal .axisLabel{
  position:absolute; font-size:11px; font-weight:800; color:#5a6485;
}
.modal.lessonModal.oceanLessonModal .axisLabel.x{right:12px; bottom:0;}
.modal.lessonModal.oceanLessonModal .axisLabel.y{left:2px; top:8px; writing-mode:vertical-rl; transform:rotate(180deg);}

.modal.lessonModal.oceanLessonModal .startHereTableMock{
  display:grid; grid-template-columns:repeat(4,1fr); gap:7px; padding:12px; height:132px;
  border-radius:18px; background:rgba(255,255,255,.88); border:1px solid rgba(164,128,194,.28);
}
.modal.lessonModal.oceanLessonModal .startHereTableMock span{
  border-radius:8px; background:linear-gradient(180deg,#efe5cc,#f8f2e6);
}
.modal.lessonModal.oceanLessonModal .startHerePcaFlow .flowArrow,
.modal.lessonModal.oceanLessonModal .flowArrow.down{
  display:flex; align-items:center; justify-content:center; font-size:26px; color:#c19037; font-weight:900;
}
.modal.lessonModal.oceanLessonModal .flowArrow.down{margin:4px 0 2px; font-size:24px;}
.modal.lessonModal.oceanLessonModal .startHereConclusionShield{
  margin:0 auto; width:max-content; padding:10px 18px; border-radius:999px; background:linear-gradient(180deg,#1a4873,#0f2f53); color:#fff8de; border:1px solid rgba(193,151,67,.4); font-weight:900;
}

.modal.lessonModal.oceanLessonModal .overviewSupportPanel{
  margin:0 14px 2px;
  padding:18px 20px;
  border-radius:22px;
  background:radial-gradient(circle at 92% 70%, rgba(212,175,55,.12), transparent 24%), linear-gradient(180deg,#102653 0%, #081a38 100%);
  border:1px solid rgba(212,175,55,.28);
  box-shadow:0 12px 22px rgba(2,8,23,.14), inset 0 0 0 1px rgba(255,255,255,.05);
}
.modal.lessonModal.oceanLessonModal .overviewSupportPanel .lessonBodyText,
.modal.lessonModal.oceanLessonModal .overviewSupportPanel .lessonSummary,
.modal.lessonModal.oceanLessonModal .overviewSupportPanel .lessonBullet{
  color:#f8fafc!important; opacity:1!important; text-shadow:none!important;
}
.modal.lessonModal.oceanLessonModal .overviewSupportPanel .lessonSummary b{color:#ffe8a3!important;}
.modal.lessonModal.oceanLessonModal .overviewSupportPanel::after{content:'📘'!important; opacity:.22!important;}

@media (max-width: 980px){
  .modal.lessonModal.oceanLessonModal .startHereMasterCard{grid-template-columns:1fr; gap:10px;}
  .modal.lessonModal.oceanLessonModal .startHereSplitDivider{display:none;}
}
@media (max-width: 760px){
  .modal.lessonModal.oceanLessonModal .startHereChoiceRow,
  .modal.lessonModal.oceanLessonModal .startHereCenterGrid,
  .modal.lessonModal.oceanLessonModal .startHereTripletGrid,
  .modal.lessonModal.oceanLessonModal .startHereCompareBlocks.three,
  .modal.lessonModal.oceanLessonModal .startHereEvidenceFlow,
  .modal.lessonModal.oceanLessonModal .startHereSpreadGrid,
  .modal.lessonModal.oceanLessonModal .startHerePcaFlow{
    grid-template-columns:1fr;
  }
  .modal.lessonModal.oceanLessonModal .startHereDefinitionPane .overviewDefinitionTitle,
  .modal.lessonModal.oceanLessonModal .startHereDefinitionPane .overviewDefinitionText{
    text-align:center;
  }
  .modal.lessonModal.oceanLessonModal .startHereDefinitionPane .overviewDefinitionNote{font-size:12px;}
}


/* V2.31 Tab order polish + readability boost for Start Here numeric values */
.modal.lessonModal.oceanLessonModal .startHereMiniPanel .label{
  color:#2b3168!important;
  font-size:12px!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
}
.modal.lessonModal.oceanLessonModal .startHereMiniPanel .value{
  color:#172554!important;
  font-size:26px!important;
  line-height:1.05!important;
  font-weight:950!important;
  text-shadow:0 1px 0 rgba(255,255,255,.75)!important;
}
.modal.lessonModal.oceanLessonModal .startHereMiniPanel.mean .value,
.modal.lessonModal.oceanLessonModal .startHereMiniPanel.median .value,
.modal.lessonModal.oceanLessonModal .startHereMiniPanel.mode .value{
  color:#172554!important;
}
.modal.lessonModal.oceanLessonModal .startHereMiniPanel .hint{
  color:#334155!important;
  font-size:11px!important;
  font-weight:750!important;
}
.modal.lessonModal.oceanLessonModal .startHereCenterGrid .startHereMiniPanel{
  background:#ffffff!important;
  border:1px solid rgba(91,68,145,.24)!important;
}
.modal.lessonModal.oceanLessonModal .startHereCenterGrid .startHereMiniPanel.mean{
  box-shadow:inset 0 0 0 3px rgba(245,158,11,.10)!important;
}
.modal.lessonModal.oceanLessonModal .startHereCenterGrid .startHereMiniPanel.median{
  box-shadow:inset 0 0 0 3px rgba(34,197,94,.10)!important;
}
.modal.lessonModal.oceanLessonModal .startHereCenterGrid .startHereMiniPanel.mode{
  box-shadow:inset 0 0 0 3px rgba(124,58,237,.10)!important;
}
.modal.lessonModal.oceanLessonModal .startHereValueStrip span{
  color:#3b1970!important;
  font-size:16px!important;
  font-weight:950!important;
}
.modal.lessonModal.oceanLessonModal .normBadge,
.modal.lessonModal.oceanLessonModal .startHereMeasureCard span{
  color:#14532d!important;
  font-weight:950!important;
}

/* V2.32 iPad/tablet progress: compact by default, tiny while lessons are open */
body.inGame.progressCompactEligible .storyBottomDesk{
  display:block !important;
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  bottom:calc(10px + env(safe-area-inset-bottom)) !important;
  transform:translateX(-50%) !important;
  width:auto !important;
  min-width:0 !important;
  max-width:92vw !important;
  height:auto !important;
  min-height:0 !important;
  z-index:1170 !important;
  pointer-events:none !important;
}
body.inGame.progressCompactEligible .storyBottomDesk .rewardPanel{
  display:none !important;
}
body.inGame.progressCompactEligible .storyBottomDesk .lessonProgressPanel{
  pointer-events:auto !important;
  cursor:pointer !important;
  user-select:none !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:width .18s ease, max-width .18s ease, opacity .18s ease, transform .18s ease !important;
}
body.inGame.progressCompactEligible:not(.progressExpanded) .storyBottomDesk .lessonProgressPanel{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  max-width:240px !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:8px 13px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,rgba(20,20,31,.94),rgba(7,9,16,.94)) !important;
  border:1px solid rgba(255,218,129,.48) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter:blur(9px) !important;
}
body.inGame.progressCompactEligible:not(.progressExpanded) .storyBottomDesk .lessonProgressPanel .deskTitle,
body.inGame.progressCompactEligible:not(.progressExpanded) .storyBottomDesk .lessonProgressPanel #progress{
  display:none !important;
}
body.inGame.progressCompactEligible:not(.progressExpanded) .storyBottomDesk .lessonProgressPanel .deskSub{
  display:block !important;
  grid-column:auto !important;
  grid-row:auto !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;
  color:#ffe6ac !important;
  font-size:12px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.inGame.progressCompactEligible:not(.progressExpanded) .storyBottomDesk .lessonProgressPanel .deskSub::after{
  content:'  ▴' !important;
  color:#bbf7d0 !important;
  font-weight:1000 !important;
}
body.inGame.progressCompactEligible.progressExpanded .storyBottomDesk{
  width:min(86vw,720px) !important;
}
body.inGame.progressCompactEligible.progressExpanded .storyBottomDesk .lessonProgressPanel{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  grid-template-rows:auto !important;
  align-items:center !important;
  gap:8px !important;
  min-height:0 !important;
  padding:7px 10px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,rgba(20,20,31,.94),rgba(7,9,16,.94)) !important;
  border:1px solid rgba(255,218,129,.48) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter:blur(9px) !important;
}
body.inGame.progressCompactEligible.progressExpanded .storyBottomDesk .lessonProgressPanel .deskTitle{
  display:none !important;
}
body.inGame.progressCompactEligible.progressExpanded .storyBottomDesk .lessonProgressPanel .deskSub{
  grid-column:1 !important;
  grid-row:1 !important;
  max-width:138px !important;
  color:#ffe6ac !important;
  font-size:10.5px !important;
  line-height:1.1 !important;
  font-weight:850 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.inGame.progressCompactEligible.progressExpanded .storyBottomDesk .lessonProgressPanel .deskSub::after{
  content:'  ▾' !important;
  color:#bfdbfe !important;
}
body.inGame.progressCompactEligible.progressExpanded .storyBottomDesk .lessonProgressPanel #progress{
  grid-column:2 !important;
  grid-row:1 !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:6px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:1px 1px 3px !important;
  max-width:100% !important;
  -webkit-overflow-scrolling:touch !important;
}
body.inGame.progressCompactEligible.progressExpanded .storyBottomDesk #progress .badge{
  width:31px !important;
  height:31px !important;
  min-width:31px !important;
  min-height:31px !important;
  border-radius:999px !important;
  padding:1px !important;
}
body.inGame.progressCompactEligible.progressExpanded .storyBottomDesk .progressNode{
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  min-height:24px !important;
  font-size:12px !important;
}

/* While a lesson modal is open, keep progress as a tiny corner pill so it never covers Next/Previous or Show Answer. */
body.inGame.progressCompactEligible.lessonModalProgressCompact .storyBottomDesk{
  display:block !important;
  left:auto !important;
  right:calc(12px + env(safe-area-inset-right)) !important;
  bottom:calc(8px + env(safe-area-inset-bottom)) !important;
  transform:none !important;
  width:auto !important;
  max-width:160px !important;
  z-index:1160 !important;
}
body.inGame.progressCompactEligible.lessonModalProgressCompact .storyBottomDesk .lessonProgressPanel{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  max-width:160px !important;
  min-width:0 !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  opacity:.72 !important;
  background:linear-gradient(180deg,rgba(20,20,31,.88),rgba(7,9,16,.88)) !important;
  border:1px solid rgba(255,218,129,.36) !important;
  box-shadow:0 8px 16px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05) !important;
  pointer-events:none !important;
}
body.inGame.progressCompactEligible.lessonModalProgressCompact .storyBottomDesk .lessonProgressPanel .deskTitle,
body.inGame.progressCompactEligible.lessonModalProgressCompact .storyBottomDesk .lessonProgressPanel #progress{
  display:none !important;
}
body.inGame.progressCompactEligible.lessonModalProgressCompact .storyBottomDesk .lessonProgressPanel .deskSub{
  display:block !important;
  max-width:130px !important;
  margin:0 !important;
  color:#ffe6ac !important;
  font-size:10px !important;
  line-height:1.1 !important;
  font-weight:900 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.inGame.progressCompactEligible.lessonModalProgressCompact .storyBottomDesk .lessonProgressPanel .deskSub::after{
  content:' ✓' !important;
  color:#bbf7d0 !important;
}
@media(max-width:560px){
  body.inGame.progressCompactEligible.lessonModalProgressCompact .storyBottomDesk{
    display:none !important;
  }
}

/* V2.33 Rafiq step-by-step redesign */
.modal.lessonModal.oceanLessonModal .stepStoryDeck .lessonLead{
  margin-bottom:14px;
}
.modal.lessonModal.oceanLessonModal .rafiqStoryScaffold{
  width:100%;
}
.modal.lessonModal.oceanLessonModal .rafiqStoryCard{
  border-radius:28px;
  padding:22px 24px 18px;
  background:linear-gradient(180deg,#fffdf7 0%, #fff9ef 100%);
  border:2px solid rgba(208,181,116,.55);
  box-shadow:0 14px 28px rgba(15,23,42,.08), inset 0 0 0 2px rgba(255,247,225,.92);
}
.modal.lessonModal.oceanLessonModal .rafiqStoryTopline{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.modal.lessonModal.oceanLessonModal .rafiqStoryTopline .slideCounter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:108px;
  padding:9px 16px;
  border-radius:999px;
  background:linear-gradient(180deg,#e9f4ff,#d9ecff);
  border:1px solid rgba(120,167,217,.45);
  color:#26436a;
  font-size:13px;
  font-weight:900;
  letter-spacing:.01em;
}
.modal.lessonModal.oceanLessonModal .rafiqStoryTitleWrap{
  display:flex;
  align-items:center;
  gap:12px;
}
.modal.lessonModal.oceanLessonModal .rafiqStorySpark{
  color:#d4a445;
  font-size:22px;
  line-height:1;
}
.modal.lessonModal.oceanLessonModal .rafiqStoryTopline .slideTitle{
  margin:0;
  font-size:30px;
  line-height:1.15;
  color:#1e2b58;
}
.modal.lessonModal.oceanLessonModal .rafiqStoryDefinition{
  margin-bottom:20px;
  border-radius:20px;
  border:1.5px solid rgba(231,169,176,.75);
  background:linear-gradient(180deg,#fff8f8 0%, #fff3f4 100%);
  color:#8d2a31;
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:15px;
  line-height:1.55;
  font-weight:700;
}
.modal.lessonModal.oceanLessonModal .rafiqStoryDefinition b{
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.08em;
  color:#b2343c;
}
.modal.lessonModal.oceanLessonModal .rafiqStorySplit{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(260px,.85fr);
  gap:18px;
  margin-bottom:16px;
}
.modal.lessonModal.oceanLessonModal .rafiqStoryVisualPanel,
.modal.lessonModal.oceanLessonModal .rafiqStoryWhyPanel{
  border-radius:24px;
  background:linear-gradient(180deg,#fffef9 0%, #fffaf0 100%);
  border:1.5px solid rgba(216,188,126,.52);
  padding:18px;
}
.modal.lessonModal.oceanLessonModal .rafiqStepVisualHeader{
  text-align:center;
  color:#5a3b72;
  font-size:15px;
  font-weight:900;
  margin-bottom:14px;
}
.modal.lessonModal.oceanLessonModal .rafiqChoiceGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.modal.lessonModal.oceanLessonModal .rafiqChoiceCard{
  min-height:122px;
  border-radius:18px;
  padding:14px 12px;
  background:#fff;
  border:1px solid rgba(201,187,230,.65);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.78);
}
.modal.lessonModal.oceanLessonModal .rafiqChoiceCard b{
  color:#23376e;
  font-size:14px;
  font-weight:900;
  margin-bottom:6px;
}
.modal.lessonModal.oceanLessonModal .rafiqChoiceCard span{
  color:#4b5563;
  font-size:12px;
  line-height:1.4;
  font-weight:700;
}
.modal.lessonModal.oceanLessonModal .rafiqChoiceCard.compare{border-color:#efc486;background:#fffaf3;}
.modal.lessonModal.oceanLessonModal .rafiqChoiceCard.group{border-color:#b8dfc1;background:#f4fbf5;}
.modal.lessonModal.oceanLessonModal .rafiqChoiceCard.spot{border-color:#cfc4f0;background:#f7f5ff;}
.modal.lessonModal.oceanLessonModal .rafiqChoiceCard.evidence{border-color:#f0d2cb;background:#fff9f8;}
.modal.lessonModal.oceanLessonModal .rafiqGoodPractice{
  margin-top:14px;
  border-radius:16px;
  border:1px solid rgba(229,190,195,.72);
  background:linear-gradient(180deg,#fff8f8 0%, #fff3f4 100%);
  color:#8a3840;
  padding:12px 14px;
  font-size:13px;
  line-height:1.45;
  font-weight:800;
}
.modal.lessonModal.oceanLessonModal .rafiqVisualInset .vizFlow{gap:10px;}
.modal.lessonModal.oceanLessonModal .rafiqVisualInset .vizCard,
.modal.lessonModal.oceanLessonModal .rafiqVisualInset .vizStoryPanel,
.modal.lessonModal.oceanLessonModal .rafiqVisualInset .figureQuad,
.modal.lessonModal.oceanLessonModal .rafiqVisualInset .axisPracticeCard{
  box-shadow:none;
}
.modal.lessonModal.oceanLessonModal .rafiqWhyRibbon{
  display:block;
  width:max-content;
  max-width:100%;
  margin:4px auto 18px;
  padding:10px 18px;
  border-radius:999px;
  background:linear-gradient(180deg,#8a3148 0%, #a04158 100%);
  color:#fff4d6;
  font-size:13px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  box-shadow:0 6px 14px rgba(141,42,49,.18);
}
.modal.lessonModal.oceanLessonModal .rafiqWhyText{
  color:#1f376f;
  font-size:17px;
  line-height:1.65;
  font-weight:850;
  margin-bottom:18px;
}
.modal.lessonModal.oceanLessonModal .rafiqRememberBox{
  margin-top:auto;
  border-radius:18px;
  border:1.5px dashed rgba(228,195,145,.82);
  background:linear-gradient(180deg,#fffdf7 0%, #fffaf1 100%);
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.modal.lessonModal.oceanLessonModal .rafiqRememberBox b{
  color:#29477d;
  font-size:13px;
  font-weight:900;
}
.modal.lessonModal.oceanLessonModal .rafiqRememberBox span{
  color:#334155;
  font-size:14px;
  line-height:1.55;
  font-weight:700;
}
.modal.lessonModal.oceanLessonModal .rafiqInfoGrid{
  margin-top:8px;
  margin-bottom:16px;
}
.modal.lessonModal.oceanLessonModal .rafiqInfoGrid .slideExample,
.modal.lessonModal.oceanLessonModal .rafiqInfoGrid .slideTakeaway{
  min-height:0;
  border-radius:18px;
  padding:14px 16px;
  font-size:14px;
  line-height:1.55;
  box-shadow:none;
}
.modal.lessonModal.oceanLessonModal .rafiqInfoGrid .slideExample{
  background:linear-gradient(180deg,#f4fbf5 0%, #edf8ef 100%);
  border:1px solid rgba(144,211,157,.62);
  color:#2d6c38;
}
.modal.lessonModal.oceanLessonModal .rafiqInfoGrid .slideTakeaway{
  background:linear-gradient(180deg,#f4f7ff 0%, #eef2ff 100%);
  border:1px solid rgba(170,188,243,.68);
  color:#28427b;
}
.modal.lessonModal.oceanLessonModal .rafiqStoryCard .slideMiniQuiz{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  border-radius:18px;
  background:linear-gradient(180deg,#fffaf1 0%, #fff7eb 100%);
  border:1.5px solid rgba(236,190,125,.82);
  color:#a24f17;
  padding:14px 16px;
}
.modal.lessonModal.oceanLessonModal .rafiqStoryCard .slideMiniQuiz .miniCheckMainV115,
.modal.lessonModal.oceanLessonModal .rafiqStoryCard .slideMiniQuiz .miniCheckPrompt{
  display:flex;
  align-items:flex-start;
  gap:8px;
  flex-wrap:wrap;
}
.modal.lessonModal.oceanLessonModal .rafiqStoryCard .slideMiniQuiz .miniCheckLabelV115,
.modal.lessonModal.oceanLessonModal .rafiqStoryCard .slideMiniQuiz .miniCheckPrompt b{
  color:#b25b1d;
  font-size:15px;
  font-weight:900;
}
.modal.lessonModal.oceanLessonModal .rafiqStoryCard .slideMiniQuiz .miniCheckQuestionV115,
.modal.lessonModal.oceanLessonModal .rafiqStoryCard .slideMiniQuiz .miniCheckQuestion,
.modal.lessonModal.oceanLessonModal .rafiqStoryCard .slideMiniQuiz{
  font-size:14px;
  line-height:1.5;
  font-weight:800;
}
.modal.lessonModal.oceanLessonModal .rafiqStoryCard .slideMiniQuiz .miniAnswerBtn,
.modal.lessonModal.oceanLessonModal .rafiqStoryCard .slideMiniQuiz .miniAnswerBtnV115{
  border-radius:999px;
  border:1px solid rgba(229,164,82,.95);
  background:#fffefa;
  color:#c06a2a;
  font-weight:900;
  padding:10px 16px;
  box-shadow:none;
}
.modal.lessonModal.oceanLessonModal .rafiqStoryCard .slideMiniQuiz .miniAnswerBox,
.modal.lessonModal.oceanLessonModal .rafiqStoryCard .slideMiniQuiz .miniAnswerBoxV115{
  grid-column:1 / -1;
  margin-top:0;
}
@media (max-width: 980px){
  .modal.lessonModal.oceanLessonModal .rafiqStorySplit{
    grid-template-columns:1fr;
  }
}
@media (max-width: 760px){
  .modal.lessonModal.oceanLessonModal .rafiqChoiceGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .modal.lessonModal.oceanLessonModal .rafiqStoryTopline .slideTitle{
    font-size:25px;
  }
  .modal.lessonModal.oceanLessonModal .rafiqStoryCard .slideMiniQuiz{
    grid-template-columns:1fr;
  }
}
@media (max-width: 560px){
  .modal.lessonModal.oceanLessonModal .rafiqStoryCard{
    padding:18px 16px 14px;
  }
  .modal.lessonModal.oceanLessonModal .rafiqStoryTopline{gap:10px;}
  .modal.lessonModal.oceanLessonModal .rafiqStoryTitleWrap{gap:8px;}
  .modal.lessonModal.oceanLessonModal .rafiqStoryTopline .slideTitle{font-size:22px;}
  .modal.lessonModal.oceanLessonModal .rafiqChoiceGrid{grid-template-columns:1fr;}
}

/* V2.34 Rafiq Step-by-Step live renderer styles: broad selectors so the new DOM cannot inherit the old flat card layout. */
#scaffoldSlide.rafiqStoryScaffoldV234{
  width:100%!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqStoryCardV234{
  border-radius:28px!important;
  padding:22px 24px 18px!important;
  background:linear-gradient(180deg,#fffdf7 0%, #fff9ef 100%)!important;
  border:2px solid rgba(208,181,116,.62)!important;
  box-shadow:0 14px 28px rgba(15,23,42,.08), inset 0 0 0 2px rgba(255,247,225,.92)!important;
  overflow:hidden!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqStoryTopline{
  display:flex!important;
  align-items:center!important;
  gap:16px!important;
  flex-wrap:wrap!important;
  margin-bottom:16px!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .slideCounter{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:108px!important;
  padding:9px 16px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#e9f4ff,#d9ecff)!important;
  border:1px solid rgba(120,167,217,.45)!important;
  color:#26436a!important;
  font-size:13px!important;
  font-weight:900!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqStoryTitleWrap{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqStorySpark{
  color:#d4a445!important;
  font-size:22px!important;
  line-height:1!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .slideTitle{
  margin:0!important;
  font-size:30px!important;
  line-height:1.15!important;
  color:#1e2b58!important;
  font-weight:950!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqStoryDefinition{
  margin:0 0 20px!important;
  border-radius:20px!important;
  border:1.5px solid rgba(231,169,176,.75)!important;
  background:linear-gradient(180deg,#fff8f8 0%, #fff3f4 100%)!important;
  color:#8d2a31!important;
  padding:16px 18px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  font-size:15px!important;
  line-height:1.55!important;
  font-weight:750!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqStoryDefinition b{
  text-transform:uppercase!important;
  font-size:13px!important;
  letter-spacing:.08em!important;
  color:#b2343c!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqStorySplit{
  display:grid!important;
  grid-template-columns:minmax(0,1.55fr) minmax(260px,.85fr)!important;
  gap:18px!important;
  margin-bottom:16px!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqStoryVisualPanel,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqStoryWhyPanel{
  border-radius:24px!important;
  background:linear-gradient(180deg,#fffef9 0%, #fffaf0 100%)!important;
  border:1.5px solid rgba(216,188,126,.52)!important;
  padding:18px!important;
  min-width:0!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqStepVisualHeader{
  text-align:center!important;
  color:#5a3b72!important;
  font-size:15px!important;
  font-weight:900!important;
  margin-bottom:14px!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceGrid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceCard{
  min-height:122px!important;
  border-radius:18px!important;
  padding:14px 12px!important;
  background:#fff!important;
  border:1px solid rgba(201,187,230,.65)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.78)!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceCard b{
  color:#23376e!important;
  font-size:14px!important;
  font-weight:900!important;
  margin-bottom:6px!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceCard span{
  color:#4b5563!important;
  font-size:12px!important;
  line-height:1.4!important;
  font-weight:700!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceCard.compare{border-color:#efc486!important;background:#fffaf3!important;}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceCard.group{border-color:#b8dfc1!important;background:#f4fbf5!important;}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceCard.spot{border-color:#cfc4f0!important;background:#f7f5ff!important;}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceCard.evidence{border-color:#f0d2cb!important;background:#fff9f8!important;}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqGoodPractice{
  margin-top:14px!important;
  border-radius:16px!important;
  border:1px solid rgba(229,190,195,.72)!important;
  background:linear-gradient(180deg,#fff8f8 0%, #fff3f4 100%)!important;
  color:#8a3840!important;
  padding:12px 14px!important;
  font-size:13px!important;
  line-height:1.45!important;
  font-weight:800!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqWhyRibbon{
  display:block!important;
  width:max-content!important;
  max-width:100%!important;
  margin:4px auto 18px!important;
  padding:10px 18px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#8a3148 0%, #a04158 100%)!important;
  color:#fff4d6!important;
  font-size:13px!important;
  font-weight:900!important;
  letter-spacing:.05em!important;
  text-transform:uppercase!important;
  box-shadow:0 6px 14px rgba(141,42,49,.18)!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqWhyText{
  color:#1f376f!important;
  font-size:17px!important;
  line-height:1.65!important;
  font-weight:850!important;
  margin-bottom:18px!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqRememberBox{
  margin-top:auto!important;
  border-radius:18px!important;
  border:1.5px dashed rgba(228,195,145,.82)!important;
  background:linear-gradient(180deg,#fffdf7 0%, #fffaf1 100%)!important;
  padding:14px 16px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqRememberBox b{
  color:#29477d!important;
  font-size:13px!important;
  font-weight:900!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqRememberBox span{
  color:#334155!important;
  font-size:14px!important;
  line-height:1.55!important;
  font-weight:700!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqInfoGrid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  margin:8px 0 16px!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .slideExample,
#scaffoldSlide.rafiqStoryScaffoldV234 .slideTakeaway{
  min-height:0!important;
  border-radius:18px!important;
  padding:14px 16px!important;
  font-size:14px!important;
  line-height:1.55!important;
  box-shadow:none!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .slideExample{
  background:linear-gradient(180deg,#f4fbf5 0%, #edf8ef 100%)!important;
  border:1px solid rgba(144,211,157,.62)!important;
  color:#2d6c38!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .slideTakeaway{
  background:linear-gradient(180deg,#f4f7ff 0%, #eef2ff 100%)!important;
  border:1px solid rgba(170,188,243,.68)!important;
  color:#28427b!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqMiniCheckV234,
#scaffoldSlide.rafiqStoryScaffoldV234 .slideMiniQuiz{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#fffaf1 0%, #fff7eb 100%)!important;
  border:1.5px solid rgba(236,190,125,.82)!important;
  color:#a24f17!important;
  padding:14px 16px!important;
  font-size:14px!important;
  line-height:1.5!important;
  font-weight:800!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .slideMiniQuiz .miniCheckLabelV115,
#scaffoldSlide.rafiqStoryScaffoldV234 .slideMiniQuiz .miniCheckPrompt b{
  color:#b25b1d!important;
  font-size:15px!important;
  font-weight:900!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .slideMiniQuiz .miniAnswerBtn,
#scaffoldSlide.rafiqStoryScaffoldV234 .slideMiniQuiz .miniAnswerBtnV115{
  border-radius:999px!important;
  border:1px solid rgba(229,164,82,.95)!important;
  background:#fffefa!important;
  color:#c06a2a!important;
  font-weight:900!important;
  padding:10px 16px!important;
  box-shadow:none!important;
}
#scaffoldSlide.rafiqStoryScaffoldV234 .slideMiniQuiz .miniAnswerBox,
#scaffoldSlide.rafiqStoryScaffoldV234 .slideMiniQuiz .miniAnswerBoxV115{
  grid-column:1 / -1!important;
  margin-top:0!important;
}
@media (max-width:980px){
  #scaffoldSlide.rafiqStoryScaffoldV234 .rafiqStorySplit{grid-template-columns:1fr!important;}
}
@media (max-width:760px){
  #scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #scaffoldSlide.rafiqStoryScaffoldV234 .rafiqStoryTopline .slideTitle{font-size:25px!important;}
  #scaffoldSlide.rafiqStoryScaffoldV234 .rafiqInfoGrid{grid-template-columns:1fr!important;}
  #scaffoldSlide.rafiqStoryScaffoldV234 .slideMiniQuiz{grid-template-columns:1fr!important;}
}
@media (max-width:560px){
  #scaffoldSlide.rafiqStoryScaffoldV234 .rafiqStoryCardV234{padding:18px 16px 14px!important;}
  #scaffoldSlide.rafiqStoryScaffoldV234 .rafiqStoryTopline .slideTitle{font-size:22px!important;}
  #scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceGrid{grid-template-columns:1fr!important;}
}

/* V2.36 Rafiq Step-by-Step actual-template styling.
   This styles the real existing scaffold DOM for only the first teacher so the visible screen
   matches the approved storybook/workbook template without changing other lessons. */
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  overflow:visible!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck > .lessonLead{
  display:none!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide{
  display:grid!important;
  grid-template-columns:minmax(0,1.55fr) minmax(250px,.85fr)!important;
  grid-template-rows:auto auto auto auto auto!important;
  gap:18px 20px!important;
  border-radius:30px!important;
  padding:30px 34px 26px!important;
  background:
    radial-gradient(circle at 96% 5%, rgba(245,190,83,.16) 0 10%, transparent 10.5%),
    linear-gradient(180deg,#fffdf7 0%,#fff8eb 100%)!important;
  border:2px solid rgba(201,162,91,.62)!important;
  box-shadow:0 18px 34px rgba(15,23,42,.12), inset 0 0 0 2px rgba(255,247,225,.92)!important;
  overflow:visible!important;
  position:relative!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide::before,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide::after{
  pointer-events:none!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide::before{
  content:''!important;
  position:absolute!important;
  inset:14px!important;
  border-radius:24px!important;
  border:1px solid rgba(191,149,63,.20)!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide::after{
  content:'✦ WHY THIS STEP MATTERS ✦\A\A Starting with a clear question helps you pick the right picture and avoid confusion.\A\A Remember\A A good question makes your answer stronger.'!important;
  white-space:pre-line!important;
  grid-column:2!important;
  grid-row:3!important;
  align-self:stretch!important;
  display:flex!important;
  border-radius:24px!important;
  border:1.5px solid rgba(216,188,126,.54)!important;
  background:linear-gradient(180deg,#fffef9 0%,#fff9ef 100%)!important;
  color:#1f376f!important;
  font-size:16px!important;
  line-height:1.6!important;
  font-weight:850!important;
  padding:34px 24px 22px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .slideCounter{
  grid-column:1!important;
  grid-row:1!important;
  justify-self:start!important;
  align-self:center!important;
  margin:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:110px!important;
  padding:8px 16px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#e9f4ff,#d9ecff)!important;
  border:1px solid rgba(120,167,217,.45)!important;
  color:#26436a!important;
  font-size:13px!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
  position:relative!important;
  z-index:1!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .slideTitle{
  grid-column:1 / -1!important;
  grid-row:1!important;
  margin:0 0 0 160px!important;
  align-self:center!important;
  color:#1e2b58!important;
  font-size:30px!important;
  line-height:1.12!important;
  font-weight:950!important;
  position:relative!important;
  z-index:1!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .slideTitle::before,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .slideTitle::after{
  content:'✦'!important;
  color:#d4a445!important;
  font-size:20px!important;
  margin:0 12px!important;
  vertical-align:middle!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .slideBody{
  grid-column:1 / -1!important;
  grid-row:2!important;
  margin:0!important;
  border-radius:20px!important;
  border:1.5px solid rgba(231,169,176,.75)!important;
  background:linear-gradient(180deg,#fff8f8 0%,#fff3f4 100%)!important;
  color:#8d2a31!important;
  padding:16px 18px!important;
  font-size:18px!important;
  line-height:1.55!important;
  font-weight:800!important;
  position:relative!important;
  z-index:1!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .slideBody::before{
  content:'CONCEPT DEFINITION'!important;
  display:block!important;
  margin:0 0 8px!important;
  color:#b2343c!important;
  font-size:13px!important;
  font-weight:950!important;
  letter-spacing:.08em!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .slideWhy{
  display:none!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .slideGraphic,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .richGraphic{
  grid-column:1!important;
  grid-row:3!important;
  margin:0!important;
  border-radius:24px!important;
  border:1.5px solid rgba(216,188,126,.54)!important;
  background:linear-gradient(180deg,#fffef9 0%,#fffaf0 100%)!important;
  padding:18px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)!important;
  min-height:250px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  position:relative!important;
  z-index:1!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .slideGraphic::before,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .richGraphic::before{
  content:'✦ Choose the picture job first... ✦'!important;
  display:block!important;
  text-align:center!important;
  color:#23376e!important;
  font-size:17px!important;
  font-weight:950!important;
  margin:0 0 16px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .vizFlow,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .figureQuad{
  gap:12px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .vizCard,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .plotFigureCard{
  min-height:112px!important;
  border-radius:18px!important;
  background:#fff!important;
  border:1px solid rgba(201,187,230,.65)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.78)!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .vizCardTitle,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .plotFigureTitle{
  color:#23376e!important;
  font-weight:950!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .graphicCaption{
  margin-top:14px!important;
  border-radius:16px!important;
  border:1px solid rgba(229,190,195,.72)!important;
  background:linear-gradient(180deg,#fff8f8 0%,#fff3f4 100%)!important;
  color:#8a3840!important;
  padding:12px 14px!important;
  font-size:13px!important;
  line-height:1.45!important;
  font-weight:850!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .slideInfoGrid{
  grid-column:1 / -1!important;
  grid-row:4!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:18px!important;
  margin:0!important;
  position:relative!important;
  z-index:1!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .slideExample,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .slideTakeaway{
  min-height:0!important;
  border-radius:18px!important;
  padding:16px 18px!important;
  font-size:16px!important;
  line-height:1.5!important;
  box-shadow:none!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .slideExample{
  background:linear-gradient(180deg,#f4fbf5 0%,#edf8ef 100%)!important;
  border:1px solid rgba(144,211,157,.62)!important;
  color:#1f6b39!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .slideTakeaway{
  background:linear-gradient(180deg,#f4f7ff 0%,#eef2ff 100%)!important;
  border:1px solid rgba(170,188,243,.68)!important;
  color:#28427b!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .slideMiniQuiz{
  grid-column:1 / -1!important;
  grid-row:5!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#fffaf1 0%,#fff7eb 100%)!important;
  border:1.5px solid rgba(236,190,125,.82)!important;
  color:#a24f17!important;
  padding:14px 16px!important;
  font-size:15px!important;
  line-height:1.5!important;
  font-weight:850!important;
  margin:0!important;
  position:relative!important;
  z-index:1!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .miniCheckPrompt,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .miniCheckMainV115{
  display:flex!important;
  gap:8px!important;
  align-items:flex-start!important;
  flex-wrap:wrap!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .miniCheckPrompt b,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .miniCheckLabelV115{
  color:#b25b1d!important;
  font-weight:950!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .miniAnswerBtn,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .miniAnswerBtnV115{
  border-radius:999px!important;
  border:1px solid rgba(229,164,82,.95)!important;
  background:#fffefa!important;
  color:#c06a2a!important;
  font-weight:900!important;
  padding:10px 16px!important;
  box-shadow:none!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .miniAnswerBox,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .miniAnswerBoxV115{
  grid-column:1 / -1!important;
  margin-top:0!important;
}
@media(max-width:980px){
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide{
    grid-template-columns:1fr!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide::after{
    grid-column:1!important;
    grid-row:4!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .slideInfoGrid{
    grid-row:5!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .slideMiniQuiz{
    grid-row:6!important;
  }
}
@media(max-width:760px){
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide{
    padding:22px 18px 18px!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .slideTitle{
    margin-left:0!important;
    grid-row:2!important;
    font-size:24px!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .slideBody{
    grid-row:3!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .slideGraphic,
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .richGraphic{
    grid-row:4!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide::after{
    grid-row:5!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .slideInfoGrid{
    grid-row:6!important;
    grid-template-columns:1fr!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .slideMiniQuiz{
    grid-row:7!important;
    grid-template-columns:1fr!important;
  }
}

/* V2.37 Story 1 Step-by-Step workbook template.
   Applies the approved storybook/workbook styling to every Story 1 teaching Step-by-Step screen.
   The content stays in the existing scaffold DOM; only the template/layout changes. */
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  overflow:visible!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck > .lessonLead{
  display:none!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide{
  display:grid!important;
  grid-template-columns:minmax(0,1.55fr) minmax(250px,.85fr)!important;
  grid-template-rows:auto auto auto auto auto!important;
  gap:18px 20px!important;
  border-radius:30px!important;
  padding:30px 34px 26px!important;
  background:
    radial-gradient(circle at 96% 5%, rgba(245,190,83,.16) 0 10%, transparent 10.5%),
    linear-gradient(180deg,#fffdf7 0%,#fff8eb 100%)!important;
  border:2px solid rgba(201,162,91,.62)!important;
  box-shadow:0 18px 34px rgba(15,23,42,.12), inset 0 0 0 2px rgba(255,247,225,.92)!important;
  overflow:visible!important;
  position:relative!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide::before,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide::after{
  pointer-events:none!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide::before{
  content:''!important;
  position:absolute!important;
  inset:14px!important;
  border-radius:24px!important;
  border:1px solid rgba(191,149,63,.20)!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide::after{
  content:'✦ WHY THIS STEP MATTERS ✦\A\A Starting with a clear question helps you pick the right picture and avoid confusion.\A\A Remember\A A good question makes your answer stronger.'!important;
  white-space:pre-line!important;
  grid-column:2!important;
  grid-row:3!important;
  align-self:stretch!important;
  display:flex!important;
  border-radius:24px!important;
  border:1.5px solid rgba(216,188,126,.54)!important;
  background:linear-gradient(180deg,#fffef9 0%,#fff9ef 100%)!important;
  color:#1f376f!important;
  font-size:16px!important;
  line-height:1.6!important;
  font-weight:850!important;
  padding:34px 24px 22px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .slideCounter{
  grid-column:1!important;
  grid-row:1!important;
  justify-self:start!important;
  align-self:center!important;
  margin:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:110px!important;
  padding:8px 16px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#e9f4ff,#d9ecff)!important;
  border:1px solid rgba(120,167,217,.45)!important;
  color:#26436a!important;
  font-size:13px!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
  position:relative!important;
  z-index:1!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .slideTitle{
  grid-column:1 / -1!important;
  grid-row:1!important;
  margin:0 0 0 160px!important;
  align-self:center!important;
  color:#1e2b58!important;
  font-size:30px!important;
  line-height:1.12!important;
  font-weight:950!important;
  position:relative!important;
  z-index:1!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .slideTitle::before,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .slideTitle::after{
  content:'✦'!important;
  color:#d4a445!important;
  font-size:20px!important;
  margin:0 12px!important;
  vertical-align:middle!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .slideBody{
  grid-column:1 / -1!important;
  grid-row:2!important;
  margin:0!important;
  border-radius:20px!important;
  border:1.5px solid rgba(231,169,176,.75)!important;
  background:linear-gradient(180deg,#fff8f8 0%,#fff3f4 100%)!important;
  color:#8d2a31!important;
  padding:16px 18px!important;
  font-size:18px!important;
  line-height:1.55!important;
  font-weight:800!important;
  position:relative!important;
  z-index:1!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .slideBody::before{
  content:'CONCEPT DEFINITION'!important;
  display:block!important;
  margin:0 0 8px!important;
  color:#b2343c!important;
  font-size:13px!important;
  font-weight:950!important;
  letter-spacing:.08em!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .slideWhy{
  display:none!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .slideGraphic,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .richGraphic{
  grid-column:1!important;
  grid-row:3!important;
  margin:0!important;
  border-radius:24px!important;
  border:1.5px solid rgba(216,188,126,.54)!important;
  background:linear-gradient(180deg,#fffef9 0%,#fffaf0 100%)!important;
  padding:18px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)!important;
  min-height:250px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  position:relative!important;
  z-index:1!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .slideGraphic::before,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .richGraphic::before{
  content:'✦ Look at the visual example first... ✦'!important;
  display:block!important;
  text-align:center!important;
  color:#23376e!important;
  font-size:17px!important;
  font-weight:950!important;
  margin:0 0 16px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .vizFlow,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .figureQuad{
  gap:12px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .vizCard,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .plotFigureCard{
  min-height:112px!important;
  border-radius:18px!important;
  background:#fff!important;
  border:1px solid rgba(201,187,230,.65)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.78)!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .vizCardTitle,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .plotFigureTitle{
  color:#23376e!important;
  font-weight:950!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .graphicCaption{
  margin-top:14px!important;
  border-radius:16px!important;
  border:1px solid rgba(229,190,195,.72)!important;
  background:linear-gradient(180deg,#fff8f8 0%,#fff3f4 100%)!important;
  color:#8a3840!important;
  padding:12px 14px!important;
  font-size:13px!important;
  line-height:1.45!important;
  font-weight:850!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .slideInfoGrid{
  grid-column:1 / -1!important;
  grid-row:4!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:18px!important;
  margin:0!important;
  position:relative!important;
  z-index:1!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .slideExample,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .slideTakeaway{
  min-height:0!important;
  border-radius:18px!important;
  padding:16px 18px!important;
  font-size:16px!important;
  line-height:1.5!important;
  box-shadow:none!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .slideExample{
  background:linear-gradient(180deg,#f4fbf5 0%,#edf8ef 100%)!important;
  border:1px solid rgba(144,211,157,.62)!important;
  color:#1f6b39!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .slideTakeaway{
  background:linear-gradient(180deg,#f4f7ff 0%,#eef2ff 100%)!important;
  border:1px solid rgba(170,188,243,.68)!important;
  color:#28427b!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .slideMiniQuiz{
  grid-column:1 / -1!important;
  grid-row:5!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#fffaf1 0%,#fff7eb 100%)!important;
  border:1.5px solid rgba(236,190,125,.82)!important;
  color:#a24f17!important;
  padding:14px 16px!important;
  font-size:15px!important;
  line-height:1.5!important;
  font-weight:850!important;
  margin:0!important;
  position:relative!important;
  z-index:1!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .miniCheckPrompt,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .miniCheckMainV115{
  display:flex!important;
  gap:8px!important;
  align-items:flex-start!important;
  flex-wrap:wrap!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .miniCheckPrompt b,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .miniCheckLabelV115{
  color:#b25b1d!important;
  font-weight:950!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .miniAnswerBtn,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .miniAnswerBtnV115{
  border-radius:999px!important;
  border:1px solid rgba(229,164,82,.95)!important;
  background:#fffefa!important;
  color:#c06a2a!important;
  font-weight:900!important;
  padding:10px 16px!important;
  box-shadow:none!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .miniAnswerBox,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .miniAnswerBoxV115{
  grid-column:1 / -1!important;
  margin-top:0!important;
}
@media(max-width:980px){
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide{
    grid-template-columns:1fr!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide::after{
    grid-column:1!important;
    grid-row:4!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .slideInfoGrid{
    grid-row:5!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .slideMiniQuiz{
    grid-row:6!important;
  }
}
@media(max-width:760px){
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide{
    padding:22px 18px 18px!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .slideTitle{
    margin-left:0!important;
    grid-row:2!important;
    font-size:24px!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .slideBody{
    grid-row:3!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .slideGraphic,
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .richGraphic{
    grid-row:4!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide::after{
    grid-row:5!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .slideInfoGrid{
    grid-row:6!important;
    grid-template-columns:1fr!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .slideMiniQuiz{
    grid-row:7!important;
    grid-template-columns:1fr!important;
  }
}


/* V2.37 dynamic why-panel override: use each slide's actual Why it helps text instead of one fixed message. */
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide::after{
  display:none!important;
  content:''!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .slideWhy{
  grid-column:2!important;
  grid-row:3!important;
  align-self:stretch!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  border-radius:24px!important;
  border:1.5px solid rgba(216,188,126,.54)!important;
  background:linear-gradient(180deg,#fffef9 0%,#fff9ef 100%)!important;
  color:#1f376f!important;
  font-size:16px!important;
  line-height:1.6!important;
  font-weight:850!important;
  padding:30px 24px 22px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)!important;
  position:relative!important;
  z-index:1!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .slideWhy::before{
  content:'✦ WHY THIS STEP MATTERS ✦'!important;
  display:block!important;
  width:max-content!important;
  max-width:100%!important;
  margin:0 auto 20px!important;
  padding:9px 18px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#8a3148 0%,#a04158 100%)!important;
  color:#fff4d6!important;
  font-size:12px!important;
  font-weight:950!important;
  letter-spacing:.05em!important;
  text-transform:uppercase!important;
  box-shadow:0 6px 14px rgba(141,42,49,.18)!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .slideWhy b{
  display:none!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .slideWhy::after{
  content:'Remember: use this step before answering the mini-check.'!important;
  display:block!important;
  margin-top:20px!important;
  border-radius:18px!important;
  border:1.5px dashed rgba(228,195,145,.82)!important;
  background:linear-gradient(180deg,#fffdf7 0%,#fffaf1 100%)!important;
  color:#334155!important;
  padding:13px 15px!important;
  font-size:13px!important;
  line-height:1.45!important;
  font-weight:750!important;
}
@media(max-width:980px){
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .slideWhy{
    grid-column:1!important;
    grid-row:4!important;
  }
}
@media(max-width:760px){
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide > .slideWhy{
    grid-row:5!important;
  }
}

/* Keep Rafiq's first-step visual title specific while the rest of Story 1 uses the generic workbook label. */
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .slideGraphic::before,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .richGraphic::before{
  content:'✦ Choose the picture job first... ✦'!important;
}

/* V2.38 fix: heatmap cells, bounded Step-by-Step plots, and score display safety
   - .hot was a global map-hotspot class; heatmap cells also used .hot for color, causing floating red 1.0 panels.
   - Step-by-Step dot plots used fixed pixel dot positions that could overflow narrow cards.
*/
.modal.lessonModal.oceanLessonModal .startHereHeatmapMini .cell.hot,
.modal.lessonModal.oceanLessonModal .startHereHeatmapMini .cell.warm,
.modal.lessonModal.oceanLessonModal .startHereHeatmapMini .cell.cool,
.modal.lessonModal.oceanLessonModal .startHereHeatmapMini .cell.pale,
.pixelGrid span.hot{
  position:static!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  width:auto!important;
  min-width:0!important;
  border-radius:10px!important;
  cursor:default!important;
  transform:none!important;
  box-shadow:none!important;
}
.modal.lessonModal.oceanLessonModal .startHereHeatmapMini .cell.hot{
  height:40px!important;
  border:1px solid rgba(255,255,255,.35)!important;
  background:#de6f6f!important;
  color:#fff!important;
}
.modal.lessonModal.oceanLessonModal .startHereHeatmapMini.genes .cell.hot{height:32px!important;}

.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .plotFigureCard,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .slideGraphic,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .richGraphic{
  overflow:hidden!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .umapGraphic,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .pcaGraphic,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoGraphic{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  min-height:126px!important;
  height:clamp(126px, 14vw, 166px)!important;
  margin:0 auto!important;
  overflow:hidden!important;
  border-radius:16px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1CenteredUmap,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .centeredTeachingFigure{
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .miniAxes{
  inset:22px 24px 36px 32px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .miniAxes .xlab{
  right:2px!important;
  bottom:-22px!important;
  max-width:54%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  font-size:10px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .miniAxes .ylab{
  left:-24px!important;
  top:0!important;
  white-space:nowrap!important;
  font-size:10px!important;
}

/* UMAP clusters: percent-based anchor positions keep every dot inside narrow cards. */
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .umapDots.clusterA{left:18%!important;top:40%!important;}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .umapDots.clusterB{left:64%!important;top:36%!important;}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .umapDots.clusterC{left:42%!important;top:70%!important;}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .umapDots i{width:9px!important;height:9px!important;}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .umapDots.clusterA i:nth-child(1){left:0!important;top:8px!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .umapDots.clusterA i:nth-child(2){left:18px!important;top:0!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .umapDots.clusterA i:nth-child(3){left:32px!important;top:14px!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .umapDots.clusterA i:nth-child(4){left:10px!important;top:23px!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .umapDots.clusterA i:nth-child(5){left:25px!important;top:32px!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .umapDots.clusterA i:nth-child(6){left:41px!important;top:24px!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .umapDots.clusterB i:nth-child(1){left:0!important;top:6px!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .umapDots.clusterB i:nth-child(2){left:15px!important;top:20px!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .umapDots.clusterB i:nth-child(3){left:30px!important;top:4px!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .umapDots.clusterB i:nth-child(4){left:40px!important;top:25px!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .umapDots.clusterB i:nth-child(5){left:48px!important;top:10px!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .umapDots.clusterB i:nth-child(6){left:20px!important;top:37px!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .umapDots.clusterC i:nth-child(1){left:0!important;top:8px!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .umapDots.clusterC i:nth-child(2){left:15px!important;top:0!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .umapDots.clusterC i:nth-child(3){left:28px!important;top:13px!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .umapDots.clusterC i:nth-child(4){left:11px!important;top:25px!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .umapDots.clusterC i:nth-child(5){left:32px!important;top:27px!important}

/* PCA groups: shrink and anchor both groups inside the plot frame. */
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .pcaDots.day1{left:23%!important;top:48%!important;}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .pcaDots.day2{left:68%!important;top:42%!important;}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .pcaDots i{width:9px!important;height:9px!important;}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .pcaDots.day1 i:nth-child(1),
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .pcaDots.day2 i:nth-child(1){left:0!important;top:24px!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .pcaDots.day1 i:nth-child(2),
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .pcaDots.day2 i:nth-child(2){left:14px!important;top:10px!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .pcaDots.day1 i:nth-child(3),
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .pcaDots.day2 i:nth-child(3){left:28px!important;top:0!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .pcaDots.day1 i:nth-child(4),
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .pcaDots.day2 i:nth-child(4){left:40px!important;top:18px!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .pcaDots.day1 i:nth-child(5),
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .pcaDots.day2 i:nth-child(5){left:17px!important;top:33px!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .pcaDots.day1 i:nth-child(6),
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .pcaDots.day2 i:nth-child(6){left:48px!important;top:29px!important}

/* Volcano dot groups: use relative plotting bands instead of fixed 200px child offsets. */
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoDots.low,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoDots.high{
  left:12%!important;
  right:12%!important;
  width:76%!important;
  height:72%!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoDots.low{top:28%!important;}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoDots.high{top:8%!important;}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoDots i{width:9px!important;height:9px!important;}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoDots.low i:nth-child(1){left:14%!important;top:58%!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoDots.low i:nth-child(2){left:36%!important;top:70%!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoDots.low i:nth-child(3){left:62%!important;top:75%!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoDots.low i:nth-child(4){left:86%!important;top:66%!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoDots.high i:nth-child(1){left:12%!important;top:64%!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoDots.high i:nth-child(2){left:38%!important;top:33%!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoDots.high i:nth-child(3){left:64%!important;top:20%!important}.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoDots.high i:nth-child(4){left:88%!important;top:38%!important}

.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1VolcanoPlotFixed{
  width:100%!important;
  max-width:380px!important;
  min-height:166px!important;
  height:clamp(166px, 16vw, 190px)!important;
  overflow:hidden!important;
  padding-bottom:0!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1VolcanoPlotFixed .miniAxes{
  inset:44px 28px 52px 42px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1VolcanoPlotFixed .miniAxes .ylab{
  left:-32px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1VolcanoPlotFixed .vDot{
  width:9px!important;
  height:9px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1VolcanoPlotFixed .graphicCaption{
  position:absolute!important;
  left:18px!important;
  right:18px!important;
  top:14px!important;
  margin:0!important;
  padding:8px 10px!important;
  max-height:36px!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  font-size:12px!important;
  line-height:1.2!important;
  z-index:1!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1VolcanoPlotFixed .candidateZone{
  bottom:10px!important;
  max-width:42%!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
@media(max-width:980px){
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .umapGraphic,
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .pcaGraphic,
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoGraphic{
    height:150px!important;
  }
}


/* V2.39 follow-up polish: dynamic Rafiq header/mini-figures and cleaner plot placement */
.modal.lessonModal.oceanLessonModal .figureQuad.story1IntegratedFigureQuad .graphicCaption{
  white-space:normal!important;
  line-height:1.25!important;
  font-size:12px!important;
  text-align:center!important;
}
.modal.lessonModal.oceanLessonModal .figureQuad.story1IntegratedFigureQuad .plotFigureCard:nth-child(4) .graphicCaption{
  font-size:11px!important;
  padding:8px 10px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .pcaGraphic .graphicCaption{
  max-width:calc(100% - 24px)!important;
  margin:10px auto 0!important;
  text-align:center!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1VolcanoPlotFixed .candidateZone{
  bottom:8px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1VolcanoPlotFixed .candidateZone.left{
  left:34px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1VolcanoPlotFixed .candidateZone.right{
  right:16px!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqVisualGridExtra{
  display:block!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqVisualGridExtra.hasExtras{
  display:grid!important;
  grid-template-columns:minmax(0,1.2fr) minmax(168px,.8fr)!important;
  gap:14px!important;
  align-items:stretch!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceGridMain{
  margin:0!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniFigureRail{
  display:grid!important;
  grid-template-rows:1fr 1fr!important;
  gap:12px!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqTinyFigureCard{
  border:1px solid rgba(201,187,230,.65)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#fff 0%,#f9fbff 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75)!important;
  padding:12px 12px 10px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  gap:8px!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqTinyFigureTitle{
  color:#23376e!important;
  font-size:12px!important;
  font-weight:900!important;
  text-align:center!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqTinyFigureNote{
  color:#475569!important;
  font-size:11px!important;
  line-height:1.25!important;
  text-align:center!important;
  font-weight:750!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniBars{
  width:84px!important;
  height:52px!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:8px!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniBars i{
  display:block!important;
  width:18px!important;
  border-radius:10px 10px 4px 4px!important;
  background:linear-gradient(180deg,#a5b4fc 0%,#60a5fa 100%)!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniBars .b1{height:28px!important}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniBars .b2{height:42px!important}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniBars .b3{height:20px!important}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniScatter{
  position:relative!important;
  width:92px!important;
  height:56px!important;
  border:1px solid rgba(148,163,184,.38)!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#fff,#f8fbff)!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniScatter i{
  position:absolute!important;
  width:8px!important;
  height:8px!important;
  border-radius:999px!important;
  background:#60a5fa!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniScatter .d1{left:12px!important;top:34px!important}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniScatter .d2{left:28px!important;top:26px!important}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniScatter .d3{left:40px!important;top:36px!important}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniScatter .d4{left:54px!important;top:20px!important}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniScatter .d5{left:67px!important;top:32px!important}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniScatter .d6{left:70px!important;top:9px!important;background:#f59e0b!important;box-shadow:0 0 0 3px rgba(245,158,11,.15)!important}
@media(max-width:920px){
  .modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqVisualGridExtra.hasExtras{
    grid-template-columns:1fr!important;
  }
  .modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniFigureRail{
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:none!important;
  }
}
@media(max-width:620px){
  .modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniFigureRail{
    grid-template-columns:1fr!important;
  }
}


/* V2.40 meticulous plot polish: keep labels separate from dots and guarantee Rafiq mini-figures are visible. */

/* Rafiq: make the choice visual use the empty right side of the visual card. */
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqVisualGridExtraV240.hasExtras{
  display:grid!important;
  grid-template-columns:minmax(0,1.18fr) minmax(155px,.82fr)!important;
  gap:14px!important;
  align-items:stretch!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqVisualGridExtraV240 .rafiqChoiceGridMain{
  margin:0!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniFigureRailV240{
  display:grid!important;
  grid-template-rows:1fr 1fr!important;
  gap:10px!important;
  min-width:0!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqTinyFigureCard{
  border:1.5px solid rgba(201,187,230,.68)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75)!important;
  padding:10px!important;
  min-height:98px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  gap:7px!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqTinyFigureTitle{
  color:#23376e!important;
  font-size:12px!important;
  font-weight:950!important;
  text-align:center!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqTinyFigureNote{
  color:#475569!important;
  font-size:11px!important;
  line-height:1.25!important;
  text-align:center!important;
  font-weight:750!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniBars{
  width:82px!important;
  height:48px!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  gap:8px!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniBars i{
  display:block!important;
  width:18px!important;
  border-radius:10px 10px 4px 4px!important;
  background:linear-gradient(180deg,#a5b4fc 0%,#60a5fa 100%)!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniBars .b1{height:26px!important}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniBars .b2{height:42px!important}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniBars .b3{height:20px!important}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniScatter{
  position:relative!important;
  width:90px!important;
  height:52px!important;
  border:1px solid rgba(148,163,184,.38)!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#fff,#f8fbff)!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniScatter i{
  position:absolute!important;
  width:8px!important;
  height:8px!important;
  border-radius:999px!important;
  background:#60a5fa!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniScatter .d1{left:12px!important;top:32px!important}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniScatter .d2{left:28px!important;top:25px!important}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniScatter .d3{left:40px!important;top:35px!important}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniScatter .d4{left:54px!important;top:20px!important}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniScatter .d5{left:66px!important;top:31px!important}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniScatter .d6{left:70px!important;top:9px!important;background:#f59e0b!important;box-shadow:0 0 0 3px rgba(245,158,11,.15)!important}

/* Layla: the label stays at the top, clusters sit below it. */
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1CenteredUmap .umapGraphic{
  height:178px!important;
  min-height:178px!important;
  max-width:420px!important;
  overflow:hidden!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1CenteredUmap .graphicCaption{
  position:absolute!important;
  left:18px!important;
  right:18px!important;
  top:14px!important;
  margin:0!important;
  padding:8px 10px!important;
  z-index:2!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1CenteredUmap .umapDots.clusterA{left:20%!important;top:82px!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1CenteredUmap .umapDots.clusterB{left:63%!important;top:80px!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1CenteredUmap .umapDots.clusterC{left:43%!important;top:122px!important}

/* Idris: shrink the PCA caption so it does not collide with the PC2 label. */
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .pcaGraphic .graphicCaption{
  position:absolute!important;
  left:70px!important;
  right:36px!important;
  top:28px!important;
  margin:0!important;
  padding:8px 12px!important;
  max-height:38px!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  font-size:12px!important;
  line-height:1.2!important;
  z-index:2!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .pcaGraphic .miniAxes{
  inset:30px 28px 38px 46px!important;
}

/* Mira volcano: move the caption above the actual plotting field and keep all dots inside the axes. */
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1VolcanoPlotFixed{
  height:205px!important;
  min-height:205px!important;
  max-width:430px!important;
  overflow:hidden!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1VolcanoPlotFixed .graphicCaption{
  position:absolute!important;
  left:22px!important;
  right:22px!important;
  top:14px!important;
  margin:0!important;
  padding:7px 10px!important;
  max-height:34px!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  font-size:12px!important;
  line-height:1.15!important;
  z-index:3!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1VolcanoPlotFixed .miniAxes{
  inset:62px 30px 46px 46px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1VolcanoPlotFixed .vDot:nth-of-type(1){left:26%!important;top:78%!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1VolcanoPlotFixed .vDot:nth-of-type(2){left:42%!important;top:84%!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1VolcanoPlotFixed .vDot:nth-of-type(3){left:57%!important;top:82%!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1VolcanoPlotFixed .vDot:nth-of-type(4){left:74%!important;top:77%!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1VolcanoPlotFixed .vDot:nth-of-type(5){left:22%!important;top:61%!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1VolcanoPlotFixed .vDot:nth-of-type(6){left:38%!important;top:52%!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1VolcanoPlotFixed .vDot:nth-of-type(7){left:61%!important;top:48%!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .story1VolcanoPlotFixed .vDot:nth-of-type(8){left:78%!important;top:57%!important}

/* Sultan integrated panel: UMAP and volcano labels live above the dots, not on top of them. */
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .figureQuad.story1IntegratedFigureQuad .umapGraphic,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .figureQuad.story1IntegratedFigureQuad .volcanoGraphic{
  height:190px!important;
  min-height:190px!important;
  overflow:hidden!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .figureQuad.story1IntegratedFigureQuad .umapGraphic .graphicCaption,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .figureQuad.story1IntegratedFigureQuad .volcanoGraphic .graphicCaption{
  position:absolute!important;
  left:22px!important;
  right:22px!important;
  top:18px!important;
  margin:0!important;
  padding:8px 10px!important;
  max-height:44px!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  font-size:12px!important;
  line-height:1.2!important;
  z-index:3!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .figureQuad.story1IntegratedFigureQuad .umapDots.clusterA{left:19%!important;top:88px!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .figureQuad.story1IntegratedFigureQuad .umapDots.clusterB{left:62%!important;top:82px!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .figureQuad.story1IntegratedFigureQuad .umapDots.clusterC{left:42%!important;top:126px!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .figureQuad.story1IntegratedFigureQuad .volcanoGraphic .miniAxes{
  inset:72px 30px 32px 48px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .figureQuad.story1IntegratedFigureQuad .volcanoDots.low{
  left:16%!important;
  top:116px!important;
  width:68%!important;
  height:48px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .figureQuad.story1IntegratedFigureQuad .volcanoDots.high{
  left:16%!important;
  top:76px!important;
  width:68%!important;
  height:58px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .figureQuad.story1IntegratedFigureQuad .volcanoDots.low i:nth-child(1){left:8%!important;top:18px!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .figureQuad.story1IntegratedFigureQuad .volcanoDots.low i:nth-child(2){left:32%!important;top:31px!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .figureQuad.story1IntegratedFigureQuad .volcanoDots.low i:nth-child(3){left:58%!important;top:35px!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .figureQuad.story1IntegratedFigureQuad .volcanoDots.low i:nth-child(4){left:84%!important;top:25px!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .figureQuad.story1IntegratedFigureQuad .volcanoDots.high i:nth-child(1){left:10%!important;top:44px!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .figureQuad.story1IntegratedFigureQuad .volcanoDots.high i:nth-child(2){left:36%!important;top:24px!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .figureQuad.story1IntegratedFigureQuad .volcanoDots.high i:nth-child(3){left:62%!important;top:12px!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .figureQuad.story1IntegratedFigureQuad .volcanoDots.high i:nth-child(4){left:86%!important;top:28px!important}

@media(max-width:920px){
  .modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqVisualGridExtraV240.hasExtras{
    grid-template-columns:1fr!important;
  }
  .modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniFigureRailV240{
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:none!important;
  }
}


/* V2.41 Rafiq active-renderer fix: visible two-column choice visual with right-side mini figures. */
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqVisualGridExtraV241.hasExtras,
#scaffoldSlide.rafiqStoryScaffold .rafiqVisualGridExtraV241.hasExtras,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqVisualGridExtraV241.hasExtras,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqVisualGridExtraV241.hasExtras{
  display:grid!important;
  grid-template-columns:minmax(0,1.18fr) minmax(150px,.82fr)!important;
  gap:14px!important;
  align-items:stretch!important;
  width:100%!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqVisualGridExtraV241 .rafiqChoiceGridMain,
#scaffoldSlide.rafiqStoryScaffold .rafiqVisualGridExtraV241 .rafiqChoiceGridMain{
  margin:0!important;
  min-width:0!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniFigureRailV241,
#scaffoldSlide.rafiqStoryScaffold .rafiqMiniFigureRailV241{
  display:grid!important;
  grid-template-rows:1fr 1fr!important;
  gap:10px!important;
  min-width:0!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniFigureRailV241 .rafiqTinyFigureCard,
#scaffoldSlide.rafiqStoryScaffold .rafiqMiniFigureRailV241 .rafiqTinyFigureCard{
  border:1.5px solid rgba(201,187,230,.68)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75)!important;
  padding:10px!important;
  min-height:96px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  gap:7px!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniFigureRailV241 .rafiqTinyFigureTitle,
#scaffoldSlide.rafiqStoryScaffold .rafiqMiniFigureRailV241 .rafiqTinyFigureTitle{
  color:#23376e!important;
  font-size:12px!important;
  font-weight:950!important;
  text-align:center!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniFigureRailV241 .rafiqTinyFigureNote,
#scaffoldSlide.rafiqStoryScaffold .rafiqMiniFigureRailV241 .rafiqTinyFigureNote{
  color:#475569!important;
  font-size:11px!important;
  line-height:1.25!important;
  text-align:center!important;
  font-weight:750!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniFigureRailV241 .rafiqMiniBars,
#scaffoldSlide.rafiqStoryScaffold .rafiqMiniFigureRailV241 .rafiqMiniBars{
  width:82px!important;
  height:48px!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  gap:8px!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniFigureRailV241 .rafiqMiniBars i,
#scaffoldSlide.rafiqStoryScaffold .rafiqMiniFigureRailV241 .rafiqMiniBars i{
  display:block!important;
  width:18px!important;
  border-radius:10px 10px 4px 4px!important;
  background:linear-gradient(180deg,#a5b4fc 0%,#60a5fa 100%)!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniFigureRailV241 .rafiqMiniBars .b1,
#scaffoldSlide.rafiqStoryScaffold .rafiqMiniFigureRailV241 .rafiqMiniBars .b1{height:26px!important}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniFigureRailV241 .rafiqMiniBars .b2,
#scaffoldSlide.rafiqStoryScaffold .rafiqMiniFigureRailV241 .rafiqMiniBars .b2{height:42px!important}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniFigureRailV241 .rafiqMiniBars .b3,
#scaffoldSlide.rafiqStoryScaffold .rafiqMiniFigureRailV241 .rafiqMiniBars .b3{height:20px!important}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniFigureRailV241 .rafiqMiniScatter,
#scaffoldSlide.rafiqStoryScaffold .rafiqMiniFigureRailV241 .rafiqMiniScatter{
  position:relative!important;
  width:90px!important;
  height:52px!important;
  border:1px solid rgba(148,163,184,.38)!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#fff,#f8fbff)!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniFigureRailV241 .rafiqMiniScatter i,
#scaffoldSlide.rafiqStoryScaffold .rafiqMiniFigureRailV241 .rafiqMiniScatter i{
  position:absolute!important;
  width:8px!important;
  height:8px!important;
  border-radius:999px!important;
  background:#60a5fa!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniFigureRailV241 .rafiqMiniScatter .d1,
#scaffoldSlide.rafiqStoryScaffold .rafiqMiniFigureRailV241 .rafiqMiniScatter .d1{left:12px!important;top:32px!important}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniFigureRailV241 .rafiqMiniScatter .d2,
#scaffoldSlide.rafiqStoryScaffold .rafiqMiniFigureRailV241 .rafiqMiniScatter .d2{left:28px!important;top:25px!important}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniFigureRailV241 .rafiqMiniScatter .d3,
#scaffoldSlide.rafiqStoryScaffold .rafiqMiniFigureRailV241 .rafiqMiniScatter .d3{left:40px!important;top:35px!important}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniFigureRailV241 .rafiqMiniScatter .d4,
#scaffoldSlide.rafiqStoryScaffold .rafiqMiniFigureRailV241 .rafiqMiniScatter .d4{left:54px!important;top:20px!important}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniFigureRailV241 .rafiqMiniScatter .d5,
#scaffoldSlide.rafiqStoryScaffold .rafiqMiniFigureRailV241 .rafiqMiniScatter .d5{left:66px!important;top:31px!important}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniFigureRailV241 .rafiqMiniScatter .d6,
#scaffoldSlide.rafiqStoryScaffold .rafiqMiniFigureRailV241 .rafiqMiniScatter .d6{
  left:70px!important;
  top:9px!important;
  background:#f59e0b!important;
  box-shadow:0 0 0 3px rgba(245,158,11,.15)!important;
}

@media(max-width:920px){
  .modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqVisualGridExtraV241.hasExtras,
  #scaffoldSlide.rafiqStoryScaffold .rafiqVisualGridExtraV241.hasExtras{
    grid-template-columns:1fr!important;
  }
  .modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqMiniFigureRailV241,
  #scaffoldSlide.rafiqStoryScaffold .rafiqMiniFigureRailV241{
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:none!important;
  }
}

/* Targeted Mira volcano/log2 cleanup: Step 1, Step 4, and Step 8 only. */
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoStepFix.plotFigureCard{
  min-height:186px!important;
  overflow:visible!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoStepFix .volcanoGraphic{
  height:166px!important;
  min-height:166px!important;
  width:100%!important;
  overflow:hidden!important;
  border-radius:16px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoStepFix .volcanoGraphic .graphicCaption{
  position:absolute!important;
  left:58px!important;
  right:18px!important;
  top:10px!important;
  margin:0!important;
  padding:6px 10px!important;
  max-height:32px!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  font-size:12px!important;
  line-height:1.15!important;
  z-index:4!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoStepFix .volcanoGraphic .miniAxes{
  inset:56px 26px 32px 42px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoStepFix .volcanoDots.low,
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoStepFix .volcanoDots.high{
  left:14%!important;
  right:12%!important;
  width:74%!important;
  height:52%!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoStepFix .volcanoDots.low{top:42%!important;}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoStepFix .volcanoDots.high{top:34%!important;}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoStepFix .volcanoDots i{
  width:9px!important;
  height:9px!important;
  box-shadow:0 0 0 3px rgba(15,23,42,.06)!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoStepFix .volcanoDots.low i:nth-child(1){left:16%!important;top:58%!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoStepFix .volcanoDots.low i:nth-child(2){left:38%!important;top:70%!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoStepFix .volcanoDots.low i:nth-child(3){left:61%!important;top:73%!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoStepFix .volcanoDots.low i:nth-child(4){left:84%!important;top:64%!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoStepFix .volcanoDots.high i:nth-child(1){left:10%!important;top:56%!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoStepFix .volcanoDots.high i:nth-child(2){left:34%!important;top:28%!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoStepFix .volcanoDots.high i:nth-child(3){left:64%!important;top:18%!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .volcanoStepFix .volcanoDots.high i:nth-child(4){left:88%!important;top:34%!important}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .log2NumberIcon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:46px!important;
  height:34px!important;
  padding:0 8px!important;
  border-radius:14px!important;
  font-size:25px!important;
  line-height:1!important;
  font-weight:1000!important;
  opacity:1!important;
  color:#1e3a8a!important;
  background:#eff6ff!important;
  border:1px solid rgba(59,130,246,.28)!important;
  text-shadow:none!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .log2NumberIcon.positive{
  color:#166534!important;
  background:#ecfdf5!important;
  border-color:rgba(34,197,94,.30)!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .log2NumberIcon.negative{
  color:#991b1b!important;
  background:#fff1f2!important;
  border-color:rgba(244,63,94,.30)!important;
}

/* V2.49 Game Guide-only redesign: one scoped, colorful manual section. */
.modal.gameManualModal{
  background:
    radial-gradient(circle at 50% 8%, rgba(253,224,71,.28), transparent 24%),
    radial-gradient(circle at 84% 16%, rgba(96,165,250,.24), transparent 28%),
    linear-gradient(180deg, rgba(15,23,42,.72), rgba(2,6,23,.88))!important;
  backdrop-filter:blur(8px)!important;
}
.modal.gameManualModal .modalBox{
  width:min(96vw,980px)!important;
  max-width:980px!important;
  max-height:92vh!important;
  overflow:auto!important;
  padding:20px!important;
  border-radius:32px!important;
  color:#172554!important;
  background:
    radial-gradient(circle at 92% 12%, rgba(253,224,71,.42) 0 12%, transparent 12.5%),
    radial-gradient(circle at 0% 100%, rgba(96,165,250,.16) 0 18%, transparent 18.5%),
    linear-gradient(180deg,#fff8e7 0%, #fffdf7 48%, #fff2d6 100%)!important;
  border:2px solid rgba(214,158,46,.64)!important;
  box-shadow:0 34px 95px rgba(2,6,23,.42), inset 0 0 0 3px rgba(255,248,225,.92)!important;
}
.modal.gameManualModal .modalGrid{
  grid-template-columns:124px minmax(0,1fr)!important;
  gap:20px!important;
  align-items:start!important;
}
.modal.gameManualModal .avatarPane{
  position:sticky!important;
  top:0!important;
  align-self:start!important;
}
.modal.gameManualModal .emojiAvatar,
.modal.gameManualModal .imgAvatar{
  position:relative!important;
  width:112px!important;
  height:164px!important;
  border-radius:28px!important;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.48), transparent 22%),
    linear-gradient(180deg,#60a5fa 0%,#2563eb 48%,#1d4ed8 100%)!important;
  border:2px solid rgba(245,158,11,.72)!important;
  color:#ffffff!important;
  font-family:Georgia,serif!important;
  font-size:78px!important;
  font-weight:1000!important;
  text-shadow:0 3px 0 rgba(30,64,175,.32), 0 0 18px rgba(255,255,255,.55)!important;
  box-shadow:0 18px 36px rgba(30,64,175,.22), 0 0 0 5px rgba(219,234,254,.72), inset 0 0 0 2px rgba(255,255,255,.42)!important;
  overflow:hidden!important;
}
.modal.gameManualModal .emojiAvatar::before,
.modal.gameManualModal .imgAvatar::before{
  content:'✦'!important;
  position:absolute!important;
  top:15px!important;
  right:19px!important;
  color:#fde68a!important;
  font-size:18px!important;
  text-shadow:0 0 14px rgba(253,230,138,.85)!important;
}
.modal.gameManualModal .emojiAvatar::after,
.modal.gameManualModal .imgAvatar::after{
  content:''!important;
  position:absolute!important;
  inset:8px!important;
  border-radius:22px!important;
  border:1px solid rgba(255,255,255,.48)!important;
  pointer-events:none!important;
}
.modal.gameManualModal #modalTitle{
  color:#172554!important;
  font-size:26px!important;
  line-height:1.05!important;
  margin:2px 0 12px!important;
  letter-spacing:-.03em!important;
}
.modal.gameManualModal #modalBody{display:none!important;}
.modal.gameManualModal #modalContent{min-width:0!important;}
.modal.gameManualModal #modalActions{
  justify-content:flex-start!important;
  margin-top:12px!important;
}
.modal.gameManualModal #modalActions .btn.primary{
  border-radius:999px!important;
  padding:12px 22px!important;
  color:#fff!important;
  background:linear-gradient(180deg,#60a5fa 0%,#2563eb 74%,#1d4ed8 100%)!important;
  border:2px solid rgba(253,224,71,.68)!important;
  box-shadow:0 12px 22px rgba(37,99,235,.26), inset 0 0 0 1px rgba(255,255,255,.38)!important;
}
.modal.gameManualModal #modalActions .btn.primary::after{content:' ✦'!important;}
.gameManualContentV249{
  position:relative!important;
  overflow:hidden!important;
  border-radius:30px!important;
  padding:18px!important;
  background:
    radial-gradient(circle at 96% 4%, rgba(254,240,138,.64) 0 17%, transparent 17.5%),
    radial-gradient(circle at 2% 95%, rgba(191,219,254,.28) 0 16%, transparent 16.5%),
    linear-gradient(180deg,#fffaf0 0%, #fffef9 47%, #fff6e2 100%)!important;
  border:1.5px solid rgba(225,179,92,.58)!important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.72), 0 16px 35px rgba(88,61,22,.10)!important;
}
.gameManualContentV249::before{
  content:''!important;
  position:absolute!important;
  inset:11px!important;
  border:1px solid rgba(225,179,92,.24)!important;
  border-radius:24px!important;
  pointer-events:none!important;
}
.gameManualContentV249::after{
  content:'✦  ✧'!important;
  position:absolute!important;
  left:28px!important;
  top:24px!important;
  color:rgba(245,158,11,.46)!important;
  font-size:28px!important;
  letter-spacing:18px!important;
  pointer-events:none!important;
}
.gameManualContentV249 .gameManualHero{
  position:relative!important;
  z-index:1!important;
  text-align:center!important;
  padding:22px 24px 22px!important;
  border-radius:25px!important;
  background:
    radial-gradient(circle at 91% 18%, rgba(255,237,168,.78) 0 18%, transparent 18.5%),
    linear-gradient(135deg,#ffffff 0%,#fff7e8 54%,#fff1bf 100%)!important;
  border:1.5px solid rgba(225,179,92,.46)!important;
  box-shadow:0 13px 28px rgba(120,88,30,.09), inset 0 0 0 1px rgba(255,255,255,.80)!important;
}
.gameManualContentV249 .gameManualGlowRing{
  position:absolute!important;
  right:-20px!important;
  top:-22px!important;
  width:150px!important;
  height:150px!important;
  border-radius:999px!important;
  background:radial-gradient(circle, rgba(250,204,21,.34), transparent 68%)!important;
  pointer-events:none!important;
}
.gameManualContentV249 .gameManualTempleMark{
  position:absolute!important;
  right:30px!important;
  top:35px!important;
  width:58px!important;
  height:74px!important;
  opacity:.38!important;
  background:
    linear-gradient(90deg, transparent 42%, rgba(180,83,9,.40) 43% 57%, transparent 58%),
    linear-gradient(135deg, transparent 45%, rgba(180,83,9,.36) 46% 53%, transparent 54%),
    linear-gradient(45deg, transparent 45%, rgba(180,83,9,.34) 46% 53%, transparent 54%)!important;
  border-bottom:4px solid rgba(180,83,9,.38)!important;
  border-radius:32px 32px 3px 3px!important;
  pointer-events:none!important;
}
.gameManualContentV249 .gameManualBadge{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:8px 20px!important;
  border-radius:999px!important;
  color:#7c2d12!important;
  background:linear-gradient(180deg,#fffaf0,#ffedd5)!important;
  border:1.5px solid rgba(251,146,60,.42)!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
  box-shadow:0 8px 18px rgba(180,83,9,.08), inset 0 0 0 1px rgba(255,255,255,.82)!important;
}
.gameManualContentV249 .gameManualBadge span{color:#f59e0b!important;}
.gameManualContentV249 h3{
  margin:14px 0 6px!important;
  color:#1e2b5c!important;
  font-size:30px!important;
  line-height:1.08!important;
  font-weight:1000!important;
  letter-spacing:-.035em!important;
}
.gameManualContentV249 .gameManualHeroSubline{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:4px auto 11px!important;
  padding:7px 16px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#eff6ff,#dbeafe)!important;
  border:1px solid rgba(96,165,250,.45)!important;
  color:#1d4ed8!important;
  font-size:13px!important;
  font-weight:1000!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.70)!important;
}
.gameManualContentV249 .gameManualHero p{
  max-width:760px!important;
  margin:9px auto 16px!important;
  color:#24324a!important;
  font-size:15.5px!important;
  line-height:1.55!important;
  font-weight:780!important;
}
.gameManualContentV249 .gameManualQuickRoute{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:9px!important;
  align-items:center!important;
  justify-content:center!important;
}
.gameManualContentV249 .gameManualQuickRoute span{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  min-height:38px!important;
  padding:8px 14px!important;
  border-radius:999px!important;
  color:#1e3a8a!important;
  font-size:14px!important;
  font-weight:1000!important;
  box-shadow:0 8px 16px rgba(30,64,175,.10), inset 0 0 0 1px rgba(255,255,255,.82)!important;
}
.gameManualContentV249 .gameManualQuickRoute span b{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:25px!important;
  height:25px!important;
  border-radius:999px!important;
  color:#fff!important;
  font-size:14px!important;
  box-shadow:inset 0 -2px 0 rgba(15,23,42,.18)!important;
}
.gameManualContentV249 .gameManualQuickRoute i{
  color:#c2410c!important;
  font-style:normal!important;
  font-size:19px!important;
  font-weight:1000!important;
}
.gameManualContentV249 .routeMove{background:linear-gradient(180deg,#eff6ff,#dbeafe)!important;border:1px solid rgba(37,99,235,.30)!important;}
.gameManualContentV249 .routePress{background:linear-gradient(180deg,#f5f3ff,#ede9fe)!important;border:1px solid rgba(124,58,237,.28)!important;}
.gameManualContentV249 .routeLearn{background:linear-gradient(180deg,#f0fdf4,#dcfce7)!important;border:1px solid rgba(34,197,94,.28)!important;}
.gameManualContentV249 .routeQuiz{background:linear-gradient(180deg,#fff7ed,#ffedd5)!important;border:1px solid rgba(249,115,22,.30)!important;color:#9a3412!important;}
.gameManualContentV249 .routeHall{background:linear-gradient(180deg,#fdf2f8,#fce7f3)!important;border:1px solid rgba(236,72,153,.30)!important;color:#9d174d!important;}
.gameManualContentV249 .routeMove b{background:#2563eb!important;}
.gameManualContentV249 .routePress b{background:#7c3aed!important;}
.gameManualContentV249 .routeLearn b{background:#16a34a!important;}
.gameManualContentV249 .routeQuiz b{background:#f97316!important;}
.gameManualContentV249 .routeHall b{background:#db2777!important;}
.gameManualContentV249 .gameManualGrid{
  position:relative!important;
  z-index:1!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  margin:16px 0!important;
}
.gameManualContentV249 .gameManualCard{
  position:relative!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:68px minmax(0,1fr)!important;
  gap:16px!important;
  align-items:center!important;
  min-height:124px!important;
  border-radius:22px!important;
  padding:18px!important;
  box-shadow:0 12px 24px rgba(30,64,175,.08), inset 0 0 0 1px rgba(255,255,255,.82)!important;
}
.gameManualContentV249 .gameManualCard::after{
  content:'✦'!important;
  position:absolute!important;
  right:14px!important;
  top:12px!important;
  font-size:20px!important;
  opacity:.42!important;
}
.gameManualContentV249 .manualMoveCard{background:linear-gradient(135deg,#ffffff 0%,#eff6ff 100%)!important;border:1.5px solid rgba(96,165,250,.42)!important;}
.gameManualContentV249 .manualMoveCard::after{color:#3b82f6!important;}
.gameManualContentV249 .manualInteractCard{background:linear-gradient(135deg,#ffffff 0%,#fff7ed 100%)!important;border:1.5px solid rgba(251,146,60,.42)!important;}
.gameManualContentV249 .manualInteractCard::after{color:#f59e0b!important;}
.gameManualContentV249 .manualPanelsCard{background:linear-gradient(135deg,#ffffff 0%,#f5f3ff 100%)!important;border:1.5px solid rgba(168,85,247,.30)!important;}
.gameManualContentV249 .manualPanelsCard::after{color:#a855f7!important;}
.gameManualContentV249 .manualTeacherCard{background:linear-gradient(135deg,#ffffff 0%,#f0fdf4 100%)!important;border:1.5px solid rgba(34,197,94,.30)!important;}
.gameManualContentV249 .manualTeacherCard::after{color:#22c55e!important;}
.gameManualContentV249 .gameManualIcon{
  width:58px!important;
  height:58px!important;
  border-radius:999px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(180deg,#ffffff,#dbeafe)!important;
  border:1.5px solid rgba(59,130,246,.35)!important;
  font-size:26px!important;
  box-shadow:0 8px 16px rgba(37,99,235,.14), inset 0 0 0 2px rgba(255,255,255,.78)!important;
}
.gameManualContentV249 .gameManualIcon.keyIcon{
  color:#c2410c!important;
  font-size:30px!important;
  font-weight:1000!important;
  font-family:Georgia,serif!important;
  background:linear-gradient(180deg,#fff7ed,#fed7aa)!important;
  border-color:rgba(251,146,60,.48)!important;
}
.gameManualContentV249 .gameManualCard b{
  display:block!important;
  color:#0f172a!important;
  font-size:17px!important;
  line-height:1.15!important;
  font-weight:1000!important;
  margin-bottom:6px!important;
}
.gameManualContentV249 .gameManualCard span{
  display:block!important;
  color:#334155!important;
  font-size:14px!important;
  line-height:1.42!important;
  font-weight:760!important;
}
.gameManualContentV249 .gameManualCard strong{
  color:#172554!important;
  font-size:1.05em!important;
  font-weight:1000!important;
}
.gameManualContentV249 .gameManualSections{
  position:relative!important;
  z-index:1!important;
  border-radius:24px!important;
  padding:16px!important;
  background:
    radial-gradient(circle at 5% 8%, rgba(251,191,36,.16), transparent 12%),
    linear-gradient(180deg,#fffdf7,#fff7ed)!important;
  border:1.5px solid rgba(225,179,92,.46)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.74)!important;
}
.gameManualContentV249 .gameManualSectionHeader{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-bottom:12px!important;
}
.gameManualContentV249 .gameManualSectionTitle{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  color:#1e2b5c!important;
  font-size:17px!important;
  font-weight:1000!important;
}
.gameManualContentV249 .gameManualSectionTitle span{color:#f59e0b!important;}
.gameManualContentV249 .gameManualSectionSpark{
  border-radius:999px!important;
  padding:7px 12px!important;
  color:#1e3a8a!important;
  background:linear-gradient(180deg,#eff6ff,#dbeafe)!important;
  border:1px solid rgba(96,165,250,.38)!important;
  font-size:12px!important;
  font-weight:1000!important;
}
.gameManualContentV249 .manualSectionPills{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
.gameManualContentV249 .manualSectionPills span{
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr)!important;
  gap:10px!important;
  align-items:center!important;
  min-height:56px!important;
  border-radius:18px!important;
  padding:10px 12px!important;
  color:#334155!important;
  font-size:13.5px!important;
  line-height:1.34!important;
  font-weight:780!important;
  box-shadow:0 8px 16px rgba(30,64,175,.06), inset 0 0 0 1px rgba(255,255,255,.80)!important;
}
.gameManualContentV249 .manualSectionPills i{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:38px!important;
  height:38px!important;
  border-radius:999px!important;
  background:#fff!important;
  box-shadow:0 5px 12px rgba(30,64,175,.10)!important;
  font-style:normal!important;
  font-size:21px!important;
}
.gameManualContentV249 .manualSectionPills em{font-style:normal!important;}
.gameManualContentV249 .manualSectionPills b{display:inline!important;color:#1e3a8a!important;font-weight:1000!important;}
.gameManualContentV249 .manualStartPill{background:linear-gradient(180deg,#eff6ff,#ffffff)!important;border:1px solid rgba(96,165,250,.38)!important;}
.gameManualContentV249 .manualLifePill{background:linear-gradient(180deg,#f0fdf4,#ffffff)!important;border:1px solid rgba(34,197,94,.30)!important;}
.gameManualContentV249 .manualStoryPill{background:linear-gradient(180deg,#f5f3ff,#ffffff)!important;border:1px solid rgba(168,85,247,.30)!important;}
.gameManualContentV249 .manualQuizPill{background:linear-gradient(180deg,#fff7ed,#ffffff)!important;border:1px solid rgba(251,146,60,.34)!important;}
.gameManualContentV249 .manualLifePill b{color:#166534!important;}
.gameManualContentV249 .manualStoryPill b{color:#6d28d9!important;}
.gameManualContentV249 .manualQuizPill b{color:#9a3412!important;}
.gameManualContentV249 .gameManualFooterNote{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  align-items:flex-start!important;
  gap:8px!important;
  margin-top:14px!important;
  border-radius:20px!important;
  padding:14px 16px!important;
  color:#7c2d12!important;
  background:linear-gradient(180deg,#fff7ed,#ffedd5)!important;
  border:1.5px solid rgba(251,146,60,.38)!important;
  font-size:13.5px!important;
  line-height:1.42!important;
  font-weight:850!important;
}
.gameManualContentV249 .gameManualFooterNote > span{color:#f59e0b!important;font-size:17px!important;line-height:1!important;}
.gameManualContentV249 .gameManualFooterNote b{margin-right:3px!important;}
@media(max-width:760px){
  .modal.gameManualModal .modalGrid{grid-template-columns:1fr!important;}
  .modal.gameManualModal .avatarPane{display:none!important;}
  .gameManualContentV249 .gameManualGrid,
  .gameManualContentV249 .manualSectionPills{grid-template-columns:1fr!important;}
  .gameManualContentV249 h3{font-size:25px!important;}
  .gameManualContentV249 .gameManualHero{padding:18px 14px!important;}
  .gameManualContentV249 .gameManualCard{grid-template-columns:58px minmax(0,1fr)!important;}
}

/* V2.44 Rafiq Step 1: add explanatory mini-pictures directly inside the existing choice table. */
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqVisualGridExtraV241.hasExtras,
#scaffoldSlide.rafiqStoryScaffold .rafiqVisualGridExtraV241.hasExtras,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqVisualGridExtraV241.hasExtras,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqVisualGridExtraV241.hasExtras{
  grid-template-columns:minmax(0,1fr) minmax(170px,.44fr)!important;
  gap:14px!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceGridMain,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceGridMain,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceGridMain,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceGridMain{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceCard,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceCard,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceCard,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceCard{
  display:grid!important;
  grid-template-columns:78px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  gap:2px 12px!important;
  align-items:center!important;
  justify-content:stretch!important;
  min-height:82px!important;
  padding:10px 14px!important;
  text-align:left!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceCard b,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceCard b,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceCard b,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceCard b{
  grid-column:2!important;
  grid-row:1!important;
  margin:0!important;
  font-size:14px!important;
  line-height:1.15!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceCard span,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceCard span,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceCard span,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceCard span{
  grid-column:2!important;
  grid-row:2!important;
  font-size:12px!important;
  line-height:1.25!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMini,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMini,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMini,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMini{
  grid-column:1!important;
  grid-row:1 / 3!important;
  position:relative!important;
  width:68px!important;
  height:52px!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#ffffff 0%, #f8fbff 100%)!important;
  border:1px solid rgba(148,163,184,.28)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.82)!important;
  overflow:hidden!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMini i,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMini i,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMini i,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMini i{
  position:absolute!important;
  display:block!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMiniCompare .bar,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMiniCompare .bar,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMiniCompare .bar,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMiniCompare .bar{
  bottom:9px!important;
  width:12px!important;
  border-radius:8px 8px 3px 3px!important;
  background:linear-gradient(180deg,#93c5fd,#2563eb)!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMiniCompare .bar.a,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMiniCompare .bar.a,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMiniCompare .bar.a,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMiniCompare .bar.a{left:13px!important;height:22px!important;}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMiniCompare .bar.b,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMiniCompare .bar.b,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMiniCompare .bar.b,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMiniCompare .bar.b{left:29px!important;height:36px!important;background:linear-gradient(180deg,#fcd34d,#f59e0b)!important;}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMiniCompare .bar.c,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMiniCompare .bar.c,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMiniCompare .bar.c,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMiniCompare .bar.c{left:45px!important;height:17px!important;}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMiniGroup .dot,
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMiniSpot .dot,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMiniGroup .dot,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMiniSpot .dot,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMiniGroup .dot,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMiniSpot .dot,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMiniGroup .dot,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMiniSpot .dot{
  width:8px!important;
  height:8px!important;
  border-radius:999px!important;
  background:#22c55e!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMiniGroup .dot.a,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMiniGroup .dot.a,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMiniGroup .dot.a,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMiniGroup .dot.a{left:13px!important;top:13px!important;}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMiniGroup .dot.b,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMiniGroup .dot.b,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMiniGroup .dot.b,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMiniGroup .dot.b{left:23px!important;top:22px!important;}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMiniGroup .dot.c,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMiniGroup .dot.c,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMiniGroup .dot.c,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMiniGroup .dot.c{left:14px!important;top:32px!important;}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMiniGroup .dot.d,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMiniGroup .dot.d,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMiniGroup .dot.d,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMiniGroup .dot.d{right:17px!important;top:14px!important;background:#8b5cf6!important;}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMiniGroup .dot.e,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMiniGroup .dot.e,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMiniGroup .dot.e,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMiniGroup .dot.e{right:27px!important;top:25px!important;background:#8b5cf6!important;}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMiniGroup .dot.f,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMiniGroup .dot.f,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMiniGroup .dot.f,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMiniGroup .dot.f{right:14px!important;top:35px!important;background:#8b5cf6!important;}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMiniSpot .dot,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMiniSpot .dot,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMiniSpot .dot,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMiniSpot .dot{background:#60a5fa!important;}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMiniSpot .dot.a,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMiniSpot .dot.a,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMiniSpot .dot.a,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMiniSpot .dot.a{left:15px!important;top:30px!important;}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMiniSpot .dot.b,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMiniSpot .dot.b,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMiniSpot .dot.b,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMiniSpot .dot.b{left:26px!important;top:24px!important;}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMiniSpot .dot.c,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMiniSpot .dot.c,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMiniSpot .dot.c,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMiniSpot .dot.c{left:38px!important;top:31px!important;}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMiniSpot .dot.d,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMiniSpot .dot.d,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMiniSpot .dot.d,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMiniSpot .dot.d{left:50px!important;top:27px!important;}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMiniSpot .dot.out,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMiniSpot .dot.out,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMiniSpot .dot.out,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMiniSpot .dot.out{left:48px!important;top:8px!important;background:#f59e0b!important;box-shadow:0 0 0 4px rgba(245,158,11,.16)!important;}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMiniEvidence .axis.x,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMiniEvidence .axis.x,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMiniEvidence .axis.x,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMiniEvidence .axis.x{left:13px!important;right:12px!important;bottom:12px!important;height:2px!important;background:#94a3b8!important;}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMiniEvidence .axis.y,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMiniEvidence .axis.y,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMiniEvidence .axis.y,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMiniEvidence .axis.y{left:13px!important;top:11px!important;bottom:12px!important;width:2px!important;background:#94a3b8!important;}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMiniEvidence .point,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMiniEvidence .point,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMiniEvidence .point,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMiniEvidence .point{width:8px!important;height:8px!important;border-radius:999px!important;background:#ef4444!important;}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMiniEvidence .point.a,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMiniEvidence .point.a,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMiniEvidence .point.a,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMiniEvidence .point.a{left:26px!important;top:27px!important;}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMiniEvidence .point.b,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMiniEvidence .point.b,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMiniEvidence .point.b,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMiniEvidence .point.b{left:43px!important;top:15px!important;}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceMiniEvidence .check,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceMiniEvidence .check,
#scaffoldSlide.rafiqStoryScaffoldV234 .rafiqChoiceMiniEvidence .check,
#scaffoldSlide.rafiqStoryScaffoldV235 .rafiqChoiceMiniEvidence .check{
  right:8px!important;
  bottom:6px!important;
  width:18px!important;
  height:18px!important;
  border-radius:999px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#dcfce7!important;
  border:1px solid rgba(34,197,94,.45)!important;
  color:#166534!important;
  font-size:12px!important;
  font-style:normal!important;
  font-weight:1000!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceLegendNote,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceLegendNote{
  align-self:stretch!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:8px!important;
  border-radius:20px!important;
  padding:14px!important;
  background:linear-gradient(180deg,#eff6ff,#eef2ff)!important;
  border:1.5px solid rgba(99,102,241,.28)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65)!important;
  color:#1e3a8a!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceLegendNote b,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceLegendNote b{
  display:block!important;
  color:#172554!important;
  font-size:14px!important;
  line-height:1.2!important;
  font-weight:1000!important;
}
.modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqChoiceLegendNote span,
#scaffoldSlide.rafiqStoryScaffold .rafiqChoiceLegendNote span{
  display:block!important;
  color:#334155!important;
  font-size:12px!important;
  line-height:1.4!important;
  font-weight:750!important;
}
@media(max-width:920px){
  .modal.lessonModal.oceanLessonModal #scaffoldSlide .rafiqVisualGridExtraV241.hasExtras,
  #scaffoldSlide.rafiqStoryScaffold .rafiqVisualGridExtraV241.hasExtras,
  #scaffoldSlide.rafiqStoryScaffoldV234 .rafiqVisualGridExtraV241.hasExtras,
  #scaffoldSlide.rafiqStoryScaffoldV235 .rafiqVisualGridExtraV241.hasExtras{
    grid-template-columns:1fr!important;
  }
}

/* V2.45 Rafiq active-renderer fix: the first teacher now gets mini pictures in the real fallback table,
   not in a later JS patch that cannot run outside the game closure. */
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .slideGraphic.rafiqToolkitChoiceTable{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  max-width:560px!important;
  width:100%!important;
  margin:0 auto!important;
  padding:18px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .slideGraphic.rafiqToolkitChoiceTable::before{
  content:'✦ Choose the picture job first... ✦'!important;
  margin:0 0 10px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .rafiqToolkitChoiceTable .rafiqChoiceCard{
  display:grid!important;
  grid-template-columns:72px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  gap:2px 12px!important;
  align-items:center!important;
  min-height:76px!important;
  padding:10px 14px!important;
  border-radius:16px!important;
  text-align:left!important;
  background:linear-gradient(180deg,#ffffff 0%,#fffefa 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72)!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .rafiqToolkitChoiceTable .rafiqChoiceCard.compare{border:2px solid rgba(245,158,11,.25)!important;}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .rafiqToolkitChoiceTable .rafiqChoiceCard.group{border:2px solid rgba(34,197,94,.22)!important;}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .rafiqToolkitChoiceTable .rafiqChoiceCard.spot{border:2px solid rgba(59,130,246,.24)!important;}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .rafiqToolkitChoiceTable .rafiqChoiceCard.evidence{border:2px solid rgba(239,68,68,.22)!important;}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .rafiqToolkitChoiceTable .rafiqChoiceCard b{
  grid-column:2!important;
  grid-row:1!important;
  margin:0!important;
  color:#0f172a!important;
  font-size:14px!important;
  line-height:1.15!important;
  font-weight:1000!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .rafiqToolkitChoiceTable .rafiqChoiceCard span{
  grid-column:2!important;
  grid-row:2!important;
  color:#475569!important;
  font-size:12px!important;
  line-height:1.25!important;
  font-weight:850!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .rafiqToolkitChoiceTable .rafiqChoiceMini{
  grid-column:1!important;
  grid-row:1 / 3!important;
  width:62px!important;
  height:48px!important;
}
@media(max-width:760px){
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide > .slideGraphic.rafiqToolkitChoiceTable{
    max-width:none!important;
    padding:14px!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide .rafiqToolkitChoiceTable .rafiqChoiceCard{
    grid-template-columns:64px minmax(0,1fr)!important;
  }
}

/* V2.46 Rafiq Step 1 center + larger mini-figures.
   The class is added in renderScaffoldSlide() only for rafiq_start / step 1. */
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide{
  grid-template-columns:1fr!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide::after{
  display:none!important;
  content:''!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide > .slideGraphic.rafiqToolkitChoiceTable{
  grid-column:1 / -1!important;
  grid-row:3!important;
  justify-self:center!important;
  align-self:center!important;
  width:min(860px,100%)!important;
  max-width:860px!important;
  margin:0 auto!important;
  padding:24px 28px!important;
  gap:16px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide > .slideGraphic.rafiqToolkitChoiceTable::before{
  font-size:22px!important;
  margin:0 0 18px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide .rafiqToolkitChoiceTable .rafiqChoiceCard{
  grid-template-columns:116px minmax(0,1fr)!important;
  min-height:104px!important;
  padding:16px 24px!important;
  column-gap:22px!important;
  border-radius:22px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide .rafiqToolkitChoiceTable .rafiqChoiceCard b{
  font-size:22px!important;
  line-height:1.15!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide .rafiqToolkitChoiceTable .rafiqChoiceCard span{
  font-size:16px!important;
  line-height:1.25!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide .rafiqToolkitChoiceTable .rafiqChoiceMini{
  width:72px!important;
  height:54px!important;
  justify-self:center!important;
  transform:scale(1.24)!important;
  transform-origin:center!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide > .slideInfoGrid{
  grid-row:4!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide > .slideMiniQuiz{
  grid-row:5!important;
}
@media(max-width:760px){
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide > .slideGraphic.rafiqToolkitChoiceTable{
    width:100%!important;
    padding:18px 16px!important;
    gap:12px!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide .rafiqToolkitChoiceTable .rafiqChoiceCard{
    grid-template-columns:92px minmax(0,1fr)!important;
    min-height:92px!important;
    padding:14px 16px!important;
    column-gap:14px!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide .rafiqToolkitChoiceTable .rafiqChoiceMini{
    transform:scale(1.08)!important;
  }
}

/* V2.47 Rafiq all-step alignment + step focus labels.
   Step 2 and 3 use the same centered teaching environment as Step 1. */
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide > .slideGraphic.rafiqToolkitChoiceTable.rafiqToolkitStep2::before{
  content:'✦ Match the picture job to your question ✦'!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide > .slideGraphic.rafiqToolkitChoiceTable.rafiqToolkitStep3::before{
  content:'✦ Check labels, context, and evidence ✦'!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide .rafiqToolkitChoiceTable .rafiqChoiceCard{
  position:relative!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide .rafiqToolkitChoiceTable .rafiqChoiceCard.isFocus{
  background:linear-gradient(180deg,#fff 0%,#fffbeb 100%)!important;
  box-shadow:0 12px 28px rgba(30,41,59,.10), inset 0 0 0 2px rgba(251,191,36,.18)!important;
  transform:translateY(-1px)!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide .rafiqToolkitChoiceTable .rafiqChoiceCard.isSecondaryFocus{
  background:linear-gradient(180deg,#fff 0%,#eff6ff 100%)!important;
  box-shadow:0 8px 20px rgba(59,130,246,.08), inset 0 0 0 1px rgba(147,197,253,.22)!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide .rafiqToolkitChoiceTable .rafiqChoiceCard.isFocus::after{
  content:'Step focus'!important;
  position:absolute!important;
  top:12px!important;
  right:16px!important;
  padding:4px 9px!important;
  border-radius:999px!important;
  background:#fff7ed!important;
  border:1px solid rgba(245,158,11,.34)!important;
  color:#92400e!important;
  font-size:11px!important;
  font-weight:1000!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
}
@media(max-width:760px){
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide .rafiqToolkitChoiceTable .rafiqChoiceCard.isFocus::after{
    display:none!important;
  }
}

/* V2.48 Rafiq four-step sequence + right-side focus coaching.
   Adds a separate Spot step between Group and Evidence, and fills the highlighted row with a short teaching prompt. */
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide > .slideGraphic.rafiqToolkitChoiceTable{
  width:min(960px,100%)!important;
  max-width:960px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide > .slideGraphic.rafiqToolkitChoiceTable.rafiqToolkitStep2::before{
  content:'✦ Group what belongs together ✦'!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide > .slideGraphic.rafiqToolkitChoiceTable.rafiqToolkitStep3::before{
  content:'✦ Spot what stands out ✦'!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide > .slideGraphic.rafiqToolkitChoiceTable.rafiqToolkitStep4::before{
  content:'✦ Check labels, context, and evidence ✦'!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide .rafiqToolkitChoiceTable .rafiqChoiceCard .rafiqFocusNote{
  display:none!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide .rafiqToolkitChoiceTable .rafiqChoiceCard.isFocus{
  grid-template-columns:116px minmax(180px,.72fr) minmax(300px,1fr)!important;
  column-gap:22px!important;
  min-height:122px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide .rafiqToolkitChoiceTable .rafiqChoiceCard.isFocus .rafiqFocusNote{
  grid-column:3!important;
  grid-row:1 / 3!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:6px!important;
  min-height:76px!important;
  padding:26px 16px 12px!important;
  border-radius:16px!important;
  background:rgba(255,251,235,.78)!important;
  border:1px solid rgba(245,158,11,.22)!important;
  color:#713f12!important;
  font-size:15px!important;
  line-height:1.25!important;
  font-weight:850!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide .rafiqToolkitChoiceTable .rafiqChoiceCard.isFocus .rafiqFocusNote strong{
  color:#92400e!important;
  font-weight:1000!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide .rafiqToolkitChoiceTable .rafiqChoiceCard.isFocus .rafiqFocusNote small{
  display:block!important;
  color:#475569!important;
  font-size:12.5px!important;
  line-height:1.25!important;
  font-weight:800!important;
}
@media(max-width:860px){
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide .rafiqToolkitChoiceTable .rafiqChoiceCard.isFocus{
    grid-template-columns:92px minmax(0,1fr)!important;
    min-height:auto!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.rafiqWorkbookDeck #scaffoldSlide.rafiqToolkitCenterSlide .rafiqToolkitChoiceTable .rafiqChoiceCard.isFocus .rafiqFocusNote{
    grid-column:1 / -1!important;
    grid-row:3!important;
    padding:12px 14px!important;
    min-height:0!important;
    margin-top:4px!important;
  }
}


/* V2.50 Mira volcano plot image assets: scoped to Captain Mira Step 1 and Step 8 only. */
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .miraVolcanoAssetCard{
  padding:0!important;
  min-height:0!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  overflow:visible!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .miraVolcanoAsset{
  width:min(100%, 620px)!important;
  margin:0 auto!important;
  display:block!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .miraVolcanoAsset img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:360px!important;
  object-fit:contain!important;
  border-radius:20px!important;
  box-shadow:0 16px 36px rgba(15,23,42,.10)!important;
  background:#fff!important;
}
@media(max-width:920px){
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.story1WorkbookDeck #scaffoldSlide .miraVolcanoAsset img{
    max-height:300px!important;
  }
}


/* V2.51/V2.52 in-game side controls: make Select Game/Hero a normal two-column button,
   dock Music as its own matching control box, and keep the same paired layout on
   iPad/mobile touch layouts without touching lesson/teacher UI. */
body.inGame .storySidePanel .sideUtilityRow{
  grid-row:5 !important;
  grid-column:1 !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  align-items:stretch !important;
  margin:0 !important;
  min-height:0 !important;
}
body.inGame .storySidePanel .sideUtilityRow #selectMenuBtn{
  grid-row:auto !important;
  grid-column:auto !important;
  width:100% !important;
  min-height:clamp(42px,4.8vh,58px) !important;
  padding:8px 10px !important;
  border-radius:13px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  white-space:nowrap !important;
  color:#ffe6ac !important;
  background:linear-gradient(180deg,#17243a 0%,#101827 55%,#090d17 100%) !important;
  border:1px solid rgba(211,169,88,.56) !important;
  box-shadow:0 10px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
body.inGame .storySidePanel .sideUtilityRow #selectMenuBtn b{
  display:block !important;
  font-size:clamp(12px,.92vw,16px) !important;
  line-height:1 !important;
}
body.inGame .storySidePanel .sideUtilityRow #selectMenuBtn small{
  display:none !important;
}
body.inGame .storySidePanel .sideUtilityRow .choosePathIcon{
  font-size:clamp(18px,1.25vw,23px) !important;
  line-height:1 !important;
}
body.inGame .storySidePanel .sideUtilityRow .musicControls{
  position:static !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  z-index:auto !important;
  width:100% !important;
  min-height:clamp(42px,4.8vh,58px) !important;
  padding:8px 10px !important;
  border-radius:13px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  background:linear-gradient(180deg,rgba(42,24,13,.96),rgba(9,11,19,.96)) !important;
  border:1px solid rgba(211,169,88,.56) !important;
  box-shadow:0 10px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter:none !important;
}
body.inGame .storySidePanel .sideUtilityRow .musicToggle{
  flex:0 0 auto !important;
  padding:7px 11px !important;
  border-radius:999px !important;
  font-size:clamp(11px,.82vw,14px) !important;
  letter-spacing:.03em !important;
}
body.inGame .storySidePanel .sideUtilityRow .musicVolumeWrap{
  flex:1 1 auto !important;
  min-width:0 !important;
  gap:7px !important;
  font-size:clamp(10px,.74vw,12px) !important;
}
body.inGame .storySidePanel .sideUtilityRow .musicVolume{
  width:100% !important;
  min-width:72px !important;
}
@media(max-width:1180px), (hover:none) and (pointer:coarse){
  body.inGame .storySidePanel .sideUtilityRow{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  body.inGame .storySidePanel .sideUtilityRow #selectMenuBtn,
  body.inGame .storySidePanel .sideUtilityRow .musicControls{
    min-height:clamp(42px,5.2dvh,56px) !important;
    border-radius:13px !important;
  }
  body.inGame .storySidePanel .sideUtilityRow #selectMenuBtn{
    padding:7px 8px !important;
    gap:8px !important;
  }
  body.inGame .storySidePanel .sideUtilityRow .musicControls{
    position:static !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:100% !important;
    min-width:0 !important;
    padding:7px 8px !important;
    z-index:auto !important;
    justify-content:center !important;
    gap:7px !important;
  }
  body.inGame .storySidePanel .sideUtilityRow .musicToggle{
    padding:6px 9px !important;
    font-size:clamp(10px,1.55vw,13px) !important;
  }
  body.inGame .storySidePanel .sideUtilityRow .musicVolumeWrap{
    flex:1 1 auto !important;
    min-width:0 !important;
    gap:6px !important;
    font-size:clamp(10px,1.35vw,12px) !important;
  }
  body.inGame .storySidePanel .sideUtilityRow .musicVolume{
    width:100% !important;
    min-width:64px !important;
  }
}
@media(max-width:560px){
  body.inGame .storySidePanel .sideUtilityRow{
    gap:6px !important;
  }
  body.inGame .storySidePanel .sideUtilityRow #selectMenuBtn,
  body.inGame .storySidePanel .sideUtilityRow .musicControls{
    min-height:42px !important;
    padding:6px 7px !important;
  }
  body.inGame .storySidePanel .sideUtilityRow #selectMenuBtn b{
    font-size:11px !important;
  }
  body.inGame .storySidePanel .sideUtilityRow .choosePathIcon{
    font-size:17px !important;
  }
  body.inGame .storySidePanel .sideUtilityRow .musicToggle{
    padding:5px 7px !important;
    font-size:10px !important;
  }
  body.inGame .storySidePanel .sideUtilityRow .musicVolumeWrap{
    gap:5px !important;
    font-size:10px !important;
  }
  body.inGame .storySidePanel .sideUtilityRow .musicVolume{
    min-width:50px !important;
  }
}

/* V2.53 session identity, teacher identity, and menu How-to-Play patch */
.authSessionBar[hidden]{display:none!important}
.authSessionBar{
  position:fixed;
  top:14px;
  right:18px;
  z-index:88;
  display:flex;
  align-items:center;
  gap:12px;
  max-width:min(720px,calc(100vw - 36px));
  padding:10px 12px 10px 14px;
  border-radius:18px;
  border:1px solid rgba(255,229,171,.42);
  background:linear-gradient(180deg,rgba(16,24,40,.88),rgba(15,23,42,.78));
  color:#fff7d6;
  box-shadow:0 16px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
}
.authSessionCopy{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}
.authSessionLabel{font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.12em;color:#f7d98a;opacity:.92}
#authSessionEmail{max-width:300px;overflow:hidden;text-overflow:ellipsis;color:#fff;font-size:14px;line-height:1.1}
.authSessionStories{font-size:12px;font-weight:850;color:#bfe5ff;border-left:1px solid rgba(255,255,255,.24);padding-left:8px}
.authSessionLogout{
  appearance:none;
  border:1px solid rgba(255,238,184,.50);
  background:linear-gradient(180deg,#f7d782,#b97817);
  color:#1a160a;
  border-radius:999px;
  padding:8px 11px;
  font-size:12px;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 10px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35);
}
.authSessionLogout:hover{filter:brightness(1.05)}
body.authLocked .authSessionBar{display:none!important}
body.inGame .authSessionBar{top:10px;right:12px;transform:scale(.94);transform-origin:top right}
@media(max-width:860px){
  .authSessionBar{left:10px;right:10px;top:8px;justify-content:space-between;border-radius:16px}
  .authSessionCopy{align-items:flex-start;flex-direction:column;gap:2px;white-space:normal}
  #authSessionEmail{max-width:calc(100vw - 170px)}
  .authSessionStories{border-left:0;padding-left:0}
}

.avatarCaption{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  text-align:center;
  margin-top:2px;
}
.avatarCaption b{font-size:15px;font-weight:1000;letter-spacing:.05em;text-transform:uppercase;color:#0f172a;line-height:1.1}
.avatarCaption span{font-size:12px;font-weight:850;color:#475569;line-height:1.25}
.modal.lessonModal.oceanLessonModal .avatarCaption{
  margin-top:2px;
  padding:10px 10px 11px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,244,210,.96),rgba(229,241,255,.92));
  border:1px solid rgba(240,184,73,.45);
  box-shadow:0 12px 22px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.70);
}
.modal.lessonModal.oceanLessonModal .avatarCaption b{color:#7a4b19;font-size:16px;text-shadow:none}
.modal.lessonModal.oceanLessonModal .avatarCaption span{color:#1e3a5f;font-size:12px}
.lessonTeacherHeader{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:5px 12px;
  align-items:center;
  margin:0 96px 12px 0;
  padding:12px 16px;
  border-radius:18px;
  background:linear-gradient(90deg,rgba(255,247,210,.96),rgba(219,234,254,.86));
  border:1px solid rgba(240,184,73,.38);
  box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.72);
}
.lessonTeacherHeader span{
  grid-row:1 / span 2;
  align-self:stretch;
  display:flex;
  align-items:center;
  padding:0 10px;
  border-radius:12px;
  background:linear-gradient(180deg,#f7d782,#c88924);
  color:#10213c;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.lessonTeacherHeader b{color:#172554;font-size:21px;font-weight:1000;line-height:1.05}
.lessonTeacherHeader em{font-style:normal;color:#334155;font-size:14px;font-weight:900;line-height:1.25}
.lessonTeacherHeader small{grid-column:2;color:#7c2d12;font-size:12px;font-weight:900;line-height:1.2}
.modal.lessonModal.oceanLessonModal .lessonTeacherHeader + .lessonTabs{margin-top:8px!important}
@media(max-width:760px){.lessonTeacherHeader{margin-right:0;grid-template-columns:1fr}.lessonTeacherHeader span{grid-row:auto;justify-content:center}.lessonTeacherHeader small{grid-column:1}}

.menuHowToPlayContent .menuHowUnlocked{
  position:relative;
  z-index:1;
  margin:14px 0 0;
  padding:12px 15px;
  border-radius:18px;
  background:linear-gradient(180deg,#eff6ff,#dbeafe);
  border:1px solid rgba(96,165,250,.38);
  color:#172554;
  font-size:14px;
  font-weight:850;
  text-align:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72);
}
.menuHowToPlayContent .menuHowUnlocked b{color:#1e3a8a}
.menuHowToPlayContent .menuHowGrid .gameManualIcon{font-family:inherit!important;font-weight:1000!important;color:#172554!important}
.menuHowToPlayContent .menuHowHero strong{color:#1d4ed8}
.menuHowToPlayContent .menuHowSections{margin-top:14px}

/* V2.54 mobile session + touch-control hardening */
.authSessionBar{
  z-index:2200!important;
  pointer-events:auto!important;
  max-width:min(720px,calc(100vw - 28px))!important;
}
.authSessionLogout{
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}
body.authCompactSession .authSessionBar{
  gap:8px!important;
}
@media(max-width:860px), (hover:none) and (pointer:coarse){
  .authSessionBar{
    left:auto!important;
    right:calc(8px + env(safe-area-inset-right))!important;
    top:calc(8px + env(safe-area-inset-top))!important;
    bottom:auto!important;
    width:auto!important;
    max-width:min(390px,calc(100vw - 16px - env(safe-area-inset-right)))!important;
    justify-content:flex-end!important;
    align-items:center!important;
    border-radius:16px!important;
    padding:7px 8px 7px 10px!important;
    gap:7px!important;
    transform:none!important;
  }
  .authSessionCopy{
    flex-direction:column!important;
    align-items:flex-end!important;
    gap:1px!important;
    min-width:0!important;
    white-space:normal!important;
  }
  .authSessionLabel{
    font-size:9px!important;
    letter-spacing:.10em!important;
    line-height:1!important;
  }
  #authSessionEmail{
    max-width:min(52vw,230px)!important;
    font-size:12px!important;
    line-height:1.05!important;
    text-align:right!important;
  }
  .authSessionStories{
    border-left:0!important;
    padding-left:0!important;
    font-size:10px!important;
    line-height:1.05!important;
    text-align:right!important;
  }
  .authSessionLogout{
    padding:7px 8px!important;
    font-size:11px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
  }
  body.inGame .authSessionBar{
    top:calc(6px + env(safe-area-inset-top))!important;
    right:calc(6px + env(safe-area-inset-right))!important;
    transform:scale(.88)!important;
    transform-origin:top right!important;
    opacity:.94!important;
  }
}
@media(max-width:480px){
  .authSessionLabel{display:none!important;}
  .authSessionStories{display:none!important;}
  #authSessionEmail{max-width:46vw!important;font-size:11px!important;}
  .authSessionLogout{font-size:10px!important;padding:6px 7px!important;}
}
body.hasTouchControls.inGame .mobileControls{
  display:flex!important;
  touch-action:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}
body.hasTouchControls.inGame .mobileBtn,
body.hasTouchControls.inGame .mobileInteract{
  touch-action:none!important;
  pointer-events:auto!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}
body.hasTouchControls.inGame .mobileBtn.active,
body.hasTouchControls.inGame .mobileInteract:active{
  filter:brightness(1.24)!important;
}
@media(max-width:860px), (hover:none) and (pointer:coarse){
  body.hasTouchControls.inGame .mobileControls{
    z-index:1220!important;
  }
  body.hasTouchControls.inGame .gameShell{
    overflow:hidden!important;
  }
}

/* V2.55 protected login dock + tablet/phone HUD layout
   Keeps the signed-in identity and logout control in a reserved top-right area
   instead of letting it cover HUD boxes on desktop, iPad, iPhone, or Android. */
body.inGame .hudSolvedBox{display:none!important;}
/* V2.56: remove the low-value Evidence HUD box in-game so the signed-in
   identity/logout dock always has a protected top-right area. Points now live
   inside the Objective text. */
body.inGame .hud .box:nth-child(3){display:none!important;}
body.inGame .hud{
  position:relative!important;
  padding-right:clamp(315px,31vw,445px)!important;
  grid-template-columns:minmax(145px,.95fr) minmax(245px,1.45fr) minmax(245px,1.15fr)!important;
  gap:8px!important;
  min-height:46px!important;
}
body.inGame .authSessionBar{
  position:fixed!important;
  top:calc(8px + env(safe-area-inset-top))!important;
  right:calc(10px + env(safe-area-inset-right))!important;
  bottom:auto!important;
  left:auto!important;
  z-index:5000!important;
  width:clamp(300px,30vw,430px)!important;
  max-width:clamp(300px,30vw,430px)!important;
  min-height:44px!important;
  transform:none!important;
  transform-origin:top right!important;
  opacity:1!important;
  justify-content:flex-end!important;
  border-radius:20px!important;
  padding:7px 9px 7px 12px!important;
  background:linear-gradient(180deg,rgba(16,24,40,.94),rgba(2,6,23,.88))!important;
  border-color:rgba(255,229,171,.50)!important;
  box-shadow:0 16px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.14)!important;
}
body.inGame .authSessionCopy{min-width:0!important;}
body.inGame #authSessionEmail{max-width:205px!important;}
body.inGame .authSessionStories{white-space:nowrap!important;}
body.inGame .authSessionLogout{min-height:30px!important;white-space:nowrap!important;}

@media(max-width:1180px), (hover:none) and (pointer:coarse){
  body.inGame .hud{
    padding-right:clamp(285px,35vw,385px)!important;
    grid-template-columns:minmax(140px,.95fr) minmax(200px,1.15fr) minmax(185px,1fr)!important;
    gap:7px!important;
  }
  body.inGame .hud .box:nth-child(4){display:block!important;}
  body.inGame .authSessionBar{
    top:calc(7px + env(safe-area-inset-top))!important;
    right:calc(8px + env(safe-area-inset-right))!important;
    width:clamp(275px,33vw,375px)!important;
    max-width:clamp(275px,33vw,375px)!important;
    min-height:42px!important;
    gap:7px!important;
    padding:7px 8px 7px 10px!important;
  }
  body.inGame .authSessionCopy{
    flex-direction:column!important;
    align-items:flex-end!important;
    gap:1px!important;
    white-space:normal!important;
  }
  body.inGame .authSessionLabel{font-size:9px!important;line-height:1!important;}
  body.inGame #authSessionEmail{max-width:190px!important;font-size:12px!important;text-align:right!important;line-height:1.05!important;}
  body.inGame .authSessionStories{border-left:0!important;padding-left:0!important;font-size:10px!important;line-height:1.05!important;text-align:right!important;}
  body.inGame .authSessionLogout{padding:7px 8px!important;font-size:11px!important;line-height:1.05!important;}
}

@media(max-width:760px){
  body.inGame .hud{
    margin-top:48px!important;
    padding-right:0!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.inGame .hud .box:nth-child(3){display:none!important;}
  body.inGame .hud .box:nth-child(4){grid-column:1 / -1!important;}
  body.inGame .authSessionBar{
    width:auto!important;
    max-width:calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right))!important;
    right:calc(6px + env(safe-area-inset-right))!important;
    top:calc(6px + env(safe-area-inset-top))!important;
    transform:none!important;
  }
  body.inGame #authSessionEmail{max-width:min(54vw,220px)!important;}
}

@media(max-width:480px){
  body.inGame .hud{margin-top:42px!important;grid-template-columns:1fr!important;}
  body.inGame .hud .box:nth-child(2){display:none!important;}
  body.inGame .hud .box:nth-child(4){grid-column:1!important;}
  body.inGame .authSessionBar{gap:6px!important;padding:6px 7px 6px 9px!important;}
  body.inGame .authSessionLabel,
  body.inGame .authSessionStories{display:none!important;}
  body.inGame #authSessionEmail{max-width:48vw!important;font-size:11px!important;}
  body.inGame .authSessionLogout{font-size:10px!important;padding:6px 7px!important;}
}

/* V2.55 player fallback: keep the selected learner visible while mobile browsers decode sprites. */
body.hasTouchControls.inGame canvas#canvas{
  touch-action:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}

/* V2.56 mobile/iPad polish: keep identity protected and make the player easy to spot. */
@media(min-width:761px) and (max-width:1080px), (hover:none) and (pointer:coarse) and (min-width:761px){
  body.inGame .hud{
    padding-right:clamp(300px,34vw,380px)!important;
  }
  body.inGame #authSessionEmail{
    max-width:170px!important;
  }
  body.inGame .authSessionStories{
    display:none!important;
  }
}
body.inGame .playerYouTag{
  pointer-events:none;
}

/* V2.57 desktop session dock fix
   iPad/tablet layout was working well; this override targets desktop only.
   The in-game account dock now prioritizes full username/email + logout,
   and hides the low-value story-count text on PC so the email does not get crushed. */
@media (min-width:1181px) and (hover:hover) and (pointer:fine){
  body.inGame .hud{
    padding-right:clamp(430px,28vw,560px)!important;
    grid-template-columns:minmax(160px,.9fr) minmax(300px,1.35fr) minmax(330px,1.2fr)!important;
  }
  body.inGame .authSessionBar{
    width:clamp(405px,26vw,520px)!important;
    max-width:clamp(405px,26vw,520px)!important;
    gap:10px!important;
    padding:7px 10px 7px 13px!important;
  }
  body.inGame .authSessionCopy{
    flex:1 1 auto!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:1px!important;
    white-space:normal!important;
    overflow:hidden!important;
  }
  body.inGame .authSessionLabel{
    display:block!important;
    font-size:9px!important;
    line-height:1!important;
    letter-spacing:.13em!important;
    white-space:nowrap!important;
  }
  body.inGame #authSessionEmail{
    display:block!important;
    width:100%!important;
    max-width:320px!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:12px!important;
    line-height:1.15!important;
    text-align:left!important;
  }
  body.inGame .authSessionStories{
    display:none!important;
  }
  body.inGame .authSessionLogout{
    flex:0 0 auto!important;
    min-height:30px!important;
    padding:7px 10px!important;
    font-size:11px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
  }
}


/* V2.58 modal/panel overlay fix
   On iPad and other touch devices, the floating E pad and account dock should
   disappear while lesson/journal/how-to-play panels are open. This keeps modal
   content readable and prevents accidental input behind the panel. */
body.inGame.modalOpen .mobileControls,
body.inGame.modalOpen .authSessionBar,
body.inGame.modalOpen .storyBottomDesk{
  display:none!important;
  opacity:0!important;
  pointer-events:none!important;
  visibility:hidden!important;
}
body.inGame.modalOpen #canvas{
  touch-action:auto!important;
}


/* Tomas case-file integration */
.caseFileBtnCount{display:inline-flex;align-items:center;justify-content:center;min-width:28px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.22);font-size:12px;font-weight:700;margin-left:8px}
.caseStartStoryBlurb{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:16px;align-items:start;margin-top:10px}.caseStartStoryImg{width:100%;max-width:220px;border-radius:16px;border:3px solid rgba(140,89,27,.35);box-shadow:0 16px 36px rgba(15,23,42,.16)}
.caseFileWrap{display:flex;flex-direction:column;gap:18px}.caseFileOverview{display:grid;grid-template-columns:minmax(180px,250px) 1fr;gap:18px;align-items:start;padding:18px;border-radius:18px;background:linear-gradient(180deg,#fffaf0,#f5ead3);border:1px solid rgba(140,89,27,.25)}
.caseFileCover,.caseClueHeroImg{width:100%;height:auto;border-radius:16px;border:2px solid rgba(140,89,27,.35);box-shadow:0 12px 28px rgba(15,23,42,.14)}.caseEyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8b5a2b;font-weight:800;margin-bottom:6px}
.caseClueBadgeRow{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.caseProgressPill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#ede0c5;color:#5f370e;font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase}.caseProgressPill.success{background:#d8f3dc;color:#1b5e20}
.caseFileGroup{display:flex;flex-direction:column;gap:12px}.caseFileGroupHead h4{margin:0 0 4px;color:#5f370e}.caseFileGroupHead p{margin:0;color:#5b4632}.caseClueGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.caseClueCard{display:flex;align-items:stretch;gap:12px;border:1px solid rgba(140,89,27,.26);background:#fffdf7;border-radius:18px;padding:12px;cursor:pointer;text-align:left;box-shadow:0 10px 18px rgba(15,23,42,.08);transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}.caseClueCard:hover{transform:translateY(-2px);box-shadow:0 14px 24px rgba(15,23,42,.12);border-color:rgba(140,89,27,.45)}.caseClueCard.locked{background:linear-gradient(180deg,#f7f2e8,#efe6d5)}
.caseClueStep{flex:0 0 34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#8b5a2b;color:#fff;font-weight:800;margin-top:4px}.caseClueThumbWrap{flex:0 0 72px}.caseClueThumb{width:72px;height:96px;object-fit:cover;border-radius:12px;border:2px solid rgba(140,89,27,.28);background:#f2e8d5;display:flex;align-items:center;justify-content:center;font-size:30px}.caseClueThumbLocked{color:#8b5a2b}.caseClueCardBody{display:flex;flex-direction:column;gap:6px}.caseClueCardBody b{color:#3f2412}.caseClueCardBody span{font-size:13px;line-height:1.4;color:#5b4632}.finalRecoveryCard{max-width:560px}
.caseClueDetail{display:grid;grid-template-columns:minmax(250px,360px) 1fr;gap:18px;align-items:start}.caseClueText{display:flex;flex-direction:column;gap:12px}.caseClueTeaser{font-size:14px;font-weight:700;color:#8b5a2b}.caseClueBullets{margin:0;padding-left:18px;display:grid;gap:8px;color:#4f3b27}
.caseLockedPanel{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px;border-radius:18px;background:linear-gradient(180deg,#f7f2e8,#efe6d5);border:1px dashed rgba(140,89,27,.35)}.caseLockedBadge{font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8b5a2b;margin-bottom:8px}.caseLockedHint{font-size:15px;color:#5b4632;text-align:center;max-width:420px}
.lessonCaseUnlock{margin-top:14px;padding:12px 14px;border-radius:16px;background:linear-gradient(180deg,#fff7ed,#ffedd5);border:1px solid rgba(249,115,22,.22)}.lessonCaseUnlockTitle{font-size:14px;line-height:1.5;color:#7c2d12}.lessonCaseUnlockNote{margin-top:8px;font-size:12px;color:#9a3412}
@media (max-width:900px){.caseStartStoryBlurb,.caseFileOverview,.caseClueDetail{grid-template-columns:1fr}.caseClueThumbWrap{flex-basis:64px}.caseClueThumb{width:64px;height:88px}}



/* ===== Tomas Healing Mystery v2.2: readable, interactive clue board ===== */
.modalBox{position:relative;}
.modalCloseX{
  position:absolute; top:14px; right:16px; z-index:30;
  width:42px; height:42px; border-radius:999px; border:1px solid rgba(15,23,42,.18);
  background:rgba(255,255,255,.92); color:#0f172a; font-size:28px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 10px 24px rgba(15,23,42,.18);
}
.modalCloseX:hover{transform:translateY(-1px); background:#fff;}
.tomasCaseModal .modalBox{
  width:min(1180px,96vw);
  max-height:94vh;
  overflow:hidden;
  background:linear-gradient(180deg,#081427,#030712);
  color:#f8fafc;
  border:1px solid rgba(245,158,11,.45);
  box-shadow:0 28px 80px rgba(0,0,0,.5);
}
.tomasCaseModal .modalGrid{grid-template-columns:1fr !important; gap:0;}
.tomasCaseModal .avatarPane{display:none !important;}
.tomasCaseModal #modalTitle{
  padding-right:56px;
  color:#fff7ed;
  letter-spacing:.01em;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.tomasCaseModal #modalBody{color:#fde68a; font-weight:700; margin-bottom:12px;}
.tomasCaseModal #modalContent{
  max-height:calc(94vh - 210px);
  overflow:auto;
  padding:2px 10px 10px 0;
}
.tomasCaseModal #modalActions{
  position:sticky;
  bottom:0;
  z-index:20;
  background:linear-gradient(180deg,rgba(3,7,18,0),#030712 30%,#030712);
  padding:14px 0 2px;
  margin-top:10px;
}
.tomasCaseModal .btnRow{gap:10px; flex-wrap:wrap;}
.tomasCaseModal .smallBtn{font-size:12px; padding:7px 10px; border-radius:10px;}

.caseClueBadgeRow{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px;}
.caseProgressPill{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:999px;
  background:#fde68a;color:#5f370e;font-size:12px;font-weight:900;
  letter-spacing:.04em;text-transform:uppercase;
}
.caseProgressPill.success{background:#bbf7d0;color:#14532d;}
.caseEyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fbbf24;font-weight:900;margin-bottom:6px;}

.caseBoardWrap{display:flex;flex-direction:column;gap:18px;}
.caseBoardHero{
  display:grid;grid-template-columns:minmax(190px,280px) 1fr;gap:20px;align-items:start;
  padding:18px;border-radius:22px;
  background:linear-gradient(135deg,rgba(30,41,59,.96),rgba(15,23,42,.96));
  border:1px solid rgba(245,158,11,.35);
}
.caseBoardHero img{
  width:100%;border-radius:18px;border:2px solid rgba(245,158,11,.45);
  box-shadow:0 18px 42px rgba(0,0,0,.28);
}
.caseBoardHero h2{margin:0 0 8px;color:#fff7ed;}
.caseBoardHero p{color:#e5e7eb;line-height:1.55;margin:0 0 12px;}
.caseBoardHint{
  border-radius:16px;padding:12px 14px;
  background:rgba(245,158,11,.12);
  border:1px dashed rgba(245,158,11,.42);
  color:#fde68a;font-weight:700;
}
.caseBoardPhase{
  padding:16px;border-radius:20px;background:rgba(15,23,42,.86);
  border:1px solid rgba(148,163,184,.22);
}
.caseBoardPhase h3{margin:0 0 4px;color:#fef3c7;}
.caseBoardPhase p{margin:0 0 14px;color:#cbd5e1;}
.caseBoardGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;}
.caseBoardCard{
  display:flex;gap:12px;align-items:stretch;text-align:left;cursor:pointer;
  padding:13px;border-radius:18px;border:1px solid rgba(148,163,184,.25);
  background:linear-gradient(180deg,#111827,#0f172a);
  color:#e5e7eb;box-shadow:0 12px 30px rgba(0,0,0,.18);
  transition:transform .14s ease, border-color .14s ease, background .14s ease;
}
.caseBoardCard:hover{transform:translateY(-2px);border-color:rgba(245,158,11,.55);}
.caseBoardCard.unlocked{background:linear-gradient(180deg,#17311f,#0f2418);border-color:rgba(74,222,128,.4);}
.caseBoardCard.locked{opacity:.78;filter:saturate(.82);}
.caseBoardCard.final{max-width:560px;}
.caseBoardNumber{
  flex:0 0 38px;height:38px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:#f59e0b;color:#111827;font-weight:900;
}
.caseBoardCard.unlocked .caseBoardNumber{background:#86efac;color:#052e16;}
.caseBoardContent{display:flex;flex-direction:column;gap:4px;}
.caseBoardContent b{color:#fff7ed;}
.caseBoardContent span{font-size:13px;line-height:1.35;color:#d1d5db;}
.caseBoardContent small{font-size:12px;color:#fde68a;font-weight:700;}

.tomasMeters{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:12px;}
.tomasMeter{
  padding:10px;border-radius:14px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.tomasMeterTop{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#f8fafc;}
.tomasMeterTrack{height:10px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;margin:7px 0;}
.tomasMeterTrack i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#f97316,#facc15);}
.tomasMeter.repair .tomasMeterTrack i,.tomasMeter.energy .tomasMeterTrack i,.tomasMeter.confidence .tomasMeterTrack i{background:linear-gradient(90deg,#22c55e,#bef264);}
.tomasMeter small{color:#cbd5e1;font-size:11px;}

.caseClueReadable{
  display:grid;grid-template-columns:minmax(360px,1.05fr) minmax(320px,.95fr);
  gap:18px;align-items:start;
}
.caseClueMainPanel,.caseFigurePanel,.caseDecisionPanel,.caseStatusStrip{
  border-radius:22px;background:rgba(15,23,42,.92);
  border:1px solid rgba(148,163,184,.22);
  padding:18px;
}
.caseClueMainPanel h3{margin:0 0 8px;color:#fff7ed;font-size:26px;}
.caseClueMainPanel p{color:#e5e7eb;line-height:1.6;font-size:16px;}
.caseWhyBox{
  padding:12px 14px;margin:12px 0;border-radius:14px;
  background:rgba(245,158,11,.13);border:1px solid rgba(245,158,11,.32);
  color:#fde68a;line-height:1.45;
}
.caseEvidenceGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0;}
.caseEvidenceCard{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px;border-radius:16px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
}
.caseEvidenceIcon{font-size:26px;line-height:1;}
.caseEvidenceCard b{display:block;color:#fff7ed;margin-bottom:3px;}
.caseEvidenceCard span{display:block;color:#d1d5db;font-size:13px;line-height:1.3;}
.caseClueBullets{margin:12px 0 0;padding-left:20px;display:grid;gap:8px;color:#e5e7eb;line-height:1.45;}
.caseFigureHeader{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;color:#fde68a;font-weight:900;text-transform:uppercase;letter-spacing:.05em;font-size:12px;}
.caseFigurePreview{
  width:100%;max-height:58vh;object-fit:contain;border-radius:18px;
  background:#0b1220;border:2px solid rgba(245,158,11,.35);
  box-shadow:0 18px 45px rgba(0,0,0,.28);
}
.caseDecisionPanel{margin-top:18px;}
.caseDecisionHeader{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;}
.caseDecisionHeader span{color:#fbbf24;font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:12px;}
.caseDecisionHeader b{font-size:20px;color:#fff7ed;}
.caseDecisionChoices{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;}
.caseDecisionBtn{
  border:1px solid rgba(245,158,11,.35);background:linear-gradient(180deg,#1f2937,#111827);
  color:#f8fafc;border-radius:16px;padding:12px 14px;cursor:pointer;font-weight:800;text-align:left;
}
.caseDecisionBtn:hover{border-color:#fbbf24;transform:translateY(-1px);}
.caseDecisionFeedback{margin-top:12px;color:#cbd5e1;}
.caseDecisionResult{padding:12px 14px;border-radius:14px;border:1px solid rgba(148,163,184,.24);}
.caseDecisionResult.good{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.35);color:#dcfce7;}
.caseDecisionResult.bad{background:rgba(249,115,22,.14);border-color:rgba(249,115,22,.35);color:#ffedd5;}
.caseStatusStrip{margin-top:18px;}
.caseStatusStrip h4{margin:0;color:#fff7ed;}

.caseLockedPanel{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:34px;border-radius:22px;background:rgba(15,23,42,.9);
  border:1px dashed rgba(245,158,11,.42);
}
.caseLockedBadge{font-size:13px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#fbbf24;}
.caseLockedHint{font-size:16px;color:#e5e7eb;text-align:center;max-width:520px;line-height:1.5;}

.lessonCaseUnlock.v2{
  margin-top:14px;padding:14px;border-radius:18px;
  background:linear-gradient(180deg,#fffbeb,#fed7aa);
  border:1px solid rgba(249,115,22,.28);color:#7c2d12;
}
.lessonCaseUnlockTitle{font-size:14px;line-height:1.5;color:#7c2d12;}
.lessonCaseUnlockSub{margin-top:6px;font-size:13px;color:#9a3412;line-height:1.4;}

.caseZoomWrap{display:flex;align-items:center;justify-content:center;min-height:60vh;}
.caseZoomImg{
  width:100%;max-width:1000px;max-height:76vh;object-fit:contain;
  border-radius:18px;border:2px solid rgba(245,158,11,.48);
  background:#111827;box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.caseImageModal .modalBox{width:min(1120px,98vw);}
.caseImageModal #modalContent{max-height:calc(94vh - 170px);}

@media (max-width: 900px){
  .caseBoardHero,.caseClueReadable{grid-template-columns:1fr;}
  .tomasCaseModal #modalContent{max-height:calc(94vh - 230px);}
  .caseClueMainPanel h3{font-size:22px;}
}



/* ===== Universal Image Reader / Magnifier v1 ===== */
.imageReaderTarget{
  cursor: zoom-in !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.imageReaderTarget:hover{
  filter: brightness(1.04) contrast(1.03);
  box-shadow: 0 0 0 3px rgba(59,130,246,.25), 0 16px 35px rgba(15,23,42,.22);
}
.imageReaderInlineBtn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:8px 0 12px 8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.35);
  background:linear-gradient(180deg,#eff6ff,#dbeafe);
  color:#1d4ed8;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(37,99,235,.14);
}
.imageReaderInlineBtn:hover{transform:translateY(-1px);background:#bfdbfe;}
.imageReaderOverlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(2,6,23,.82);
  backdrop-filter: blur(10px);
}
.imageReaderShell{
  width:min(1240px,98vw);
  height:min(920px,96vh);
  display:grid;
  grid-template-rows:auto auto 1fr;
  overflow:hidden;
  border-radius:26px;
  background:linear-gradient(180deg,#07111f,#020617);
  border:1px solid rgba(96,165,250,.38);
  box-shadow:0 30px 90px rgba(0,0,0,.65);
  color:#f8fafc;
}
.imageReaderTopbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:18px 20px 12px;
  border-bottom:1px solid rgba(148,163,184,.18);
}
.imageReaderEyebrow{
  color:#93c5fd;
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.imageReaderTopbar h2{
  margin:2px 0 0;
  color:#fff;
  font-size:clamp(20px,2.8vw,32px);
}
.imageReaderClose{
  flex:0 0 auto;
  width:46px;height:46px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:32px;
  line-height:1;
  cursor:pointer;
}
.imageReaderClose:hover{background:rgba(255,255,255,.22);transform:translateY(-1px);}
.imageReaderToolbar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  padding:12px 20px;
  background:rgba(15,23,42,.78);
  border-bottom:1px solid rgba(148,163,184,.15);
}
.imageReaderToolbar button{
  border:1px solid rgba(96,165,250,.35);
  background:linear-gradient(180deg,#1e3a8a,#1d4ed8);
  color:#eff6ff;
  border-radius:14px;
  padding:10px 13px;
  cursor:pointer;
  font-weight:900;
  min-height:42px;
}
.imageReaderToolbar button:hover,.imageReaderToolbar button.active{
  background:linear-gradient(180deg,#f59e0b,#d97706);
  border-color:#fde68a;
  color:#111827;
}
.imageReaderHint{
  color:#cbd5e1;
  font-size:13px;
  line-height:1.35;
}
.imageReaderStage{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  touch-action:none;
  cursor:grab;
  background:
    radial-gradient(circle at 30% 20%, rgba(59,130,246,.16), transparent 32%),
    radial-gradient(circle at 70% 80%, rgba(245,158,11,.12), transparent 30%),
    #020617;
}
.imageReaderStage.dragging{cursor:grabbing;}
.imageReaderImg{
  max-width:96%;
  max-height:96%;
  object-fit:contain;
  transform-origin:center center;
  will-change:transform;
  transition:transform .08s linear;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background:#0f172a;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  user-select:none;
  -webkit-user-drag:none;
}
.imageReaderLens{
  position:absolute;
  display:none;
  width:210px;
  height:210px;
  border-radius:50%;
  border:4px solid rgba(253,224,71,.95);
  box-shadow:0 0 0 3px rgba(15,23,42,.8), 0 18px 50px rgba(0,0,0,.45);
  pointer-events:none;
  background-repeat:no-repeat;
  background-color:#111827;
}
.imageReaderOverlay.lensActive .imageReaderStage{cursor:crosshair;}
.imageReaderOverlay.lensActive .imageReaderLens{display:block;}
body.imageReaderOpen{overflow:hidden;}

@media (max-width: 760px){
  .imageReaderOverlay{padding:8px;}
  .imageReaderShell{
    width:100vw;
    height:100dvh;
    border-radius:0;
  }
  .imageReaderTopbar{padding:14px 14px 10px;}
  .imageReaderClose{width:44px;height:44px;font-size:30px;}
  .imageReaderToolbar{
    padding:10px 12px;
    gap:8px;
  }
  .imageReaderToolbar button{
    flex:1 1 42%;
    padding:11px 8px;
    font-size:13px;
  }
  .imageReaderHint{
    flex:1 1 100%;
    font-size:12px;
  }
  .imageReaderLens{
    width:150px;
    height:150px;
    border-width:3px;
  }
  .imageReaderInlineBtn{
    display:flex;
    width:max-content;
    max-width:100%;
    margin:8px 0 14px;
  }
}

/* Extra polish for Tomas case board: more celebratory but still readable */
.tomasCaseModal .caseBoardCard.unlocked{
  position:relative;
  overflow:hidden;
}
.tomasCaseModal .caseBoardCard.unlocked::after{
  content:"";
  position:absolute;
  inset:-60%;
  background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.18) 50%,transparent 62%);
  transform:translateX(-70%) rotate(12deg);
  animation:tomasCardShine 4.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes tomasCardShine{
  0%,55%{transform:translateX(-70%) rotate(12deg);}
  80%,100%{transform:translateX(70%) rotate(12deg);}
}
.tomasCaseModal .caseProgressPill.success{
  box-shadow:0 0 22px rgba(34,197,94,.30);
}



/* ===== Tomas organization + Life Example magnifier refinements v3 ===== */
.tomasStartModal .modalBox{
  width:min(980px,94vw);
  max-height:92vh;
  overflow:hidden;
}
.tomasStartModal .modalGrid{
  grid-template-columns:1fr !important;
}
.tomasStartModal #modalTitle{
  padding-right:52px;
  font-size:clamp(24px,3.6vw,40px);
  line-height:1.08;
}
.tomasStartModal #modalBody{
  margin:0;
}
.tomasStartBody{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.tomasStartLead{
  font-size:clamp(16px,2vw,20px);
  line-height:1.55;
  color:#263244;
  margin:0;
  max-width:800px;
}
.caseStartStoryBlurb.v3{
  display:grid;
  grid-template-columns:minmax(220px,300px) minmax(0,1fr);
  gap:22px;
  align-items:stretch;
  margin-top:12px;
  padding:18px;
  border-radius:24px;
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(239,246,255,.82));
  border:1px solid rgba(59,130,246,.22);
  box-shadow:0 20px 50px rgba(15,23,42,.12);
}
.caseStartMedia{
  display:flex;
  align-items:center;
  justify-content:center;
}
.caseStartMedia .imageReaderFrame{
  width:100%;
  max-width:300px;
}
.caseStartStoryImg{
  width:100%;
  max-height:min(46vh,420px);
  object-fit:contain;
  border-radius:18px;
  border:2px solid rgba(146,64,14,.25);
  box-shadow:0 18px 45px rgba(15,23,42,.18);
}
.caseStartCopy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}
.caseStartKicker{
  color:#1d4ed8;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:900;
  margin-bottom:8px;
}
.caseStartCopy h3{
  margin:0 0 10px;
  font-size:clamp(24px,3.4vw,38px);
  line-height:1.05;
  color:#0f172a;
}
.caseStartCopy p{
  margin:0;
  color:#334155;
  font-size:clamp(15px,1.8vw,18px);
  line-height:1.52;
}
.caseStartMiniBoard{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px;
  margin:16px 0;
}
.caseStartMiniBoard span{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:999px;
  background:#e0f2fe;
  color:#075985;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}
.caseStartGoal{
  padding:12px 14px;
  border-radius:16px;
  background:#fffbeb;
  border:1px solid #facc15;
  color:#713f12;
  font-size:15px;
  line-height:1.45;
}

.imageReaderFrame{
  position:relative;
  display:block;
  max-width:100%;
}
.imageReaderFrame > img{
  display:block;
  max-width:100%;
}
.imageReaderFloatBtn{
  position:absolute;
  top:10px;
  right:10px;
  z-index:12;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:42px;
  min-height:38px;
  padding:8px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.75);
  background:rgba(15,23,42,.76);
  color:#fff;
  font-weight:900;
  font-size:13px;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  backdrop-filter:blur(8px);
}
.imageReaderFloatBtn:hover{
  transform:translateY(-1px) scale(1.02);
  background:#2563eb;
}
.lifeExampleImageFrame{
  position:relative;
}
.lifeExampleFloatMagnifier{
  top:12px;
  right:12px;
  width:44px;
  height:44px;
  padding:0;
  font-size:20px;
  background:rgba(255,251,235,.94);
  color:#92400e;
  border-color:rgba(146,64,14,.35);
}
.lifeExampleHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.lifeExampleHeaderActions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.lifeExampleMagnifyBtn{
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(146,64,14,.32);
  background:linear-gradient(180deg,#fff7ed,#fed7aa);
  color:#92400e;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(146,64,14,.16);
}
.lifeExampleMagnifyBtn:hover{
  transform:translateY(-1px);
  background:#fde68a;
}
.imageReaderInlineBtn{
  display:none !important;
}

/* Better case board spacing when the universal magnifier wraps the cover image */
.caseBoardHero .imageReaderFrame,
.caseFileOverview .imageReaderFrame{
  width:100%;
  max-width:280px;
}
.caseBoardHero .caseFileCover,
.caseFileOverview .caseFileCover{
  width:100%;
}
.tomasCaseModal .modalGrid{
  grid-template-columns:1fr !important;
}
.tomasCaseModal .avatarPane{
  display:none !important;
}

@media (max-width: 820px){
  .tomasStartModal .modalBox{
    width:min(96vw,720px);
  }
  .caseStartStoryBlurb.v3{
    grid-template-columns:1fr;
    padding:14px;
  }
  .caseStartMedia .imageReaderFrame{
    max-width:min(72vw,310px);
    margin:0 auto;
  }
  .caseStartStoryImg{
    max-height:34vh;
  }
  .caseStartMiniBoard{
    grid-template-columns:1fr;
  }
  .caseStartMiniBoard span{
    white-space:normal;
  }
}
@media (max-width: 520px){
  .tomasStartModal .modalBox{
    width:100vw;
    max-height:100dvh;
    border-radius:0;
  }
  .tomasStartModal #modalContent{
    max-height:calc(100dvh - 240px);
    overflow:auto;
  }
  .caseStartStoryBlurb.v3{
    gap:14px;
  }
  .caseStartStoryImg{
    max-height:30vh;
  }
  .lifeExampleHeader{
    align-items:center;
  }
  .lifeExampleHeaderActions{
    flex-direction:row;
  }
  .lifeExampleBadge{
    font-size:11px;
  }
}



/* ===== Tomas entry modal final layout fix v4 ===== */
.tomasStartModal .modalBox{
  width:min(1060px,94vw) !important;
  max-height:92vh !important;
  overflow:hidden !important;
  border-radius:28px;
}
.tomasStartModal .modalGrid{
  display:block !important;
  grid-template-columns:1fr !important;
}
.tomasStartModal .avatarPane{
  display:none !important;
}
.tomasStartModal #modalTitle{
  padding-right:58px;
  margin-bottom:4px;
  font-size:clamp(28px,4vw,44px) !important;
  line-height:1.05 !important;
  max-width:none !important;
  white-space:normal !important;
}
.tomasStartModal #modalBody{
  margin:0 0 12px !important;
  padding:0 !important;
  max-width:none !important;
}
.tomasEntrySub{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  background:#e0f2fe;
  color:#075985;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:12px;
}
.tomasStartModal #modalContent{
  max-height:calc(92vh - 190px);
  overflow:auto;
  padding-right:4px;
}
.tomasEntryCard{
  display:grid;
  grid-template-columns:minmax(260px,330px) minmax(0,1fr);
  gap:26px;
  align-items:center;
  padding:20px;
  border-radius:26px;
  background:
    radial-gradient(circle at 15% 20%, rgba(59,130,246,.16), transparent 34%),
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(239,246,255,.88));
  border:1px solid rgba(59,130,246,.20);
  box-shadow:0 22px 55px rgba(15,23,42,.13);
}
.tomasEntryPoster{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}
.tomasEntryPoster .imageReaderFrame{
  width:100%;
  max-width:330px;
}
.tomasEntryPoster .caseStartStoryImg{
  width:100%;
  max-height:min(52vh,470px);
  object-fit:contain;
  border-radius:20px;
  border:2px solid rgba(146,64,14,.25);
  box-shadow:0 20px 50px rgba(15,23,42,.20);
  background:#fffaf0;
}
.tomasEntryCopy{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.tomasEntryCopy .caseStartKicker{
  color:#1d4ed8;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:1000;
  margin-bottom:10px;
}
.tomasEntryCopy h3{
  margin:0 0 12px;
  font-size:clamp(30px,4.3vw,52px);
  line-height:.98;
  color:#0f172a;
  letter-spacing:-.035em;
}
.tomasEntryCopy p{
  margin:0;
  color:#334155;
  font-size:clamp(16px,2vw,21px);
  line-height:1.52;
  max-width:640px;
}
.tomasEntryCopy .caseStartMiniBoard{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:9px;
  margin:18px 0;
}
.tomasEntryCopy .caseStartMiniBoard span{
  display:flex;
  align-items:center;
  gap:6px;
  padding:9px 11px;
  border-radius:999px;
  background:#dbeafe;
  color:#1e3a8a;
  font-size:13px;
  font-weight:900;
  line-height:1.2;
}
.tomasEntryCopy .caseStartGoal{
  padding:13px 15px;
  border-radius:17px;
  background:#fffbeb;
  border:1px solid #f59e0b;
  color:#713f12;
  font-size:15px;
  line-height:1.45;
}
.tomasStartModal #modalActions{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.tomasStartModal #modalActions .btn{
  min-height:44px;
}

@media (max-width: 820px){
  .tomasStartModal .modalBox{
    width:96vw !important;
  }
  .tomasEntryCard{
    grid-template-columns:1fr;
    gap:16px;
    padding:16px;
  }
  .tomasEntryPoster .imageReaderFrame{
    max-width:min(76vw,320px);
  }
  .tomasEntryPoster .caseStartStoryImg{
    max-height:34vh;
  }
  .tomasEntryCopy h3{
    font-size:clamp(28px,7vw,42px);
  }
  .tomasEntryCopy .caseStartMiniBoard{
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width: 540px){
  .tomasStartModal .modalBox{
    width:100vw !important;
    max-height:100dvh !important;
    border-radius:0 !important;
  }
  .tomasStartModal #modalContent{
    max-height:calc(100dvh - 235px);
  }
  .tomasEntryCard{
    padding:14px;
  }
  .tomasEntryPoster .caseStartStoryImg{
    max-height:28vh;
  }
  .tomasEntryCopy .caseStartMiniBoard{
    grid-template-columns:1fr;
  }
  .tomasStartModal #modalActions .btn{
    flex:1 1 100%;
  }
}



/* ===== Tomas case board / clue modal avatar removal + responsive fix v5 ===== */
#modal.tomasCaseModal .modalBox,
#modal.tomasStartModal .modalBox{
  width:min(1120px,96vw) !important;
}
#modal.tomasCaseModal .modalGrid,
#modal.tomasStartModal .modalGrid{
  display:block !important;
  grid-template-columns:minmax(0,1fr) !important;
}
#modal.tomasCaseModal #modalAvatar,
#modal.tomasStartModal #modalAvatar,
#modal.tomasCaseModal .avatarPane,
#modal.tomasStartModal .avatarPane{
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
}
#modal.tomasCaseModal #modalTitle{
  padding-right:58px;
  font-size:clamp(24px,3vw,38px);
  line-height:1.08;
}
#modal.tomasCaseModal #modalBody{
  max-width:none !important;
}
#modal.tomasCaseModal #modalContent{
  width:100% !important;
  max-width:none !important;
}
#modal.tomasCaseModal .caseBoardHero{
  display:grid !important;
  grid-template-columns:minmax(230px,320px) minmax(0,1fr) !important;
  gap:24px !important;
  align-items:start !important;
}
#modal.tomasCaseModal .caseBoardHero > .imageReaderFrame{
  width:100% !important;
  max-width:320px !important;
  margin:0 auto !important;
}
#modal.tomasCaseModal .caseBoardHero > div:last-child{
  min-width:0 !important;
}
#modal.tomasCaseModal .caseBoardHero h2{
  font-size:clamp(28px,3.4vw,44px);
  line-height:1.05;
  margin-bottom:10px;
}
#modal.tomasCaseModal .caseBoardHero p{
  font-size:clamp(15px,1.35vw,18px);
  line-height:1.55;
}
#modal.tomasCaseModal .caseBoardGrid{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;
}
#modal.tomasCaseModal .caseClueReadable{
  grid-template-columns:minmax(350px,1.05fr) minmax(320px,.95fr) !important;
}
#modal.tomasCaseModal .caseFigurePanel{
  min-width:0;
}
#modal.tomasCaseModal .caseFigurePreview{
  max-height:56vh;
}
#modal.tomasCaseModal .caseDecisionPanel,
#modal.tomasCaseModal .caseStatusStrip{
  width:100%;
}
#modal.tomasCaseModal .modalCloseX,
#modal.tomasStartModal .modalCloseX{
  display:flex !important;
}

@media (max-width: 860px){
  #modal.tomasCaseModal .modalBox{
    width:96vw !important;
    max-height:94vh !important;
  }
  #modal.tomasCaseModal .caseBoardHero{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  #modal.tomasCaseModal .caseBoardHero > .imageReaderFrame{
    max-width:min(72vw,310px) !important;
  }
  #modal.tomasCaseModal .caseClueReadable{
    grid-template-columns:1fr !important;
  }
  #modal.tomasCaseModal .caseFigurePreview{
    max-height:48vh;
  }
}
@media (max-width: 560px){
  #modal.tomasCaseModal .modalBox{
    width:100vw !important;
    max-height:100dvh !important;
    border-radius:0 !important;
  }
  #modal.tomasCaseModal #modalContent{
    max-height:calc(100dvh - 220px) !important;
  }
  #modal.tomasCaseModal .caseBoardHero{
    padding:14px !important;
  }
  #modal.tomasCaseModal .caseBoardHero > .imageReaderFrame{
    max-width:82vw !important;
  }
  #modal.tomasCaseModal .caseBoardGrid{
    grid-template-columns:1fr !important;
  }
  #modal.tomasCaseModal .caseDecisionChoices{
    grid-template-columns:1fr !important;
  }
  #modal.tomasCaseModal #modalActions .btn{
    flex:1 1 100%;
  }
}


/* ===== Story revisit + mobile teacher portrait fix v9 ===== */
/* Phone-specific fix for regular lesson/teacher modals.
   Does not touch Tomas case modals or image reader modals. */
@media (max-width: 760px){
  #modal.lessonModal.oceanLessonModal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageMagnifierModal):not(.imageReaderOverlay) .modalBox{
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding: 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #modal.lessonModal.oceanLessonModal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageMagnifierModal) .modalGrid{
    grid-template-columns: minmax(150px, 40vw) minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  #modal.lessonModal.oceanLessonModal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageMagnifierModal) .avatarPane{
    position: sticky !important;
    top: 8px !important;
    min-height: auto !important;
    height: auto !important;
    padding: 10px 8px !important;
    border-radius: 20px !important;
    gap: 8px !important;
  }

  #modal.lessonModal.oceanLessonModal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageMagnifierModal) .avatarPane::before{
    font-size: 10px !important;
    letter-spacing: .12em !important;
    margin-bottom: 0 !important;
  }

  #modal.lessonModal.oceanLessonModal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageMagnifierModal) .imgAvatar{
    width: min(39vw, 170px) !important;
    height: min(54vw, 230px) !important;
    min-width: 142px !important;
    min-height: 190px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  #modal.lessonModal.oceanLessonModal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageMagnifierModal) .imgAvatar img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 18% !important;
    transform: scale(1.42) translateY(7%) !important;
    transform-origin: center center !important;
    padding: 0 !important;
  }

  #modal.lessonModal.oceanLessonModal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageMagnifierModal) .emojiAvatar{
    width: min(38vw, 170px) !important;
    height: min(38vw, 170px) !important;
    min-width: 138px !important;
    min-height: 138px !important;
    font-size: 58px !important;
  }

  #modal.lessonModal.oceanLessonModal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageMagnifierModal) .avatarCaption{
    max-width: min(40vw, 190px) !important;
    padding: 8px 8px !important;
    border-radius: 14px !important;
  }

  #modal.lessonModal.oceanLessonModal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageMagnifierModal) .avatarCaption b{
    font-size: clamp(13px, 3.1vw, 16px) !important;
    line-height: 1.08 !important;
  }

  #modal.lessonModal.oceanLessonModal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageMagnifierModal) .avatarCaption span{
    font-size: clamp(10px, 2.6vw, 12px) !important;
    line-height: 1.15 !important;
  }

  #modal.lessonModal.oceanLessonModal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageMagnifierModal) #modalTitle{
    font-size: clamp(24px, 6.5vw, 34px) !important;
    line-height: 1.07 !important;
    overflow-wrap: anywhere !important;
    padding-right: 46px !important;
  }

  #modal.lessonModal.oceanLessonModal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageMagnifierModal) #modalBody{
    font-size: 12px !important;
    line-height: 1.35 !important;
    max-width: 100% !important;
  }

  #modal.lessonModal.oceanLessonModal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageMagnifierModal) .dialogueBubble,
  #modal.lessonModal.oceanLessonModal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageMagnifierModal) .storyDialogueBubble{
    overflow-wrap: anywhere !important;
  }
}

/* Very narrow phones: stack the teacher portrait above the lesson instead of squeezing the text. */
@media (max-width: 430px){
  #modal.lessonModal.oceanLessonModal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageMagnifierModal) .modalGrid{
    grid-template-columns: 1fr !important;
  }

  #modal.lessonModal.oceanLessonModal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageMagnifierModal) .avatarPane{
    position: relative !important;
    top: auto !important;
    display: grid !important;
    grid-template-columns: 128px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 0 !important;
  }

  #modal.lessonModal.oceanLessonModal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageMagnifierModal) .avatarPane::before{
    grid-column: 1 / -1 !important;
  }

  #modal.lessonModal.oceanLessonModal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageMagnifierModal) .imgAvatar{
    width: 128px !important;
    height: 166px !important;
    min-width: 128px !important;
    min-height: 166px !important;
  }

  #modal.lessonModal.oceanLessonModal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageMagnifierModal) .avatarCaption{
    max-width: none !important;
    width: 100% !important;
  }
}



/* ===== Phone dialogue teacher portrait + poster responsiveness fix v10 ===== */

/*
  This targets the cinematic dialogue/poster modals on narrow phones.
  The earlier mobile patch fixed lesson modal avatars, but the "Old Tracker Boone"
  screen uses dialoguePosterModal / posterPortrait, which had separate CSS.
*/
@media (max-width: 760px){
  .modal.dialoguePosterModal{
    align-items:flex-start !important;
    padding:8px !important;
    overflow:auto !important;
  }

  .modal.dialoguePosterModal .modalBox{
    width:100vw !important;
    max-width:100vw !important;
    max-height:none !important;
    min-height:100dvh !important;
    border-radius:0 !important;
    padding:8px !important;
    overflow:visible !important;
  }

  .modal.dialoguePosterModal .modalGrid{
    display:block !important;
    grid-template-columns:1fr !important;
  }

  .dialoguePoster{
    width:100% !important;
    min-height:auto !important;
    padding:10px !important;
    border-radius:18px !important;
    overflow:hidden !important;
  }

  .dialoguePoster .posterScene{
    height:clamp(150px, 34vw, 240px) !important;
    min-height:150px !important;
    border-radius:14px !important;
    margin-bottom:10px !important;
  }

  .dialoguePoster .posterTitleBlock{
    margin:6px 0 10px !important;
    padding:0 4px !important;
  }

  .dialoguePoster .posterTitle{
    font-size:clamp(24px, 7vw, 34px) !important;
    line-height:1.06 !important;
    overflow-wrap:anywhere !important;
  }

  .dialoguePoster .posterSubtitle{
    font-size:13px !important;
    line-height:1.25 !important;
  }

  .dialoguePoster .posterBody{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    width:100% !important;
  }

  .dialoguePoster .posterSide{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }

  .dialoguePoster .posterSide.left{
    display:grid !important;
    grid-template-columns:minmax(118px, 34vw) minmax(0, 1fr) !important;
    grid-template-areas:
      "tag tag"
      "portrait name"
      "portrait role" !important;
    gap:8px 12px !important;
    align-items:center !important;
    padding:10px !important;
  }

  .dialoguePoster .posterSide.left .posterRoleTag{
    grid-area:tag !important;
    justify-self:start !important;
    margin:0 !important;
  }

  .dialoguePoster .posterSide.left .posterPortrait{
    grid-area:portrait !important;
    width:min(34vw, 150px) !important;
    height:min(44vw, 190px) !important;
    min-width:118px !important;
    min-height:150px !important;
    border-radius:18px !important;
    align-self:center !important;
    justify-self:center !important;
    overflow:hidden !important;
  }

  .dialoguePoster .posterSide.left .posterPortrait img{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center 22% !important;
    padding:0 !important;
    transform:scale(1.20) !important;
    transform-origin:center 30% !important;
    filter:drop-shadow(0 10px 16px rgba(0,0,0,.38)) saturate(1.06) contrast(1.05) !important;
  }

  .dialoguePoster .posterSide.left .posterName{
    grid-area:name !important;
    margin:0 !important;
    text-align:left !important;
    align-self:end !important;
    font-size:clamp(24px, 7vw, 36px) !important;
    line-height:1.0 !important;
    overflow-wrap:anywhere !important;
  }

  .dialoguePoster .posterSide.left .posterRole{
    grid-area:role !important;
    margin:0 !important;
    text-align:left !important;
    align-self:start !important;
    font-size:12px !important;
    line-height:1.25 !important;
  }

  .dialoguePoster .posterSide.right{
    display:none !important;
  }

  .dialoguePoster .posterDialogue{
    min-height:0 !important;
    padding:10px !important;
    border-radius:16px !important;
    width:100% !important;
    overflow:hidden !important;
  }

  .dialoguePoster .posterDialogueStack{
    max-height:none !important;
    overflow:visible !important;
    padding:0 !important;
    gap:10px !important;
  }

  .dialoguePoster .posterBubble{
    margin-left:0 !important;
    margin-right:0 !important;
    padding:12px 13px !important;
    border-radius:15px !important;
  }

  .dialoguePoster .posterBubbleSpeaker{
    font-size:clamp(15px, 4.2vw, 18px) !important;
    line-height:1.1 !important;
  }

  .dialoguePoster .posterBubbleBody{
    font-size:clamp(18px, 5.2vw, 25px) !important;
    line-height:1.26 !important;
    white-space:pre-wrap !important;
    overflow-wrap:anywhere !important;
  }

  .dialoguePoster .posterFooter{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    align-items:stretch !important;
    margin-top:12px !important;
  }

  .dialoguePoster .posterActions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  .dialoguePoster .posterPrimaryBtn,
  .dialoguePoster .posterSecondaryBtn{
    flex:1 1 100% !important;
    min-height:44px !important;
  }
}

/* Very narrow phones: make the teacher image even more visible and avoid text squeezing. */
@media (max-width: 430px){
  .dialoguePoster .posterSide.left{
    grid-template-columns:minmax(132px, 42vw) minmax(0, 1fr) !important;
  }

  .dialoguePoster .posterSide.left .posterPortrait{
    width:min(42vw, 165px) !important;
    height:min(55vw, 215px) !important;
    min-width:132px !important;
    min-height:172px !important;
  }

  .dialoguePoster .posterSide.left .posterPortrait img{
    transform:scale(1.32) !important;
    object-position:center 20% !important;
  }
}

/* Regular lesson-modal teacher avatars on phones, stronger than previous v8 if both exist. */
@media (max-width: 760px){
  #modal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageReaderOverlay):not(.imageMagnifierModal):not(.caseImageModal):not(.dialoguePosterModal) .modalGrid{
    grid-template-columns:minmax(145px, 40vw) minmax(0,1fr) !important;
    gap:14px !important;
  }

  #modal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageReaderOverlay):not(.imageMagnifierModal):not(.caseImageModal):not(.dialoguePosterModal) .imgAvatar{
    width:min(40vw, 180px) !important;
    height:min(54vw, 230px) !important;
    min-width:145px !important;
    min-height:185px !important;
    border-radius:22px !important;
  }

  #modal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageReaderOverlay):not(.imageMagnifierModal):not(.caseImageModal):not(.dialoguePosterModal) .imgAvatar img{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center 24% !important;
    padding:0 !important;
    transform:scale(1.10) !important;
  }
}

@media (max-width: 430px){
  #modal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageReaderOverlay):not(.imageMagnifierModal):not(.caseImageModal):not(.dialoguePosterModal) .modalGrid{
    grid-template-columns:1fr !important;
  }

  #modal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageReaderOverlay):not(.imageMagnifierModal):not(.caseImageModal):not(.dialoguePosterModal) .avatarPane{
    order:-1 !important;
  }

  #modal:not(.tomasCaseModal):not(.tomasStartModal):not(.imageReaderOverlay):not(.imageMagnifierModal):not(.caseImageModal):not(.dialoguePosterModal) .imgAvatar{
    width:min(58vw, 220px) !important;
    height:min(70vw, 270px) !important;
    margin:0 auto 10px !important;
  }
}


/* Mini-game and quiz feedback clarity: mark incorrect choices directly. */
.choice.bad,
.choice.quizWrongChoice{
  background:#fee2e2!important;
  color:#7f1d1d!important;
  border:1px solid #fca5a5!important;
  box-shadow:0 0 0 2px rgba(239,68,68,.10)!important;
}
.choice.bad:hover,
.choice.quizWrongChoice:hover{
  background:#fecaca!important;
}
.choice.good{
  background:#dcfce7!important;
  color:#14532d!important;
  border:1px solid #86efac!important;
}
.quizWrongMarker{
  display:inline-flex;
  width:20px;
  height:20px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#dc2626;
  color:#fff;
  font-weight:1000;
  margin-right:6px;
}
.miniSlot.wrong,
.miniChoice.wrong,
.miniChoice.missed,
.miniBinCard.wrong,
.modal.lessonModal.oceanLessonModal .miniSlot.wrong,
.modal.lessonModal.oceanLessonModal .miniChoice.wrong,
.modal.lessonModal.oceanLessonModal .miniChoice.missed,
.modal.lessonModal.oceanLessonModal .miniBinCard.wrong{
  background:#fee2e2!important;
  color:#7f1d1d!important;
  border-color:#ef4444!important;
  border-style:solid!important;
  box-shadow:0 0 0 2px rgba(239,68,68,.16), 0 10px 22px rgba(127,29,29,.12)!important;
}
.miniSlot.wrong span,
.modal.lessonModal.oceanLessonModal .miniSlot.wrong span{
  background:#dc2626!important;
  color:#fff!important;
}
.miniChoice.wrong b,
.miniChoice.wrong small,
.miniChoice.missed b,
.miniChoice.missed small,
.miniBinCard.wrong b,
.modal.lessonModal.oceanLessonModal .miniChoice.wrong b,
.modal.lessonModal.oceanLessonModal .miniChoice.wrong small,
.modal.lessonModal.oceanLessonModal .miniChoice.missed b,
.modal.lessonModal.oceanLessonModal .miniChoice.missed small,
.modal.lessonModal.oceanLessonModal .miniBinCard.wrong b{
  color:#7f1d1d!important;
}
.miniSlot.correct,
.miniChoice.correct,
.miniBinCard.correct,
.modal.lessonModal.oceanLessonModal .miniSlot.correct,
.modal.lessonModal.oceanLessonModal .miniChoice.correct,
.modal.lessonModal.oceanLessonModal .miniBinCard.correct{
  background:#dcfce7!important;
  color:#14532d!important;
  border-color:#22c55e!important;
  border-style:solid!important;
}
.miniSlot.correct span,
.modal.lessonModal.oceanLessonModal .miniSlot.correct span{
  background:#22c55e!important;
  color:#052e16!important;
}
.miniChoice.correct b,
.miniChoice.correct small,
.miniBinCard.correct b,
.modal.lessonModal.oceanLessonModal .miniChoice.correct b,
.modal.lessonModal.oceanLessonModal .miniChoice.correct small,
.modal.lessonModal.oceanLessonModal .miniBinCard.correct b{
  color:#14532d!important;
}
.miniBinButtons button.wrong.active,
.modal.lessonModal.oceanLessonModal .miniBinButtons button.wrong.active{
  background:#dc2626!important;
  color:#fff!important;
  border-color:#dc2626!important;
}
.miniBinButtons button.correct.active,
.modal.lessonModal.oceanLessonModal .miniBinButtons button.correct.active{
  background:#16a34a!important;
  color:#fff!important;
  border-color:#16a34a!important;
}


/* ===== Data-center tour scene image scope fix v2.76 =====
   Rooms 1 to 4 should show the room art directly and should not get a
   magnifier wrapper. Final choice/alarm/ending screens may still use the
   magnifier, so this keeps wrapped final-scene images visible and full size. */
.tourCinematicScene > .imageReaderFrame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  display:block;
  overflow:hidden;
}
.tourCinematicScene > .imageReaderFrame > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  object-position:center center;
  filter:saturate(1.05) contrast(1.04) brightness(.92);
}
.tourCinematic:not(.finalCinematic) .tourCinematicScene > .imageReaderFrame > .imageReaderFloatBtn{
  display:none!important;
}
.tourCinematicScene > img.tourSceneImg.noImageReader{
  pointer-events:none;
}
.tourCinematic.finalCinematic .tourCinematicScene > .imageReaderFrame > .imageReaderFloatBtn{
  z-index:12;
}

/* ===== Data-center room compact desktop layout v2.77 =====
   The four tour rooms should feel like one polished scene card on desktop.
   Keep this scoped away from final choice/alarm/ending screens so those scenes
   keep their special layout and magnifier behavior. */
@media (min-width:981px){
  .tourCinematic:not(.finalCinematic){
    min-height:auto;
    grid-template-rows:auto auto auto;
    align-content:start;
    gap:10px;
    padding:12px 14px 14px;
  }
  .tourCinematic:not(.finalCinematic) .tourCinematicScene{
    height:clamp(440px, 60vh, 650px);
    min-height:440px;
    align-self:start;
  }
  .tourCinematic:not(.finalCinematic) .tourFooter{
    margin:0 10px;
    padding:10px 12px;
    border:1px solid rgba(211,169,88,.32);
    border-radius:14px;
    background:linear-gradient(180deg, rgba(13,17,28,.84), rgba(5,8,15,.86));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 12px 26px rgba(0,0,0,.22);
  }
  .tourCinematic:not(.finalCinematic) .tourClue{
    text-align:left;
    padding:0 4px;
  }
}
@media (min-width:981px) and (max-height:760px){
  .tourCinematic:not(.finalCinematic){
    gap:8px;
    padding:10px 12px 12px;
  }
  .tourCinematic:not(.finalCinematic) .tourTitle{
    font-size:clamp(28px, 3.3vw, 46px);
    padding:6px 24px 5px;
  }
  .tourCinematic:not(.finalCinematic) .tourSubtitle{
    font-size:clamp(12px, 1vw, 15px);
    margin-top:2px;
  }
  .tourCinematic:not(.finalCinematic) .tourCinematicScene{
    height:clamp(360px, 56vh, 520px);
    min-height:360px;
  }
  .tourCinematic:not(.finalCinematic) .tourBubble{
    padding:10px 14px 12px;
  }
  .tourCinematic:not(.finalCinematic) .tourBubbleBody{
    font-size:clamp(13px, 1.1vw, 17px);
  }
}


/* ===== Data-center final scene compact desktop layout v2.78 =====
   Apply the same polished compact card treatment to the final privacy choice,
   alarm, and ending scenes. The final scenes still keep the magnifier. */
@media (min-width:981px){
  .tourCinematic.finalCinematic{
    min-height:auto;
    grid-template-rows:auto auto auto;
    align-content:start;
    gap:10px;
    padding:12px 14px 14px;
  }
  .tourCinematic.finalCinematic.choiceCinematic .tourCinematicScene,
  .tourCinematic.finalCinematic.alarmCinematic .tourCinematicScene,
  .tourCinematic.finalCinematic.yesEndingCinematic .tourCinematicScene,
  .tourCinematic.finalCinematic.noEndingCinematic .tourCinematicScene{
    height:clamp(440px, 60vh, 650px);
    min-height:440px;
    align-self:start;
  }
  .tourCinematic.finalCinematic .tourFooter{
    margin:0 10px;
    padding:10px 12px;
    border:1px solid rgba(211,169,88,.32);
    border-radius:14px;
    background:linear-gradient(180deg, rgba(13,17,28,.84), rgba(5,8,15,.86));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 12px 26px rgba(0,0,0,.22);
  }
  .tourCinematic.finalCinematic .tourClue{
    text-align:left;
    padding:0 4px;
  }
  .tourCinematic.finalCinematic.choiceCinematic .tourActions{
    justify-content:flex-end;
  }
}
@media (min-width:981px) and (max-height:760px){
  .tourCinematic.finalCinematic{
    gap:8px;
    padding:10px 12px 12px;
  }
  .tourCinematic.finalCinematic .tourTitle{
    font-size:clamp(28px, 3.3vw, 46px);
    padding:6px 24px 5px;
  }
  .tourCinematic.finalCinematic .tourSubtitle{
    font-size:clamp(12px, 1vw, 15px);
    margin-top:2px;
  }
  .tourCinematic.finalCinematic.choiceCinematic .tourCinematicScene,
  .tourCinematic.finalCinematic.alarmCinematic .tourCinematicScene,
  .tourCinematic.finalCinematic.yesEndingCinematic .tourCinematicScene,
  .tourCinematic.finalCinematic.noEndingCinematic .tourCinematicScene{
    height:clamp(360px, 56vh, 520px);
    min-height:360px;
  }
  .tourCinematic.finalCinematic .tourBubble{
    padding:10px 14px 12px;
  }
  .tourCinematic.finalCinematic .tourBubbleBody{
    font-size:clamp(13px, 1.1vw, 17px);
  }
}

/* ===== Story 5 v4 QA fixes: selector scroll, face portraits, Story 5 guided map ===== */
body.frontierMenuMode{
  height:auto!important;
  min-height:100dvh!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
}
body.frontierMenuMode .frontierWrap,
body.frontierMenuMode .frontierMenuScreen,
body.frontierMenuMode .frontierMenuShell{
  height:auto!important;
  min-height:100dvh!important;
  overflow:visible!important;
  touch-action:pan-y!important;
}
body.frontierMenuMode .frontierMenuScreen{
  width:100%!important;
  padding:0 0 max(20px, env(safe-area-inset-bottom))!important;
}
body.frontierMenuMode .frontierMenuShell{
  width:100%!important;
  min-height:100dvh!important;
  padding:max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left))!important;
}
body.frontierMenuMode .frontierMenuInner{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  transform-origin:center top!important;
  width:min(1880px, calc(100vw - 20px))!important;
  max-width:100%!important;
  min-height:auto!important;
  max-height:none!important;
  margin:0 auto!important;
  overflow:visible!important;
}
@media (max-width:1180px){
  body.frontierMenuMode .frontierMenuInner{
    width:min(100%, 980px)!important;
  }
}
@media (max-width:760px){
  body.frontierMenuMode .frontierMenuInner{
    width:100%!important;
    padding:14px 12px 22px!important;
  }
}
#modalAvatar .imgAvatar img,
.modal.lessonModal.oceanLessonModal #modalAvatar .imgAvatar img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center 10%!important;
  transform:scale(1.32)!important;
  transform-origin:center top!important;
  padding:0!important;
}
.dialoguePoster .posterPortrait img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center 10%!important;
  transform:scale(1.26)!important;
  transform-origin:center 20%!important;
  padding:0!important;
}
.teachPortraitWrap img,
.offerPortraitWrap img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 12%!important;
  transform:scale(1.22)!important;
  transform-origin:center top!important;
  padding:0!important;
}
@media (max-width:760px){
  #modalAvatar .imgAvatar img,
  .modal.lessonModal.oceanLessonModal #modalAvatar .imgAvatar img{
    object-position:center 8%!important;
    transform:scale(1.42)!important;
  }
  .dialoguePoster .posterPortrait img{
    object-position:center 8%!important;
    transform:scale(1.34)!important;
  }
}
.story5UiMap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px;
  border-radius:18px;
  background:linear-gradient(180deg,#eff6ff,#fff7ed);
  border:1px solid rgba(59,130,246,.22);
  color:#10213c;
  font-weight:900;
  line-height:1.25;
  text-align:center;
}
.story5UiMap span,
.story5UiMap b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(148,163,184,.35);
  box-shadow:0 6px 14px rgba(15,23,42,.08);
}

/* ===== Story 5 v5 QA fixes: true cropped profile portraits + tighter walkway data ===== */
#modalAvatar .imgAvatar img[src*="story5_cancer_biology/portraits/"],
.modal.lessonModal.oceanLessonModal #modalAvatar .imgAvatar img[src*="story5_cancer_biology/portraits/"],
.dialoguePoster .posterPortrait img[src*="story5_cancer_biology/portraits/"],
.teachPortraitWrap img[src*="story5_cancer_biology/portraits/"],
.offerPortraitWrap img[src*="story5_cancer_biology/portraits/"]{
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
  transform-origin:center center!important;
  padding:4px!important;
  background:radial-gradient(circle at 50% 35%, rgba(248,250,252,.08), rgba(15,23,42,.02) 62%, rgba(15,23,42,0) 70%)!important;
}
.dialoguePoster .posterPortrait img[src*="story5_cancer_biology/portraits/"]{
  padding:6px!important;
}


/* ===== Story 5 v15: teacher portrait fit + tunnel transition overlay ===== */
#modalAvatar .imgAvatar img[src*="story5_cancer_biology/portraits/"],
.modal.lessonModal.oceanLessonModal #modalAvatar .imgAvatar img[src*="story5_cancer_biology/portraits/"],
.modal.dialoguePosterModal .dialoguePoster.teacherPoster .posterPortrait img[src*="story5_cancer_biology/portraits/"],
.dialoguePoster .posterPortrait img[src*="story5_cancer_biology/portraits/"]{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center 16%!important;
  transform:scale(1.08)!important;
  transform-origin:center 18%!important;
  padding:0!important;
}
.modal.dialoguePosterModal .dialoguePoster.teacherPoster .posterPortrait,
.dialoguePoster .posterPortrait{
  overflow:hidden!important;
}
.storyPortalTransition{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 50% 52%, rgba(255,255,255,.18), rgba(126,34,206,.28) 24%, rgba(7,10,24,.96) 72%);
  transition:opacity .28s ease;
}
.storyPortalTransition.active{opacity:1;}
.storyPortalTransition.leaving{opacity:0;}
.portalTransitionCard{
  min-width:min(520px,84vw);
  max-width:min(680px,90vw);
  padding:32px 34px;
  text-align:center;
  border-radius:28px;
  color:#fff7ed;
  background:linear-gradient(180deg, rgba(15,23,42,.86), rgba(88,28,135,.72));
  border:2px solid rgba(253,224,71,.72);
  box-shadow:0 0 0 6px rgba(168,85,247,.18), 0 30px 90px rgba(0,0,0,.55), inset 0 0 30px rgba(253,224,71,.12);
  transform:scale(.96);
  animation:portalCardPulse 1.2s ease-in-out infinite alternate;
}
.portalTransitionPulse{
  width:66px;
  height:66px;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#1e1b4b;
  background:radial-gradient(circle, #fff7ed 0%, #fde68a 52%, #a855f7 100%);
  font-size:30px;
  font-weight:1000;
  box-shadow:0 0 38px rgba(253,224,71,.65);
}
.portalTransitionTitle{font-size:clamp(28px,5vw,48px);font-weight:1000;letter-spacing:.04em;text-transform:uppercase;}
.portalTransitionSubtitle{margin-top:10px;font-size:clamp(15px,2.6vw,22px);font-weight:800;color:#fde68a;line-height:1.35;}
@keyframes portalCardPulse{from{transform:scale(.96);filter:saturate(1)}to{transform:scale(1.012);filter:saturate(1.18)}}

/* =====================================================================
   V2.67 Homepage redesign: Design 2 / Active Module Feature Poster
   - Game list becomes a horizontal rail in the first row.
   - Selected game expands into a cinematic highlight poster below.
   - Start Story remains at the bottom after hero selection.
   - Menu music mute is balanced next to How to Play.
   ===================================================================== */
body.frontierMenuMode .frontierMenuInner{
  width:min(1760px, calc(100vw - 22px)) !important;
  gap:clamp(7px, .78vw, 13px) !important;
  padding:clamp(10px, .95vw, 18px) clamp(18px, 1.35vw, 28px) clamp(10px, .95vw, 16px) !important;
}
body.frontierMenuMode .pathLogoLockup{
  margin-bottom:0 !important;
}
body.frontierMenuMode .menuPill{
  margin-bottom:6px !important;
  padding:5px 15px !important;
  font-size:10px !important;
  letter-spacing:.20em !important;
}
body.frontierMenuMode .pathTitle{
  font-size:clamp(2rem, 3.7vw, 4rem) !important;
  line-height:.90 !important;
  letter-spacing:.075em !important;
}
body.frontierMenuMode .pathSubtitle{
  margin-top:6px !important;
  font-size:clamp(.78rem, .98vw, 1rem) !important;
}
body.frontierMenuMode .stepBanner span{
  padding:7px 18px !important;
  border-radius:999px !important;
  font-size:clamp(.72rem, .80vw, .9rem) !important;
  letter-spacing:.14em !important;
  background:linear-gradient(180deg, rgba(29,18,22,.86), rgba(16,11,18,.80)) !important;
  border-color:rgba(255,226,164,.35) !important;
}
.storyRailShell{
  --railBtnSize:clamp(42px, 3.45vw, 58px);
  position:relative;
  display:grid;
  grid-template-columns:var(--railBtnSize) minmax(0,1fr) var(--railBtnSize);
  align-items:center;
  gap:clamp(8px, .9vw, 14px);
  width:100%;
}
.storyRailBtn{
  width:var(--railBtnSize);
  height:var(--railBtnSize);
  border-radius:999px;
  border:2px solid rgba(255,224,150,.62);
  color:#ffe9b7;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,236,178,.16), transparent 44%),
    linear-gradient(180deg, rgba(35,20,17,.92), rgba(11,10,18,.92));
  box-shadow:0 12px 26px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12);
  font-size:clamp(2.1rem, 3vw, 3.15rem);
  line-height:1;
  font-weight:800;
  cursor:pointer;
  transition:transform .18s ease, filter .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.storyRailBtn:hover:not(:disabled){
  transform:translateY(-2px) scale(1.04);
  filter:brightness(1.08);
  box-shadow:0 16px 30px rgba(0,0,0,.38), 0 0 22px rgba(245,166,35,.22), inset 0 1px 0 rgba(255,255,255,.16);
}
.storyRailBtn:disabled,
.storyRailBtn.isHidden{
  opacity:.38;
  cursor:default;
  transform:none;
}
body.frontierMenuMode .frontierStoryCards{
  display:flex !important;
  grid-template-columns:none !important;
  gap:clamp(10px, .95vw, 16px) !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:20px;
  -webkit-overflow-scrolling:touch;
  padding:5px 2px 9px !important;
  margin:0 !important;
  scrollbar-width:none;
}
body.frontierMenuMode .frontierStoryCards::-webkit-scrollbar{display:none;}
body.frontierMenuMode .frontierStoryCards .frontierStoryCard{
  flex:0 0 clamp(224px, 18.1vw, 316px) !important;
  min-height:clamp(126px, 15.5vh, 178px) !important;
  padding:clamp(8px, .72vw, 12px) !important;
  gap:clamp(5px, .45vw, 8px) !important;
  border-radius:clamp(15px, 1.2vw, 22px) !important;
  scroll-snap-align:center;
  background:linear-gradient(180deg, rgba(17,15,28,.92), rgba(8,8,18,.90)) !important;
  box-shadow:0 16px 32px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.05) !important;
  transform:none !important;
}
body.frontierMenuMode .frontierStoryCards .frontierStoryCard:hover{
  transform:translateY(-2px) !important;
}
body.frontierMenuMode .frontierStoryCards .frontierStoryCard.active{
  transform:translateY(-2px) scale(1.012) !important;
  border-color:color-mix(in srgb, var(--storyAccent) 70%, #ffe6a0 30%) !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--storyAccent) 66%, #ffe6a0 24%),
    0 0 28px color-mix(in srgb, var(--storyAccent) 34%, transparent),
    0 18px 42px rgba(0,0,0,.44) !important;
}
body.frontierMenuMode .storyCardNumber{
  top:8px !important;
  left:8px !important;
  min-width:clamp(27px, 2vw, 36px) !important;
  height:clamp(27px, 2vw, 36px) !important;
  padding:0 8px !important;
  font-size:clamp(12px, 1vw, 17px) !important;
  z-index:4 !important;
}
body.frontierMenuMode .storyCardPreview{
  aspect-ratio:16 / 7.8 !important;
  border-radius:clamp(11px, .9vw, 16px) !important;
}
body.frontierMenuMode .storyCardCaption{
  gap:3px !important;
}
body.frontierMenuMode .storyCardEyebrow{
  font-size:clamp(8px, .58vw, 10px) !important;
  letter-spacing:.15em !important;
  line-height:1.05 !important;
}
body.frontierMenuMode .frontierStoryCards .storyCardTitle{
  font-size:clamp(.72rem, .86vw, 1.04rem) !important;
  line-height:1.08 !important;
}
body.frontierMenuMode .frontierStoryCards .storyCardText{
  font-size:clamp(.64rem, .72vw, .88rem) !important;
  line-height:1.18 !important;
  color:rgba(255,242,214,.84) !important;
}
body.frontierMenuMode .storyCardHint{
  display:none !important;
}
body.frontierMenuMode .frontierStoryCard.locked .storyCardHint{
  display:inline-flex !important;
  padding:5px 9px !important;
  font-size:.68rem !important;
}
.storyFeaturePoster{
  --featureAccent:#f59e0b;
  position:relative;
  min-height:clamp(220px, 30vh, 344px);
  border-radius:clamp(20px, 1.55vw, 30px);
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 72% 45%, color-mix(in srgb, var(--featureAccent) 34%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(13,10,17,.96), rgba(8,7,14,.96));
  border:2px solid color-mix(in srgb, var(--featureAccent) 48%, rgba(255,226,164,.45));
  box-shadow:
    0 22px 52px rgba(0,0,0,.42),
    0 0 34px color-mix(in srgb, var(--featureAccent) 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.storyFeaturePoster::before,
.storyFeaturePoster::after{
  content:'';
  position:absolute;
  z-index:3;
  pointer-events:none;
}
.storyFeaturePoster::before{
  inset:12px;
  border-radius:calc(clamp(20px, 1.55vw, 30px) - 8px);
  border:1px solid rgba(255,238,189,.22);
}
.storyFeaturePoster::after{
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,236,177,.14), transparent 8%, transparent 92%, rgba(255,236,177,.12)),
    radial-gradient(circle at 12% 16%, rgba(255,255,255,.12), transparent 22%);
  mix-blend-mode:screen;
  opacity:.50;
}
.storyFeatureArt{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  z-index:0;
  filter:saturate(1.05) contrast(1.02);
}
.storyFeatureShade{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(5,4,10,.98) 0%, rgba(8,5,10,.91) 32%, rgba(9,5,12,.34) 62%, rgba(7,5,10,.52) 100%),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.42));
}
.storyFeatureContent{
  position:relative;
  z-index:2;
  width:min(610px, 50%);
  min-height:inherit;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:clamp(22px, 2.2vw, 42px) clamp(24px, 3vw, 56px);
  color:#fff4d2;
  text-align:left;
}
.storyFeatureBadge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:clamp(6px, .7vw, 12px);
  color:color-mix(in srgb, var(--featureAccent) 70%, #fff4c8 30%);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:clamp(.66rem, .75vw, .9rem);
  text-shadow:0 2px 8px rgba(0,0,0,.48);
}
.storyFeatureBadge span{
  min-width:clamp(32px, 2.6vw, 46px);
  height:clamp(32px, 2.6vw, 46px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  color:#251308;
  background:linear-gradient(180deg, #ffe9ad, color-mix(in srgb, var(--featureAccent) 72%, #f5a623 28%));
  box-shadow:0 9px 20px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.34);
  font-size:clamp(1.05rem, 1.38vw, 1.65rem);
  letter-spacing:0;
}
.storyFeatureContent h2{
  margin:0;
  font-family:Georgia, 'Times New Roman', serif;
  /* One consistent title system for every story feature poster. */
  font-size:clamp(2.05rem, 3.05vw, 3.85rem);
  line-height:.92;
  letter-spacing:.018em;
  text-transform:uppercase;
  color:#ffe6aa;
  text-shadow:0 4px 0 rgba(72,28,8,.58), 0 0 26px color-mix(in srgb, var(--featureAccent) 25%, transparent);
}
.storyFeatureTitleLine{
  display:block;
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
}
.storyFeaturePoster[data-story-id="statistics-visualization"] .storyFeatureContent h2{
  max-width:100%;
}
.storyFeatureSubtitle{
  margin:clamp(7px, .75vw, 13px) 0 0;
  color:#fff4d1;
  font-weight:800;
  font-size:clamp(.95rem, 1.22vw, 1.48rem);
  line-height:1.16;
}
.storyFeatureDescription{
  margin:clamp(10px, .95vw, 16px) 0 0;
  max-width:58ch;
  color:rgba(255,247,226,.92);
  font-size:clamp(.78rem, .92vw, 1.06rem);
  line-height:1.36;
}
.storyFeatureStats{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(8px, .75vw, 12px);
  margin-top:clamp(13px, 1.1vw, 18px);
}
.storyFeatureStat{
  min-width:clamp(84px, 7vw, 118px);
  display:flex;
  flex-direction:column;
  gap:1px;
  padding:clamp(7px, .65vw, 10px) clamp(9px, .85vw, 14px);
  border-radius:16px;
  background:rgba(255,255,255,.075);
  border:1px solid color-mix(in srgb, var(--featureAccent) 34%, rgba(255,255,255,.16));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.storyFeatureStat b{
  color:#ffe7aa;
  font-size:clamp(.9rem, 1vw, 1.22rem);
  line-height:1;
}
.storyFeatureStat small{
  color:rgba(255,242,214,.78);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:clamp(.55rem, .58vw, .72rem);
}
.storyFeatureTags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:clamp(10px, .85vw, 14px);
}
.storyFeatureTag{
  padding:6px 10px;
  border-radius:999px;
  color:rgba(255,246,222,.90);
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,225,166,.16);
  font-size:clamp(.58rem, .62vw, .75rem);
  font-weight:800;
}
.storyFeatureCta{
  margin-top:clamp(12px, 1vw, 16px);
  padding:clamp(10px, .9vw, 14px) clamp(18px, 1.55vw, 28px);
  border-radius:16px;
  border:1px solid rgba(255,232,180,.48);
  color:#fff5d6;
  background:linear-gradient(180deg, color-mix(in srgb, var(--featureAccent) 70%, #f26a2e 30%), #7b2511);
  box-shadow:0 12px 22px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.20);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900;
  cursor:pointer;
}
.storyFeatureCta span{
  display:inline-block;
  margin-left:8px;
  transform:translateY(-1px);
  font-size:1.25em;
}
.storyFeatureCta:hover{
  filter:brightness(1.08) saturate(1.08);
  transform:translateY(-1px);
}
body.frontierMenuMode .stepBannerHero{
  margin-top:1px !important;
}
body.frontierMenuMode .frontierRoster{
  grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
  gap:clamp(9px, .78vw, 14px) !important;
}
body.frontierMenuMode .frontierRoster .frontierHeroCard{
  min-height:clamp(138px, 18vh, 224px) !important;
  padding:clamp(7px, .62vw, 10px) !important;
  gap:clamp(4px, .45vw, 8px) !important;
  border-radius:clamp(15px, 1.15vw, 22px) !important;
}
body.frontierMenuMode .frontierThumbPane{
  aspect-ratio:16 / 7.8 !important;
  border-radius:clamp(10px, .9vw, 16px) !important;
}
body.frontierMenuMode .frontierHeroName{
  font-size:clamp(.72rem, .82vw, .96rem) !important;
}
body.frontierMenuMode .frontierHeroRole{
  min-height:1.1em !important;
  font-size:clamp(.62rem, .68vw, .82rem) !important;
}
body.frontierMenuMode .frontierHeroStatus{
  min-height:auto !important;
  padding:clamp(5px, .5vw, 8px) 8px !important;
  font-size:clamp(.58rem, .62vw, .75rem) !important;
  border-radius:12px !important;
}
body.frontierMenuMode .heroCardPlayerFlag{
  min-width:28px !important;
  height:22px !important;
  top:7px !important;
  left:7px !important;
  font-size:.68rem !important;
}
body.frontierMenuMode .menuBottomBar{
  grid-template-columns:minmax(140px, 210px) minmax(320px, 1fr) minmax(260px, 360px) !important;
  gap:clamp(10px, 1vw, 18px) !important;
  margin-top:0 !important;
}
.menuUtilityGroup{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(8px, .65vw, 12px);
  align-items:stretch;
}
body.frontierMenuMode .menuEdgeBtn{
  min-height:clamp(44px, 5.2vh, 62px) !important;
  border-radius:clamp(14px, 1vw, 18px) !important;
  font-size:clamp(.72rem, .8vw, .98rem) !important;
}
body.frontierMenuMode .menuMuteBtn{
  border-color:rgba(255,224,150,.38) !important;
  background:linear-gradient(180deg, rgba(32,24,34,.88), rgba(14,14,25,.90)) !important;
}
body.frontierMenuMode .menuMuteBtn.isPlaying{
  color:#fff1bf !important;
}
body.frontierMenuMode .menuMuteBtn.isMuted{
  color:#ffd0d0 !important;
  border-color:rgba(248,113,113,.48) !important;
}
body.frontierMenuMode .frontierStartBtn{
  min-height:clamp(52px, 6.4vh, 76px) !important;
  min-width:min(440px, 100%) !important;
}
body.frontierMenuMode .menuSelectionSummary{
  min-height:clamp(30px, 3.8vh, 44px) !important;
  padding:7px 14px !important;
  font-size:clamp(.68rem, .74vw, .88rem) !important;
}
.frontierMenuScreen .storyFeaturePoster{
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease;
}
.frontierMenuScreen.menuIntroPending .storyFeaturePoster{
  opacity:0;
  transform:translateY(18px) scale(.985);
  filter:blur(4px);
}
.frontierMenuScreen.menuIntroPending.menuIntroReveal .storyFeaturePoster,
.frontierMenuScreen.menuIntroDone .storyFeaturePoster{
  opacity:1;
  transform:none;
  filter:none;
}
.frontierMenuScreen.menuIntroPending.menuIntroReveal .frontierStoryCard:nth-child(5){ transition-delay:1.22s; }
.frontierMenuScreen.menuIntroPending.menuIntroReveal .storyFeaturePoster{ transition-delay:1.36s; }

@media (max-height:820px){
  body.frontierMenuMode .pathSubtitle{display:block !important;}
  .storyFeaturePoster{min-height:clamp(194px, 28vh, 280px);}
  .storyFeatureContent h2{font-size:clamp(1.82rem, 3.05vw, 3.55rem); line-height:.92;}
  .storyFeatureDescription{max-width:52ch;}
  .storyFeatureTags{display:none;}
}
@media (max-width:1420px){
  body.frontierMenuMode .frontierStoryCards .frontierStoryCard{
    flex-basis:clamp(220px, 24vw, 290px) !important;
  }
  body.frontierMenuMode .frontierRoster{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
  .storyFeatureContent{width:min(560px, 58%);}
}
@media (max-width:1180px), (hover:none) and (pointer:coarse){
  body.frontierMenuMode .frontierMenuInner{
    width:min(100%, 980px) !important;
    transform:none !important;
  }
  body.frontierMenuMode .storyRailShell{
    grid-template-columns:44px minmax(0,1fr) 44px;
  }
  body.frontierMenuMode .frontierStoryCards{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    scroll-snap-type:x mandatory;
  }
  body.frontierMenuMode .frontierStoryCards .frontierStoryCard{
    flex:0 0 min(72vw, 330px) !important;
  }
  .storyFeaturePoster{
    min-height:360px;
  }
  .storyFeatureShade{
    background:linear-gradient(180deg, rgba(5,4,10,.35) 0%, rgba(5,4,10,.92) 48%, rgba(5,4,10,.98) 100%);
  }
  .storyFeatureContent{
    width:100%;
    min-height:360px;
    justify-content:flex-end;
    padding:92px 22px 24px;
  }
  body.frontierMenuMode .frontierRoster{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
  body.frontierMenuMode .menuBottomBar{
    grid-template-columns:1fr !important;
  }
  .menuUtilityGroup{
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width:640px){
  .storyFeatureTitleLine{white-space:normal;}
  .storyFeaturePoster[data-story-id="statistics-visualization"] .storyFeatureTitleLine:first-child{white-space:nowrap;}
  body.frontierMenuMode .storyRailShell{
    grid-template-columns:38px minmax(0,1fr) 38px;
    gap:6px;
  }
  .storyRailBtn{
    font-size:2rem;
  }
  .storyFeaturePoster{min-height:390px;}
  .storyFeatureContent h2{font-size:clamp(1.85rem, 9vw, 3.05rem); line-height:.94;}
  .storyFeatureStats{gap:6px;}
  .storyFeatureStat{min-width:72px;}
  body.frontierMenuMode .frontierRoster{
    grid-template-columns:1fr !important;
  }
  .menuUtilityGroup{
    grid-template-columns:1fr;
  }
}


/* =====================================================================
   V2.68 Homepage feature poster balance / dark-gap refinement
   - Uses the same feature images; no artwork is edited.
   - Pulls the poster art slightly left so the middle does not read as empty.
   - Makes the text panel wider and reduces the extra black overlay.
   - Keeps mobile/tablet behavior intact.
   ===================================================================== */
body.frontierMenuMode .storyFeaturePoster{
  min-height:clamp(205px, 27vh, 302px);
}
body.frontierMenuMode .storyFeatureArt{
  inset:0 auto 0 -7%;
  width:114%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center center;
  filter:saturate(1.09) contrast(1.04) brightness(1.02);
}
body.frontierMenuMode .storyFeatureShade{
  background:
    linear-gradient(90deg,
      rgba(5,4,10,.97) 0%,
      rgba(6,4,10,.88) 20%,
      rgba(8,5,12,.56) 38%,
      rgba(8,5,12,.20) 56%,
      rgba(7,5,10,.26) 100%),
    radial-gradient(ellipse at 42% 50%, color-mix(in srgb, var(--featureAccent) 18%, transparent), transparent 46%),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.26));
}
body.frontierMenuMode .storyFeatureContent{
  width:min(740px, 58%);
  padding:clamp(18px, 1.75vw, 34px) clamp(18px, 1.75vw, 32px) clamp(18px, 1.75vw, 34px) clamp(34px, 3.1vw, 58px);
}
body.frontierMenuMode .storyFeatureDescription{
  max-width:64ch;
}
body.frontierMenuMode .storyFeatureStats{
  margin-top:clamp(10px, .95vw, 16px);
}
body.frontierMenuMode .storyFeatureCta{
  margin-top:clamp(10px, .92vw, 14px);
}
body.frontierMenuMode .storyFeatureContent h2{
  text-wrap:balance;
}
body.frontierMenuMode .storyFeatureTitleLine{
  white-space:nowrap;
}

@media (max-height:820px){
  body.frontierMenuMode .storyFeaturePoster{
    min-height:clamp(188px, 26vh, 258px);
  }
  body.frontierMenuMode .storyFeatureContent{
    padding-top:clamp(16px, 1.45vw, 28px);
    padding-bottom:clamp(16px, 1.45vw, 28px);
  }
  body.frontierMenuMode .storyFeatureDescription{
    max-width:58ch;
  }
}
@media (max-width:1420px){
  body.frontierMenuMode .storyFeatureContent{
    width:min(680px, 61%);
  }
}
@media (max-width:1180px), (hover:none) and (pointer:coarse){
  body.frontierMenuMode .storyFeatureArt{
    inset:0;
    width:100%;
  }
  body.frontierMenuMode .storyFeatureShade{
    background:linear-gradient(180deg, rgba(5,4,10,.34) 0%, rgba(5,4,10,.90) 48%, rgba(5,4,10,.98) 100%);
  }
  body.frontierMenuMode .storyFeatureContent{
    width:100%;
    min-height:360px;
    justify-content:flex-end;
    padding:92px 22px 24px;
  }
}
@media (max-width:640px){
  body.frontierMenuMode .storyFeaturePoster{
    min-height:390px;
  }
  body.frontierMenuMode .storyFeatureTitleLine{
    white-space:normal;
  }
  body.frontierMenuMode .storyFeaturePoster[data-story-id="statistics-visualization"] .storyFeatureTitleLine:first-child{
    white-space:nowrap;
  }
}

/* =====================================================================
   V2.69 iPad / phone homepage responsive polish
   - Desktop/PC layout is unchanged.
   - Tablet highlight posters keep the classy desktop left-text / right-art balance.
   - Touch/tablet no longer uses the very dark phone-style poster shade.
   - Hero selection cards get taller, face-safe crops on iPad and phone.
   ===================================================================== */

@media (min-width: 761px) and (max-width: 1180px),
       (hover: none) and (pointer: coarse) and (min-width: 761px){
  /* Keep the feature poster bright enough on iPad/tablet. The previous
     coarse-pointer rule used a phone-style vertical black fade, which made
     the artwork read almost fully dark on iPad. */
  body.frontierMenuMode .storyFeaturePoster{
    min-height: clamp(330px, 38vh, 420px) !important;
  }
  body.frontierMenuMode .storyFeatureArt{
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    filter: saturate(1.10) contrast(1.04) brightness(1.13) !important;
  }
  body.frontierMenuMode .storyFeatureShade{
    background:
      linear-gradient(90deg,
        rgba(5,4,10,.94) 0%,
        rgba(5,4,10,.84) 24%,
        rgba(7,5,12,.52) 43%,
        rgba(7,5,12,.18) 66%,
        rgba(7,5,10,.22) 100%),
      linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.18)) !important;
  }
  body.frontierMenuMode .storyFeatureContent{
    width: min(680px, 60%) !important;
    min-height: inherit !important;
    height: auto !important;
    justify-content: center !important;
    padding:
      clamp(24px, 2.6vw, 38px)
      clamp(24px, 2.8vw, 42px) !important;
  }
  body.frontierMenuMode .storyFeatureDescription{
    max-width: 56ch !important;
  }
  body.frontierMenuMode .storyFeatureStats{
    gap: 8px !important;
  }

  /* iPad hero cards: the wide thumbnail crop was cutting through faces.
     A slightly taller frame plus face-safe vertical positioning keeps the
     top four heroes readable without changing desktop. */
  body.frontierMenuMode .frontierRoster .frontierHeroCard{
    min-height: auto !important;
  }
  body.frontierMenuMode .frontierThumbPane{
    aspect-ratio: 16 / 9.6 !important;
  }
  body.frontierMenuMode .frontierHeroCard .frontierThumbPane img,
  body.frontierMenuMode .frontierHeroCard.active .frontierThumbPane img{
    object-position: center 36% !important;
    transform: none !important;
  }
  body.frontierMenuMode .frontierHeroCard[data-id="sheriff_dalton"] .frontierThumbPane img{
    object-position: center 38% !important;
  }
  body.frontierMenuMode .frontierHeroCard[data-id="joe_tsikuapu"] .frontierThumbPane img{
    object-position: center 34% !important;
  }
  body.frontierMenuMode .frontierHeroCard[data-id="sheriff_jessie_hart"] .frontierThumbPane img{
    object-position: center 44% !important;
  }
  body.frontierMenuMode .frontierHeroCard[data-id="nora_blue_creek"] .frontierThumbPane img{
    object-position: center 36% !important;
  }
  body.frontierMenuMode .frontierHeroCard[data-id="sinbad"] .frontierThumbPane img,
  body.frontierMenuMode .frontierHeroCard[data-id="leila_dunes"] .frontierThumbPane img{
    object-position: center 35% !important;
  }
}

@media (max-width: 760px){
  /* Phone keeps the stacked poster layout, but with a lighter, cleaner fade. */
  body.frontierMenuMode .storyFeaturePoster{
    min-height: 360px !important;
  }
  body.frontierMenuMode .storyFeatureArt{
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    filter: saturate(1.10) contrast(1.04) brightness(1.12) !important;
  }
  body.frontierMenuMode .storyFeatureShade{
    background:
      linear-gradient(180deg,
        rgba(5,4,10,.18) 0%,
        rgba(5,4,10,.34) 34%,
        rgba(5,4,10,.78) 68%,
        rgba(5,4,10,.94) 100%) !important;
  }
  body.frontierMenuMode .storyFeatureContent{
    width: 100% !important;
    min-height: 360px !important;
    justify-content: flex-end !important;
    padding: 82px 18px 22px !important;
  }

  /* Phone hero cards: show full readable faces instead of a narrow banner cut. */
  body.frontierMenuMode .frontierThumbPane{
    aspect-ratio: 16 / 10.6 !important;
  }
  body.frontierMenuMode .frontierHeroCard .frontierThumbPane img,
  body.frontierMenuMode .frontierHeroCard.active .frontierThumbPane img{
    object-position: center 37% !important;
    transform: none !important;
  }
  body.frontierMenuMode .frontierHeroCard[data-id="sheriff_jessie_hart"] .frontierThumbPane img{
    object-position: center 44% !important;
  }
}

/* =====================================================================
   V2.70 Selected-story loading overlay + iPad/phone hero face crop fix
   - Adds a classy loading screen while selected story assets preload/decode.
   - Touch devices get taller, face-safe hero thumbnails.
   - Desktop/PC hero layout remains unchanged.
   ===================================================================== */
.storyPreloadOverlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:24px;
  opacity:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 34%, rgba(245,158,11,.16), transparent 34%),
    linear-gradient(180deg, rgba(3,3,8,.72), rgba(5,4,12,.88));
  backdrop-filter:blur(10px) saturate(1.05);
  transition:opacity .24s ease;
}
.storyPreloadOverlay.isVisible{
  opacity:1;
  pointer-events:auto;
}
.storyPreloadCard{
  width:min(520px, calc(100vw - 36px));
  padding:26px 28px 24px;
  border-radius:26px;
  border:1px solid rgba(255,225,157,.50);
  background:
    linear-gradient(180deg, rgba(29,20,25,.94), rgba(9,9,18,.96)),
    radial-gradient(circle at 80% 0%, rgba(245,158,11,.18), transparent 40%);
  box-shadow:0 28px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10);
  color:#fff6de;
  text-align:center;
}
.storyPreloadKicker{
  color:#ffcf76;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.78rem;
  font-weight:900;
  margin-bottom:10px;
}
.storyPreloadTitle{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:clamp(1.65rem, 4vw, 2.55rem);
  line-height:1.02;
  font-weight:900;
  color:#fff0c2;
  text-shadow:0 2px 0 rgba(0,0,0,.45), 0 0 22px rgba(245,158,11,.20);
}
.storyPreloadText{
  margin:12px auto 18px;
  max-width:42ch;
  color:rgba(255,246,229,.86);
  font-weight:650;
  line-height:1.45;
}
.storyPreloadBar{
  height:14px;
  border-radius:999px;
  padding:2px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,225,157,.24);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.34);
}
.storyPreloadBar span{
  display:block;
  width:0%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, #8b2d1d, #f59e0b, #ffe6a5);
  box-shadow:0 0 18px rgba(245,158,11,.38);
  transition:width .18s ease;
}
.storyPreloadMeta{
  margin-top:11px;
  font-size:.88rem;
  font-weight:900;
  letter-spacing:.08em;
  color:#ffd98f;
  text-transform:uppercase;
}
.storyPreloadTip{
  margin-top:10px;
  color:rgba(255,246,229,.72);
  font-size:.92rem;
}
body.storyPreloadActive #start{
  opacity:.72;
  cursor:progress;
}

@media (hover:none) and (pointer:coarse) and (min-width:761px){
  /* iPad/tablet: prevent wide thumbnail strips from cutting faces at the nose. */
  body.frontierMenuMode .frontierThumbPane{
    aspect-ratio:16 / 12.2 !important;
  }
  body.frontierMenuMode .frontierHeroCard .frontierThumbPane img,
  body.frontierMenuMode .frontierHeroCard.active .frontierThumbPane img,
  body.frontierMenuMode .frontierHeroCard.hoverFace .frontierThumbPane img{
    object-fit:cover !important;
    object-position:center 20% !important;
    transform:none !important;
  }
  body.frontierMenuMode .frontierHeroCard[data-id="sheriff_dalton"] .frontierThumbPane img{
    object-position:center 18% !important;
  }
  body.frontierMenuMode .frontierHeroCard[data-id="joe_tsikuapu"] .frontierThumbPane img{
    object-position:center 18% !important;
  }
  body.frontierMenuMode .frontierHeroCard[data-id="sheriff_jessie_hart"] .frontierThumbPane img{
    object-position:center 20% !important;
  }
  body.frontierMenuMode .frontierHeroCard[data-id="nora_blue_creek"] .frontierThumbPane img{
    object-position:center 17% !important;
  }
  body.frontierMenuMode .frontierHeroCard[data-id="sinbad"] .frontierThumbPane img,
  body.frontierMenuMode .frontierHeroCard[data-id="leila_dunes"] .frontierThumbPane img{
    object-position:center 19% !important;
  }
}

@media (max-width:760px){
  /* Phone: use an even taller crop so faces stay readable in one-column cards. */
  body.frontierMenuMode .frontierThumbPane{
    aspect-ratio:16 / 12.8 !important;
  }
  body.frontierMenuMode .frontierHeroCard .frontierThumbPane img,
  body.frontierMenuMode .frontierHeroCard.active .frontierThumbPane img,
  body.frontierMenuMode .frontierHeroCard.hoverFace .frontierThumbPane img{
    object-fit:cover !important;
    object-position:center 19% !important;
    transform:none !important;
  }
  .storyPreloadCard{
    padding:22px 18px 20px;
    border-radius:22px;
  }
  .storyPreloadTip{
    font-size:.86rem;
  }
}

/* =====================================================================
   V2.71 Story carousel edge / clipping polish
   - Keeps the PC/tablet/phone layout the same.
   - Adds breathing room above the story cards so active borders/glows are
     not clipped when cards lift slightly.
   - Soft-fades the horizontal rail edges so partially visible cards do not
     look like a broken hard cut while scrolling left/right.
   ===================================================================== */
body.frontierMenuMode .storyRailShell{
  --storyRailFade: clamp(22px, 2.4vw, 46px);
  overflow: visible !important;
}
body.frontierMenuMode .frontierStoryCards{
  /* The original 5px top padding was too tight for the selected-card outline. */
  padding:
    clamp(13px, 1vw, 18px)
    calc(var(--storyRailFade) + 6px)
    clamp(15px, 1.15vw, 22px) !important;
  scroll-padding-inline: calc(var(--storyRailFade) + 10px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overflow-clip-margin: 18px;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--storyRailFade),
    #000 calc(100% - var(--storyRailFade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--storyRailFade),
    #000 calc(100% - var(--storyRailFade)),
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
body.frontierMenuMode .frontierStoryCards .frontierStoryCard{
  scroll-margin-inline: calc(var(--storyRailFade) + 10px) !important;
}

@media (max-width: 760px){
  body.frontierMenuMode .storyRailShell{
    --storyRailFade: 18px;
  }
  body.frontierMenuMode .frontierStoryCards{
    padding: 12px 24px 16px !important;
    scroll-padding-inline: 26px !important;
  }
}


/* =====================================================================
   V2.72 Phone-only title and Jessie hero-card polish
   - PC and iPad/tablet rules are intentionally untouched.
   - Keeps Story 1 feature title inside the phone card.
   - Shows Jessie Hart's nicer face-safe select art on phone.
   ===================================================================== */
@media (max-width: 760px){
  body.frontierMenuMode .storyFeaturePoster[data-story-id="statistics-visualization"] .storyFeatureContent h2{
    font-size: clamp(1.72rem, 8.2vw, 2.22rem) !important;
    line-height: .95 !important;
    letter-spacing: .012em !important;
    max-width: 100% !important;
  }
  body.frontierMenuMode .storyFeaturePoster[data-story-id="statistics-visualization"] .storyFeatureTitleLine{
    white-space: nowrap !important;
  }

  /* Phone-only Jessie crop guard. Keep her unselected card on the normal
     artwork, but crop it face-safe. When selected/focused, game.js switches
     her to the hover/select art so the two states remain visually distinct. */
  body.frontierMenuMode .frontierHeroCard[data-id="sheriff_jessie_hart"]:not(.active):not(.hoverFace) .frontierThumbPane img{
    object-position: center 10% !important;
    transform: none !important;
  }
  body.frontierMenuMode .frontierHeroCard[data-id="sheriff_jessie_hart"].active .frontierThumbPane img,
  body.frontierMenuMode .frontierHeroCard[data-id="sheriff_jessie_hart"].hoverFace .frontierThumbPane img{
    object-position: center 20% !important;
    transform: none !important;
  }
}

/* Story 5 final exam: Tank Clone capstone */
.finalExamShell{display:grid;gap:14px;max-width:1180px;margin:0 auto;color:#fff}
.finalExamIntroCard{display:grid;grid-template-columns:minmax(280px,1.35fr) minmax(260px,.9fr);gap:16px;align-items:stretch;background:linear-gradient(135deg,rgba(10,12,20,.96),rgba(47,8,14,.88));border:1px solid rgba(250,204,21,.32);box-shadow:0 20px 70px rgba(0,0,0,.38),inset 0 0 0 1px rgba(255,255,255,.06);border-radius:18px;padding:14px;overflow:hidden}
.finalExamIntroArt{min-height:280px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#0b0e16;box-shadow:inset 0 0 40px rgba(0,0,0,.4)}
.finalExamIntroArt img{width:100%;height:100%;object-fit:cover;display:block}
.finalExamIntroCopy{padding:10px 8px 8px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.finalExamEyebrow{font-family:var(--heading-font,Georgia,serif);letter-spacing:.16em;text-transform:uppercase;color:#facc15;font-weight:900;font-size:.76rem;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.finalExamIntroCopy h2,.finalExamOutcomeCopy h2{font-family:var(--heading-font,Georgia,serif);font-size:clamp(2rem,5vw,4rem);line-height:.92;margin:0;color:#ffe8b0;text-shadow:0 4px 0 rgba(69,23,7,.75),0 0 22px rgba(250,204,21,.25)}
.finalExamIntroCopy p,.finalExamOutcomeCopy p{font-size:1rem;line-height:1.5;color:#f8ead1;margin:0;max-width:56ch}
.finalExamRules{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.finalExamRules span{border:1px solid rgba(250,204,21,.35);border-radius:12px;padding:9px 12px;background:rgba(15,23,42,.72);font-weight:800;color:#fef3c7;text-transform:uppercase;letter-spacing:.04em;font-size:.82rem}
.finalExamRules b{font-size:1.3em;color:#facc15}
.finalExamMount{display:block}
.finalExamStartBox,.finalExamQuestionCard,.finalExamOutcome{background:linear-gradient(180deg,rgba(8,12,22,.96),rgba(24,9,15,.95));border:1px solid rgba(148,163,184,.28);border-radius:18px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.38)}
.finalExamStartBox h3,.finalExamQuestionCard h3{margin:4px 0 12px;color:#fff7d6;font-size:1.35rem;line-height:1.25}
.finalExamStartBox p{margin:0;color:#e7dfd3;line-height:1.5}
.finalExamBossName{display:inline-flex;align-items:center;gap:8px;background:rgba(127,29,29,.78);border:1px solid rgba(248,113,113,.55);border-radius:999px;color:#fecaca;font-weight:900;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;margin-bottom:10px}
.finalExamStartActions,.finalExamActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.finalExamBeginBtn{font-size:1.05rem;padding-inline:22px}
.finalExamScoreBar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;background:rgba(15,23,42,.72);border:1px solid rgba(148,163,184,.25);border-radius:14px;padding:10px 12px;margin-bottom:10px;color:#e2e8f0}
.goodText{color:#4ade80;font-weight:900}.badText{color:#fb7185;font-weight:900}
.finalExamDots{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 14px}
.finalExamDot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(15,23,42,.9);border:1px solid rgba(148,163,184,.35);font-weight:900;color:#cbd5e1}
.finalExamDot.current{border-color:#facc15;color:#facc15;box-shadow:0 0 12px rgba(250,204,21,.28)}
.finalExamDot.correct{background:rgba(22,101,52,.7);border-color:#4ade80;color:#dcfce7}.finalExamDot.wrong{background:rgba(127,29,29,.75);border-color:#fb7185;color:#ffe4e6}
.finalExamQuestionTop{display:flex;justify-content:space-between;gap:10px;color:#e2e8f0;text-transform:uppercase;letter-spacing:.08em;font-size:.84rem;margin:8px 0 10px}
.finalExamQuestionTop em{font-style:normal;color:#facc15;font-weight:900}
.finalExamChoices{display:grid;gap:9px;margin-top:10px}
.finalExamChoice{display:flex;gap:10px;align-items:center;text-align:left;width:100%;border:1px solid rgba(148,163,184,.32);background:rgba(15,23,42,.86);border-radius:12px;color:#f8fafc;padding:12px 14px;font-size:1rem;line-height:1.35;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease}
.finalExamChoice:hover:not(:disabled){transform:translateY(-1px);border-color:#facc15;background:rgba(30,41,59,.94)}
.finalExamChoice span{flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);font-weight:900;color:#ffe8b0}
.finalExamChoice.answered{cursor:default;opacity:.95}.finalExamChoice.answered.correct{border-color:#4ade80;background:rgba(22,101,52,.38)}.finalExamChoice.answered.wrong{border-color:#fb7185;background:rgba(127,29,29,.42)}.finalExamChoice.answered.muted{opacity:.58}
.finalExamHint{margin-top:12px;color:#fde68a;background:rgba(120,53,15,.25);border:1px solid rgba(250,204,21,.2);border-radius:12px;padding:10px 12px;font-size:.92rem}
.finalExamFeedback{display:grid;gap:4px;border-radius:14px;padding:12px 14px;margin:10px 0 12px;border:1px solid rgba(148,163,184,.25)}
.finalExamFeedback.good{background:rgba(22,101,52,.28);border-color:rgba(74,222,128,.35)}.finalExamFeedback.bad{background:rgba(127,29,29,.35);border-color:rgba(251,113,133,.38)}
.finalExamFeedback b{font-size:1.08rem}.finalExamFeedback small{color:#e5e7eb}
.finalExamOutcome{display:grid;grid-template-columns:minmax(280px,1.1fr) minmax(260px,.9fr);gap:18px;align-items:stretch;border-color:rgba(250,204,21,.28)}
.finalExamOutcome.passed{border-color:rgba(74,222,128,.45);box-shadow:0 0 36px rgba(34,197,94,.18),0 20px 60px rgba(0,0,0,.4)}
.finalExamOutcome.failed{border-color:rgba(248,113,113,.46);box-shadow:0 0 36px rgba(239,68,68,.16),0 20px 60px rgba(0,0,0,.42)}
.finalExamOutcomeArt{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.12);min-height:300px;background:#05070c}
.finalExamOutcomeArt img{width:100%;height:100%;object-fit:cover;display:block}
.finalExamOutcomeCopy{display:flex;flex-direction:column;justify-content:center;gap:12px}.outcomeScore{margin-top:8px}
@media (max-width: 820px){
  .finalExamIntroCard,.finalExamOutcome{grid-template-columns:1fr}.finalExamIntroArt,.finalExamOutcomeArt{min-height:220px}.finalExamIntroCopy h2,.finalExamOutcomeCopy h2{font-size:2.2rem}.finalExamChoice{font-size:.96rem}.finalExamQuestionTop{display:block}.finalExamScoreBar{font-size:.9rem}
}

/* ===== Adenocarcinoma cinematic polish v3 ===== */
.tourConversationWrap{
  display:grid;
  grid-template-columns:150px minmax(0,1fr) 150px;
  gap:14px;
  align-items:stretch;
}
.tourConversationWrap .tourCinematicScene{
  min-width:0;
}
.tourSpeakerSide{
  display:flex;
  align-items:center;
  justify-content:center;
}
.tourSpeakerCard{
  width:100%;
  border-radius:18px;
  padding:12px;
  border:1px solid rgba(211,169,88,.35);
  background:linear-gradient(180deg, rgba(7,10,18,.96), rgba(20,12,18,.92));
  box-shadow:0 14px 36px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.04);
  display:grid;
  gap:10px;
  justify-items:center;
  text-align:center;
}
.tourSpeakerAvatar{
  width:110px;
  height:140px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#05070c;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.tourSpeakerAvatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.tourSpeakerMeta{
  display:grid;
  gap:3px;
}
.tourSpeakerMeta strong{
  color:#fff4ca;
  font-size:1rem;
  line-height:1.05;
}
.tourSpeakerMeta span{
  color:#d9c9a1;
  font-size:.74rem;
  line-height:1.25;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.finalConversationWrap .tourSpeakerAvatar{
  width:120px;
  height:150px;
}
@media (max-width: 980px){
  .tourConversationWrap{
    grid-template-columns:1fr;
  }
  .tourSpeakerSide{
    justify-content:stretch;
  }
  .tourSpeakerCard{
    grid-template-columns:72px 1fr;
    align-items:center;
    justify-items:start;
    text-align:left;
  }
  .tourSpeakerAvatar{
    width:72px;
    height:90px;
  }
  .tourSpeakerMeta strong{font-size:.95rem}
}

.modal.finalExamModalScreen .modalGrid{
  grid-template-columns:1fr!important;
}
.modal.finalExamModalScreen .avatarPane,
.modal.finalExamModalScreen #modalAvatar{
  display:none!important;
}
.modal.finalExamModalScreen .dialoguePane{
  max-width:none!important;
}
.finalExamShell{
  max-width:1280px;
}
.finalExamIntroCard{
  grid-template-columns:minmax(360px,1.6fr) minmax(320px,1fr);
  min-height:330px;
}
.finalExamIntroArt{
  min-height:320px;
}
.finalExamLaunchCard{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(290px,.8fr);
  gap:16px;
  align-items:stretch;
  border:1px solid rgba(250,204,21,.32);
  background:linear-gradient(135deg, rgba(11,14,25,.98), rgba(33,10,16,.96));
}
.finalExamLaunchCopy,
.finalExamLaunchPanel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
}
.finalExamLaunchPanel{
  border-radius:16px;
  padding:16px;
  border:1px solid rgba(250,204,21,.2);
  background:linear-gradient(180deg, rgba(20,24,40,.92), rgba(10,12,22,.98));
}
.finalExamLaunchPanelTitle{
  color:#fff0bf;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.78rem;
}
.finalExamLaunchChecklist{
  display:grid;
  gap:8px;
  color:#e6dcc6;
  line-height:1.45;
}
.finalExamLaunchCard .finalExamStartActions{
  margin-top:6px;
}
.fullBleedOutcome{
  gap:0;
  padding:0;
  overflow:hidden;
  border-radius:22px;
}
.finalExamOutcomeHero{
  position:relative;
  min-height:560px;
  border-bottom:1px solid rgba(255,255,255,.1);
  background:#05070c;
}
.finalExamOutcomeHero img{
  width:100%;
  height:100%;
  min-height:560px;
  object-fit:cover;
  display:block;
  filter:saturate(1.04) contrast(1.02);
}
.finalExamOutcomeOverlay{
  position:absolute;
  inset:auto 0 0 0;
  padding:28px 28px 24px;
  background:linear-gradient(180deg, rgba(2,4,10,0) 0%, rgba(4,6,12,.64) 22%, rgba(4,6,12,.92) 100%);
  display:grid;
  gap:12px;
}
.finalExamOutcomeOverlay h2{
  max-width:11ch;
}
.finalExamOutcomeOverlay p{
  max-width:62ch;
}
.finalExamOutcomePanel{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:18px 22px 22px;
  background:linear-gradient(180deg, rgba(11,14,25,.98), rgba(20,9,15,.98));
}
.finalExamOutcomePanel .lessonBullet{
  margin:0;
  flex:1 1 auto;
}
.finalExamOutcomePanel .finalExamActions{
  margin-top:0;
  justify-content:flex-end;
}
@media (max-width: 900px){
  .finalExamIntroCard,
  .finalExamLaunchCard{
    grid-template-columns:1fr;
  }
  .finalExamOutcomeHero,
  .finalExamOutcomeHero img{
    min-height:360px;
  }
  .finalExamOutcomePanel{
    flex-direction:column;
    align-items:stretch;
  }
}


/* ===== Adenocarcinoma final-exam layout fix v4 ===== */
.modal.lessonModal.oceanLessonModal.finalExamModalScreen .modalGrid{
  grid-template-columns:1fr!important;
  gap:18px!important;
}
.modal.lessonModal.oceanLessonModal.finalExamModalScreen .avatarPane,
.modal.lessonModal.oceanLessonModal.finalExamModalScreen #modalAvatar{
  display:none!important;
  width:0!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  overflow:hidden!important;
}
.modal.lessonModal.oceanLessonModal.finalExamModalScreen .modalBox{
  max-width:min(96vw,1320px)!important;
  width:min(96vw,1320px)!important;
}
.modal.lessonModal.oceanLessonModal.finalExamModalScreen #modalContent,
.modal.lessonModal.oceanLessonModal.finalExamModalScreen .dialoguePane,
.modal.lessonModal.oceanLessonModal.finalExamModalScreen .finalExamShell,
.modal.lessonModal.oceanLessonModal.finalExamModalScreen .finalExamMount{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}
.modal.lessonModal.oceanLessonModal.finalExamModalScreen .finalExamShell{
  display:grid;
  gap:18px;
}
.modal.lessonModal.oceanLessonModal.finalExamModalScreen .finalExamQuestionCard,
.modal.lessonModal.oceanLessonModal.finalExamModalScreen .finalExamStartBox,
.modal.lessonModal.oceanLessonModal.finalExamModalScreen .finalExamOutcome{
  width:100%;
}
.modal.lessonModal.oceanLessonModal.finalExamModalScreen .finalExamChoice{
  white-space:normal;
}
.modal.lessonModal.oceanLessonModal.finalExamModalScreen .finalExamOutcomeHero,
.modal.lessonModal.oceanLessonModal.finalExamModalScreen .finalExamOutcomeHero img{
  min-height:620px;
}
@media (max-width: 900px){
  .modal.lessonModal.oceanLessonModal.finalExamModalScreen .finalExamOutcomeHero,
  .modal.lessonModal.oceanLessonModal.finalExamModalScreen .finalExamOutcomeHero img{
    min-height:360px;
  }
}


/* ===== Adenocarcinoma final outcome takeover v7 ===== */
.modal.lessonModal.oceanLessonModal.finalExamOutcomeScreen .modalBox{
  max-width:min(96vw,1500px)!important;
  width:min(96vw,1500px)!important;
  max-height:94vh!important;
  padding:12px!important;
  overflow:auto!important;
}
.modal.lessonModal.oceanLessonModal.finalExamOutcomeScreen #modalTitle,
.modal.lessonModal.oceanLessonModal.finalExamOutcomeScreen #modalBody,
.modal.lessonModal.oceanLessonModal.finalExamOutcomeScreen .lessonCloseTop,
.modal.lessonModal.oceanLessonModal.finalExamOutcomeScreen .lessonTeacherHeader,
.modal.lessonModal.oceanLessonModal.finalExamOutcomeScreen .avatarPane,
.modal.lessonModal.oceanLessonModal.finalExamOutcomeScreen #modalAvatar{
  display:none!important;
}
.modal.lessonModal.oceanLessonModal.finalExamOutcomeScreen .modalGrid{
  grid-template-columns:1fr!important;
}
.modal.lessonModal.oceanLessonModal.finalExamOutcomeScreen #modalContent,
.modal.lessonModal.oceanLessonModal.finalExamOutcomeScreen .dialoguePane{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}
.modal.lessonModal.oceanLessonModal.finalExamOutcomeScreen .fullBleedOutcome{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:0!important;
  padding:0!important;
  width:100%!important;
  min-height:calc(94vh - 48px)!important;
  overflow:hidden!important;
  border-radius:22px!important;
}
.modal.lessonModal.oceanLessonModal.finalExamOutcomeScreen .finalExamOutcomeHero{
  grid-column:1 / -1!important;
  min-height:calc(94vh - 132px)!important;
}
.modal.lessonModal.oceanLessonModal.finalExamOutcomeScreen .finalExamOutcomeHero img{
  width:100%!important;
  height:100%!important;
  min-height:calc(94vh - 132px)!important;
  object-fit:cover!important;
  object-position:center center!important;
}
.modal.lessonModal.oceanLessonModal.finalExamOutcomeScreen .finalExamOutcomePanel{
  grid-column:1 / -1!important;
}
@media (max-width:900px){
  .modal.lessonModal.oceanLessonModal.finalExamOutcomeScreen .finalExamOutcomeHero,
  .modal.lessonModal.oceanLessonModal.finalExamOutcomeScreen .finalExamOutcomeHero img{
    min-height:360px!important;
  }
}


/* Story 5 patch: objective route is scrollable and highlights the next ordered teacher. */
body.inGame .objectiveCard{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  overflow:hidden !important;
}
.objectiveCard .objectiveDesc{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:0;
}
body.inGame .objectiveCard .objectiveDesc{
  flex:1 1 auto !important;
  max-height:none !important;
  overflow:hidden !important;
}
.objectiveIntro{
  opacity:.88;
}
.objectiveNow{
  border:1px solid rgba(251,191,36,.35);
  border-radius:12px;
  padding:8px 10px;
  background:rgba(251,191,36,.10);
  color:#ffe6ac;
}
.objectiveStepList{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:0;
  overflow-y:auto;
  padding-right:6px;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(251,191,36,.72) rgba(15,23,42,.40);
}
body.inGame .objectiveStepList{
  flex:1 1 auto;
  max-height:clamp(145px, 37vh, 420px);
}
.objectiveStepList::-webkit-scrollbar{width:10px;}
.objectiveStepList::-webkit-scrollbar-track{background:rgba(15,23,42,.42);border-radius:999px;}
.objectiveStepList::-webkit-scrollbar-thumb{background:rgba(251,191,36,.72);border-radius:999px;border:2px solid rgba(15,23,42,.42);}
.objectiveStep{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:7px;
  align-items:flex-start;
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;
  padding:7px 8px;
  background:rgba(255,255,255,.045);
}
.objectiveStep.current{
  border-color:rgba(96,165,250,.72);
  background:rgba(37,99,235,.16);
  color:#dbeafe;
}
.objectiveStep.done{
  border-color:rgba(52,211,153,.34);
  background:rgba(22,163,74,.13);
  color:#c8f7d7;
}
.objectiveStepIcon{
  width:20px;
  height:20px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:1000;
  background:rgba(6,8,14,.72);
  color:#ffe2a4;
}
.objectiveStep.current .objectiveStepIcon{color:#bfdbfe;border:1px solid rgba(147,197,253,.54);}
.objectiveStep.done .objectiveStepIcon{color:#bbf7d0;border:1px solid rgba(134,239,172,.48);}
.objectiveStepText{min-width:0;}


/* Global objective route scroll fix: make long Current Objective lists scroll in every story. */
body.inGame .objectiveCard{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  overflow:hidden !important;
  overscroll-behavior:contain !important;
}
body.inGame .objectiveCard:focus,
body.inGame .objectiveStepList:focus{
  outline:2px solid rgba(96,165,250,.78);
  outline-offset:2px;
}
body.inGame .objectiveCard .objectiveDesc{
  flex:1 1 0 !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden !important;
}
body.inGame .objectiveStepList{
  flex:1 1 0 !important;
  min-height:72px !important;
  max-height:none !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  padding-right:8px !important;
  overscroll-behavior:contain !important;
  scrollbar-gutter:stable !important;
  -webkit-overflow-scrolling:touch !important;
  touch-action:pan-y !important;
}
@media(max-width:1150px){
  body.inGame .objectiveCard{
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  body.inGame .objectiveCard .objectiveDesc{
    overflow:visible !important;
  }
  body.inGame .objectiveStepList{
    flex:0 0 auto !important;
    max-height:46vh !important;
  }
}

/* Objective scroll v3: make the Current Objective section itself scrollable,
   with the route list sized to the visible card height. This is a global fix
   for every story, not only Story 5. */
body.inGame .objectiveCard{
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  scrollbar-gutter:stable !important;
  -webkit-overflow-scrolling:touch !important;
  touch-action:pan-y !important;
}
body.inGame .objectiveCard .objectiveDesc{
  flex:0 0 auto !important;
  min-height:0 !important;
  overflow:visible !important;
}
body.inGame .objectiveStepList{
  flex:0 0 auto !important;
  min-height:72px !important;
  max-height:var(--objectiveRouteMaxH, clamp(145px, 34vh, 360px)) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  scrollbar-gutter:stable !important;
  -webkit-overflow-scrolling:touch !important;
  touch-action:pan-y !important;
}
body.inGame .objectiveStepList::-webkit-scrollbar,
body.inGame .objectiveCard::-webkit-scrollbar{
  width:10px;
}
body.inGame .objectiveStepList::-webkit-scrollbar-track,
body.inGame .objectiveCard::-webkit-scrollbar-track{
  background:rgba(15,23,42,.42);
  border-radius:999px;
}
body.inGame .objectiveStepList::-webkit-scrollbar-thumb,
body.inGame .objectiveCard::-webkit-scrollbar-thumb{
  background:rgba(251,191,36,.72);
  border-radius:999px;
  border:2px solid rgba(15,23,42,.42);
}

/* Objective scroll v4: constrain the Current Objective card itself and make
   the lesson route list the primary scroll area. This avoids parent clipping in
   every story and keeps the title/Next line visible while the route scrolls. */
body.inGame .objectiveCard{
  display:flex !important;
  flex-direction:column !important;
  align-self:stretch !important;
  min-height:0 !important;
  height:100% !important;
  max-height:100% !important;
  overflow:hidden !important;
  overscroll-behavior:contain !important;
  touch-action:pan-y !important;
}
body.inGame .objectiveCard .small,
body.inGame .objectiveCard .name{
  flex:0 0 auto !important;
}
body.inGame .objectiveCard .objectiveDesc{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden !important;
}
body.inGame .objectiveCard .objectiveIntro,
body.inGame .objectiveCard .objectiveNow{
  flex:0 0 auto !important;
}
body.inGame .objectiveStepList{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  max-height:var(--objectiveRouteMaxH, 100%) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  scrollbar-gutter:stable !important;
  scrollbar-width:thin !important;
  -webkit-overflow-scrolling:touch !important;
  touch-action:pan-y !important;
  pointer-events:auto !important;
}
body.inGame .objectiveStepList::-webkit-scrollbar{
  width:10px;
}
body.inGame .objectiveStepList::-webkit-scrollbar-track{
  background:rgba(15,23,42,.42);
  border-radius:999px;
}
body.inGame .objectiveStepList::-webkit-scrollbar-thumb{
  background:rgba(251,191,36,.72);
  border-radius:999px;
  border:2px solid rgba(15,23,42,.42);
}
@media(max-width:1150px), (hover:none) and (pointer:coarse){
  body.inGame .objectiveCard{
    height:auto !important;
    max-height:min(48vh, 430px) !important;
  }
  body.inGame .objectiveStepList{
    flex:0 0 auto !important;
    max-height:min(36vh, 320px) !important;
  }
}

/* Objective scroll v5: one real scroll container for the Current Objective card.
   Previous patches left both the card and the route list competing as nested
   scroll regions. Some browsers/layout states clipped the list instead of
   exposing a usable scroll area. This final override mirrors the working
   Lesson Progress behavior: the objective card owns the scrollbar and the
   route list grows naturally inside it. Applies to every story. */
html body.inGame .storySidePanel #objectiveCard.objectiveCard,
html body.inGame #objectiveCard.objectiveCard{
  display:block !important;
  min-height:0 !important;
  height:100% !important;
  max-height:100% !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  scrollbar-gutter:stable both-edges !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(251,191,36,.78) rgba(15,23,42,.45) !important;
  scroll-behavior:auto !important;
  -webkit-overflow-scrolling:touch !important;
  touch-action:pan-y !important;
}
html body.inGame .storySidePanel #objectiveCard.objectiveCard .objectiveDesc,
html body.inGame #objectiveCard.objectiveCard .objectiveDesc{
  display:block !important;
  flex:none !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}
html body.inGame .storySidePanel #objectiveCard.objectiveCard .objectiveIntro,
html body.inGame .storySidePanel #objectiveCard.objectiveCard .objectiveNow,
html body.inGame #objectiveCard.objectiveCard .objectiveIntro,
html body.inGame #objectiveCard.objectiveCard .objectiveNow{
  display:block !important;
  margin-bottom:8px !important;
}
html body.inGame .storySidePanel #objectiveCard.objectiveCard .objectiveStepList,
html body.inGame #objectiveCard.objectiveCard .objectiveStepList{
  display:flex !important;
  flex:none !important;
  flex-direction:column !important;
  gap:6px !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  padding-right:4px !important;
  scrollbar-gutter:auto !important;
  -webkit-overflow-scrolling:auto !important;
  touch-action:auto !important;
}
html body.inGame #objectiveCard.objectiveCard::-webkit-scrollbar{
  width:10px;
}
html body.inGame #objectiveCard.objectiveCard::-webkit-scrollbar-track{
  background:rgba(15,23,42,.42);
  border-radius:999px;
}
html body.inGame #objectiveCard.objectiveCard::-webkit-scrollbar-thumb{
  background:rgba(251,191,36,.72);
  border-radius:999px;
  border:2px solid rgba(15,23,42,.42);
}
@media(max-width:1150px), (hover:none) and (pointer:coarse){
  html body.inGame #objectiveCard.objectiveCard{
    height:auto !important;
    max-height:min(48vh, 430px) !important;
  }
}

/* Story 5 hospital intro v2: put the dialogue on the image, enlarge the art,
   and keep the speaker cards small so the scene stays the star. */
.dialoguePoster.storyIntroPoster{
  padding:18px 18px 14px !important;
}
.dialoguePoster.storyIntroPoster .posterTitleBlock{
  margin-bottom:10px;
}
.dialoguePoster.storyIntroPoster .posterTitle{
  font-size:clamp(42px, 5vw, 72px) !important;
  line-height:.92 !important;
}
.dialoguePoster.storyIntroPoster .posterSubtitle{
  font-size:clamp(18px, 1.45vw, 28px) !important;
  letter-spacing:.14em !important;
}
.dialoguePoster.storyIntroPoster .storyIntroHeroShell{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.dialoguePoster.storyIntroPoster .storyIntroMainScene{
  position:relative;
  height:min(58vh, 620px) !important;
  min-height:420px !important;
  border-radius:22px !important;
  overflow:hidden !important;
  margin:0 !important;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.dialoguePoster.storyIntroPoster .storyIntroMainScene::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:45%;
  background:linear-gradient(180deg, rgba(3,7,18,0) 0%, rgba(3,7,18,.16) 18%, rgba(3,7,18,.78) 100%);
  pointer-events:none;
}
.dialoguePoster.storyIntroPoster .storyIntroMainScene img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.dialoguePoster.storyIntroPoster .storyIntroDialogueOverlay{
  position:absolute;
  left:18px;
  right:18px;
  bottom:16px;
  z-index:2;
  pointer-events:none;
}
.dialoguePoster.storyIntroPoster .storyIntroDialogueStack{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:min(780px, 60%);
  max-width:100%;
  margin:0 auto;
}
.dialoguePoster.storyIntroPoster .posterBubble{
  margin:0 !important;
  border-radius:18px !important;
  box-shadow:0 10px 20px rgba(0,0,0,.2);
  pointer-events:auto;
}
.dialoguePoster.storyIntroPoster .posterBubble.left{
  align-self:flex-start;
}
.dialoguePoster.storyIntroPoster .posterBubble.hero{
  align-self:flex-end;
  max-width:92%;
}
.dialoguePoster.storyIntroPoster .posterBubbleBody{
  font-size:clamp(20px, 1.55vw, 33px) !important;
  line-height:1.18 !important;
}
.dialoguePoster.storyIntroPoster .posterBubbleSpeaker{
  font-size:clamp(14px, .95vw, 19px) !important;
}
.dialoguePoster.storyIntroPoster .storyIntroSpeakerRail{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.dialoguePoster.storyIntroPoster .storyIntroSpeakerCard{
  background:rgba(2,6,23,.92);
  border:1px solid rgba(211,169,88,.25);
  border-radius:18px;
  padding:12px 14px;
  display:grid;
  grid-template-columns:92px 1fr;
  grid-template-areas:'tag tag' 'portrait name' 'portrait role';
  gap:7px 12px;
  align-items:center;
}
.dialoguePoster.storyIntroPoster .storyIntroSpeakerCard .posterRoleTag{
  grid-area:tag;
  justify-self:start;
  margin:0;
}
.dialoguePoster.storyIntroPoster .storyIntroSpeakerCard .posterPortrait{
  grid-area:portrait;
  width:92px;
  height:92px;
  border-radius:16px;
  overflow:hidden;
  margin:0;
}
.dialoguePoster.storyIntroPoster .storyIntroSpeakerCard .posterPortrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:none !important;
  padding:0 !important;
}
.dialoguePoster.storyIntroPoster .storyIntroSpeakerCard .posterName{
  grid-area:name;
  text-align:left;
  margin:0;
  font-size:clamp(22px, 1.9vw, 34px);
  line-height:1;
}
.dialoguePoster.storyIntroPoster .storyIntroSpeakerCard .posterRole{
  grid-area:role;
  text-align:left;
  margin:0;
  font-size:12px;
  line-height:1.2;
}
.dialoguePoster.storyIntroPoster .storyIntroBottomRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:12px;
}
.dialoguePoster.storyIntroPoster .storyIntroBottomRow .posterPrompt{
  flex:1 1 auto;
  text-align:left;
  margin:0;
}
.dialoguePoster.storyIntroPoster .storyIntroBottomRow .posterActions{
  flex:0 0 auto;
  margin:0;
}

@media (max-width: 980px){
  .dialoguePoster.storyIntroPoster .storyIntroMainScene{
    height:min(52vh, 540px) !important;
    min-height:340px !important;
  }
  .dialoguePoster.storyIntroPoster .storyIntroDialogueStack{
    width:min(100%, 92%);
  }
  .dialoguePoster.storyIntroPoster .storyIntroBottomRow{
    flex-direction:column;
    align-items:stretch;
  }
}

@media (max-width: 760px){
  .dialoguePoster.storyIntroPoster{
    padding:10px !important;
  }
  .dialoguePoster.storyIntroPoster .posterTitle{
    font-size:clamp(28px, 9vw, 44px) !important;
    line-height:.95 !important;
  }
  .dialoguePoster.storyIntroPoster .posterSubtitle{
    font-size:13px !important;
  }
  .dialoguePoster.storyIntroPoster .storyIntroMainScene{
    height:clamp(300px, 46vw, 420px) !important;
    min-height:300px !important;
    border-radius:16px !important;
  }
  .dialoguePoster.storyIntroPoster .storyIntroDialogueOverlay{
    left:10px;
    right:10px;
    bottom:10px;
  }
  .dialoguePoster.storyIntroPoster .storyIntroDialogueStack{
    width:100%;
  }
  .dialoguePoster.storyIntroPoster .posterBubbleBody{
    font-size:clamp(18px, 4.7vw, 24px) !important;
    line-height:1.22 !important;
  }
  .dialoguePoster.storyIntroPoster .storyIntroSpeakerRail{
    grid-template-columns:1fr;
  }
  .dialoguePoster.storyIntroPoster .storyIntroSpeakerCard{
    grid-template-columns:72px 1fr;
    padding:10px 12px;
  }
  .dialoguePoster.storyIntroPoster .storyIntroSpeakerCard .posterPortrait{
    width:72px;
    height:72px;
  }
  .dialoguePoster.storyIntroPoster .storyIntroSpeakerCard .posterName{
    font-size:clamp(20px, 6vw, 28px);
  }
  .dialoguePoster.storyIntroPoster .storyIntroBottomRow .posterActions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
}

/* Story 5 hospital intro v3: preserve the full artwork and keep text on safe side zones. */
.dialoguePoster.storyIntroPoster{
  padding:14px 16px 12px !important;
}
.dialoguePoster.storyIntroPoster .posterTitleBlock{
  margin:0 0 8px !important;
}
.dialoguePoster.storyIntroPoster .posterTitle{
  font-size:clamp(34px, 4.1vw, 58px) !important;
  line-height:.94 !important;
  text-wrap:balance;
}
.dialoguePoster.storyIntroPoster .posterSubtitle{
  font-size:clamp(14px, 1.15vw, 20px) !important;
  letter-spacing:.12em !important;
}
.dialoguePoster.storyIntroPoster .storyIntroMainScene{
  height:min(44vh, 470px) !important;
  min-height:300px !important;
  background:linear-gradient(180deg, rgba(5,10,24,.95), rgba(9,16,35,.95)) !important;
}
.dialoguePoster.storyIntroPoster .storyIntroMainScene::after{
  display:none !important;
}
.dialoguePoster.storyIntroPoster .storyIntroMainScene img{
  object-fit:contain !important;
  object-position:center center !important;
  width:100% !important;
  height:100% !important;
}
.dialoguePoster.storyIntroPoster .storyIntroDialogueOverlay{
  top:14px;
  bottom:14px;
  left:18px;
  right:18px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.dialoguePoster.storyIntroPoster.storyIntroDialogueSide-right .storyIntroDialogueOverlay{
  justify-content:flex-end;
}
.dialoguePoster.storyIntroPoster .storyIntroDialogueStack{
  width:min(var(--story-intro-stack-width, 34%), 430px);
  margin:0;
  gap:10px;
}
.dialoguePoster.storyIntroPoster .posterBubble{
  background:rgba(238, 228, 192, .78) !important;
}
.dialoguePoster.storyIntroPoster .posterBubble.left,
.dialoguePoster.storyIntroPoster .posterBubble.hero{
  align-self:stretch !important;
  max-width:100% !important;
}
.dialoguePoster.storyIntroPoster .posterBubbleBody{
  font-size:clamp(16px, 1.25vw, 22px) !important;
  line-height:1.16 !important;
}
.dialoguePoster.storyIntroPoster .posterBubbleSpeaker{
  font-size:clamp(11px, .72vw, 14px) !important;
  line-height:1 !important;
}
.dialoguePoster.storyIntroPoster .storyIntroSpeakerRail{
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
}
.dialoguePoster.storyIntroPoster .storyIntroSpeakerCard{
  padding:10px 12px !important;
  grid-template-columns:62px 1fr !important;
  gap:5px 10px !important;
}
.dialoguePoster.storyIntroPoster .storyIntroSpeakerCard .posterPortrait{
  width:62px !important;
  height:62px !important;
  border-radius:12px !important;
}
.dialoguePoster.storyIntroPoster .storyIntroSpeakerCard .posterName{
  font-size:clamp(16px, 1.7vw, 24px) !important;
}
.dialoguePoster.storyIntroPoster .storyIntroSpeakerCard .posterRole{
  font-size:11px !important;
  letter-spacing:.06em;
}
.dialoguePoster.storyIntroPoster .storyIntroBottomRow{
  margin-top:8px !important;
  gap:10px !important;
}
.dialoguePoster.storyIntroPoster .storyIntroBottomRow .posterPrompt{
  font-size:clamp(12px, .95vw, 16px) !important;
}
.dialoguePoster.storyIntroPoster .posterPrimaryBtn,
.dialoguePoster.storyIntroPoster .posterSecondaryBtn{
  min-height:40px !important;
}

@media (max-width: 980px){
  .dialoguePoster.storyIntroPoster .storyIntroMainScene{
    height:min(40vh, 400px) !important;
    min-height:260px !important;
  }
  .dialoguePoster.storyIntroPoster .storyIntroDialogueOverlay{
    top:auto;
    bottom:10px;
    left:12px;
    right:12px;
    justify-content:center !important;
    align-items:flex-end;
  }
  .dialoguePoster.storyIntroPoster .storyIntroDialogueStack{
    width:min(100%, 720px);
  }
}

@media (max-width: 760px){
  .dialoguePoster.storyIntroPoster .posterTitle{
    font-size:clamp(26px, 8vw, 38px) !important;
  }
  .dialoguePoster.storyIntroPoster .posterSubtitle{
    font-size:12px !important;
  }
  .dialoguePoster.storyIntroPoster .storyIntroMainScene{
    height:clamp(260px, 42vw, 340px) !important;
  }
  .dialoguePoster.storyIntroPoster .storyIntroDialogueStack{
    width:100%;
  }
  .dialoguePoster.storyIntroPoster .posterBubbleBody{
    font-size:clamp(16px, 4.5vw, 21px) !important;
  }
}

/* Story 5 intro v4: full-picture cinematic layout.
   The main scene owns the screen, speaker cards sit below, and intro images do not get magnify buttons. */
.modal.dialoguePosterModal.storyIntroModal{
  align-items:center !important;
  padding:6px !important;
  overflow:hidden !important;
}
.modal.dialoguePosterModal.storyIntroModal .modalBox{
  width:min(99vw, 1640px) !important;
  max-width:min(99vw, 1640px) !important;
  height:min(98dvh, 980px) !important;
  max-height:98dvh !important;
  overflow:hidden !important;
  padding:8px 10px !important;
  border-radius:14px !important;
}
.modal.dialoguePosterModal.storyIntroModal .modalGrid,
.modal.dialoguePosterModal.storyIntroModal #modalContent{
  height:100% !important;
  min-height:0 !important;
}
.modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster{
  height:100% !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-rows:auto minmax(0, 1fr) auto !important;
  gap:7px !important;
  padding:10px 16px 9px !important;
  overflow:hidden !important;
}
.modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterTitleBlock{
  margin:0 !important;
  padding:0 0 6px !important;
  border-bottom:1px solid rgba(211,169,88,.16) !important;
}
.modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterTitle{
  font-size:clamp(28px, 3.25vw, 50px) !important;
  line-height:.92 !important;
  letter-spacing:.035em !important;
  max-height:1.9em !important;
  overflow:hidden !important;
}
.modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterSubtitle{
  margin-top:3px !important;
  font-size:clamp(12px, .9vw, 16px) !important;
  letter-spacing:.12em !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroHeroShell{
  min-height:0 !important;
  display:grid !important;
  grid-template-rows:minmax(0, 1fr) auto !important;
  gap:7px !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroMainScene{
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  border-radius:16px !important;
  background:radial-gradient(circle at 50% 45%, rgba(37,26,15,.92), rgba(4,7,16,.98) 76%) !important;
  box-shadow:0 14px 42px rgba(0,0,0,.34) !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroMainScene::after{
  display:none !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroMainScene img.storyIntroMainImg{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueOverlay{
  top:10px !important;
  bottom:10px !important;
  left:12px !important;
  right:12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  pointer-events:none !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueSide-right .storyIntroDialogueOverlay{
  justify-content:flex-end !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack{
  width:min(var(--story-intro-stack-width, 30%), 365px) !important;
  min-width:250px !important;
  max-width:365px !important;
  margin:0 !important;
  gap:7px !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble{
  padding:9px 11px !important;
  border-radius:12px !important;
  background:rgba(246,233,196,.92) !important;
  border:1px solid rgba(122,70,20,.28) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.18) !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble.left,
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble.hero{
  align-self:stretch !important;
  max-width:100% !important;
  margin:0 !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubbleSpeaker{
  font-size:clamp(10px, .68vw, 13px) !important;
  letter-spacing:.06em !important;
  margin-bottom:3px !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubbleBody{
  font-size:clamp(14px, 1.05vw, 19px) !important;
  line-height:1.12 !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerRail{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
  min-height:64px !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard{
  min-height:58px !important;
  padding:6px 9px !important;
  border-radius:12px !important;
  grid-template-columns:46px 1fr !important;
  grid-template-areas:'portrait tag' 'portrait name' 'portrait role' !important;
  gap:2px 8px !important;
  align-content:center !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterRoleTag{
  grid-area:tag !important;
  font-size:9px !important;
  padding:2px 7px !important;
  line-height:1 !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterPortrait{
  grid-area:portrait !important;
  width:46px !important;
  height:46px !important;
  border-radius:9px !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterName{
  grid-area:name !important;
  font-size:clamp(16px, 1.35vw, 22px) !important;
  line-height:.95 !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterRole{
  grid-area:role !important;
  font-size:9.5px !important;
  line-height:1.05 !important;
  letter-spacing:.055em !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroBottomRow{
  margin-top:0 !important;
  min-height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroBottomRow .posterPrompt{
  font-size:clamp(11px, .82vw, 14px) !important;
  line-height:1.15 !important;
  margin:0 !important;
  letter-spacing:.095em !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroBottomRow .posterActions{
  flex:0 0 auto !important;
  margin:0 !important;
  display:flex !important;
  gap:8px !important;
}
.modal.dialoguePosterModal.storyIntroModal .posterPrimaryBtn,
.modal.dialoguePosterModal.storyIntroModal .posterSecondaryBtn{
  min-height:36px !important;
  padding:8px 14px !important;
  font-size:12px !important;
  white-space:nowrap !important;
}

@media (max-width:980px){
  .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster{
    grid-template-rows:auto minmax(0, 1fr) auto !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueOverlay{
    align-items:flex-end !important;
    justify-content:center !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack{
    width:min(92%, 680px) !important;
    max-width:680px !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubbleBody{
    font-size:clamp(14px, 2.6vw, 18px) !important;
  }
}
@media (max-width:760px){
  .modal.dialoguePosterModal.storyIntroModal{
    padding:0 !important;
    overflow:auto !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .modalBox{
    height:auto !important;
    min-height:100dvh !important;
    max-height:none !important;
    overflow:visible !important;
    border-radius:0 !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster{
    height:auto !important;
    min-height:100dvh !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroMainScene{
    height:clamp(330px, 55vh, 580px) !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerRail{
    grid-template-columns:1fr !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroBottomRow{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroBottomRow .posterActions{
    width:100% !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .posterPrimaryBtn,
  .modal.dialoguePosterModal.storyIntroModal .posterSecondaryBtn{
    flex:1 1 0 !important;
  }
}

/* Story 5 intro v5: no-scroll widescreen stage.
   Left/right side panels hold the characters and buttons; the full image remains central.
   Dialogue bubbles align by speaker: Sinbad/guide side and selected visitor side. */
.modal.dialoguePosterModal.storyIntroModal{
  align-items:center !important;
  justify-content:center !important;
  padding:4px !important;
  overflow:hidden !important;
}
.modal.dialoguePosterModal.storyIntroModal .modalBox{
  width:min(99.5vw, 1880px) !important;
  max-width:min(99.5vw, 1880px) !important;
  height:min(98.5dvh, 1040px) !important;
  max-height:98.5dvh !important;
  overflow:hidden !important;
  padding:8px 10px !important;
  border-radius:14px !important;
}
.modal.dialoguePosterModal.storyIntroModal .modalGrid,
.modal.dialoguePosterModal.storyIntroModal #modalContent{
  height:100% !important;
  min-height:0 !important;
}
.modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster{
  height:100% !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-rows:auto minmax(0, 1fr) !important;
  gap:8px !important;
  padding:8px 14px 10px !important;
  overflow:hidden !important;
}
.modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterTitleBlock{
  margin:0 !important;
  padding:0 40px 6px !important;
  border-bottom:1px solid rgba(211,169,88,.16) !important;
}
.modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterTitle{
  font-size:clamp(24px, 2.75vw, 48px) !important;
  line-height:.95 !important;
  letter-spacing:.035em !important;
  max-height:1.9em !important;
  overflow:hidden !important;
  text-wrap:balance !important;
}
.modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterSubtitle{
  margin-top:2px !important;
  font-size:clamp(11px, .78vw, 15px) !important;
  line-height:1 !important;
  letter-spacing:.12em !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroHeroShell{
  min-height:0 !important;
  height:100% !important;
  display:grid !important;
  grid-template-columns:minmax(108px, 11.5vw) minmax(0, 1fr) minmax(108px, 11.5vw) !important;
  grid-template-rows:minmax(0, 1fr) !important;
  gap:8px !important;
  align-items:stretch !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroMainScene{
  grid-column:2 !important;
  grid-row:1 !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  border-radius:16px !important;
  background:radial-gradient(circle at 50% 45%, rgba(37,26,15,.92), rgba(4,7,16,.98) 76%) !important;
  box-shadow:0 14px 42px rgba(0,0,0,.34) !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroMainScene::after{
  display:none !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroMainScene img.storyIntroMainImg{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSidePane{
  min-width:0 !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  gap:8px !important;
  pointer-events:auto !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroLeftPane{grid-column:1 !important; grid-row:1 !important;}
.modal.dialoguePosterModal.storyIntroModal .storyIntroRightPane{grid-column:3 !important; grid-row:1 !important;}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerRail,
.modal.dialoguePosterModal.storyIntroModal .storyIntroBottomRow{
  display:none !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard{
  width:100% !important;
  min-height:0 !important;
  padding:8px 7px !important;
  border-radius:14px !important;
  background:rgba(2,6,23,.90) !important;
  border:1px solid rgba(211,169,88,.28) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:6px !important;
  text-align:center !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterRoleTag{
  align-self:flex-start !important;
  margin:0 !important;
  font-size:9px !important;
  padding:3px 8px !important;
  line-height:1 !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterPortrait{
  width:min(92px, 7.6vw) !important;
  height:min(92px, 7.6vw) !important;
  min-width:54px !important;
  min-height:54px !important;
  border-radius:13px !important;
  margin:0 !important;
  overflow:hidden !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterPortrait img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:none !important;
  padding:0 !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterName{
  font-size:clamp(15px, 1.25vw, 23px) !important;
  line-height:.95 !important;
  text-align:center !important;
  margin:0 !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterRole{
  font-size:9px !important;
  line-height:1.15 !important;
  letter-spacing:.055em !important;
  text-align:center !important;
  margin:0 !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroFooterPrompt{
  font-family:Inter, system-ui, sans-serif !important;
  color:#f6c453 !important;
  text-transform:uppercase !important;
  font-weight:900 !important;
  letter-spacing:.095em !important;
  font-size:clamp(10px, .72vw, 13px) !important;
  line-height:1.25 !important;
  text-align:left !important;
  padding:8px 6px !important;
  border-radius:12px !important;
  background:rgba(2,6,23,.55) !important;
  border:1px solid rgba(211,169,88,.16) !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSideActions{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  margin:0 !important;
}
.modal.dialoguePosterModal.storyIntroModal .posterPrimaryBtn,
.modal.dialoguePosterModal.storyIntroModal .posterSecondaryBtn{
  width:100% !important;
  min-height:40px !important;
  padding:8px 8px !important;
  font-size:12px !important;
  line-height:1.05 !important;
  white-space:normal !important;
  border-radius:12px !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueOverlay{
  position:absolute !important;
  inset:12px 14px !important;
  display:block !important;
  pointer-events:none !important;
  z-index:3 !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:7px !important;
  padding:0 !important;
  overflow:visible !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble{
  width:auto !important;
  max-width:min(var(--story-intro-stack-width, 28%), 360px) !important;
  padding:8px 10px !important;
  border-radius:12px !important;
  background:rgba(246,233,196,.92) !important;
  border:1px solid rgba(122,70,20,.28) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.18) !important;
  pointer-events:auto !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble.left{
  align-self:flex-start !important;
  margin:0 !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueSide-right .storyIntroDialogueStack .posterBubble.left{
  align-self:flex-end !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble.hero{
  align-self:flex-end !important;
  margin:0 !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubbleSpeaker{
  font-size:clamp(9px, .55vw, 12px) !important;
  letter-spacing:.06em !important;
  margin-bottom:2px !important;
  line-height:1 !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubbleBody{
  font-size:clamp(13px, .85vw, 17px) !important;
  line-height:1.12 !important;
}

@media (max-width: 1100px){
  .modal.dialoguePosterModal.storyIntroModal .storyIntroHeroShell{
    grid-template-columns:minmax(86px, 12vw) minmax(0, 1fr) minmax(86px, 12vw) !important;
    gap:6px !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble{
    max-width:min(34%, 330px) !important;
  }
}
@media (max-width: 760px){
  .modal.dialoguePosterModal.storyIntroModal{
    overflow:auto !important;
    padding:0 !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .modalBox{
    height:auto !important;
    min-height:100dvh !important;
    max-height:none !important;
    overflow:visible !important;
    border-radius:0 !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster{
    height:auto !important;
    min-height:100dvh !important;
    grid-template-rows:auto minmax(360px, 1fr) !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroHeroShell{
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:minmax(360px, 58vh) auto !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroMainScene{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroLeftPane{
    grid-column:1 !important;
    grid-row:2 !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroRightPane{
    grid-column:2 !important;
    grid-row:2 !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterPortrait{
    width:58px !important;
    height:58px !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble{
    max-width:44% !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubbleBody{
    font-size:clamp(13px, 3.2vw, 17px) !important;
  }
}

/* Story 5 intro v6 — reusable responsive cinematic opener.
   Goals: picture-first layout, speaker-specific bubble sides, phone/iPad scroll,
   and full-image presentation without the bottom controls stealing height. */
.modal.dialoguePosterModal.storyIntroModal{
  align-items:center !important;
  justify-content:center !important;
  padding:8px !important;
  overflow:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
.modal.dialoguePosterModal.storyIntroModal .modalBox{
  box-sizing:border-box !important;
  width:min(99vw, 1920px) !important;
  max-width:min(99vw, 1920px) !important;
  height:min(96dvh, 1060px) !important;
  max-height:calc(100dvh - 16px) !important;
  overflow:hidden !important;
  padding:8px 10px !important;
  border-radius:16px !important;
}
.modal.dialoguePosterModal.storyIntroModal .modalGrid,
.modal.dialoguePosterModal.storyIntroModal #modalContent{
  height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
}
.modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster{
  height:100% !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-rows:auto minmax(0, 1fr) !important;
  gap:8px !important;
  padding:8px 12px 10px !important;
  overflow:hidden !important;
}
.modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterTitleBlock{
  margin:0 !important;
  padding:0 42px 6px !important;
  border-bottom:1px solid rgba(211,169,88,.18) !important;
}
.modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterTitle{
  font-size:clamp(28px, 2.95vw, 56px) !important;
  line-height:.93 !important;
  letter-spacing:.035em !important;
  max-height:1.86em !important;
  overflow:hidden !important;
  text-wrap:balance !important;
}
.modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterSubtitle{
  margin-top:2px !important;
  font-size:clamp(11px, .82vw, 16px) !important;
  line-height:1 !important;
  letter-spacing:.13em !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroHeroShell{
  min-height:0 !important;
  height:100% !important;
  display:grid !important;
  grid-template-columns:var(--story-intro-side-w, clamp(108px, 10vw, 176px)) minmax(0, 1fr) var(--story-intro-side-w, clamp(108px, 10vw, 176px)) !important;
  grid-template-rows:minmax(0, 1fr) !important;
  gap:10px !important;
  align-items:stretch !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroMainScene{
  grid-column:2 !important;
  grid-row:1 !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  border-radius:16px !important;
  overflow:hidden !important;
  background:radial-gradient(circle at 50% 45%, rgba(38,28,18,.92), rgba(3,7,18,.98) 78%) !important;
  box-shadow:0 14px 46px rgba(0,0,0,.36) !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroMainScene::after{
  display:none !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroMainScene img.storyIntroMainImg{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSidePane{
  min-width:0 !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  gap:8px !important;
  pointer-events:auto !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroLeftPane{grid-column:1 !important; grid-row:1 !important;}
.modal.dialoguePosterModal.storyIntroModal .storyIntroRightPane{grid-column:3 !important; grid-row:1 !important;}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerRail,
.modal.dialoguePosterModal.storyIntroModal .storyIntroBottomRow{
  display:none !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard{
  width:100% !important;
  min-height:0 !important;
  padding:8px 7px !important;
  border-radius:14px !important;
  background:rgba(2,6,23,.91) !important;
  border:1px solid rgba(211,169,88,.30) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:6px !important;
  text-align:center !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterRoleTag{
  align-self:flex-start !important;
  margin:0 !important;
  font-size:9px !important;
  padding:3px 8px !important;
  line-height:1 !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterPortrait{
  width:min(108px, 7.8vw) !important;
  height:min(108px, 7.8vw) !important;
  min-width:58px !important;
  min-height:58px !important;
  border-radius:14px !important;
  margin:0 !important;
  overflow:hidden !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterPortrait img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 20% !important;
  transform:none !important;
  padding:0 !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterName{
  font-size:clamp(16px, 1.35vw, 25px) !important;
  line-height:.95 !important;
  text-align:center !important;
  margin:0 !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterRole{
  font-size:9px !important;
  line-height:1.15 !important;
  letter-spacing:.055em !important;
  text-align:center !important;
  margin:0 !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroFooterPrompt{
  font-family:Inter, system-ui, sans-serif !important;
  color:#f6c453 !important;
  text-transform:uppercase !important;
  font-weight:900 !important;
  letter-spacing:.095em !important;
  font-size:clamp(10px, .72vw, 13px) !important;
  line-height:1.25 !important;
  text-align:left !important;
  padding:8px 6px !important;
  border-radius:12px !important;
  background:rgba(2,6,23,.55) !important;
  border:1px solid rgba(211,169,88,.16) !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSideActions{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  margin:0 !important;
}
.modal.dialoguePosterModal.storyIntroModal .posterPrimaryBtn,
.modal.dialoguePosterModal.storyIntroModal .posterSecondaryBtn{
  width:100% !important;
  min-height:40px !important;
  padding:8px 8px !important;
  font-size:12px !important;
  line-height:1.05 !important;
  white-space:normal !important;
  border-radius:12px !important;
}
/* Dialogue layer: generic top/side variables make this reusable for other stories. */
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueOverlay{
  position:absolute !important;
  inset:10px 12px !important;
  display:block !important;
  pointer-events:none !important;
  z-index:3 !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:var(--story-intro-dialogue-top, 50%) !important;
  transform:translateY(var(--story-intro-dialogue-shift, -50%)) !important;
  width:100% !important;
  height:auto !important;
  max-height:calc(100% - 20px) !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  gap:8px !important;
  padding:0 !important;
  overflow:visible !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble{
  width:auto !important;
  max-width:min(var(--story-intro-stack-width, 34%), 520px) !important;
  padding:10px 12px !important;
  border-radius:13px !important;
  background:rgba(246,233,196,.93) !important;
  border:1px solid rgba(122,70,20,.30) !important;
  box-shadow:0 9px 20px rgba(0,0,0,.20) !important;
  pointer-events:auto !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble.left{
  align-self:flex-start !important;
  margin:0 0 0 var(--story-intro-left-inset, 0%) !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueSide-right .storyIntroDialogueStack .posterBubble.left{
  align-self:flex-end !important;
  margin:0 var(--story-intro-left-inset, 0%) 0 0 !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble.hero{
  align-self:flex-end !important;
  margin:0 var(--story-intro-hero-inset, 0%) 0 0 !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubbleSpeaker{
  font-size:clamp(9px, .62vw, 13px) !important;
  letter-spacing:.06em !important;
  margin-bottom:2px !important;
  line-height:1 !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubbleBody{
  font-size:clamp(14px, 1.02vw, 20px) !important;
  line-height:1.13 !important;
}
/* Scene-specific polish: keep bubbles off faces / IV pole while preserving full art. */
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_01 .posterBubble,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_02 .posterBubble,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_03 .posterBubble{
  padding:10px 13px !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_04 .posterBubble,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_05 .posterBubble,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_06 .posterBubble{
  padding:11px 14px !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_04 .posterBubbleBody,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_05 .posterBubbleBody,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_06 .posterBubbleBody{
  font-size:clamp(15px, 1.06vw, 21px) !important;
}
@media (max-width: 1200px){
  .modal.dialoguePosterModal.storyIntroModal .storyIntroHeroShell{
    grid-template-columns:clamp(92px, 10vw, 136px) minmax(0, 1fr) clamp(92px, 10vw, 136px) !important;
    gap:7px !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble{
    max-width:min(40%, 420px) !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubbleBody{
    font-size:clamp(13px, 1.15vw, 18px) !important;
  }
}
/* iPad / small laptop: keep the image large, allow vertical scroll if controls need space. */
@media (max-width: 900px), (max-height: 690px){
  .modal.dialoguePosterModal.storyIntroModal{
    align-items:flex-start !important;
    justify-content:center !important;
    padding:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .modalBox{
    width:100vw !important;
    max-width:100vw !important;
    height:auto !important;
    min-height:100dvh !important;
    max-height:none !important;
    overflow:visible !important;
    border-radius:0 !important;
    padding:8px !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .modalGrid,
  .modal.dialoguePosterModal.storyIntroModal #modalContent{
    height:auto !important;
    overflow:visible !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster{
    height:auto !important;
    min-height:100dvh !important;
    overflow:visible !important;
    grid-template-rows:auto auto !important;
    padding:8px !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroHeroShell{
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:clamp(390px, 66dvh, 760px) auto !important;
    gap:8px !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroMainScene{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroLeftPane{
    grid-column:1 !important;
    grid-row:2 !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroRightPane{
    grid-column:2 !important;
    grid-row:2 !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroFooterPrompt{
    display:none !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroSideActions{
    flex-direction:row !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble{
    max-width:min(58%, 520px) !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubbleBody{
    font-size:clamp(13px, 2.15vw, 18px) !important;
  }
}
/* Phones: scroll naturally and stack controls under a still-dominant image. */
@media (max-width: 560px){
  .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterTitle{
    font-size:clamp(24px, 9vw, 38px) !important;
    max-height:none !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroHeroShell{
    grid-template-columns:1fr !important;
    grid-template-rows:clamp(330px, 58dvh, 560px) auto auto !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroMainScene{
    grid-column:1 !important;
    grid-row:1 !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroLeftPane{
    grid-column:1 !important;
    grid-row:2 !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroRightPane{
    grid-column:1 !important;
    grid-row:3 !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard{
    flex-direction:row !important;
    justify-content:flex-start !important;
    text-align:left !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterName,
  .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterRole{
    text-align:left !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterPortrait{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    min-height:54px !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack{
    gap:6px !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble{
    max-width:72% !important;
    padding:8px 9px !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubbleBody{
    font-size:clamp(12px, 3.4vw, 16px) !important;
  }
}


/* Story 5 intro v7 — scroll + controls safety patch.
   Keeps the v6 split-speaker layout, but prevents clipped buttons and makes the
   modal scroll naturally on short screens while keeping the main art dominant. */
.modal.dialoguePosterModal.storyIntroModal{
  align-items:flex-start !important;
  justify-content:center !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:8px !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
}
.modal.dialoguePosterModal.storyIntroModal .modalBox{
  height:auto !important;
  min-height:min(96dvh, 1060px) !important;
  max-height:none !important;
  overflow:visible !important;
  padding:8px 10px 12px !important;
}
.modal.dialoguePosterModal.storyIntroModal .modalGrid,
.modal.dialoguePosterModal.storyIntroModal #modalContent{
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
}
.modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster{
  height:auto !important;
  min-height:calc(96dvh - 16px) !important;
  overflow:visible !important;
  grid-template-rows:auto minmax(0, 1fr) !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroHeroShell{
  height:clamp(560px, 78dvh, 880px) !important;
  min-height:0 !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSidePane{
  overflow:visible !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSideActions{
  margin-top:auto !important;
  padding-bottom:4px !important;
  position:relative !important;
  z-index:6 !important;
}
.modal.dialoguePosterModal.storyIntroModal .posterPrimaryBtn,
.modal.dialoguePosterModal.storyIntroModal .posterSecondaryBtn{
  min-height:42px !important;
  flex:0 0 auto !important;
}
/* Make the profile crop robust and face-focused. */
.modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterPortrait img{
  object-fit:cover !important;
  object-position:center 18% !important;
  background:linear-gradient(180deg,#0b1222,#0f172a) !important;
}
/* Keep guide/visitor bubbles on distinct sides, even when side layout changes. */
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble.left{
  align-self:flex-start !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble.hero{
  align-self:flex-end !important;
}
/* Scene 1–3: keep the conversation lower and off Sinbad's face/IV pole. */
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_01 .storyIntroDialogueStack,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_02 .storyIntroDialogueStack,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_03 .storyIntroDialogueStack{
  top:var(--story-intro-dialogue-top, 61%) !important;
}
/* Scene 4: keep the Egyptian history captions high but readable. */
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_04 .storyIntroDialogueStack{
  top:var(--story-intro-dialogue-top, 22%) !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_04 .posterBubble{
  padding:12px 15px !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_04 .posterBubbleBody{
  font-size:clamp(15px, 1.12vw, 22px) !important;
}
/* Short desktop / laptop: do not crop controls; allow scroll and reduce main stage just enough. */
@media (max-height: 860px){
  .modal.dialoguePosterModal.storyIntroModal .modalBox{
    min-height:auto !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster{
    min-height:auto !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroHeroShell{
    height:clamp(500px, 74dvh, 760px) !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .posterTitle{
    font-size:clamp(27px, 2.65vw, 50px) !important;
  }
}
/* Tablet and phone: true vertical scroll, main image first, controls below. */
@media (max-width: 900px), (max-height: 690px){
  .modal.dialoguePosterModal.storyIntroModal{
    padding:0 !important;
    overflow-y:auto !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .modalBox{
    width:100vw !important;
    max-width:100vw !important;
    min-height:100dvh !important;
    padding:8px !important;
    overflow:visible !important;
    border-radius:0 !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster{
    min-height:100dvh !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroHeroShell{
    height:auto !important;
    grid-template-rows:clamp(390px, 68dvh, 760px) auto !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroSideActions{
    padding-bottom:8px !important;
  }
}
@media (max-width: 560px){
  .modal.dialoguePosterModal.storyIntroModal .storyIntroHeroShell{
    grid-template-rows:clamp(330px, 62dvh, 560px) auto auto !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroSideActions{
    flex-direction:row !important;
  }
}

/* Story 5 intro v8 — compact header + history caption safe zone.
   Fixes the hidden grid ornament gap, shrinks the cinematic title row,
   and starts historical captions from the middle/right of the image so
   faces and main people stay visible. */
.modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster > .posterOrnament,
.modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster > .posterOrnament.top{
  display:none !important;
  width:0 !important;
  height:0 !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
}
.modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster{
  grid-template-rows:auto minmax(0, 1fr) !important;
  gap:6px !important;
  padding-top:6px !important;
}
.modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterTitleBlock{
  grid-row:1 !important;
  margin:0 !important;
  padding:0 42px 5px !important;
  min-height:0 !important;
  border-bottom:1px solid rgba(211,169,88,.18) !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroHeroShell{
  grid-row:2 !important;
}
.modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterTitle{
  padding:0 14px 2px !important;
  min-width:auto !important;
  max-width:calc(100% - 92px) !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  font-size:clamp(24px, 2.38vw, 46px) !important;
  line-height:.90 !important;
  letter-spacing:.035em !important;
  max-height:1.88em !important;
  overflow:hidden !important;
}
.modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterSubtitle{
  margin-top:0 !important;
  font-size:clamp(10px, .68vw, 14px) !important;
  line-height:1 !important;
  letter-spacing:.14em !important;
}
/* Historical-title rows are intentionally calmer so the art stays dominant. */
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_04 .posterTitle,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_05 .posterTitle,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_06 .posterTitle{
  font-size:clamp(23px, 2.18vw, 42px) !important;
  line-height:.92 !important;
  max-height:1.85em !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_04 .posterSubtitle,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_05 .posterSubtitle,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_06 .posterSubtitle{
  font-size:clamp(9px, .62vw, 13px) !important;
}
/* With the title row compact, give the picture the recovered vertical space. */
.modal.dialoguePosterModal.storyIntroModal .storyIntroHeroShell{
  height:clamp(610px, 84dvh, 940px) !important;
}
@media (max-height: 860px){
  .modal.dialoguePosterModal.storyIntroModal .storyIntroHeroShell{
    height:clamp(540px, 79dvh, 820px) !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterTitle{
    font-size:clamp(23px, 2.22vw, 42px) !important;
  }
}
/* Historical scenes: start captions around the middle of the image and keep them away from faces. */
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_04 .storyIntroDialogueStack,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_05 .storyIntroDialogueStack,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_06 .storyIntroDialogueStack{
  top:var(--story-intro-dialogue-top, 46%) !important;
  transform:translateY(0) !important;
  gap:7px !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_04 .storyIntroDialogueStack .posterBubble,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_05 .storyIntroDialogueStack .posterBubble,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_06 .storyIntroDialogueStack .posterBubble{
  max-width:min(var(--story-intro-stack-width, 48%), 760px) !important;
  padding:10px 13px !important;
  background:rgba(246,233,196,.94) !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_04 .storyIntroDialogueStack .posterBubble.left,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_06 .storyIntroDialogueStack .posterBubble.left{
  margin-left:var(--story-intro-left-inset, 34%) !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_05.storyIntroDialogueSide-right .storyIntroDialogueStack .posterBubble.left{
  margin-right:var(--story-intro-left-inset, 3%) !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_04 .storyIntroDialogueStack .posterBubbleBody,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_05 .storyIntroDialogueStack .posterBubbleBody,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_06 .storyIntroDialogueStack .posterBubbleBody{
  font-size:clamp(14px, .96vw, 19px) !important;
  line-height:1.12 !important;
}
/* Tablet/phone: keep a real scroll, compact header, captions readable. */
@media (max-width: 900px), (max-height: 690px){
  .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterTitleBlock{
    padding:0 34px 5px !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterTitle{
    font-size:clamp(23px, 5vw, 38px) !important;
    max-width:calc(100% - 76px) !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroHeroShell{
    grid-template-rows:clamp(430px, 73dvh, 820px) auto !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_04 .storyIntroDialogueStack .posterBubble,
  .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_05 .storyIntroDialogueStack .posterBubble,
  .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_06 .storyIntroDialogueStack .posterBubble{
    max-width:70% !important;
  }
}
@media (max-width: 560px){
  .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterTitle{
    font-size:clamp(22px, 7.6vw, 34px) !important;
    line-height:.96 !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterSubtitle{
    font-size:10px !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroHeroShell{
    grid-template-rows:clamp(360px, 62dvh, 620px) auto auto !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_04 .storyIntroDialogueStack,
  .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_05 .storyIntroDialogueStack,
  .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_06 .storyIntroDialogueStack{
    top:42% !important;
  }
  .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_04 .storyIntroDialogueStack .posterBubble,
  .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_05 .storyIntroDialogueStack .posterBubble,
  .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_06 .storyIntroDialogueStack .posterBubble{
    max-width:76% !important;
  }
}

/* Story 5 intro v9 — phone-only layout cleanup.
   Desktop and iPad rules above are intentionally untouched.  Phones get:
   - natural vertical scrolling,
   - main image at its real aspect ratio (no huge black letterbox),
   - compact guide/visitor cards below the image,
   - buttons in a clean bottom row,
   - smaller dialogue bubbles that preserve the existing left/right speaker logic. */
@media (max-width: 600px){
  html body .modal.dialoguePosterModal.storyIntroModal{
    position:fixed !important;
    inset:0 !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    padding:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .modalBox{
    width:100vw !important;
    max-width:100vw !important;
    height:auto !important;
    min-height:100dvh !important;
    max-height:none !important;
    margin:0 !important;
    padding:8px 8px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius:0 !important;
    overflow:visible !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .modalGrid,
  html body .modal.dialoguePosterModal.storyIntroModal #modalContent{
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster{
    height:auto !important;
    min-height:calc(100dvh - 16px) !important;
    display:grid !important;
    grid-template-rows:auto auto !important;
    gap:8px !important;
    padding:8px !important;
    overflow:visible !important;
    border-radius:16px !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterTitleBlock{
    padding:0 44px 6px 8px !important;
    margin:0 !important;
    border-bottom:1px solid rgba(211,169,88,.22) !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterTitle{
    max-width:100% !important;
    max-height:none !important;
    padding:0 !important;
    font-size:clamp(22px, 7.1vw, 32px) !important;
    line-height:.92 !important;
    letter-spacing:.025em !important;
    text-wrap:balance !important;
    overflow:visible !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterSubtitle{
    margin-top:2px !important;
    font-size:10px !important;
    line-height:1.05 !important;
    letter-spacing:.12em !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroHeroShell{
    height:auto !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows:auto auto auto !important;
    grid-template-areas:
      "stage stage"
      "guide visitor"
      "actions actions" !important;
    gap:8px !important;
    align-items:start !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroMainScene{
    grid-area:stage !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    border-radius:14px !important;
    overflow:hidden !important;
    background:rgba(3,7,18,.96) !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroMainScene img.storyIntroMainImg{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    display:block !important;
  }

  /* Make the side panes behave like grid wrappers so buttons can sit in their own full-width row. */
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroLeftPane,
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroRightPane{
    display:contents !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard.left{
    grid-area:guide !important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard.right{
    grid-area:visitor !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard{
    width:100% !important;
    min-width:0 !important;
    min-height:72px !important;
    display:grid !important;
    grid-template-columns:50px minmax(0, 1fr) !important;
    grid-template-areas:
      "tag tag"
      "portrait name"
      "portrait role" !important;
    gap:4px 8px !important;
    align-items:center !important;
    padding:7px !important;
    border-radius:13px !important;
    text-align:left !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterRoleTag{
    grid-area:tag !important;
    justify-self:start !important;
    align-self:start !important;
    margin:0 !important;
    padding:3px 7px !important;
    font-size:8px !important;
    line-height:1 !important;
    letter-spacing:.08em !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterPortrait{
    grid-area:portrait !important;
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    min-height:50px !important;
    margin:0 !important;
    border-radius:12px !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterPortrait img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 18% !important;
    transform:none !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterName{
    grid-area:name !important;
    margin:0 !important;
    text-align:left !important;
    font-size:clamp(17px, 5.3vw, 23px) !important;
    line-height:.92 !important;
    overflow-wrap:anywhere !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterRole{
    grid-area:role !important;
    margin:0 !important;
    text-align:left !important;
    font-size:8.5px !important;
    line-height:1.15 !important;
    letter-spacing:.04em !important;
    overflow-wrap:anywhere !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroFooterPrompt{
    display:none !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSideActions{
    grid-area:actions !important;
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin:0 !important;
    padding:0 0 max(8px, env(safe-area-inset-bottom, 0px)) !important;
    position:relative !important;
    z-index:8 !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .posterPrimaryBtn,
  html body .modal.dialoguePosterModal.storyIntroModal .posterSecondaryBtn{
    width:100% !important;
    min-height:48px !important;
    padding:10px 8px !important;
    border-radius:14px !important;
    font-size:13px !important;
    line-height:1.1 !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueOverlay{
    inset:8px !important;
    pointer-events:none !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack{
    top:var(--story-intro-dialogue-top, 48%) !important;
    transform:translateY(var(--story-intro-dialogue-shift, 0%)) !important;
    gap:6px !important;
    max-height:calc(100% - 16px) !important;
    overflow:visible !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble{
    max-width:82% !important;
    padding:7px 9px !important;
    border-radius:12px !important;
    background:rgba(246,233,196,.94) !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubbleSpeaker{
    font-size:9px !important;
    line-height:1 !important;
    margin-bottom:2px !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubbleBody{
    font-size:clamp(13px, 3.8vw, 17px) !important;
    line-height:1.13 !important;
  }

  /* Phone scene-specific positions: preserve the good desktop/iPad composition, but avoid huge phone bubbles. */
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_01 .storyIntroDialogueStack,
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_02 .storyIntroDialogueStack{
    top:45% !important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_03 .storyIntroDialogueStack,
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_07 .storyIntroDialogueStack{
    top:42% !important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_04 .storyIntroDialogueStack,
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_05 .storyIntroDialogueStack,
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_06 .storyIntroDialogueStack{
    top:46% !important;
  }

  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble.left{
    align-self:flex-start !important;
    margin-left:0 !important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble.hero{
    align-self:flex-end !important;
    margin-right:0 !important;
  }
}

/* Very narrow phones: stack buttons, keep cards readable, and prevent text overflow. */
@media (max-width: 380px){
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSideActions{
    grid-template-columns:1fr !important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard{
    grid-template-columns:44px minmax(0, 1fr) !important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterPortrait{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble{
    max-width:88% !important;
  }
}

/* Story 5 intro v10 — PHONE-ONLY scroll + in-game layout fixes.
   Desktop and iPad remain unchanged. */
@media (max-width: 600px){
  /* Let long intro dialogue stacks scroll inside the image instead of clipping. */
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueOverlay{
    pointer-events:auto !important;
    touch-action:pan-y !important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack{
    bottom:8px !important;
    height:auto !important;
    max-height:none !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    touch-action:pan-y !important;
    padding-right:3px !important;
    scrollbar-width:thin !important;
    scrollbar-color:rgba(251,191,36,.55) transparent !important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack::-webkit-scrollbar{
    width:4px;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack::-webkit-scrollbar-track{
    background:transparent;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack::-webkit-scrollbar-thumb{
    background:rgba(251,191,36,.45);
    border-radius:999px;
  }

  /* Keep phone intro cards readable without changing tablet/desktop. */
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterName{
    font-size:clamp(15px, 4.7vw, 20px) !important;
    line-height:.96 !important;
    letter-spacing:.01em !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
  }

  /* On phones, show the game canvas first and keep the objective as a compact bottom drawer. */
  html body.inGame{
    overflow:hidden !important;
  }
  html body.inGame .wrap{
    height:100dvh !important;
    min-height:100dvh !important;
    overflow:hidden !important;
    padding:4px !important;
  }
  html body.inGame #game{
    height:100% !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    gap:6px !important;
  }
  html body.inGame .gameGrid,
  html body.inGame .gameGrid.storyDashboard{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(0, 1fr) minmax(92px, 20dvh) !important;
    gap:6px !important;
    overflow:hidden !important;
    align-items:stretch !important;
  }
  html body.inGame .gameShell{
    grid-column:1 !important;
    grid-row:1 !important;
    min-height:0 !important;
    height:100% !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    overflow:hidden !important;
    padding:3px !important;
  }
  html body.inGame #canvas{
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    object-fit:contain !important;
  }
  html body.inGame .side,
  html body.inGame .storySidePanel{
    grid-column:1 !important;
    grid-row:2 !important;
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    min-height:0 !important;
    overflow:hidden !important;
    display:block !important;
    padding:6px !important;
    border-radius:14px !important;
  }
  html body.inGame .storySidePanel h2,
  html body.inGame .storySidePanel > p,
  html body.inGame .storySidePanel .feedback,
  html body.inGame .storySidePanel .nearbyCard,
  html body.inGame .storySidePanel .miniPanel,
  html body.inGame .storySidePanel .btnRow,
  html body.inGame .storySidePanel .sideUtilityRow{
    display:none !important;
  }
  html body.inGame .storySidePanel #objectiveCard.objectiveCard,
  html body.inGame #objectiveCard.objectiveCard{
    display:block !important;
    height:100% !important;
    max-height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:7px 9px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    touch-action:pan-y !important;
  }
  html body.inGame .storySidePanel #objectiveCard.objectiveCard .objectiveStepList,
  html body.inGame #objectiveCard.objectiveCard .objectiveStepList{
    max-height:none !important;
    overflow:visible !important;
  }
}

/* Story 5 v11 — PHONE-ONLY in-game quick tools.
   Keeps PC/iPad unchanged. Shows game/music controls without taking over the canvas. */
@media (max-width: 600px){
  html body.inGame .side,
  html body.inGame .storySidePanel{
    display:grid !important;
    grid-template-rows:minmax(0, 1fr) auto !important;
    gap:6px !important;
  }

  html body.inGame .storySidePanel #objectiveCard.objectiveCard,
  html body.inGame #objectiveCard.objectiveCard{
    grid-row:1 !important;
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    padding-bottom:42px !important;
  }

  /* Bring back the compact player tools on phone: Change game/hero + music. */
  html body.inGame .storySidePanel .sideUtilityRow{
    grid-row:2 !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) auto !important;
    align-items:center !important;
    gap:6px !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    min-height:38px !important;
    position:relative !important;
    z-index:35 !important;
  }

  html body.inGame .storySidePanel .choosePathWide,
  html body.inGame .storySidePanel .sideUtilityRow .choosePathWide{
    display:flex !important;
    min-width:0 !important;
    width:100% !important;
    height:38px !important;
    min-height:38px !important;
    padding:6px 8px !important;
    border-radius:12px !important;
    font-size:11px !important;
    line-height:1 !important;
    justify-content:center !important;
    align-items:center !important;
    gap:6px !important;
    overflow:hidden !important;
  }

  html body.inGame .storySidePanel .choosePathWide .choosePathIcon{
    font-size:15px !important;
    flex:0 0 auto !important;
  }

  html body.inGame .storySidePanel .choosePathWide b{
    display:block !important;
    font-size:11px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  html body.inGame .storySidePanel .choosePathWide small{
    display:none !important;
  }

  html body.inGame .storySidePanel .musicControls,
  html body.inGame .storySidePanel .sideMusicControls{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    width:auto !important;
    min-width:78px !important;
    height:38px !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  html body.inGame .storySidePanel .musicToggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:78px !important;
    min-width:78px !important;
    height:38px !important;
    min-height:38px !important;
    padding:6px 7px !important;
    border-radius:12px !important;
    font-size:11px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  /* Hide the volume slider on very small phones; the main music button remains visible. */
  html body.inGame .storySidePanel .musicVolumeWrap,
  html body.inGame .storySidePanel #musicVolume,
  html body.inGame .storySidePanel #musicVolumeLabel{
    display:none !important;
  }

  /* Keep the floating progress badge from covering the quick tools too much. */
  html body.inGame .progressCompact,
  html body.inGame #progressCompact{
    bottom:calc(48px + env(safe-area-inset-bottom, 0px)) !important;
    transform:translateX(-50%) scale(.82) !important;
    transform-origin:center bottom !important;
    z-index:40 !important;
  }
}

@media (max-width: 380px){
  html body.inGame .storySidePanel .sideUtilityRow{
    grid-template-columns:1fr 72px !important;
  }
  html body.inGame .storySidePanel .musicControls,
  html body.inGame .storySidePanel .sideMusicControls,
  html body.inGame .storySidePanel .musicToggle{
    min-width:72px !important;
    width:72px !important;
    font-size:10px !important;
  }
}

/* Story 1-3 intro v3 — desktop/tablet/phone dialogue scrolling for long scenes.
   Keeps Story 5 untouched. Long conversations now scroll inside the image area
   rather than being clipped at the bottom of the scene. */
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story1_intro_01 .storyIntroDialogueOverlay,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story1_intro_02 .storyIntroDialogueOverlay,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story2_intro_01 .storyIntroDialogueOverlay,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story2_intro_02 .storyIntroDialogueOverlay,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story3_intro_01 .storyIntroDialogueOverlay,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story3_intro_02 .storyIntroDialogueOverlay{
  pointer-events:auto !important;
  touch-action:pan-y !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story1_intro_01 .storyIntroDialogueStack,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story1_intro_02 .storyIntroDialogueStack,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story2_intro_01 .storyIntroDialogueStack,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story2_intro_02 .storyIntroDialogueStack,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story3_intro_01 .storyIntroDialogueStack,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story3_intro_02 .storyIntroDialogueStack{
  max-height:calc(100% - var(--story-intro-dialogue-top, 50%) - 18px) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  touch-action:pan-y !important;
  padding-right:5px !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(251,191,36,.55) transparent !important;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story1_intro_01 .storyIntroDialogueStack::-webkit-scrollbar,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story1_intro_02 .storyIntroDialogueStack::-webkit-scrollbar,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story2_intro_01 .storyIntroDialogueStack::-webkit-scrollbar,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story2_intro_02 .storyIntroDialogueStack::-webkit-scrollbar,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story3_intro_01 .storyIntroDialogueStack::-webkit-scrollbar,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story3_intro_02 .storyIntroDialogueStack::-webkit-scrollbar{
  width:6px;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story1_intro_01 .storyIntroDialogueStack::-webkit-scrollbar-track,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story1_intro_02 .storyIntroDialogueStack::-webkit-scrollbar-track,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story2_intro_01 .storyIntroDialogueStack::-webkit-scrollbar-track,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story2_intro_02 .storyIntroDialogueStack::-webkit-scrollbar-track,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story3_intro_01 .storyIntroDialogueStack::-webkit-scrollbar-track,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story3_intro_02 .storyIntroDialogueStack::-webkit-scrollbar-track{
  background:transparent;
}
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story1_intro_01 .storyIntroDialogueStack::-webkit-scrollbar-thumb,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story1_intro_02 .storyIntroDialogueStack::-webkit-scrollbar-thumb,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story2_intro_01 .storyIntroDialogueStack::-webkit-scrollbar-thumb,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story2_intro_02 .storyIntroDialogueStack::-webkit-scrollbar-thumb,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story3_intro_01 .storyIntroDialogueStack::-webkit-scrollbar-thumb,
.modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story3_intro_02 .storyIntroDialogueStack::-webkit-scrollbar-thumb{
  background:rgba(251,191,36,.48);
  border-radius:999px;
}

@media (max-width: 600px){
  .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story1_intro_01 .storyIntroDialogueStack,
  .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story1_intro_02 .storyIntroDialogueStack,
  .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story2_intro_01 .storyIntroDialogueStack,
  .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story2_intro_02 .storyIntroDialogueStack,
  .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story3_intro_01 .storyIntroDialogueStack,
  .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story3_intro_02 .storyIntroDialogueStack{
    max-height:calc(100% - var(--story-intro-dialogue-top, 50%) - 10px) !important;
    padding-right:3px !important;
  }
}

/* Make all story-intro dialogue boxes 60% transparent */
.dialoguePoster.storyIntroPoster .posterBubble,
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble,
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble.left,
.modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble.hero{
  background:rgba(246, 233, 196, .60) !important;
}


/* STORY1_KEITH_FIXES_V270_CSS */
.modal.lessonModal.oceanLessonModal .lessonTabsNumbered{
  position:sticky!important;
  top:0!important;
  z-index:70!important;
  box-shadow:0 12px 24px rgba(2,8,23,.18)!important;
}
.modal.lessonModal.oceanLessonModal .lessonTabNumbered,
.modal.lessonModal.oceanLessonModal .lessonTabsNumbered .lessonTab{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
}
.modal.lessonModal.oceanLessonModal .lessonTabNum{
  display:inline-grid!important;
  place-items:center!important;
  min-width:20px!important;
  height:20px!important;
  padding:0 6px!important;
  border-radius:999px!important;
  background:rgba(255,244,196,.16)!important;
  border:1px solid rgba(255,244,196,.34)!important;
  color:#fff0bf!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:950!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1StickyStoryDeck{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  max-height:calc(92vh - 188px)!important;
  min-height:min(560px, calc(92vh - 188px))!important;
  overflow:hidden!important;
  padding-bottom:0!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1StickyStoryDeck #scaffoldSlide{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
  padding-right:8px!important;
  padding-bottom:36px!important;
  scroll-padding-bottom:96px!important;
}
.modal.lessonModal.oceanLessonModal .storyScrollHint{
  flex:0 0 auto!important;
  margin:4px 0 10px!important;
  padding:8px 12px!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,rgba(255,250,224,.98),rgba(255,235,170,.96))!important;
  border:1px solid rgba(245,158,11,.52)!important;
  color:#78350f!important;
  font-size:12px!important;
  font-weight:950!important;
  text-align:center!important;
  box-shadow:0 8px 18px rgba(2,8,23,.16)!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck.story1StickyStoryDeck.storyHasOverflow::after{
  content:''!important;
  position:absolute!important;
  left:12px!important;
  right:12px!important;
  bottom:76px!important;
  height:30px!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,rgba(3,13,30,0),rgba(3,13,30,.64))!important;
  z-index:58!important;
}
.modal.lessonModal.oceanLessonModal .scaffoldControlsSticky{
  flex:0 0 auto!important;
  position:relative!important;
  z-index:80!important;
  display:grid!important;
  grid-template-columns:minmax(120px,1fr) auto minmax(120px,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  margin:12px -1px 0!important;
  padding:12px 14px!important;
  border-radius:0 0 20px 20px!important;
  background:linear-gradient(180deg,rgba(8,26,54,.98),rgba(3,13,30,.99))!important;
  border-top:1px solid rgba(245,211,111,.62)!important;
  box-shadow:0 -12px 30px rgba(2,8,23,.38), inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.modal.lessonModal.oceanLessonModal .scaffoldControlsSticky .btn{
  width:100%!important;
  min-height:44px!important;
  white-space:normal!important;
}
.modal.lessonModal.oceanLessonModal .scaffoldStepStatus{
  min-width:96px!important;
  padding:8px 12px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(248,217,121,.42)!important;
  color:#fff0bf!important;
  font-size:12px!important;
  font-weight:950!important;
  text-align:center!important;
  white-space:nowrap!important;
}
.modal.lessonModal.oceanLessonModal .scaffoldControlsSticky .btn.disabled,
.modal.lessonModal.oceanLessonModal .scaffoldControlsSticky .btn:disabled{
  opacity:.52!important;
  cursor:not-allowed!important;
  filter:saturate(.70)!important;
}
@media (max-height:760px){
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.story1StickyStoryDeck{
    max-height:calc(94vh - 160px)!important;
    min-height:380px!important;
  }
}
@media (max-width:780px){
  .modal.lessonModal.oceanLessonModal .stepStoryDeck.story1StickyStoryDeck{
    max-height:calc(94vh - 148px)!important;
    min-height:360px!important;
  }
  .modal.lessonModal.oceanLessonModal .scaffoldControlsSticky{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .modal.lessonModal.oceanLessonModal .scaffoldStepStatus{
    order:-1!important;
    width:100%!important;
  }
}
/* V2.72 Story 1 pre/post survey gate */
body.surveyLocked{
  overflow:hidden;
}
.surveyOverlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(14px,3vw,34px);
  background:radial-gradient(circle at 50% 0%, rgba(37,99,235,.22), transparent 35%), rgba(3,7,18,.74);
  backdrop-filter:blur(10px);
}
.surveyOverlay.isOpen{
  display:flex;
}
.surveyCard{
  width:min(980px, 100%);
  max-height:min(92vh, 980px);
  overflow:hidden;
  background:linear-gradient(180deg,#fffaf0 0%,#fff7ed 58%,#fffbeb 100%);
  border:2px solid rgba(245,158,11,.72);
  border-radius:28px;
  box-shadow:0 30px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.84);
  color:#1f2937;
}
.surveyForm{
  display:flex;
  flex-direction:column;
  max-height:min(92vh, 980px);
}
.surveyHeader{
  padding:24px 28px 18px;
  border-bottom:1px solid rgba(146,64,14,.18);
  background:linear-gradient(135deg,rgba(255,251,235,.98),rgba(219,234,254,.58));
}
.surveyEyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  padding:6px 11px;
  border-radius:999px;
  background:#1e3a8a;
  color:#fff7ed;
  font-size:12px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.surveyHeader h2,
.surveyComplete h2,
.surveyLoading h2{
  margin:0 0 8px;
  font-size:clamp(26px,4vw,42px);
  color:#111827;
  line-height:1.05;
}
.surveyHeader p,
.surveyComplete p,
.surveyLoading p{
  margin:0;
  color:#475569;
  font-size:16px;
  line-height:1.55;
}
.surveyBody{
  padding:20px 28px 18px;
  overflow:auto;
  overscroll-behavior:contain;
}
.surveySection{
  margin:0 0 20px;
  padding:18px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(180,83,9,.18);
  border-radius:22px;
  box-shadow:0 10px 26px rgba(15,23,42,.07);
}
.surveySectionHeader{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:14px;
}
.surveySectionNumber{
  flex:0 0 auto;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#1d4ed8;
  color:white;
  font-weight:950;
}
.surveySection h3{
  margin:0 0 4px;
  color:#111827;
  font-size:20px;
}
.surveySection p{
  margin:0;
  color:#64748b;
  line-height:1.45;
}
.surveyQuestionList{
  display:grid;
  gap:14px;
}
.surveyQuestion{
  display:block;
  padding:14px;
  border-radius:18px;
  background:rgba(255,247,237,.72);
  border:1px solid rgba(203,213,225,.8);
}
.surveyQuestion.surveyInvalid{
  border-color:#dc2626;
  box-shadow:0 0 0 3px rgba(220,38,38,.12);
}
.surveyQuestionLabel,
.surveyQuestionText > span{
  display:block;
  margin-bottom:9px;
  color:#1f2937;
  font-weight:850;
  line-height:1.35;
}
.surveyQuestion input[type="text"],
.surveyQuestion input[type="email"],
.surveyQuestion select,
.surveyQuestion textarea{
  width:100%;
  border:1px solid rgba(100,116,139,.55);
  border-radius:14px;
  background:white;
  color:#111827;
  padding:12px 13px;
  font:inherit;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.05);
}
.surveyQuestion textarea{
  resize:vertical;
  min-height:88px;
}
.surveyLikertScale{
  display:grid;
  grid-template-columns:minmax(94px,1fr) auto minmax(94px,1fr);
  gap:12px;
  align-items:center;
}
.surveyLikertScale > span{
  color:#64748b;
  font-size:13px;
  font-weight:800;
}
.surveyLikertScale > span:last-child{
  text-align:right;
}
.surveyLikertOptions{
  display:flex;
  gap:8px;
  justify-content:center;
}
.surveyLikertOption{
  cursor:pointer;
}
.surveyLikertOption input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.surveyLikertOption span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(100,116,139,.5);
  background:white;
  color:#334155;
  font-weight:950;
  transition:transform .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}
.surveyLikertOption input:focus-visible + span{
  outline:3px solid rgba(37,99,235,.35);
  outline-offset:2px;
}
.surveyLikertOption input:checked + span{
  background:#1d4ed8;
  border-color:#1d4ed8;
  color:#fff;
  transform:translateY(-1px);
}
.surveyRadioList{
  display:grid;
  gap:8px;
}
.surveyRadioOption{
  display:flex;
  gap:9px;
  align-items:center;
  padding:10px 12px;
  border:1px solid rgba(100,116,139,.35);
  border-radius:14px;
  background:white;
  cursor:pointer;
}
.surveyRequired{
  color:#dc2626;
  font-weight:950;
}
.surveyFooter{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px 16px;
  align-items:center;
  padding:16px 28px 20px;
  border-top:1px solid rgba(146,64,14,.18);
  background:linear-gradient(180deg,rgba(255,251,235,.96),rgba(254,243,199,.96));
}
.surveyFootnote{
  color:#64748b;
  font-size:13px;
  font-weight:700;
}
.surveyStatusText{
  grid-column:1 / -1;
  min-height:20px;
  color:#92400e;
  font-size:14px;
  font-weight:850;
}
.surveySubmitBtn{
  min-width:190px;
}
.surveyComplete,
.surveyLoading{
  padding:42px 34px;
  text-align:center;
}
.surveyCompleteIcon{
  width:74px;
  height:74px;
  margin:0 auto 18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#16a34a;
  color:white;
  font-size:40px;
  font-weight:950;
  box-shadow:0 16px 30px rgba(22,163,74,.28);
}
.surveyContinueBtn{
  margin-top:20px;
  min-width:180px;
}

.surveyErrorCard .surveyCompleteIcon{
  background:#dc2626;
  box-shadow:0 16px 30px rgba(220,38,38,.24);
}
.surveyErrorActions{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:20px;
  flex-wrap:wrap;
}
.surveySpinner{
  width:58px;
  height:58px;
  margin:0 auto 18px;
  border-radius:50%;
  border:6px solid rgba(37,99,235,.18);
  border-top-color:#1d4ed8;
  animation:surveySpin .9s linear infinite;
}
@keyframes surveySpin{to{transform:rotate(360deg)}}
@media(max-width:760px){
  .surveyOverlay{padding:8px;align-items:stretch;}
  .surveyCard{max-height:calc(100vh - 16px);border-radius:22px;}
  .surveyForm{max-height:calc(100vh - 16px);}
  .surveyHeader,.surveyBody,.surveyFooter{padding-left:16px;padding-right:16px;}
  .surveyLikertScale{grid-template-columns:1fr;gap:8px;}
  .surveyLikertScale > span{text-align:center!important;}
  .surveyLikertOptions{gap:6px;}
  .surveyLikertOption span{width:38px;height:38px;}
  .surveyFooter{grid-template-columns:1fr;}
  .surveySubmitBtn{width:100%;}
}

/* STORY_REVIEW_MODE_V1 */
.reviewModeBanner{
  margin:12px 0 14px;
  padding:12px 14px;
  border:1px solid rgba(37,99,235,.28);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(239,246,255,.96),rgba(219,234,254,.92));
  color:#1e3a8a;
  box-shadow:0 10px 22px rgba(37,99,235,.12);
}
.reviewModeBanner b{
  display:block;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.reviewModeBanner span{
  display:block;
  font-size:13px;
  line-height:1.35;
  font-weight:750;
}
body.storyReviewMode .hud .box:first-child,
#game.reviewMode .objectiveCard{
  outline:2px solid rgba(37,99,235,.22);
  outline-offset:2px;
}
.frontierStartBtn.reviewReady{
  background:linear-gradient(135deg,#2563eb,#7c3aed)!important;
  box-shadow:0 16px 32px rgba(37,99,235,.26);
}
.frontierStartBtn.continueReady{
  background:linear-gradient(135deg,#0891b2,#2563eb)!important;
}
@media(max-width:760px){
  .reviewModeBanner{margin:10px 0;padding:10px 12px;border-radius:14px;}
}

/* STORY1_PLATFORM_QA_V1
   Device-isolated polish from the Story 1 platform QA pass:
   - phone-only landscape nudge,
   - contextual touch action labels instead of a bare E button,
   - compact phone menu that moves nonessential controls out of the play area,
   - stronger touch selection affordances without changing desktop layout. */
.orientationPrompt{
  display:none;
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  z-index:1250;
  pointer-events:none;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(15,23,42,.88);
  color:#fff7ed;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 12px 28px rgba(15,23,42,.28);
  font-size:13px;
  font-weight:950;
  letter-spacing:.01em;
  white-space:nowrap;
}
.mobileUtilityMenu{
  display:none;
  margin-top:10px;
  border:1px solid rgba(37,99,235,.22);
  border-radius:16px;
  background:linear-gradient(180deg,#eff6ff,#ffffff);
  overflow:hidden;
}
.mobileUtilityMenu summary{
  cursor:pointer;
  list-style:none;
  padding:10px 12px;
  font-weight:1000;
  color:#1e3a8a;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  touch-action:manipulation;
}
.mobileUtilityMenu summary::-webkit-details-marker{display:none;}
.mobileUtilityMenu summary::after{content:'▾';font-weight:1000;transition:transform .18s ease;}
.mobileUtilityMenu[open] summary::after{transform:rotate(180deg);}
.mobileUtilityTray{
  display:grid;
  gap:8px;
  padding:0 10px 10px;
}
.mobileInteract{
  min-width:86px!important;
  width:auto!important;
  padding:9px 12px!important;
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
  gap:1px!important;
  line-height:1!important;
}
.mobileInteractLabel{
  display:block;
  max-width:78px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  font-weight:1000;
  letter-spacing:.01em;
}
.mobileInteractKey{
  display:block;
  font-size:10px;
  line-height:1;
  opacity:.72;
  font-weight:1000;
  letter-spacing:.08em;
}
body.hasTouchControls.inGame .mobileInteract[data-ready="true"]{
  box-shadow:0 14px 30px rgba(22,163,74,.30), inset 0 0 0 2px rgba(255,255,255,.22)!important;
}
body.hasTouchControls.inGame .mobileInteract.active{
  filter:brightness(1.22)!important;
  transform:translateY(1px)!important;
}
@media (hover:hover) and (pointer:fine){
  body:not(.hasTouchControls).inGame .mobileControls{display:none!important;}
}
@media (max-width:700px) and (orientation:portrait){
  body.hasTouchControls.inGame .orientationPrompt{display:flex!important;}
  body.hasTouchControls.inGame .gameShell{padding-top:38px!important;}
}
@media (max-width:760px){
  body.phoneCompactControls.inGame .mobileUtilityMenu{display:block!important;}
  body.phoneCompactControls.inGame .storySidePanel .miniPanel{display:none!important;}
  body.phoneCompactControls.inGame .mobileUtilityTray .btnRow,
  body.phoneCompactControls.inGame .mobileUtilityTray .sideUtilityRow{
    margin:0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  body.phoneCompactControls.inGame .mobileUtilityTray .btn,
  body.phoneCompactControls.inGame .mobileUtilityTray .musicToggle{
    width:100%!important;
    min-height:40px!important;
    padding:9px 10px!important;
    border-radius:13px!important;
    font-size:12px!important;
    line-height:1.1!important;
  }
  body.phoneCompactControls.inGame .mobileUtilityTray #talk{display:none!important;}
  body.phoneCompactControls.inGame .mobileUtilityTray .choosePathWide{
    grid-column:1 / -1!important;
    min-height:44px!important;
  }
  body.phoneCompactControls.inGame .mobileUtilityTray .sideMusicControls{
    grid-column:1 / -1!important;
    display:grid!important;
    grid-template-columns:1fr minmax(120px,1fr)!important;
    gap:7px!important;
    align-items:center!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body.phoneCompactControls.inGame .mobileUtilityTray .musicVolumeWrap{
    min-height:40px!important;
    padding:6px 8px!important;
    border-radius:13px!important;
  }
  body.phoneCompactControls.inGame .objectiveCard,
  body.phoneCompactControls.inGame .nearbyCard{
    margin-top:8px!important;
    padding:10px 12px!important;
  }
  body.phoneCompactControls.inGame .objectiveCard .name,
  body.phoneCompactControls.inGame .nearbyCard .name{font-size:16px!important;}
  body.phoneCompactControls.inGame .objectiveCard .desc,
  body.phoneCompactControls.inGame .nearbyCard .desc{font-size:13px!important;line-height:1.28!important;}
}
@media (max-width:430px){
  body.hasTouchControls.inGame .mobileInteract{
    min-width:78px!important;
    padding-inline:9px!important;
  }
  body.hasTouchControls.inGame .mobileInteractLabel{font-size:12px;max-width:70px;}
  body.hasTouchControls.inGame .mobileInteractKey{font-size:9px;}
}
body.hasTouchControls.frontierMenuMode .frontierStoryCard.active,
body.hasTouchControls.frontierMenuMode .frontierHeroCard.active{
  outline:3px solid rgba(37,99,235,.70)!important;
  outline-offset:3px!important;
  box-shadow:0 14px 34px rgba(37,99,235,.22)!important;
}
body.hasTouchControls.frontierMenuMode .frontierStoryCard.active::after,
body.hasTouchControls.frontierMenuMode .frontierHeroCard.active::after{
  content:'Selected';
  position:absolute;
  top:8px;
  right:8px;
  z-index:4;
  padding:4px 8px;
  border-radius:999px;
  background:#1d4ed8;
  color:#fff;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.05em;
  text-transform:uppercase;
}
body.hasTouchControls.frontierMenuMode .frontierStoryCard.active,
body.hasTouchControls.frontierMenuMode .frontierHeroCard.active{
  position:relative!important;
}

.mobileActionStack{display:contents;}
.mobileMenuToggle{display:none;}

/* PHONE_UI_ORGANIZATION_V1
   Phone-only fixes for survey + gameplay chrome.
   Scope is intentionally limited to small touch phones:
   - portrait phones: <= 600px wide
   - landscape phones: <= 950px wide and <= 560px tall
   This avoids changing desktop and full-size iPad layouts. */
@media (hover:none) and (pointer:coarse) and (max-width:600px),
       (hover:none) and (pointer:coarse) and (max-width:950px) and (max-height:560px){
  body.surveyLocked{
    overflow:hidden!important;
    position:fixed!important;
    inset:0!important;
    width:100%!important;
  }
  .surveyOverlay{
    padding:calc(6px + env(safe-area-inset-top, 0px)) calc(6px + env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) calc(6px + env(safe-area-inset-left, 0px))!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .surveyCard{
    width:min(100%, 720px)!important;
    max-height:calc(100svh - 14px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))!important;
    border-radius:18px!important;
    display:flex!important;
    overflow:hidden!important;
  }
  .surveyForm{
    width:100%!important;
    max-height:none!important;
    height:auto!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    overflow:hidden!important;
  }
  .surveyHeader{
    padding:clamp(12px, 3.4vw, 18px) clamp(14px, 4vw, 22px) clamp(10px, 2.8vw, 14px)!important;
  }
  .surveyEyebrow{
    margin-bottom:7px!important;
    padding:5px 10px!important;
    font-size:clamp(10px, 2.9vw, 12px)!important;
    line-height:1.05!important;
    letter-spacing:.08em!important;
  }
  .surveyHeader h2,
  .surveyComplete h2,
  .surveyLoading h2{
    font-size:clamp(24px, 8.8vw, 34px)!important;
    line-height:1.02!important;
    margin-bottom:8px!important;
  }
  .surveyHeader p,
  .surveyComplete p,
  .surveyLoading p{
    font-size:clamp(14px, 4.3vw, 16px)!important;
    line-height:1.38!important;
  }
  .surveyBody{
    min-height:0!important;
    padding:12px 14px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    scrollbar-gutter:stable!important;
  }
  .surveySection{
    padding:12px!important;
    margin-bottom:12px!important;
    border-radius:16px!important;
  }
  .surveySectionHeader{
    gap:9px!important;
    margin-bottom:10px!important;
  }
  .surveySectionNumber{
    width:26px!important;
    height:26px!important;
    font-size:12px!important;
  }
  .surveySection h3{
    font-size:clamp(17px, 5.2vw, 21px)!important;
    line-height:1.1!important;
  }
  .surveySection p{
    font-size:13px!important;
    line-height:1.3!important;
  }
  .surveyQuestionList{
    gap:10px!important;
  }
  .surveyQuestion{
    padding:11px!important;
    border-radius:15px!important;
  }
  .surveyQuestionLabel,
  .surveyQuestionText > span{
    margin-bottom:7px!important;
    font-size:clamp(14px, 4.2vw, 16px)!important;
    line-height:1.28!important;
  }
  .surveyQuestion input[type="text"],
  .surveyQuestion input[type="email"],
  .surveyQuestion select,
  .surveyQuestion textarea{
    min-height:44px!important;
    padding:10px 12px!important;
    border-radius:13px!important;
    font-size:16px!important;
    line-height:1.25!important;
  }
  .surveyQuestion textarea{
    min-height:92px!important;
  }
  .surveyLikertScale{
    grid-template-columns:1fr!important;
    gap:7px!important;
  }
  .surveyLikertScale > span{
    text-align:center!important;
    font-size:12px!important;
  }
  .surveyLikertOptions{
    justify-content:center!important;
    gap:6px!important;
    flex-wrap:nowrap!important;
  }
  .surveyLikertOption span{
    width:36px!important;
    height:36px!important;
    border-radius:12px!important;
  }
  .surveyRadioOption{
    min-height:42px!important;
    padding:9px 10px!important;
  }
  .surveyFooter{
    grid-template-columns:1fr!important;
    gap:7px!important;
    padding:10px 14px calc(12px + env(safe-area-inset-bottom, 0px))!important;
  }
  .surveyFootnote{
    font-size:12px!important;
    line-height:1.25!important;
  }
  .surveyStatusText{
    min-height:16px!important;
    font-size:12px!important;
  }
  .surveySubmitBtn{
    width:100%!important;
    min-height:46px!important;
    padding:11px 12px!important;
    border-radius:14px!important;
    font-size:16px!important;
  }
}

/* Extra-tight landscape phones: keep the survey usable instead of letting the
   header/footer consume the whole visible browser height. */
@media (hover:none) and (pointer:coarse) and (max-width:950px) and (max-height:560px) and (orientation:landscape){
  .surveyOverlay{
    align-items:stretch!important;
  }
  .surveyCard{
    width:min(100%, 760px)!important;
    max-height:calc(100svh - 10px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))!important;
  }
  .surveyHeader{
    padding:8px 14px 7px!important;
  }
  .surveyEyebrow{
    padding:4px 9px!important;
    margin-bottom:4px!important;
    font-size:10px!important;
  }
  .surveyHeader h2{
    font-size:clamp(22px, 5.8svh, 30px)!important;
    margin-bottom:4px!important;
  }
  .surveyHeader p{
    font-size:13px!important;
    line-height:1.25!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  .surveyBody{
    padding:8px 12px!important;
  }
  .surveySection{
    padding:10px!important;
    margin-bottom:9px!important;
  }
  .surveySectionHeader{
    margin-bottom:7px!important;
  }
  .surveySection h3{
    font-size:16px!important;
  }
  .surveyQuestion{
    padding:9px!important;
  }
  .surveyQuestion textarea{
    min-height:68px!important;
  }
  .surveyFooter{
    grid-template-columns:minmax(0,1fr) minmax(170px,auto)!important;
    align-items:center!important;
    gap:8px!important;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom, 0px))!important;
  }
  .surveyFootnote{
    font-size:11px!important;
    line-height:1.2!important;
  }
  .surveyStatusText{
    grid-column:1 / -1!important;
    order:3!important;
    min-height:0!important;
  }
  .surveySubmitBtn{
    width:auto!important;
    min-height:40px!important;
    padding:9px 14px!important;
    font-size:14px!important;
  }
}

/* Phone-only game layout: controls live under the game frame, and advanced
   actions live in the expandable Menu/Journal drawer. */
@media (hover:none) and (pointer:coarse) and (max-width:600px),
       (hover:none) and (pointer:coarse) and (max-width:950px) and (max-height:560px){
  html body.inGame{
    overflow:hidden!important;
  }
  html body.inGame .wrap{
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    padding:4px!important;
    overflow:hidden!important;
  }
  html body.inGame #game{
    height:100%!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:5px!important;
    overflow:hidden!important;
  }
  html body.inGame .hud{
    flex:0 0 auto!important;
    margin:0!important;
    gap:6px!important;
    padding-right:0!important;
    grid-template-columns:1fr!important;
  }
  html body.inGame .hud .box{
    min-height:0!important;
    padding:7px 10px!important;
    border-radius:13px!important;
  }
  html body.inGame .hud .box:nth-child(2),
  html body.inGame .hud .box:nth-child(3),
  html body.inGame .hud .box:nth-child(5){
    display:none!important;
  }
  html body.inGame .hud .label{
    font-size:10px!important;
    line-height:1!important;
  }
  html body.inGame .hud .value{
    font-size:15px!important;
    line-height:1.1!important;
  }
  html body.inGame .gameGrid,
  html body.inGame .gameGrid.storyDashboard{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    gap:5px!important;
    overflow:hidden!important;
    align-items:stretch!important;
  }
  html body.inGame .gameShell{
    grid-column:1!important;
    grid-row:1!important;
    min-height:0!important;
    height:100%!important;
    max-height:none!important;
    display:grid!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    gap:5px!important;
    padding:3px!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }
  html body.inGame #canvas{
    grid-row:1!important;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    min-height:0!important;
    object-fit:contain!important;
    object-position:center center!important;
    border-width:2px!important;
    border-radius:15px!important;
  }
  html body.hasTouchControls.inGame .mobileControls{
    grid-row:2!important;
    position:static!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    z-index:25!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    justify-content:stretch!important;
    align-items:center!important;
    gap:7px!important;
    padding:6px!important;
    border:1px solid rgba(211,169,88,.46)!important;
    border-radius:15px!important;
    background:linear-gradient(180deg,rgba(9,15,28,.92),rgba(3,6,16,.94))!important;
    box-shadow:0 8px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08)!important;
    pointer-events:auto!important;
  }
  html body.hasTouchControls.inGame .mobileDpad{
    width:auto!important;
    height:auto!important;
    display:grid!important;
    grid-template-columns:repeat(4, minmax(34px, 42px))!important;
    gap:5px!important;
    transform:none!important;
    pointer-events:auto!important;
  }
  html body.hasTouchControls.inGame .mobileBtn{
    position:static!important;
    left:auto!important;
    top:auto!important;
    width:clamp(34px, 10vw, 42px)!important;
    height:clamp(34px, 10vw, 42px)!important;
    min-width:34px!important;
    min-height:34px!important;
    border-radius:12px!important;
    font-size:clamp(15px, 4.6vw, 19px)!important;
  }
  html body.hasTouchControls.inGame .mobileLeft{order:1!important;}
  html body.hasTouchControls.inGame .mobileUp{order:2!important;}
  html body.hasTouchControls.inGame .mobileDown{order:3!important;}
  html body.hasTouchControls.inGame .mobileRight{order:4!important;}
  .mobileActionStack{
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:6px!important;
    min-width:0!important;
  }
  html body.hasTouchControls.inGame .mobileInteract,
  html body.hasTouchControls.inGame .mobileMenuToggle{
    position:static!important;
    display:grid!important;
    place-items:center!important;
    align-content:center!important;
    min-width:clamp(66px, 20vw, 92px)!important;
    width:auto!important;
    height:clamp(42px, 12vw, 50px)!important;
    min-height:42px!important;
    padding:6px 9px!important;
    border-radius:13px!important;
    line-height:1!important;
    pointer-events:auto!important;
    font-weight:1000!important;
  }
  html body.hasTouchControls.inGame .mobileInteractLabel{
    max-width:78px!important;
    font-size:clamp(11px, 3.5vw, 13px)!important;
  }
  html body.hasTouchControls.inGame .mobileInteractKey{
    font-size:9px!important;
  }
  .mobileMenuToggle{
    border:1px solid rgba(147,197,253,.52);
    background:linear-gradient(180deg,rgba(30,58,138,.92),rgba(15,23,42,.95));
    color:#eff6ff;
    box-shadow:0 10px 24px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.08);
    -webkit-tap-highlight-color:transparent;
    touch-action:none;
    user-select:none;
  }
  .mobileMenuToggle span{
    display:block;
    font-size:clamp(11px, 3.6vw, 13px);
    letter-spacing:.01em;
  }
  .mobileMenuToggle small{
    display:block;
    margin-top:1px;
    font-size:9px;
    line-height:1;
    opacity:.78;
    letter-spacing:.04em;
    text-transform:uppercase;
  }
  .mobileMenuToggle.active{
    background:linear-gradient(180deg,rgba(37,99,235,.98),rgba(29,78,216,.96));
    border-color:rgba(191,219,254,.88);
  }
  html body.inGame .side,
  html body.inGame .storySidePanel{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    height:auto!important;
    max-height:min(34svh, 250px)!important;
    min-height:96px!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    display:grid!important;
    grid-template-rows:auto auto!important;
    gap:6px!important;
    padding:7px!important;
    border-radius:15px!important;
  }
  html body.inGame .storySidePanel h2,
  html body.inGame .storySidePanel > p,
  html body.inGame .storySidePanel .feedback,
  html body.inGame .storySidePanel .nearbyCard,
  html body.inGame .storySidePanel .miniPanel,
  html body.inGame .storySidePanel > .btnRow,
  html body.inGame .storySidePanel > .sideUtilityRow{
    display:none!important;
  }
  html body.inGame .storySidePanel #objectiveCard.objectiveCard,
  html body.inGame #objectiveCard.objectiveCard{
    display:block!important;
    grid-row:1!important;
    height:auto!important;
    max-height:92px!important;
    min-height:0!important;
    margin:0!important;
    padding:8px 10px!important;
    overflow:auto!important;
    border-radius:13px!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
  }
  html body.inGame .objectiveCard .small{
    font-size:9px!important;
    margin-bottom:3px!important;
  }
  html body.inGame .objectiveCard .name{
    font-size:15px!important;
    line-height:1.08!important;
    margin-bottom:3px!important;
  }
  html body.inGame .objectiveCard .desc{
    font-size:12px!important;
    line-height:1.22!important;
  }
  html body.phoneCompactControls.inGame .mobileUtilityMenu{
    display:block!important;
    grid-row:2!important;
    margin:0!important;
    border-radius:13px!important;
    overflow:hidden!important;
    background:linear-gradient(180deg,rgba(239,246,255,.98),rgba(255,255,255,.96))!important;
  }
  html body.phoneCompactControls.inGame .mobileUtilityMenu summary{
    min-height:42px!important;
    padding:9px 11px!important;
    border-radius:13px!important;
    font-size:14px!important;
    line-height:1!important;
  }
  html body.phoneCompactControls.inGame .mobileUtilityTray{
    max-height:min(32svh, 230px)!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    padding:0 9px 9px!important;
  }
  html body.phoneMobileMenuOpen.inGame .storySidePanel{
    max-height:min(54svh, 360px)!important;
  }
  html body.phoneMobileMenuOpen.inGame .storySidePanel #objectiveCard.objectiveCard,
  html body.phoneMobileMenuOpen.inGame #objectiveCard.objectiveCard{
    max-height:76px!important;
  }
  html body.phoneCompactControls.inGame .mobileUtilityTray .btnRow,
  html body.phoneCompactControls.inGame .mobileUtilityTray .sideUtilityRow{
    display:grid!important;
    grid-template-columns:repeat(2, minmax(0,1fr))!important;
    gap:7px!important;
    margin:0!important;
    padding:0!important;
  }
  html body.phoneCompactControls.inGame .mobileUtilityTray .btn,
  html body.phoneCompactControls.inGame .mobileUtilityTray .musicToggle{
    width:100%!important;
    min-height:42px!important;
    padding:9px 8px!important;
    border-radius:12px!important;
    font-size:12px!important;
    line-height:1.1!important;
    white-space:normal!important;
  }
  html body.phoneCompactControls.inGame .mobileUtilityTray #talk{
    display:flex!important;
  }
  html body.phoneCompactControls.inGame .mobileUtilityTray .choosePathWide{
    grid-column:1 / -1!important;
  }
  html body.phoneCompactControls.inGame .mobileUtilityTray .sideMusicControls{
    grid-column:1 / -1!important;
    display:grid!important;
    grid-template-columns:minmax(84px, auto) minmax(0,1fr)!important;
    gap:7px!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  html body.phoneCompactControls.inGame .mobileUtilityTray .musicVolumeWrap{
    display:flex!important;
    min-height:42px!important;
    min-width:0!important;
    padding:7px 8px!important;
    border-radius:12px!important;
  }
  /* On phones the top HUD already says lesson count; hiding this floating badge
     avoids covering the new menu drawer and Safari bottom bar. */
  html body.inGame.progressCompactEligible .storyBottomDesk{
    display:none!important;
  }
}

/* Phone landscape: maximize the frame and keep the controls directly beneath it. */
@media (hover:none) and (pointer:coarse) and (max-width:950px) and (max-height:560px) and (orientation:landscape){
  html body.inGame .authSessionBar{
    transform:scale(.72)!important;
    transform-origin:top right!important;
    opacity:.86!important;
  }
  html body.inGame .hud{
    display:none!important;
  }
  html body.inGame .gameGrid,
  html body.inGame .gameGrid.storyDashboard{
    grid-template-rows:minmax(0,1fr) auto!important;
    gap:4px!important;
  }
  html body.inGame .gameShell{
    gap:4px!important;
    padding:3px!important;
  }
  html body.hasTouchControls.inGame .mobileControls{
    min-height:44px!important;
    padding:4px 6px!important;
    gap:6px!important;
    border-radius:13px!important;
  }
  html body.hasTouchControls.inGame .mobileDpad{
    grid-template-columns:repeat(4, 38px)!important;
    gap:4px!important;
  }
  html body.hasTouchControls.inGame .mobileBtn{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    font-size:17px!important;
  }
  html body.hasTouchControls.inGame .mobileInteract,
  html body.hasTouchControls.inGame .mobileMenuToggle{
    min-width:72px!important;
    height:38px!important;
    min-height:38px!important;
    padding:5px 8px!important;
  }
  html body.inGame .side,
  html body.inGame .storySidePanel{
    min-height:42px!important;
    max-height:46px!important;
    padding:4px!important;
    overflow:hidden!important;
    grid-template-rows:auto!important;
  }
  html body.inGame .storySidePanel #objectiveCard.objectiveCard,
  html body.inGame #objectiveCard.objectiveCard{
    display:none!important;
  }
  html body.phoneMobileMenuOpen.inGame .storySidePanel{
    max-height:min(45svh, 210px)!important;
    overflow:auto!important;
  }
  html body.phoneCompactControls.inGame .mobileUtilityMenu summary{
    min-height:36px!important;
    padding:7px 10px!important;
    font-size:13px!important;
  }
  html body.phoneCompactControls.inGame .mobileUtilityTray{
    max-height:calc(45svh - 44px)!important;
    padding:0 8px 8px!important;
  }
  html body.phoneCompactControls.inGame .mobileUtilityTray .btn,
  html body.phoneCompactControls.inGame .mobileUtilityTray .musicToggle{
    min-height:36px!important;
    padding:7px 8px!important;
    font-size:11px!important;
  }
  html body.phoneCompactControls.inGame .mobileUtilityTray .musicVolumeWrap{
    min-height:36px!important;
  }
}

@media (hover:none) and (pointer:coarse) and (max-width:380px){
  html body.hasTouchControls.inGame .mobileDpad{
    grid-template-columns:repeat(4, 32px)!important;
    gap:4px!important;
  }
  html body.hasTouchControls.inGame .mobileBtn{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
    font-size:15px!important;
  }
  html body.hasTouchControls.inGame .mobileInteract,
  html body.hasTouchControls.inGame .mobileMenuToggle{
    min-width:60px!important;
    padding-inline:6px!important;
  }
  .mobileMenuToggle span,
  html body.hasTouchControls.inGame .mobileInteractLabel{
    font-size:11px!important;
  }
  .mobileMenuToggle small,
  html body.hasTouchControls.inGame .mobileInteractKey{
    font-size:8px!important;
  }
}

/* PHONE_LANDSCAPE_UI_V2
   Phone-landscape-only cleanup.  This intentionally targets short, coarse-pointer
   phone viewports so desktop and normal iPad layouts are not changed. */
@media (hover:none) and (pointer:coarse) and (max-width:950px) and (max-height:560px) and (orientation:landscape){
  /* Survey: use the short screen as a three-row card and keep the active question visible. */
  html body.surveyLocked{
    position:fixed!important;
    inset:0!important;
    width:100%!important;
    height:100svh!important;
    overflow:hidden!important;
  }
  html body.surveyLocked .surveyOverlay{
    align-items:stretch!important;
    justify-content:center!important;
    padding:calc(4px + env(safe-area-inset-top,0px)) calc(8px + env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) calc(8px + env(safe-area-inset-left,0px))!important;
  }
  html body.surveyLocked .surveyCard{
    width:min(100%, 900px)!important;
    max-height:calc(100svh - 10px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;
    min-height:0!important;
    border-radius:16px!important;
  }
  html body.surveyLocked .surveyForm{
    height:100%!important;
    max-height:none!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
  }
  html body.surveyLocked .surveyHeader{
    padding:7px 14px 6px!important;
  }
  html body.surveyLocked .surveyEyebrow{
    padding:3px 9px!important;
    margin-bottom:3px!important;
    font-size:10px!important;
  }
  html body.surveyLocked .surveyHeader h2{
    font-size:clamp(20px, 6svh, 29px)!important;
    line-height:1!important;
    margin-bottom:3px!important;
  }
  html body.surveyLocked .surveyHeader p{
    font-size:12px!important;
    line-height:1.18!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  html body.surveyLocked .surveyBody{
    min-height:0!important;
    padding:7px 12px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-padding-bottom:76px!important;
  }
  html body.surveyLocked .surveySection{
    padding:8px!important;
    margin-bottom:8px!important;
    border-radius:14px!important;
  }
  html body.surveyLocked .surveySectionHeader{
    gap:7px!important;
    margin-bottom:6px!important;
  }
  html body.surveyLocked .surveySectionNumber{
    width:22px!important;
    height:22px!important;
    font-size:11px!important;
  }
  html body.surveyLocked .surveySection h3{
    font-size:15px!important;
    line-height:1.05!important;
  }
  html body.surveyLocked .surveySection p{
    font-size:11px!important;
    line-height:1.15!important;
  }
  html body.surveyLocked .surveyQuestionList{
    gap:7px!important;
  }
  html body.surveyLocked .surveyQuestion{
    padding:8px!important;
    border-radius:13px!important;
  }
  html body.surveyLocked .surveyQuestionLabel,
  html body.surveyLocked .surveyQuestionText > span{
    display:block!important;
    margin-bottom:5px!important;
    font-size:13px!important;
    line-height:1.18!important;
  }
  html body.surveyLocked .surveyQuestion select,
  html body.surveyLocked .surveyQuestion input[type="text"],
  html body.surveyLocked .surveyQuestion input[type="email"],
  html body.surveyLocked .surveyQuestion textarea{
    min-height:36px!important;
    padding:7px 10px!important;
    border-radius:11px!important;
    font-size:16px!important;
  }
  html body.surveyLocked .surveyQuestion textarea{
    min-height:54px!important;
  }
  html body.surveyLocked .surveyLikertScale{
    gap:5px!important;
  }
  html body.surveyLocked .surveyLikertScale > span{
    font-size:10px!important;
    line-height:1.05!important;
  }
  html body.surveyLocked .surveyLikertOptions{
    gap:5px!important;
  }
  html body.surveyLocked .surveyLikertOption span{
    width:31px!important;
    height:31px!important;
    border-radius:10px!important;
  }
  html body.surveyLocked .surveyFooter{
    grid-template-columns:minmax(0,1fr) minmax(150px, 240px)!important;
    align-items:center!important;
    gap:7px!important;
    padding:7px 12px calc(7px + env(safe-area-inset-bottom,0px))!important;
  }
  html body.surveyLocked .surveyFootnote{
    font-size:11px!important;
    line-height:1.15!important;
  }
  html body.surveyLocked .surveyStatusText{
    grid-column:1 / -1!important;
    order:3!important;
    min-height:0!important;
    font-size:11px!important;
    line-height:1.1!important;
  }
  html body.surveyLocked .surveySubmitBtn{
    width:100%!important;
    min-height:38px!important;
    padding:8px 12px!important;
    border-radius:13px!important;
    font-size:14px!important;
  }

  /* Gameplay: keep the frame first, place movement/action/menu below it, and
     show advanced tools only when the phone Menu button is open. */
  html body.inGame{
    overflow:hidden!important;
  }
  html body.inGame .wrap{
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    padding:3px 5px calc(4px + env(safe-area-inset-bottom,0px))!important;
    overflow:hidden!important;
  }
  html body.inGame #game{
    height:100%!important;
    min-height:0!important;
    gap:4px!important;
    overflow:hidden!important;
  }
  html body.inGame .authSessionBar{
    top:calc(3px + env(safe-area-inset-top,0px))!important;
    right:calc(5px + env(safe-area-inset-right,0px))!important;
    transform:scale(.66)!important;
    transform-origin:top right!important;
    opacity:.88!important;
    z-index:1280!important;
  }
  html body.inGame .hud{
    display:none!important;
  }
  html body.inGame .gameGrid,
  html body.inGame .gameGrid.storyDashboard{
    flex:1 1 auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    gap:4px!important;
    overflow:hidden!important;
  }
  html body.inGame .gameShell{
    grid-column:1!important;
    grid-row:1!important;
    height:100%!important;
    min-height:0!important;
    display:grid!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    gap:4px!important;
    padding:3px!important;
    border-radius:16px!important;
    overflow:hidden!important;
  }
  html body.inGame #canvas{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center center!important;
    border-width:2px!important;
    border-radius:14px!important;
  }
  html body.hasTouchControls.inGame .mobileControls{
    grid-row:2!important;
    position:static!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;
    justify-content:stretch!important;
    gap:6px!important;
    width:100%!important;
    min-height:40px!important;
    padding:4px 5px!important;
    border-radius:12px!important;
    pointer-events:auto!important;
  }
  html body.hasTouchControls.inGame .mobileDpad{
    display:grid!important;
    grid-template-columns:repeat(4, 36px)!important;
    gap:4px!important;
    width:auto!important;
    height:auto!important;
    transform:none!important;
  }
  html body.hasTouchControls.inGame .mobileBtn{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    border-radius:11px!important;
    font-size:16px!important;
  }
  html body.hasTouchControls.inGame .mobileActionStack{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 82px!important;
    align-items:stretch!important;
    gap:6px!important;
    min-width:0!important;
    width:100%!important;
  }
  html body.hasTouchControls.inGame .mobileInteract,
  html body.hasTouchControls.inGame .mobileMenuToggle{
    position:static!important;
    display:grid!important;
    width:100%!important;
    min-width:0!important;
    height:36px!important;
    min-height:36px!important;
    padding:4px 8px!important;
    border-radius:12px!important;
    line-height:1!important;
  }
  html body.hasTouchControls.inGame .mobileInteractLabel,
  html body.hasTouchControls.inGame .mobileMenuToggle span{
    max-width:100%!important;
    font-size:12px!important;
    line-height:1!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  html body.hasTouchControls.inGame .mobileInteractKey,
  html body.hasTouchControls.inGame .mobileMenuToggle small{
    font-size:8px!important;
    line-height:1!important;
    margin-top:1px!important;
  }

  /* Closed: no extra Review/Objective panel stealing landscape height. */
  html body.inGame .side,
  html body.inGame .storySidePanel{
    grid-column:1!important;
    grid-row:2!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    margin:0!important;
    padding:0!important;
    border-width:0!important;
    opacity:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }
  html body.inGame .storySidePanel h2,
  html body.inGame .storySidePanel > p,
  html body.inGame .storySidePanel .feedback,
  html body.inGame .storySidePanel .nearbyCard,
  html body.inGame .storySidePanel .miniPanel,
  html body.inGame .storySidePanel #objectiveCard.objectiveCard,
  html body.inGame #objectiveCard.objectiveCard{
    display:none!important;
  }
  html body.phoneMobileMenuOpen.inGame .side,
  html body.phoneMobileMenuOpen.inGame .storySidePanel{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    max-height:min(42svh, 190px)!important;
    padding:5px!important;
    border-width:1px!important;
    opacity:1!important;
    overflow:auto!important;
    pointer-events:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
  }
  html body.phoneCompactControls.inGame .mobileUtilityMenu{
    display:block!important;
    margin:0!important;
    border-radius:13px!important;
    overflow:hidden!important;
  }
  html body.phoneCompactControls.inGame .mobileUtilityMenu summary{
    display:none!important;
  }
  html body.phoneCompactControls.inGame .mobileUtilityTray{
    display:grid!important;
    grid-template-columns:repeat(3, minmax(0,1fr))!important;
    gap:6px!important;
    max-height:none!important;
    overflow:visible!important;
    padding:6px!important;
  }
  html body.phoneCompactControls.inGame .mobileUtilityTray .btnRow,
  html body.phoneCompactControls.inGame .mobileUtilityTray .sideUtilityRow{
    display:contents!important;
  }
  html body.phoneCompactControls.inGame .mobileUtilityTray .btn,
  html body.phoneCompactControls.inGame .mobileUtilityTray .musicToggle{
    width:100%!important;
    min-height:34px!important;
    padding:6px 7px!important;
    border-radius:11px!important;
    font-size:10.5px!important;
    line-height:1.05!important;
    white-space:normal!important;
  }
  html body.phoneCompactControls.inGame .mobileUtilityTray #talk{
    display:flex!important;
  }
  html body.phoneCompactControls.inGame .mobileUtilityTray .choosePathWide{
    grid-column:auto!important;
    min-height:34px!important;
  }
  html body.phoneCompactControls.inGame .mobileUtilityTray .choosePathWide small,
  html body.phoneCompactControls.inGame .mobileUtilityTray .choosePathIcon{
    display:none!important;
  }
  html body.phoneCompactControls.inGame .mobileUtilityTray .sideMusicControls{
    display:grid!important;
    grid-column:span 2!important;
    grid-template-columns:76px minmax(110px,1fr)!important;
    gap:6px!important;
    align-items:center!important;
    min-width:0!important;
    width:100%!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  html body.phoneCompactControls.inGame .mobileUtilityTray .musicVolumeWrap{
    display:flex!important;
    min-width:0!important;
    min-height:34px!important;
    padding:5px 7px!important;
    border-radius:11px!important;
  }
  html body.inGame.progressCompactEligible .storyBottomDesk,
  html body.inGame .progressCompact,
  html body.inGame #progressCompact{
    display:none!important;
  }
}

/* PHONE_LANDSCAPE_STORY_MODAL_V2
   Phone-landscape-only cinematic/story modal fit. Does not apply to iPad/desktop. */
@media (hover:none) and (pointer:coarse) and (max-width:950px) and (max-height:560px) and (orientation:landscape){
  html body .modal.dialoguePosterModal.storyIntroModal{
    position:fixed!important;
    inset:0!important;
    align-items:stretch!important;
    justify-content:center!important;
    padding:calc(3px + env(safe-area-inset-top,0px)) calc(5px + env(safe-area-inset-right,0px)) calc(4px + env(safe-area-inset-bottom,0px)) calc(5px + env(safe-area-inset-left,0px))!important;
    overflow:hidden!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .modalBox{
    width:100%!important;
    max-width:100%!important;
    height:calc(100svh - 7px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:5px!important;
    border-radius:10px!important;
    overflow:hidden!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .modalGrid,
  html body .modal.dialoguePosterModal.storyIntroModal #modalContent{
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster{
    height:100%!important;
    min-height:0!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    gap:4px!important;
    padding:5px!important;
    border-radius:10px!important;
    overflow:hidden!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterTitleBlock{
    padding:0 48px 3px 8px!important;
    margin:0!important;
    min-height:0!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterTitle{
    max-width:calc(100% - 10px)!important;
    max-height:2em!important;
    padding:0!important;
    font-size:clamp(19px, 7svh, 30px)!important;
    line-height:.92!important;
    letter-spacing:.03em!important;
    overflow:hidden!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterSubtitle{
    margin-top:1px!important;
    font-size:clamp(8px, 2.6svh, 11px)!important;
    line-height:1!important;
    letter-spacing:.12em!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroHeroShell{
    height:100%!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:minmax(76px, 10vw) minmax(0,1fr) minmax(96px, 15vw)!important;
    grid-template-rows:minmax(0,1fr)!important;
    grid-template-areas:"guide stage visitor"!important;
    gap:5px!important;
    align-items:stretch!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroMainScene{
    grid-area:stage!important;
    grid-column:auto!important;
    grid-row:auto!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    border-radius:12px!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroMainScene img.storyIntroMainImg{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroLeftPane,
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroRightPane{
    display:flex!important;
    min-width:0!important;
    min-height:0!important;
    flex-direction:column!important;
    justify-content:space-between!important;
    gap:5px!important;
    overflow:hidden!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroLeftPane{
    grid-area:guide!important;
    grid-column:auto!important;
    grid-row:auto!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroRightPane{
    grid-area:visitor!important;
    grid-column:auto!important;
    grid-row:auto!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard{
    width:100%!important;
    min-height:0!important;
    padding:5px!important;
    border-radius:11px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:4px!important;
    text-align:center!important;
    overflow:hidden!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterRoleTag{
    align-self:flex-start!important;
    padding:2px 6px!important;
    font-size:7.5px!important;
    line-height:1!important;
    margin:0!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterPortrait{
    width:clamp(34px, 11svh, 50px)!important;
    height:clamp(34px, 11svh, 50px)!important;
    min-width:34px!important;
    min-height:34px!important;
    border-radius:9px!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterName{
    font-size:clamp(13px, 4.2svh, 18px)!important;
    line-height:.95!important;
    text-align:center!important;
    margin:0!important;
    overflow-wrap:anywhere!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterRole{
    font-size:7.5px!important;
    line-height:1.08!important;
    text-align:center!important;
    margin:0!important;
    letter-spacing:.04em!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroFooterPrompt{
    display:none!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSideActions{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    gap:5px!important;
    margin:0!important;
    padding:0!important;
    position:relative!important;
    z-index:7!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .posterPrimaryBtn,
  html body .modal.dialoguePosterModal.storyIntroModal .posterSecondaryBtn{
    width:100%!important;
    min-height:32px!important;
    padding:6px 5px!important;
    border-radius:10px!important;
    font-size:10.5px!important;
    line-height:1.05!important;
    white-space:normal!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueOverlay{
    inset:5px!important;
    pointer-events:auto!important;
    touch-action:pan-y!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack{
    top:var(--story-intro-dialogue-top, 48%)!important;
    transform:translateY(var(--story-intro-dialogue-shift, -50%))!important;
    gap:4px!important;
    max-height:calc(100% - 10px)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    padding-right:3px!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble{
    max-width:min(54%, 330px)!important;
    padding:5px 7px!important;
    border-radius:10px!important;
    background:rgba(246,233,196,.72)!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubbleSpeaker{
    font-size:8px!important;
    line-height:1!important;
    margin-bottom:1px!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubbleBody{
    font-size:clamp(10.5px, 3.5svh, 14px)!important;
    line-height:1.08!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_04 .storyIntroDialogueStack,
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_05 .storyIntroDialogueStack,
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_06 .storyIntroDialogueStack{
    top:40%!important;
    transform:translateY(0)!important;
  }
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_04 .storyIntroDialogueStack .posterBubble,
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_05 .storyIntroDialogueStack .posterBubble,
  html body .modal.dialoguePosterModal.storyIntroModal .storyIntroSlide-story5_intro_06 .storyIntroDialogueStack .posterBubble{
    max-width:min(62%, 420px)!important;
    padding:6px 8px!important;
  }
}

/* PHONE_MUSIC_SETTINGS_FIX_V3
   Phone-only: keep music muted by default and make the landscape Menu key visible.
   The media query is intentionally short/coarse-pointer so PC and normal iPad are untouched. */
@media (hover:none) and (pointer:coarse) and (max-width:950px) and (max-height:560px) and (orientation:landscape){
  html body.hasTouchControls.phoneCompactControls.inGame #mobileControls.mobileControls{
    display:grid!important;
    grid-template-columns:auto minmax(0, 1fr)!important;
    align-items:center!important;
    gap:6px!important;
  }
  html body.hasTouchControls.phoneCompactControls.inGame #mobileControls .mobileActionStack{
    display:grid!important;
    grid-template-columns:minmax(0, 1fr) clamp(74px, 13vw, 96px)!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
  }
  html body.hasTouchControls.phoneCompactControls.inGame #mobileControls .mobileInteract,
  html body.hasTouchControls.phoneCompactControls.inGame #mobileControls #mobileMenuToggle.mobileMenuToggle,
  html body.hasTouchControls.phoneCompactControls.inGame #mobileControls [data-action="menu"].mobileMenuToggle{
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    position:static!important;
    width:100%!important;
    min-width:0!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    padding:4px 8px!important;
    border-radius:12px!important;
    pointer-events:auto!important;
    place-items:center!important;
    align-content:center!important;
    line-height:1!important;
  }
  html body.hasTouchControls.phoneCompactControls.inGame #mobileControls #mobileMenuToggle.mobileMenuToggle span,
  html body.hasTouchControls.phoneCompactControls.inGame #mobileControls [data-action="menu"].mobileMenuToggle span{
    display:block!important;
    font-size:12px!important;
    font-weight:1000!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  html body.hasTouchControls.phoneCompactControls.inGame #mobileControls #mobileMenuToggle.mobileMenuToggle small,
  html body.hasTouchControls.phoneCompactControls.inGame #mobileControls [data-action="menu"].mobileMenuToggle small{
    display:block!important;
    margin-top:1px!important;
    font-size:8px!important;
    font-weight:1000!important;
    line-height:1!important;
    opacity:.82!important;
    white-space:nowrap!important;
  }
  html body.hasTouchControls.phoneCompactControls.phoneMobileMenuOpen.inGame #mobileControls #mobileMenuToggle.mobileMenuToggle{
    filter:brightness(1.12)!important;
    box-shadow:0 0 0 2px rgba(96,165,250,.45), inset 0 0 0 1px rgba(255,255,255,.18)!important;
  }
}

/* PHONE_LANDSCAPE_ACTION_MENU_V4
   Phone-landscape only: keep Menu/Journal on the right side of the action key.
   The action area uses about 4/5 of the available width for Talk/Learn/Interact
   and 1/5 for Menu. Desktop and normal iPad are outside this media query. */
@media (hover:none) and (pointer:coarse) and (max-width:950px) and (max-height:560px) and (orientation:landscape){
  html body.hasTouchControls.phoneCompactControls.inGame #mobileControls.mobileControls{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    grid-auto-flow:column!important;
    align-items:stretch!important;
    justify-content:stretch!important;
  }
  html body.hasTouchControls.phoneCompactControls.inGame #mobileControls > .mobileActionStack{
    display:grid!important;
    grid-template-columns:minmax(0,4fr) minmax(68px,1fr)!important;
    grid-auto-flow:column!important;
    align-items:stretch!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
  }
  html body.hasTouchControls.phoneCompactControls.inGame #mobileControls > .mobileActionStack > .mobileInteract{
    grid-column:1!important;
    width:100%!important;
    min-width:0!important;
  }
  html body.hasTouchControls.phoneCompactControls.inGame #mobileControls > .mobileActionStack > #mobileMenuToggle.mobileMenuToggle,
  html body.hasTouchControls.phoneCompactControls.inGame #mobileControls > .mobileActionStack > [data-action="menu"].mobileMenuToggle{
    grid-column:2!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
}

/* PHONE_VOLUME_SLIDER_FIX
   Phone-only: keep the Music volume slider touch-draggable inside the compact
   menu tray. Desktop and normal iPad do not receive phoneCompactControls. */
body.phoneCompactControls.inGame .mobileUtilityTray .musicVolumeWrap{
  pointer-events:auto!important;
  touch-action:pan-x!important;
}
body.phoneCompactControls.inGame .mobileUtilityTray #musicVolume,
body.phoneCompactControls.inGame .mobileUtilityTray .musicVolume{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:32px!important;
  padding:0!important;
  pointer-events:auto!important;
  touch-action:pan-x!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-tap-highlight-color:transparent!important;
}

/* OPS_MESSAGES_AND_STORY_LOCKS_V1
   Team mailbox + story-level production lock controls. The styles are additive
   and intentionally avoid changing existing gameplay layout dimensions. */
.teamMailboxBtn{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  min-width:34px!important;
  min-height:34px!important;
  border:1px solid rgba(191,219,254,.55)!important;
  border-radius:999px!important;
  padding:7px 10px!important;
  background:linear-gradient(180deg,#eff6ff,#bfdbfe)!important;
  color:#0f172a!important;
  font-weight:1000!important;
  cursor:pointer!important;
  box-shadow:0 10px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.55)!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}
.teamMailboxBtn[hidden]{display:none!important;}
.teamMailboxBtn:hover{filter:brightness(1.04)}
.teamMailboxBtn.hasUnread{background:linear-gradient(180deg,#fef3c7,#f59e0b)!important;color:#1f1300!important;}
.teamMailboxIcon{font-size:16px;line-height:1;}
.teamMailboxLabel{font-size:12px;line-height:1;}
.teamMailboxBadge{
  position:absolute;
  top:-7px;
  right:-5px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#ef4444;
  color:white;
  border:2px solid #0f172a;
  font-size:10px;
  font-weight:1000;
  line-height:1;
}
.teamMailboxBadge[hidden]{display:none!important;}
.teamMailboxModal .modalBox,
.storyLockModal .modalBox{max-width:min(820px,calc(100vw - 28px));}
.teamMessageList{display:grid;gap:14px;margin-top:10px;}
.teamMessageCard{
  border:1px solid rgba(30,64,175,.18);
  border-radius:18px;
  padding:16px;
  background:linear-gradient(180deg,rgba(239,246,255,.98),rgba(255,255,255,.94));
  box-shadow:0 12px 24px rgba(15,23,42,.08);
}
.teamMessageCard.maintenance,
.teamMessageCard.warning{border-color:rgba(245,158,11,.35);background:linear-gradient(180deg,#fffbeb,#fff7ed);}
.teamMessageCard.urgent,
.teamMessageCard.error{border-color:rgba(239,68,68,.35);background:linear-gradient(180deg,#fef2f2,#fff7ed);}
.teamMessageMeta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;}
.teamMessageMeta span{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:4px 8px;
  background:rgba(30,64,175,.10);
  color:#1e3a8a;
  font-size:11px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.teamMessageCard h3{margin:0 0 8px;color:#0f172a;font-size:20px;line-height:1.15;}
.teamMessageCard p{margin:0;color:#334155;font-size:15px;line-height:1.5;}
.teamMessageLink{display:inline-flex;margin-top:12px;font-weight:1000;color:#1d4ed8;text-decoration:none;}
.teamMessageEmpty{padding:18px;border-radius:18px;background:#f8fafc;color:#475569;font-weight:850;}
.storyLockNotice{display:grid;gap:10px;}
.storyLockBadge{justify-self:start;border-radius:999px;padding:6px 10px;background:#fee2e2;color:#991b1b;font-size:12px;font-weight:1000;text-transform:uppercase;letter-spacing:.08em;}
.storyLockNotice h3{margin:0;color:#0f172a;font-size:24px;line-height:1.1;}
.storyLockNotice p{margin:0;color:#334155;font-size:16px;line-height:1.5;}
.storyLockEta{padding:10px 12px;border-radius:14px;background:#fffbeb;color:#78350f;border:1px solid rgba(245,158,11,.28);}
.frontierStoryCard.opsLocked{filter:saturate(.72) brightness(.92);}
.frontierStoryCard.opsLocked::after{
  content:'Paused by team';
  position:absolute;
  top:10px;
  right:10px;
  z-index:3;
  border-radius:999px;
  padding:6px 9px;
  background:rgba(127,29,29,.92);
  color:#fff7ed;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.04em;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
}
.frontierStoryCard.opsLocked .storyCardHint{background:#fee2e2!important;color:#991b1b!important;border-color:rgba(239,68,68,.35)!important;}
.frontierStartBtn.opsLocked{
  background:linear-gradient(180deg,#fca5a5,#b91c1c)!important;
  color:white!important;
  box-shadow:0 18px 34px rgba(185,28,28,.22)!important;
}
@media(max-width:860px), (hover:none) and (pointer:coarse){
  .teamMailboxLabel{display:none!important;}
  .teamMailboxBtn{padding:7px 9px!important;min-width:36px!important;}
  .authSessionBar{gap:6px!important;}
}
@media (hover:none) and (pointer:coarse) and (max-width:950px) and (max-height:560px) and (orientation:landscape){
  html body.inGame .authSessionBar .teamMailboxBtn{min-width:30px!important;min-height:30px!important;padding:6px 8px!important;}
  html body.inGame .authSessionBar .teamMailboxIcon{font-size:14px!important;}
  html body.inGame .authSessionBar .teamMailboxBadge{top:-6px;right:-4px;}
}

/* PC control onboarding: arrow keys first, WASD second */
.controlsMiniPanel ul{display:grid;gap:8px!important;}
.controlsMiniPanel .controlGuideLine{display:grid!important;grid-template-columns:auto auto auto auto;align-items:center;gap:8px 10px;}
.controlGuideLabel{font-weight:1000;color:#1e3a8a;}
.controlOr{font-size:12px;font-weight:1000;text-transform:uppercase;letter-spacing:.06em;color:#7c2d12;align-self:center;}
.keyCluster{display:grid;grid-template-columns:repeat(3,24px);grid-template-rows:repeat(2,24px);gap:3px;align-items:center;justify-content:center;vertical-align:middle;}
.keyCluster .keyIconCap{min-width:24px;height:24px;padding:0!important;border-radius:7px!important;display:inline-flex!important;align-items:center;justify-content:center;font-size:13px!important;line-height:1!important;box-shadow:0 2px 0 rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.45);}
.wasdKeyCluster .keyIconCap{font-size:11px!important;}
.controlTip{display:inline-block;font-weight:900;color:#7c2d12;}
.movementControlsInline{display:flex;align-items:center;gap:9px;margin:2px 0 6px;flex-wrap:wrap;}
.gameManualContentV249 .movementControlsInline{margin:2px 0 8px;}
.gameManualContentV249 .keyCluster{grid-template-columns:repeat(3,26px);grid-template-rows:repeat(2,26px);gap:4px;}
.gameManualContentV249 .keyCluster .keyIconCap{min-width:26px;height:26px;font-size:13px!important;background:linear-gradient(180deg,#eff6ff,#dbeafe)!important;border:1px solid rgba(59,130,246,.34)!important;color:#172554!important;}
.gameManualContentV249 .wasdKeyCluster .keyIconCap{background:linear-gradient(180deg,#fff7ed,#ffedd5)!important;border-color:rgba(249,115,22,.34)!important;color:#7c2d12!important;}
@media(max-width:1100px){.controlsMiniPanel .controlGuideLine{grid-template-columns:1fr;align-items:start}.movementControlsInline{gap:7px}}

/* PC controls onboarding polish: clearer color, better balance between Nearby and How to play */
@media (min-width:861px) and (hover:hover) and (pointer:fine){
  html body.inGame .storySidePanel{
    grid-template-rows:minmax(140px,1fr) minmax(92px,.40fr) minmax(128px,.56fr) auto auto !important;
    gap:7px !important;
  }
  html body.inGame .storySidePanel .nearbyCard{
    padding:8px 10px !important;
    overflow:hidden !important;
  }
  html body.inGame .storySidePanel .nearbyCard .small{
    margin-bottom:3px !important;
  }
  html body.inGame .storySidePanel .nearbyCard .name{
    font-size:clamp(13px,.95vw,16px) !important;
    line-height:1.12 !important;
    margin-top:1px !important;
  }
  html body.inGame .storySidePanel .nearbyCard .desc{
    font-size:clamp(10px,.74vw,12px) !important;
    line-height:1.18 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }
  html body.inGame .storySidePanel .nearbyCard .btn,
  html body.inGame .storySidePanel .nearbyCard button{
    margin-top:7px !important;
    padding:6px 10px !important;
    min-height:28px !important;
    font-size:11px !important;
    border-radius:999px !important;
  }
  html body.inGame .storySidePanel .controlsMiniPanel{
    padding:10px 12px 11px !important;
    overflow:hidden !important;
    min-height:0 !important;
    background:
      radial-gradient(circle at 95% 0%,rgba(59,130,246,.13),transparent 34%),
      linear-gradient(180deg,rgba(16,21,36,.98),rgba(9,10,18,.98)) !important;
    border-color:rgba(255,206,106,.42) !important;
  }
}

html body.inGame .controlsMiniPanel .miniTitle{
  color:#ffd166 !important;
  text-shadow:0 1px 8px rgba(255,209,102,.16) !important;
  margin-bottom:6px !important;
}
html body.inGame .controlsMiniPanel .controlsGuideList{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  display:grid !important;
  gap:7px !important;
  color:#f8ecd2 !important;
}
html body.inGame .controlsMiniPanel .controlsGuideList > li{
  list-style:none !important;
  margin:0 !important;
}
html body.inGame .controlsMiniPanel .controlGuideLine{
  display:grid !important;
  grid-template-columns:minmax(42px,auto) auto minmax(28px,auto) auto !important;
  align-items:center !important;
  justify-content:start !important;
  gap:7px 9px !important;
}
html body.inGame .controlsMiniPanel .controlMoveRow,
html body.inGame .controlsMiniPanel .controlActionLine,
html body.inGame .controlsMiniPanel .controlHelpLine{
  border-radius:12px !important;
  border:1px solid rgba(125,211,252,.16) !important;
  background:rgba(15,23,42,.34) !important;
}
html body.inGame .controlsMiniPanel .controlMoveRow{
  padding:5px 7px !important;
}
html body.inGame .controlsMiniPanel .controlActionLine,
html body.inGame .controlsMiniPanel .controlHelpLine{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:6px 8px !important;
  color:#f8ecd2 !important;
  font-size:clamp(11px,.78vw,13px) !important;
  line-height:1.15 !important;
}
html body.inGame .controlsMiniPanel .controlGuideLabel{
  color:#7dd3fc !important;
  font-size:12px !important;
  font-weight:1000 !important;
  letter-spacing:.02em !important;
  text-shadow:0 1px 8px rgba(125,211,252,.22) !important;
}
html body.inGame .controlsMiniPanel .controlOr{
  justify-self:center !important;
  align-self:center !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:28px !important;
  min-height:22px !important;
  border-radius:999px !important;
  padding:2px 7px !important;
  color:#ffd166 !important;
  background:rgba(255,209,102,.10) !important;
  border:1px solid rgba(255,209,102,.24) !important;
  font-size:10px !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
}
html body.inGame .controlsMiniPanel .keyCluster{
  grid-template-columns:repeat(3,23px) !important;
  grid-template-rows:repeat(2,22px) !important;
  gap:3px !important;
}
html body.inGame .controlsMiniPanel .keyCluster .keyIconCap,
html body.inGame .controlsMiniPanel .actionKeyCap{
  min-width:23px !important;
  height:22px !important;
  padding:0 !important;
  border-radius:7px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  color:#fff7ed !important;
  box-shadow:0 2px 0 rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.26) !important;
}
html body.inGame .controlsMiniPanel .arrowKeyCluster .keyIconCap{
  background:linear-gradient(180deg,#38bdf8,#1d4ed8) !important;
  border:1px solid rgba(186,230,253,.70) !important;
}
html body.inGame .controlsMiniPanel .wasdKeyCluster .keyIconCap,
html body.inGame .controlsMiniPanel .actionKeyCap{
  background:linear-gradient(180deg,#b7791f,#6b3d12) !important;
  border:1px solid rgba(255,209,102,.56) !important;
}
html body.inGame .controlsMiniPanel .wasdKeyCluster .keyIconCap{
  font-size:10px !important;
}
html body.inGame .controlsMiniPanel .controlTip{
  display:inline !important;
  color:#fde68a !important;
  font-weight:950 !important;
}
@media (max-width:1100px){
  html body.inGame .controlsMiniPanel .controlGuideLine{
    grid-template-columns:40px auto 26px auto !important;
    gap:6px !important;
  }
  html body.inGame .controlsMiniPanel .keyCluster{
    grid-template-columns:repeat(3,21px) !important;
    grid-template-rows:repeat(2,20px) !important;
  }
  html body.inGame .controlsMiniPanel .keyCluster .keyIconCap,
  html body.inGame .controlsMiniPanel .actionKeyCap{
    min-width:21px !important;
    height:20px !important;
    font-size:11px !important;
  }
  html body.inGame .controlsMiniPanel .controlActionLine,
  html body.inGame .controlsMiniPanel .controlHelpLine{
    font-size:11px !important;
  }
}

/* PC controls production polish v2: fit How to Play, keep Nearby scrollable, and fix manual key layout */
@media (min-width:861px) and (hover:hover) and (pointer:fine){
  html body.inGame .storySidePanel{
    grid-template-rows:minmax(116px,.82fr) minmax(64px,.20fr) minmax(174px,.74fr) auto auto !important;
    gap:7px !important;
  }
  html body.inGame .storySidePanel .nearbyCard{
    min-height:0 !important;
    padding:7px 10px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    scrollbar-width:thin !important;
    scrollbar-color:rgba(255,209,102,.55) rgba(15,23,42,.25) !important;
  }
  html body.inGame .storySidePanel .nearbyCard .small{
    margin-bottom:2px !important;
    line-height:1 !important;
  }
  html body.inGame .storySidePanel .nearbyCard .name{
    font-size:clamp(13px,.88vw,15px) !important;
    line-height:1.08 !important;
    margin:0 0 2px !important;
  }
  html body.inGame .storySidePanel .nearbyCard .desc{
    display:block !important;
    -webkit-line-clamp:unset !important;
    -webkit-box-orient:unset !important;
    overflow:visible !important;
    font-size:clamp(10px,.70vw,11.5px) !important;
    line-height:1.18 !important;
    max-height:none !important;
  }
  html body.inGame .storySidePanel .nearbyCard .btn,
  html body.inGame .storySidePanel .nearbyCard button{
    margin-top:5px !important;
    padding:5px 9px !important;
    min-height:25px !important;
    font-size:10.5px !important;
  }
  html body.inGame .storySidePanel .controlsMiniPanel{
    min-height:0 !important;
    padding:9px 11px 10px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    scrollbar-width:thin !important;
    scrollbar-color:rgba(125,211,252,.55) rgba(15,23,42,.25) !important;
  }
  html body.inGame .controlsMiniPanel .miniTitle{
    margin-bottom:7px !important;
  }
  html body.inGame .controlsMiniPanel .controlsGuideList{
    gap:6px !important;
  }
  html body.inGame .controlsMiniPanel .controlGuideLine{
    grid-template-columns:44px auto 28px auto !important;
    gap:6px 8px !important;
  }
  html body.inGame .controlsMiniPanel .controlMoveRow{
    padding:5px 7px !important;
  }
  html body.inGame .controlsMiniPanel .controlActionLine,
  html body.inGame .controlsMiniPanel .controlHelpLine{
    padding:5px 8px !important;
    min-height:31px !important;
    font-size:clamp(11px,.74vw,12.5px) !important;
    line-height:1.12 !important;
  }
  html body.inGame .controlsMiniPanel .keyCluster{
    grid-template-columns:repeat(3,22px) !important;
    grid-template-rows:repeat(2,21px) !important;
    gap:3px !important;
  }
  html body.inGame .controlsMiniPanel .keyCluster .keyIconCap,
  html body.inGame .controlsMiniPanel .actionKeyCap{
    min-width:22px !important;
    width:22px !important;
    height:21px !important;
    font-size:11px !important;
  }
}

/* Game Guide manual: keep keyboard icons compact and centered instead of turning them into full-width bars */
.modal.gameManualModal .gameManualContentV249 .manualMoveCard .movementControlsInline,
.modal.gameManualModal .gameManualContentV249 .manualPanelsCard .movementControlsInline{
  display:grid !important;
  grid-template-columns:max-content max-content max-content !important;
  align-items:center !important;
  justify-content:start !important;
  gap:10px !important;
  width:max-content !important;
  max-width:100% !important;
  margin:4px 0 10px !important;
  padding:10px 12px !important;
  border-radius:16px !important;
  background:linear-gradient(180deg,#f8fbff,#eff6ff) !important;
  border:1.5px solid rgba(96,165,250,.34) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.82), 0 8px 16px rgba(37,99,235,.08) !important;
}
.modal.gameManualModal .gameManualContentV249 .manualMoveCard .movementControlsInline .keyCluster,
.modal.gameManualModal .gameManualContentV249 .manualPanelsCard .movementControlsInline .keyCluster{
  display:grid !important;
  grid-template-columns:repeat(3,26px) !important;
  grid-template-rows:repeat(2,25px) !important;
  gap:4px !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:0 !important;
}
.modal.gameManualModal .gameManualContentV249 .manualMoveCard .movementControlsInline .keyCluster > span,
.modal.gameManualModal .gameManualContentV249 .manualPanelsCard .movementControlsInline .keyCluster > span{
  display:block !important;
  width:26px !important;
  min-width:26px !important;
  height:25px !important;
  margin:0 !important;
  padding:0 !important;
}
.modal.gameManualModal .gameManualContentV249 .manualMoveCard .movementControlsInline .keyCluster .keyIconCap,
.modal.gameManualModal .gameManualContentV249 .manualPanelsCard .movementControlsInline .keyCluster .keyIconCap{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:26px !important;
  min-width:26px !important;
  height:25px !important;
  padding:0 !important;
  border-radius:8px !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  box-shadow:0 3px 0 rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
.modal.gameManualModal .gameManualContentV249 .manualMoveCard .movementControlsInline .arrowKeyCluster .keyIconCap,
.modal.gameManualModal .gameManualContentV249 .manualPanelsCard .movementControlsInline .arrowKeyCluster .keyIconCap{
  color:#ffffff !important;
  background:linear-gradient(180deg,#60a5fa,#2563eb) !important;
  border:1px solid rgba(37,99,235,.46) !important;
}
.modal.gameManualModal .gameManualContentV249 .manualMoveCard .movementControlsInline .wasdKeyCluster .keyIconCap,
.modal.gameManualModal .gameManualContentV249 .manualPanelsCard .movementControlsInline .wasdKeyCluster .keyIconCap{
  color:#7c2d12 !important;
  background:linear-gradient(180deg,#fff7ed,#fed7aa) !important;
  border:1px solid rgba(249,115,22,.38) !important;
  font-size:11px !important;
}
.modal.gameManualModal .gameManualContentV249 .manualMoveCard .movementControlsInline .controlOr,
.modal.gameManualModal .gameManualContentV249 .manualPanelsCard .movementControlsInline .controlOr{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:34px !important;
  height:24px !important;
  padding:0 8px !important;
  border-radius:999px !important;
  color:#9a3412 !important;
  background:linear-gradient(180deg,#fff7ed,#ffedd5) !important;
  border:1px solid rgba(249,115,22,.32) !important;
  font-size:11px !important;
  font-weight:1000 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}
.modal.gameManualModal .gameManualContentV249 .manualMoveCard .movementControlsInline + br,
.modal.gameManualModal .gameManualContentV249 .manualPanelsCard .movementControlsInline + br{
  display:none !important;
}
@media(max-width:760px){
  .modal.gameManualModal .gameManualContentV249 .manualMoveCard .movementControlsInline,
  .modal.gameManualModal .gameManualContentV249 .manualPanelsCard .movementControlsInline{
    grid-template-columns:max-content !important;
    justify-content:start !important;
    gap:6px !important;
    width:fit-content !important;
    padding:9px 10px !important;
  }
  .modal.gameManualModal .gameManualContentV249 .manualMoveCard .movementControlsInline .controlOr,
  .modal.gameManualModal .gameManualContentV249 .manualPanelsCard .movementControlsInline .controlOr{
    justify-self:center !important;
  }
}

@media (min-width:861px) and (hover:hover) and (pointer:fine){
  html body.inGame .storySidePanel{
    grid-template-rows:
      minmax(180px, 1fr)  /* Current Objective gets extra space */
      auto                /* Nearby fits content */
      max-content         /* How to Play fits content exactly */
      auto                /* Action buttons */
      auto                /* Utility row */
      auto                /* Review mode, if present */
      !important;
    gap:7px !important;
  }

  html body.inGame .storySidePanel .objectiveCard{
    min-height:0 !important;
    overflow-y:auto !important;
  }

  html body.inGame .storySidePanel .nearbyCard{
    max-height:72px !important;
    min-height:54px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  html body.inGame .storySidePanel .controlsMiniPanel{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    align-self:start !important;
  }
}


/* Desktop focus mode: maximize the playable canvas without changing story content or progress. */
.gameFocusToggle{
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:18;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.62);
  border-radius:16px;
  color:#fff7ed;
  background:linear-gradient(180deg,rgba(15,23,42,.82),rgba(2,6,23,.92));
  box-shadow:0 8px 22px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.22);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:.88;
  transition:transform .16s ease, opacity .16s ease, border-color .16s ease, background .16s ease;
}
.gameFocusToggle:hover,
.gameFocusToggle:focus-visible{
  opacity:1;
  transform:translateY(-1px);
  border-color:rgba(255,209,102,.85);
  outline:none;
  box-shadow:0 10px 24px rgba(0,0,0,.42), 0 0 0 3px rgba(255,209,102,.20), inset 0 1px 0 rgba(255,255,255,.28);
}
.gameFocusToggle .gameFocusIcon{
  font-size:24px;
  line-height:1;
  font-weight:1000;
  transform:translateY(-1px);
}
.gameFocusToggle .gameFocusLabel{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
@media (hover:none), (pointer:coarse), (max-width:860px){
  .gameFocusToggle{display:none!important;}
}
@media (min-width:861px) and (hover:hover) and (pointer:fine){
  body.gameFocusMode{
    overflow:hidden!important;
    background:#020617!important;
  }
  body.gameFocusMode .header,
  body.gameFocusMode #authSessionBar,
  body.gameFocusMode #teamMailboxBtn{
    display:none!important;
  }
  body.gameFocusMode .wrap.frontierWrap{
    max-width:none!important;
    width:100vw!important;
    height:100dvh!important;
    margin:0!important;
    padding:0!important;
  }
  body.gameFocusMode #game.screen{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:9998!important;
    width:100vw!important;
    height:100dvh!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 50% 40%,rgba(37,99,235,.18),transparent 42%),
      #020617!important;
  }
  body.gameFocusMode #game .hud,
  body.gameFocusMode #game .storySidePanel,
  body.gameFocusMode #game .storyBottomDesk,
  body.gameFocusMode #mobileControls{
    display:none!important;
  }
  body.gameFocusMode #game .gameGrid.storyDashboard{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100vw!important;
    height:100dvh!important;
    gap:0!important;
    margin:0!important;
    padding:0!important;
  }
  body.gameFocusMode #game .gameShell{
    position:relative!important;
    width:min(100vw, calc(100dvh * 1.7777778))!important;
    height:min(100dvh, calc(100vw * .5625))!important;
    max-width:100vw!important;
    max-height:100dvh!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 24px 80px rgba(0,0,0,.55)!important;
    background:#020617!important;
    overflow:hidden!important;
  }
  body.gameFocusMode #game canvas#canvas{
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:#020617!important;
  }
  body.gameFocusMode #gameFocusToggle{
    right:18px;
    bottom:18px;
    width:48px;
    height:48px;
    border-radius:18px;
    opacity:.96;
    background:linear-gradient(180deg,rgba(30,41,59,.92),rgba(2,6,23,.96));
  }
  body.gameFocusMode #orientationPrompt{
    display:none!important;
  }
}


/* Focus Mode modal layer: keep teacher lessons and game modals visible while the map stays fullscreen. */
@media (min-width:861px) and (hover:hover) and (pointer:fine){
  body.gameFocusMode #modal{
    z-index:10020!important;
    padding:clamp(10px,2vw,22px)!important;
    background:radial-gradient(circle at 50% 18%,rgba(15,23,42,.40),rgba(2,6,23,.82) 62%,rgba(0,0,0,.90))!important;
  }
  body.gameFocusMode #modal .modalBox{
    max-height:calc(100dvh - 28px)!important;
  }
}

/* iPad/tablet Focus Mode: keep touch controls in place, add Focus/Exit at top-right.
   Scoped by JS body.tabletFocusCapable so phones and PC keep their existing behavior. */
@media (hover:none) and (pointer:coarse){
  body.tabletFocusCapable.inGame .gameFocusToggle:not([hidden]){
    display:inline-flex!important;
    position:absolute!important;
    top:calc(12px + env(safe-area-inset-top, 0px))!important;
    right:calc(12px + env(safe-area-inset-right, 0px))!important;
    bottom:auto!important;
    left:auto!important;
    z-index:1400!important;
    width:46px!important;
    height:46px!important;
    border-radius:16px!important;
    opacity:.94!important;
    background:linear-gradient(180deg,rgba(15,23,42,.86),rgba(2,6,23,.94))!important;
    border-color:rgba(255,255,255,.58)!important;
    touch-action:manipulation!important;
  }

  body.tabletFocusCapable.gameFocusMode{
    overflow:hidden!important;
    background:#020617!important;
    touch-action:none!important;
  }

  body.tabletFocusCapable.gameFocusMode .header,
  body.tabletFocusCapable.gameFocusMode #authSessionBar,
  body.tabletFocusCapable.gameFocusMode #teamMailboxBtn{
    display:none!important;
  }

  body.tabletFocusCapable.gameFocusMode .wrap.frontierWrap{
    max-width:none!important;
    width:100vw!important;
    height:100svh!important;
    height:100dvh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  body.tabletFocusCapable.gameFocusMode #game.screen{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:9998!important;
    width:100vw!important;
    height:100svh!important;
    height:100dvh!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 50% 38%,rgba(37,99,235,.18),transparent 46%),
      #020617!important;
  }

  body.tabletFocusCapable.gameFocusMode #game .hud,
  body.tabletFocusCapable.gameFocusMode #game .storySidePanel,
  body.tabletFocusCapable.gameFocusMode #game .storyBottomDesk,
  body.tabletFocusCapable.gameFocusMode #orientationPrompt{
    display:none!important;
  }

  body.tabletFocusCapable.gameFocusMode #game .gameGrid.storyDashboard{
    --tabletFocusControlsH:clamp(78px, 11dvh, 112px);
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    align-items:center!important;
    justify-items:center!important;
    width:100vw!important;
    height:100svh!important;
    height:100dvh!important;
    gap:8px!important;
    margin:0!important;
    padding:
      calc(8px + env(safe-area-inset-top, 0px))
      calc(10px + env(safe-area-inset-right, 0px))
      calc(8px + env(safe-area-inset-bottom, 0px))
      calc(10px + env(safe-area-inset-left, 0px))!important;
    overflow:hidden!important;
  }

  body.tabletFocusCapable.gameFocusMode #game .gameShell{
    grid-column:1!important;
    grid-row:1!important;
    position:relative!important;
    align-self:center!important;
    justify-self:center!important;
    width:min(
      calc(100vw - 20px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)),
      calc((100dvh - var(--tabletFocusControlsH) - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 1.7777778)
    )!important;
    height:min(
      calc(100dvh - var(--tabletFocusControlsH) - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)),
      calc((100vw - 20px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) * .5625)
    )!important;
    max-width:calc(100vw - 20px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))!important;
    max-height:calc(100dvh - var(--tabletFocusControlsH) - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))!important;
    min-height:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 22px 70px rgba(0,0,0,.52)!important;
    background:#020617!important;
    overflow:hidden!important;
    display:block!important;
  }

  body.tabletFocusCapable.gameFocusMode #game canvas#canvas{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:#020617!important;
    object-fit:contain!important;
    object-position:center center!important;
  }

  body.tabletFocusCapable.gameFocusMode #mobileControls.mobileControls{
    grid-column:1!important;
    grid-row:2!important;
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    z-index:10005!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;
    justify-content:stretch!important;
    justify-self:center!important;
    width:min(92vw, 860px)!important;
    max-width:calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))!important;
    min-height:58px!important;
    padding:7px 8px!important;
    gap:8px!important;
    pointer-events:auto!important;
    border:1px solid rgba(211,169,88,.46)!important;
    border-radius:16px!important;
    background:linear-gradient(180deg,rgba(9,15,28,.92),rgba(3,6,16,.94))!important;
    box-shadow:0 10px 26px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08)!important;
    touch-action:none!important;
  }

  body.tabletFocusCapable.gameFocusMode #mobileControls .mobileDpad{
    width:auto!important;
    height:auto!important;
    display:grid!important;
    grid-template-columns:repeat(4, clamp(38px, 7vw, 48px))!important;
    gap:6px!important;
    transform:none!important;
    pointer-events:auto!important;
  }

  body.tabletFocusCapable.gameFocusMode #mobileControls .mobileBtn{
    position:static!important;
    left:auto!important;
    top:auto!important;
    width:clamp(38px, 7vw, 48px)!important;
    height:clamp(38px, 7vw, 48px)!important;
    min-width:38px!important;
    min-height:38px!important;
    border-radius:13px!important;
    font-size:clamp(16px, 3vw, 21px)!important;
  }

  body.tabletFocusCapable.gameFocusMode #mobileControls .mobileLeft{order:1!important;}
  body.tabletFocusCapable.gameFocusMode #mobileControls .mobileUp{order:2!important;}
  body.tabletFocusCapable.gameFocusMode #mobileControls .mobileDown{order:3!important;}
  body.tabletFocusCapable.gameFocusMode #mobileControls .mobileRight{order:4!important;}

  body.tabletFocusCapable.gameFocusMode #mobileControls .mobileActionStack{
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:8px!important;
    min-width:0!important;
    width:100%!important;
  }

  body.tabletFocusCapable.gameFocusMode #mobileControls .mobileInteract,
  body.tabletFocusCapable.gameFocusMode #mobileControls .mobileMenuToggle{
    position:static!important;
    display:grid!important;
    place-items:center!important;
    align-content:center!important;
    min-width:clamp(82px, 15vw, 112px)!important;
    width:auto!important;
    height:clamp(44px, 7vw, 56px)!important;
    min-height:44px!important;
    padding:7px 11px!important;
    border-radius:14px!important;
    line-height:1!important;
    pointer-events:auto!important;
  }

  body.tabletFocusCapable.gameFocusMode #gameFocusToggle:not([hidden]){
    position:fixed!important;
    top:calc(12px + env(safe-area-inset-top, 0px))!important;
    right:calc(12px + env(safe-area-inset-right, 0px))!important;
    bottom:auto!important;
    left:auto!important;
    z-index:10040!important;
    width:48px!important;
    height:48px!important;
    border-radius:18px!important;
    opacity:.98!important;
    background:linear-gradient(180deg,rgba(30,41,59,.94),rgba(2,6,23,.97))!important;
    box-shadow:0 12px 28px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.22)!important;
  }

  body.tabletFocusCapable.gameFocusMode #modal{
    z-index:10020!important;
    padding:clamp(8px, 2vw, 18px)!important;
    background:radial-gradient(circle at 50% 18%,rgba(15,23,42,.40),rgba(2,6,23,.82) 62%,rgba(0,0,0,.90))!important;
    touch-action:auto!important;
  }

  body.tabletFocusCapable.gameFocusMode #modal .modalBox{
    max-height:calc(100dvh - 24px)!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
  }
}

/* iPad Focus Mode controls repair: keep touch controls visible on the map,
   keep E in the bottom-right play area, and hide Focus while story/lesson
   modals are open. Scoped to tabletFocusCapable only, so PC and phones are unchanged. */
@media (hover:none) and (pointer:coarse){
  body.tabletFocusCapable.inGame.modalOpen #gameFocusToggle{
    display:none!important;
  }

  body.tabletFocusCapable.gameFocusMode:not(.modalOpen) #mobileControls.mobileControls{
    position:fixed!important;
    left:calc(18px + env(safe-area-inset-left, 0px))!important;
    right:calc(18px + env(safe-area-inset-right, 0px))!important;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px))!important;
    z-index:10035!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    width:auto!important;
    max-width:none!important;
    min-height:0!important;
    height:auto!important;
    padding:0!important;
    gap:12px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:none!important;
    touch-action:none!important;
  }

  body.tabletFocusCapable.gameFocusMode:not(.modalOpen) #mobileControls .mobileDpad{
    position:relative!important;
    flex:0 0 130px!important;
    width:130px!important;
    height:130px!important;
    display:block!important;
    transform:none!important;
    pointer-events:auto!important;
  }

  body.tabletFocusCapable.gameFocusMode:not(.modalOpen) #mobileControls .mobileBtn{
    position:absolute!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    border-radius:15px!important;
    font-size:19px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    pointer-events:auto!important;
    background:linear-gradient(180deg,rgba(37,99,235,.96),rgba(29,78,216,.90))!important;
    border-color:rgba(191,219,254,.90)!important;
    box-shadow:0 10px 22px rgba(2,6,23,.36), inset 0 1px 0 rgba(255,255,255,.22)!important;
  }

  body.tabletFocusCapable.gameFocusMode:not(.modalOpen) #mobileControls .mobileUp{left:42px!important;top:0!important;}
  body.tabletFocusCapable.gameFocusMode:not(.modalOpen) #mobileControls .mobileLeft{left:0!important;top:42px!important;}
  body.tabletFocusCapable.gameFocusMode:not(.modalOpen) #mobileControls .mobileDown{left:42px!important;top:84px!important;}
  body.tabletFocusCapable.gameFocusMode:not(.modalOpen) #mobileControls .mobileRight{left:84px!important;top:42px!important;}

  body.tabletFocusCapable.gameFocusMode:not(.modalOpen) #mobileControls .mobileActionStack{
    display:flex!important;
    flex:0 0 auto!important;
    align-items:flex-end!important;
    justify-content:flex-end!important;
    gap:10px!important;
    width:auto!important;
    min-width:0!important;
    pointer-events:auto!important;
  }

  body.tabletFocusCapable.gameFocusMode:not(.modalOpen) #mobileControls .mobileInteract{
    position:static!important;
    display:grid!important;
    place-items:center!important;
    align-content:center!important;
    min-width:92px!important;
    width:92px!important;
    height:64px!important;
    min-height:64px!important;
    padding:8px 10px!important;
    border-radius:20px!important;
    line-height:1!important;
    pointer-events:auto!important;
    background:linear-gradient(180deg,rgba(245,158,11,.96),rgba(180,83,9,.92))!important;
    border-color:rgba(253,230,138,.92)!important;
    box-shadow:0 12px 26px rgba(2,6,23,.42), inset 0 1px 0 rgba(255,255,255,.24)!important;
  }

  body.tabletFocusCapable.gameFocusMode:not(.modalOpen) #mobileControls .mobileInteractLabel{
    max-width:78px!important;
    font-size:13px!important;
    line-height:1!important;
  }

  body.tabletFocusCapable.gameFocusMode:not(.modalOpen) #mobileControls .mobileInteractKey{
    font-size:10px!important;
    line-height:1!important;
  }

  body.tabletFocusCapable.gameFocusMode:not(.modalOpen) #mobileControls .mobileMenuToggle{
    display:none!important;
  }
}

/* Story 2 Elder Data Tent polish: stacked, scrollable cinematic dialogue.
   Scoped only to the Elder finale tour so other story cinematics and intros are unchanged. */
.modal.dialoguePosterModal.tourModal .tourCinematic.story2ElderTour .tourCinematicScene{
  position:relative;
}
.modal.dialoguePosterModal.tourModal .tourCinematic.story2ElderTour .tourBubbleLayer.tourDialogueScroll{
  left:clamp(16px,4%,42px);
  right:clamp(16px,4%,42px);
  top:auto;
  bottom:clamp(14px,3.2%,32px);
  max-height:min(34%,220px);
  padding:10px 12px 12px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:8px;
  overflow-x:hidden;
  overflow-y:auto;
  pointer-events:auto;
  background:linear-gradient(180deg,rgba(8,10,18,.20),rgba(8,10,18,.50));
  border:1px solid rgba(231,190,119,.42);
  border-radius:18px;
  box-shadow:0 16px 42px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(2px);
}
.modal.dialoguePosterModal.tourModal .tourCinematic.story2ElderTour .tourBubbleLayer.tourDialogueScroll::-webkit-scrollbar{
  width:9px;
}
.modal.dialoguePosterModal.tourModal .tourCinematic.story2ElderTour .tourBubbleLayer.tourDialogueScroll::-webkit-scrollbar-track{
  background:rgba(15,23,42,.28);
  border-radius:999px;
}
.modal.dialoguePosterModal.tourModal .tourCinematic.story2ElderTour .tourBubbleLayer.tourDialogueScroll::-webkit-scrollbar-thumb{
  background:rgba(231,190,119,.78);
  border-radius:999px;
}
.modal.dialoguePosterModal.tourModal .tourCinematic.story2ElderTour .tourBubbleLayer.tourDialogueScroll .tourBubble{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  max-width:none!important;
  width:min(720px,calc(100% - 8px));
  margin:0!important;
  transform:translateY(8px) scale(.985);
}
.modal.dialoguePosterModal.tourModal .tourCinematic.story2ElderTour .tourBubbleLayer.tourDialogueScroll .tourBubble.left{
  align-self:flex-start;
}
.modal.dialoguePosterModal.tourModal .tourCinematic.story2ElderTour .tourBubbleLayer.tourDialogueScroll .tourBubble.hero{
  align-self:flex-end;
}
.modal.dialoguePosterModal.tourModal .tourCinematic.story2ElderTour .tourBubbleLayer.tourDialogueScroll .tourBubble.visible{
  transform:translateY(0) scale(1);
}
.modal.dialoguePosterModal.tourModal .tourCinematic.story2ElderTour .tourBubbleLayer.tourDialogueScroll .tourBubble::after{
  display:none;
}
.modal.dialoguePosterModal.tourModal .tourCinematic.story2ElderTour .tourBubbleLayer.tourDialogueScroll .tourBubbleBody{
  font-size:clamp(15px,1.08vw,19px);
  line-height:1.22;
}
@media (max-width:900px){
  .modal.dialoguePosterModal.tourModal .tourCinematic.story2ElderTour .tourBubbleLayer.tourDialogueScroll{
    left:12px;
    right:12px;
    bottom:12px;
    max-height:42%;
  }
  .modal.dialoguePosterModal.tourModal .tourCinematic.story2ElderTour .tourBubbleLayer.tourDialogueScroll .tourBubbleBody{
    font-size:14px;
  }
}


/* STORY1_CERTIFICATE_CTA_V2: Stanford Data Ocean next-step cards after Story 1 completion */
.certificateCtaCard,
.certificateCtaMini,
.certificateCtaJournal{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(37,99,235,.28);
  background:linear-gradient(135deg,rgba(239,246,255,.98),rgba(255,247,237,.96));
  color:#10213f;
  border-radius:18px;
  box-shadow:0 14px 28px rgba(37,99,235,.13);
}
.certificateCtaCard{
  grid-column:1/-1;
  min-height:0;
}
.certificateCtaCard::after,
.certificateCtaMini::after,
.certificateCtaJournal::after{
  content:"";
  position:absolute;
  inset:auto -28px -38px auto;
  width:130px;
  height:130px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(251,191,36,.25),rgba(37,99,235,0));
  pointer-events:none;
}
.certificateCtaKicker{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  margin-bottom:8px;
  border-radius:999px;
  background:rgba(37,99,235,.11);
  color:#1e3a8a;
  font-size:12px;
  line-height:1;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.certificateCtaCard h3,
.certificateCtaMini h3,
.certificateCtaJournal h3{
  margin:0 0 7px;
  color:#111827;
  font-weight:1000;
}
.certificateCtaCard h3{font-size:22px;}
.certificateCtaMini h3,
.certificateCtaJournal h3{font-size:15px;}
.certificateCtaCard p,
.certificateCtaMini p,
.certificateCtaJournal p{
  margin:0;
  color:#1f2937;
  font-size:13px;
  line-height:1.42;
  font-weight:750;
}
.certificateCtaCard p{font-size:14px;max-width:940px;}
.certificateCtaModules{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
.certificateCtaModules span{
  display:inline-flex;
  align-items:center;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(37,99,235,.18);
  background:rgba(255,255,255,.72);
  color:#1e3a8a;
  font-size:12px;
  font-weight:900;
}
.certificateCtaPreviewFrame{
  margin-top:13px;
  padding:8px;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(248,250,252,.82));
  border:1px solid rgba(15,23,42,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 22px rgba(15,23,42,.12);
}
.certificateCtaPreviewFrame img{
  display:block;
  width:100%;
  max-height:330px;
  object-fit:contain;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  background:#f8fafc;
}
.certificateCtaImageNote{
  margin-top:7px;
  color:#475569;
  font-size:12px;
  font-weight:800;
}
.certificateCtaActions{
  margin-top:12px;
  display:flex;
  justify-content:flex-start;
}
.certificateCtaBtn{
  box-shadow:0 10px 20px rgba(37,99,235,.20);
}
.certificateCtaMini{
  margin-top:12px;
  padding:12px;
}
.certificateCtaMini .certificateCtaActions,
.certificateCtaJournal .certificateCtaActions{
  margin-top:10px;
}
.certificateCtaMini .certificateCtaBtn,
.certificateCtaJournal .certificateCtaBtn{
  width:100%;
  justify-content:center;
}
.certificateCtaJournal{
  padding:14px;
}
@media(max-width:760px){
  .certificateCtaCard,
  .certificateCtaMini,
  .certificateCtaJournal{border-radius:15px;}
  .certificateCtaModules span{font-size:11px;}
  .certificateCtaPreviewFrame img{max-height:240px;}
}

/* STORY1_CERTIFICATE_CTA_LAYOUT_V3
   Story complete gets a cleaner two-column layout: summary cards stacked on the left,
   Stanford Data Ocean next-step preview on the right. Review-mode CTA stays scrollable
   in the side panel instead of pushing the controls out of view. */
.winGrid.storyCompleteWithCta{
  display:grid;
  grid-template-columns:minmax(240px,.82fr) minmax(420px,1.55fr);
  gap:16px;
  align-items:stretch;
}
.winSummaryStack{
  min-width:0;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  align-content:start;
}
.winGrid.storyCompleteWithCta .winSummaryStack .winCard{
  min-height:0;
  padding:16px 17px;
}
.winGrid.storyCompleteWithCta .winSummaryStack .winCard h3{
  font-size:20px;
}
.winCertificateColumn{
  min-width:0;
  display:flex;
}
.winGrid.storyCompleteWithCta .certificateCtaCardLarge{
  grid-column:auto;
  width:100%;
  min-height:0;
  padding:18px;
  display:flex;
  flex-direction:column;
}
.winGrid.storyCompleteWithCta .certificateCtaCardLarge p{
  max-width:none;
}
.winGrid.storyCompleteWithCta .certificateCtaCardLarge .certificateCtaPreviewFrame{
  flex:1 1 auto;
  min-height:230px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.winGrid.storyCompleteWithCta .certificateCtaCardLarge .certificateCtaPreviewFrame img{
  max-height:420px;
}
.winGrid.storyCompleteWithCta .certificateCtaCardLarge .certificateCtaActions{
  margin-top:14px;
}

body.storyReviewMode.inGame #reviewModeBanner.reviewModeBanner{
  max-height:clamp(168px,24vh,282px);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
  padding-right:12px;
}
body.storyReviewMode.inGame #reviewModeBanner.reviewModeBanner .certificateCtaMini{
  margin-top:10px;
}
body.storyReviewMode.inGame #reviewModeBanner.reviewModeBanner .certificateCtaMini p{
  font-size:12px;
  line-height:1.35;
}
body.storyReviewMode.inGame #reviewModeBanner.reviewModeBanner .certificateCtaMini .certificateCtaModules{
  gap:5px;
  margin-top:8px;
}
body.storyReviewMode.inGame #reviewModeBanner.reviewModeBanner .certificateCtaMini .certificateCtaActions{
  margin-top:9px;
}
@media (min-width:861px) and (hover:hover) and (pointer:fine){
  html body.storyReviewMode.inGame .storySidePanel{
    grid-template-rows:
      minmax(150px,.85fr)
      auto
      max-content
      auto
      auto
      minmax(168px,.62fr)
      !important;
  }
  html body.storyReviewMode.inGame .storySidePanel #reviewModeBanner.reviewModeBanner{
    height:100%;
    max-height:none;
    min-height:0;
  }
}
@media(max-width:960px){
  .winGrid.storyCompleteWithCta{
    grid-template-columns:1fr;
  }
  .winCertificateColumn{
    display:block;
  }
  .winGrid.storyCompleteWithCta .certificateCtaCardLarge .certificateCtaPreviewFrame{
    min-height:0;
  }
  .winGrid.storyCompleteWithCta .certificateCtaCardLarge .certificateCtaPreviewFrame img{
    max-height:280px;
  }
}

/* STORY1_SDO_CTA_COMPACT_V4
   Keep the review-mode Stanford Data Ocean card visible in the normal side panel.
   It still scrolls when the viewport is short, but the default desktop/tablet card
   is compact enough to show the button without hiding content. */
body.storyReviewMode.inGame #reviewModeBanner.reviewModeBanner{
  padding:10px 12px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
}
body.storyReviewMode.inGame #reviewModeBanner.reviewModeBanner > b{
  margin-bottom:3px!important;
}
body.storyReviewMode.inGame #reviewModeBanner.reviewModeBanner > span{
  font-size:12px!important;
  line-height:1.25!important;
}
body.storyReviewMode.inGame #reviewModeBanner.reviewModeBanner .certificateCtaMini{
  margin-top:8px!important;
  padding:10px 12px!important;
  border-radius:16px!important;
}
body.storyReviewMode.inGame #reviewModeBanner.reviewModeBanner .certificateCtaMini .certificateCtaKicker{
  margin-bottom:6px!important;
  padding:4px 8px!important;
  font-size:10.5px!important;
  letter-spacing:.075em!important;
}
body.storyReviewMode.inGame #reviewModeBanner.reviewModeBanner .certificateCtaMini h3{
  margin-bottom:5px!important;
  font-size:14px!important;
  line-height:1.05!important;
}
body.storyReviewMode.inGame #reviewModeBanner.reviewModeBanner .certificateCtaMini p{
  font-size:11.5px!important;
  line-height:1.28!important;
}
body.storyReviewMode.inGame #reviewModeBanner.reviewModeBanner .certificateCtaMini .certificateCtaModules{
  margin-top:7px!important;
  gap:4px!important;
}
body.storyReviewMode.inGame #reviewModeBanner.reviewModeBanner .certificateCtaMini .certificateCtaModules span{
  padding:4px 6px!important;
  font-size:10.5px!important;
  line-height:1.1!important;
}
body.storyReviewMode.inGame #reviewModeBanner.reviewModeBanner .certificateCtaMini .certificateCtaActions{
  margin-top:8px!important;
}
body.storyReviewMode.inGame #reviewModeBanner.reviewModeBanner .certificateCtaMini .certificateCtaBtn{
  min-height:34px!important;
  padding:8px 10px!important;
  font-size:13px!important;
  line-height:1.1!important;
}
@media (min-width:861px) and (hover:hover) and (pointer:fine){
  html body.storyReviewMode.inGame .storySidePanel{
    grid-template-rows:
      minmax(150px, 1fr)
      auto
      max-content
      auto
      auto
      max-content
      !important;
  }
  html body.storyReviewMode.inGame #reviewModeBanner.reviewModeBanner{
    height:auto!important;
    max-height:min(248px, 30vh)!important;
  }
}
@media (max-width:860px){
  body.storyReviewMode.inGame #reviewModeBanner.reviewModeBanner{
    max-height:min(340px, 42svh)!important;
  }
  body.storyReviewMode.inGame #reviewModeBanner.reviewModeBanner .certificateCtaMini{
    padding:9px 10px!important;
  }
  body.storyReviewMode.inGame #reviewModeBanner.reviewModeBanner .certificateCtaMini .certificateCtaModules span{
    font-size:10px!important;
  }
}
@media (max-width:520px){
  body.storyReviewMode.inGame #reviewModeBanner.reviewModeBanner .certificateCtaMini p{
    font-size:11px!important;
  }
  body.storyReviewMode.inGame #reviewModeBanner.reviewModeBanner .certificateCtaMini .certificateCtaBtn{
    font-size:12px!important;
  }
}

/* IPAD_PORTRAIT_POLISH_V1
   iPad-only portrait cleanup. No PC/desktop and no phone changes.
   Goals: allow vertical scrolling, protect the signed-in dock, organize the
   stacked game panels, keep Review Mode/SDO CTA visible, and make the story
   intro cinematic usable in portrait. */
@media (hover:none) and (pointer:coarse) and (min-width:761px) and (max-width:1180px) and (orientation:portrait){
  body.tabletFocusCapable.inGame:not(.gameFocusMode){
    overflow-x:hidden!important;
    overflow-y:auto!important;
    touch-action:pan-y!important;
    overscroll-behavior-y:auto!important;
  }

  body.tabletFocusCapable.inGame:not(.gameFocusMode) .wrap{
    height:auto!important;
    min-height:100svh!important;
    overflow:visible!important;
    padding:
      calc(56px + env(safe-area-inset-top, 0px))
      calc(10px + env(safe-area-inset-right, 0px))
      calc(20px + env(safe-area-inset-bottom, 0px))
      calc(10px + env(safe-area-inset-left, 0px))!important;
  }

  body.tabletFocusCapable.inGame:not(.gameFocusMode) #game.screen{
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    display:grid!important;
    grid-template-rows:auto auto!important;
    gap:8px!important;
  }

  /* Keep the sign-in dock readable without covering the HUD. */
  body.tabletFocusCapable.inGame:not(.gameFocusMode) .authSessionBar{
    top:calc(7px + env(safe-area-inset-top, 0px))!important;
    right:calc(8px + env(safe-area-inset-right, 0px))!important;
    width:auto!important;
    max-width:min(340px, calc(100vw - 18px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)))!important;
    min-height:38px!important;
    padding:6px 7px 6px 9px!important;
    gap:7px!important;
    border-radius:17px!important;
    transform:none!important;
  }
  body.tabletFocusCapable.inGame:not(.gameFocusMode) .authSessionLabel{
    font-size:8.5px!important;
    letter-spacing:.10em!important;
  }
  body.tabletFocusCapable.inGame:not(.gameFocusMode) #authSessionEmail{
    max-width:min(150px, 26vw)!important;
    font-size:11px!important;
    line-height:1.05!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body.tabletFocusCapable.inGame:not(.gameFocusMode) .authSessionLogout{
    min-height:28px!important;
    padding:6px 8px!important;
    font-size:10.5px!important;
    line-height:1!important;
  }

  /* Stack gameplay like a tablet document: HUD, map, panels, progress. */
  body.tabletFocusCapable.inGame:not(.gameFocusMode) .hud{
    margin:0!important;
    padding-right:0!important;
    grid-template-columns:repeat(3, minmax(0, 1fr))!important;
    gap:7px!important;
    min-height:0!important;
  }
  body.tabletFocusCapable.inGame:not(.gameFocusMode) .hud .box{
    min-height:52px!important;
    padding:7px 9px!important;
  }
  body.tabletFocusCapable.inGame:not(.gameFocusMode) .hud .label{
    font-size:9px!important;
    letter-spacing:.11em!important;
  }
  body.tabletFocusCapable.inGame:not(.gameFocusMode) .hud .value{
    font-size:13px!important;
    line-height:1.12!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
  }

  body.tabletFocusCapable.inGame:not(.gameFocusMode) .gameGrid.storyDashboard,
  body.tabletFocusCapable.inGame:not(.gameFocusMode) .gameGrid{
    position:relative!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto!important;
    height:auto!important;
    min-height:0!important;
    gap:10px!important;
    overflow:visible!important;
  }

  body.tabletFocusCapable.inGame:not(.gameFocusMode) .gameShell{
    grid-column:1!important;
    grid-row:1!important;
    position:relative!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:16 / 9!important;
    min-height:0!important;
    max-height:none!important;
    padding:6px!important;
    overflow:hidden!important;
  }
  body.tabletFocusCapable.inGame:not(.gameFocusMode) #canvas{
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    object-fit:contain!important;
  }

  body.tabletFocusCapable.inGame:not(.gameFocusMode) #orientationPrompt{
    display:flex!important;
    top:9px!important;
    left:50%!important;
    font-size:0!important;
    padding:7px 11px!important;
    border-color:rgba(255,229,171,.42)!important;
    background:rgba(15,23,42,.82)!important;
  }
  body.tabletFocusCapable.inGame:not(.gameFocusMode) #orientationPrompt::before{
    content:'↔ Rotate iPad for the best view';
    font-size:12px!important;
    line-height:1!important;
  }

  body.tabletFocusCapable.inGame:not(.gameFocusMode) .storySidePanel{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    overflow:visible!important;
    padding:10px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto auto auto auto!important;
    gap:9px!important;
  }
  body.tabletFocusCapable.inGame:not(.gameFocusMode) .objectiveCard{
    grid-row:auto!important;
    max-height:min(48svh, 520px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body.tabletFocusCapable.inGame:not(.gameFocusMode) .nearbyCard{
    grid-row:auto!important;
    min-height:96px!important;
    max-height:190px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body.tabletFocusCapable.inGame:not(.gameFocusMode) .controlsMiniPanel{
    grid-row:auto!important;
    min-height:0!important;
    max-height:170px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  body.tabletFocusCapable.inGame:not(.gameFocusMode) .storySidePanel .btnRow,
  body.tabletFocusCapable.inGame:not(.gameFocusMode) .storySidePanel .sideUtilityRow{
    grid-row:auto!important;
  }

  body.tabletFocusCapable.inGame:not(.gameFocusMode) .storyBottomDesk{
    grid-column:1!important;
    grid-row:3!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    height:auto!important;
    min-height:0!important;
  }
  body.tabletFocusCapable.inGame:not(.gameFocusMode) .lessonProgressPanel,
  body.tabletFocusCapable.inGame:not(.gameFocusMode) .rewardPanel{
    min-height:0!important;
  }

  /* Review Mode should read like a normal tablet card and scroll only if needed. */
  body.tabletFocusCapable.storyReviewMode.inGame:not(.gameFocusMode) #reviewModeBanner.reviewModeBanner{
    grid-row:auto!important;
    max-height:none!important;
    overflow:visible!important;
    padding:12px!important;
    margin:0!important;
  }
  body.tabletFocusCapable.storyReviewMode.inGame:not(.gameFocusMode) #reviewModeBanner.reviewModeBanner .certificateCtaMini{
    margin-top:10px!important;
    padding:12px!important;
  }
  body.tabletFocusCapable.storyReviewMode.inGame:not(.gameFocusMode) #reviewModeBanner.reviewModeBanner .certificateCtaMini p{
    font-size:12px!important;
    line-height:1.32!important;
  }
  body.tabletFocusCapable.storyReviewMode.inGame:not(.gameFocusMode) #reviewModeBanner.reviewModeBanner .certificateCtaMini .certificateCtaBtn{
    min-height:42px!important;
  }

  /* Let touch controls stay attached to the map, not the long page. */
  body.tabletFocusCapable.inGame:not(.gameFocusMode) #mobileControls.mobileControls{
    position:absolute!important;
    left:18px!important;
    right:18px!important;
    top:calc((100vw - 20px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) * .5625 - 142px)!important;
    bottom:auto!important;
    max-width:none!important;
    z-index:35!important;
    pointer-events:none!important;
  }
}

/* IPAD_STORY_INTRO_PORTRAIT_V1
   The cinematic intro had a desktop-like three-column layout on iPad portrait,
   which pushed buttons/character cards into awkward positions. This keeps the
   image first, then places compact speaker cards and buttons below it. */
@media (hover:none) and (pointer:coarse) and (min-width:761px) and (max-width:1180px) and (orientation:portrait){
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal{
    align-items:flex-start!important;
    justify-content:center!important;
    padding:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .modalBox{
    width:100vw!important;
    max-width:100vw!important;
    height:auto!important;
    min-height:100svh!important;
    max-height:none!important;
    overflow:visible!important;
    border-radius:0!important;
    padding:8px!important;
  }
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .modalGrid,
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal #modalContent{
    height:auto!important;
    overflow:visible!important;
  }
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster{
    min-height:100svh!important;
    height:auto!important;
    overflow:visible!important;
    display:grid!important;
    grid-template-rows:auto auto!important;
    padding:8px!important;
    gap:8px!important;
  }
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterTitleBlock{
    padding:0 42px 6px!important;
  }
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterTitle{
    font-size:clamp(34px, 6vw, 54px)!important;
    line-height:.94!important;
    max-height:none!important;
  }
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterSubtitle{
    font-size:clamp(12px, 1.7vw, 16px)!important;
    letter-spacing:.13em!important;
  }
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroHeroShell{
    height:auto!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:clamp(430px, 54svh, 720px) auto!important;
    gap:8px!important;
  }
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroMainScene{
    grid-column:1 / -1!important;
    grid-row:1!important;
    height:100%!important;
    min-height:0!important;
    border-radius:16px!important;
  }
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroLeftPane{
    grid-column:1!important;
    grid-row:2!important;
  }
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroRightPane{
    grid-column:2!important;
    grid-row:2!important;
  }
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroSidePane{
    min-height:0!important;
    gap:8px!important;
    justify-content:flex-start!important;
  }
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroFooterPrompt{
    display:none!important;
  }
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard{
    min-height:80px!important;
    padding:8px 10px!important;
    display:grid!important;
    grid-template-columns:68px minmax(0,1fr)!important;
    grid-template-areas:'portrait tag' 'portrait name' 'portrait role'!important;
    gap:3px 10px!important;
    text-align:left!important;
    align-items:center!important;
  }
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterRoleTag{
    grid-area:tag!important;
    justify-self:start!important;
    align-self:end!important;
    margin:0!important;
    font-size:9px!important;
  }
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterPortrait{
    grid-area:portrait!important;
    width:68px!important;
    height:68px!important;
    min-width:68px!important;
    min-height:68px!important;
    border-radius:14px!important;
  }
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterName{
    grid-area:name!important;
    text-align:left!important;
    margin:0!important;
    font-size:clamp(20px, 3.4vw, 30px)!important;
    line-height:.98!important;
  }
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterRole{
    grid-area:role!important;
    text-align:left!important;
    margin:0!important;
    font-size:10px!important;
  }
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroSideActions{
    display:flex!important;
    flex-direction:row!important;
    gap:8px!important;
    margin-top:8px!important;
  }
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .posterPrimaryBtn,
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .posterSecondaryBtn{
    flex:1 1 0!important;
    min-height:44px!important;
    width:auto!important;
    padding:9px 10px!important;
    font-size:13px!important;
  }
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueOverlay{
    inset:10px 12px!important;
  }
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack{
    top:auto!important;
    bottom:10px!important;
    transform:none!important;
    gap:7px!important;
  }
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble{
    max-width:min(72%, 620px)!important;
    padding:9px 11px!important;
  }
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubbleBody{
    font-size:clamp(14px, 2.45vw, 19px)!important;
    line-height:1.15!important;
  }
}

/* IPAD_FOCUS_PORTRAIT_NUDGE_V1
   Focus Mode works in portrait, but landscape is the intended play view. Keep the
   E button and D-pad unchanged; just add a gentle rotate hint. */
@media (hover:none) and (pointer:coarse) and (min-width:761px) and (max-width:1180px) and (orientation:portrait){
  body.tabletFocusCapable.gameFocusMode:not(.modalOpen) #orientationPrompt{
    display:flex!important;
    top:calc(70px + env(safe-area-inset-top, 0px))!important;
    left:50%!important;
    font-size:0!important;
    z-index:10036!important;
    background:rgba(15,23,42,.82)!important;
    border-color:rgba(255,255,255,.34)!important;
  }
  body.tabletFocusCapable.gameFocusMode:not(.modalOpen) #orientationPrompt::before{
    content:'↔ Rotate iPad for the best full-screen view';
    font-size:12px!important;
    line-height:1!important;
  }
}

/* IPAD_TABLET_FINAL_TUNE_V2
   iPad/tablet-only follow-up: restore Focus button in landscape, keep portrait
   touch controls fully inside the viewport, and stabilize the story intro modal.
   Scoped to tabletFocusCapable + coarse pointer so PC and phones are unchanged. */
@media (hover:none) and (pointer:coarse) and (min-width:761px) and (max-width:1366px) and (orientation:landscape){
  body.tabletFocusCapable.inGame:not(.modalOpen) .gameShell #gameFocusToggle.gameFocusToggle:not([hidden]){
    display:inline-flex!important;
    position:absolute!important;
    top:calc(12px + env(safe-area-inset-top, 0px))!important;
    right:calc(12px + env(safe-area-inset-right, 0px))!important;
    bottom:auto!important;
    left:auto!important;
    z-index:1200!important;
    width:48px!important;
    height:48px!important;
    border-radius:18px!important;
    opacity:.98!important;
    background:linear-gradient(180deg,rgba(15,23,42,.88),rgba(2,6,23,.96))!important;
    border-color:rgba(255,255,255,.62)!important;
    box-shadow:0 12px 28px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.22)!important;
  }
}

@media (hover:none) and (pointer:coarse) and (min-width:761px) and (max-width:1180px) and (orientation:portrait){
  body.tabletFocusCapable.gameFocusMode:not(.modalOpen) #mobileControls.mobileControls{
    left:max(28px, calc(22px + env(safe-area-inset-left, 0px)))!important;
    right:max(28px, calc(22px + env(safe-area-inset-right, 0px)))!important;
    bottom:max(30px, calc(26px + env(safe-area-inset-bottom, 0px)))!important;
    gap:10px!important;
  }

  body.tabletFocusCapable.gameFocusMode:not(.modalOpen) #mobileControls .mobileDpad{
    flex:0 0 118px!important;
    width:118px!important;
    height:118px!important;
  }

  body.tabletFocusCapable.gameFocusMode:not(.modalOpen) #mobileControls .mobileBtn{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    border-radius:14px!important;
    font-size:18px!important;
  }

  body.tabletFocusCapable.gameFocusMode:not(.modalOpen) #mobileControls .mobileUp{left:38px!important;top:0!important;}
  body.tabletFocusCapable.gameFocusMode:not(.modalOpen) #mobileControls .mobileLeft{left:0!important;top:38px!important;}
  body.tabletFocusCapable.gameFocusMode:not(.modalOpen) #mobileControls .mobileDown{left:38px!important;top:76px!important;}
  body.tabletFocusCapable.gameFocusMode:not(.modalOpen) #mobileControls .mobileRight{left:76px!important;top:38px!important;}

  body.tabletFocusCapable.gameFocusMode:not(.modalOpen) #mobileControls .mobileInteract{
    width:88px!important;
    min-width:88px!important;
    height:60px!important;
    min-height:60px!important;
    border-radius:19px!important;
  }
}

@media (hover:none) and (pointer:coarse) and (min-width:761px) and (max-width:1180px) and (orientation:portrait){
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal{
    align-items:flex-start!important;
    justify-content:flex-start!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    padding:
      calc(10px + env(safe-area-inset-top, 0px))
      calc(8px + env(safe-area-inset-right, 0px))
      calc(16px + env(safe-area-inset-bottom, 0px))
      calc(8px + env(safe-area-inset-left, 0px))!important;
  }

  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .modalBox{
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    padding:10px!important;
  }

  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster{
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    display:grid!important;
    grid-template-rows:auto auto!important;
    gap:10px!important;
    padding:8px!important;
    overflow:visible!important;
  }

  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterTitleBlock{
    margin:0!important;
    padding:0 44px 4px!important;
  }

  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .dialoguePoster.storyIntroPoster .posterTitle{
    font-size:clamp(28px, 7vw, 52px)!important;
    line-height:.96!important;
    letter-spacing:.02em!important;
    white-space:normal!important;
  }

  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroHeroShell{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-areas:
      'scene'
      'left'
      'right'!important;
    gap:10px!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
  }

  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroMainScene{
    grid-area:scene!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    max-height:54svh!important;
    aspect-ratio:16 / 9!important;
    overflow:hidden!important;
    border-radius:16px!important;
  }

  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroMainScene img,
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroMainImg{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
  }

  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueOverlay{
    position:absolute!important;
    left:clamp(10px, 3vw, 28px)!important;
    right:clamp(10px, 3vw, 28px)!important;
    top:auto!important;
    bottom:clamp(10px, 3vw, 26px)!important;
    width:auto!important;
    max-height:46%!important;
    transform:none!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:flex-end!important;
  }

  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack{
    width:100%!important;
    max-height:100%!important;
    overflow:auto!important;
    gap:6px!important;
    padding:0!important;
  }

  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubble{
    max-width:94%!important;
    margin:0!important;
  }

  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroDialogueStack .posterBubbleBody{
    font-size:clamp(13px, 2.4vw, 18px)!important;
    line-height:1.18!important;
    padding:8px 11px!important;
  }

  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroLeftPane,
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroRightPane{
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    gap:8px!important;
  }

  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroLeftPane{grid-area:left!important;}
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroRightPane{grid-area:right!important;}

  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard{
    width:100%!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:72px minmax(0,1fr)!important;
    grid-template-areas:'portrait tag' 'portrait name' 'portrait role'!important;
    align-items:center!important;
    column-gap:10px!important;
    padding:8px 10px!important;
  }

  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterPortrait{
    grid-area:portrait!important;
    width:64px!important;
    height:64px!important;
    min-width:64px!important;
  }

  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterName{
    grid-area:name!important;
    font-size:clamp(17px, 3.2vw, 24px)!important;
    line-height:1!important;
  }

  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroSpeakerCard .posterRole{
    grid-area:role!important;
    font-size:11px!important;
    line-height:1.1!important;
  }

  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroSideActions{
    position:static!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    width:100%!important;
    margin-top:0!important;
  }

  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .posterPrimaryBtn,
  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .posterSecondaryBtn{
    width:100%!important;
    min-height:48px!important;
    margin:0!important;
    font-size:13px!important;
  }

  body.tabletFocusCapable .modal.dialoguePosterModal.storyIntroModal .storyIntroFooterPrompt{
    font-size:11px!important;
    line-height:1.2!important;
    padding:6px 8px!important;
    max-height:none!important;
  }
}

/* IPAD_SELECTOR_AUDIO_POLISH_V1
   Tablet/iPad-only: keep the path selector in normal document flow so the
   selected-story feature poster cannot sit behind the story rail, and make the
   signed-in dock compact enough that it does not cover the title. PC and phones
   are intentionally excluded by tabletFocusCapable + min-width. */
@media (hover:none) and (pointer:coarse) and (min-width:761px) and (max-width:1366px){
  body.tabletFocusCapable.frontierMenuMode{
    overflow-x:hidden!important;
    overflow-y:auto!important;
    min-height:100svh!important;
  }

  body.tabletFocusCapable.frontierMenuMode .frontierMenuScreen{
    height:auto!important;
    min-height:100svh!important;
    overflow:visible!important;
    padding:0!important;
  }

  body.tabletFocusCapable.frontierMenuMode .frontierMenuShell{
    height:auto!important;
    min-height:100svh!important;
    overflow:visible!important;
  }

  body.tabletFocusCapable.frontierMenuMode .frontierMenuInner{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    transform:none!important;
    transform-origin:center top!important;
    width:min(100%, 1120px)!important;
    min-height:100svh!important;
    margin:0 auto!important;
    padding:
      calc(76px + env(safe-area-inset-top, 0px))
      max(18px, calc(18px + env(safe-area-inset-right, 0px)))
      calc(26px + env(safe-area-inset-bottom, 0px))
      max(18px, calc(18px + env(safe-area-inset-left, 0px)))!important;
    gap:14px!important;
  }

  body.tabletFocusCapable.frontierMenuMode .pathLogoLockup,
  body.tabletFocusCapable.frontierMenuMode .stepBanner,
  body.tabletFocusCapable.frontierMenuMode .storyRailShell,
  body.tabletFocusCapable.frontierMenuMode .storyFeaturePoster,
  body.tabletFocusCapable.frontierMenuMode .stepBannerHero,
  body.tabletFocusCapable.frontierMenuMode .frontierRoster,
  body.tabletFocusCapable.frontierMenuMode .menuBottomBar{
    position:relative!important;
    z-index:1!important;
  }

  body.tabletFocusCapable.frontierMenuMode .storyFeaturePoster{
    margin-top:4px!important;
    margin-bottom:4px!important;
  }

  body.tabletFocusCapable.frontierMenuMode .authSessionBar{
    position:fixed!important;
    top:calc(8px + env(safe-area-inset-top, 0px))!important;
    right:calc(8px + env(safe-area-inset-right, 0px))!important;
    left:auto!important;
    bottom:auto!important;
    z-index:10030!important;
    width:auto!important;
    max-width:min(360px, calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)))!important;
    min-height:42px!important;
    transform:none!important;
    padding:7px 8px 7px 10px!important;
    gap:7px!important;
    border-radius:18px!important;
  }

  body.tabletFocusCapable.frontierMenuMode .authSessionCopy{
    min-width:0!important;
    align-items:flex-end!important;
    flex-direction:column!important;
    gap:1px!important;
  }

  body.tabletFocusCapable.frontierMenuMode .authSessionLabel,
  body.tabletFocusCapable.frontierMenuMode .authSessionStories{
    display:none!important;
  }

  body.tabletFocusCapable.frontierMenuMode #authSessionEmail{
    max-width:min(190px, 38vw)!important;
    font-size:12px!important;
    line-height:1.05!important;
    text-align:right!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  body.tabletFocusCapable.frontierMenuMode .authSessionLogout{
    flex:0 0 auto!important;
    padding:7px 9px!important;
    font-size:11px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
  }
}

@media (hover:none) and (pointer:coarse) and (min-width:761px) and (max-width:1180px) and (orientation:portrait){
  body.tabletFocusCapable.frontierMenuMode .frontierMenuInner{
    padding-top:calc(84px + env(safe-area-inset-top, 0px))!important;
    gap:12px!important;
  }

  body.tabletFocusCapable.frontierMenuMode .pathTitle{
    font-size:clamp(2.1rem, 7.4vw, 3.6rem)!important;
    line-height:.96!important;
  }

  body.tabletFocusCapable.frontierMenuMode .storyFeaturePoster{
    min-height:clamp(330px, 36vh, 410px)!important;
  }
}

/* IPAD_PATH_SELECTOR_STABILITY_V2
   Tablet/iPad only: keep the story selector in clean vertical document flow,
   reserve enough height for the story-card rail so the selected-story feature
   poster never overlaps it, and keep the signed-in dock compact. This is
   intentionally scoped away from PC and phone. */
@media (hover:none) and (pointer:coarse) and (min-width:761px) and (max-width:1366px){
  body.tabletFocusCapable.frontierMenuMode,
  body.tabletFocusCapable.frontierMenuMode .frontierWrap,
  body.tabletFocusCapable.frontierMenuMode .frontierMenuScreen,
  body.tabletFocusCapable.frontierMenuMode .frontierMenuShell{
    height:auto!important;
    min-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }

  body.tabletFocusCapable.frontierMenuMode .frontierMenuScreen{
    padding:0!important;
  }

  body.tabletFocusCapable.frontierMenuMode .frontierMenuShell{
    display:block!important;
    width:100%!important;
    border-radius:0!important;
  }

  body.tabletFocusCapable.frontierMenuMode .frontierMenuInner{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    transform:none!important;
    transform-origin:center top!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    width:min(100%, 1180px)!important;
    min-height:auto!important;
    max-height:none!important;
    margin:0 auto!important;
    overflow:visible!important;
    gap:clamp(10px, 1.35dvh, 16px)!important;
    padding:
      calc(76px + env(safe-area-inset-top, 0px))
      max(18px, calc(18px + env(safe-area-inset-right, 0px)))
      calc(32px + env(safe-area-inset-bottom, 0px))
      max(18px, calc(18px + env(safe-area-inset-left, 0px)))!important;
  }

  body.tabletFocusCapable.frontierMenuMode .pathLogoLockup,
  body.tabletFocusCapable.frontierMenuMode .stepBanner,
  body.tabletFocusCapable.frontierMenuMode .storyRailShell,
  body.tabletFocusCapable.frontierMenuMode .storyFeaturePoster,
  body.tabletFocusCapable.frontierMenuMode .stepBannerHero,
  body.tabletFocusCapable.frontierMenuMode .frontierRoster,
  body.tabletFocusCapable.frontierMenuMode .menuBottomBar{
    position:relative!important;
    flex:0 0 auto!important;
    transform:none!important;
  }

  body.tabletFocusCapable.frontierMenuMode .storyRailShell{
    z-index:3!important;
    overflow:visible!important;
    align-items:start!important;
    min-height:clamp(210px, 27dvh, 300px)!important;
    margin-bottom:clamp(6px, 1dvh, 12px)!important;
  }

  body.tabletFocusCapable.frontierMenuMode .frontierStoryCards{
    height:auto!important;
    min-height:clamp(188px, 24dvh, 270px)!important;
    align-items:stretch!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:
      clamp(14px, 1.4dvh, 18px)
      calc(var(--storyRailFade, 24px) + 8px)
      clamp(18px, 1.8dvh, 24px)!important;
  }

  body.tabletFocusCapable.frontierMenuMode .frontierStoryCards .frontierStoryCard{
    flex:0 0 min(36vw, 330px)!important;
    min-height:clamp(168px, 21dvh, 238px)!important;
    max-height:none!important;
  }

  body.tabletFocusCapable.frontierMenuMode .storyFeaturePoster{
    z-index:1!important;
    margin-top:clamp(10px, 1.6dvh, 20px)!important;
    margin-bottom:clamp(8px, 1.2dvh, 16px)!important;
    min-height:clamp(285px, 36dvh, 420px)!important;
    max-height:none!important;
    clear:both!important;
  }

  body.tabletFocusCapable.frontierMenuMode .storyFeatureContent{
    min-height:inherit!important;
  }

  body.tabletFocusCapable.frontierMenuMode .authSessionBar{
    position:fixed!important;
    top:calc(8px + env(safe-area-inset-top, 0px))!important;
    right:calc(8px + env(safe-area-inset-right, 0px))!important;
    left:auto!important;
    bottom:auto!important;
    z-index:10030!important;
    width:auto!important;
    max-width:min(360px, calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)))!important;
    min-height:42px!important;
    transform:none!important;
  }
}

@media (hover:none) and (pointer:coarse) and (min-width:761px) and (max-width:1366px) and (orientation:landscape){
  body.tabletFocusCapable.frontierMenuMode .frontierMenuInner{
    width:min(100%, 1240px)!important;
    gap:clamp(8px, 1.05dvh, 14px)!important;
    padding-top:calc(66px + env(safe-area-inset-top, 0px))!important;
  }

  body.tabletFocusCapable.frontierMenuMode .pathTitle{
    font-size:clamp(2rem, 5vw, 3.3rem)!important;
  }

  body.tabletFocusCapable.frontierMenuMode .pathSubtitle{
    font-size:clamp(.82rem, 1.65vw, .98rem)!important;
    margin-top:6px!important;
  }

  body.tabletFocusCapable.frontierMenuMode .storyRailShell{
    min-height:clamp(192px, 26dvh, 260px)!important;
  }

  body.tabletFocusCapable.frontierMenuMode .frontierStoryCards{
    min-height:clamp(170px, 23dvh, 230px)!important;
  }

  body.tabletFocusCapable.frontierMenuMode .frontierStoryCards .frontierStoryCard{
    flex-basis:min(30vw, 320px)!important;
    min-height:clamp(156px, 21dvh, 216px)!important;
  }

  body.tabletFocusCapable.frontierMenuMode .storyFeaturePoster{
    min-height:clamp(255px, 36dvh, 360px)!important;
  }
}

@media (hover:none) and (pointer:coarse) and (min-width:761px) and (max-width:1180px) and (orientation:portrait){
  body.tabletFocusCapable.frontierMenuMode .frontierMenuInner{
    padding-top:calc(88px + env(safe-area-inset-top, 0px))!important;
    gap:12px!important;
  }

  body.tabletFocusCapable.frontierMenuMode .pathTitle{
    font-size:clamp(2.15rem, 7.2vw, 3.55rem)!important;
    line-height:.96!important;
  }

  body.tabletFocusCapable.frontierMenuMode .storyRailShell{
    grid-template-columns:46px minmax(0,1fr) 46px!important;
    min-height:clamp(214px, 23dvh, 286px)!important;
  }

  body.tabletFocusCapable.frontierMenuMode .frontierStoryCards{
    min-height:clamp(190px, 21dvh, 260px)!important;
    padding-left:26px!important;
    padding-right:26px!important;
  }

  body.tabletFocusCapable.frontierMenuMode .frontierStoryCards .frontierStoryCard{
    flex-basis:min(66vw, 340px)!important;
    min-height:clamp(178px, 20dvh, 246px)!important;
  }

  body.tabletFocusCapable.frontierMenuMode .storyFeaturePoster{
    min-height:clamp(320px, 33dvh, 420px)!important;
  }
}

/* Story 2 checkpoint lock modal: friendlier, progress-focused gate message. */
.checkpointLockModal .modalBox{
  max-width:min(860px,calc(100vw - 28px));
  background:
    radial-gradient(circle at 18% 18%, rgba(147,197,253,.28), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
  border:1px solid rgba(147,197,253,.45);
  box-shadow:0 28px 80px rgba(15,23,42,.38);
}
.checkpointLockModal .modalGrid{
  grid-template-columns:132px minmax(0,1fr);
  gap:20px;
  align-items:start;
}
.checkpointLockModal .emojiAvatar{
  width:126px;
  height:126px;
  border-radius:28px;
  border:2px solid rgba(96,165,250,.55);
  background:linear-gradient(180deg,#eff6ff,#f8fafc);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 14px 26px rgba(37,99,235,.12);
  font-size:62px;
}
.checkpointLockModal .modalBox h2{
  color:#0f172a;
  font-size:clamp(26px,3vw,34px);
  line-height:1.05;
  margin-bottom:8px;
}
.checkpointLockModal .modalBox p{
  color:#334155;
  font-size:16px;
  line-height:1.45;
  margin:0 0 14px;
  max-width:680px;
}
.checkpointLockPanel{
  display:grid;
  gap:12px;
  padding:14px;
  border-radius:20px;
  background:linear-gradient(180deg,rgba(239,246,255,.92),rgba(255,255,255,.84));
  border:1px solid rgba(96,165,250,.26);
}
.checkpointLockTopline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#1e3a8a;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.checkpointLockTopline span{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:6px 10px;
  background:#dbeafe;
  color:#1d4ed8;
}
.checkpointLockTopline b{color:#334155;letter-spacing:0;text-transform:none;font-size:13px;}
.checkpointLockProgress{
  height:12px;
  border-radius:999px;
  overflow:hidden;
  background:#e2e8f0;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.12);
}
.checkpointLockProgress i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#60a5fa,#2563eb,#f59e0b);
  box-shadow:0 0 16px rgba(37,99,235,.25);
}
.checkpointLockHint{
  border-radius:16px;
  padding:10px 12px;
  background:#fffbeb;
  border:1px solid rgba(245,158,11,.28);
  color:#78350f;
  font-size:14px;
  line-height:1.38;
  font-weight:850;
}
.checkpointLockListTitle{
  color:#0f172a;
  font-size:13px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-top:2px;
}
.checkpointLockList{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.checkpointLockItem{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:8px 10px;
  border-radius:14px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(148,163,184,.22);
  color:#1e293b;
  font-size:13.5px;
  line-height:1.2;
  font-weight:850;
}
.checkpointLockItemIcon{
  flex:0 0 30px;
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#eff6ff;
  border:1px solid rgba(96,165,250,.22);
  font-size:16px;
}
.checkpointLockItem.complete{grid-column:1/-1;background:#ecfdf5;border-color:rgba(34,197,94,.28);color:#14532d;}
.checkpointLockBtn{box-shadow:0 10px 24px rgba(37,99,235,.25);}
@media(max-width:720px){
  .checkpointLockModal .modalGrid{grid-template-columns:1fr;}
  .checkpointLockModal .avatarPane{display:none;}
  .checkpointLockList{grid-template-columns:1fr;}
}

/* V2.92 Story 2/3 Step-by-Step: balanced ranch workbook layout
   CSS-only: Story 1 keeps its existing story1WorkbookDeck styling. */
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck){
  margin-top:0!important;
  padding:18px 20px 20px!important;
  border-radius:28px!important;
  background:linear-gradient(180deg,#fffdf8 0%, #fff7e8 100%)!important;
  border:2px solid rgba(201,162,91,.58)!important;
  box-shadow:0 18px 36px rgba(15,23,42,.14), inset 0 0 0 2px rgba(255,247,225,.88)!important;
  overflow:visible!important;
  position:relative!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck)::before{
  content:''!important;
  position:absolute!important;
  inset:10px!important;
  border-radius:22px!important;
  border:1px solid rgba(191,149,63,.18)!important;
  pointer-events:none!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck)::after{
  content:'🌾'!important;
  position:absolute!important;
  right:24px!important;
  top:18px!important;
  width:54px!important;
  height:54px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:radial-gradient(circle at 35% 30%,#fff7d6 0%,#f9d26c 46%,#c1842b 100%)!important;
  color:#6b3b10!important;
  font-size:28px!important;
  box-shadow:0 10px 22px rgba(90,56,18,.16), inset 0 0 0 2px rgba(255,255,255,.36)!important;
  pointer-events:none!important;
  opacity:.92!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) > .lessonLead{
  width:max-content!important;
  max-width:calc(100% - 80px)!important;
  margin:0 0 14px!important;
  padding:9px 16px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:9px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#173a6d 0%,#0b2346 100%)!important;
  border:1px solid rgba(248,217,121,.46)!important;
  color:#fff2c4!important;
  font-size:13px!important;
  font-weight:950!important;
  letter-spacing:.035em!important;
  text-transform:uppercase!important;
  box-shadow:0 9px 20px rgba(15,23,42,.14)!important;
  position:relative!important;
  z-index:2!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) > .lessonLead::before{
  content:'🤠'!important;
  font-size:16px!important;
  line-height:1!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide{
  display:grid!important;
  grid-template-columns:minmax(0,1.18fr) minmax(280px,.82fr)!important;
  grid-template-rows:auto auto auto auto!important;
  gap:16px 18px!important;
  padding:22px 24px 18px!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 96% 0%, rgba(245,190,83,.16) 0 12%, transparent 12.5%),
    linear-gradient(180deg,#fffefb 0%,#fff9ef 100%)!important;
  border:1.5px solid rgba(216,188,126,.60)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.92)!important;
  overflow:visible!important;
  position:relative!important;
  z-index:1!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide::before{
  content:''!important;
  position:absolute!important;
  inset:12px!important;
  border-radius:18px!important;
  border:1px solid rgba(191,149,63,.16)!important;
  pointer-events:none!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > *{
  position:relative!important;
  z-index:1!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideCounter{
  grid-column:1!important;
  grid-row:1!important;
  justify-self:start!important;
  align-self:center!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  margin:0!important;
  padding:8px 14px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#e9f4ff,#d8edff)!important;
  border:1px solid rgba(120,167,217,.44)!important;
  color:#26436a!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:950!important;
  box-shadow:none!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideCounter::before{
  content:'🐴'!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideTitle{
  grid-column:1 / -1!important;
  grid-row:1!important;
  margin:0 0 0 132px!important;
  align-self:center!important;
  color:#1e2b58!important;
  font-size:clamp(25px,2.3vw,34px)!important;
  line-height:1.12!important;
  font-weight:950!important;
  text-wrap:balance!important;
  padding-right:46px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideTitle::after{
  content:' ✦'!important;
  color:#d4a445!important;
  font-size:.75em!important;
  vertical-align:middle!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideBody{
  grid-column:1 / -1!important;
  grid-row:2!important;
  margin:0!important;
  border-radius:20px!important;
  border:1.5px solid rgba(231,169,176,.70)!important;
  background:linear-gradient(180deg,#fff9f9 0%,#fff4f5 100%)!important;
  color:#8d2a31!important;
  padding:17px 20px 18px!important;
  font-size:clamp(15px,1.35vw,18px)!important;
  line-height:1.52!important;
  font-weight:850!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideBody::before{
  content:'✦ READ THE TRAIL FIRST ✦'!important;
  display:block!important;
  width:max-content!important;
  max-width:100%!important;
  margin:0 auto 12px!important;
  padding:8px 18px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#8a3148 0%,#a04158 100%)!important;
  color:#fff4d6!important;
  font-size:12px!important;
  font-weight:1000!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  box-shadow:0 8px 16px rgba(141,42,49,.16)!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideGraphic,
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .richGraphic{
  grid-column:1!important;
  grid-row:3!important;
  margin:0!important;
  min-height:230px!important;
  padding:18px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;
  border:1.5px solid rgba(192,213,244,.68)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)!important;
  overflow:hidden!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideGraphic::before,
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .richGraphic::before{
  content:'🌾 Trail map'!important;
  align-self:flex-start!important;
  margin:0 0 13px!important;
  padding:7px 12px!important;
  border-radius:999px!important;
  background:#eff6ff!important;
  border:1px solid rgba(147,197,253,.48)!important;
  color:#1e3a8a!important;
  font-size:12px!important;
  font-weight:1000!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideWhy{
  grid-column:2!important;
  grid-row:3!important;
  align-self:stretch!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  margin:0!important;
  border-radius:22px!important;
  border:1.5px solid rgba(216,188,126,.58)!important;
  background:linear-gradient(180deg,#fffef9 0%,#fff8ec 100%)!important;
  color:#1f376f!important;
  font-size:clamp(14px,1.15vw,16px)!important;
  line-height:1.58!important;
  font-weight:850!important;
  padding:24px 20px 18px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.82)!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideWhy::before{
  content:'🐂 WHY THIS HELPS'!important;
  display:block!important;
  width:max-content!important;
  max-width:100%!important;
  margin:0 auto 16px!important;
  padding:8px 16px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#173a6d,#0b2346)!important;
  color:#fff2c4!important;
  font-size:12px!important;
  font-weight:1000!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideWhy b{
  display:none!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideInfoGrid{
  grid-column:1 / -1!important;
  grid-row:4!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:16px!important;
  margin:0!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .slideExample,
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .slideTakeaway{
  margin:0!important;
  min-height:0!important;
  border-radius:18px!important;
  padding:14px 16px!important;
  font-size:clamp(13px,1.05vw,15px)!important;
  line-height:1.45!important;
  font-weight:800!important;
  box-shadow:none!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .slideExample{
  background:linear-gradient(180deg,#f3fbf4 0%,#edf8ef 100%)!important;
  border:1px solid rgba(144,211,157,.62)!important;
  color:#1f6b39!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .slideExample::before{
  content:'🌱 Example: '!important;
  color:#166534!important;
  font-weight:1000!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .slideExample b{
  display:none!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .slideTakeaway{
  background:linear-gradient(180deg,#f4f7ff 0%,#eef2ff 100%)!important;
  border:1px solid rgba(170,188,243,.68)!important;
  color:#28427b!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .slideTakeaway::before{
  content:'⭐ Big idea: '!important;
  color:#1e3a8a!important;
  font-weight:1000!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .slideTakeaway b{
  display:none!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideMiniQuiz{
  grid-column:1 / -1!important;
  grid-row:5!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px 14px!important;
  margin:0!important;
  padding:14px 16px!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#fffaf1 0%,#fff6e8 100%)!important;
  border:1.5px solid rgba(236,190,125,.82)!important;
  color:#9a4a17!important;
  font-size:clamp(13px,1.05vw,15px)!important;
  line-height:1.45!important;
  font-weight:850!important;
  box-shadow:none!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideMiniQuiz::before{
  content:'🤔 Mini-check'!important;
  grid-column:1 / -1!important;
  width:max-content!important;
  max-width:100%!important;
  margin:0 0 2px!important;
  padding:6px 11px!important;
  border-radius:999px!important;
  background:#fff7ed!important;
  border:1px solid rgba(251,146,60,.35)!important;
  color:#9a3412!important;
  font-size:12px!important;
  font-weight:1000!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .miniAnswerBtn,
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .miniAnswerBtnV115{
  border-radius:999px!important;
  border:1px solid rgba(229,164,82,.95)!important;
  background:#fffefa!important;
  color:#c06a2a!important;
  font-weight:950!important;
  padding:9px 15px!important;
  box-shadow:0 8px 14px rgba(146,64,14,.08)!important;
  white-space:nowrap!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .miniAnswerBox,
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .miniAnswerBoxV115{
  grid-column:1 / -1!important;
  margin-top:0!important;
  border-radius:14px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) .scaffoldControls{
  width:100%!important;
  margin:16px 0 0!important;
  padding:14px 4px 0!important;
  border-top:1px solid rgba(201,162,91,.24)!important;
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:12px!important;
  position:relative!important;
  z-index:2!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) .scaffoldControls::before{
  content:none!important;
  color:#7c5b25!important;
  font-size:12px!important;
  line-height:1.25!important;
  font-weight:850!important;
  margin-right:auto!important;
  max-width:320px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) .scaffoldControls .btn{
  min-width:150px!important;
  border-radius:16px!important;
}
@media(max-width:980px){
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck){
    padding:16px!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck)::after{
    width:44px!important;
    height:44px!important;
    font-size:22px!important;
    right:18px!important;
    top:16px!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide{
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto auto auto auto!important;
    gap:14px!important;
    padding:20px 18px 16px!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideTitle{
    grid-column:1!important;
    grid-row:2!important;
    margin:0!important;
    padding-right:0!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideBody{
    grid-column:1!important;
    grid-row:3!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideGraphic,
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .richGraphic{
    grid-column:1!important;
    grid-row:4!important;
    min-height:190px!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideWhy{
    grid-column:1!important;
    grid-row:5!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideInfoGrid{
    grid-column:1!important;
    grid-row:6!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideMiniQuiz{
    grid-column:1!important;
    grid-row:7!important;
  }
}
@media(max-width:720px){
  .modal.lessonModal.oceanLessonModal .stepStoryRibbon{
    font-size:11px!important;
    padding:6px 10px!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck){
    padding:12px!important;
    border-radius:22px!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) > .lessonLead{
    max-width:calc(100% - 58px)!important;
    font-size:11px!important;
    padding:8px 12px!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide{
    padding:16px 14px 14px!important;
    border-radius:20px!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideTitle{
    font-size:23px!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideInfoGrid{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideMiniQuiz{
    grid-template-columns:1fr!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .miniAnswerBtn,
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .miniAnswerBtnV115{
    width:100%!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) .scaffoldControls{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding-top:12px!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) .scaffoldControls::before{
    max-width:none!important;
    text-align:center!important;
    margin:0!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) .scaffoldControls .btn{
    width:100%!important;
    min-width:0!important;
  }
}

/* V2.93 Story 2/3 Step-by-Step: polished trail-map middle section
   CSS-only. Story 1 remains untouched via :not(.story1WorkbookDeck). */
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideGraphic,
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .richGraphic{
  min-height:260px!important;
  padding:22px 22px 18px!important;
  justify-content:flex-start!important;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,239,177,.42) 0 7%, transparent 8%),
    radial-gradient(circle at 92% 90%, rgba(191,149,63,.12) 0 14%, transparent 15%),
    linear-gradient(180deg,#fffdf7 0%,#f8fbff 44%,#fff8ea 100%)!important;
  border:2px solid rgba(190,212,247,.78)!important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.92), 0 12px 22px rgba(30,58,138,.06)!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideGraphic::before,
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .richGraphic::before{
  content:'✦ TRACE THE TRAIL ✦'!important;
  align-self:center!important;
  margin:-2px auto 14px!important;
  padding:9px 22px!important;
  min-width:210px!important;
  justify-content:center!important;
  text-align:center!important;
  border-radius:0!important;
  background:linear-gradient(180deg,#8a3148 0%,#a04158 100%)!important;
  color:#fff4d6!important;
  border:0!important;
  font-size:13px!important;
  letter-spacing:.095em!important;
  box-shadow:0 10px 18px rgba(141,42,49,.16)!important;
  clip-path:polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%)!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideGraphic::after,
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .richGraphic::after{
  content:'🐴  follow the clue stations  🌾'!important;
  margin:12px auto 0!important;
  padding:7px 13px!important;
  border-radius:999px!important;
  background:rgba(255,250,235,.92)!important;
  border:1px solid rgba(216,188,126,.52)!important;
  color:#7c4a15!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .richGraphic > .startHereVisualHeader{
  width:100%!important;
  max-width:680px!important;
  margin:0 auto 12px!important;
  padding:10px 14px!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#fffefb,#fff6e3)!important;
  border:1px solid rgba(216,188,126,.55)!important;
  color:#4c2b6a!important;
  font-size:clamp(13px,1.05vw,15px)!important;
  font-weight:950!important;
  line-height:1.35!important;
  text-align:center!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75)!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .richGraphic > .startHereVisualFooter{
  width:100%!important;
  max-width:680px!important;
  margin:12px auto 0!important;
  padding:10px 14px!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#fff6f6,#ffecec)!important;
  border:1px solid rgba(232,163,163,.58)!important;
  color:#7f1d3d!important;
  font-size:13px!important;
  line-height:1.35!important;
  font-weight:850!important;
  text-align:center!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .richGraphic .summaryGraphic{
  width:100%!important;
  max-width:700px!important;
  margin:auto!important;
  padding:18px 16px!important;
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(106px,1fr))!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:14px!important;
  border-radius:22px!important;
  background:
    linear-gradient(90deg, rgba(29,78,216,.10) 0 0) center/92% 2px no-repeat,
    linear-gradient(180deg,#f8fbff 0%,#ffffff 100%)!important;
  border:1.5px solid rgba(191,219,254,.80)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85)!important;
  counter-reset:trailStop!important;
  position:relative!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .richGraphic .summaryArrow,
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .richGraphic .flowArrow{
  display:none!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .richGraphic .summaryNode{
  counter-increment:trailStop!important;
  min-height:74px!important;
  padding:14px 12px 12px 40px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#ffffff 0%,#fffaf0 100%)!important;
  border:1.5px solid rgba(216,188,126,.48)!important;
  color:#101827!important;
  font-size:clamp(15px,1.15vw,18px)!important;
  line-height:1.16!important;
  font-weight:1000!important;
  box-shadow:0 8px 15px rgba(15,23,42,.06), inset 0 0 0 1px rgba(255,255,255,.85)!important;
  position:relative!important;
  overflow:hidden!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .richGraphic .summaryNode::before{
  content:counter(trailStop)!important;
  position:absolute!important;
  left:10px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:24px!important;
  height:24px!important;
  border-radius:999px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(180deg,#173a6d,#0b2346)!important;
  color:#fff2c4!important;
  font-size:12px!important;
  font-weight:1000!important;
  box-shadow:0 6px 12px rgba(15,23,42,.10)!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .richGraphic .summaryNode::after{
  content:'✦'!important;
  position:absolute!important;
  right:9px!important;
  top:7px!important;
  color:#d4a445!important;
  font-size:12px!important;
  opacity:.75!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideWhy{
  background:
    radial-gradient(circle at 80% 16%, rgba(245,190,83,.18) 0 12%, transparent 13%),
    linear-gradient(180deg,#fffef9 0%,#fff8ec 100%)!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideWhy::before{
  content:'🐂 WHY THIS HELPS'!important;
  clip-path:polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%)!important;
  border-radius:0!important;
  padding:9px 20px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) .scaffoldControls::before{
  content:none!important;
  display:none!important;
}
@media(max-width:980px){
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .richGraphic .summaryGraphic{
    max-width:100%!important;
    grid-template-columns:repeat(auto-fit,minmax(118px,1fr))!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideGraphic,
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .richGraphic{
    min-height:0!important;
  }
}
@media(max-width:720px){
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .slideGraphic::before,
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide > .richGraphic::before{
    min-width:0!important;
    width:100%!important;
    max-width:320px!important;
    font-size:11px!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .richGraphic .summaryGraphic{
    padding:14px!important;
    grid-template-columns:1fr!important;
    background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%)!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .richGraphic .summaryNode{
    min-height:58px!important;
    font-size:16px!important;
  }
}

/* V2.93 Story 2 pilot illustrated trail cards
   Activated only for the Story 2 Elara + Boone lessons via JS hooks.
   Story 1 remains unchanged, and Story 3 can reuse this pattern later. */
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide.story23PilotTrailRoot{
  align-items:stretch!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide.story23PilotTrailRoot > .slideGraphic.story23PilotTrailGraphic{
  min-height:360px!important;
  justify-content:flex-start!important;
  align-items:stretch!important;
  gap:12px!important;
  padding:16px 16px 14px!important;
  background:
    radial-gradient(circle at 10% 20%, rgba(243,231,185,.48) 0 11%, transparent 11.5%),
    radial-gradient(circle at 90% 84%, rgba(220,235,255,.55) 0 14%, transparent 14.5%),
    linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide.story23PilotTrailRoot > .slideGraphic.story23PilotTrailGraphic::before,
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide.story23PilotTrailRoot > .slideGraphic.story23PilotTrailGraphic::after{
  content:none!important;
  display:none!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide.story23PilotTrailRoot > .slideWhy{
  justify-content:flex-start!important;
  padding-top:28px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide.story23PilotTrailRoot > .slideWhy::before{
  margin-bottom:18px!important;
}
.story23TrailRibbon{
  align-self:center!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  max-width:100%!important;
  padding:9px 18px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#8a3148 0%,#a04158 100%)!important;
  color:#fff4d6!important;
  font-size:12px!important;
  font-weight:1000!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  box-shadow:0 9px 18px rgba(141,42,49,.16)!important;
}
.story23TrailGrid{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  flex:1 1 auto!important;
  align-content:stretch!important;
}
.story23TrailCard{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  min-height:132px!important;
  padding:14px 12px 12px!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#fffdf8 0%,#fff8ee 100%)!important;
  border:1.5px solid rgba(214,186,125,.58)!important;
  box-shadow:0 8px 18px rgba(15,23,42,.06)!important;
  overflow:hidden!important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease!important;
}
.story23TrailCard::after{
  content:''!important;
  position:absolute!important;
  inset:8px!important;
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.72)!important;
  pointer-events:none!important;
}
.story23TrailCard.is-upcoming{
  opacity:.86!important;
}
.story23TrailCard.is-complete{
  border-color:rgba(118,180,131,.54)!important;
  background:linear-gradient(180deg,#f9fff8 0%,#f1fbf0 100%)!important;
}
.story23TrailCard.is-active,
.story23TrailCard.is-complete.is-active{
  transform:translateY(-2px)!important;
  border-color:rgba(69,107,193,.82)!important;
  background:linear-gradient(180deg,#ffffff 0%,#f2f7ff 100%)!important;
  box-shadow:0 16px 28px rgba(40,72,130,.16)!important;
}
.story23TrailCardStep{
  position:absolute!important;
  top:10px!important;
  right:10px!important;
  width:28px!important;
  height:28px!important;
  border-radius:999px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(180deg,#fff6dc 0%,#f0d48a 100%)!important;
  border:1px solid rgba(193,144,46,.62)!important;
  color:#69431a!important;
  font-size:12px!important;
  font-weight:950!important;
  box-shadow:0 3px 8px rgba(105,67,26,.12)!important;
  z-index:1!important;
}
.story23TrailCard.is-active .story23TrailCardStep,
.story23TrailCard.is-complete.is-active .story23TrailCardStep{
  background:linear-gradient(180deg,#dcecff 0%,#b7d3ff 100%)!important;
  border-color:rgba(69,107,193,.56)!important;
  color:#1e3a8a!important;
}
.story23TrailCard.is-complete:not(.is-active) .story23TrailCardStep{
  background:linear-gradient(180deg,#e9f7ec 0%,#cfead5 100%)!important;
  border-color:rgba(118,180,131,.52)!important;
  color:#2d6b3f!important;
}
.story23TrailArtWrap{
  flex:1 1 auto!important;
  min-height:78px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:2px 4px 0!important;
}
.story23TrailSvg{
  width:100%!important;
  max-width:176px!important;
  height:auto!important;
  display:block!important;
}
.story23TrailCaption{
  font-size:14px!important;
  line-height:1.22!important;
  font-weight:950!important;
  color:#1e2b58!important;
  text-wrap:balance!important;
}
.story23TrailSubcaption{
  font-size:11.25px!important;
  line-height:1.34!important;
  font-weight:750!important;
  color:#60708a!important;
  text-wrap:balance!important;
}
.story23TrailFooter{
  width:100%!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
}
.story23TrailFooter > span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:8px 14px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#fffaf0 0%,#fff3df 100%)!important;
  border:1px solid rgba(213,176,108,.54)!important;
  color:#744716!important;
  font-size:12.5px!important;
  line-height:1.35!important;
  font-weight:900!important;
  text-align:center!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .story23PilotInfoGrid .slideExample,
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .story23PilotInfoGrid .slideTakeaway{
  min-height:124px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .story23PilotInfoGrid .slideExample b,
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide .story23PilotInfoGrid .slideTakeaway b{
  display:block!important;
  margin-bottom:6px!important;
  font-size:12px!important;
  line-height:1.15!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
}
@media(max-width:1080px){
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide.story23PilotTrailRoot > .slideGraphic.story23PilotTrailGraphic{
    min-height:336px!important;
  }
  .story23TrailCard{
    min-height:126px!important;
  }
}
@media(max-width:760px){
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide.story23PilotTrailRoot > .slideGraphic.story23PilotTrailGraphic{
    min-height:0!important;
    padding:14px 12px 12px!important;
  }
  .story23TrailGrid{
    gap:10px!important;
  }
  .story23TrailCard{
    min-height:118px!important;
    padding:12px 10px 10px!important;
  }
  .story23TrailSvg{
    max-width:150px!important;
  }
  .story23TrailCaption{
    font-size:13px!important;
  }
  .story23TrailSubcaption{
    font-size:10.5px!important;
  }
  .story23TrailFooter > span{
    padding:7px 12px!important;
    font-size:12px!important;
  }
}
@media(max-width:520px){
  .story23TrailGrid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  .story23TrailCard{
    min-height:112px!important;
    gap:6px!important;
  }
  .story23TrailCardStep{
    width:24px!important;
    height:24px!important;
    font-size:11px!important;
  }
  .story23TrailSvg{
    max-width:128px!important;
  }
  .story23TrailCaption{
    font-size:12.5px!important;
  }
  .story23TrailSubcaption{
    font-size:10px!important;
  }
}


/* V2.94 Story 2 pilot: external SVG art for Boone + Elara trail cards */
.story23TrailArtFrame{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:110px;
  margin-bottom:10px;
}
.story23TrailAssetArt{
  display:block;
  width:min(100%, 150px);
  max-width:150px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 2px 5px rgba(23,58,109,.08));
}
.story23TrailAssetFallback{
  min-height:104px;
  width:min(100%, 146px);
  margin:0 auto 10px;
  border-radius:18px;
  border:2px dashed rgba(156,124,61,.35);
  background:linear-gradient(180deg, rgba(255,249,237,.92), rgba(248,239,220,.92));
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  text-align:center;
}
.story23TrailAssetFallback > span{
  color:#835a29;
  font-size:13px;
  font-weight:800;
  line-height:1.25;
}
.story23TrailCard.is-active .story23TrailAssetArt{
  transform:translateY(-1px) scale(1.02);
}
.story23TrailCard.is-complete .story23TrailAssetArt{
  opacity:.98;
}
.story23TrailCard.is-upcoming .story23TrailAssetArt{
  opacity:.92;
}
@media (max-width: 760px){
  .story23TrailArtFrame{
    min-height:96px;
  }
  .story23TrailAssetArt{
    width:min(100%, 128px);
    max-width:128px;
  }
}


/* V2.95 Story 2 pilot: merge Example + Big Idea into right-column Field Note.
   Gated by story23PilotTrailRoot, so Story 1 and the rest of the game are untouched. */
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide.story23PilotTrailRoot{
  grid-template-rows:auto auto minmax(190px, auto) auto auto!important;
  align-items:stretch!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide.story23PilotTrailRoot > .slideGraphic.story23PilotTrailGraphic{
  grid-column:1!important;
  grid-row:3 / span 2!important;
  min-height:360px!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide.story23PilotTrailRoot > .slideWhy{
  grid-column:2!important;
  grid-row:3!important;
  align-self:stretch!important;
  min-height:190px!important;
  justify-content:center!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide.story23PilotTrailRoot > .story23PilotFieldNote{
  grid-column:2!important;
  grid-row:4!important;
}
.modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide.story23PilotTrailRoot > .slideMiniQuiz{
  grid-column:1 / -1!important;
  grid-row:5!important;
}
.story23PilotFieldNote{
  position:relative!important;
  min-height:154px!important;
  margin:0!important;
  padding:16px 18px 16px!important;
  border-radius:20px!important;
  border:1.5px solid rgba(164,193,239,.70)!important;
  background:
    radial-gradient(circle at 94% 16%, rgba(245,211,123,.22) 0 20%, transparent 20.5%),
    linear-gradient(180deg,#f8fbff 0%,#eff5ff 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.82), 0 8px 18px rgba(15,23,42,.05)!important;
  color:#1e376f!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:10px!important;
}
.story23PilotFieldRibbon{
  display:inline-flex!important;
  width:max-content!important;
  max-width:100%!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0 0 2px!important;
  padding:6px 11px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#173a6d,#0b2346)!important;
  color:#fff2c4!important;
  font-size:10.5px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:.07em!important;
  text-transform:uppercase!important;
}
.story23PilotFieldBlock{
  display:block!important;
  font-size:13.5px!important;
  line-height:1.42!important;
  font-weight:820!important;
  color:#1e376f!important;
}
.story23PilotFieldBlock b{
  display:block!important;
  margin:0 0 3px!important;
  color:#2c4f91!important;
  font-size:10.5px!important;
  line-height:1.1!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
  font-weight:1000!important;
}
.story23PilotFieldBlock span{
  display:block!important;
}
.story23PilotFieldDivider{
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(112,144,202,.42),transparent)!important;
  margin:1px 0!important;
}
.story23PilotRanchNote b::before{
  content:'🌱 ';
}
.story23PilotKeyTakeaway b::before{
  content:'⭐ ';
}
@media(max-width:1080px){
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide.story23PilotTrailRoot > .slideGraphic.story23PilotTrailGraphic{
    min-height:332px!important;
  }
  .story23PilotFieldNote{
    min-height:148px!important;
  }
}
@media(max-width:760px){
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide.story23PilotTrailRoot{
    grid-template-rows:auto!important;
  }
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide.story23PilotTrailRoot > .slideGraphic.story23PilotTrailGraphic,
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide.story23PilotTrailRoot > .slideWhy,
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide.story23PilotTrailRoot > .story23PilotFieldNote,
  .modal.lessonModal.oceanLessonModal .stepStoryDeck:not(.story1WorkbookDeck) #scaffoldSlide.story23PilotTrailRoot > .slideMiniQuiz{
    grid-column:1!important;
    grid-row:auto!important;
  }
  .story23PilotFieldNote{
    min-height:0!important;
    padding:14px 15px!important;
  }
}


/* V2.95 Story 2 Teacher 5/6 trail art extension */
.story23TrailAssetArt{
  max-height:112px!important;
}
.story23TrailCard.is-active .story23TrailAssetArt{
  filter:drop-shadow(0 5px 10px rgba(23,58,109,.12));
}
@media(max-width:760px){
  .story23TrailAssetArt{
    max-height:96px!important;
  }
}