*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#07090a;color:#eee;font-family:Arial,sans-serif}body{overflow:auto}.desktopApp{width:100%;min-height:100vh;display:grid;place-items:center;padding:8px}.appStage{position:relative;width:min(calc(100vw - 16px),calc((100vh - 16px)*16/9),1920px);aspect-ratio:16/9;min-width:0;background:linear-gradient(145deg,#1c2224,#090b0c 55%,#161b1d);border:clamp(2px,.3vw,6px) solid #555;border-radius:clamp(5px,.5vw,12px);overflow:hidden;display:grid;grid-template-rows:13% 5.5% 1fr 10.5%;box-shadow:0 0 35px #000}.appTop{display:grid;grid-template-columns:31% 1fr 16%;gap:1.2%;padding:.7% 1.2%;background:linear-gradient(#22292b,#0c0f10);border-bottom:2px solid #555;min-height:0}.brand{display:flex;align-items:center;gap:3%;min-width:0}.brand img{width:42%;height:90%;object-fit:contain}.brand div{min-width:0}.brand b{display:block;font-size:clamp(10px,1.15vw,23px);color:#f2c84b;white-space:nowrap}.brand span{display:block;font:800 clamp(6px,.58vw,12px)/1.1 monospace;color:#aaa}.statusSlot{min-width:0;padding:.5% 2%;background:#040806;border:1px solid #4e6655;color:#72ff79;font:800 clamp(7px,.68vw,14px)/1.22 monospace;display:grid;grid-template-columns:1fr auto;align-content:center;gap:2px 12px}.statusSlot b{color:#fff}.statusSlot em{grid-column:1/-1;color:#f3cf65;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.guySlot{overflow:hidden;background:#111;border:1px solid #555}.guySlot img{width:100%;height:100%;object-fit:cover;object-position:center 15%}.gameTabs{display:grid;grid-template-columns:repeat(4,1fr);gap:.4%;padding:.35% 1%;background:#0b0e0f}.gameTabs button,.controls button,.accessTools button,.accessPad button{border:1px solid #606769;background:#202527;color:#ddd;font-weight:900;border-radius:4px}.gameTabs button{font-size:clamp(7px,.65vw,13px);min-height:0}.gameTabs button.active{background:#765e22;color:#fff;border-color:#e2bd4e}.playfield{position:relative;min-width:0;min-height:0;margin:0 1%;overflow:hidden;background:#101312;border:2px solid #555;user-select:none;touch-action:none}.appBottom{display:grid;grid-template-columns:1.7fr .55fr 1.5fr .9fr;gap:1%;align-items:center;padding:.55% 1.2%;background:linear-gradient(#111617,#080a0b);border-top:2px solid #555;min-height:0}#objectives{font-size:clamp(10px,1.25vw,25px);font-weight:900;line-height:1.1;color:#eee}#score{color:#86e86f;font:900 clamp(9px,.9vw,18px) monospace}.appBottom #sub{font-size:clamp(7px,.7vw,14px);color:#aaa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.controls{display:grid;grid-template-columns:1fr 1fr;gap:4%}.controls button{min-height:clamp(24px,3vw,50px);font-size:clamp(7px,.6vw,12px)}
/* MATCH 3 — large desktop board */
.matchGrid{display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);width:min(78%,820px);height:96%;aspect-ratio:1/1;gap:clamp(2px,.22vw,5px);padding:.7%;margin:auto;background:radial-gradient(circle,#26302d,#101513);border:1px solid #45504d}.tile{position:relative;border:1px solid #46534e;background:#252d2a;border-radius:12%;display:grid;place-items:center;font-size:clamp(18px,2.6vw,52px);padding:0;min-height:0;appearance:none;color:#fff}.tile.sel{outline:3px solid #fff;z-index:2}.tile.power{background:#5b4b39;font-size:clamp(9px,1vw,20px);line-height:1}.tile.clearing{transform:scale(.2);opacity:.15;transition:.15s}.lineSpecial{outline:3px solid #fff!important;box-shadow:inset 0 0 0 3px #222}.rackSpecial{outline:4px double #fff!important;filter:saturate(1.35)}.levelComplete{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:#000c;padding:18px;text-align:center}.levelComplete>div{background:#ded7c7;border:4px solid #27251f;padding:24px;width:min(80%,500px);color:#171713}.levelComplete strong{display:block;font-size:clamp(20px,2vw,40px)}.levelComplete button{min-height:48px;font-weight:900}
/* UNTANGLE */
.untangleGame{position:absolute;inset:0;overflow:hidden;background:#080c12;touch-action:none}.untangleGame canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.untangleHud{position:absolute;right:1.2%;top:1.2%;font:900 clamp(10px,1vw,20px) system-ui;color:#dce8f7;pointer-events:none}.untangleHint{position:absolute;left:15%;right:15%;bottom:1.5%;text-align:center;font:800 clamp(8px,.8vw,16px) system-ui;color:#d5dde4;background:#050708b8;padding:.5%;border-radius:4px;pointer-events:none}.untangleWon:after{content:"WORK ORDER COMPLETE — THE RACK REMAINS ON AIR";position:absolute;inset:0;display:grid;place-items:center;background:#080c12cc;color:#c8ffe0;font:900 clamp(20px,2vw,40px) system-ui;text-align:center;z-index:5}
/* SIGNAL ROUTER */
.traceGame{position:absolute;inset:0;overflow:hidden;background:#0a0d0e;touch-action:none}.traceGame canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.traceHud{position:absolute;left:1%;top:1%;z-index:3;background:#050708d9;border:1px solid #465053;padding:.6% .8%;font:800 clamp(8px,.75vw,15px)/1.15 monospace;color:#dce8e2;pointer-events:none}.traceHud b,.traceHud span{display:block}.traceHud span{color:#9fe889;margin-top:2px}.traceHint{position:absolute;left:15%;right:15%;bottom:1.5%;z-index:3;text-align:center;font:800 clamp(8px,.75vw,15px) system-ui;color:#d5dde4;background:#050708d0;padding:.5%;pointer-events:none}.traceComplete{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:#071009d9;text-align:center;pointer-events:none}.traceComplete>div{border:2px solid #8fbf6a;background:#0a100c;padding:2%;color:#dfffd3}.traceComplete strong{display:block;font:900 clamp(20px,2vw,40px) system-ui}
/* CLEAR THE ACCESS */
.accessGame{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,#34393a 0,#202526 58%,#0d1011 100%);display:grid;grid-template-rows:5% 1fr 5% 5.5%;overflow:hidden;touch-action:none;color:#eee}.accessTop{display:flex;align-items:center;justify-content:space-between;padding:0 1%;background:#090b0c;border-bottom:1px solid #555;font:800 clamp(8px,.72vw,15px) monospace;color:#f1d477}.accessTop b{color:#fff}.accessRoom{position:relative;min-height:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at center,#4a4f4e 0,#343938 48%,#1b1f1f 75%,#101313 100%)}.accessRoom:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 39px,#ffffff08 40px),repeating-linear-gradient(90deg,transparent 0 39px,#00000018 40px);opacity:.35;pointer-events:none}.accessBoard{position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--cols),var(--cell));grid-template-rows:repeat(var(--rows),var(--cell));gap:0;padding:0;filter:drop-shadow(0 14px 18px #000b)}.accessCell{position:relative;display:grid;place-items:center;width:var(--cell);height:var(--cell);min-width:0;min-height:0;overflow:hidden}.accessCell.floor{background:linear-gradient(135deg,#4c5150,#3b4140 55%,#353a39);box-shadow:inset 0 0 0 1px #555b59,inset 0 0 16px #0002}.accessCell.floor:before{content:'';position:absolute;inset:7%;border:1px solid #ffffff08}.accessCell.wall{z-index:2;background:linear-gradient(#77756f 0 10%,#514d49 11% 24%,#282526 25% 72%,#151516 73% 100%);border:1px solid #171718;box-shadow:inset 0 0 0 2px #69645d,0 5px 7px #0008}.accessCell.wall:before{content:'';position:absolute;left:6%;right:6%;top:28%;height:43%;background:repeating-linear-gradient(0deg,#342f30 0 12%,#1c1a1b 13% 19%);border:1px solid #171617}.accessCell.wall:after{content:'';position:absolute;left:7%;right:7%;top:7%;height:12%;background:linear-gradient(90deg,#8b8378,#5d5852,#8b8378);box-shadow:0 1px #aaa8}.accessCell.goal:after{content:'PARK';position:absolute;inset:11%;border:clamp(2px,.18vw,4px) dashed #e6c24c;color:#f4d456;background:#3b351955;display:grid;place-items:center;font:900 clamp(7px,.65vw,13px) monospace;opacity:.95}.accessCell.case{z-index:4;background:linear-gradient(135deg,#383a3a,#111 58%,#242525);border:clamp(2px,.2vw,4px) solid #c7c4b8;border-radius:3%;box-shadow:inset 0 0 0 2px #4b4c49,0 6px 8px #000a}.accessCell.case:before{content:'';position:absolute;inset:8%;border:2px solid #77766f;background:linear-gradient(90deg,transparent 47%,#a8a69d 48% 52%,transparent 53%),linear-gradient(0deg,transparent 47%,#77766f 48% 52%,transparent 53%)}.accessCell.case:after{content:'';position:absolute;inset:3%;background:linear-gradient(135deg,#d6d3c8 0 5%,transparent 6% 92%,#d6d3c8 93%);pointer-events:none}.accessCell.case span{z-index:2;background:#090909d9;padding:3% 7%;color:#f0d76c;font:900 clamp(6px,.5vw,11px) monospace;text-align:center;transform:rotate(-2deg)}.accessCell.case.goal{box-shadow:inset 0 0 0 4px #6ba75c,0 0 18px #8fbf6a99}.accessCell.tech{z-index:5;background:radial-gradient(circle at 50% 31%,#e7aa72 0 13%,#171717 14% 21%,transparent 22%),radial-gradient(ellipse at 50% 60%,#254f68 0 26%,#bd6134 27% 45%,transparent 46%)}.accessCell.tech:after{content:'';position:absolute;width:48%;height:16%;left:26%;bottom:13%;background:#18232a;border-radius:50%;box-shadow:-18% 0 #18232a}.accessCell.tech span{position:absolute;bottom:5%;z-index:2;background:#080808dc;color:#fff;font:900 clamp(6px,.5vw,10px) monospace;padding:2px 4px}.accessPullHint{margin:0;display:grid;place-items:center;border-top:1px dashed #8f8b72;background:#111a;color:#e8dfb5;font:700 clamp(7px,.65vw,13px) system-ui;letter-spacing:.04em}.accessTools{display:flex;gap:1%;padding:.3% 1%;background:#0a0c0d}.accessTools button{min-height:0;flex:1;font-size:clamp(7px,.6vw,12px)}.accessPad{display:none}.accessWon:after{content:'WORK ORDER COMPLETE\A THE RACK REMAINS ON AIR';white-space:pre;position:absolute;inset:5% 0 10.5%;z-index:8;display:grid;place-items:center;text-align:center;background:#071009d9;color:#c8ffe0;font:900 clamp(20px,2vw,40px)/1.25 system-ui;pointer-events:none}
@media(max-aspect-ratio:16/10){.desktopApp{padding:2px}.appStage{width:calc(100vw - 4px)}.brand span{display:none}}
/* Two-second hyperspace board change, adapted from the Bejeweled warp-line transition idea. */
.warpTransition{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:100!important;pointer-events:none!important;background:#000;}
/* v024 TOP-SHELF PLAYFIELD PASS — production visual language, mechanics unchanged */
.playfield{background:
radial-gradient(ellipse at 50% 35%,#2b302e 0,#151918 50%,#090b0b 100%);
box-shadow:inset 0 0 0 1px #8a857633,inset 0 0 70px #000c,0 8px 20px #0008}
.matchGrid{position:relative;width:min(74%,860px);height:96%;padding:.9%;gap:clamp(3px,.25vw,6px);border:clamp(2px,.2vw,4px) solid #756e5e;border-radius:1.2%;background:
linear-gradient(#0006,#0006),repeating-linear-gradient(90deg,#3b3730 0 7%,#2b2823 7.2% 14%);
box-shadow:inset 0 0 35px #000,0 14px 28px #000b}
.matchGrid:before{content:'ENGINEERING STOCKPILE';position:absolute;left:-23%;top:4%;writing-mode:vertical-rl;transform:rotate(180deg);font:900 clamp(8px,.7vw,14px) monospace;letter-spacing:.18em;color:#b5a87c55}
.tile{overflow:hidden;border:1px solid #6f6a5d;background:linear-gradient(145deg,#3a3833,#171816 62%);border-radius:10%;box-shadow:inset 0 0 0 2px #0008,inset 0 1px #ffffff22,0 3px 5px #000a;transition:transform .12s,filter .12s,opacity .16s}
.tile img{display:block;width:86%;height:86%;object-fit:contain;mix-blend-mode:normal;filter:drop-shadow(0 5px 8px #0009) saturate(1.05) contrast(1.02);pointer-events:none}
.tile:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.12)}
.tile.sel{outline:3px solid #f5d660;box-shadow:0 0 18px #f5d660aa,inset 0 0 0 2px #fff8;z-index:2}
.tile.lineSpecial:after,.tile.rackSpecial:after{position:absolute;right:3%;top:3%;display:grid;place-items:center;border-radius:50%;font:900 clamp(7px,.55vw,11px) monospace;color:#101010;background:#ffe36a;box-shadow:0 0 10px #ffe36aaa}
.tile.lineSpecial:after{content:'LINE';width:34%;height:34%}.tile.rackSpecial:after{content:'ALL';width:38%;height:38%;background:#ff8f59}
.untangleGame{background:radial-gradient(ellipse at center,#403c34 0,#252522 55%,#0d1010 100%)}
.untangleGame:before{content:'EXTENSION CORD CART — SOME ASSEMBLY REQUIRED';position:absolute;z-index:1;left:1.4%;top:1.3%;font:900 clamp(8px,.72vw,14px) monospace;color:#d7c78d88;letter-spacing:.08em;pointer-events:none}
.untangleGame:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px #000d,inset 0 0 0 2px #746c5b55}
.untangleHud{z-index:2;padding:.55% .8%;background:#090b0bd9;border:1px solid #736d5e;border-radius:4px;box-shadow:0 4px 12px #0008}
.untangleHint{z-index:2;border:1px solid #6c6658;color:#e8ddb8}
.traceGame{background:radial-gradient(ellipse at 50% 35%,#252b29,#0b0e0d 72%);box-shadow:inset 0 0 80px #000}
.traceHud{border-color:#82775d;background:#080a09e8;box-shadow:0 5px 14px #000a}
.traceHint{border:1px solid #5e625b;color:#dcd8c7}
.accessRoom{background:
linear-gradient(#0002,#0002),
repeating-linear-gradient(0deg,#444947 0 39px,#393e3c 40px 79px),
repeating-linear-gradient(90deg,transparent 0 39px,#00000016 40px 79px)}
.accessBoard{filter:drop-shadow(0 18px 22px #000d)}
.accessCell.floor{background:linear-gradient(145deg,#595d59,#414642 58%,#363a37);box-shadow:inset 0 0 0 1px #6c706b,inset 0 0 18px #0003}
.accessCell.wall{background:linear-gradient(#aaa28e 0 8%,#6e675b 9% 20%,#292827 21% 75%,#151515 76%);box-shadow:inset 0 0 0 2px #81796a,0 7px 10px #000b}
.accessCell.goal:after{border-color:#7ee070;color:#c9ffbd;background:#17391d99;box-shadow:inset 0 0 16px #74d96844,0 0 14px #74d96855}
.accessCell.case{border-color:#cfc8b4;background:linear-gradient(135deg,#4a4b47,#111 58%,#2d2e2a);box-shadow:inset 0 0 0 2px #6a685e,0 7px 10px #000c}
/* v035 MATCH BOARD WIDEN + ANIMATION PASS */
.matchGrid{
--cols:12;
--rows:8;
width:min(90%,1180px);
height:94%;
aspect-ratio:var(--match-aspect, 12/8);
grid-template-columns:repeat(var(--cols),1fr);
grid-template-rows:repeat(var(--rows),1fr);
gap:clamp(3px,.22vw,6px);
padding:.95%;
border:clamp(2px,.18vw,4px) solid #807763;
border-radius:1%;
background:
linear-gradient(#0007,#0007),
linear-gradient(180deg,#40392f 0,#231f19 6%,#161614 50%,#231f19 94%,#4d4335 100%),
repeating-linear-gradient(90deg,#3b3730 0 8%,#2b2823 8.2% 16%);
box-shadow:inset 0 0 40px #000,0 16px 28px #000b;
}
.matchGrid:before{
left:-18%;
top:5%;
}
.tile{
overflow:hidden;
border:1px solid #756f61;
background:linear-gradient(145deg,#413d35,#141514 62%);
border-radius:9%;
box-shadow:inset 0 0 0 2px #0009,inset 0 1px #ffffff1a,0 3px 5px #000a;
transition:transform .12s,filter .12s,opacity .16s,box-shadow .14s;
}
.tile img{
display:block;
width:88%;
height:88%;
object-fit:contain;
object-position:center center;
image-rendering:auto;
filter:drop-shadow(0 5px 8px #0009) saturate(1.05) contrast(1.02);
pointer-events:none;
}
.tile:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.12)}
.tile.sel{
outline:3px solid #f5d660;
box-shadow:0 0 18px #f5d660aa,inset 0 0 0 2px #fff8,0 0 0 1px #2f2610;
z-index:2;
}
.tile.lineSpecial,.tile.rackSpecial{box-shadow:0 0 0 1px #000,inset 0 0 0 2px #0009,0 0 10px #0007}
.tile.lineSpecial:after,.tile.rackSpecial:after{
position:absolute;
right:3%;
top:3%;
display:grid;
place-items:center;
border-radius:999px;
font:900 clamp(6px,.46vw,10px) monospace;
color:#101010;
background:#ffe36a;
box-shadow:0 0 10px #ffe36aaa;
}
.tile.lineSpecial:after{content:'LINE';width:35%;height:32%}
.tile.rackSpecial:after{content:'ALL';width:38%;height:35%;background:#ff8f59}
.tile.clearing{animation:matchClear .28s ease-in forwards}
.tile.dropIn{animation:matchDrop .24s ease-out}
.tile.rejectSwap{animation:matchReject .17s linear}
.tile.snapBack{animation:matchSnap .2s ease-out}
.tile.validSwap{animation:matchValid .12s ease-out}
.tile.blastLine{animation:lineBlast .32s ease-out}
.tile.blastRack{animation:rackBlast .42s ease-out}
.tile.specialBirth{animation:specialBirth .36s ease-out}
@keyframes matchClear{
0%{transform:scale(1);opacity:1;filter:brightness(1)}
50%{transform:scale(1.12);opacity:1;filter:brightness(1.45)}
100%{transform:scale(.28);opacity:0;filter:brightness(1.9)}
}
@keyframes matchDrop{
0%{transform:translateY(-24%) scale(.94);opacity:.3}
70%{transform:translateY(6%) scale(1.03);opacity:1}
100%{transform:translateY(0) scale(1);opacity:1}
}
@keyframes matchReject{
0%,100%{transform:translateX(0)}
25%{transform:translateX(-6%)}
50%{transform:translateX(6%)}
75%{transform:translateX(-4%)}
}
@keyframes matchSnap{
0%{transform:scale(1.06);filter:brightness(1.18)}
100%{transform:scale(1);filter:brightness(1)}
}
@keyframes matchValid{
0%{transform:scale(.97)}
100%{transform:scale(1.03)}
}
@keyframes lineBlast{
0%{box-shadow:0 0 0 #0000,inset 0 0 0 2px #fff0;filter:brightness(1)}
35%{box-shadow:0 0 22px #ffe36acc,inset 0 0 0 2px #fff9;filter:brightness(1.55)}
100%{box-shadow:0 0 0 #0000,inset 0 0 0 2px #fff0;filter:brightness(1)}
}
@keyframes rackBlast{
0%{transform:scale(1);box-shadow:0 0 0 #0000;filter:brightness(1)}
30%{transform:scale(1.08);box-shadow:0 0 26px #ff8f59dd,0 0 40px #ffd78399;filter:brightness(1.75)}
100%{transform:scale(1);box-shadow:0 0 0 #0000;filter:brightness(1)}
}
@keyframes specialBirth{
0%{transform:scale(.75);filter:brightness(1.7)}
60%{transform:scale(1.12);filter:brightness(1.25)}
100%{transform:scale(1);filter:brightness(1)}
}
/* v036 PRODUCTION POLISH — BRAAPTOPIA ENGINEERING ARCADE */
:root{
--braap-ink:#f4f0e7;
--braap-muted:#b7b2a6;
--braap-hot:#ff5a28;
--braap-gold:#efb43d;
--braap-green:#86b85c;
--braap-black:#0b0e0c;
--braap-panel:#151a16;
--braap-line:rgba(255,255,255,.14);
}
html,body{background:var(--braap-black);color:var(--braap-ink)}
body{overflow:auto}
.desktopApp{padding:6px;background:
radial-gradient(circle at 18% 45%,rgba(239,180,61,.06),transparent 32%),
radial-gradient(circle at 82% 28%,rgba(255,90,40,.05),transparent 34%),#0b0e0c}
.appStage{
width:min(calc(100vw - 12px),calc((100vh - 12px)*16/9),1920px);
border:1px solid rgba(255,255,255,.20);
border-radius:16px;
grid-template-rows:10.5% 4.7% 1fr 8.2%;
background:linear-gradient(145deg,#171d18,#090b09 58%,#121612);
box-shadow:0 24px 70px #000b,inset 0 0 0 1px #000;
}
.appTop{
grid-template-columns:31% 1fr 15.5%;
gap:.9%;
padding:.45% .8%;
background:linear-gradient(180deg,#171d18,#0d110e);
border-bottom:1px solid rgba(255,255,255,.13);
}
.brand{gap:2.5%;padding-right:1.5%;border-right:1px solid rgba(255,255,255,.08)}
.brand img{width:38%;height:96%;object-fit:contain;filter:drop-shadow(0 8px 14px #0008)}
.brand b{font-size:clamp(10px,1.22vw,24px);color:var(--braap-gold);letter-spacing:-.02em}
.brand span{font:850 clamp(6px,.53vw,11px)/1.1 monospace;color:#a9a59b;letter-spacing:.035em}
.statusSlot{
padding:.45% 1.6%;
border:1px solid rgba(134,184,92,.32);
border-radius:7px;
background:linear-gradient(180deg,#08100a,#040705);
color:#9be77d;
font:850 clamp(7px,.66vw,13px)/1.2 monospace;
box-shadow:inset 0 0 22px rgba(61,120,51,.08);
}
.statusSlot b{color:#f4f0e7;letter-spacing:.04em}
.statusSlot em{color:var(--braap-gold)}
.guySlot{
border:1px solid rgba(255,255,255,.16);
border-radius:6px;
background:#0c0f0d;
box-shadow:inset 0 0 14px #000a;
}
.guySlot img{width:100%;height:100%;object-fit:cover;object-position:center 54%}
.gameTabs{gap:.5%;padding:.30% .8%;background:#0a0d0b;border-bottom:1px solid rgba(255,255,255,.08)}
.gameTabs button{
border:1px solid rgba(255,255,255,.18);
background:linear-gradient(#242a25,#171b18);
color:#ddd9cf;
border-radius:7px;
font-size:clamp(7px,.64vw,13px);
letter-spacing:.015em;
cursor:pointer;
box-shadow:inset 0 1px rgba(255,255,255,.04);
}
.gameTabs button:hover{filter:brightness(1.12)}
.gameTabs button.active{
background:linear-gradient(#9b6f17,#6d4f10);
border-color:#e6ba4a;
box-shadow:inset 0 1px #ffe49b66,0 0 14px #efb43d22;
}
.playfield{
margin:.35% .8%;
border:1px solid rgba(255,255,255,.18);
border-radius:10px;
background:
radial-gradient(ellipse at 50% 38%,#242a24 0,#131713 53%,#090b09 100%);
box-shadow:inset 0 0 0 1px #000,inset 0 0 80px #000b,0 10px 26px #0008;
}
.appBottom{
grid-template-columns:1.45fr .48fr 1.35fr .78fr;
gap:.9%;
padding:.38% 1%;
background:linear-gradient(#111612,#090c0a);
border-top:1px solid rgba(255,255,255,.12);
}
#objectives{font-size:clamp(10px,1.06vw,21px);letter-spacing:.015em}
#score{color:#99e377;font:900 clamp(9px,.82vw,17px) monospace;text-shadow:0 0 10px #7ed05b33}
.appBottom #sub{font-size:clamp(7px,.62vw,13px);color:#a6a298}
.controls{gap:5%}
.controls button{
min-height:clamp(25px,2.55vw,43px);
border:1px solid rgba(255,255,255,.20);
border-radius:7px;
background:linear-gradient(#252b26,#161a17);
color:#eee9df;
font-size:clamp(7px,.57vw,11px);
cursor:pointer;
}
.controls button:hover{border-color:#efb43d88;filter:brightness(1.10)}
/* MATCH 3 — production framing, 12 x 7 */
.matchGrid{
--cols:12;
--rows:7;
width:min(92%,1270px);
height:94%;
aspect-ratio:var(--match-aspect,12/7);
gap:clamp(3px,.19vw,5px);
padding:.9%;
border:2px solid #716a58;
border-radius:12px;
background:
linear-gradient(180deg,#39352e 0,#1b1a17 7%,#111311 50%,#1a1916 93%,#40392f 100%);
box-shadow:inset 0 0 0 2px #0b0c0b,inset 0 0 34px #000d,0 18px 30px #000b;
}
.matchGrid:before{
content:'MAINTENANCE STOCKPILE';
left:1.2%;top:.8%;writing-mode:horizontal-tb;transform:none;
font:900 clamp(7px,.5vw,10px) monospace;letter-spacing:.14em;color:#d9c98a44;
pointer-events:none;
}
.tile{
border:1px solid #625e52;
background:linear-gradient(150deg,#302f2a,#151715 66%);
border-radius:8px;
box-shadow:inset 0 0 0 1px #000b,inset 0 1px #ffffff14,0 2px 4px #0009;
}
.tile:before{content:'';position:absolute;inset:4px;border-radius:5px;box-shadow:inset 0 0 14px #0007;pointer-events:none}
.tile img{width:82%;height:82%;filter:drop-shadow(0 6px 7px #000a) saturate(1.05) contrast(1.03)}
.tile.sel{outline:3px solid var(--braap-gold);box-shadow:0 0 18px #efb43d99,inset 0 0 0 2px #fff7;z-index:2}
.tile.lineSpecial{outline:2px solid #f5d660cc!important}
.tile.rackSpecial{outline:2px solid #ff7a45dd!important}
/* UNTANGLE — finished equipment-cart presentation */
.untangleGame{
background:linear-gradient(180deg,#2b2e28,#181b18 68%,#0e100f);
border-radius:8px;
}
.untangleGame:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 0 1px #8f866b44,inset 0 0 80px #000c}
.untangleGame:after{content:'';position:absolute;inset:1.4%;z-index:1;pointer-events:none;border:1px solid #9b8d6833;border-radius:8px}
.untangleTitle{
position:absolute;left:1.4%;top:1.4%;z-index:4;
display:flex;gap:10px;align-items:baseline;
padding:.45% .65%;border-radius:5px;
background:#090c0ae8;border:1px solid #7a715d;
font:900 clamp(8px,.72vw,14px) monospace;color:#f4f0e7;
box-shadow:0 4px 12px #0009;
pointer-events:none;
}
.untangleTitle span{color:#c9bc8c;font-size:.82em;letter-spacing:.06em}
.untangleHud{right:1.4%;top:1.4%;z-index:4;padding:.5% .75%;border-radius:5px;background:#090c0ae8;border:1px solid #7a715d;color:#f0e7ce;box-shadow:0 4px 12px #0009}
.untangleHud b{color:var(--braap-hot);font-size:1.2em}
.untangleHint{left:23%;right:23%;bottom:1.2%;z-index:4;border:1px solid #776e59;border-radius:6px;background:#080b09dc;color:#e8dfc3;letter-spacing:.035em}
/* SIGNAL ROUTER — broadcast patch bay presentation */
.traceGame{border-radius:8px;background:#0a0d0b;box-shadow:inset 0 0 0 1px #8a806755,inset 0 0 90px #000}
.traceHud{left:1.2%;top:1.2%;padding:.55% .75%;border-radius:5px;border:1px solid #80765f;background:#070a08e8;box-shadow:0 5px 14px #000a}
.traceHud b{color:#f3ede2;letter-spacing:.07em}.traceHud span{color:#9ad977}
.traceHint{left:25%;right:25%;bottom:1.2%;border:1px solid #6f6857;border-radius:5px;background:#070a08e8;color:#e1d7bb;letter-spacing:.03em}
.traceComplete>div{border:1px solid #86b85c;background:#0c130d;border-radius:10px;box-shadow:0 18px 45px #000c;padding:2.2% 3%}
.traceComplete strong{color:#b9f29c}
/* CLEAR THE ACCESS — proper top-down Sokoban / road-case room */
.accessGame{
inset:0;
grid-template-rows:6% 1fr 5.2% 6.2%;
background:#111411;
border-radius:8px;
}
.accessTop{
padding:0 1.2%;
background:linear-gradient(#191e19,#0c100d);
border-bottom:1px solid #6f6755;
color:#e9d17d;
font:900 clamp(8px,.68vw,14px) monospace;
letter-spacing:.05em;
}
.accessRoom{
background:
linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),
repeating-linear-gradient(0deg,#373b37 0 47px,#333733 48px 95px),
repeating-linear-gradient(90deg,transparent 0 47px,#00000016 48px 95px);
box-shadow:inset 0 0 80px #0009;
}
.accessRoom:before{opacity:.15}
.accessBoard{
padding:clamp(5px,.5vw,10px);
background:#171a17;
border:2px solid #79715e;
border-radius:8px;
box-shadow:inset 0 0 0 2px #060706,0 18px 28px #000c;
filter:none;
}
.accessCell{overflow:visible}
.accessCell.floor{
background:linear-gradient(145deg,#4b504b,#3c413d 60%,#343834);
box-shadow:inset 0 0 0 1px #616760,inset 0 0 16px #0002;
}
.accessCell.floor:before{inset:7%;border-color:#ffffff08}
.accessCell.wall{
z-index:2;
background:linear-gradient(90deg,#292b29 0 6%,#52534e 7% 12%,#1a1c1a 13% 87%,#4b4d48 88% 93%,#252725 94%);
border:1px solid #0d0e0d;
box-shadow:inset 0 0 0 2px #67675f,0 4px 7px #000a;
}
.accessCell.wall:before{
left:13%;right:13%;top:12%;height:76%;
background:repeating-linear-gradient(0deg,#242624 0 9%,#111311 10% 15%);
border:1px solid #090a09;
}
.accessCell.wall:after{
left:7%;right:7%;top:7%;height:8%;
background:linear-gradient(90deg,#8b8372,#4e4c45,#8b8372);
box-shadow:0 1px #bbb5a144;
}
.accessCell.goal:after{
content:'PARK';
inset:15%;
border:2px solid #efb43d;
border-radius:50%;
background:radial-gradient(circle,#5b471b88 0 47%,#1b160c99 49% 100%);
color:#ffd66c;
box-shadow:0 0 14px #efb43d55,inset 0 0 10px #0008;
font:900 clamp(6px,.52vw,11px) monospace;
}
.accessCell.case{
z-index:5;
margin:5%;
background:linear-gradient(145deg,#3e403c,#101211 60%,#292b28);
border:3px solid #bdb8aa;
border-radius:7px;
box-shadow:inset 0 0 0 2px #565850,0 8px 10px #000b;
}
.accessCell.case:before{
inset:8%;
border:2px solid #6e716a;
background:
linear-gradient(90deg,transparent 46%,#aaa89f 47% 53%,transparent 54%),
linear-gradient(0deg,transparent 46%,#696b65 47% 53%,transparent 54%);
}
.accessCell.case:after{inset:3%;background:linear-gradient(135deg,#ded9c8 0 6%,transparent 7% 91%,#d7d1c1 92%)}
.accessCell.case span{
z-index:3;
border:1px solid #857a5e;
border-radius:2px;
background:#0a0c0ae8;
color:#efb43d;
padding:2% 7%;
transform:rotate(-2deg);
box-shadow:0 2px 5px #0008;
}
.accessCell.case.goal{box-shadow:inset 0 0 0 3px #86b85c,0 0 18px #86b85c77,0 8px 10px #000b}
.accessCell.tech{
z-index:6;
background:
radial-gradient(circle at 50% 28%,#f0b47b 0 12%,#372c23 13% 17%,transparent 18%),
radial-gradient(ellipse at 50% 57%,#dc5d2d 0 18%,#25485c 19% 33%,transparent 34%),
linear-gradient(transparent 0 68%,#1a1d1c 69% 78%,transparent 79%);
filter:drop-shadow(0 5px 5px #0009);
}
.accessCell.tech:before{content:'';position:absolute;left:31%;top:11%;width:38%;height:11%;border-radius:50% 50% 20% 20%;background:#efb43d;border:1px solid #7c5d18}
.accessCell.tech span{bottom:2%;border:1px solid #5d625d;border-radius:2px;background:#070907e6;color:#eee8dc;padding:1px 4px}
.accessPullHint{border-top:1px solid #6f6755;background:#0d110ee8;color:#d7ceb4;font:750 clamp(7px,.61vw,12px) system-ui;letter-spacing:.03em}
.accessTools{gap:.7%;padding:.35% 1%;background:#090c0a;border-top:1px solid rgba(255,255,255,.06)}
.accessTools button{border:1px solid rgba(255,255,255,.18);border-radius:6px;background:linear-gradient(#252a25,#151915);color:#e8e3d9;cursor:pointer}
.accessTools button:hover{border-color:#efb43d88;filter:brightness(1.1)}
@media(max-aspect-ratio:16/10){
.appStage{grid-template-rows:10.2% 4.8% 1fr 8.6%}
.brand span{display:block}
.matchGrid{width:94%;height:93%}
}
/* ========================================================================== */
/* v037 — BRAAPTOPIA ENGINEERING ARCADE PRODUCTION SHELL */
/* Radio Sim / Mobile Jam visual language brought into the minigame suite. */
/* ========================================================================== */
:root{
--braap-cream:#f2e4c6;
--braap-paper:#fff7e6;
--braap-ink:#17120c;
--braap-red:#ce2d22;
--braap-blue:#1876b6;
--braap-green:#2f9d4b;
--braap-gold:#f0b82f;
--braap-rust:#6f3d1f;
--braap-metal:#2e3335;
--braap-panel:rgba(10,9,7,.86);
}
html,body{width:100%;height:100%;overflow:hidden;background:#17120c}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.desktopApp{
position:fixed;inset:0;width:100%;height:100%;min-height:0;padding:0;
display:grid;place-items:center;overflow:hidden;
background:
radial-gradient(circle at 18% 14%,rgba(179,61,21,.17),transparent 28%),
radial-gradient(circle at 84% 74%,rgba(240,184,47,.08),transparent 34%),
#17120c;
}
.appStage{
position:relative;
width:min(100vw,1920px);height:min(100vh,1080px);aspect-ratio:16/9;
display:grid;grid-template-rows:62px 1fr;
min-width:0;min-height:0;overflow:hidden;
border:0;border-radius:0;
background:#0c0a08;
box-shadow:0 28px 80px rgba(0,0,0,.58);
}
.studioBackdrop{
position:absolute;inset:0;z-index:0;
background:
linear-gradient(90deg,rgba(16,10,5,.93) 0%,rgba(16,10,5,.78) 28%,rgba(16,10,5,.55) 62%,rgba(16,10,5,.82) 100%),
linear-gradient(180deg,rgba(8,5,3,.32),rgba(8,5,3,.68)),
url('/shared/assets/radio/braaptopia-radio-studio.webp') center/cover no-repeat;
filter:saturate(.74) brightness(.54);
transform:scale(1.02);
}
.ambientWash{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:
radial-gradient(circle at 23% 12%,rgba(255,92,28,.13),transparent 25%),
radial-gradient(circle at 73% 8%,rgba(255,201,66,.09),transparent 24%),
linear-gradient(180deg,rgba(255,255,255,.015),transparent 18%,rgba(0,0,0,.22));
mix-blend-mode:screen;
}
.arcadeTopbar{
position:relative;z-index:20;
display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
min-height:62px;padding:7px 18px;
background:rgba(24,17,10,.91);backdrop-filter:blur(12px);
border-bottom:1px solid rgba(255,255,255,.13);
color:#fff;
}
.radioReturn{
text-decoration:none;color:#f6eddc;background:#252019;border:1px solid rgba(255,255,255,.18);
border-radius:8px;padding:9px 12px;font-size:11px;font-weight:950;letter-spacing:.08em;
box-shadow:inset 0 -2px rgba(0,0,0,.28);
display:inline-flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;
}
.radioReturn:hover{border-color:#f0b82f88;color:#ffe28a}
.arcadeBrand{display:flex;align-items:center;justify-self:start;min-width:0;height:48px;gap:10px}
.arcadeBrand img{width:112px;height:54px;object-fit:contain;filter:drop-shadow(0 4px 6px #0009)}
.arcadeBrand div{min-width:0}
.arcadeBrand strong{display:block;color:#ffc33e;font-size:clamp(17px,1.55vw,27px);line-height:.94;font-weight:1000;letter-spacing:.035em;text-transform:uppercase;text-shadow:0 2px 0 #000}
.arcadeBrand span{display:block;margin-top:4px;color:#d0c3ae;font:850 clamp(8px,.56vw,11px)/1 monospace;letter-spacing:.05em}
.topStatus{display:flex;align-items:center;gap:8px;color:#eee2cf;font-size:10px;font-weight:950;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}
.topStatus .topClockLabel{color:#9f927e;font-size:8px;border-left:1px solid #ffffff22;padding-left:9px}
.liveLamp{width:9px;height:9px;border-radius:50%;background:#ff3a31;box-shadow:0 0 8px 4px rgba(255,58,49,.45);animation:arcadeLive 1.45s ease-in-out infinite}
@keyframes arcadeLive{0%,100%{filter:brightness(.72)}50%{filter:brightness(1.35)}}
@keyframes radioReturnRipple{
0%{transform:scale(.24);opacity:.0}
12%{opacity:.42}
58%{opacity:.18}
100%{transform:scale(1.18);opacity:0}
}
.arcadeWorkspace{
position:relative;z-index:5;min-height:0;
display:grid;grid-template-columns:minmax(0,1fr) minmax(215px,13.2%);gap:14px;
padding:14px 16px 16px;
}
.gameConsole{
min-width:0;min-height:0;
display:grid;grid-template-rows:44px minmax(0,1fr) 67px;
padding:10px;
border:3px solid #3b2c1c;border-radius:15px;
background:linear-gradient(180deg,rgba(250,237,210,.97),rgba(222,196,153,.96));
box-shadow:0 22px 48px rgba(0,0,0,.43),inset 0 0 0 1px rgba(255,255,255,.35);
position:relative;
}
.gameConsole:before{
content:"";position:absolute;inset:7px;z-index:0;border:1px dashed rgba(70,38,16,.30);border-radius:9px;pointer-events:none;
}
.gameConsole>*{position:relative;z-index:1}
.gameTabs{
display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:0;background:transparent;border:0;
}
.gameTabs button{
position:relative;overflow:hidden;min-height:0;padding:0 9px;
border:2px solid #171a1b;border-radius:8px;
background:linear-gradient(#3b4142,#1f2425);color:#f5ead4;
font-size:clamp(8px,.63vw,12px);font-weight:1000;letter-spacing:.035em;text-transform:uppercase;
box-shadow:inset 0 0 0 1px #707778,0 4px 8px rgba(0,0,0,.24);
}
.gameTabs button span{display:inline-grid;place-items:center;width:23px;height:23px;margin-right:6px;border-radius:50%;background:#0b0d0d;border:1px solid #666;color:#aaa;font:950 9px monospace}
.gameTabs button:hover{filter:brightness(1.08)}
.gameTabs button.active{
color:#fff7d9;border-color:#6e3c21;
background:linear-gradient(180deg,#8a421e,#542312);
box-shadow:inset 0 0 0 1px #dc9d55,0 0 14px rgba(219,91,27,.20),0 4px 8px rgba(0,0,0,.28);
}
.gameTabs button.active span{background:#f0b82f;color:#261706;border-color:#ffe08c;box-shadow:0 0 10px rgba(240,184,47,.38)}
.playfield{
min-width:0;min-height:0;margin:9px 0 8px;
overflow:hidden;user-select:none;touch-action:none;
border:4px solid #171a1b;border-radius:10px;
background:
radial-gradient(ellipse at 50% 38%,#2c322c 0,#151915 50%,#090b09 100%);
box-shadow:inset 0 0 0 1px #6d7270,inset 0 0 95px #000d,0 8px 13px rgba(0,0,0,.28);
}
.gameHud{
display:grid;grid-template-columns:1.28fr .55fr 1.15fr .86fr;gap:8px;align-items:stretch;min-height:0;
}
.objectivePanel,.scorePanel,.commentPanel{
min-width:0;display:flex;flex-direction:column;justify-content:center;
border:1px solid #a4926d;border-radius:7px;background:rgba(255,248,229,.57);padding:7px 10px;color:#2b2116;
box-shadow:inset 0 0 0 1px #fff6;
}
.hudEyebrow{display:block;margin-bottom:3px;color:#856d43;font:1000 8px/1 monospace;letter-spacing:.12em;text-transform:uppercase}
#objectives{font-size:clamp(11px,1.0vw,20px);font-weight:1000;line-height:1;color:#251c12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#score{color:#277b36;font:1000 clamp(10px,.82vw,16px)/1 monospace;text-shadow:none;white-space:nowrap}
#sub{font-size:clamp(8px,.64vw,12px);font-weight:800;color:#594a38;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.controls button{
min-height:0;border:2px solid #171a1b;border-radius:8px;background:linear-gradient(#3b4142,#1f2425);color:#f5ead4;
padding:0 7px;font-size:clamp(7px,.54vw,10px);font-weight:1000;letter-spacing:.05em;text-transform:uppercase;
box-shadow:inset 0 0 0 1px #707778,0 4px 8px rgba(0,0,0,.23);
}
.controls button:hover{border-color:#8a4c29;filter:brightness(1.12)}
.engineerRail{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(210px,34%) auto 1fr auto;gap:10px}
.hostCam,.workOrderCard,.meterRack,.railNote{position:relative;overflow:hidden;border-radius:12px;box-shadow:0 16px 34px rgba(0,0,0,.34)}
.hostCam{display:grid;grid-template-rows:27px 1fr 30px;border:2px solid #2b2117;background:#15110d}
.camHeader{display:flex;align-items:center;gap:7px;padding:0 9px;background:#0d0b08;color:#e7d8bd;font:950 8px monospace;letter-spacing:.06em;border-bottom:1px solid #ffffff1c}
.camRec{width:8px;height:8px;border-radius:50%;background:#ff3a31;box-shadow:0 0 8px #ff3a3177}
.guySlot{min-height:0;overflow:hidden;background:#120e09;border:0}
.guySlot img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 41%;filter:saturate(1.03) contrast(1.03)}
.camFooter{display:flex;align-items:center;justify-content:space-between;padding:0 8px;background:#efe0bc;color:#23170f;font-size:7px;font-weight:950;letter-spacing:.05em}
.camFooter b{color:#a42a1f;font-size:9px}
.workOrderCard{
padding:15px 14px 13px;border:3px solid #3b2c1c;
background:linear-gradient(180deg,rgba(250,237,210,.98),rgba(222,196,153,.97));color:#24180f;
}
.panelScrew{position:absolute;width:8px;height:8px;border-radius:50%;background:#555;border:2px solid #222;box-shadow:inset 0 0 0 1px #999}.panelScrew.s1{left:7px;top:7px}.panelScrew.s2{right:7px;top:7px}.panelScrew.s3{left:7px;bottom:7px}.panelScrew.s4{right:7px;bottom:7px}
.railLabel{display:block;color:#8e7451;font:1000 8px monospace;letter-spacing:.13em;margin-bottom:4px}
.workOrderCard>#job{display:block;color:#9f281d;font-size:clamp(12px,.84vw,16px);font-weight:1000;letter-spacing:.025em;margin-bottom:8px}
.incidentLine{display:flex;align-items:center;gap:7px;margin:5px 0;color:#3c3023;font:900 9px monospace}
.led{flex:0 0 auto;width:8px;height:8px;border-radius:50%;border:1px solid #2a2319}.led.green{background:#65d16f;box-shadow:0 0 7px #65d16f88}.led.amber{background:#eab43e;box-shadow:0 0 7px #eab43e66}
.workOrderCard em{display:block;margin-top:9px;padding-top:8px;border-top:1px dashed #866d493f;color:#6a4a2e;font-size:10px;line-height:1.25;font-weight:850;font-style:normal}
.meterRack{align-self:stretch;padding:11px 10px;border:3px solid #171a1b;background:linear-gradient(#373d3e,#181c1d);color:#ede3d0;box-shadow:inset 0 0 0 1px #676f70,0 16px 34px rgba(0,0,0,.34)}
.meterTitle{display:flex;align-items:center;justify-content:space-between;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid #ffffff18;font:1000 8px monospace;letter-spacing:.12em;color:#aeb4b3}.meterTitle b{color:#f0b82f}
.meterRow{display:grid;grid-template-columns:68px 1fr 22px;gap:6px;align-items:center;margin:8px 0;font:900 7px monospace;color:#d3cec2}.meterRow>i{position:relative;height:8px;border-radius:999px;background:#080a0a;border:1px solid #505657;overflow:hidden;box-shadow:inset 0 1px 3px #000}.meterRow>i>b{display:block;width:var(--level);height:100%;background:linear-gradient(90deg,#3bc95b 0 55%,#efc33f 76%,#e13e2f 100%);box-shadow:0 0 8px #75d76d44}.meterRow>em{text-align:right;color:#9ea6a4;font-style:normal}
.railNote{padding:10px 12px;border:2px dashed #8d795d;background:rgba(255,248,230,.84);color:#473521;transform:rotate(-.25deg)}
.railNote strong{display:block;color:#a32218;font-size:9px;letter-spacing:.11em}.railNote p{margin:4px 0 0;font-size:9px;line-height:1.25;font-weight:850}
/* Per-game atmosphere — shell feels alive without obscuring gameplay. */
.appStage[data-game="match"] .ambientWash{background:radial-gradient(circle at 68% 5%,rgba(255,184,47,.11),transparent 28%),radial-gradient(circle at 8% 70%,rgba(198,49,28,.08),transparent 30%)}
.appStage[data-game="untangle"] .ambientWash{background:radial-gradient(circle at 68% 8%,rgba(36,120,190,.12),transparent 28%),radial-gradient(circle at 14% 74%,rgba(255,119,26,.08),transparent 30%)}
.appStage[data-game="trace"] .ambientWash{background:radial-gradient(circle at 66% 12%,rgba(74,255,124,.09),transparent 30%),radial-gradient(circle at 13% 74%,rgba(28,118,182,.09),transparent 28%)}
.appStage[data-game="access"] .ambientWash{background:radial-gradient(circle at 68% 8%,rgba(240,184,47,.10),transparent 28%),radial-gradient(circle at 13% 74%,rgba(170,58,30,.08),transparent 28%)}
@media(max-width:1250px){
.arcadeWorkspace{grid-template-columns:minmax(0,1fr) 190px;gap:10px;padding:10px}
.engineerRail{grid-template-rows:190px auto 1fr auto}
.arcadeBrand img{width:90px}.topStatus .topClockLabel{display:none}
.gameHud{grid-template-columns:1.2fr .55fr 1fr .85fr}
.meterRow{grid-template-columns:58px 1fr 18px}
}
@media(max-aspect-ratio:16/10){
.appStage{width:100vw;height:100vh;aspect-ratio:auto;grid-template-rows:56px 1fr}
.arcadeTopbar{min-height:56px;padding:5px 10px}
.arcadeWorkspace{padding:8px;grid-template-columns:minmax(0,1fr) 178px}
.gameConsole{grid-template-rows:40px minmax(0,1fr) 61px;padding:8px}
.arcadeBrand span{display:block}
.railNote{display:none}.engineerRail{grid-template-rows:170px auto 1fr}
}
/* v039 — readable work-order HUD */
.gameConsole{grid-template-rows:44px minmax(0,1fr) 96px}
.gameHud{grid-template-columns:1.55fr .55fr 1.05fr .9fr;gap:10px}
.objectivePanel,.scorePanel,.commentPanel{padding:9px 12px}
.hudEyebrow{margin-bottom:6px;font-size:9px;letter-spacing:.14em}
#objectives{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
overflow:visible;
white-space:normal;
text-overflow:clip;
}
.goalItem{
min-width:0;height:58px;
display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:7px;
padding:4px 8px 4px 4px;
border:1px solid #aa966f;border-radius:8px;
background:linear-gradient(180deg,rgba(255,252,242,.78),rgba(236,217,180,.72));
box-shadow:inset 0 0 0 1px #fff8,0 2px 5px #4c351526;
color:#2a1d10;
}
.goalItem img{
width:52px;height:52px;object-fit:contain;display:block;
filter:drop-shadow(0 3px 3px #0005);
}
.goalCopy{min-width:0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px}
.goalCopy b{
min-width:0;overflow:hidden;text-overflow:ellipsis;
font:1000 clamp(8px,.62vw,12px)/1.05 system-ui;
letter-spacing:.025em;color:#49331d;
}
.goalCopy em{
min-width:30px;text-align:center;
font:1000 clamp(20px,1.55vw,31px)/1 monospace;
color:#a42a1f;font-style:normal;
}
.goalItem.done{opacity:.48;filter:saturate(.25)}
.goalItem.done .goalCopy em{color:#347a3d}
#score{font-size:clamp(15px,1.18vw,23px)}
#sub{font-size:clamp(10px,.78vw,15px);line-height:1.25;white-space:normal}
.controls button{font-size:clamp(9px,.67vw,13px);padding:0 10px}
@media(max-width:1250px){
.gameConsole{grid-template-rows:44px minmax(0,1fr) 86px}
.goalItem{height:50px;grid-template-columns:45px minmax(0,1fr);gap:5px;padding:3px 6px 3px 3px}
.goalItem img{width:43px;height:43px}
.goalCopy b{font-size:8px}
.goalCopy em{font-size:20px;min-width:23px}
}
@media(max-aspect-ratio:16/10){
.gameConsole{grid-template-rows:40px minmax(0,1fr) 86px}
}
/* v040 — CLEAR THE ACCESS: CONNECTED SOKOBAN WALL GEOMETRY */
.accessRoom{
background:
radial-gradient(ellipse at 50% 42%,rgba(118,92,58,.18),transparent 58%),
linear-gradient(#211c18,#171816 72%,#121311);
}
.accessRoom:before{
content:'';
position:absolute;
inset:0;
opacity:.28;
background:
linear-gradient(90deg,transparent 0 49.7%,#ffffff05 49.8% 50.2%,transparent 50.3%),
linear-gradient(0deg,transparent 0 49.7%,#00000022 49.8% 50.2%,transparent 50.3%);
background-size:96px 96px;
pointer-events:none;
}
.accessBoard{
gap:0;
padding:clamp(7px,.55vw,11px);
background:#171512;
border:2px solid #8b7457;
border-radius:4px;
box-shadow:inset 0 0 0 2px #0a0908,0 18px 32px #000c;
}
.accessCell.floor{
background:
radial-gradient(circle at 35% 30%,#ffffff05 0 1px,transparent 2px),
linear-gradient(145deg,#403b36,#342f2c 60%,#2d2926);
box-shadow:
inset 1px 0 #ffffff08,
inset 0 1px #ffffff08,
inset -1px 0 #0005,
inset 0 -1px #0005;
}
.accessCell.floor:before{
inset:0;
border:0;
background:linear-gradient(135deg,transparent 48%,#ffffff025 49% 51%,transparent 52%);
}
/* Walls are now one constructed mass. Only EXPOSED edges get structure; joined
neighbors have no independent frame, so the wall reads continuously. */
.accessCell.wall{
z-index:3;
border:0;
border-radius:0;
overflow:visible;
background:
linear-gradient(180deg,#8f7765 0 9%,#705b4e 10% 52%,#59463d 53% 100%);
box-shadow:none;
}
.accessCell.wall:before{
content:'';
position:absolute;
inset:7% 6% 10%;
border:0;
background:
repeating-linear-gradient(0deg,transparent 0 20%,#2e211e99 21% 24%,transparent 25% 47%,#2e211e99 48% 51%,transparent 52% 74%,#2e211e99 75% 78%,transparent 79%),
repeating-linear-gradient(90deg,#80695a 0 46%,#3e302b 47% 51%,#80695a 52% 98%,#3e302b 99% 100%);
opacity:.68;
box-shadow:inset 0 1px #c6ad9770,inset 0 -1px #261c19aa;
}
.accessCell.wall:after{
content:'';
position:absolute;
inset:0;
pointer-events:none;
background:none;
}
/* exposed top/bottom faces */
.accessCell.wall-open-n{
border-top:clamp(2px,.18vw,4px) solid #c3aa90;
box-shadow:inset 0 5px 0 #a38a72,inset 0 8px 0 #5a463b;
}
.accessCell.wall-open-s{
border-bottom:clamp(2px,.18vw,4px) solid #2b211e;
box-shadow:inset 0 -8px 0 #3e302b,inset 0 -11px 0 #765f50;
}
.accessCell.wall-open-n.wall-open-s{
box-shadow:inset 0 5px 0 #a38a72,inset 0 8px 0 #5a463b,inset 0 -8px 0 #3e302b,inset 0 -11px 0 #765f50;
}
/* exposed left/right faces */
.accessCell.wall-open-w{border-left:clamp(2px,.18vw,4px) solid #aa9078}
.accessCell.wall-open-e{border-right:clamp(2px,.18vw,4px) solid #332723}
/* Proper outer corners/endcaps. Joined sides remain square so runs merge. */
.accessCell.wall-open-n.wall-open-w{border-top-left-radius:8%}
.accessCell.wall-open-n.wall-open-e{border-top-right-radius:8%}
.accessCell.wall-open-s.wall-open-w{border-bottom-left-radius:8%}
.accessCell.wall-open-s.wall-open-e{border-bottom-right-radius:8%}
/* bridge over browser sub-pixel seams between connected wall cells */
.accessCell.wall-n:after{top:-1px}
.accessCell.wall-e:after{right:-1px}
.accessCell.wall-s:after{bottom:-1px}
.accessCell.wall-w:after{left:-1px}
.accessCell.goal:after{
content:'';
inset:18%;
border:clamp(3px,.22vw,5px) solid #b82928;
border-radius:50%;
background:radial-gradient(circle,#b82928 0 26%,#291719 28% 48%,transparent 50%);
box-shadow:0 0 0 3px #17120f99,0 0 14px #b8292855;
}
.accessCell.case{
z-index:6;
margin:7%;
border:2px solid #6e3e1f;
border-radius:2px;
background:
linear-gradient(90deg,transparent 12%,#9e5929 13% 16%,transparent 17% 83%,#9e5929 84% 87%,transparent 88%),
linear-gradient(0deg,transparent 12%,#9e5929 13% 16%,transparent 17% 83%,#9e5929 84% 87%,transparent 88%),
linear-gradient(145deg,#b66b35,#7e431f 62%,#5e3018);
box-shadow:inset 0 0 0 2px #d28b4e44,0 7px 9px #000b;
}
.accessCell.case:before{
inset:15%;
border:1px solid #4f2c18;
background:linear-gradient(145deg,#9d5728,#6b371c);
box-shadow:inset 0 0 0 2px #d48a4940;
}
.accessCell.case:after{display:none}
.accessCell.case span{
display:none;
}
.accessCell.case.goal{
box-shadow:inset 0 0 0 3px #d6b050,0 0 18px #d6b05066,0 7px 9px #000b;
}
/* player stays Braaptopia, but reads as a person rather than another grid tile */
.accessCell.tech{
z-index:7;
background:
radial-gradient(circle at 50% 27%,#efb07d 0 11%,#372a22 12% 16%,transparent 17%),
radial-gradient(ellipse at 50% 54%,#d95b2d 0 17%,#244d64 18% 31%,transparent 32%),
linear-gradient(90deg,transparent 31%,#151918 32% 43%,transparent 44% 56%,#151918 57% 68%,transparent 69%) 50% 80%/100% 24% no-repeat;
filter:drop-shadow(0 5px 4px #000a);
}
.accessCell.tech:before{
left:33%;top:10%;width:34%;height:10%;
border-radius:50% 50% 16% 16%;
background:#e7ad33;
border:1px solid #6f5116;
}
.accessCell.tech span{display:none}
/* v041 — CLEAR THE ACCESS: ARCHITECTURAL WALL LAYER */
.accessRoom{
background:
radial-gradient(ellipse at 50% 44%,rgba(112,73,43,.28),transparent 62%),
linear-gradient(180deg,#251a14 0,#171512 68%,#11110f 100%);
}
.accessBoard{
position:relative;
display:block;
padding:clamp(10px,.75vw,16px);
background:
linear-gradient(#0003,#0003),
repeating-linear-gradient(90deg,#6f3518 0 13px,#7c3d1d 14px 28px,#5a2c17 29px 42px);
border:2px solid #2b1a12;
border-radius:3px;
box-shadow:inset 0 0 0 3px #b2835a55,0 18px 36px #000d;
overflow:visible;
}
.accessFloorLayer{
position:relative;
z-index:1;
display:grid;
grid-template-columns:repeat(var(--cols),var(--cell));
grid-template-rows:repeat(var(--rows),var(--cell));
width:calc(var(--cols) * var(--cell));
height:calc(var(--rows) * var(--cell));
}
.accessWallLayer{
position:absolute;
z-index:4;
left:clamp(10px,.75vw,16px);
top:clamp(10px,.75vw,16px);
width:calc(var(--cols) * var(--cell));
height:calc(var(--rows) * var(--cell));
overflow:visible;
pointer-events:none;
filter:drop-shadow(0 9px 5px #0009) drop-shadow(0 18px 18px #0005);
}
.accessCell{
width:var(--cell);
height:var(--cell);
overflow:visible;
}
.accessCell.wallSpace{
background:transparent!important;
box-shadow:none!important;
border:0!important;
pointer-events:none;
}
.accessCell.floor{
z-index:1;
background:
radial-gradient(circle at 28% 24%,#ffffff05 0 1px,transparent 2px),
linear-gradient(145deg,#3a3534,#2e2a2c 62%,#292526);
box-shadow:
inset 1px 0 #ffffff09,
inset 0 1px #ffffff08,
inset -1px 0 #0005,
inset 0 -1px #0006;
}
.accessCell.floor:before{
inset:0;
border:0;
background:
linear-gradient(90deg,transparent 0 98%,#17141655 99% 100%),
linear-gradient(0deg,transparent 0 98%,#17141655 99% 100%);
opacity:.75;
}
.accessCell.goal:after{
content:'';
inset:24%;
border:clamp(3px,.22vw,5px) solid #9e2427;
border-radius:50%;
background:radial-gradient(circle,#a92329 0 27%,#241516 29% 51%,transparent 53%);
box-shadow:0 0 0 4px #171112cc,0 0 13px #9f25274d;
}
.accessCell.case{
z-index:7;
margin:8%;
border:2px solid #5a2f18;
border-radius:2px;
background:
linear-gradient(90deg,transparent 10%,#8c4d25 11% 15%,transparent 16% 84%,#8c4d25 85% 89%,transparent 90%),
linear-gradient(0deg,transparent 10%,#8c4d25 11% 15%,transparent 16% 84%,#8c4d25 85% 89%,transparent 90%),
linear-gradient(145deg,#b76b35,#82461f 60%,#613217);
box-shadow:inset 0 0 0 2px #df975655,0 8px 8px #000b;
}
.accessCell.case:before{
inset:16%;
border:1px solid #4b2816;
background:linear-gradient(145deg,#a35b2b,#6f391c);
box-shadow:inset 0 0 0 2px #cf84453a;
}
.accessCell.case:after{display:none}
.accessCell.case span{display:none}
.accessCell.case.goal{box-shadow:inset 0 0 0 3px #d1a641,0 0 18px #d1a64166,0 8px 8px #000b}
.accessCell.tech{
z-index:8;
background:
radial-gradient(circle at 50% 27%,#e8a56e 0 11%,#2e221d 12% 16%,transparent 17%),
radial-gradient(ellipse at 50% 53%,#d5592b 0 18%,#21465d 19% 31%,transparent 32%),
linear-gradient(90deg,transparent 31%,#111716 32% 43%,transparent 44% 56%,#111716 57% 68%,transparent 69%) 50% 82%/100% 24% no-repeat;
filter:drop-shadow(0 5px 4px #000b);
}
.accessCell.tech:before{
left:33%;top:10%;width:34%;height:10%;
border-radius:50% 50% 16% 16%;
background:#e1a62f;
border:1px solid #6a4b12;
}
.accessCell.tech span{display:none}
/* v042 — CLEAR THE ACCESS: FULL-SIZE SOKOBAN ROOM + COMPACT SUPPORT HUD */
.appStage[data-game="access"] .gameConsole{
grid-template-rows:44px minmax(0,1fr) 58px;
}
.appStage[data-game="access"] .playfield{
margin:7px 0 6px;
}
.appStage[data-game="access"] .gameHud{
grid-template-columns:1.05fr .52fr 1fr .72fr;
gap:6px;
}
.appStage[data-game="access"] .objectivePanel,
.appStage[data-game="access"] .scorePanel,
.appStage[data-game="access"] .commentPanel{
padding:5px 9px;
border-radius:6px;
}
.appStage[data-game="access"] .hudEyebrow{
margin-bottom:2px;
font-size:7px;
}
.appStage[data-game="access"] #objectives{
display:block;
white-space:normal;
overflow:visible;
font-size:clamp(10px,.78vw,15px);
line-height:1.05;
}
.appStage[data-game="access"] #score{
font-size:clamp(12px,.9vw,18px);
}
.appStage[data-game="access"] #sub{
font-size:clamp(8px,.62vw,12px);
line-height:1.08;
}
.appStage[data-game="access"] .controls{
gap:5px;
}
.appStage[data-game="access"] .controls button{
font-size:clamp(8px,.58vw,11px);
padding:0 7px;
}
.accessGame{
grid-template-rows:4.2% 1fr 3.2% 4.2%;
}
.accessTop{
padding:0 .9%;
font-size:clamp(8px,.58vw,12px);
}
.accessPullHint{
font-size:clamp(7px,.54vw,11px);
line-height:1;
}
.accessTools{
gap:.55%;
padding:.18% .8%;
}
.accessTools button{
font-size:clamp(7px,.52vw,10px);
}
.accessRoom{
padding:0;
}
.accessBoard{
padding:clamp(5px,.42vw,9px);
}
.accessWallLayer{
left:clamp(5px,.42vw,9px);
top:clamp(5px,.42vw,9px);
}
/* v043 — CLEAR THE ACCESS: ACTUAL KLEVZE SOKOBAN CANVAS PORT */
.appStage[data-game="access"] .gameConsole{
grid-template-rows:44px minmax(0,1fr) 64px;
}
.appStage[data-game="access"] .playfield{
margin:6px 0 5px;
min-height:0;
}
.appStage[data-game="access"] .gameHud{
grid-template-columns:1.1fr .56fr 1fr .72fr;
gap:6px;
}
.appStage[data-game="access"] .objectivePanel,
.appStage[data-game="access"] .scorePanel,
.appStage[data-game="access"] .commentPanel{
padding:6px 10px;
}
.appStage[data-game="access"] #objectives{
display:block;
font:900 clamp(10px,.76vw,15px)/1.05 monospace;
white-space:normal;
}
.appStage[data-game="access"] #score{font-size:clamp(12px,.9vw,18px)}
.appStage[data-game="access"] #sub{font-size:clamp(9px,.64vw,12px);line-height:1.08}
.accessGame.sokoPort{
position:absolute;
inset:0;
display:grid;
grid-template-rows:32px minmax(0,1fr) 23px 31px;
overflow:hidden;
background:#261b16;
color:#eee;
touch-action:none;
}
.accessGame.sokoPort .accessTop{
display:flex;
align-items:center;
justify-content:space-between;
padding:0 12px;
background:linear-gradient(#111713,#0b0f0c);
border-bottom:1px solid #8b7b5d;
font:900 clamp(8px,.6vw,12px) monospace;
letter-spacing:.05em;
color:#e8d987;
}
.accessGame.sokoPort .accessTop b{color:#fff}
.sokoViewport{
position:relative;
min-width:0;
min-height:0;
overflow:hidden;
display:grid;
place-items:stretch;
background:
radial-gradient(ellipse at 50% 45%,#4b2f20 0,#2c1f18 42%,#261b16 76%,#261b16 100%);
box-shadow:inset 0 0 80px #000b;
}
.sokoCanvas{
display:block;
width:100%;
height:100%;
image-rendering:auto;
touch-action:none;
}
.sokoLoad{
position:absolute;
inset:0;
display:grid;
place-items:center;
z-index:3;
background:#130f0de8;
color:#e6d295;
font:900 clamp(10px,.8vw,16px) monospace;
letter-spacing:.06em;
text-align:center;
padding:20px;
}
.accessGame.sokoPort .accessPullHint{
display:grid;
place-items:center;
margin:0;
padding:0;
background:#0c100d;
border-top:1px solid #655c48;
color:#ddd1aa;
font:800 clamp(7px,.52vw,10px) monospace;
letter-spacing:.02em;
}
.accessGame.sokoPort .accessTools{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:6px;
padding:4px 10px;
background:#080b09;
border-top:1px solid #393d36;
}
.accessGame.sokoPort .accessTools button{
min-height:0;
border:1px solid #555d56;
border-radius:5px;
background:linear-gradient(#252b27,#151a17);
color:#e9e3d0;
font:900 clamp(7px,.52vw,10px) Arial,sans-serif;
}
.accessGame.sokoPort.accessWon:after{
content:'ACCESS CLEAR';
position:absolute;
inset:32px 0 54px;
z-index:8;
display:grid;
place-items:center;
pointer-events:none;
background:#08100999;
color:#dcffd2;
font:900 clamp(26px,2.7vw,52px) Arial,sans-serif;
text-shadow:0 3px 12px #000;
}
/* v044 — CLEAR THE ACCESS: RETURN HUD SPACE TO THE GAME + RESTORE PULL MODE */
.appStage[data-game="access"] .gameConsole{
grid-template-rows:44px minmax(0,1fr);
}
.appStage[data-game="access"] .gameHud{
display:none;
}
.appStage[data-game="access"] .playfield{
margin:6px 0 0;
}
.accessGame.sokoPort{
grid-template-rows:32px minmax(0,1fr) 23px 35px;
}
.accessGame.sokoPort .accessTools{
grid-template-columns:repeat(4,minmax(0,1fr));
gap:6px;
padding:4px 10px;
}
.accessGame.sokoPort .accessTools button{
white-space:nowrap;
font-size:clamp(7px,.49vw,10px);
}
/* v046 FRAME-INTEGRATED ARCADE LAYOUT */
html,body{min-height:100%;background:#060707;color:#f1ecde}
body{overflow:auto}
.desktopApp{width:100%;min-height:100vh;display:grid;place-items:center;padding:8px;background:#060707}
.appStage{
position:relative;
width:min(calc(100vw - 16px),calc((100vh - 16px)*16/9),1920px);
aspect-ratio:16/9;
border:none;
border-radius:18px;
overflow:hidden;
background:#0b0b0b url('../assets/frame/engineering-arcade-frame.png?v=20260916-v060') center/cover no-repeat;
box-shadow:0 32px 90px #000c;
}
.appStage::after{
content:'';
position:absolute;inset:0;
background:radial-gradient(circle at 50% 54%,transparent 22%,rgba(0,0,0,.18) 70%,rgba(0,0,0,.38) 100%);
pointer-events:none;
}
.radioReturn{
position:absolute;left:1.6%;top:2.2%;z-index:5;
min-width:clamp(180px,13.8vw,280px);
min-height:clamp(44px,4.9vw,78px);
padding:.72% 1.15%;border-radius:14px;
text-decoration:none;color:#fff5df;
border:1px solid rgba(255,227,165,.46);
background:linear-gradient(180deg,rgba(95,51,20,.96),rgba(47,22,10,.97));
font:950 clamp(13px,1vw,21px)/1 system-ui;
letter-spacing:.04em;
box-shadow:0 10px 22px #0009,inset 0 0 0 1px rgba(255,255,255,.08),0 0 22px rgba(239,180,61,.18);
text-shadow:0 1px 0 rgba(0,0,0,.5);
}
.radioReturn::before{
content:'';
position:absolute;inset:-36%;
background:radial-gradient(circle,rgba(255,241,186,.34) 0,rgba(255,205,106,.24) 24%,rgba(255,173,59,.12) 42%,transparent 64%);
transform:scale(.42);opacity:0;pointer-events:none;
animation:radioReturnRipple 2.8s ease-out infinite;
}
.radioReturn::after{
content:'';
position:absolute;inset:0;pointer-events:none;
background:linear-gradient(110deg,transparent 0 30%,rgba(255,255,255,.15) 46%,transparent 62% 100%);
mix-blend-mode:screen;opacity:.78;
}
.frameOverlay{
position:absolute;
top:14.8%;left:7.1%;right:7.1%;bottom:13.2%;
display:grid;grid-template-rows:auto 1fr;gap:1.1%;
z-index:3;
}
.gameTabs{
display:grid;grid-template-columns:repeat(4,1fr);gap:.7%;padding:0;
background:transparent;border:0;
}
.gameTabs button{
min-height:clamp(38px,5vw,86px);
border-radius:14px;
border:1px solid rgba(225,215,188,.26);
background:linear-gradient(180deg,rgba(32,39,36,.95),rgba(11,15,13,.95));
color:#ece7da;
font:900 clamp(10px,.72vw,16px)/1 system-ui;
letter-spacing:.04em;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 10px 18px #0007;
}
.gameTabs button span{
display:inline-grid;place-items:center;
width:clamp(28px,2.2vw,42px);height:clamp(28px,2.2vw,42px);
margin-right:.55em;border-radius:999px;
border:1px solid rgba(255,255,255,.18);
background:#090b0c;color:#ece7da;font-size:.86em;
}
.gameTabs button.active{
background:linear-gradient(180deg,rgba(155,82,33,.96),rgba(109,47,15,.96));
border-color:#efb43d;color:#fff7e8;box-shadow:inset 0 0 0 1px #ffe7ad33,0 0 22px #efb43d33;
}
.gameTabs button.active span{background:#efb43d;color:#2a1807;border-color:#ffd778}
.viewportLayout{display:grid;grid-template-columns:22.5% 1fr;gap:1.1%;min-height:0}
.sideHud,.gameArea{min-height:0}
.sideHud{display:grid;grid-template-rows:34% 13% 22% 1fr;gap:1.2%}
.hostCam,.scoreCard,.statusCard,.objectiveCard,.playfield,.gameFooter button{
border-radius:16px;
border:1px solid rgba(223,208,173,.26);
background:linear-gradient(180deg,rgba(18,22,20,.92),rgba(8,10,9,.92));
box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 14px 22px #0008;
}
.hostCam{display:grid;grid-template-rows:auto 1fr;overflow:hidden;min-height:0}
.camHeader{
display:flex;align-items:center;gap:8px;padding:.55em .8em;
color:#f5efde;font:900 clamp(9px,.62vw,14px)/1 monospace;
letter-spacing:.08em;border-bottom:1px solid rgba(255,255,255,.08);
}
.camRec{width:10px;height:10px;border-radius:50%;background:#ff4d41;box-shadow:0 0 12px #ff4d41aa;flex:0 0 auto}
.guySlot{min-height:0;background:rgba(4,4,4,.72)}
.guySlot img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.scoreCard,.statusCard,.objectiveCard{padding:clamp(10px,.9vw,18px);display:grid;min-height:0}
.sideEyebrow{display:block;color:#cbb37a;font:900 clamp(9px,.64vw,13px)/1 monospace;letter-spacing:.18em;text-transform:uppercase}
.scoreCard{align-content:start;gap:8px}
.scoreCard strong{color:#86e86f;font:900 clamp(18px,1.45vw,30px)/1 monospace;text-shadow:0 0 12px #7fd05b33}
.scoreCard em{color:#e2d5b0;font:800 clamp(9px,.66vw,14px)/1 monospace;font-style:normal;letter-spacing:.14em}
.statusCard{align-content:start;gap:10px}
.statusMini{display:grid;grid-template-columns:1fr;gap:5px}
.statusMini b{display:block;color:#f4ebd4;font:900 clamp(9px,.66vw,14px)/1 monospace;letter-spacing:.07em}
#comment{margin:0;color:#fff5df;font:900 clamp(12px,.92vw,20px)/1.18 system-ui}
#sub{margin:0;color:#c6b997;font:700 clamp(10px,.72vw,15px)/1.35 system-ui}
.objectiveCard{align-content:start;gap:10px;overflow:hidden}
#objectives{display:grid;align-content:start;gap:10px;overflow:auto;color:#f1eadb;font:800 clamp(10px,.74vw,15px)/1.28 system-ui}
.objectiveMuted{color:#9d9788}
#objectives .goalItem{display:grid;grid-template-columns:clamp(34px,2.3vw,48px) 1fr;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
#objectives .goalItem img{width:100%;aspect-ratio:1/1;object-fit:contain;filter:drop-shadow(0 4px 8px #0008)}
#objectives .goalCopy{display:grid;gap:2px}
#objectives .goalCopy b{color:#efe6d4;font-size:.98em;line-height:1.05}
#objectives .goalCopy em{color:#efb43d;font-style:normal;font:900 .95em/1 monospace}
#objectives .goalItem.done{opacity:.65}
#objectives .goalItem.done .goalCopy em{color:#86e86f}
.gameArea{display:grid;grid-template-rows:1fr auto;gap:1.2%}
.playfield{
position:relative;min-width:0;min-height:0;margin:0;overflow:hidden;user-select:none;touch-action:none;
background:radial-gradient(ellipse at center,rgba(41,49,45,.65) 0,rgba(15,18,16,.92) 72%,rgba(8,10,9,.98) 100%);
}
.gameFooter{display:grid;grid-template-columns:1fr 1fr;gap:1.2%}
.gameFooter button{
min-height:clamp(44px,4.2vw,72px);cursor:pointer;
color:#efe9db;font:900 clamp(10px,.75vw,16px)/1 system-ui;letter-spacing:.06em;
}
.gameFooter button:hover,.radioReturn:hover,.gameTabs button:hover{filter:brightness(1.08)}
/* Tune embedded games for the new wide viewport */
.matchGrid{width:min(96%,1340px);height:96%}
.untangleHint,.traceHint{left:17%;right:17%}
.traceHud,.untangleTitle,.untangleHud{font-size:clamp(10px,.72vw,16px)}
.accessGame{grid-template-rows:5% 1fr 5% 5.8%}
@media (max-aspect-ratio: 16/10){
.desktopApp{padding:2px}
.appStage{width:calc(100vw - 4px)}
.frameOverlay{top:14.2%;left:6.4%;right:6.4%;bottom:12.8%}
.viewportLayout{grid-template-columns:25% 1fr}
}
/* v047 remove incident tabs, reclaim height, and enlarge work-order area */
.radioReturn{text-align:center}
.frameOverlay{
top:14.9%;
left:7.1%;
right:7.1%;
bottom:13.2%;
grid-template-rows:1fr;
}
.viewportLayout{
grid-template-columns:23.2% 1fr;
gap:1%;
}
.sideHud{
grid-template-rows:32% 12% 19% 1fr;
gap:1%;
}
.scoreCard,.statusCard,.objectiveCard{padding:clamp(10px,.78vw,16px)}
.statusCard{gap:8px}
#comment{font-size:clamp(13px,.98vw,21px)}
#sub{font-size:clamp(10px,.72vw,15px)}
.objectiveCard{overflow:hidden}
#objectives{
overflow:visible;
gap:8px;
padding-right:0;
align-content:start;
}
#objectives .goalItem{
gap:9px;
padding:8px 10px;
grid-template-columns:clamp(36px,2.5vw,52px) 1fr;
}
#objectives .goalCopy b{font-size:1.02em}
#objectives .goalCopy em{font-size:1em}
.gameArea{grid-template-rows:1fr auto;gap:1%}
.playfield{min-height:0}
.gameFooter button{min-height:clamp(42px,3.8vw,66px)}
.gameTabs{display:none !important}
@media (max-aspect-ratio: 16/10){
.frameOverlay{top:14.3%;left:6.4%;right:6.4%;bottom:12.8%}
.viewportLayout{grid-template-columns:24.5% 1fr}
.sideHud{grid-template-rows:31% 12% 19% 1fr}
}
/* v048 tighter footer controls + over-icon work-order counts */
.objectiveCard{padding:clamp(10px,.72vw,14px)}
#objectives{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
align-items:start;
overflow:visible;
}
#objectives .goalItem{
display:grid;
grid-template-rows:auto auto;
justify-items:center;
align-items:start;
gap:6px;
min-width:0;
padding:0;
background:transparent;
border:0;
}
#objectives .goalIconWrap{
position:relative;
display:grid;
place-items:center;
width:100%;
aspect-ratio:1/1;
border-radius:16px;
border:1px solid rgba(255,255,255,.34);
background:linear-gradient(180deg,rgba(31,36,33,.96),rgba(10,12,11,.96));
box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 8px 18px #0008;
}
#objectives .goalIconWrap img{
width:72%;
height:72%;
object-fit:contain;
filter:drop-shadow(0 6px 10px #0009);
}
#objectives .goalCount{
position:absolute;
top:6%;
right:8%;
min-width:1.55em;
padding:.12em .3em;
border-radius:999px;
background:rgba(7,10,9,.92);
border:1px solid rgba(239,180,61,.52);
color:#f2bf4e;
font:900 clamp(12px,.98vw,20px)/1 monospace;
text-align:center;
box-shadow:0 2px 8px #0008;
}
#objectives .goalLabel{
display:block;
width:100%;
text-align:center;
color:#dad0b7;
font:800 clamp(8px,.58vw,12px)/1.12 system-ui;
letter-spacing:.04em;
text-transform:uppercase;
}
#objectives .goalItem.done{opacity:.72;filter:saturate(.55)}
#objectives .goalItem.done .goalCount{color:#8aea79;border-color:#4f9f52}
#objectives .goalItem.done .goalLabel{color:#9ba28f}
.gameArea{grid-template-rows:minmax(0,1fr) auto;gap:.55%}
.gameFooter{
display:flex;
gap:.7%;
padding:.35% 1%;
background:#090c0a;
border-top:1px solid rgba(255,255,255,.06);
border-radius:10px;
}
.gameFooter button{
flex:1;
min-height:clamp(24px,2.2vw,38px);
border:1px solid rgba(255,255,255,.18);
border-radius:6px;
background:linear-gradient(#252a25,#151915);
box-shadow:none;
color:#e8e3d9;
font:900 clamp(9px,.66vw,13px)/1 system-ui;
letter-spacing:.05em;
}
.gameFooter button:hover{border-color:#efb43d88;filter:brightness(1.1)}
/* v049 work-order count above icon */
#objectives{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
#objectives .goalItem{
grid-template-rows:auto auto auto;
gap:4px;
}
#objectives .goalCount{
position:static;
display:inline-grid;
place-items:center;
min-width:2.05em;
padding:.16em .38em;
margin:0 auto -2px;
border-radius:999px;
background:rgba(7,10,9,.94);
border:1px solid rgba(239,180,61,.56);
color:#f2bf4e;
font:900 clamp(13px,1.02vw,22px)/1 monospace;
text-align:center;
box-shadow:0 2px 8px #0008;
z-index:2;
}
#objectives .goalIconWrap{
width:100%;
max-width:none;
aspect-ratio:1/1;
}
#objectives .goalIconWrap img{
width:78%;
height:78%;
}
#objectives .goalLabel{
font:800 clamp(8px,.56vw,12px)/1.08 system-ui;
letter-spacing:.03em;
word-break:normal;
overflow-wrap:anywhere;
}
#objectives .goalItem.done .goalCount{color:#8aea79;border-color:#4f9f52}
/* v051 left-rail proportion + readable work order + live score polish */
.sideHud{
display:grid;
grid-template-rows:auto auto auto minmax(0,1fr);
align-content:start;
gap:1%;
}
.hostCam{
display:grid;
grid-template-rows:auto auto;
align-self:start;
}
.guySlot{
width:100%;
height:auto;
aspect-ratio:245/218;
overflow:hidden;
background:#070908;
}
.guySlot img{
display:block;
width:100%;
height:100%;
object-fit:contain;
object-position:center center;
}
.scoreCard,.statusCard{align-self:start}
.objectiveCard{min-height:0}
#objectives{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
#objectives .goalItem{
display:grid;
grid-template-columns:1fr !important;
grid-template-rows:auto auto auto;
justify-items:stretch;
gap:5px;
min-width:0;
}
#objectives .goalCount{
justify-self:center;
margin:0 0 -1px;
}
#objectives .goalIconWrap{
width:100%;
aspect-ratio:1/1;
min-width:0;
}
#objectives .goalIconWrap img{
width:88%;
height:88%;
object-fit:contain;
}
#objectives .goalLabel{
width:100%;
min-width:0;
text-align:center;
font:800 clamp(8px,.55vw,12px)/1.08 system-ui;
overflow-wrap:normal;
word-break:normal;
hyphens:none;
}
.gameArea{grid-template-rows:minmax(0,1fr) 30px;gap:4px}
.gameFooter{
display:flex;
gap:6px;
height:30px;
padding:2px 0 0;
background:transparent;
border:0;
border-radius:0;
}
.gameFooter button{
min-height:28px;
height:28px;
padding:0 10px;
border-radius:5px;
font:900 clamp(8px,.58vw,12px)/1 system-ui;
}
/* v052 compact camera rail, score beside cam, hide global footer for access */
.sideHud{
grid-template-columns:40% 1fr;
grid-template-rows:auto auto minmax(0,1fr);
grid-template-areas:
"cam score"
"status status"
"objective objective";
gap:10px;
align-content:start;
}
.hostCam{
grid-area:cam;
display:grid;
grid-template-rows:auto auto;
align-self:start;
}
.scoreCard{
grid-area:score;
align-self:stretch;
display:grid;
align-content:center;
gap:10px;
min-height:0;
}
.statusCard{grid-area:status;align-self:start}
.objectiveCard{grid-area:objective;min-height:0;padding:10px 10px 12px}
.guySlot{
width:100%;
max-width:180px;
margin:0 auto;
aspect-ratio:245/218;
}
.guySlot img{
object-fit:contain;
object-position:center center;
}
.scoreCard strong{font-size:clamp(18px,1.18vw,26px)}
.scoreCard em{font-size:clamp(10px,.78vw,15px)}
.statusCard{padding:10px 12px;gap:8px}
#comment{font-size:clamp(12px,.84vw,19px)}
#sub{font-size:clamp(10px,.70vw,14px)}
#objectives{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
#objectives .goalIconWrap{
aspect-ratio:.92/1;
}
#objectives .goalIconWrap img{
width:84%;
height:84%;
}
#objectives .goalLabel{
font-size:clamp(9px,.6vw,13px);
}
#objectives .goalCount{
font-size:clamp(13px,.94vw,20px);
}
/* Clear the Access already has its own internal control bar */
.appStage[data-game="access"] .gameFooter{display:none}
.appStage[data-game="access"] .gameArea{grid-template-rows:minmax(0,1fr)}
@media (max-aspect-ratio:16/10){
.sideHud{
grid-template-columns:42% 1fr;
gap:8px;
}
.guySlot{max-width:155px}
}
/* v053 mobile landscape/fullscreen gate */
.mobileGate[hidden],.mobileFullscreenButton[hidden]{display:none!important}
.mobileGate{
position:fixed;inset:0;z-index:9999;
display:grid;place-items:center;
padding:24px;
background:
radial-gradient(circle at 50% 35%,rgba(239,180,61,.10),transparent 34%),
linear-gradient(180deg,#111512,#070908);
color:#f5efdf;
}
.mobileGateCard{
width:min(88vw,520px);
padding:28px 26px;
border-radius:18px;
border:1px solid rgba(239,180,61,.55);
background:linear-gradient(180deg,#1b211d,#0c100e);
box-shadow:0 24px 70px #000c,inset 0 0 0 1px rgba(255,255,255,.04);
text-align:center;
}
.mobileGateCard strong{
display:block;
color:#efb43d;
font:900 clamp(28px,8vw,52px)/.95 system-ui;
letter-spacing:.03em;
}
.mobileGateCard span{
display:block;
margin:14px 0 20px;
color:#ded5bd;
font:800 clamp(13px,3.6vw,20px)/1.25 monospace;
letter-spacing:.08em;
}
.mobileGateCard button,.mobileFullscreenButton{
border:1px solid rgba(255,255,255,.22);
border-radius:10px;
background:linear-gradient(#302f28,#171a17);
color:#f3eddf;
font:900 13px/1 system-ui;
letter-spacing:.06em;
}
.mobileGateCard button{width:100%;min-height:52px;padding:0 16px}
.mobileGateCard button:disabled{opacity:.55}
.mobileFullscreenButton{
position:fixed;right:10px;top:10px;z-index:9998;
min-height:38px;padding:0 14px;
box-shadow:0 8px 22px #0009;
}
.mobileArcade{overflow:hidden;background:#050606}
.mobileArcade .desktopApp{min-height:100dvh;height:100dvh;padding:0;overflow:hidden}
.mobileArcade .appStage{
width:min(100vw,calc(100dvh * 16 / 9));
max-width:none;
margin:auto;
}
.mobileArcade .radioReturn{font-size:clamp(11px,1.6vw,14px);min-width:clamp(138px,22vw,188px);min-height:clamp(38px,6vw,52px)}
.mobileArcade .accessPullHint{font-size:clamp(7px,1.45vw,11px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px}
.mobileArcade .accessTools button{font-size:clamp(7px,1.35vw,10px)}
.mobileArcade .sokoCanvas{touch-action:none}
.mobilePortrait .appStage{visibility:visible}
.mobilePortrait .frameOverlay,.mobilePortrait .radioReturn,.mobilePortrait .mobileFullscreenButton{visibility:hidden}
.mobilePortrait .mobileGate{visibility:visible}
@media (pointer:coarse) and (orientation:landscape){
.mobileArcade .frameOverlay{top:14.5%;bottom:12.7%}
.mobileArcade .viewportLayout{grid-template-columns:21.5% 1fr;gap:.8%}
.mobileArcade .sideHud{gap:6px}
.mobileArcade .hostCam{border-radius:10px}
.mobileArcade .camHeader{font-size:clamp(7px,1.25vw,10px);padding:.45em .6em}
.mobileArcade .guySlot{max-width:128px}
.mobileArcade .scoreCard,.mobileArcade .statusCard,.mobileArcade .objectiveCard{border-radius:10px;padding:7px 8px}
.mobileArcade .scoreCard strong{font-size:clamp(13px,2.2vw,19px)}
.mobileArcade .scoreCard em,.mobileArcade .sideEyebrow{font-size:clamp(7px,1.2vw,10px)}
.mobileArcade #comment{font-size:clamp(9px,1.6vw,13px)}
.mobileArcade #sub{font-size:clamp(7px,1.25vw,10px)}
.mobileArcade .statusMini b{font-size:clamp(7px,1.2vw,10px)}
.mobileArcade #objectives{gap:5px}
.mobileArcade #objectives .goalCount{font-size:clamp(10px,1.7vw,14px)}
.mobileArcade #objectives .goalLabel{font-size:clamp(6px,1vw,8px)}
.mobileArcade .gameFooter{height:24px}
.mobileArcade .gameFooter button{height:22px;min-height:22px;font-size:clamp(7px,1.2vw,9px)}
}
/* v055/v056 — one 16:9 artboard: contained on desktop, vertically filled on mobile */
.mobileArcade .desktopApp{
width:100vw;
min-width:100vw;
height:100dvh;
min-height:100dvh;
padding:0;
overflow:hidden;
place-items:center;
}
.mobileArcade .appStage{
/* On mobile landscape, scale the complete 16:9 artboard from height first.
This preserves more of the top/bottom frame language and lets the phone crop width instead. */
height:100dvh;
width:auto;
max-width:none;
max-height:none;
aspect-ratio:16/9;
margin:0;
flex:none;
}
/* Do not independently move the live UI relative to the frame art on mobile.
Only typography/control-size accommodations below are mobile-specific. */
@media (pointer:coarse) and (orientation:landscape){
.mobileArcade .frameOverlay{
top:14.9%;
left:7.1%;
right:7.1%;
bottom:13.2%;
}
.mobileArcade .viewportLayout{
grid-template-columns:23.2% 1fr;
gap:1%;
}
}
/* v057 left-rail efficiency pass */
.scoreCard strong{
display:block;
letter-spacing:.04em;
}
/* Keep Radio Guy a postage-stamp element instead of allowing the portrait to define rail height. */
.guySlot{
width:min(100%,150px);
max-width:150px;
margin:0 auto;
aspect-ratio:245/218;
}
@media (pointer:coarse) and (orientation:landscape){
.mobileArcade .sideHud{
grid-template-columns:34% 1fr;
grid-template-rows:auto auto minmax(0,1fr);
gap:5px;
}
.mobileArcade .hostCam{
align-self:start;
border-radius:8px;
}
.mobileArcade .camHeader{
padding:3px 5px;
font-size:clamp(7px,1.05vw,9px);
white-space:nowrap;
}
.mobileArcade .camLong{display:none}
.mobileArcade .guySlot{
width:min(100%,92px);
max-width:92px;
margin:0 auto;
aspect-ratio:245/218;
}
.mobileArcade .scoreCard{
padding:6px 8px;
gap:4px;
align-content:center;
}
.mobileArcade .scoreCard .sideEyebrow{
font-size:clamp(7px,1.05vw,9px);
letter-spacing:.14em;
}
.mobileArcade .scoreCard strong{
font-size:clamp(15px,2.45vw,22px);
line-height:1;
}
.mobileArcade .scoreCard em{
font-size:clamp(7px,1.1vw,9px);
line-height:1;
}
.mobileArcade .statusCard{
padding:6px 8px;
gap:4px;
}
.mobileArcade .statusCard .sideEyebrow{
font-size:clamp(7px,1.05vw,9px);
}
.mobileArcade .statusMini{gap:2px}
.mobileArcade .statusMini b{
font-size:clamp(7px,1.08vw,9px);
line-height:1.05;
}
.mobileArcade #comment{
margin-top:1px;
font-size:clamp(9px,1.5vw,12px);
line-height:1.08;
}
.mobileArcade #sub:empty{display:none}
.mobileArcade #sub{
font-size:clamp(7px,1.05vw,9px);
line-height:1.12;
}
.mobileArcade .objectiveCard{
min-height:0;
padding:6px 8px 8px;
}
.mobileArcade .objectiveCard>.sideEyebrow{
font-size:clamp(7px,1.05vw,9px);
margin-bottom:2px;
}
.mobileArcade #objectives{
gap:5px;
align-content:start;
}
.mobileArcade #objectives .goalItem{gap:2px}
.mobileArcade #objectives .goalCount{
font-size:clamp(10px,1.55vw,13px);
min-width:1.8em;
padding:.08em .25em;
}
.mobileArcade #objectives .goalIconWrap{
aspect-ratio:1/1;
border-radius:8px;
}
.mobileArcade #objectives .goalIconWrap img{
width:90%;
height:90%;
}
.mobileArcade #objectives .goalLabel{
font-size:clamp(6px,.9vw,8px);
line-height:1;
}
}
/* v058 mobile: trade one Match-3 icon column for the left information rail */
@media (pointer:coarse) and (orientation:landscape){
.mobileArcade .viewportLayout{
/* Previous right playfield share was 76.8%; one of 12 Match-3 columns is 6.4%.
Give that exact slice to the rail, mobile only. */
grid-template-columns:29.6% minmax(0,1fr);
gap:1%;
}
.mobileArcade .sideHud{
grid-template-columns:32% minmax(0,1fr);
}
.mobileArcade .guySlot{
width:min(100%,88px);
max-width:88px;
}
.mobileArcade .scoreCard strong{
font-size:clamp(14px,2.15vw,20px);
white-space:nowrap;
}
.mobileArcade .statusCard,
.mobileArcade .objectiveCard{
min-width:0;
}
.mobileArcade #comment,
.mobileArcade #sub{
overflow-wrap:anywhere;
}
}
/* v063 modern match-3 specials + victory cascade */
.tile.horizontalSpecial,.tile.verticalSpecial,.tile.crossSpecial,.tile.spiralSpecial{
box-shadow:0 0 0 1px #000,inset 0 0 0 2px #0009,0 0 14px #0008;
}
.tile.horizontalSpecial:after,.tile.verticalSpecial:after,.tile.crossSpecial:after,.tile.spiralSpecial:after{
position:absolute;right:3%;top:3%;display:grid;place-items:center;
border-radius:50%;min-width:30%;height:30%;padding:0 2px;
font:900 clamp(7px,.55vw,11px)/1 monospace;color:#101010;
background:#ffe36a;box-shadow:0 0 10px #ffe36aaa;z-index:2;
}
.tile.horizontalSpecial:after{content:'↔';background:#ffd65f}
.tile.verticalSpecial:after{content:'↕';background:#8be2ff}
.tile.crossSpecial:after{content:'✚';background:#ff9a68}
.tile.spiralSpecial:after{content:'◎';background:#f8f0ff;box-shadow:0 0 13px #e9d6ff}
.tile.blastCross{animation:crossBlast .39s ease-out}
.tile.blastSpiral{animation:spiralBlast .46s ease-out}
.tile.victoryCharge{animation:victoryCharge .30s ease-out}
@keyframes crossBlast{
0%{filter:brightness(1);transform:scale(1)}
45%{filter:brightness(2.4);transform:scale(1.18) rotate(4deg)}
100%{filter:brightness(1);transform:scale(1)}
}
@keyframes spiralBlast{
0%{filter:brightness(1) saturate(1);transform:scale(1) rotate(0)}
55%{filter:brightness(2.8) saturate(1.7);transform:scale(1.22) rotate(110deg)}
100%{filter:brightness(1) saturate(1);transform:scale(1) rotate(180deg)}
}
@keyframes victoryCharge{
0%{transform:scale(.78);filter:brightness(1)}
55%{transform:scale(1.2);filter:brightness(2.5)}
100%{transform:scale(1);filter:brightness(1)}
}
.matchFxLayer{
position:absolute;
inset:0;
pointer-events:none;
overflow:hidden;
z-index:7;
}
.matchBeamFx,
.matchBurstFx{
position:absolute;
pointer-events:none;
opacity:0;
mix-blend-mode:screen;
}
.matchBeamFx{
border-radius:999px;
box-shadow:0 0 10px #fff6,0 0 20px currentColor,0 0 38px currentColor;
animation:matchBeamFlash .54s ease-out forwards;
}
.matchBeamFx:before,
.matchBeamFx:after,
.matchBurstFx:before,
.matchBurstFx:after{
content:'';
position:absolute;
inset:0;
border-radius:inherit;
}
.matchBeamFx.horizontal:before{
background:linear-gradient(90deg,transparent 0%,var(--beam-hot) 8%,#fff 50%,var(--beam-hot) 92%,transparent 100%);
}
.matchBeamFx.vertical:before{
background:linear-gradient(180deg,transparent 0%,var(--beam-hot) 8%,#fff 50%,var(--beam-hot) 92%,transparent 100%);
}
.matchBeamFx.horizontal:after{
inset:18% 0;
background:repeating-linear-gradient(90deg,transparent 0 7%,#fff7 10% 13%,transparent 16% 24%);
filter:blur(1px);
opacity:.9;
}
.matchBeamFx.vertical:after{
inset:0 18%;
background:repeating-linear-gradient(180deg,transparent 0 7%,#fff7 10% 13%,transparent 16% 24%);
filter:blur(1px);
opacity:.9;
}
.matchBeamFx.fx-arc{
box-shadow:0 0 8px #fff6,0 0 18px currentColor,0 0 34px currentColor;
}
.matchBeamFx.fx-arc:before{
border-radius:10px;
clip-path:polygon(0% 48%,6% 34%,12% 56%,18% 39%,25% 60%,31% 42%,38% 63%,45% 41%,52% 58%,59% 37%,66% 62%,73% 44%,80% 59%,87% 36%,94% 57%,100% 49%,100% 66%,94% 73%,87% 60%,80% 77%,73% 56%,66% 74%,59% 53%,52% 71%,45% 50%,38% 68%,31% 47%,25% 65%,18% 44%,12% 66%,6% 50%,0% 63%);
background:linear-gradient(90deg,transparent 0%,var(--beam-hot) 10%,#fff 50%,var(--beam-hot) 90%,transparent 100%);
filter:drop-shadow(0 0 7px var(--beam-glow)) drop-shadow(0 0 14px var(--beam-hot));
}
.matchBeamFx.fx-arc:after{
inset:10%;
border-radius:8px;
clip-path:polygon(0% 54%,9% 43%,18% 59%,27% 40%,36% 60%,45% 42%,54% 58%,63% 41%,72% 57%,81% 39%,90% 62%,100% 46%,100% 58%,90% 73%,81% 49%,72% 66%,63% 48%,54% 64%,45% 47%,36% 67%,27% 45%,18% 65%,9% 49%,0% 61%);
background:linear-gradient(90deg,transparent 0%,#fff0 8%,#fff 50%,#fff0 92%,transparent 100%);
opacity:.95;
}
.matchBeamFx.fx-fire{
box-shadow:0 0 10px #fff4,0 0 22px currentColor,0 0 44px currentColor;
}
.matchBeamFx.fx-fire:before{
background:linear-gradient(90deg,transparent 0%,var(--beam-hot) 7%,var(--beam-core) 20%,#fff4b3 50%,var(--beam-core) 80%,var(--beam-hot) 93%,transparent 100%);
filter:saturate(1.15);
}
.matchBeamFx.fx-fire:after{
inset:0;
background:
radial-gradient(circle at 12% 40%,#fff8 0 8%,transparent 14%),
radial-gradient(circle at 20% 62%,#fff6 0 7%,transparent 13%),
radial-gradient(circle at 32% 35%,#fff7 0 8%,transparent 14%),
radial-gradient(circle at 44% 66%,#fff6 0 7%,transparent 13%),
radial-gradient(circle at 56% 38%,#fff8 0 8%,transparent 14%),
radial-gradient(circle at 68% 63%,#fff5 0 7%,transparent 13%),
radial-gradient(circle at 80% 34%,#fff7 0 8%,transparent 14%),
radial-gradient(circle at 90% 58%,#fff5 0 7%,transparent 13%);
filter:blur(1.2px);
opacity:.95;
}
.matchBurstFx{
border-radius:50%;
animation:matchBurstFlash .6s ease-out forwards;
}
.matchBurstFx:before{
background:radial-gradient(circle,var(--beam-core) 0%,var(--beam-hot) 35%,transparent 72%);
box-shadow:0 0 18px var(--beam-glow),0 0 36px var(--beam-hot);
}
.matchBurstFx:after{
inset:24%;
background:linear-gradient(90deg,transparent 0 28%,#fff9 44% 56%,transparent 72% 100%),
linear-gradient(180deg,transparent 0 28%,#fff9 44% 56%,transparent 72% 100%);
transform:rotate(45deg);
filter:blur(1px);
}
.matchBurstFx.fx-arc:before{
background:radial-gradient(circle,var(--beam-core) 0%,transparent 46%),
radial-gradient(circle at 50% 50%,transparent 36%,var(--beam-hot) 37% 42%,transparent 45% 100%);
box-shadow:0 0 18px var(--beam-glow),0 0 42px var(--beam-hot);
}
.matchBurstFx.fx-arc:after{
inset:8%;
background:conic-gradient(from 0deg,#fff0 0 6%,#fff 7% 10%,#fff0 11% 17%,#fff 18% 22%,#fff0 23% 30%,#fff 31% 35%,#fff0 36% 43%,#fff 44% 48%,#fff0 49% 56%,#fff 57% 60%,#fff0 61% 68%,#fff 69% 73%,#fff0 74% 81%,#fff 82% 86%,#fff0 87% 100%);
filter:blur(.6px);
opacity:.95;
}
.matchBurstFx.fx-fire:before{
background:radial-gradient(circle,var(--beam-core) 0%,#fff6be 16%,var(--beam-hot) 36%,#ff5a2d 62%,transparent 76%);
box-shadow:0 0 18px var(--beam-glow),0 0 50px var(--beam-hot);
}
.matchBurstFx.fx-fire:after{
inset:10%;
background:
radial-gradient(circle at 50% 16%,#fff8 0 9%,transparent 20%),
radial-gradient(circle at 24% 58%,#fff6 0 8%,transparent 18%),
radial-gradient(circle at 76% 58%,#fff6 0 8%,transparent 18%),
radial-gradient(circle at 50% 84%,#ffefaa 0 7%,transparent 15%);
filter:blur(1px);
opacity:.95;
}
.matchBeamFx.gold,.matchBurstFx.gold{
color:#ffd24a;
--beam-core:#fff2b5;
--beam-hot:#ffd24a;
--beam-glow:#ffdf72;
}
.matchBeamFx.yellow,.matchBurstFx.yellow{
color:#ffe866;
--beam-core:#fffbe0;
--beam-hot:#ffe866;
--beam-glow:#fff07d;
}
.matchBeamFx.red,.matchBurstFx.red{
color:#ff6a52;
--beam-core:#ffd6ca;
--beam-hot:#ff6a52;
--beam-glow:#ff8f79;
}
.matchBeamFx.blue,.matchBurstFx.blue{
color:#57b3ff;
--beam-core:#dff2ff;
--beam-hot:#57b3ff;
--beam-glow:#8ed0ff;
}
.matchBeamFx.flame,.matchBurstFx.flame{
color:#ff8b3d;
--beam-core:#fff0c5;
--beam-hot:#ff8b3d;
--beam-glow:#ffb145;
}
.matchBeamFx.violet,.matchBurstFx.violet{
color:#ca90ff;
--beam-core:#f0dfff;
--beam-hot:#ca90ff;
--beam-glow:#dbafff;
}
@keyframes matchBeamFlash{
0%{opacity:0;transform:scale(.84);filter:brightness(1)}
16%{opacity:.98;transform:scale(1.02);filter:brightness(1.34)}
60%{opacity:.95;transform:scale(1);filter:brightness(1.16)}
100%{opacity:0;transform:scale(1.08);filter:brightness(.96)}
}
@keyframes matchBurstFlash{
0%{opacity:0;transform:scale(.25) rotate(0deg)}
18%{opacity:1;transform:scale(.92) rotate(12deg)}
65%{opacity:.82;transform:scale(1.16) rotate(28deg)}
100%{opacity:0;transform:scale(1.42) rotate(42deg)}
}
/* v064 hints + dead-board hardening */
.tile.hintMove{
animation:hintMovePulse .62s ease-in-out infinite alternate;
z-index:3;
}
@keyframes hintMovePulse{
from{filter:brightness(1);transform:scale(1);box-shadow:0 0 0 1px #000}
to{filter:brightness(1.9);transform:scale(1.08);box-shadow:0 0 0 2px #fff8,0 0 18px #fff9}
}
/* v066 modern special-piece direction markings */
.tile.horizontalSpecial,
.tile.verticalSpecial,
.tile.crossSpecial,
.tile.spiralSpecial{
box-shadow:0 0 0 1px #000,inset 0 0 0 2px #0009,0 0 14px #0008;
}
/* Replace the tiny corner badges with board-readable markings laid over the tile. */
.tile.horizontalSpecial:before,
.tile.verticalSpecial:before,
.tile.crossSpecial:before,
.tile.spiralSpecial:before{
content:'';
position:absolute;
pointer-events:none;
z-index:2;
border-radius:999px;
}
.tile.horizontalSpecial:before{
left:5%;
right:5%;
top:44%;
height:12%;
background:linear-gradient(90deg,#ffffff18,#ffd65fe8 16%,#fff5ad 50%,#ffd65fe8 84%,#ffffff18);
box-shadow:0 0 10px #ffd65faa,0 0 2px #fff;
}
.tile.verticalSpecial:before{
top:5%;
bottom:5%;
left:44%;
width:12%;
background:linear-gradient(180deg,#ffffff18,#8be2ffe8 16%,#d9f7ff 50%,#8be2ffe8 84%,#ffffff18);
box-shadow:0 0 10px #8be2ffaa,0 0 2px #fff;
}
/* Cross special gets both axes so its behavior is obvious at a glance. */
.tile.crossSpecial:before{
left:5%;
right:5%;
top:44%;
height:12%;
background:linear-gradient(90deg,#ffffff18,#ff9a68e8 16%,#ffe1d0 50%,#ff9a68e8 84%,#ffffff18);
box-shadow:0 0 10px #ff9a68bb,0 0 2px #fff;
}
.tile.crossSpecial:after{
content:'';
position:absolute;
pointer-events:none;
z-index:2;
top:5%;
bottom:5%;
left:44%;
width:12%;
border-radius:999px;
background:linear-gradient(180deg,#ffffff18,#ff9a68e8 16%,#ffe1d0 50%,#ff9a68e8 84%,#ffffff18);
box-shadow:0 0 10px #ff9a68bb,0 0 2px #fff;
}
/* Color bomb / spiral gets a centered ring instead of a text tag. */
.tile.spiralSpecial:before{
width:54%;
height:54%;
left:23%;
top:23%;
border:clamp(2px,.24vw,4px) solid #f8f0ffee;
background:radial-gradient(circle,transparent 42%,#e9d6ff33 45%,#e9d6ff88 64%,transparent 68%);
box-shadow:0 0 12px #e9d6ffcc,inset 0 0 10px #e9d6ff99;
}
.tile.spiralSpecial:after{
content:'';
position:absolute;
pointer-events:none;
z-index:3;
width:16%;
height:16%;
left:42%;
top:42%;
border-radius:50%;
background:#fff;
box-shadow:0 0 10px #e9d6ff,0 0 18px #e9d6ffaa;
}
\n\n/* v067 mobile fullscreen gameplay magnifier */\n.mobileArcade .playfield{will-change:transform}\n.mobileArcade .appStage.playfieldZoomed .playfield{box-shadow:0 0 0 2px #ffffff55,0 12px 30px #000d}\n.mobileArcade .appStage.playfieldZoomed .sideHud{opacity:.28}\n
/* v070 Signal Router polish */
.traceHud{display:none!important}
.traceGame{background:radial-gradient(ellipse at 50% 35%,#303630,#090c0a 76%)}
.traceHint{
left:24%;
right:24%;
bottom:1.15%;
padding:.46% .6%;
border:1px solid #716954;
border-radius:5px;
background:#050706e6;
color:#e9dfc3;
box-shadow:0 3px 12px #000a;
letter-spacing:.025em;
}
.mobileArcade .traceHint{
left:19%;
right:19%;
font-size:clamp(8px,1.2vw,13px);
}
/* v071 Signal Router bottom-edge hint strip */
.traceHint{
left:0;
right:0;
bottom:0;
width:100%;
box-sizing:border-box;
padding:.26% .7%;
border:0;
border-top:1px solid #716954;
border-radius:0;
background:#050706ee;
color:#e9dfc3;
box-shadow:none;
white-space:nowrap;
line-height:1;
}
.mobileArcade .traceHint{
left:0;
right:0;
width:100%;
font-size:clamp(7px,1vw,11px);
padding:.22% .5%;
}
/* v090 readability/polish */
.accessGame.sokoPort .accessPullHint{
font-size:clamp(10px,.72vw,14px);
letter-spacing:.025em;
}
.mobileArcade .accessGame.sokoPort .accessPullHint{
font-size:clamp(9px,1.65vw,13px);
}
/* v096 persistent Braaptopia Radio controls */
.arcadeAudioBtn{
position:absolute;bottom:.75%;z-index:55;
min-width:118px;min-height:34px;padding:7px 12px;
border:2px solid #7a6c50;border-radius:6px;
background:linear-gradient(#2a2b27,#151714);color:#f4e7c7;
box-shadow:0 3px 8px #0009,inset 0 0 0 1px #ffffff12;
font:900 clamp(9px,.72vw,13px)/1 monospace;letter-spacing:.08em;
text-transform:uppercase;
}
.arcadeAudioMute{left:.75%}
.arcadeAudioSkip{right:.75%}
.arcadeAudioBtn:hover{filter:brightness(1.18)}
.arcadeAudioBtn.isMuted{color:#ffcf5a;border-color:#b98a2f;background:linear-gradient(#40331b,#20180d)}
.mobileArcade .arcadeAudioBtn{bottom:.5%;min-width:96px;min-height:28px;padding:5px 8px;font-size:clamp(8px,1.05vw,11px)}
/* v101 desktop fullscreen control */
.desktopFullscreenButton{
position:absolute;right:1.6%;top:2.2%;z-index:56;
min-width:clamp(126px,9.5vw,178px);min-height:clamp(40px,4vw,60px);
padding:.62% 1%;border:1px solid rgba(146,215,255,.48);border-radius:11px;
background:linear-gradient(180deg,rgba(31,52,62,.96),rgba(15,28,34,.98));color:#def5ff;
box-shadow:0 9px 20px #0008,inset 0 0 0 1px rgba(255,255,255,.06);
font:950 clamp(11px,.82vw,16px)/1 system-ui;letter-spacing:.05em;text-transform:uppercase;
}
.desktopFullscreenButton:hover{filter:brightness(1.14);border-color:#8fdcff}
.desktopFullscreenButton.isActive{color:#fff0ad;border-color:#d9ac54;background:linear-gradient(180deg,#5a4622,#2d2110)}
.desktopFullscreenHint{position:fixed;right:1.6%;top:9.2%;z-index:90;max-width:min(470px,92vw);padding:12px 14px;border:1px solid #7fcce955;border-radius:10px;background:rgba(13,25,31,.97);color:#e7f8ff;box-shadow:0 16px 44px #000b,inset 0 0 0 1px #ffffff0d;font:800 12px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}.desktopFullscreenHint.show{opacity:1;transform:translateY(0)}.desktopFullscreenHint b{display:block;color:#fff0a8;font-size:13px;letter-spacing:.04em;margin-bottom:3px}
.mobileArcade .desktopFullscreenButton,.mobileArcade .desktopFullscreenHint{display:none}
.arcadeIntroOverlay{position:absolute;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(10px,1.2vw,20px);background:linear-gradient(180deg,#05080cb8,#090d12e3);backdrop-filter:blur(3px)}
.arcadeIntroOverlay[hidden]{display:none!important}
.arcadeIntroCard{position:relative;width:min(92%,1180px);height:min(74vh,640px);max-height:calc(100vh - 24px);border-radius:22px;overflow:hidden;border:1px solid #c69d4d66;box-shadow:0 24px 60px #000d,0 0 0 1px #0009 inset;background:#0d1014}
.arcadeIntroVisual{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(7,10,14,.08) 0 44%,rgba(7,10,14,.34) 54%,rgba(7,10,14,.70) 66%,rgba(7,10,14,.93) 78%,rgba(7,10,14,.98) 100%),url('../assets/ui/rack-go-boom-intro.webp');background-size:cover;background-position:center center}
.arcadeIntroContent{position:relative;z-index:1;margin-left:auto;width:min(48%,540px);height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(8px,.8vw,13px);padding:clamp(18px,2vw,34px);overflow:hidden;background:linear-gradient(180deg,rgba(6,10,14,.18),rgba(6,10,14,.78) 18%,rgba(6,10,14,.96) 62%,rgba(6,10,14,.985) 100%)}
.arcadeIntroProgress{align-self:flex-start;padding:4px 10px;border-radius:999px;border:1px solid #f0c2602f;background:#141c24cc;color:#f5d584;font:900 clamp(10px,.78vw,13px)/1 ui-monospace,monospace;letter-spacing:.12em}
.arcadeIntroEyebrow{display:inline-block;align-self:flex-start;padding:6px 10px;border-radius:999px;border:1px solid #6aaecf55;background:#09141cb8;color:#9fe7ff;font:900 clamp(10px,.82vw,14px)/1.05 ui-monospace,monospace;letter-spacing:.12em}
.arcadeIntroContent h2{margin:0;color:#ffe7a6;font:900 clamp(22px,2.15vw,38px)/.98 Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;letter-spacing:.015em;text-transform:uppercase;text-shadow:0 2px 12px #000b;text-wrap:balance}
.arcadeIntroSpeech{padding:clamp(14px,1.2vw,20px);border-radius:18px;min-height:0;flex:1 1 0;overflow-x:hidden;overflow-y:scroll;scrollbar-gutter:stable;scrollbar-width:auto;scrollbar-color:#b78a3b #0a0f14;overscroll-behavior:contain;border:1px solid #f0c2603b;background:linear-gradient(180deg,#111820d8,#0b1016f0);box-shadow:0 10px 26px #0009,inset 0 0 0 1px #ffffff09}
.arcadeIntroSpeaker{display:block;margin-bottom:10px;color:#84deff;font:900 clamp(11px,.92vw,16px)/1 ui-monospace,monospace;letter-spacing:.13em}
#arcadeIntroText{margin:0;min-height:0;color:#f4f0e5;font:800 clamp(13px,1vw,18px)/1.42 'Trebuchet MS',Arial,sans-serif;text-wrap:pretty}
#arcadeIntroText::after{content:'';display:inline-block;width:.62em;height:1.08em;margin-left:3px;vertical-align:-.16em;background:#ffe59f;box-shadow:0 0 9px #ffd25a66;animation:arcadeIntroCursor .9s steps(1,end) infinite}
.arcadeIntroSpeech.done #arcadeIntroText::after{display:none}
.arcadeIntroActions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;flex:0 0 auto}
.arcadeIntroActions button{min-width:150px;min-height:50px;padding:0 18px;border-radius:14px;border:1px solid #9b8f6a;background:linear-gradient(180deg,#312a1c,#17120d);color:#ffe9b2;font:900 clamp(13px,.95vw,16px)/1 system-ui,sans-serif;letter-spacing:.05em;box-shadow:0 8px 18px #0008;cursor:pointer}
.arcadeIntroActions button:hover{filter:brightness(1.08);border-color:#f0c15d}
.arcadeIntroActions button:disabled{opacity:.45;cursor:default;filter:none}
#arcadeIntroStart{background:linear-gradient(180deg,#7e4f1f,#3e2610);border-color:#e1a34f;color:#fff3cb}
@keyframes arcadeIntroCursor{50%{opacity:0}}
@media (max-width:1100px){.arcadeIntroContent{width:min(54%,560px)}}
@media (max-width:860px){.arcadeIntroCard{height:min(82vh,760px);max-height:calc(100vh - 8px)}.arcadeIntroVisual{background-image:linear-gradient(180deg,rgba(7,10,14,.08) 0 32%,rgba(7,10,14,.42) 52%,rgba(7,10,14,.82) 66%,rgba(7,10,14,.95) 76%,rgba(7,10,14,.985) 100%),url('../assets/ui/rack-go-boom-intro.webp');background-position:28% center}.arcadeIntroContent{width:100%;height:100%;justify-content:flex-end;padding:18px 16px 16px;background:linear-gradient(180deg,rgba(6,10,14,0) 0 44%,rgba(6,10,14,.66) 58%,rgba(6,10,14,.94) 72%,rgba(6,10,14,.985) 100%)}#arcadeIntroText{min-height:5.2em}.arcadeIntroActions{justify-content:stretch}.arcadeIntroActions button{flex:1 1 180px}}
.arcadeIntroSpeech::-webkit-scrollbar{width:10px}.arcadeIntroSpeech::-webkit-scrollbar-track{background:#0a0f14;border-radius:8px}.arcadeIntroSpeech::-webkit-scrollbar-thumb{background:#80622f;border:2px solid #0a0f14;border-radius:8px}.arcadeIntroSpeech::-webkit-scrollbar-thumb:hover{background:#b78a3b}
/* Magic Smoke Defender */
.smokeGame{position:absolute;inset:0;overflow:hidden;background:#07111a;touch-action:none;cursor:ns-resize}
.smokeGame canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.smokeHelp{position:absolute;left:50%;bottom:1.5%;transform:translateX(-50%);z-index:4;pointer-events:none;white-space:nowrap;padding:.48em .8em;border-radius:999px;border:1px solid rgba(115,213,242,.28);background:rgba(3,8,12,.70);color:#bfeeff;font:900 clamp(8px,.64vw,13px)/1 monospace;letter-spacing:.05em;box-shadow:0 5px 14px #0009}
.smokeObjective{display:grid;gap:7px;width:100%;padding:10px 11px;border-radius:12px;border:1px solid rgba(113,204,233,.20);background:linear-gradient(180deg,rgba(14,29,37,.74),rgba(8,15,19,.76));text-align:center}
.smokeObjective b{color:#90e4ff;font:900 clamp(9px,.66vw,13px)/1 monospace;letter-spacing:.12em}
.smokeObjective strong{color:#ffe0a1;font:900 clamp(12px,.85vw,17px)/1.12 system-ui}
.smokeObjective em{color:#e6edf0;font:900 clamp(10px,.72vw,14px)/1 monospace;font-style:normal}
.smokeObjective small{color:#8fb0b9;font:800 clamp(8px,.58vw,12px)/1.15 system-ui;letter-spacing:.05em}
.smokeObjective.fail{border-color:rgba(255,86,68,.38);background:linear-gradient(180deg,rgba(53,18,14,.84),rgba(19,9,8,.84))}
.smokeObjective.win{border-color:rgba(104,222,126,.34);background:linear-gradient(180deg,rgba(16,47,27,.78),rgba(7,20,12,.82))}
.smokeEnd{position:absolute;inset:0;z-index:12;display:grid;place-items:center;padding:18px;background:rgba(3,7,8,.78);backdrop-filter:blur(3px)}
.smokeEnd>div{width:min(76%,580px);display:grid;gap:12px;padding:clamp(22px,2.2vw,38px);border-radius:18px;border:2px solid rgba(255,109,81,.54);background:linear-gradient(180deg,#24130f,#0b0d0e);box-shadow:0 22px 48px #000c;text-align:center}
.smokeEnd strong{color:#ffbd8e;font:900 clamp(24px,2.3vw,44px)/1 Impact,'Arial Narrow Bold',sans-serif;letter-spacing:.04em}
.smokeEnd span{color:#e8d8c8;font:800 clamp(11px,.82vw,16px)/1.3 monospace}
.smokeEnd button{min-height:48px;border-radius:10px;border:1px solid #d99a55;background:linear-gradient(#6a3d1e,#321b0e);color:#fff0ce;font:900 clamp(11px,.8vw,15px)/1 system-ui;cursor:pointer}
.appStage[data-game="smoke"] #objectives{display:block;overflow:visible}
.appStage[data-game="smoke"] .objectiveCard{overflow:hidden}
@media (max-width:900px){.smokeHelp{bottom:1%;font-size:clamp(7px,1.2vw,10px)}.smokeObjective{gap:4px;padding:7px 8px}.smokeEnd>div{width:min(88%,520px)}}
.smokeEnd.smokeWin{background:radial-gradient(circle at 50% 48%,rgba(64,126,69,.28),rgba(3,7,8,.84) 58%);animation:smokeWinFade .32s ease-out both}
.smokeEnd.smokeWin>div{border-color:rgba(133,255,145,.64);background:linear-gradient(180deg,#102416,#090d0a);box-shadow:0 0 34px rgba(102,255,128,.2),0 22px 48px #000c}
.smokeEnd.smokeWin strong{color:#baffbe;text-shadow:0 0 14px rgba(104,255,132,.5)}
.smokeEnd.smokeWin span{color:#e4f4df}
.smokeWinScore{display:block;color:#ffd86b;font:900 clamp(12px,.9vw,17px)/1 monospace;letter-spacing:.08em}
@keyframes smokeWinFade{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
/* Mobile Engineering briefing: keep both page-one actions on one compact row
so the scrolling speech panel retains usable height. */
@media (pointer:coarse) and (max-width:1100px){
.arcadeIntroActions{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:6px;
width:100%;
}
.arcadeIntroActions button{
min-width:0;
min-height:34px;
padding:0 8px;
border-radius:9px;
font-size:clamp(9px,1.35vw,12px);
line-height:1.05;
letter-spacing:.02em;
white-space:nowrap;
}
}
/* Percussive Maintenance — full-field Breakout tuned for landscape phones. */
.percussiveGame{position:absolute;inset:0;overflow:hidden;background:#090d0e;touch-action:none;cursor:ew-resize}
.percussiveGame canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.percussiveHelp{position:absolute;left:50%;bottom:1.2%;transform:translateX(-50%);z-index:5;pointer-events:none;white-space:nowrap;padding:.45em .8em;border-radius:999px;border:1px solid rgba(225,183,82,.32);background:rgba(7,8,7,.76);color:#f0d78e;font:900 clamp(8px,.64vw,13px)/1 monospace;letter-spacing:.05em;box-shadow:0 5px 14px #0009}
.percussiveObjective{display:grid;gap:7px;width:100%;padding:10px 11px;border-radius:12px;border:1px solid rgba(220,177,76,.24);background:linear-gradient(180deg,rgba(42,34,18,.78),rgba(15,14,10,.82));text-align:center}
.percussiveObjective b{color:#f1cf72;font:900 clamp(9px,.66vw,13px)/1 monospace;letter-spacing:.10em}
.percussiveObjective strong{color:#f5eee0;font:900 clamp(12px,.85vw,17px)/1.12 system-ui}
.percussiveObjective em{color:#c7d4d2;font:900 clamp(9px,.7vw,13px)/1 monospace;font-style:normal}
.percussiveObjective small{color:#9daaa8;font:800 clamp(8px,.58vw,12px)/1.15 system-ui;letter-spacing:.04em}
.percussiveEnd{position:absolute;inset:0;z-index:12;display:grid;place-items:center;padding:18px;background:rgba(3,5,5,.80);backdrop-filter:blur(3px)}
.percussiveEnd>div{width:min(76%,580px);display:grid;gap:12px;padding:clamp(22px,2.2vw,38px);border-radius:18px;border:2px solid rgba(221,174,72,.54);background:linear-gradient(180deg,#241d0e,#0b0d0d);box-shadow:0 22px 48px #000c;text-align:center}
.percussiveEnd strong{color:#ffdb7d;font:900 clamp(24px,2.3vw,44px)/1 Impact,'Arial Narrow Bold',sans-serif;letter-spacing:.04em}
.percussiveEnd span{color:#e6dfd1;font:800 clamp(11px,.82vw,16px)/1.3 monospace}
.percussiveEnd button{min-height:48px;border-radius:10px;border:1px solid #d5a448;background:linear-gradient(#6a4b19,#30200b);color:#fff0c5;font:900 clamp(11px,.8vw,15px)/1 system-ui;cursor:pointer}
.appStage[data-game="percussive"] #objectives{display:block;overflow:visible}
.appStage[data-game="percussive"] .objectiveCard{overflow:hidden}
@media (max-width:900px){.percussiveHelp{top:.8%;bottom:auto;font-size:clamp(7px,1.2vw,10px)}.percussiveObjective{gap:4px;padding:7px 8px}.percussiveEnd>div{width:min(88%,520px)}}
@media (pointer:coarse) and (max-width:1100px){.percussiveHelp{top:.7%;bottom:auto}}
/* v115 Engineering specialty / oscilloscope assignment console */
.specialtyButton{
position:absolute;left:1.6%;top:8.35%;z-index:56;
min-width:clamp(180px,13.8vw,280px);min-height:clamp(34px,3.6vw,54px);
padding:.52% 1%;border:1px solid rgba(103,230,188,.46);border-radius:11px;
background:linear-gradient(180deg,rgba(22,57,49,.96),rgba(10,29,26,.98));color:#d7fff1;
box-shadow:0 8px 18px #0008,inset 0 0 0 1px rgba(255,255,255,.05),0 0 18px rgba(78,232,178,.12);
font:950 clamp(10px,.78vw,15px)/1 system-ui;letter-spacing:.055em;text-transform:uppercase;cursor:pointer;
}
.specialtyButton:hover{filter:brightness(1.13);border-color:#86f3cb}
.mobileArcade .specialtyButton{top:8.1%;min-width:clamp(138px,22vw,188px);min-height:clamp(30px,4.8vw,42px);font-size:clamp(8px,1.18vw,11px)}
.mobilePortrait .specialtyButton{visibility:hidden}
.gameArea{position:relative}
.appStage[data-game="assignment"] .gameFooter{visibility:hidden;pointer-events:none}
.assignmentConsole{position:absolute;inset:0;overflow:hidden;border-radius:10px;background:#03100d;color:#d9fff0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.scopeScreen{position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,rgba(36,171,116,.13),transparent 46%),linear-gradient(180deg,#04130f,#020907);overflow:hidden}
.scopeGrid{position:absolute;inset:0;opacity:.3;background-image:linear-gradient(rgba(100,255,189,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(100,255,189,.12) 1px,transparent 1px);background-size:5% 8.333%}
.scopeGrid::before,.scopeGrid::after{content:'';position:absolute;background:rgba(123,255,201,.2)}
.scopeGrid::before{left:50%;top:0;bottom:0;width:1px}.scopeGrid::after{top:50%;left:0;right:0;height:1px}
.scopeWave{position:absolute;left:-8%;right:-8%;top:49%;height:18%;filter:drop-shadow(0 0 9px rgba(89,255,181,.55));opacity:.48}
.scopeWave::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 2%,#5dffb0 2.4% 2.7%,transparent 3.1% 6%,#5dffb0 6.4% 6.7%,transparent 7.1% 10%,#5dffb0 10.4% 10.7%,transparent 11.1%);clip-path:polygon(0 50%,4% 48%,8% 56%,12% 30%,16% 72%,20% 44%,24% 54%,28% 49%,32% 51%,36% 36%,40% 67%,44% 46%,48% 52%,52% 49%,56% 51%,60% 39%,64% 62%,68% 45%,72% 55%,76% 49%,80% 51%,84% 34%,88% 69%,92% 46%,96% 53%,100% 50%,100% 54%,96% 57%,92% 50%,88% 73%,84% 38%,80% 55%,76% 53%,72% 59%,68% 49%,64% 66%,60% 43%,56% 55%,52% 53%,48% 56%,44% 50%,40% 71%,36% 40%,32% 55%,28% 53%,24% 58%,20% 48%,16% 76%,12% 34%,8% 60%,4% 52%,0 54%)}
.scopeSweep{position:absolute;top:0;bottom:0;width:2px;left:-4%;background:#c5ffe4;box-shadow:0 0 8px #8effc5,0 0 26px #4cffaa;animation:engineeringScopeSweep 3.1s linear infinite}
@keyframes engineeringScopeSweep{to{left:104%}}
.assignmentContent{position:relative;z-index:2;height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:clamp(8px,1.15vh,14px);padding:clamp(12px,1.35vw,22px);background:linear-gradient(180deg,rgba(1,10,8,.18),rgba(1,10,8,.54))}
.assignmentHeader{display:grid;gap:4px;text-align:center;text-shadow:0 0 9px rgba(91,255,183,.28)}
.assignmentHeader>span{color:#7fffc3;font:900 clamp(9px,.66vw,12px)/1 monospace;letter-spacing:.15em}
.assignmentHeader>strong{color:#e8fff4;font:900 clamp(18px,1.65vw,32px)/1 Impact,'Arial Narrow Bold',sans-serif;letter-spacing:.045em}
.assignmentHeader>em{color:#77aa96;font:800 clamp(8px,.55vw,11px)/1 monospace;font-style:normal;letter-spacing:.08em}
.assignmentModes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(7px,.75vw,12px)}
.assignmentMode{min-width:0;min-height:clamp(62px,7.2vh,90px);display:grid;align-content:center;gap:6px;padding:10px 12px;border:1px solid rgba(91,239,178,.28);border-radius:9px;background:linear-gradient(180deg,rgba(8,38,29,.88),rgba(3,18,14,.92));color:#d8f8e9;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}
.assignmentMode b{color:#a4ffd6;font:950 clamp(10px,.74vw,14px)/1.05 system-ui;letter-spacing:.045em}.assignmentMode span{color:#8fb8a7;font:700 clamp(8px,.57vw,11px)/1.28 system-ui}
.assignmentMode:hover,.assignmentMode.active{border-color:#8affc8;background:linear-gradient(180deg,rgba(16,69,50,.94),rgba(6,31,23,.96));box-shadow:0 0 18px rgba(67,255,164,.11),inset 0 0 0 1px rgba(151,255,208,.08)}
.assignmentDetail{min-height:0;overflow:auto;display:grid;align-items:center;padding:2px}.assignmentDetail.randomOnly{overflow:hidden}
.randomFeedReadout{margin:auto;width:min(82%,720px);padding:clamp(16px,2vw,28px);border:1px solid rgba(117,255,196,.34);border-radius:12px;background:rgba(4,24,18,.78);text-align:center;box-shadow:inset 0 0 28px rgba(65,255,163,.04)}
.randomFeedReadout b{display:block;color:#b0ffda;font:950 clamp(18px,1.7vw,30px)/1 Impact,sans-serif;letter-spacing:.065em}.randomFeedReadout span{display:block;margin-top:8px;color:#a9c8bb;font:800 clamp(9px,.72vw,13px)/1.35 system-ui}
.specialtyGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,.62vw,10px);align-self:center}
.specialtyCard{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:9px;row-gap:4px;align-items:center;min-height:clamp(62px,8.2vh,92px);padding:9px 10px;border:1px solid rgba(106,208,164,.22);border-radius:9px;background:rgba(4,23,18,.84);cursor:pointer;transition:border-color .12s,background .12s,transform .12s}
.specialtyCard:hover{border-color:rgba(136,255,204,.55)}.specialtyCard.selected{border-color:#83ffc3;background:rgba(12,58,42,.91);box-shadow:0 0 14px rgba(83,255,177,.1)}
.specialtyCard input{position:absolute;opacity:0;pointer-events:none}.specialtyLed{grid-row:1/3;width:12px;height:12px;border-radius:50%;border:1px solid #5c8a75;background:#163529;box-shadow:inset 0 0 4px #000}.specialtyCard.selected .specialtyLed{background:#83ffc3;box-shadow:0 0 10px #5bffad}
.specialtyCard strong{min-width:0;color:#caffdf;font:950 clamp(9px,.67vw,13px)/1 system-ui;letter-spacing:.035em}.specialtyCard small{min-width:0;color:#8eaa9e;font:700 clamp(7px,.53vw,10px)/1.22 system-ui}
.assignmentActions{display:flex;justify-content:center}.assignmentActions button{min-width:min(78%,520px);min-height:clamp(40px,5.4vh,60px);padding:0 18px;border:1px solid #8affc9;border-radius:9px;background:linear-gradient(180deg,#15543e,#082d21);color:#e9fff5;font:950 clamp(11px,.82vw,16px)/1 system-ui;letter-spacing:.045em;cursor:pointer;box-shadow:0 0 18px rgba(65,255,166,.12)}.assignmentActions button:hover{filter:brightness(1.14)}.assignmentActions button:disabled{border-color:rgba(132,164,151,.28);background:linear-gradient(180deg,#18221f,#0d1412);color:#61736c;cursor:not-allowed;box-shadow:none;filter:none;opacity:.72}.assignmentActions button:disabled:hover{filter:none}
.scopeTransition{position:absolute;inset:0;z-index:80;overflow:hidden;pointer-events:none;background:#020a07;animation:scopeBlackout .72s ease both}
.scopeTransition .scopeBeam{position:absolute;left:0;right:0;top:50%;height:2px;background:#d4ffe8;box-shadow:0 0 8px #aaffd2,0 0 24px #48ffa2;animation:scopeBeamCollapse .68s ease-in-out both}
.scopeTransition .scopeTrace{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 4.5%,rgba(76,255,166,.2) 4.65% 4.8%,transparent 4.95% 9.5%);opacity:.6;animation:scopeTraceFlash .72s ease both}
@keyframes scopeBeamCollapse{0%{transform:scaleY(1);opacity:.15}25%{transform:scaleY(90);opacity:.65}49%{transform:scaleY(1);opacity:1}56%{transform:scaleY(1);opacity:1}100%{transform:scaleY(90);opacity:0}}
@keyframes scopeTraceFlash{0%,100%{opacity:0}28%,62%{opacity:.55}}
@keyframes scopeBlackout{0%{opacity:0}25%{opacity:1}72%{opacity:1}100%{opacity:0}}
@media (pointer:coarse) and (max-width:1100px){
.assignmentContent{padding:7px 9px;gap:5px}.assignmentHeader{gap:2px}.assignmentHeader>strong{font-size:clamp(14px,2.4vw,21px)}
.assignmentModes{gap:5px}.assignmentMode{min-height:48px;padding:6px 7px;gap:3px}.assignmentMode b{font-size:clamp(8px,1.35vw,11px)}.assignmentMode span{font-size:clamp(7px,1vw,9px);line-height:1.15}
.specialtyGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.specialtyCard{min-height:48px;padding:5px 6px;column-gap:5px;row-gap:2px}.specialtyLed{width:8px;height:8px}.specialtyCard strong{font-size:clamp(7px,1.12vw,9px)}.specialtyCard small{font-size:clamp(6px,.88vw,8px);line-height:1.1}
.assignmentActions button{min-height:34px;font-size:clamp(8px,1.28vw,11px)}.randomFeedReadout{padding:10px 12px}.randomFeedReadout b{font-size:clamp(13px,2.1vw,18px)}.randomFeedReadout span{font-size:clamp(7px,1.05vw,9px)}
}
/* v117 — Specialty control belongs to the work-order footer, never the gameplay field. */
.gameFooter{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.gameFooter .specialtyButton{
position:relative;
inset:auto;
z-index:auto;
display:block;
flex:1;
align-self:stretch;
width:auto;
min-width:0;
height:28px;
min-height:28px;
margin:0;
padding:0 10px;
border-radius:5px;
border-color:rgba(103,230,188,.46);
background:linear-gradient(180deg,rgba(22,57,49,.96),rgba(10,29,26,.98));
color:#d7fff1;
box-shadow:none;
white-space:nowrap;
font:950 clamp(8px,.58vw,12px)/1 system-ui;
letter-spacing:.04em;
}
.gameFooter .specialtyButton:hover{filter:brightness(1.13);border-color:#86f3cb}
.mobileArcade .gameFooter .specialtyButton{
position:relative;
inset:auto;
min-width:0;
min-height:22px;
height:22px;
padding:0 4px;
font-size:clamp(5.8px,1vw,8px);
}
.mobilePortrait .gameFooter .specialtyButton{visibility:visible}
/* CLEAR THE ACCESS owns its footer; five controls fit in one compact row. */
.accessGame.sokoPort .accessTools{
grid-template-columns:repeat(5,minmax(0,1fr));
gap:4px;
padding:4px 8px;
}
.accessGame.sokoPort .accessTools button{
min-width:0;
padding:0 4px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:clamp(6px,.43vw,9px);
}
.accessGame.sokoPort .accessTools [data-act="specialty"]{
border-color:rgba(103,230,188,.46);
background:linear-gradient(180deg,rgba(22,57,49,.96),rgba(10,29,26,.98));
color:#d7fff1;
}
.mobileArcade .accessGame.sokoPort .accessTools{
gap:3px;
padding:3px 5px;
}
.mobileArcade .accessGame.sokoPort .accessTools button{
font-size:clamp(5.5px,1vw,8px);
padding:0 2px;
}
.towerGame{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#6ea3cf,#b8d0df 60%,#c8c4ac);touch-action:none;cursor:crosshair}
.towerGame canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.towerHelp{position:absolute;left:50%;bottom:1.2%;transform:translateX(-50%);z-index:5;pointer-events:none;white-space:nowrap;padding:.45em .8em;border-radius:999px;border:1px solid rgba(214,255,127,.34);background:rgba(8,12,14,.72);color:#edf5d7;font:900 clamp(8px,.64vw,13px)/1 monospace;letter-spacing:.05em;box-shadow:0 5px 14px #0009}
.towerObjective{display:grid;gap:7px;width:100%;padding:10px 11px;border-radius:12px;border:1px solid rgba(189,219,104,.26);background:linear-gradient(180deg,rgba(30,39,24,.86),rgba(11,14,11,.84));text-align:center}
.towerObjective b{color:#d8ff8c;font:900 clamp(9px,.66vw,13px)/1 monospace;letter-spacing:.10em}
.towerObjective strong{color:#f5eee0;font:900 clamp(12px,.85vw,17px)/1.12 system-ui}
.towerObjective em{color:#c7d4d2;font:900 clamp(9px,.7vw,13px)/1 monospace;font-style:normal}
.towerObjective small{color:#9daaa8;font:800 clamp(8px,.58vw,12px)/1.15 system-ui;letter-spacing:.04em}
.appStage[data-game="tower"] #objectives{display:block;overflow:visible}
.appStage[data-game="tower"] .objectiveCard{overflow:hidden}
@media (max-width:900px){.towerHelp{top:.7%;bottom:auto;font-size:clamp(7px,1.18vw,10px)}.towerObjective{gap:4px;padding:7px 8px}}
.towerTune{position:absolute;right:12px;top:12px;z-index:8;width:min(240px,32%);padding:8px 10px;border:1px solid rgba(220,235,236,.24);border-radius:10px;background:rgba(6,10,12,.82);box-shadow:0 6px 18px #0008;color:#dfe9e7;font:900 clamp(8px,.62vw,12px)/1.1 monospace;letter-spacing:.05em}
.towerTune label{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:6px}.towerTune b{color:#d9ff79;font-size:1.12em}.towerTune input{display:block;width:100%;accent-color:#d9ff79;cursor:ew-resize}
.mobileArcade .towerTune{right:8px;top:8px;width:min(220px,34%);padding:6px 8px;font-size:clamp(7px,1vw,10px)}
/* v131 — Mobile assignment console must scroll even though gameplay playfields
globally use touch-action:none. Keep the override local to assignment only. */
.assignmentConsole{touch-action:pan-y;overscroll-behavior:contain}
.assignmentDetail{touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden;align-items:start}
.assignmentDetail .specialtyGrid{align-self:start;width:100%}
@media (pointer:coarse) and (max-width:1100px){
.assignmentContent{min-height:0;overflow:hidden}
.assignmentDetail{min-height:0;max-height:100%;padding-bottom:10px}
.assignmentDetail::-webkit-scrollbar{width:6px}
.assignmentDetail::-webkit-scrollbar-thumb{background:rgba(131,255,195,.45);border-radius:999px}
}
/* v132 — mobile assignment console gets an explicit persistent scroll affordance. */
.assignmentScrollCue{display:none}
@media (pointer:coarse) and (max-width:1100px){
.assignmentDetail{scrollbar-gutter:stable;scrollbar-width:auto;scrollbar-color:#79efbb rgba(2,18,13,.72)}
.assignmentDetail::-webkit-scrollbar{width:9px}
.assignmentDetail::-webkit-scrollbar-track{background:rgba(2,18,13,.72);border-radius:999px}
.assignmentDetail::-webkit-scrollbar-thumb{background:#79efbb;border:2px solid rgba(2,18,13,.72);border-radius:999px}
.assignmentScrollCue{--scroll-thumb-size:28%;--scroll-thumb-pos:0%;position:absolute;z-index:8;right:3px;top:43%;bottom:12%;width:18px;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;gap:3px;pointer-events:none;opacity:0;transform:translateX(3px);transition:opacity .18s ease,transform .18s ease;color:#a8ffd7;text-shadow:0 0 8px rgba(102,255,190,.4)}
.assignmentScrollCue.isVisible{opacity:.92;transform:none}
.assignmentScrollCue span{writing-mode:vertical-rl;transform:rotate(180deg);font:900 6px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;color:#78c9a7}
.assignmentScrollCue b{position:relative;width:7px;height:100%;min-height:34px;border:1px solid rgba(125,255,195,.35);border-radius:999px;background:rgba(0,8,6,.58);box-shadow:inset 0 0 5px rgba(0,0,0,.6)}
.assignmentScrollCue b i{position:absolute;left:1px;right:1px;top:var(--scroll-thumb-pos);height:var(--scroll-thumb-size);min-height:9px;border-radius:999px;background:#83ffc3;box-shadow:0 0 8px rgba(83,255,177,.45)}
.assignmentScrollCue em{font:900 9px/1 monospace;font-style:normal;color:#9dffd1;animation:assignmentScrollNudge 1.2s ease-in-out infinite}
.assignmentScrollCue.atBottom em{opacity:.25;animation:none}
@keyframes assignmentScrollNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
}
/* v166 — Ghost in the Rack */
.ghostRackGame{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 35%,#36424d,#0e1318 72%);touch-action:none;cursor:crosshair}
.ghostRackGame canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ghostRackHeader{position:absolute;left:14px;top:12px;z-index:6;display:grid;gap:4px;padding:9px 12px;border-radius:12px;border:1px solid rgba(129,255,204,.28);background:linear-gradient(180deg,rgba(7,11,14,.82),rgba(8,13,18,.64));box-shadow:0 8px 18px rgba(0,0,0,.35)}
.ghostRackHeader b,.ghostRackHeader span{display:block;font:900 clamp(9px,.72vw,14px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;color:#e7fff4}
.ghostRackHeader span{color:#a6d9ca;font-size:clamp(8px,.62vw,12px)}
.ghostRackToast{position:absolute;left:50%;top:9.5%;transform:translate(-50%,-10px);z-index:7;padding:8px 14px;border-radius:999px;border:1px solid rgba(139,255,211,.3);background:rgba(6,12,14,.86);box-shadow:0 8px 18px rgba(0,0,0,.32);color:#dffff0;font:900 clamp(10px,.88vw,16px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.11em;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.ghostRackToast.show{opacity:1;transform:translate(-50%,0)}
.ghostRackReticle{position:absolute;right:15px;top:16px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(134,255,204,.22);box-shadow:0 0 0 10px rgba(134,255,204,.03) inset;opacity:.5}
.ghostRackReticle::before,.ghostRackReticle::after{content:"";position:absolute;left:50%;top:50%;background:rgba(134,255,204,.3);transform:translate(-50%,-50%)}
.ghostRackReticle::before{width:2px;height:70%}.ghostRackReticle::after{width:70%;height:2px}
.ghostRackHelp{position:absolute;left:50%;bottom:13.4%;transform:translateX(-50%);z-index:6;white-space:nowrap;pointer-events:none;padding:.5em .85em;border-radius:999px;border:1px solid rgba(154,255,205,.26);background:rgba(7,10,13,.72);color:#eafaf4;font:900 clamp(8px,.64vw,12px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.05em;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.ghostRackPads{position:absolute;left:50%;bottom:1.2%;transform:translateX(-50%);width:min(92%,860px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;z-index:6}
.ghostRackPad{min-height:48px;border-radius:14px;border:1px solid rgba(133,255,205,.28);background:linear-gradient(180deg,rgba(14,22,26,.96),rgba(4,9,11,.98));box-shadow:0 8px 14px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.04);color:#dcfff0;display:grid;place-items:center;gap:2px;padding:6px 2px;cursor:pointer}
.ghostRackPad span{font:900 clamp(12px,1.1vw,18px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#89ffd6}
.ghostRackPad b{font:900 clamp(8px,.72vw,12px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em}
.ghostRackPad:hover,.ghostRackPad:focus-visible{outline:none;border-color:rgba(178,255,224,.5);transform:translateY(-1px)}
.ghostObjective{background:linear-gradient(180deg,rgba(17,29,32,.86),rgba(8,12,16,.9));border-color:rgba(133,255,205,.22)}
.ghostObjective b{color:#98ffe0}
@media (pointer:coarse),(max-width:1100px){
.ghostRackHeader{left:8px;top:8px;padding:7px 9px}
.ghostRackReticle{right:8px;top:8px;width:38px;height:38px}
.ghostRackToast{top:8%;max-width:82%;text-align:center;padding:7px 10px}
.ghostRackHelp{top:.8%;bottom:auto;font-size:clamp(7px,1.16vw,10px);white-space:normal;text-align:center;max-width:86%}
.ghostRackPads{width:min(96%,900px);gap:5px;bottom:.8%}
.ghostRackPad{min-height:40px;border-radius:10px;padding:5px 1px}
.ghostRackPad span{font-size:clamp(10px,1.6vw,14px)}
.ghostRackPad b{font-size:clamp(7px,1vw,10px)}
}
/* v167 — Ghost in the Rack playfield lock. The incident is an absolute fill of
the shared game viewport; never let a large desktop layout leave it with a
stale intrinsic/partial height. */
.appStage[data-game="ghost"] .playfield{position:relative;min-height:0;height:auto;align-self:stretch}
.appStage[data-game="ghost"] .ghostRackGame{position:absolute;inset:0;width:100%;height:100%;min-width:100%;min-height:100%;max-width:100%;max-height:100%;overflow:hidden}
.appStage[data-game="ghost"] .ghostRackGame canvas{position:absolute;inset:0;width:100%!important;height:100%!important;min-width:100%;min-height:100%;display:block}
/* Ghost in the Rack — end-of-job engineering report */
.ghostRackReport{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:clamp(12px,1.7vw,26px);background:rgba(2,5,7,.48);backdrop-filter:brightness(.66) blur(.45px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .42s ease,visibility .42s ease}
.ghostRackReport.show{opacity:1;visibility:visible;pointer-events:auto}
.ghostRackReportPanel{position:relative;width:min(92%,1060px);max-height:91%;overflow:auto;padding:clamp(18px,1.8vw,28px);border:1px solid rgba(181,255,225,.30);border-radius:18px;background:linear-gradient(180deg,rgba(7,12,15,.90),rgba(8,15,18,.84));box-shadow:0 24px 60px rgba(0,0,0,.52),inset 0 0 0 1px rgba(255,255,255,.025);color:#eafff7;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.ghostRackReportKicker{font:900 clamp(11px,.84vw,15px)/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.13em;color:#83c9b3;text-align:center}
.ghostRackReportTitle{margin-top:7px;font:1000 clamp(28px,2.65vw,46px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.07em;text-align:center;color:#effff9;text-shadow:0 0 18px rgba(137,255,214,.16)}
.ghostRackReportGrade{position:absolute;right:clamp(18px,2vw,30px);top:clamp(16px,1.8vw,26px);width:clamp(70px,6.7vw,100px);height:clamp(70px,6.7vw,100px);display:grid;place-items:center;border:clamp(3px,.26vw,5px) solid rgba(255,76,76,.94);border-radius:50%;color:#ff5a5a;font:900 clamp(28px,3.1vw,48px)/1 "Comic Sans MS","Bradley Hand",cursive;transform:rotate(-8deg);text-shadow:0 1px 0 rgba(80,0,0,.25);box-shadow:inset 0 0 0 2px rgba(255,70,70,.14);letter-spacing:-.04em}
.ghostRackReportGrade::after{content:"";position:absolute;inset:-7px;border:2px solid rgba(255,76,76,.55);border-radius:47% 53% 51% 49%;transform:rotate(6deg)}
.ghostRackReportStatus{margin:10px auto 13px;width:max-content;max-width:72%;padding:6px 11px;border-radius:999px;border:1px solid rgba(137,255,214,.28);background:rgba(83,170,139,.10);font:1000 clamp(11px,.92vw,16px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;color:#9dffdc;text-align:center}
.ghostRackReportStats{margin-top:4px;border-top:1px solid rgba(153,255,215,.20);border-bottom:1px solid rgba(153,255,215,.16)}
.ghostRackReportStats>div{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(130px,.75fr) minmax(125px,.55fr);align-items:center;gap:18px;min-height:41px;padding:7px 10px;border-bottom:1px solid rgba(153,255,215,.075)}
.ghostRackReportStats>div:last-child{border-bottom:0}
.ghostRackReportStats span{font:900 clamp(10px,.80vw,14px)/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.065em;color:#eaf9f4}
.ghostRackReportStats strong{font:850 clamp(10px,.78vw,14px)/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#a9bdb6;text-align:right}
.ghostRackReportStats b{font:1000 clamp(12px,1vw,17px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#9dffdc;text-align:right}
.ghostRackReportStats .ghostRackReportHead{min-height:34px;background:rgba(137,255,214,.055);border-bottom:1px solid rgba(153,255,215,.16)}
.ghostRackReportStats .ghostRackReportHead span{font-size:clamp(9px,.72vw,12px);color:#7eb6a5}
.ghostRackReportStats .ghostRackReportHead span:nth-child(2),.ghostRackReportStats .ghostRackReportHead span:nth-child(3){text-align:right}
.ghostRackReportBonus{margin-top:11px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 22px;padding:9px 10px;border-bottom:1px solid rgba(153,255,215,.13)}
.ghostRackReportBonus>div{display:flex;justify-content:space-between;gap:12px;font:900 clamp(10px,.75vw,13px)/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.05em;color:#aabbb5}
.ghostRackReportBonus b{color:#9dffdc}
.ghostRackReportTotal{margin-top:11px;display:flex;align-items:end;justify-content:center;gap:18px}
.ghostRackReportTotal span{font:1000 clamp(11px,.9vw,15px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.10em;color:#afc8bf}
.ghostRackReportTotal b{font:1000 clamp(30px,3.25vw,54px)/.85 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#eafff7}
.ghostRackReportNote{margin:10px auto 0;max-width:820px;text-align:center;font:800 clamp(10px,.8vw,14px)/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#b8cbc4}
.ghostRackReportDone{display:block;margin:12px auto 0;min-width:min(100%,260px);padding:10px 18px;border-radius:12px;border:1px solid rgba(139,255,212,.38);background:linear-gradient(180deg,rgba(21,60,49,.96),rgba(10,31,27,.98));color:#eafff7;font:1000 clamp(12px,.9vw,16px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.34)}
.ghostRackReportDone:hover,.ghostRackReportDone:focus-visible{outline:none;border-color:rgba(190,255,232,.72);transform:translateY(-1px)}
.ghostRackGame.report-open .ghostRackHeader,.ghostRackGame.report-open .ghostRackHelp,.ghostRackGame.report-open .ghostRackPads,.ghostRackGame.report-open .ghostRackReticle{opacity:.20;transition:opacity .35s ease;pointer-events:none}
@media (max-width:900px),(pointer:coarse){
.ghostRackReport{padding:7px}
.ghostRackReportPanel{width:min(97%,1060px);max-height:95%;padding:13px;border-radius:13px}
.ghostRackReportGrade{right:12px;top:11px;width:58px;height:58px;font-size:25px;border-width:3px}
.ghostRackReportStatus{max-width:66%;margin-top:8px}
.ghostRackReportStats>div{grid-template-columns:minmax(0,1.3fr) minmax(92px,.72fr) minmax(88px,.58fr);gap:8px;min-height:29px;padding:4px 7px}
.ghostRackReportBonus{grid-template-columns:1fr 1fr;gap:3px 13px;padding:7px 8px}
.ghostRackReportNote{margin-top:7px}
.ghostRackReportDone{margin-top:8px;padding:9px 13px}
}
/* Ghost in the Rack — S.P.E.C.T.R.E. pre-simulation briefing and recognition guide */
.ghostRackIntro{position:absolute;inset:0;z-index:24;display:grid;place-items:center;padding:clamp(10px,1.3vw,22px);background:rgba(3,7,9,.72);backdrop-filter:blur(2px) brightness(.62);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility .28s ease}
.ghostRackIntro.show{opacity:1;visibility:visible;pointer-events:auto}
.ghostRackIntroCard{width:min(94%,1120px);height:min(86%,700px);max-height:calc(100% - 20px);display:grid;grid-template-columns:minmax(300px,44%) minmax(0,1fr);overflow:hidden;border-radius:20px;border:1px solid rgba(177,255,226,.30);background:#071014;box-shadow:0 28px 70px rgba(0,0,0,.68),inset 0 0 0 1px rgba(255,255,255,.025)}
.ghostRackIntroVisual{min-width:0;background-image:linear-gradient(90deg,rgba(5,10,13,.02) 0 58%,rgba(5,10,13,.88) 100%),url('../assets/ui/rack-go-boom-intro.webp');background-size:cover;background-position:24% center}
.ghostRackIntroBrief{display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:0;overflow:auto;padding:clamp(16px,2vw,32px);color:#eafff7;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:linear-gradient(180deg,rgba(7,15,18,.98),rgba(8,18,21,.96));scrollbar-width:thin;scrollbar-color:#31594e #050a0d}
.ghostRackIntroKicker{font:900 clamp(10px,.76vw,14px)/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;color:#86cdb7}
.ghostRackIntroBrief h2{margin:8px 0 3px;max-width:100%;font:1000 clamp(30px,3.25vw,56px)/.95 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.045em;color:#f3fff9;text-shadow:0 0 20px rgba(135,255,214,.16);white-space:nowrap;overflow:hidden;text-overflow:clip}
.ghostRackIntroLongName{max-width:100%;font:900 clamp(9px,.72vw,13px)/1.32 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.05em;color:#8cb5a8}
.ghostRackIntroSpeaker{margin-top:clamp(12px,1.35vw,20px);font:1000 clamp(10px,.82vw,14px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.09em;color:#9dffdc}
.ghostRackIntroBrief p{margin:7px 0 0;font:800 clamp(10px,.84vw,15px)/1.40 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#dbe9e4}
.ghostRackIntroActions{display:flex;gap:10px;margin-top:clamp(12px,1.4vw,20px);flex-wrap:wrap}
.ghostRackIntroActions button,.ghostRackIntelStart{min-height:46px;padding:0 20px;border-radius:12px;border:1px solid rgba(139,255,212,.38);background:linear-gradient(180deg,rgba(21,60,49,.96),rgba(10,31,27,.98));color:#eafff7;font:1000 clamp(11px,.86vw,15px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.07em;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.30)}
.ghostRackIntroActions button:hover,.ghostRackIntroActions button:focus-visible,.ghostRackIntelStart:hover,.ghostRackIntelStart:focus-visible{outline:none;border-color:rgba(190,255,232,.74);transform:translateY(-1px)}
.ghostRackIntroCards{background:linear-gradient(180deg,rgba(72,50,29,.98),rgba(38,25,14,.98))!important;border-color:rgba(255,207,126,.42)!important;color:#fff1d4!important}
@media (max-height:760px) and (min-width:901px){
.ghostRackIntroCard{height:min(92%,620px)}
.ghostRackIntroBrief{justify-content:flex-start;padding:14px 22px}
.ghostRackIntroBrief h2{font-size:clamp(28px,3vw,46px)}
.ghostRackIntroSpeaker{margin-top:10px}
.ghostRackIntroBrief p{font-size:clamp(10px,.76vw,13px);line-height:1.32}
.ghostRackIntroActions{margin-top:10px}
}
.ghostRackIntel{position:absolute;inset:0;z-index:2;display:none;place-items:center;padding:clamp(8px,1vw,16px);background:rgba(2,6,8,.95)}
.ghostRackIntel.show{display:grid}
.ghostRackIntelPanel{width:min(96%,1220px);height:min(92%,760px);max-height:calc(100% - 20px);min-height:0;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;padding:clamp(13px,1.3vw,20px);border-radius:18px;border:1px solid rgba(175,255,226,.28);background:linear-gradient(180deg,#081115,#071014);box-shadow:0 25px 60px rgba(0,0,0,.62);color:#eafff7}
.ghostRackIntelHead{display:flex;justify-content:space-between;align-items:end;gap:18px;padding:0 3px 9px;border-bottom:1px solid rgba(151,255,215,.15)}
.ghostRackIntelHead span{font:900 clamp(9px,.65vw,12px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.11em;color:#82c7b1}
.ghostRackIntelHead h3{margin:4px 0 2px;font:1000 clamp(20px,1.8vw,31px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.055em;color:#f1fff8}
.ghostRackIntelHead p{margin:0;font:800 clamp(9px,.7vw,12px)/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#99aba5}
.ghostRackIntelLegend{display:flex;gap:8px;flex:0 0 auto}.ghostRackIntelLegend b{padding:6px 9px;border-radius:999px;font:1000 clamp(8px,.6vw,11px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;border:1px solid rgba(255,104,104,.34);color:#ff9c9c;background:rgba(117,31,31,.18)}.ghostRackIntelLegend b+ b{border-color:rgba(127,255,202,.28);color:#9dffdc;background:rgba(33,103,79,.16)}
.ghostRackIntelGrid{min-height:0;overflow-y:scroll;overflow-x:hidden;display:block;padding:2px 9px 8px 2px;scrollbar-gutter:stable;scrollbar-width:auto;scrollbar-color:#4f776c #050a0d}
.ghostRackIntelGroup{display:grid;gap:9px;padding:5px 3px 16px}.ghostRackIntelGroup+.ghostRackIntelGroup{padding-top:15px;border-top:1px solid rgba(151,255,215,.18)}
.ghostRackIntelGroupHead{display:grid;grid-template-columns:minmax(190px,.36fr) minmax(0,1fr);align-items:center;gap:16px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.025);border-left:4px solid rgba(255,105,105,.72)}
.ghostRackIntelGroupHead>div{display:flex;align-items:center;gap:9px}.ghostRackIntelGroupHead b{font:1000 clamp(12px,.9vw,16px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.065em;color:#ff9b9b}.ghostRackIntelGroupHead span{padding:4px 7px;border-radius:999px;background:rgba(134,34,34,.23);font:1000 clamp(8px,.55vw,10px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;color:#ffc2c2}.ghostRackIntelGroupHead p{margin:0;font:800 clamp(9px,.68vw,12px)/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#9baca6}
.ghostRackIntelGroup.safeGroup .ghostRackIntelGroupHead{border-left-color:rgba(126,255,202,.65)}.ghostRackIntelGroup.safeGroup .ghostRackIntelGroupHead b{color:#98ffda}.ghostRackIntelGroup.safeGroup .ghostRackIntelGroupHead span{background:rgba(33,103,79,.20);color:#baffE5}
.ghostRackIntelCards{display:grid;grid-template-columns:repeat(7,minmax(92px,1fr));align-content:start;gap:9px}
.ghostRackIntelCard{display:grid;grid-template-rows:minmax(0,1fr) auto auto;min-width:0;min-height:0;padding:6px;border-radius:11px;border:1px solid rgba(255,255,255,.10);background:#0b1317;color:#eafff7;cursor:zoom-in;text-align:left;box-shadow:0 6px 14px rgba(0,0,0,.22)}
.ghostRackIntelCard:hover,.ghostRackIntelCard:focus-visible{outline:none;transform:translateY(-2px);border-color:rgba(181,255,224,.52);box-shadow:0 10px 18px rgba(0,0,0,.32)}
.ghostRackIntelCard img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:7px;background:#121b20}
.ghostRackIntelCard span{margin-top:6px;font:1000 clamp(7px,.5vw,9px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.07em;color:#ff9393}.ghostRackIntelCard.safe span{color:#8fffd3}
.ghostRackIntelCard b{margin-top:4px;min-height:2.3em;font:900 clamp(8px,.57vw,10px)/1.15 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#dfece7}
.ghostRackIntelStart{justify-self:center;min-width:min(100%,320px)}
.ghostRackIntelGrid::-webkit-scrollbar{width:13px}.ghostRackIntelGrid::-webkit-scrollbar-track{background:#050a0d;border-radius:999px}.ghostRackIntelGrid::-webkit-scrollbar-thumb{background:#4f776c;border:3px solid #050a0d;border-radius:999px}.ghostRackIntelGrid::-webkit-scrollbar-thumb:hover{background:#6aa08f}
.ghostRackCardZoom{position:absolute;inset:0;z-index:12;display:none;grid-template-columns:auto minmax(220px,380px);place-content:center;align-items:center;gap:clamp(18px,2vw,34px);padding:30px;background:rgba(0,0,0,.88);backdrop-filter:blur(4px)}
.ghostRackCardZoom.show{display:grid}
.ghostRackCardZoom img{display:block;max-width:min(36vw,430px);max-height:78vh;aspect-ratio:3/4;object-fit:contain;border-radius:15px;box-shadow:0 20px 50px #000d}
.ghostRackCardZoom>div{display:grid;gap:10px;color:#effff9;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.ghostRackCardZoom b{width:max-content;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,99,99,.35);background:rgba(118,32,32,.20);color:#ff9999;font:1000 clamp(9px,.75vw,13px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em}.ghostRackCardZoom b.safe{border-color:rgba(126,255,202,.32);background:rgba(37,109,83,.18);color:#94ffd8}
.ghostRackCardZoom strong{font:1000 clamp(22px,2.1vw,36px)/1.05 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em}.ghostRackCardZoom p{margin:0;font:800 clamp(12px,.95vw,16px)/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#c7d9d3}.ghostRackCardZoom small{font:850 clamp(8px,.6vw,11px)/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#758c84;letter-spacing:.05em}
.ghostRackCardZoomClose{position:absolute;right:20px;top:16px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(8,15,18,.9);color:#fff;font:700 30px/1 system-ui;cursor:pointer}
@media (max-width:900px){
.ghostRackIntro{padding:5px}.ghostRackIntroCard{width:98%;height:96%;grid-template-columns:34% minmax(0,1fr);border-radius:13px}.ghostRackIntroVisual{background-position:23% center}.ghostRackIntroBrief{padding:12px 14px}.ghostRackIntroBrief h2{font-size:clamp(26px,5vw,40px)}.ghostRackIntroSpeaker{margin-top:10px}.ghostRackIntroBrief p{margin-top:5px;font-size:clamp(9px,1.4vw,12px);line-height:1.32}.ghostRackIntroActions{margin-top:10px;gap:7px}.ghostRackIntroActions button{min-height:34px;padding:0 10px;font-size:clamp(8px,1.25vw,11px)}
.ghostRackIntel{padding:4px}.ghostRackIntelPanel{width:99%;height:96%;max-height:calc(100% - 8px);padding:8px;border-radius:11px}.ghostRackIntelHead h3{font-size:clamp(15px,2.5vw,23px)}.ghostRackIntelHead p{display:none}.ghostRackIntelGrid{padding-right:7px}.ghostRackIntelGroup{gap:6px;padding-bottom:10px}.ghostRackIntelGroupHead{grid-template-columns:1fr;gap:4px;padding:6px 8px}.ghostRackIntelGroupHead p{display:none}.ghostRackIntelCards{grid-template-columns:repeat(6,minmax(68px,1fr));gap:6px}.ghostRackIntelCard{padding:4px;border-radius:7px}.ghostRackIntelCard span{margin-top:4px}.ghostRackIntelStart{min-height:34px;padding:0 12px;font-size:10px}.ghostRackCardZoom{grid-template-columns:auto minmax(180px,300px);gap:16px;padding:18px}.ghostRackCardZoom img{max-height:82vh;max-width:36vw}.ghostRackCardZoomClose{right:10px;top:8px;width:36px;height:36px;font-size:24px}
}
/* Ghost S.P.E.C.T.R.E. mobile containment + fast Radio Guy type-on */
.ghostRackIntroTyped{min-height:0;color:#dbe9e4}
.ghostRackIntroTyped p{margin:7px 0 0;font:800 clamp(10px,.84vw,15px)/1.40 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#dbe9e4}
.ghostRackIntroTyped p:last-child::after{content:'';display:inline-block;width:.55em;height:1em;margin-left:3px;vertical-align:-.12em;background:#9dffdc;box-shadow:0 0 8px rgba(157,255,220,.45);animation:arcadeIntroCursor .72s steps(1,end) infinite}
.ghostRackIntroTyped.done p:last-child::after{display:none}
@media (max-width:900px),(pointer:coarse){
.ghostRackIntro{padding:4px;place-items:stretch}
.ghostRackIntroCard{align-self:center;justify-self:center;width:calc(100% - 6px);height:calc(100% - 6px);max-height:none;grid-template-columns:minmax(150px,34%) minmax(0,1fr);border-radius:11px}
.ghostRackIntroVisual{min-height:0;background-position:24% center}
.ghostRackIntroBrief{justify-content:flex-start;padding:10px 12px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.ghostRackIntroKicker{font-size:8px}.ghostRackIntroBrief h2{margin:5px 0 2px;font-size:clamp(22px,4.1vw,34px)}
.ghostRackIntroLongName{font-size:clamp(7px,1.12vw,10px);line-height:1.22}
.ghostRackIntroSpeaker{margin-top:8px;font-size:9px}
.ghostRackIntroTyped p{margin-top:4px;font-size:clamp(8px,1.18vw,11px);line-height:1.27}
.ghostRackIntroActions{position:sticky;bottom:-10px;z-index:3;margin-top:8px;padding:7px 0 2px;background:linear-gradient(180deg,transparent,#081215 28%);flex-wrap:nowrap}
.ghostRackIntroActions button{flex:1 1 0;min-width:0;min-height:32px;padding:0 8px;font-size:clamp(8px,1.2vw,10px)}
.ghostRackIntel{padding:3px;place-items:stretch}
.ghostRackIntelPanel{align-self:center;justify-self:center;width:calc(100% - 4px);height:calc(100% - 4px);max-height:none;padding:7px;gap:6px;border-radius:9px;grid-template-rows:auto minmax(0,1fr) auto}
.ghostRackIntelHead{align-items:center;gap:8px;padding-bottom:5px}
.ghostRackIntelHead span{font-size:7px}.ghostRackIntelHead h3{margin:2px 0 0;font-size:clamp(13px,2.2vw,19px)}
.ghostRackIntelLegend{gap:4px}.ghostRackIntelLegend b{padding:4px 6px;font-size:7px}
.ghostRackIntelGrid{overflow-y:scroll;overscroll-behavior:contain;scrollbar-gutter:stable;padding:0 8px 4px 0}
.ghostRackIntelGroup{gap:5px;padding:3px 2px 9px}.ghostRackIntelGroup+.ghostRackIntelGroup{padding-top:9px}
.ghostRackIntelGroupHead{grid-template-columns:1fr;padding:5px 7px;gap:2px}.ghostRackIntelGroupHead b{font-size:10px}.ghostRackIntelGroupHead span{font-size:7px;padding:3px 5px}
.ghostRackIntelCards{grid-template-columns:repeat(5,minmax(58px,1fr));gap:5px}
.ghostRackIntelCard{padding:3px;border-radius:6px}.ghostRackIntelCard img{border-radius:4px}.ghostRackIntelCard span{font-size:6px}.ghostRackIntelCard b{font-size:7px;min-height:2.2em}
.ghostRackIntelStart{min-height:31px;padding:0 10px;font-size:9px}
.ghostRackIntelGrid::-webkit-scrollbar{width:10px}.ghostRackIntelGrid::-webkit-scrollbar-thumb{border-width:2px}
.ghostRackCardZoom{grid-template-columns:auto minmax(145px,34vw);gap:10px;padding:9px 40px 9px 9px}
.ghostRackCardZoom img{max-width:42vw;max-height:88vh;border-radius:9px}.ghostRackCardZoom>div{gap:6px}
.ghostRackCardZoom strong{font-size:clamp(15px,3vw,24px)}.ghostRackCardZoom p{font-size:clamp(9px,1.55vw,12px);line-height:1.3}.ghostRackCardZoom small{font-size:7px}
}
@media (max-width:700px) and (orientation:portrait){
.ghostRackIntroCard{grid-template-columns:1fr;grid-template-rows:minmax(100px,34%) minmax(0,1fr)}
.ghostRackIntroVisual{background-position:32% 28%;background-image:linear-gradient(180deg,rgba(5,10,13,.02) 0 42%,rgba(5,10,13,.72) 80%,rgba(5,10,13,.96) 100%),url('../assets/ui/rack-go-boom-intro.webp')}
.ghostRackIntroBrief{padding:8px 10px}.ghostRackIntroBrief h2{font-size:clamp(24px,8vw,38px)}
.ghostRackIntroTyped p{font-size:clamp(9px,2.6vw,12px)}
.ghostRackIntelCards{grid-template-columns:repeat(3,minmax(72px,1fr))}
.ghostRackIntelLegend{display:none}
.ghostRackCardZoom{grid-template-columns:1fr;grid-template-rows:minmax(0,58vh) auto;overflow-y:auto;place-content:start center;padding:44px 12px 14px}
.ghostRackCardZoom img{justify-self:center;max-width:min(70vw,310px);max-height:55vh}
.ghostRackCardZoom>div{width:min(92vw,420px);justify-self:center}
}
/* Ghost S.P.E.C.T.R.E. V13 — isolate type-on copy from controls */
.ghostRackIntroBrief{
display:grid;
grid-template-rows:auto auto auto auto minmax(0,1fr) auto;
align-content:stretch;
justify-content:initial;
overflow:hidden;
}
.ghostRackIntroTyped{
min-height:0;
overflow-y:auto;
overscroll-behavior:contain;
scrollbar-gutter:stable;
margin-top:10px;
padding:10px 12px;
border:1px solid rgba(151,255,215,.15);
border-radius:10px;
background:rgba(0,0,0,.22);
box-shadow:inset 0 0 20px rgba(0,0,0,.18);
scrollbar-width:thin;
scrollbar-color:#31594e #050a0d;
}
.ghostRackIntroTyped::-webkit-scrollbar{width:9px}
.ghostRackIntroTyped::-webkit-scrollbar-track{background:#050a0d;border-radius:999px}
.ghostRackIntroTyped::-webkit-scrollbar-thumb{background:#31594e;border:2px solid #050a0d;border-radius:999px}
.ghostRackIntroActions{
position:static;
z-index:auto;
margin-top:10px;
padding:0;
background:none;
flex:0 0 auto;
}
.ghostRackIntro.guideOpen .ghostRackIntroCard{visibility:hidden;pointer-events:none}
.ghostRackIntro.guideOpen .ghostRackIntel{z-index:8}
@media (max-width:900px),(pointer:coarse){
.ghostRackIntroBrief{overflow:hidden;grid-template-rows:auto auto auto auto minmax(0,1fr) auto}
.ghostRackIntroTyped{margin-top:6px;padding:6px 8px}
.ghostRackIntroActions{position:static;bottom:auto;z-index:auto;margin-top:6px;padding:0;background:none}
}
@media (max-width:700px) and (orientation:portrait){
.ghostRackIntroBrief{min-height:0}
.ghostRackIntroTyped{min-height:72px}
}
/* Ghost S.P.E.C.T.R.E. V16 — mobile lightbox containment */
@media (max-width:900px),(pointer:coarse){
.ghostRackCardZoom{
inset:0;
width:100%;
height:100%;
box-sizing:border-box;
overflow:hidden;
grid-template-columns:minmax(0,1fr) minmax(150px,34vw);
grid-template-rows:minmax(0,1fr);
place-content:stretch;
align-items:center;
gap:10px;
padding:44px 12px 12px;
}
.ghostRackCardZoom img{
justify-self:center;
align-self:center;
width:auto;
height:auto;
max-width:100%;
max-height:100%;
object-fit:contain;
}
.ghostRackCardZoom>div{
min-width:0;
min-height:0;
max-height:100%;
overflow-y:auto;
overscroll-behavior:contain;
padding-right:4px;
}
.ghostRackCardZoomClose{
z-index:2;
}
}
@media (max-width:700px) and (orientation:portrait){
.ghostRackCardZoom{
grid-template-columns:minmax(0,1fr);
grid-template-rows:minmax(0,68%) minmax(0,32%);
gap:8px;
padding:42px 10px 10px;
}
.ghostRackCardZoom img{
justify-self:center;
align-self:center;
max-width:min(76vw,320px);
max-height:100%;
}
.ghostRackCardZoom>div{
width:min(94vw,430px);
justify-self:center;
align-self:stretch;
max-height:100%;
overflow-y:auto;
padding:2px 4px 6px 0;
}
}