/* Website frame only. Game HUD, battle controls, menus and engines retain their own styling. */
/* Header/footer inherit the shared site system, outside the engine palette. */
body[data-engine] .embedded-main { --embed-shadow:0 18px 40px #08223015; --embed-mark:var(--accent); width:min(1540px,100%); max-width:none; padding:0 var(--page-pad) 80px; margin:0 auto; }
body.dark-mode[data-engine] .embedded-main { --embed-shadow:0 20px 44px #03090e44; }
body[data-engine="armed-orbit"] .embedded-main { --embed-mark:#8d62ff; }
body[data-engine="firewall"] .embedded-main { --embed-mark:#18bce5; }
body[data-engine="trig"] .embedded-main,body[data-engine="trig-time"] .embedded-main { --embed-mark:#ef9b53; }
.embedded-main > .game-shell#play { margin:0; padding:0; max-width:none; }
body[data-engine] .embedded-main .game-top-card,body[data-engine] .embedded-main > .game-intro { position:relative; isolation:isolate; display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin:40px 0 30px; padding:28px 32px 32px; background:linear-gradient(120deg,var(--surface),var(--surface-raised)); border:1px solid var(--line); border-left:4px solid var(--embed-mark); border-radius:9px; box-shadow:var(--embed-shadow),5px 6px 0 var(--surface-raised); }
.embedded-main .game-top-card::after,.embedded-main > .game-intro::after { content:''; position:absolute; right:16px; top:16px; width:24px; height:24px; border-top:2px solid var(--line); border-right:2px solid var(--line); pointer-events:none; }
.embedded-main .game-title-wrap { min-width:0; }
body[data-engine] .embedded-main :is(.game-title-wrap h1,.game-intro h1) { color:var(--text); font:700 clamp(36px,5.1vw,68px)/1.04 var(--heading-font); letter-spacing:-.055em; margin:12px 0 18px; max-width:20ch; }
.embedded-main .game-title-wrap p,.embedded-main > .game-intro p { max-width:65ch; color:var(--muted); font-size:16px; line-height:1.75; margin:0; }
.embedded-main :is(.page-pill,.game-intro .eyebrow) { display:block; border:0; padding:0; background:none; border-radius:0; color:var(--accent-text); font:700 11px/1.5 var(--body-font); letter-spacing:.12em; text-transform:uppercase; }
.embedded-main .game-frame-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.embedded-main .game-entry-brand { display:flex; align-items:center; gap:14px; }
.embedded-main .game-entry-brand img { width:44px; height:44px; display:block; border-radius:10px; border:1px solid #466977; box-shadow:0 5px 12px #041a2a26; }
.embedded-main .game-entry-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:24px; }
.embedded-main :is(.primary-btn,.secondary-btn),.embedded-main > :is(.start-row,.button-row-main) button { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:48px; padding:12px 20px; color:var(--accent-ink); background:linear-gradient(#46d6ee,#18bce5); border:1px solid #7cdaec; border-radius:5px; font:700 13px/1.4 var(--body-font); text-decoration:none; box-shadow:inset 0 1px 0 #d3f6fc80,0 4px 0 #065a73,0 8px 14px #07233015; transition:transform 180ms,background 180ms,box-shadow 180ms; cursor:pointer; }
.embedded-main .secondary-btn,.embedded-main > .button-row-main #resetButton { color:var(--text); background:var(--surface); border-color:var(--line); box-shadow:inset 0 1px 0 #f5ffff26,0 3px 0 var(--line),0 8px 14px #07233010; }
.embedded-main :is(.primary-btn,.secondary-btn):hover,.embedded-main > :is(.start-row,.button-row-main) button:hover { transform:translateY(-2px); border-color:var(--accent-text); }
.embedded-main :is(.primary-btn,.secondary-btn):active,.embedded-main > :is(.start-row,.button-row-main) button:active { transform:translateY(2px); }
.embedded-main .game-frame-subheader { display:flex; align-items:center; justify-content:space-between; gap:20px; border:1px solid var(--line); border-left:4px solid var(--embed-mark); border-radius:6px; padding:19px 23px; margin-bottom:18px; background:var(--surface); box-shadow:0 5px 14px #0822300d; }
.embedded-main .game-frame-subheader h3 { color:var(--text); margin:0 0 6px; font:700 20px/1.2 var(--heading-font); letter-spacing:-.03em; }
.embedded-main .game-frame-subheader p { margin:0; color:var(--muted); font-size:12px; line-height:1.65; }
.embedded-main .frame-badge { flex-shrink:0; border:1px solid var(--line); color:var(--muted); font:600 10px/1.5 ui-monospace,monospace; padding:7px 9px; text-transform:uppercase; letter-spacing:.04em; border-radius:3px; }
.embedded-main > :is(.start-row,.button-row-main) { display:flex; justify-content:center; gap:14px; margin:20px 0 0; padding:18px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); border-radius:6px; box-shadow:var(--embed-shadow); }
.embedded-main .mobile-warning { display:none; border:1px solid var(--line); border-left:3px solid var(--warm); border-radius:3px; padding:16px 18px; margin:25px 0 0; background:var(--surface); color:var(--muted); font-size:12px; line-height:1.7; }
.embedded-main > :is(.info-section,.game-details,.prototype-details) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; padding:48px 0 0; margin:0; }
.embedded-main > :is(.game-details,.prototype-details) { grid-template-columns:repeat(3,minmax(0,1fr)); }
.embedded-main > .info-section :is(.info-card,.bug-box,.successor-box),.embedded-main > :is(.game-details,.prototype-details) article { position:relative; min-width:0; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--embed-mark); border-radius:7px; box-shadow:var(--embed-shadow),3px 4px 0 var(--surface-raised); padding:27px; }
.embedded-main > .info-section :is(.bug-box,.successor-box) { background:linear-gradient(135deg,var(--surface),var(--surface-raised)); border-top-color:var(--warm); }
.embedded-main :is(.info-card,.bug-box,.successor-box) h3,.embedded-main > :is(.game-details,.prototype-details) h2 { color:var(--text); font:700 27px/1.12 var(--heading-font); letter-spacing:-.04em; margin:0 0 18px; }
.embedded-main :is(.info-card,.bug-box,.successor-box) p,.embedded-main > :is(.game-details,.prototype-details) p { color:var(--muted); font-size:14px; line-height:1.8; margin:0 0 16px; }
.embedded-main .info-card ul { color:var(--muted); padding-left:21px; font-size:14px; line-height:1.8; margin-top:18px; }
.embedded-main .info-card li { padding-left:4px; margin-top:6px; }
.embedded-main .info-card li::marker { color:var(--accent-text); }
.embedded-main .button-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.embedded-main > .more-info-section { padding:0; margin:45px 0 0; }
.embedded-main .more-info-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:23px 25px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--embed-mark); border-radius:6px; text-align:left; cursor:pointer; box-shadow:var(--embed-shadow),3px 4px 0 var(--surface-raised); transition:background 180ms,border-color 180ms; }
.embedded-main .more-info-toggle:hover,.embedded-main .more-info-toggle.open { background:var(--surface-raised); border-color:var(--accent-text); }
.embedded-main .more-info-toggle strong { display:block; color:var(--text); font:700 21px/1.2 var(--heading-font); letter-spacing:-.035em; margin-bottom:8px; }
.embedded-main .more-info-toggle span { color:var(--muted); font-size:12px; line-height:1.65; }
.embedded-main .toggle-icon { flex-shrink:0; display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--line); color:var(--accent-text); font-size:23px; transition:transform 180ms; }
.embedded-main .more-info-toggle.open .toggle-icon { transform:rotate(45deg); }
.embedded-main .more-info-panel { display:none; padding:28px; margin-top:8px; background:var(--surface); border:1px solid var(--line); border-radius:6px; box-shadow:var(--embed-shadow); }
.embedded-main .more-info-panel.open { display:block; }
.embedded-main .more-info-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:38px; }
.embedded-main .more-info-copy h3 { color:var(--text); font:700 28px/1.15 var(--heading-font); letter-spacing:-.04em; margin:18px 0; }
.embedded-main .more-info-copy p { color:var(--muted); font-size:14px; line-height:1.8; margin:0 0 18px; }
.embedded-main .status-pill { display:inline-block; color:var(--accent-text); font:700 10px/1.6 var(--body-font); letter-spacing:.1em; text-transform:uppercase; }
.embedded-main .game-facts { display:grid; gap:17px; }
.embedded-main .game-fact { border:1px solid var(--line); border-left:3px solid var(--embed-mark); border-radius:4px; background:var(--surface-raised); padding:16px 18px; }
.embedded-main .game-fact strong { display:block; color:var(--accent-text); font-size:10px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:7px; }
.embedded-main .game-fact span { display:block; color:var(--text); font-size:13px; line-height:1.6; }
.embedded-main > .other-games-section { margin:60px 0 0; padding:0; }
.embedded-main .section-header { margin-bottom:28px; }
.embedded-main .section-header .section-label,.embedded-main > :is(.game-details,.prototype-details) .section-label { display:block; color:var(--accent-text); font:700 11px/1.5 var(--body-font); letter-spacing:.12em; margin-bottom:13px; text-transform:uppercase; }
.embedded-main .section-header h2 { color:var(--text); font:700 clamp(30px,3.5vw,46px)/1.08 var(--heading-font); letter-spacing:-.05em; margin:0 0 15px; }
.embedded-main .section-header p { color:var(--muted); font-size:14px; line-height:1.7; }
.embedded-main .games-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.embedded-main .game-card { min-width:0; border:1px solid var(--line); border-radius:7px; background:var(--surface); box-shadow:var(--embed-shadow),5px 5px 0 var(--surface-raised); overflow:hidden; transition:transform 180ms,border-color 180ms; }
.embedded-main .game-card:hover,.embedded-main .game-card:focus-within { transform:translateY(-4px); border-color:var(--accent-text); }
.embedded-main .game-card-image { background:var(--surface-raised); border-bottom:1px solid var(--line); aspect-ratio:3/2; display:grid; place-items:center; }
.embedded-main .game-card-image img { display:block; width:100%; height:100%; max-height:270px; object-fit:contain; }
.embedded-main .game-card-content { padding:23px; }
.embedded-main .game-card-content h3 { color:var(--text); font:700 22px/1.15 var(--heading-font); letter-spacing:-.035em; margin:0 0 13px; }
.embedded-main .game-card-content p { color:var(--muted); font-size:13px; line-height:1.8; margin:0 0 18px; }
.embedded-main .game-link { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:10px 16px; border:1px solid #7cdaec; border-radius:4px; background:var(--accent); color:var(--accent-ink); box-shadow:0 3px 0 #065a73; font-size:13px; font-weight:700; text-decoration:none; }
.embedded-main .game-link:hover { background:#75def3; color:var(--accent-ink); }
.embedded-main :is(.build-note,.prototype-note) { flex:0 0 280px; max-width:100%; border:1px solid var(--line); border-top:3px solid var(--embed-mark); border-radius:5px; background:var(--surface); padding:20px; box-shadow:0 12px 22px #08223010,3px 4px 0 var(--surface-raised); }
.embedded-main :is(.build-note,.prototype-note) strong { display:block; color:var(--text); font:700 14px/1.5 var(--heading-font); margin-bottom:7px; }
.embedded-main :is(.build-note,.prototype-note) span { display:block; color:var(--muted); font-size:12px; line-height:1.6; }
/* Restore private game palettes locally instead of leaking them into the website. */
body[data-engine="armed-orbit"] #gameShell { --page-bg:#f3f6f9; --surface:#fff; --surface-soft:#edf3f7; --line:rgba(15,49,74,.16); --line-strong:rgba(15,49,74,.28); --text:#0d2030; --muted:#617487; --cyan:#08bde8; --cyan-dark:#087ea4; --purple:#8d62ff; --amber:#f7b843; --red:#f2526f; --shadow:0 22px 65px rgba(27,58,79,.14); color:var(--text); }
body.dark-mode[data-engine="armed-orbit"] #gameShell { --page-bg:#071019; --surface:#0c1824; --surface-soft:#112333; --line:rgba(143,203,232,.16); --line-strong:rgba(143,203,232,.28); --text:#eff8fc; --muted:#9db0be; --shadow:0 24px 75px rgba(0,0,0,.36); }
body[data-engine="firewall"] #gameShell { --bg:#f2f6fa; --surface:#fff; --surface-2:#edf3f8; --surface-3:#e2ebf3; --line:rgba(25,68,103,.16); --line-strong:rgba(25,68,103,.28); --text:#102235; --muted:#607488; --shadow:0 20px 60px rgba(25,54,78,.12); color:var(--text); }
body.dark-mode[data-engine="firewall"] #gameShell { --bg:#06111b; --surface:#0b1825; --surface-2:#112231; --surface-3:#172c3c; --line:rgba(141,202,230,.16); --line-strong:rgba(141,202,230,.3); --text:#f2f8fc; --muted:#9bb1c1; --shadow:0 24px 80px rgba(0,0,0,.38); }
/* Match the original game windows, independently of the website copy gutters. */
body[data-engine="armed-orbit"] .embedded-main > #gameShell:not(:fullscreen):not(.pseudo-fullscreen) { width:min(1240px,calc(100% + (2 * var(--page-pad)) - 40px)); max-width:none; margin-inline:calc((100% - min(1240px,calc(100% + (2 * var(--page-pad)) - 40px))) / 2); }
body[data-engine="firewall"] .embedded-main > #gameShell:not(:fullscreen):not(.pseudo-fullscreen) { width:min(1400px,calc(100% + (2 * var(--page-pad)) - 40px)); max-width:none; margin-inline:calc((100% - min(1400px,calc(100% + (2 * var(--page-pad)) - 40px))) / 2); }
body[data-engine="armed-orbit"] #gameShell { font-family:"Inter",Arial,sans-serif; line-height:1.5; }
body[data-engine="firewall"] #gameShell { font-family:"Inter",Arial,sans-serif; line-height:1.55; }
:where(body[data-engine="armed-orbit"] #gameShell) :is(.section-label,.eyebrow) { color:var(--cyan-dark); font:900 .72rem/1.5 "Inter",Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; margin:0; }
:where(body[data-engine="firewall"] #gameShell) :is(.section-label,.eyebrow) { color:var(--cyan); font:900 .72rem/1.55 "Inter",Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; margin:0; }
/* Paint-only emphasis: retain the original game layout, control bounds and private palettes. */
body:is([data-engine="armed-orbit"],[data-engine="firewall"]) #gameShell:not(:fullscreen):not(.pseudo-fullscreen) { outline:1px solid var(--line-strong); outline-offset:5px; box-shadow:0 25px 65px #0417252b,0 7px 0 var(--surface-soft,var(--surface-2)); }
body:is([data-engine="armed-orbit"],[data-engine="firewall"]) #gameShell :is(.setup-panel,.menu-panel,.panel-card) { box-shadow:inset 0 1px 0 #ffffff18,0 18px 38px #061a2a20; }
body:is([data-engine="armed-orbit"],[data-engine="firewall"]) #gameShell :is(.game-button,.menu-btn,.control-btn,.operations-tabs button,.loadout-tabs button) { box-shadow:inset 0 1px 0 #ffffff26,0 3px 0 #031c302e; }
body:is([data-engine="armed-orbit"],[data-engine="firewall"]) #gameShell :is(.game-button,.menu-btn,.control-btn,.operations-tabs button,.loadout-tabs button):active:not(:disabled) { box-shadow:inset 0 2px 3px #061a2a26,0 1px 0 #031c3033; }
body[data-engine="firewall"] #gameShell :is(.operations-tabs button,.loadout-tabs button).active { outline:1px solid var(--cyan); outline-offset:2px; }
/* Practice Room keeps its study layout and access flow, with the same frame materials. */
body[data-engine="practice-room"] .practice-main { width:100%; max-width:none; padding:0; margin:0; }
body[data-engine="practice-room"] #practice-content { --ink:var(--text); --paper:var(--bg); --blue:#087ea4; --blue-dark:#065a73; --blue-pale:#e2f1f5; --radius:3px; --pr-surface:var(--surface); --pr-subtle:var(--surface-raised); --pr-accent:#087ea4; --pr-accent-soft:#e2f1f5; font-family:var(--body-font); color:var(--text); }
body.dark-mode[data-engine="practice-room"] #practice-content { --blue:#72d9ee; --blue-dark:#a0e8f7; --blue-pale:#183c4b; --pr-accent:#72d9ee; --pr-accent-soft:#183c4b; }
body[data-engine="practice-room"] .access-shell { min-height:calc(100dvh - 90px); background:var(--bg); padding:52px var(--page-pad); }
body[data-engine="practice-room"] .access-card { background:var(--surface); border-radius:3px; border:1px solid var(--line); border-top:3px solid var(--accent); box-shadow:8px 8px 0 var(--surface-raised); }
body[data-engine="practice-room"] .access-card h1 { font-family:var(--heading-font); font-weight:700; letter-spacing:-.055em; }
body[data-engine="practice-room"] .access-card h1 span { color:var(--accent-text); }
body[data-engine="practice-room"] .access-card .eyebrow { color:var(--accent-text); font-size:10px; letter-spacing:.12em; }
body[data-engine="practice-room"] .access-card .access-intro { color:var(--text); }
body[data-engine="practice-room"] #practice-content :is(.button,.pr-subject-card,.pr-brand-icon,.pr-icon-button,.unit-card,.setting-fields select,.mode-card,.question-card,.score-panel,.topic-panel,.setup-card) { border-radius:3px; }
body[data-engine="practice-room"] .access-card .button { min-height:48px; }
body[data-engine="practice-room"] .access-note { padding-inline:var(--page-pad); }
body[data-engine="practice-room"] .access-card .access-note { padding-inline:0; }
body[data-engine="practice-room"] #confirm-dialog { border-radius:3px; }
@media(max-width:1000px) { body[data-engine] .embedded-main .game-top-card,body[data-engine] .embedded-main > .game-intro { flex-direction:column; align-items:flex-start; } .embedded-main :is(.build-note,.prototype-note) { flex-basis:auto; width:100%; max-width:580px; } .embedded-main .more-info-grid { grid-template-columns:minmax(0,1fr); } }
@media(max-width:900px) { body:is([data-engine="armed-orbit"],[data-engine="firewall"]) .embedded-main > #gameShell:not(:fullscreen):not(.pseudo-fullscreen) { width:min(760px,calc(100% + (2 * var(--page-pad)) - 20px)); margin-inline:calc((100% - min(760px,calc(100% + (2 * var(--page-pad)) - 20px))) / 2); } }
@media(max-width:650px) { body:is([data-engine="armed-orbit"],[data-engine="firewall"]) .embedded-main > #gameShell:not(:fullscreen):not(.pseudo-fullscreen) { width:calc(100% + (2 * var(--page-pad))); margin-inline:calc(-1 * var(--page-pad)); } }
@media(max-width:700px) { body[data-engine] .embedded-main { padding-bottom:50px; } body[data-engine] .embedded-main .game-top-card,body[data-engine] .embedded-main > .game-intro { padding:24px 22px 26px; margin-top:28px; gap:24px; } .embedded-main > :is(.info-section,.game-details,.prototype-details),.embedded-main .games-grid { grid-template-columns:minmax(0,1fr); gap:24px; } .embedded-main > .info-section :is(.info-card,.bug-box,.successor-box),.embedded-main > :is(.game-details,.prototype-details) article { padding:24px; } .embedded-main .game-frame-subheader { align-items:flex-start; padding:18px 20px; } .embedded-main .frame-badge { display:none; } .embedded-main .game-title-wrap p,.embedded-main > .game-intro p { font-size:14px; } .embedded-main .more-info-toggle { padding:20px 18px; } .embedded-main .more-info-toggle strong { font-size:19px; } .embedded-main .more-info-panel { padding:20px 18px; } .embedded-main .game-card-image { aspect-ratio:3/2; max-height:250px; } .embedded-main .game-frame-actions a,.embedded-main .game-entry-actions a { flex:1 1 auto; } }
@media(pointer:coarse) { .embedded-main .mobile-warning { display:block; } }
@media(prefers-reduced-motion:reduce) { .embedded-main :is(.primary-btn,.secondary-btn,.toggle-icon),.embedded-main > :is(.start-row,.button-row-main) button { transition:none; transform:none; } }