/* Retro Education catalogue items: pack pages, PACK badges, catalogue legend. */
.cmcs-app{background:radial-gradient(ellipse at 20% 0%,#16324433,transparent 60%),linear-gradient(#0a1019,#05080e);color:#e8eef5;overflow:auto}
.cmcs-pack{box-sizing:border-box;max-width:1180px;margin:0 auto;min-height:100%;padding:clamp(14px,3vh,34px) clamp(16px,3vw,40px);display:grid;grid-template-rows:auto 1fr;gap:clamp(12px,2.4vh,26px);font:500 clamp(14px,1.7vmin,18px)/1.45 "Quicksand",system-ui,sans-serif}
.cmcs-ph{display:flex;gap:clamp(14px,2vw,26px);align-items:center}
.cmcs-pi{flex:0 0 auto;width:clamp(76px,13vmin,132px);aspect-ratio:1;display:block;filter:drop-shadow(0 10px 24px #000a)}
.cmcs-pi svg{width:100%;height:100%;display:block}
.cmcs-eye{margin:0;font:700 clamp(11px,1.3vmin,13px)/1.2 "Quicksand",system-ui,sans-serif;letter-spacing:.14em;color:#9fb0c2;text-transform:uppercase;display:flex;gap:8px;align-items:center}
.cmcs-tag{display:inline-block;padding:3px 9px;border-radius:999px;background:linear-gradient(#7ee8f5,#38bdf8);color:#04212b;font:800 11px/1.2 "Quicksand",system-ui,sans-serif;letter-spacing:.1em}
.cmcs-pack h1{margin:.2em 0 .25em;font:700 clamp(26px,4.4vmin,48px)/1.08 "Quicksand",system-ui,sans-serif;color:#fff}
.cmcs-lead{margin:0;max-width:62ch;color:#c9d5e2}
.cmcs-cols{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(12px,2vw,24px);align-content:start}
.cmcs-cols section{background:#0e1622cc;border:1px solid #24344a;border-radius:16px;padding:clamp(12px,2.2vh,22px) clamp(14px,1.8vw,22px)}
.cmcs-cols h2{margin:0 0 .5em;font:700 clamp(13px,1.6vmin,16px)/1.2 "Quicksand",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#7ee8f5}
.cmcs-cols h2:not(:first-child){margin-top:1.1em}
.cmcs-units,.cmcs-samples{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cmcs-units li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;padding:9px 12px;border-radius:10px;background:#0a111b;border-left:4px solid var(--pc)}
.cmcs-units b{color:#fff;white-space:nowrap}.cmcs-units em{font-style:normal;color:#9fb0c2;white-space:nowrap}
.cmcs-samples li{padding:8px 12px 8px 34px;border-radius:10px;background:#0a111b;position:relative}
.cmcs-samples li::before{content:"FREE";position:absolute;left:8px;top:50%;transform:translateY(-50%) rotate(-90deg);font:800 8px/1 "Quicksand",system-ui,sans-serif;letter-spacing:.12em;color:#5fd28a}
.cmcs-status{margin:.9em 0 .2em;color:#ffd27a;font-weight:700}.cmcs-status.own{color:#8ff0b1}
.cmcs-acts{display:flex;flex-wrap:wrap;gap:10px;margin:.7em 0}
.cmcs-btn{all:unset;cursor:pointer;padding:10px 16px;border-radius:10px;border:1px solid #3a4b61;background:#152031;color:#e8eef5;font:700 clamp(14px,1.7vmin,17px)/1.2 "Quicksand",system-ui,sans-serif;text-align:center}
.cmcs-btn:hover,.cmcs-btn:focus-visible{border-color:#7ee8f5}
.cmcs-btn.main{background:linear-gradient(#7ee8f5,#38bdf8);border-color:#38bdf8;color:#04212b}
.cmcs-note{margin:.4em 0 0;color:#9fb0c2;font-size:.9em}
@media (max-width:820px){.cmcs-cols{grid-template-columns:1fr}.cmcs-ph{align-items:flex-start}}
/* badges for packs and Retro items, matching the Pro badge shapes */
.cmcp-b.pack b{color:#04212b;background:linear-gradient(#7ee8f5,#38bdf8)}
.cmcp-b.pack.own b{background:linear-gradient(#bdf5cf,#5fd28a);color:#06210f}
/* catalogue legend */
.cmcs-legend{margin:2px 4px 0;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font:600 clamp(12px,1.35vmin,14px)/1.3 "Quicksand",system-ui,sans-serif;color:#9fb0c2}
.cmcs-legend span{display:inline-flex;align-items:center;gap:6px}
.cmcs-legend i{font-style:normal;padding:2px 7px;border-radius:999px;font:800 11px/1.3 "Quicksand",system-ui,sans-serif;letter-spacing:.08em}
.cmcs-legend .l-pro{color:#1b1204;background:linear-gradient(#ffd27a,#ffb23e)}
.cmcs-legend .l-plus{color:#ffd27a;border:1px solid #ffb23e99;background:#0b1018d9}
.cmcs-legend .l-pack{color:#04212b;background:linear-gradient(#7ee8f5,#38bdf8)}
/* Learning Arcade: badge and play button on each game card, focus highlight */
.la-game .la-badge{display:inline-flex;gap:6px;align-items:center;margin:4px 0 0;font:700 12px/1.2 "Quicksand",system-ui,sans-serif;color:#ffd27a}
.la-game .la-badge b{padding:2px 8px;border-radius:999px;background:linear-gradient(#ffd27a,#ffb23e);color:#1b1204;font-weight:800;letter-spacing:.08em}
.la-game.la-focus{outline:3px solid #ffb23e;outline-offset:4px;border-radius:14px;transition:outline-color 1.2s}
.la-game a.vc-btn{text-decoration:none}
/* ---------- game pages: one screen, no page scroll ---------- */
.cmcg-app{overflow:hidden}
.cmcg{box-sizing:border-box;height:100%;max-width:1500px;margin:0 auto;padding:clamp(10px,2.2vh,26px) clamp(14px,2.4vw,36px) clamp(8px,1.4vh,16px);display:grid;grid-template-rows:minmax(0,1fr) auto;gap:clamp(8px,1.6vh,18px);font:500 clamp(13px,1.6vmin,17px)/1.42 "Quicksand",system-ui,sans-serif;color:#e8eef5}
.cmcg-main{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(0,1.5fr);gap:clamp(14px,2.2vw,32px);min-height:0}
.cmcg-info{display:flex;flex-direction:column;min-height:0;overflow:auto;padding-right:4px}
.cmcg-eye{margin:0;display:flex;align-items:center;gap:10px;font:700 clamp(11px,1.25vmin,13px)/1.2 "Quicksand",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9fb0c2}
.cmcg-eye img{width:clamp(40px,6.4vmin,64px);height:auto;border-radius:12px;box-shadow:0 6px 18px #000a}
.cmcg h1{margin:.25em 0 .15em;font:700 clamp(28px,5.2vmin,58px)/1 "Orbitron","Quicksand",system-ui,sans-serif;letter-spacing:.04em;color:var(--gc);text-shadow:0 0 22px color-mix(in srgb,var(--gc),transparent 60%)}
.cmcg-badge{margin:.2em 0 .5em;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-weight:700;color:#ffd27a;font-size:.92em}
.cmcg-badge b{padding:2px 9px;border-radius:999px;background:linear-gradient(#ffd27a,#ffb23e);color:#1b1204;font-weight:800;letter-spacing:.08em;font-size:.85em}
.cmcg-pitch{margin:0 0 .6em;font-size:1.08em;color:#fff}
.cmcg-facts{margin:0 0 .6em;display:grid;gap:5px}
.cmcg-facts div{display:grid;grid-template-columns:minmax(7.5em,auto) 1fr;gap:10px;padding:6px 10px;border-radius:9px;background:#0b1320;border-left:3px solid var(--gc)}
.cmcg-facts dt{font-weight:700;color:#9fb0c2}.cmcg-facts dd{margin:0}
.cmcg-lesson{margin:0 0 .4em;color:#c9d5e2}
.cmcg-acts{display:flex;flex-wrap:wrap;gap:9px;margin:.5em 0 .2em}
.cmcs-btn.quiet{background:none;border-color:#3a4b61;color:#c9d5e2}
.cmcg-media{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:clamp(6px,1.2vh,12px);min-height:0}
.cmcg-shot{margin:0;position:relative;min-height:0;display:flex;align-items:center;justify-content:center;border-radius:14px;background:#03060b;border:1px solid #24344a;overflow:hidden}
.cmcg-shot img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.cmcg-shot figcaption{position:absolute;left:10px;bottom:10px;padding:4px 10px;border-radius:8px;background:#05090fcc;font-weight:700;font-size:.85em}
.cmcg-thumbs{display:flex;gap:8px;align-items:stretch;overflow-x:auto}
.cmcg-thumbs button{all:unset;cursor:pointer;flex:0 0 auto;width:clamp(96px,11vw,170px);border-radius:10px;overflow:hidden;border:2px solid #24344a;background:#0b1320;font-size:.78em;font-weight:700;color:#c9d5e2}
.cmcg-thumbs button img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.cmcg-thumbs button span{display:block;padding:3px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmcg-thumbs button[aria-pressed=true]{border-color:var(--gc)}
.cmcg-thumbs button:focus-visible{outline:3px solid var(--gc);outline-offset:2px}
.cmcg-thumbs .cmcg-play{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0 10px;width:auto;min-width:96px;color:#04212b;background:linear-gradient(#7ee8f5,#38bdf8);border-color:#38bdf8;font-size:.86em}
.cmcg-play span{font-size:1.4em}
.cmcg-more{display:flex;align-items:center;gap:8px;overflow-x:auto;padding-top:clamp(6px,1.2vh,12px);border-top:1px solid #1d2a3c}
.cmcg-more>span{font-weight:700;color:#9fb0c2;font-size:.85em;white-space:nowrap;margin-right:4px}
.cmcg-more button{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:12px;background:#0e1622;border:1px solid #24344a;white-space:nowrap}
.cmcg-more button:hover,.cmcg-more button:focus-visible{border-color:var(--gc)}
.cmcg-more img{width:clamp(30px,4.2vmin,42px);height:auto;border-radius:8px}
.cmcg-more b{font:700 clamp(11px,1.3vmin,14px)/1 "Quicksand",system-ui,sans-serif;letter-spacing:.06em}
.cmcg-video{width:min(1100px,94vw);padding:12px;background:#05090f;border:1px solid var(--gc);border-radius:14px;color:#e8eef5}
.cmcg-video::backdrop{background:#000c}
.cmcg-video video{display:block;width:100%;height:auto;max-height:78vh;border-radius:8px;background:#000}
.cmcg-video .cmcs-btn{margin-top:10px}
@media (max-width:860px){.cmcg-app{overflow:auto}.cmcg{height:auto}.cmcg-main{grid-template-columns:1fr}.cmcg-shot{max-height:52vh}}
/* ---------- growing packs: illustrated icon, unit progress, founder price ---------- */
.cmcs-pi img{width:100%;height:100%;display:block;border-radius:22%;object-fit:cover}
.cmcs-grow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:.1em 0 .5em;font-size:.92em;color:#c9d5e2}
.cmcs-grow b{color:#fff}
.cmcs-bar{display:inline-flex;gap:4px}
.cmcs-bar i{width:clamp(22px,3vw,38px);height:9px;border-radius:3px;background:#24344a}
.cmcs-bar i.on{background:var(--pc);box-shadow:0 0 10px color-mix(in srgb,var(--pc),transparent 40%)}
.cmcs-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:.3em 0 .2em}
.cmcs-price b{font:800 clamp(22px,3vmin,32px)/1 "Quicksand",system-ui,sans-serif;color:#ffd27a}
.cmcs-price s{color:#8798ab;font-weight:600}
.cmcs-price span{flex-basis:100%;font-size:.86em;color:#9fb0c2}

/* Play here: the game fills the tool area, with a slim bar to go back */
.cmcg-app.cmcg-playing{overflow:hidden}
.cmcg-play{box-sizing:border-box;height:100%;display:flex;flex-direction:column;gap:6px;padding:6px clamp(6px,1vw,12px) 8px}
.cmcg-pbar{display:flex;align-items:center;gap:12px;flex:none}
.cmcg-pbar b{font:700 15px/1 'Courier New',monospace;letter-spacing:.12em;color:#7be5ff}
.cmcg-play iframe{flex:1;min-height:0;width:100%;border:0;border-radius:12px;background:#040a12}

/* while a game plays only the hub's top bar stays: no extra bar, the game fills the rest, CORE steps aside */
.cmcg-app.cmcg-playing .cmcg-play{padding:0;gap:0}
.cmcg-app.cmcg-playing .cmcg-play iframe{flex:1;width:100%;min-height:0;border:0;display:block}
body.cmc-game-playing #core,body.cmc-game-playing #core-pn,body.cmc-game-playing .core-nudge{display:none!important}