/* MATRIX ARCADE v1 — cinematic yet accessible, self-contained styles */
:root{
 color-scheme:dark;
 --ink:#080b17;--panel:#11172b;--panel2:#151d35;--line:rgba(158,189,235,.15);
 --text:#edf4ff;--muted:#9eacc7;--mint:#54f4dc;--violet:#a994ff;--gold:#fac878;
 --radius:18px;--font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{min-height:100vh;margin:0;background:var(--ink);color:var(--text);font:15px/1.55 var(--font);overflow-x:hidden}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.4}
button:focus-visible,input:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid var(--mint);outline-offset:4px}
[hidden]{display:none!important}
::selection{background:#4df6d2;color:#101426}
a{color:inherit}
h1,h2,h3,h4,p{margin-top:0}
h1,h2,h3{line-height:1.06;letter-spacing:-.045em}
p{color:var(--muted)}
.skip{position:absolute;left:-9999px;top:10px;z-index:200;background:white;color:black;padding:8px}
.skip:focus{left:10px}
.ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 70% -20%,#122447 0,transparent 55%),#080b17}
.orb{position:absolute;border-radius:100%;filter:blur(95px);opacity:.24}
.orb-one{width:460px;height:460px;background:#503cb2;right:-140px;top:20%}
.orb-two{width:360px;height:360px;background:#098f8e;left:-220px;top:55%}
.gridlines{position:absolute;inset:0;background-image:linear-gradient(transparent 96%,rgba(72,233,216,.06) 97%),linear-gradient(90deg,transparent 96%,rgba(72,233,216,.06) 97%);background-size:80px 80px;mask-image:linear-gradient(to bottom,transparent,#000 45%,transparent)}
.app-shell{width:min(1400px,100%);margin:auto;padding:0 4.25%;position:relative}
.topbar{display:flex;gap:20px;justify-content:space-between;align-items:center;min-height:88px;border-bottom:1px solid var(--line)}
.brand{display:flex;gap:11px;align-items:center;text-decoration:none;font-weight:900;font-size:19px;letter-spacing:.13em;line-height:1}
.brand em{color:var(--mint);font-style:normal}
.brand small{display:block;font-size:8px;letter-spacing:.28em;color:var(--muted);margin-top:8px}
.brand-mark{width:39px;height:39px;display:grid;place-items:center;background:#162c40;color:var(--mint);border:1px solid #1e827d;border-radius:12px;font-size:28px;box-shadow:0 0 24px #24e8c624}
.topbar nav{display:flex;gap:28px;align-items:center;margin-left:auto}
.nav-link{border:0;background:transparent;color:#c7d5eb;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:10px 2px}
.nav-link:hover,.nav-link:focus-visible{color:var(--mint)}
.icon-btn{background:#162139;color:#ccdcf5;border:1px solid var(--line);border-radius:50%;width:41px;height:41px;font-size:22px;display:grid;place-items:center}
.hero{padding:70px 0 66px}
.eyebrow{font-size:10px;letter-spacing:.26em;font-weight:900;color:var(--mint);text-transform:uppercase}
.signal-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint);margin-right:9px}
.hero-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.8fr);align-items:center;gap:42px}
.hero h1{font-size:clamp(49px,6.5vw,96px);font-weight:950;line-height:.98;letter-spacing:-.075em;margin:27px 0}
.holo-word{color:transparent;background:linear-gradient(105deg,#5bf7d6,#67aeff 55%,#ba9bff);background-clip:text;-webkit-background-clip:text;filter:drop-shadow(0 0 25px rgba(73,250,215,.12))}
.hero-text{font-size:17px;max-width:570px;line-height:1.75;color:#bdc8e1}
.hero-text strong{color:#e8f9ff}
.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:32px}
.btn{border-radius:10px;border:1px solid transparent;min-height:45px;padding:12px 18px;color:var(--text);font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:12px;transition:transform .15s,border-color .15s,background .15s}
.btn:not(:disabled):hover{transform:translateY(-2px)}
.btn.primary{background:linear-gradient(115deg,#56efd7,#8ef7de);color:#071e25;box-shadow:0 0 29px #32e1c329}
.btn.ghost{background:rgba(141,165,228,.08);border-color:rgba(137,165,214,.33)}
.btn.subtle{background:transparent;border-color:var(--line)}
.btn.danger{background:#3f1d33;border-color:#c86275;color:#ffd4d9}
.btn.text-btn{background:none;padding:6px 0;color:var(--muted);min-height:32px}
.hero-foot{display:flex;flex-wrap:wrap;gap:18px;color:#7488a6;font-size:9px;letter-spacing:.16em;font-weight:800;margin-top:38px}
.hero-foot span:not(:last-child):after{content:"+";color:#396c7a;margin-left:18px}
.core-visual{width:min(390px,100%);aspect-ratio:1;margin:0 auto;position:relative;display:grid;place-items:center}
.core-visual:before{content:"";position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,rgba(34,169,176,.16),transparent 66%);filter:blur(20px)}
.core-orbit{position:absolute;border-radius:50%;border:1px solid rgba(98,244,223,.2);animation:spin 40s linear infinite}
.core-orbit.outer{inset:0;border-style:dashed;border-color:#62fff142}
.core-orbit.middle{inset:9%;border:2px solid transparent;border-top-color:#50f8d8;border-right-color:#52baff88;box-shadow:0 0 30px #2bdbb019;animation-duration:20s;animation-direction:reverse}
.core-orbit.inner{inset:23%;border:1px dashed #7399ef88;animation-duration:27s}
.core-center{width:53%;aspect-ratio:1;z-index:1;border:1px solid #527c9c;border-radius:50%;background:radial-gradient(circle at 50% 40%,#263856 0%,#101b30 65%,#07111e);display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 0 70px #45f5db14,inset 0 0 40px #64b3ff1a}
.core-center strong{font-size:clamp(46px,5vw,72px);font-weight:900;letter-spacing:-.09em;color:#d2fff9}
.core-label,.core-center span:last-child{font-size:9px;letter-spacing:.15em;color:#9fb6d2;font-weight:800}
.orbit-label{position:absolute;z-index:2;border:1px solid #346c72;background:#0e2030;padding:6px 10px;color:#8eeadd;font-size:8px;letter-spacing:.15em;font-weight:900}
.orbit-top{top:14%;right:0}.orbit-bottom{bottom:13%;left:2%}
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);background:linear-gradient(120deg,#111a2c,#0e1528);border:1px solid var(--line);border-radius:13px;padding:22px 0;margin-bottom:80px}
.stats-strip>div{padding:7px 25px;border-right:1px solid var(--line)}
.stats-strip>div:last-child{border-right:0}
.stats-strip span{display:block;color:#7184a6;letter-spacing:.16em;font-size:10px;font-weight:900}
.stats-strip strong{font-size:25px;line-height:1.7;letter-spacing:-.045em}
.stats-strip small{font-size:12px;color:#6e7d9b}
.stats-strip .status-text{font-size:17px;letter-spacing:.06em;color:var(--gold)}
.section-heading{display:flex;justify-content:space-between;gap:25px;align-items:flex-end;margin-bottom:25px}
.section-heading h2{font-size:clamp(28px,4vw,45px);margin:8px 0 9px}
.section-heading p{max-width:600px;margin:0;line-height:1.7}
.section-id{font-size:11px;letter-spacing:.2em;color:#637eaa;font-weight:900}
.world-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.world-card{--accent:#54f4dc;position:relative;min-width:0;overflow:hidden;background:linear-gradient(145deg,rgba(28,36,58,.97),rgba(11,18,34,.94));border:1px solid rgba(131,157,214,.18);border-radius:15px;padding:26px;display:flex;flex-direction:column;min-height:295px;transition:transform .17s,border-color .17s,box-shadow .17s}
.world-card:before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--accent),transparent 70%);opacity:.8}
.world-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 18px 50px rgba(0,0,0,.18)}
.world-card.top-complete{border-color:color-mix(in srgb,var(--accent),transparent 45%)}
.world-card-top{display:flex;align-items:center;justify-content:space-between}
.world-icon{width:49px;height:49px;border-radius:14px;background:color-mix(in srgb,var(--accent),transparent 88%);border:1px solid color-mix(in srgb,var(--accent),transparent 55%);color:var(--accent);display:grid;place-items:center;font-size:28px}
.world-num{font-size:11px;color:#7283a4;font-weight:900;letter-spacing:.15em}
.world-card h3{font-size:26px;margin:25px 0 7px}
.world-card .eyebrow{color:var(--accent)}
.world-card p{font-size:13px;line-height:1.7;flex:1}
.world-card-bottom{border-top:1px solid var(--line);padding-top:16px}
.progress-mini{display:flex;justify-content:space-between;color:#9eb0ce;font-size:10px;font-weight:800;letter-spacing:.09em}
.progress-track{height:5px;background:#263044;border-radius:10px;overflow:hidden;margin:11px 0 15px}
.progress-fill{height:100%;width:0;background:var(--accent);border-radius:10px;transition:width .4s;box-shadow:0 0 12px var(--accent)}
.world-launch{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;color:var(--accent);background:transparent;border:0;padding:3px 0;text-align:left;font-size:12px;font-weight:900;letter-spacing:.1em}
.world-launch span:last-child{font-size:21px}
.world-preview{display:inline-block;margin-top:12px;color:#a8bed3;text-decoration:none;font-size:9px;font-weight:900;letter-spacing:.13em}
.world-preview:hover{color:var(--accent)}
.tour-section{margin:92px 0 40px}
.tour-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(230px,.6fr);gap:18px;align-items:stretch}
.tour-layout video{display:block;width:100%;aspect-ratio:16/9;max-height:520px;object-fit:contain;border-radius:14px;background:#050b19;border:1px solid #3c5873}
.tour-side{padding:25px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,#172239,#0e182b);display:flex;flex-direction:column;align-items:flex-start}
.tour-side h3{font-size:clamp(22px,3vw,34px);margin:18px 0}
.tour-side p{font-size:13px;line-height:1.8;flex:1}
.tour-side a{font-size:10px;letter-spacing:.08em;color:#80f8df;margin-top:12px;font-weight:900;text-decoration:none}
@media(max-width:780px){.tour-layout{grid-template-columns:1fr}.tour-side{padding:18px}}
.final-banner{display:flex;align-items:center;gap:27px;margin-top:22px;padding:31px;border:1px solid #5b4a79;border-radius:15px;background:radial-gradient(ellipse at 8% 50%,#382b5b,#15162a 48%,#131827)}
.final-icon{font-size:65px;color:#bba2ff;text-shadow:0 0 30px #9a7bed}
.final-banner>div:nth-child(2){flex:1}
.final-banner h2{font-size:30px;margin:8px 0}
.final-banner p{margin:0}
.final-button{background:#bd9afe;color:#100a22}
.final-button:disabled{background:#47385d;color:#bda7da;opacity:.75}
.learning-section{margin:100px 0 60px}
.bonus-section{margin:35px 0 90px}
.bonus-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.bonus-card{border:1px solid #394866;background:#121b30;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px;border-radius:14px;text-decoration:none;transition:border-color .15s,transform .15s}
.bonus-card:hover{border-color:var(--mint);transform:translateY(-2px)}
.bonus-card span{font-size:30px;color:#9ddff3}.bonus-card strong{font-size:15px;letter-spacing:.08em}.bonus-card small{font-size:11px;line-height:1.5;color:#9bb6d1}
@media(max-width:950px){.bonus-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.bonus-grid{grid-template-columns:1fr}}
.skill-strip{display:flex;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);padding-top:22px}
.skill-strip span{padding:10px 14px;border:1px solid var(--line);border-radius:7px;color:#88a9bb;font-size:11px;font-weight:900;letter-spacing:.09em}
.footer{border-top:1px solid var(--line);padding:26px 0 34px;display:flex;gap:15px;justify-content:space-between;flex-wrap:wrap;color:#788ba8;font-size:10px;font-weight:800;letter-spacing:.09em}
.footer a{color:#b6d9ea;text-decoration:none}
/* in-mission */
.game-top{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:25px 0;margin-bottom:35px}
.mission-id,.mission-progress{font-size:10px;letter-spacing:.15em;color:#8ea5c5;font-weight:900}
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px;padding-bottom:65px}
.game-main{min-width:0}
.game-main h2{font-size:clamp(32px,4.5vw,59px);margin:10px 0}
.game-intro{font-size:16px;line-height:1.65;max-width:700px}
.game-board{position:relative;min-height:440px;background:linear-gradient(145deg,#101a32,#0b1122);border:1px solid #283c5d;border-radius:16px;margin:26px 0 15px;padding:27px;overflow:hidden}
.game-board:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.04) 4px 5px);opacity:.2}
.game-actions{display:flex;gap:10px;flex-wrap:wrap}
.feedback{margin-top:16px;padding:15px 17px;background:#111d31;border:1px solid #344764;border-radius:10px;color:#b8cde3;font-size:13px}
.feedback.good{border-color:#438a81;color:#aaf5db}
.feedback.bad{border-color:#8b5268;color:#ffd0d8}
.mission-sidebar{display:flex;flex-direction:column;gap:13px}
.side-card{border:1px solid var(--line);border-radius:14px;background:#101827;padding:23px}
.side-card h3{font-size:21px;margin:15px 0 8px}
.side-card p{font-size:13px;line-height:1.65;margin:0}
.level-dots{display:flex;gap:6px;margin:19px 0}
.level-dot{flex:1;height:8px;background:#344359;border-radius:4px}
.level-dot.done{background:var(--mint)}
.level-dot.active{background:var(--gold)}
.tiny-tag{display:inline-block;padding:7px 9px;border:1px solid #427d76;color:#77e6d4;font-size:9px;font-weight:900;letter-spacing:.08em;margin-top:16px;border-radius:5px}
.game-board button:focus-visible{outline-offset:1px}
.board-note{font-size:12px;color:#a2b5d3;margin:9px 0}
/* vector run */
.maze-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.maze-grid{display:grid;grid-template-columns:repeat(6,1fr);width:min(100%,435px);aspect-ratio:1;gap:4px}
.maze-cell{display:grid;place-items:center;border-radius:7px;position:relative;background:#22314a;border:1px solid #324661;font-size:clamp(16px,3vw,25px)}
.maze-cell.wall{background:repeating-linear-gradient(45deg,#131a29 0 7px,#1c263b 7px 12px);border-color:#1d273d}
.maze-cell.goal{border:1px solid #9d8aff;background:#403068;color:#f2e2ff}
.maze-cell.key{background:#203d4d;color:#6fead8}
.maze-cell.player{background:#164b50;box-shadow:inset 0 0 16px #1fefc36b;border-color:#5cffe6}
.maze-cell .avatar{width:60%;height:60%;border-radius:50% 50% 35% 35%;background:#94fff4;box-shadow:0 0 21px #4af5db;transform:rotate(-45deg)}
.maze-cell .key-shape{font-size:24px;text-shadow:0 0 15px #4cffec}
.maze-control{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,44px);gap:7px;justify-content:center}
.maze-control button,.touch-control{border-radius:9px;border:1px solid #386877;background:#172d3f;color:#acf5ee;font-size:20px;font-weight:900}
.maze-control button:hover,.touch-control:hover{background:#225461}
.maze-info{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;font-size:12px;color:#a5bcd5}
/* circuit */
.circuit-wrap{text-align:center}
.circuit-grid{display:grid;grid-template-columns:repeat(4,1fr);width:min(100%,456px);aspect-ratio:1;gap:7px;margin:20px auto}
.circuit-tile{position:relative;border:1px solid #3e5673;border-radius:10px;background:#121e32;display:grid;place-items:center;padding:0;transition:border-color .15s,background .15s}
.circuit-tile:before{content:"";position:absolute;inset:5px;border-radius:7px;border:1px solid #30405930;pointer-events:none}
.circuit-tile.powered{background:#153a3e;border-color:#56decb;box-shadow:0 0 16px #2cf5d32c}
.circuit-tile.source:after,.circuit-tile.target:after{position:absolute;font-size:8px;letter-spacing:.12em;bottom:4px;left:0;right:0;color:#b8dfef;content:"SOURCE"}
.circuit-tile.target:after{content:"CORE"}
.circuit-tile svg{width:82%;height:82%;overflow:visible}
.circuit-tile line{stroke:#6d86a6;stroke-width:12;stroke-linecap:round;filter:drop-shadow(0 0 3px #5483ab)}
.circuit-tile.powered line{stroke:#7ffce0;filter:drop-shadow(0 0 6px #34edc2)}
.circuit-legend{display:flex;justify-content:space-between;gap:12px;width:min(100%,456px);margin:auto;color:#8fcfcd;font-size:11px;font-weight:800}
/* cipher */
.cipher-layout{max-width:530px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.cipher-digits{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cipher-digit{background:#181f40;border:1px solid #516092;border-radius:13px;padding:14px;font:900 47px/1.2 var(--font);text-align:center;color:#e6d8ff;min-width:0;appearance:textfield}
.cipher-digit::-webkit-inner-spin-button{display:none}
.cipher-controls{display:flex;gap:8px;flex-wrap:wrap}
.cipher-controls .btn{flex:1}
.cipher-history{border-top:1px solid var(--line);padding-top:16px}
.cipher-history>h3{font-size:12px;color:#acbadb;letter-spacing:.12em}
.guess-row{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:#19213c;border:1px solid #364561;border-radius:7px;margin:7px 0;font-size:13px}
.guess-row strong{font-size:19px;letter-spacing:.27em;color:#e3d8ff}
.guess-row small{color:#bed0e9}
/* patterns */
.pattern-area{text-align:center;max-width:640px;margin:auto}
.pattern-sequence{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin:35px 0}
.pattern-sequence span{min-width:62px;min-height:75px;display:grid;place-items:center;border:1px solid #704c83;background:#261d40;border-radius:12px;font-size:29px;font-weight:900}
.pattern-sequence span.unknown{border-style:dashed;color:#f8b9d7;background:#422038}
.pattern-options{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin:15px auto;max-width:550px}
.pattern-option{font-size:26px;font-weight:900;color:#f5dfef;background:#321d3d;border:1px solid #76527f;border-radius:11px;padding:18px 0}
.pattern-option:not(:disabled):hover{background:#65365a}
/* reactor balance */
.balance-area{max-width:690px;margin:auto}
.slider-row{display:grid;grid-template-columns:135px 1fr 40px;gap:13px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}
.slider-row label{font-size:12px;font-weight:900;letter-spacing:.05em}
.slider-row input{width:100%;accent-color:#75d7ff}
.slider-row output{font-size:25px;font-weight:900;text-align:right;color:#b4e9ff}
.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:24px 0}
.metric{border:1px solid #304764;background:#111d32;border-radius:10px;padding:14px}
.metric small{display:block;font-size:10px;letter-spacing:.08em;color:#96aecd}
.metric strong{font-size:23px;font-weight:850}
.metric.ok{border-color:#4a9e86}.metric.bad{border-color:#89526a}
.metric.ok strong{color:#8bf4d7}.metric.bad strong{color:#ffacb6}
.balance-commit{width:100%}
/* action defense */
.guardian-area{max-width:820px;margin:auto}
.guardian-display{border:1px solid #34566b;border-radius:14px;overflow:hidden;background:#020c1c;position:relative}
.guardian-display canvas{width:100%;height:auto;display:block;touch-action:none;aspect-ratio:740/420}
.guardian-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(5,13,28,.78);backdrop-filter:blur(5px);padding:20px}
.guardian-overlay h3{font-size:30px;margin:0 0 10px}
.guardian-status{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:15px 2px;color:#c3f0df;font-size:12px;font-weight:900;letter-spacing:.05em}
.guardian-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.guardian-pad{display:grid;grid-template-columns:repeat(3,50px);grid-template-rows:repeat(2,44px);gap:5px}
.guardian-pad button{touch-action:none;user-select:none;-webkit-user-select:none}
.guardian-tip{font-size:12px;max-width:260px}
/* finale */
.final-game{text-align:center;max-width:650px;margin:auto}
.sigil-line{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:28px 0}
.sigil-unit{padding:15px 0;background:#262040;border:1px solid #71589b;border-radius:10px}
.sigil-unit strong{display:block;font-size:31px;color:#d9cbff}
.sigil-unit small{display:block;font-size:8px;letter-spacing:.1em;color:#afa2d8}
.code-input{display:block;width:min(100%,330px);margin:25px auto;text-align:center;padding:16px;font:900 36px/1.3 ui-monospace,monospace;letter-spacing:.28em;border-radius:10px;color:#f5e7ff;background:#1e213f;border:1px solid #8676bd}
.final-submit{width:min(100%,330px)}
/* blueprint, modals */
.blueprint-page{padding:50px 0 90px}.blueprint-page h1{font-size:clamp(46px,8vw,90px);margin:25px 0}
.blueprint-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin:38px 0}
.blueprint-card{padding:26px;border:1px solid var(--line);background:#131c31;border-radius:14px}
.blueprint-card h3{font-size:23px;margin:12px 0}
.blueprint-card p{font-size:14px}
.blueprint-card .eyebrow{margin-top:12px}
.blueprint-card.locked{opacity:.47}
.blueprint-footer{border:1px solid var(--line);border-radius:13px;padding:24px;background:#111d31;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.blueprint-footer p{flex:1;min-width:220px;margin:0}
.modal-cover{position:fixed;inset:0;z-index:100;background:rgba(4,7,17,.8);backdrop-filter:blur(12px);display:grid;place-items:center;padding:15px;overflow-y:auto}
.modal{position:relative;width:min(520px,100%);max-height:calc(100dvh - 30px);overflow-y:auto;background:linear-gradient(145deg,#202641,#121a2e);border:1px solid #596687;border-radius:18px;padding:34px;box-shadow:0 40px 100px #000b}
.modal h2{font-size:35px;margin:13px 0 18px}
.close-modal{position:absolute;top:12px;right:18px;background:none;border:0;color:#c6d3ee;font-size:31px;line-height:1}
.switch-line{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:15px 0;border-bottom:1px solid var(--line);font-weight:750}
.switch-line small{display:block;font-size:12px;color:#9cb3c7;font-weight:400}
.switch-line input{width:22px;height:22px;accent-color:var(--mint)}
.settings-modal .muted{margin:24px 0;line-height:1.7;font-size:13px}
.settings-modal .danger{width:100%}
.save-import-label{display:block;color:#b9cde3;font-size:11px;font-weight:900;letter-spacing:.12em;margin:22px 0 8px}
#import-save{display:block;width:100%;max-width:100%;background:#13243a;border:1px solid #41647f;border-radius:8px;color:#ddefff;padding:10px;font-size:12px;margin-bottom:19px}
.certificate{border:1px solid #85c9b0;box-shadow:inset 0 0 40px rgba(65,241,205,.04);text-align:center;background:linear-gradient(130deg,#0e2b35,#171b37);border-radius:16px;padding:42px 20px;margin:30px 0 25px}
.certificate h2{font-size:clamp(25px,4vw,43px);color:#d8fff3;margin:18px 0}
.certificate strong{font-size:18px;letter-spacing:.17em;color:#8bffde}
@media print{.certificate{background:white;color:black;border:3px double #0b4841;box-shadow:none}.certificate h2,.certificate strong{color:#095d4c}.certificate p{color:#333}.certificate .eyebrow{color:#095d4c}}
.victory-modal{text-align:center;border-color:#5ac7ad;background:radial-gradient(ellipse at top,#173b48,#121b32 72%)}
.victory-burst{font-size:70px;color:#a0ffe7;text-shadow:0 0 45px #67f6d5}
.victory-modal h2{font-size:38px}
.victory-footer{display:flex;gap:9px;justify-content:center;margin-top:25px;flex-wrap:wrap}
.insight{background:#0c2430;border-left:3px solid var(--mint);padding:13px 17px;color:#d0f9ed;border-radius:5px;font-size:14px}
.guide-list{padding-left:25px;color:#d1dced;line-height:2}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1100px){
 .hero-layout{grid-template-columns:1fr .68fr;gap:14px}
 .hero h1{font-size:clamp(46px,6vw,76px)}
 .world-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:780px){
 .app-shell{padding:0 18px}
 .topbar{min-height:75px}.topbar nav{gap:12px}
 .hero{padding:45px 0}.hero-layout{grid-template-columns:1fr}
 .core-visual{width:min(300px,100%);margin:20px auto 0}
 .hero h1{font-size:clamp(45px,9vw,78px)}
 .stats-strip{grid-template-columns:repeat(2,1fr);margin-bottom:60px}
 .stats-strip>div:nth-child(2){border-right:0}
 .stats-strip>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
 .game-layout{grid-template-columns:1fr}
 .mission-sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .mission-sidebar .side-card:first-child{grid-column:1/-1}
 .game-board{padding:18px}
 .final-banner{flex-wrap:wrap}
 .final-button{width:100%}
}
@media(max-width:550px){
 .brand{font-size:14px}.brand-mark{width:31px;height:31px;font-size:22px}
 .brand small{font-size:7px}
 .topbar nav{gap:9px}
 .nav-link{font-size:10px}
 .hide-small{display:none}
 .hero h1{font-size:clamp(43px,12vw,63px)}
 .hero-foot{gap:8px}.hero-foot span:not(:last-child):after{margin-left:8px}
 .world-grid,.blueprint-grid{grid-template-columns:1fr}
 .world-card{min-height:275px}
 .stats-strip>div{padding:11px 15px}
 .stats-strip span{font-size:9px}
 .section-id{display:none}
 .final-banner{padding:20px;gap:12px}
 .final-icon{font-size:40px}
 .game-layout{gap:14px}
 .game-board{min-height:340px;padding:12px;margin-top:18px}
 .mission-sidebar{grid-template-columns:1fr}
 .mission-sidebar .side-card:first-child{grid-column:auto}
 .pattern-sequence span{min-width:42px;min-height:54px;font-size:22px}
 .pattern-option{font-size:22px}
 .slider-row{grid-template-columns:86px 1fr 34px;gap:6px}
 .slider-row label{font-size:10px}
 .game-top{margin-bottom:25px}
 .game-top .mission-id{display:none}
 .modal{padding:25px}
 .sigil-unit strong{font-size:23px}
 .footer{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .core-orbit{animation:none}
 *,*:before,*:after{transition-duration:.001ms!important;animation-duration:.001ms!important}
}
body.reduce-motion .core-orbit{animation:none}
@media print{
 body{background:white;color:black}.ambient,.topbar,.footer,.btn,.game-board,.game-actions,.game-layout,.hero,.stats-strip,.world-grid,.final-banner,.learning-section{display:none!important}
 #screen-home,#screen-game{display:none!important}
 #screen-blueprint{display:block!important}
 .blueprint-card{border:1px solid #777;background:white;color:black;break-inside:avoid}
 .blueprint-card p{color:#333}
 .blueprint-card.locked{opacity:1}
 .blueprint-page .hero-text{color:#333}
}