.arcade-page { --arcade-ink:#25233f; --arcade-coral:#ff6b61; --arcade-yellow:#ffd65e; --arcade-blue:#62d3e9; --arcade-green:#78d7a1; }
.arcade-shell { max-width: 1260px; gap: 22px; }
.arcade-hero { min-height: 265px; padding: clamp(28px,5vw,64px); display:flex;align-items:center;justify-content:space-between;gap:35px;border-radius:32px;background:var(--arcade-ink);color:#fff;position:relative;overflow:hidden;box-shadow:0 24px 55px rgba(12,13,30,.25); }
.arcade-hero::before { content:'';position:absolute;width:380px;height:380px;right:-180px;top:-210px;border:55px solid rgba(255,255,255,.07);border-radius:50%;box-shadow:0 0 0 70px rgba(255,255,255,.025); }
.arcade-hero::after { content:'✦';position:absolute;left:48%;top:28px;color:var(--arcade-yellow);font-size:2rem;transform:rotate(15deg); }
.arcade-eyebrow { color:var(--arcade-yellow)!important;font-size:.76rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase; }
.arcade-hero h1 { margin:8px 0 12px;font:700 clamp(2.3rem,5vw,4.6rem)/.98 'Fredoka','Arial Rounded MT Bold',sans-serif;text-transform:none;letter-spacing:-.045em; }
.arcade-hero p:not(.arcade-eyebrow) { max-width:640px;color:rgba(255,255,255,.72);font-size:1.04rem; }
.arcade-score { min-width:250px;display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;z-index:1; }
.arcade-score div { padding:20px 17px;border:1px solid rgba(255,255,255,.15);border-radius:20px;background:rgba(255,255,255,.08);text-align:center;backdrop-filter:blur(8px); }
.arcade-score span { display:block;font:700 2rem 'Fredoka',sans-serif;color:var(--arcade-yellow); }.arcade-score small { color:rgba(255,255,255,.68);font-size:.72rem; }
.arcade-lock-notice { padding:17px 20px;display:flex;align-items:center;gap:14px;border:1px solid rgba(255,214,94,.34);border-radius:18px;background:rgba(255,214,94,.1); }
.arcade-lock-notice[hidden] { display:none; }
.arcade-lock-notice.locked { border-color:rgba(255,107,97,.42);background:rgba(255,107,97,.12); }
.arcade-lock-notice.error { border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.07); }
.arcade-lock-icon { width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;border-radius:13px;background:#302d4b;font-size:1.15rem; }
.arcade-lock-notice strong { color:var(--text-strong); }
.arcade-lock-notice p { margin:3px 0 0;color:var(--muted);font-size:.86rem; }
.arcade-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
.arcade-card { min-width:0;overflow:hidden;border-radius:26px;background:#fff;color:var(--arcade-ink);box-shadow:0 20px 45px rgba(10,20,35,.16);transition:transform .2s,box-shadow .2s; }
.arcade-card:hover { transform:translateY(-5px);box-shadow:0 28px 55px rgba(10,20,35,.22); }
.arcade-art { height:210px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden; }
.rush-art { background:var(--arcade-yellow);gap:10px;font:700 3.3rem 'Fredoka',sans-serif; }.rush-art i { font-style:normal;color:var(--arcade-coral); }.rush-art b { position:absolute;right:24px;top:20px;width:45px;height:45px;display:grid;place-items:center;border-radius:50%;background:#fff;font-size:1.4rem;transform:rotate(9deg);box-shadow:0 10px 20px rgba(70,40,0,.12); }
.pattern-art { background:var(--arcade-green);gap:8px; }.pattern-art span { width:47px;height:70px;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.76);font:700 1.55rem 'Fredoka',sans-serif;box-shadow:0 8px 0 rgba(22,82,52,.1); }.pattern-art span:last-child { background:var(--arcade-ink);color:#fff;transform:translateY(-11px) rotate(5deg); }
.orbit-art { background:var(--arcade-blue); }.mini-orbit { width:95px;height:95px;border-radius:50%;background:#6655cf;position:relative;box-shadow:inset -17px -13px 0 rgba(24,14,95,.17); }.mini-orbit i { position:absolute;width:190px;height:63px;left:-48px;top:14px;border:5px solid #fff;border-radius:50%;transform:rotate(-14deg); }.mini-orbit b,.mini-orbit em { position:absolute;border-radius:50%;background:var(--arcade-yellow); }.mini-orbit b { width:25px;height:25px;right:-42px;top:10px; }.mini-orbit em { width:13px;height:13px;left:-35px;bottom:5px; }
.arcade-card-copy { padding:24px; }.game-meta { display:flex;justify-content:space-between;gap:10px;color:#6a677a;font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase; }.arcade-card h2 { margin:10px 0 8px;color:var(--arcade-ink);font:700 1.8rem 'Fredoka',sans-serif; }.arcade-card p { min-height:72px;color:#6a677a;line-height:1.55; }.best-row { margin:18px 0 16px;padding-top:15px;display:flex;justify-content:space-between;border-top:1px solid rgba(37,35,63,.1);font-size:.82rem;color:#6a677a; }.best-row strong { color:var(--arcade-ink); }.play-game { width:100%;border-radius:13px;background:var(--arcade-ink)!important;color:#fff!important;display:flex;justify-content:space-between; }
.arcade-grid.is-locked .arcade-card,.arcade-grid.is-checking .arcade-card { opacity:.68; }
.arcade-grid.is-locked .arcade-card:hover,.arcade-grid.is-checking .arcade-card:hover { transform:none;box-shadow:0 20px 45px rgba(10,20,35,.16); }
.play-game:disabled { cursor:not-allowed;opacity:.72;background:#514d65!important;justify-content:center; }
.arcade-tip { padding:18px 22px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;border:1px solid rgba(255,255,255,.16);border-radius:20px;background:rgba(255,255,255,.08); }.arcade-tip>span { width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--arcade-yellow);color:#725200;font-size:1.2rem; }.arcade-tip strong { color:var(--text-strong); }.arcade-tip p { margin-top:2px;font-size:.86rem; }
.game-modal[hidden] { display:none; }.game-modal { position:fixed;inset:0;z-index:3000;display:grid;place-items:center;padding:18px; }.game-backdrop { position:absolute;inset:0;background:rgba(9,8,22,.76);backdrop-filter:blur(8px); }.game-dialog { width:min(720px,100%);max-height:calc(100dvh - 36px);overflow:auto;position:relative;border:1px solid rgba(255,255,255,.15);border-radius:26px;background:#fff;color:var(--arcade-ink);box-shadow:0 34px 90px rgba(0,0,0,.42); }.game-dialog-head { padding:22px 24px 17px;display:flex;align-items:start;justify-content:space-between;border-bottom:1px solid rgba(37,35,63,.1); }.game-dialog-head span { font-size:.67rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#716e80; }.game-dialog-head h2 { margin:4px 0 0;color:var(--arcade-ink);font:700 1.8rem 'Fredoka',sans-serif; }.game-close { width:40px;height:40px;border:0;border-radius:12px;background:#f1eef1;color:var(--arcade-ink);font-size:1.6rem;cursor:pointer; }.game-hud { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(37,35,63,.1); }.game-hud div { padding:13px;background:#fff;text-align:center; }.game-hud small { display:block;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#777383; }.game-hud strong { font:700 1.35rem 'Fredoka',sans-serif; }.game-stage { min-height:300px;padding:32px 24px;display:grid;place-items:center;background:#fffaf0; }.game-feedback { min-height:54px;margin:0;padding:15px 24px;text-align:center;font-weight:800;color:#6c687a; }.game-question { width:100%;text-align:center; }.game-question .prompt { margin-bottom:25px;font:700 clamp(2.5rem,8vw,5rem) 'Fredoka',sans-serif;letter-spacing:-.04em; }.answer-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:480px;margin:auto; }.answer-btn,.sort-btn { min-height:62px;border:2px solid rgba(37,35,63,.11);border-radius:15px;background:#fff;color:var(--arcade-ink);font-weight:800;cursor:pointer;box-shadow:0 8px 16px rgba(40,30,20,.06);transition:transform .12s,border-color .12s,background .12s; }.answer-btn:hover,.sort-btn:hover { transform:translateY(-2px);border-color:var(--arcade-blue); }.answer-btn:focus-visible,.sort-btn:focus-visible { outline:3px solid rgba(95,80,200,.3); }.answer-btn.correct,.sort-btn.correct { background:#d8f5e3;border-color:var(--arcade-green); }.answer-btn.wrong,.sort-btn.wrong { background:#ffe2df;border-color:var(--arcade-coral); }.timer-track { height:8px;margin:0;background:#eeeaf0; }.timer-track span { display:block;height:100%;background:var(--arcade-coral);transition:width .2s linear; }.sequence { display:flex;justify-content:center;gap:10px;margin-bottom:28px; }.sequence span { min-width:68px;height:76px;display:grid;place-items:center;border-radius:16px;background:#fff;border:2px solid rgba(37,35,63,.1);font:700 2rem 'Fredoka',sans-serif; }.sequence span:last-child { color:#fff;background:var(--arcade-ink);transform:rotate(4deg); }.space-object { width:150px;height:150px;margin:0 auto 20px;display:grid;place-items:center;border-radius:50%;background:var(--arcade-blue);font-size:4.4rem;box-shadow:inset -18px -15px 0 rgba(20,60,90,.08); }.object-name { margin:0 0 23px;font:700 2.4rem 'Fredoka',sans-serif; }.sort-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }.game-over { text-align:center; }.game-over .result-star { width:90px;height:90px;margin:0 auto 18px;display:grid;place-items:center;border-radius:50%;background:var(--arcade-yellow);font-size:2.7rem;color:#775600; }.game-over h3 { color:var(--arcade-ink);font:700 2.3rem 'Fredoka',sans-serif; }.game-over p { margin:8px auto 22px;max-width:390px;color:#6b6879; }.game-over .btn { min-width:190px;background:var(--arcade-ink);color:#fff; }
body.game-open { overflow:hidden; }
@media(max-width:1050px){.arcade-grid{grid-template-columns:1fr 1fr}.arcade-card:last-child{grid-column:1/-1}.arcade-hero{align-items:flex-start;flex-direction:column}.arcade-score{width:100%}}
@media(max-width:680px){.arcade-grid{grid-template-columns:1fr}.arcade-card:last-child{grid-column:auto}.arcade-art{height:170px}.arcade-hero{padding:28px 22px;border-radius:23px}.arcade-score{min-width:0}.arcade-tip{grid-template-columns:auto 1fr}.arcade-tip .btn{grid-column:1/-1}.game-stage{padding:24px 14px}.sort-grid{grid-template-columns:1fr}.sequence{gap:5px}.sequence span{min-width:48px;height:60px;font-size:1.45rem}.answer-grid{gap:8px}.game-dialog-head{padding:16px}.game-hud strong{font-size:1.1rem}}

/* Grade-aware Science Quest uses longer prompts and four answer choices. */
.space-object { width:112px;height:112px;margin-bottom:18px;font-size:3.4rem; }
.object-name { max-width:590px;margin:0 auto 23px;font-size:clamp(1.35rem,4vw,2rem);line-height:1.2; }
.sort-grid { grid-template-columns:repeat(2,minmax(0,1fr));max-width:590px;margin:auto; }
.sort-btn { padding:10px 12px; }
@media(max-width:680px){.sort-grid{grid-template-columns:1fr}.space-object{width:86px;height:86px;font-size:2.7rem}}
@media(prefers-reduced-motion:reduce){.arcade-card,.timer-track span{transition:none}}