:root{
  color-scheme:dark;
  --bg:#030813;
  --panel:#091323;
  --panel2:#0d1a2d;
  --line:#2e5978;
  --blue:#56e6ff;
  --blue2:#1898ff;
  --amber:#ffb254;
  --amber2:#ff7f4d;
  --text:#e9f8ff;
  --muted:#9bb7ca;
  --danger:#ff657e;
  --success:#86ffe2;
  --shadow:0 28px 80px rgba(0,0,0,.45);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:
 radial-gradient(circle at 20% 12%,rgba(24,152,255,.18),transparent 30%),
 radial-gradient(circle at 82% 18%,rgba(255,178,84,.12),transparent 20%),
 linear-gradient(180deg,#06101f 0%,#02060f 100%);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(146,221,255,.04) 4px 5px);opacity:.18;z-index:0}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(circle at center,transparent 0 35%,rgba(4,10,20,.4) 100%)}
#starfield{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.65}
#app{position:relative;z-index:2;min-height:100svh}
button,input{font:inherit}
button{cursor:pointer;border:none}
button:disabled{opacity:.5;cursor:not-allowed}
img{max-width:100%;display:block}
.screen{max-width:1220px;margin:auto;padding:22px 18px calc(44px + var(--safe-bottom));animation:fadeUp .5s ease both}
.app-shell{padding-top:max(20px,var(--safe-top));min-height:100svh;display:flex;flex-direction:column}
.landing{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:20px;padding-block:28px}
.landing-hero{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;min-height:72svh}
.landing-poster{position:relative;min-height:540px;border-radius:32px;border:1px solid rgba(109,234,255,.3);box-shadow:var(--shadow), inset 0 1px rgba(255,255,255,.08);background:
 linear-gradient(180deg,rgba(3,8,17,.12),rgba(3,8,17,.6)),
 url('landing-city.jpg') center/cover no-repeat}
.landing-poster::before{content:"";position:absolute;inset:14px;border-radius:24px;border:1px solid rgba(126,235,255,.16);pointer-events:none}
.landing-poster::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(180deg,transparent,rgba(2,6,15,.86));border-radius:0 0 32px 32px;box-shadow:inset 0 -40px 70px rgba(17,196,255,.08)}
.landing-copy{position:relative;padding:24px 8px 24px 0;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.main-logo{width:min(620px,100%);filter:drop-shadow(0 0 24px rgba(43,210,255,.35))}
.pill,.status-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;border:1px solid rgba(100,220,255,.26);background:rgba(10,31,45,.75);font-size:.74rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#c7f2ff;backdrop-filter:blur(16px)}
.tag{font-size:.8rem;font-weight:800;letter-spacing:.22em;color:var(--amber);text-transform:uppercase}
.introtitle{font-size:clamp(2rem,4.4vw,4rem);line-height:1.04;letter-spacing:-.04em;margin:0;max-width:760px;text-shadow:0 0 28px rgba(58,204,255,.17)}
.introcopy,.sub{font-size:1.03rem;line-height:1.8;color:var(--muted);max-width:760px;margin:0}
.brandfoot{display:flex;align-items:center;justify-content:center;gap:14px;color:#b8cbda;font-size:.92rem;letter-spacing:.18em;text-transform:uppercase;opacity:.95}
.brandfoot img{width:170px;filter:drop-shadow(0 0 18px rgba(255,255,255,.12))}
.intro-grid,.result-grid,.syslist{display:grid;gap:12px}
.intro-grid{grid-template-columns:repeat(3,minmax(0,1fr));width:min(620px,100%)}
.intro-grid>div{border:1px solid rgba(107,222,255,.18);background:rgba(8,20,34,.72);padding:18px;border-radius:18px;display:flex;flex-direction:column;gap:4px;backdrop-filter:blur(10px)}
.intro-grid strong{font-size:1.55rem;color:#fff}
.intro-grid span{font-size:.82rem;letter-spacing:.14em;color:#9fc2d7}
.actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.center{text-align:center}
.stack-gap{display:grid;gap:12px}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;border-radius:16px;border:1px solid rgba(123,234,255,.35);background:linear-gradient(135deg,#10a6e7,#60ebff);color:#03101b;font-weight:900;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 0 25px rgba(24,186,250,.26);overflow:hidden;transition:transform .18s ease,box-shadow .22s ease,filter .2s ease}
.btn::before{content:"";position:absolute;left:-50%;top:-120%;width:35%;height:300%;transform:rotate(20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transition:left .75s ease}
.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 32px rgba(24,186,250,.42);filter:brightness(1.08)}
.btn:hover::before{left:150%}
.btn.secondary{background:rgba(8,25,39,.88);color:#dff5ff;border-color:rgba(104,219,255,.24);box-shadow:none}
.btn.orange{background:linear-gradient(135deg,#c96a2e,#ffbf59);border-color:rgba(255,211,134,.4);color:#261100;box-shadow:0 0 28px rgba(255,164,76,.28)}
.btn.ghost{background:rgba(6,16,30,.46);color:#d6edf9;border-color:rgba(93,139,167,.28);box-shadow:none}
.btn.wide{min-width:240px}
.smallbtn{padding:12px 16px;font-size:.8rem}
.btnicon{width:18px;height:18px;display:inline-grid;place-items:center;flex:0 0 18px}
.btnicon svg{width:100%;height:100%}
.header{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;margin-bottom:16px}
.brand{display:flex;align-items:center}
.brand img{width:min(310px,46vw);filter:drop-shadow(0 10px 28px rgba(22,190,255,.2))}
.statusbar{display:grid;gap:12px}
.hud{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.chip{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;border:1px solid rgba(101,217,255,.16);background:rgba(9,23,38,.88);backdrop-filter:blur(12px);min-height:48px}
.chip span{font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:#9fc2d7}
.chip strong{font-size:1rem;color:#fff}
.staticchip{justify-content:space-between;min-width:165px}
.danger{color:var(--danger)!important}
.missionbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid rgba(85,177,224,.18)}
.mission-meta p{margin:4px 0 0;color:#d9f2ff;font-weight:700}
.progress{display:flex;gap:6px;min-width:220px;flex:1;justify-content:flex-end}
.progress i{flex:1;height:8px;border-radius:999px;background:rgba(36,61,81,.82);position:relative;overflow:hidden}
.progress i.on{background:linear-gradient(90deg,#15a1e3,#53efff);box-shadow:0 0 12px rgba(20,170,255,.45)}
.progress i.on::after{content:"";position:absolute;right:0;top:-2px;width:12px;height:12px;border-radius:50%;background:#b2fdff;box-shadow:0 0 14px rgba(92,252,255,.7)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;flex:1}
.panel{position:relative;border-radius:26px;border:1px solid rgba(95,188,226,.22);background:linear-gradient(180deg,rgba(10,22,36,.93),rgba(7,16,28,.95));box-shadow:var(--shadow), inset 0 1px rgba(255,255,255,.05);padding:22px;backdrop-filter:blur(16px)}
.panel::before{content:"";position:absolute;left:18px;top:-1px;width:90px;height:2px;background:linear-gradient(90deg,var(--blue),transparent);box-shadow:0 0 18px rgba(86,230,255,.8)}
.module-panel{padding:18px 18px 22px;overflow:hidden}
.side-panel h2{margin:14px 0 16px;font-size:1.4rem}

.thumb-card{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:center;margin:4px 0 16px;padding:10px;border-radius:18px;border:1px solid rgba(105,211,248,.14);background:rgba(8,20,34,.72)}
.thumb-card img{width:92px;height:72px;object-fit:cover;border-radius:12px;border:1px solid rgba(127,223,255,.18)}
.thumb-card small{display:block;color:#8fb3c7;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:4px}
.thumb-card strong{display:block;line-height:1.35}
.integrity{margin:0 0 16px;padding:12px 14px;border-radius:16px;background:rgba(6,18,30,.72);border:1px solid rgba(98,193,231,.14)}
.integrity-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;color:#cceaf6;font-size:.88rem}
.integrity-head span{color:#9cb9ce}
.integrity-bar{height:10px;border-radius:999px;background:rgba(20,48,65,.85);overflow:hidden;position:relative}
.integrity-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#18a6ea,#62f0ff);box-shadow:0 0 18px rgba(86,230,255,.45)}
.stage-hero::before{content:"";position:absolute;inset:10px;border-radius:18px;border:1px solid rgba(144,227,255,.12);z-index:1;pointer-events:none}
.hero-copy{z-index:2}
.hero-kicker::before{content:"◆";font-size:.8em}
.option .opt-badge{color:#fff}
.syslist{grid-template-columns:1fr;gap:10px;margin-bottom:16px}
.syslist>div{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:16px;background:rgba(8,20,34,.72);border:1px solid rgba(103,198,234,.14)}
.syslist span{color:#9cb9ce;font-size:.86rem}
.syslist strong{color:#fff}
.log{min-height:210px;max-height:320px;overflow:auto;padding:14px;border-radius:18px;border:1px solid rgba(90,188,228,.12);background:linear-gradient(180deg,rgba(7,18,30,.96),rgba(8,21,36,.78));font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#97d8f3;white-space:pre-line;box-shadow:inset 0 0 24px rgba(20,117,160,.12)}
.hint-box{margin:14px 0 16px;padding:14px;border-radius:16px;background:rgba(255,178,84,.08);border:1px solid rgba(255,178,84,.16);color:#dbc9af;font-size:.92rem;line-height:1.6}
.asidebtn{width:100%;margin-top:10px}
.stage-hero{position:relative;border-radius:22px;overflow:hidden;min-height:290px;border:1px solid rgba(104,212,250,.18);margin-bottom:18px;background:#071120}
.stage-hero img{width:100%;height:290px;object-fit:cover;transform:scale(1.02);filter:saturate(1.05) contrast(1.02)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,8,18,.15),rgba(2,7,15,.1) 35%,rgba(3,9,18,.92) 100%)}
.hero-copy{position:absolute;left:0;right:0;bottom:0;padding:24px 22px 20px;display:grid;gap:10px}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;width:max-content;padding:8px 12px;border-radius:999px;background:rgba(6,21,34,.74);backdrop-filter:blur(10px);border:1px solid rgba(107,222,255,.18);font-size:.73rem;color:#c3f2ff;letter-spacing:.16em;text-transform:uppercase}
.hero-copy h2{margin:0;font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.03em}
.hero-copy p{margin:0;color:#bad1e1;line-height:1.7;max-width:820px}
.module-body{display:grid;gap:18px}
.code-clues{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.code-card,.terminal-card{position:relative;padding:16px 16px;border-radius:18px;border:1px solid rgba(105,211,248,.14);background:rgba(10,22,36,.78);overflow:hidden}
.code-card::after,.terminal-card::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(84,214,255,.06),transparent 40%,rgba(255,178,84,.06));pointer-events:none}
.code-card small{display:block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#8ab5cb;margin-bottom:8px}
.code-card strong{font-size:1.35rem;color:#fff}
.readout-wrap{display:grid;gap:8px;justify-items:center}
.mini{font-size:.86rem;color:#9ab8cc;line-height:1.6}
.digits{width:min(420px,100%);padding:16px 18px;border-radius:18px;border:1px solid rgba(91,212,255,.26);background:linear-gradient(180deg,rgba(4,16,28,.92),rgba(8,28,44,.8));font:700 clamp(1.7rem,5vw,2.3rem) ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.34em;text-align:center;color:#5ee8ff;box-shadow:inset 0 0 24px rgba(26,157,223,.14),0 0 26px rgba(9,171,248,.08)}
.keypad{display:grid;grid-template-columns:repeat(3,minmax(0,100px));gap:12px;justify-content:center}
.keypad button,.tile,.circuit,.option{position:relative;display:grid;place-items:center;border-radius:18px;border:1px solid rgba(105,211,248,.2);background:linear-gradient(180deg,rgba(14,35,55,.95),rgba(8,21,36,.95));color:#e7f7ff;transition:transform .18s ease,box-shadow .22s ease,border-color .18s ease,background .18s ease;box-shadow:inset 0 1px rgba(255,255,255,.05)}
.keypad button{min-height:78px;font-size:1.42rem;font-weight:800}
.keypad button:hover,.tile:hover,.circuit:hover,.option:hover{transform:translateY(-2px);border-color:rgba(109,234,255,.4);box-shadow:0 0 18px rgba(24,186,250,.16)}
.keypad .okkey{background:linear-gradient(180deg,rgba(179,87,29,.95),rgba(120,58,17,.95));color:#ffe9d3;border-color:rgba(255,190,119,.36)}
.circuits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.circuit{min-height:110px;padding:12px;gap:10px}
.circuit.aligned{border-color:rgba(113,255,197,.45);box-shadow:0 0 22px rgba(84,255,179,.14)}
.circuit-arrow{font-size:2.6rem;color:var(--blue)}
.target{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:#c7dbea}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,120px));gap:12px;justify-content:center}
.tile{min-height:100px;padding:0;font-size:1.6rem;font-weight:800;overflow:hidden}
.tile span{position:relative;z-index:2}
.tile::after{content:"";position:absolute;inset:12px;border-radius:14px;border:1px solid rgba(129,218,255,.13)}
.tile.lit{background:radial-gradient(circle at center,rgba(108,234,255,.95),rgba(24,120,210,.78));color:#04111a;box-shadow:0 0 24px rgba(87,233,255,.42)}
.logic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.terminal-card span{display:inline-flex;align-items:center;justify-content:center;width:max-content;padding:7px 12px;border-radius:999px;background:rgba(10,29,48,.72);border:1px solid rgba(93,186,226,.16);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#bfe9ff}
.terminal-card p{margin:16px 0 0;color:#e7f4fb;line-height:1.7}
.options{display:grid;gap:12px}
.option{grid-template-columns:auto 1fr;gap:12px;min-height:68px;padding:14px 18px;text-align:left;font-weight:700}
.opt-badge{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,rgba(22,164,233,.24),rgba(91,234,255,.18));border:1px solid rgba(105,211,248,.18);font-weight:900}
.core-wrap{display:grid;place-items:center}
.core{width:min(210px,66vw);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;border:8px solid rgba(65,175,224,.58);background:radial-gradient(circle at center,#9bf1ff 0,#28a7eb 14%,#103660 38%,#081624 65%);box-shadow:0 0 46px rgba(24,171,255,.22), inset 0 0 44px rgba(130,235,255,.22);font-size:4rem;color:#ebfcff;animation:pulse 2.3s infinite}
.large-core{width:170px;font-size:3.4rem}
.formfield{width:min(420px,100%);margin-inline:auto;background:rgba(6,18,30,.84);color:#fff;border:1px solid rgba(99,203,239,.25);border-radius:16px;padding:15px 16px;display:block}
.result-grid{grid-template-columns:repeat(3,minmax(0,1fr));width:min(700px,100%)}
.rank{width:100%;border-collapse:collapse;margin:16px 0 8px;border-radius:18px;overflow:hidden;background:rgba(7,19,31,.7)}
.rank th,.rank td{padding:14px 16px;border-bottom:1px solid rgba(76,127,158,.24);text-align:left}
.rank th{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:#9ec5d9;background:rgba(10,23,36,.84)}
.rank td:last-child,.rank th:last-child{text-align:right}
.ranking-shell{max-width:840px;padding-top:60px}
.ranking-panel h1{margin:12px 0 8px;font-size:2rem}
.footer{margin-top:24px;text-align:center;color:#7392a6;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:30;padding:12px 18px;border-radius:999px;border:1px solid rgba(102,218,255,.24);background:rgba(5,17,29,.92);display:inline-flex;align-items:center;gap:10px;box-shadow:0 20px 50px rgba(0,0,0,.38);animation:toastIn .2s ease,toastOut .35s ease 1.28s forwards}
.toast.fail{border-color:rgba(255,101,126,.35);color:#ffd9e1}
.toast-dot{width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px var(--blue)}
.toast.fail .toast-dot{background:var(--danger);box-shadow:0 0 12px var(--danger)}
.screen-flash{position:fixed;inset:0;pointer-events:none;z-index:25;background:radial-gradient(circle at center,rgba(111,252,255,.14),transparent 55%);animation:flash .75s ease forwards}
.screen-flash.fail{background:radial-gradient(circle at center,rgba(255,101,126,.12),transparent 55%)}
@keyframes pulse{50%{box-shadow:0 0 58px rgba(24,171,255,.35), inset 0 0 58px rgba(130,235,255,.35)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,8px)}}
@keyframes flash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
@media (max-width:980px){
  .landing-hero,.layout{grid-template-columns:1fr}
  .landing-poster{min-height:360px;order:2}
  .landing-copy{padding-right:0}
  .hud,.progress{justify-content:flex-start}
  .code-clues,.logic-grid,.result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .thumb-card{grid-template-columns:76px 1fr}
  .thumb-card img{width:76px;height:60px}
  .screen{padding:16px 12px 28px}
  .header{grid-template-columns:1fr}
  .brand img{width:min(280px,74vw)}
  .missionbar{align-items:flex-start}
  .panel{padding:16px}
  .module-panel{padding:14px}
  .stage-hero{min-height:250px}
  .stage-hero img{height:250px}
  .code-clues,.logic-grid,.result-grid,.intro-grid{grid-template-columns:1fr}
  .circuits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .keypad{grid-template-columns:repeat(3,minmax(0,1fr))}
  .keypad button{min-height:72px}
  .tile{min-height:84px}
}
@media (max-width:520px){
  .circuits{grid-template-columns:1fr 1fr}
  .landing-poster{min-height:280px}
  .hero-copy{padding:18px 16px 16px}
  .hero-copy h2{font-size:1.45rem}
  .chip{width:100%;justify-content:flex-start}
  .hud{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* V5 · interfaz compacta y controles táctiles sin zoom de doble toque */
html,body,#app{touch-action:manipulation}
button,a,[role="button"],input{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{user-select:none;-webkit-user-select:none}
.app-shell{max-width:1360px;padding-top:max(10px,var(--safe-top));padding-bottom:max(12px,var(--safe-bottom))}
.app-shell .header{margin-bottom:7px;gap:10px}
.app-shell .brand img{width:clamp(128px,17vw,205px);max-height:100px;object-fit:contain}
.app-shell .statusbar{gap:6px}
.app-shell .status-pill{padding:5px 10px;font-size:.66rem}
.app-shell .chip{padding:7px 10px;min-height:38px;gap:6px}
.app-shell .smallbtn{padding:9px 12px}
.app-shell .missionbar{padding-bottom:8px;margin-bottom:10px}
.app-shell .mission-meta p{margin-top:2px}
.app-shell .layout{grid-template-columns:minmax(0,1fr) 270px;gap:12px}
.app-shell .module-panel{padding:12px}
.app-shell .panel{border-radius:18px}
.app-shell .stage-hero{height:150px;min-height:0;margin-bottom:10px;border-radius:14px}
.app-shell .stage-hero img{height:150px;object-position:center 47%}
.app-shell .hero-copy{padding:9px 16px 11px;gap:4px}
.app-shell .hero-kicker{padding:4px 8px;font-size:.61rem}
.app-shell .hero-copy h2{font-size:1.45rem}
.app-shell .hero-copy p{font-size:.85rem;line-height:1.35;max-width:820px}
.app-shell .module-body{gap:10px}
.app-shell .code-clues{gap:8px}
.app-shell .code-card{padding:8px 12px;border-radius:12px}
.app-shell .code-card small{margin-bottom:2px;font-size:.65rem}
.app-shell .code-card strong{font-size:1.12rem}
.app-shell .readout-wrap{gap:3px}
.app-shell .digits{padding:9px 14px;font-size:1.7rem}
.app-shell .keypad{grid-template-columns:repeat(3,minmax(0,86px));gap:7px}
.app-shell .keypad button{min-height:51px;border-radius:11px;font-size:1.23rem}
.app-shell .circuits{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:520px;margin-inline:auto;width:100%}
.app-shell .circuit{min-height:69px;border-radius:12px;padding:6px;gap:1px}
.app-shell .circuit-arrow{font-size:1.9rem;line-height:1.1}
.app-shell .target{font-size:.7rem}
.app-shell .tiles{grid-template-columns:repeat(3,minmax(0,92px));gap:9px}
.app-shell .tile{min-height:73px;border-radius:12px;font-size:1.2rem}
.app-shell .logic-grid{gap:8px}
.app-shell .terminal-card{padding:10px;border-radius:12px}
.app-shell .terminal-card p{margin-top:9px;font-size:.88rem;line-height:1.45}
.app-shell .options{gap:7px}
.app-shell .option{min-height:49px;padding:8px 12px}
.app-shell .core{width:115px;border-width:5px;font-size:2.2rem}
.app-shell .side-panel{padding:14px}
.app-shell .side-panel h2{font-size:1.1rem;margin:7px 0 10px}
.app-shell .thumb-card{grid-template-columns:64px 1fr;margin-bottom:8px;padding:6px;gap:8px}
.app-shell .thumb-card img{width:64px;height:45px}
.app-shell .integrity{padding:8px 10px;margin-bottom:8px}
.app-shell .integrity-head{margin-bottom:5px}
.app-shell .syslist{gap:5px;margin-bottom:8px}
.app-shell .syslist>div{padding:7px 10px}
.app-shell .log{min-height:65px;max-height:94px;padding:9px;font-size:.73rem}
.app-shell .hint-box{font-size:.76rem;line-height:1.4;padding:8px;margin:8px 0}
.app-shell .asidebtn{margin-top:6px;padding:10px;font-size:.75rem}
.app-shell .footer{margin-top:12px}
@media(min-width:1000px) and (min-height:700px){
  .app-shell .layout{align-items:start}
}
@media(max-width:980px){
  .app-shell .layout{grid-template-columns:minmax(0,1fr)}
  .app-shell .side-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:center}
  .app-shell .side-panel>.tag,.app-shell .side-panel>h2,.app-shell .side-panel>.thumb-card,.app-shell .side-panel>.integrity,.app-shell .side-panel>.syslist,.app-shell .side-panel>.log,.app-shell .side-panel>.hint-box{display:none}
  .app-shell .asidebtn{margin:0}
}
@media(max-width:760px){
  .app-shell{padding:calc(max(10px,var(--safe-top))) 9px calc(12px + max(8px,var(--safe-bottom)));justify-content:space-between}
  .app-shell .header{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;margin-bottom:6px;gap:5px}
  .app-shell .brand img{width:100px;max-height:52px}
  .app-shell .statusbar{display:block}
  .app-shell .status-pill{display:none}
  .app-shell .hud{width:auto;gap:4px;justify-content:flex-end}
  .app-shell .chip{width:auto;min-height:30px;padding:5px 7px;font-size:.72rem;border-radius:9px}
  .app-shell .chip .btnicon{display:none}
  .app-shell .chip span{font-size:.57rem;letter-spacing:0}
  .app-shell .chip strong{font-size:.84rem}
  .app-shell .smallbtn{font-size:0;padding:7px;min-height:30px;border-radius:9px}
  .app-shell .smallbtn .btnicon{width:16px;height:16px}
  .app-shell .missionbar{display:none}
  .app-shell .module-panel{padding:8px;border-radius:13px}
  .app-shell .stage-hero{height:106px;margin-bottom:8px;border-radius:10px}
  .app-shell .stage-hero img{height:106px}
  .app-shell .hero-copy{padding:7px 10px 8px;gap:2px}
  .app-shell .hero-kicker{font-size:.54rem;padding:2px 6px}
  .app-shell .hero-copy h2{font-size:1.13rem}
  .app-shell .hero-copy p{font-size:.7rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .app-shell .module-body{gap:7px}
  .app-shell .code-clues{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  .app-shell .code-card{padding:5px 8px;border-radius:9px}
  .app-shell .code-card small{font-size:.58rem}
  .app-shell .code-card strong{font-size:1rem}
  .app-shell .digits{padding:7px;font-size:1.45rem;border-radius:10px}
  .app-shell .keypad{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;max-width:335px;width:100%}
  .app-shell .keypad button{min-height:43px;border-radius:9px;font-size:1.15rem}
  .app-shell .circuits{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .app-shell .circuit{min-height:56px;padding:4px}
  .app-shell .circuit-arrow{font-size:1.5rem}
  .app-shell .target{font-size:.6rem}
  .app-shell .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;max-width:310px}
  .app-shell .tile{min-height:61px}
  .app-shell .logic-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .app-shell .terminal-card{padding:6px}
  .app-shell .terminal-card span{font-size:.6rem;padding:4px 6px}
  .app-shell .terminal-card p{font-size:.7rem;line-height:1.3;margin-top:5px}
  .app-shell .option{min-height:40px}
  .app-shell .core{width:88px;font-size:1.8rem}
  .app-shell .layout{gap:8px;display:flex;flex-direction:column;flex:1;min-height:0}
  .app-shell .module-panel{display:flex;flex-direction:column;justify-content:flex-start}
  .app-shell .side-panel{padding:8px;border-radius:12px;margin-top:auto;position:sticky;bottom:calc(8px + var(--safe-bottom));z-index:3;background:linear-gradient(180deg,rgba(8,18,30,.94),rgba(7,16,28,.98))}
  .app-shell .asidebtn{padding:9px 5px;min-height:37px;font-size:.63rem;letter-spacing:0;gap:4px}
  .app-shell .asidebtn .btnicon{width:14px;height:14px}
  .app-shell .footer{display:none}
}
@media(max-width:390px){
  .app-shell .header{padding-top:2px}
  .app-shell .brand img{width:79px}
  .app-shell .chip{padding:4px 5px}
  .app-shell .chip span{display:none}
  .app-shell .hero-copy p{-webkit-line-clamp:1}
  .app-shell .stage-hero,.app-shell .stage-hero img{height:99px}
}