/* TREX.EXE — styles */
:root{
  --bg:#000; --fg:#f5f5f2; --dim:#8b8b86; --line:rgba(255,255,255,.16); --line2:rgba(255,255,255,.32);
  --mag:#ff2bd6; --tox:#39ff6a; --cy:#22e6ff; --red:#ff3b4a; --gold:#ffd23b;
  --neon:#ffffff; --neon-glow:rgba(255,255,255,.85); --neon-far:rgba(200,210,255,.42);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --disp:"Unbounded","JetBrains Mono",system-ui,sans-serif;
  --vt:"VT323","JetBrains Mono",monospace;
  --mbh:34px; --tbh:46px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font:14px/1.55 var(--mono);overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
::selection{background:var(--fg);color:#000}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.acc{color:var(--tox)} .dim{color:var(--dim)} .warn{color:var(--gold)}
.skip{position:absolute;left:-999px;top:8px;background:var(--fg);color:#000;padding:8px 12px;z-index:999}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--tox);outline-offset:2px}

/* ---------- overlays ---------- */
.fx-noise{position:fixed;inset:-50%;z-index:80;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.fx-scan{position:fixed;inset:0;z-index:81;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.22) 3px,transparent 4px)}
.fx-scan::after{content:"";position:absolute;left:0;right:0;height:24vh;top:-24vh;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.035),transparent);animation:sweep 8s linear infinite}
@keyframes sweep{to{top:110vh}}
.fx-vignette{position:fixed;inset:0;z-index:82;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,transparent 50%,rgba(0,0,0,.7) 100%)}

/* ---------- boot ---------- */
#boot{position:fixed;inset:0;z-index:200;background:#000;display:flex;flex-direction:column;justify-content:flex-end;padding:7vh 7vw;transition:opacity .5s ease,visibility .5s}
#boot.done{opacity:0;visibility:hidden}
#boot{animation:boot-failsafe .3s ease 6s forwards}
@keyframes boot-failsafe{to{opacity:0;visibility:hidden}}
#boot-log{font:400 clamp(15px,2.6vw,22px)/1.25 var(--vt);color:#e9e9e4;white-space:pre-wrap;text-shadow:0 0 6px rgba(255,255,255,.55);max-width:980px;width:100%;min-height:50vh;display:flex;flex-direction:column;justify-content:flex-end}
#boot-log .ok{color:var(--tox);text-shadow:0 0 8px rgba(57,255,106,.6)}
#boot-log .nf{color:var(--gold);text-shadow:0 0 8px rgba(255,210,59,.5)}
#boot-log .w{color:var(--mag);text-shadow:0 0 10px rgba(255,43,214,.7)}
#boot-log .big{font-size:1.6em;color:#fff}
#boot-bar{margin-top:18px;width:min(520px,86vw);height:14px;border:1px solid var(--line2);padding:2px}
#boot-bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#fff 0 10px,transparent 10px 13px);box-shadow:0 0 12px rgba(255,255,255,.6);transition:width .18s linear}
#boot-skip{position:absolute;top:18px;right:18px;border:1px solid var(--line);color:var(--dim);font:12px var(--mono);padding:6px 11px}
#boot-skip:hover{color:#fff;border-color:#fff}
body.booting #desk{opacity:0}
#desk{position:fixed;inset:0;overflow:hidden;transition:opacity .35s}
body.flash::after{content:"";position:fixed;inset:0;z-index:150;background:#fff;pointer-events:none;animation:flash .5s ease-out forwards}
@keyframes flash{from{opacity:.9}to{opacity:0}}

/* ---------- wallpaper ---------- */
.wp-grid{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.2px);background-size:26px 26px;mask-image:radial-gradient(ellipse at 50% 60%,#000 25%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at 50% 60%,#000 25%,transparent 80%)}
.wp-word{position:absolute;left:50%;bottom:calc(var(--tbh) - 2vw);transform:translateX(-50%);font:900 clamp(90px,22vw,380px)/.8 var(--disp);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);white-space:nowrap;user-select:none;pointer-events:none}

/* ---------- menubar ---------- */
.menubar{position:absolute;top:0;left:0;right:0;height:var(--mbh);z-index:60;display:flex;align-items:center;gap:6px;padding:0 10px;background:rgba(0,0,0,.82);border-bottom:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:12px;letter-spacing:.04em}
.menubar button,.menubar span{white-space:nowrap}
.mb-logo{display:flex;align-items:center;gap:7px;padding:4px 8px;font-weight:800;letter-spacing:.18em}
.mb-logo svg,#start svg{width:18px;height:18px;fill:#fff;filter:drop-shadow(0 0 3px #fff)}
.mb-menu{display:flex;gap:2px}
.mb-menu button,#snd{padding:5px 9px;color:#cfcfca;border-radius:2px}
.mb-menu button:hover,#snd:hover,.mb-logo:hover{background:#fff;color:#000}
.mb-right{margin-left:auto;display:flex;align-items:center;gap:12px;color:var(--dim)}
#snd span{color:var(--dim)} #snd[aria-pressed="true"] span{color:var(--tox)}
.mb-chip{border:1px solid var(--line);padding:2px 7px;color:#ddd}
.mb-batt i{display:inline-block;width:22px;height:9px;border:1px solid #aaa;margin-left:4px;vertical-align:-1px;position:relative;background:linear-gradient(90deg,var(--tox) 18%,transparent 18%)}
.mb-batt i::after{content:"";position:absolute;right:-4px;top:2px;width:2px;height:3px;background:#aaa}
#clock{color:#eee;font-variant-numeric:tabular-nums}

/* ---------- hero ---------- */
.hero{position:absolute;left:clamp(16px,4vw,64px);top:calc(var(--mbh) + clamp(18px,5vh,56px));z-index:5;max-width:min(680px,52vw);pointer-events:none}
.hero a,.hero button{pointer-events:auto}
.kicker{font-size:12px;color:#cfcfca;letter-spacing:.04em;margin-bottom:14px}
.glitch{position:relative;font:900 clamp(40px,6.4vw,104px)/.9 var(--disp);letter-spacing:-.035em;text-transform:uppercase;color:#fff;
  text-shadow:0 0 2px #fff,0 0 18px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.18)}
.glitch span{display:block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:0;text-shadow:none;white-space:normal}
.glitch::before{color:var(--mag);mix-blend-mode:screen;animation:gl1 4.2s infinite steps(1)}
.glitch::after{color:var(--cy);mix-blend-mode:screen;animation:gl2 3.7s infinite steps(1)}
@keyframes gl1{0%,88%,100%{opacity:0;transform:none}89%{opacity:.85;transform:translate(-7px,2px);clip-path:inset(10% 0 62% 0)}91%{opacity:.85;transform:translate(5px,-2px);clip-path:inset(52% 0 22% 0)}93%{opacity:0}}
@keyframes gl2{0%,82%,100%{opacity:0;transform:none}83%{opacity:.85;transform:translate(7px,-1px);clip-path:inset(66% 0 6% 0)}85%{opacity:.85;transform:translate(-5px,2px);clip-path:inset(6% 0 72% 0)}87%{opacity:0}}
.glitch.burst::before{animation:gl1 .3s 3 steps(1)} .glitch.burst::after{animation:gl2 .3s 3 steps(1)}
/* glitch pseudo-elements hold the text as one line flow; hide them on very narrow to avoid misalign */
.sub{margin-top:clamp(14px,2.2vh,24px);font:600 clamp(15px,1.6vw,21px)/1.35 var(--mono);color:#f0f0ea}
.say{margin-top:10px;font-size:clamp(12px,1.05vw,14px);color:#bdbdb7;min-height:1.6em}
.say #say{color:#fff}
.caret{color:var(--tox);animation:blink 1s steps(1) infinite;margin-left:2px}
@keyframes blink{50%{opacity:0}}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(18px,3vh,28px)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font:700 12.5px/1 var(--mono);letter-spacing:.07em;padding:13px 17px;border:1px solid var(--line2);color:#fff;background:rgba(0,0,0,.6);overflow:hidden;transition:color .18s,border-color .18s,box-shadow .25s,transform .15s;white-space:nowrap}
.btn span{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;background:#fff;transform:translateX(-101%);transition:transform .32s cubic-bezier(.7,0,.2,1)}
.btn:hover{color:#000;border-color:#fff;box-shadow:0 0 22px rgba(255,255,255,.35)} .btn:hover::before{transform:none}
.btn:active{transform:scale(.97)}
.btn.primary{border-color:var(--tox);color:var(--tox);box-shadow:0 0 0 1px rgba(57,255,106,.15),0 0 24px rgba(57,255,106,.18)}
.btn.primary::before{background:var(--tox)} .btn.primary:hover{color:#000;border-color:var(--tox);box-shadow:0 0 30px rgba(57,255,106,.5)}
.btn.sm{padding:9px 12px;font-size:11px}
.chip{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:11px;letter-spacing:.12em;color:#cfcfca;border:1px dashed var(--line2);padding:6px 10px;background:rgba(0,0,0,.5)}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}

/* ---------- icons ---------- */
.icons{position:absolute;right:clamp(8px,1.4vw,20px);top:calc(var(--mbh) + 16px);z-index:6;display:grid;gap:6px}
.ico{display:flex;flex-direction:column;align-items:center;gap:5px;width:84px;padding:8px 4px;border:1px solid transparent;font-size:10px;letter-spacing:.06em;color:#ddd;border-radius:3px;transition:background .15s,border-color .15s}
.ico svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(255,255,255,.7));transition:transform .2s}
.ico circle{fill:#fff}
.ico:hover,.ico:focus-visible{background:rgba(255,255,255,.07);border-color:var(--line)}
.ico:hover svg{transform:translateY(-2px) rotate(-4deg)}
.ico span{background:#000;padding:0 3px}

/* ---------- TREX ---------- */
#rex{position:absolute;left:0;bottom:calc(var(--tbh) - 1px);z-index:30;width:var(--rex);height:var(--rex);pointer-events:none;will-change:transform;--rex:min(66vh,720px)}
.rex-rig{position:absolute;inset:0;transform-origin:50% 97%}
#rex-svg{width:100%;height:100%;display:block;overflow:visible;
  filter:drop-shadow(0 0 1.6px var(--neon)) drop-shadow(0 0 9px var(--neon-glow)) drop-shadow(0 0 32px var(--neon-far))}
.rex-fill{fill:var(--neon)}
#rex-hit{position:absolute;left:38%;top:9%;width:52%;height:34%;pointer-events:auto;cursor:pointer;border-radius:40%;touch-action:manipulation}
#rex-hit:focus{outline:none}
#rex.on .rex-rig{animation:neonon 1.1s steps(1) both}
@keyframes neonon{0%{opacity:0}8%{opacity:.85}12%{opacity:.05}22%{opacity:1}26%{opacity:.25}34%{opacity:1}100%{opacity:1}}
#rex.sleep #rex-eye{transform-box:fill-box;transform-origin:center;transform:scaleY(.12)}
#rex-props .prop-t{font:900 44px var(--disp);letter-spacing:-.02em}
body.nom #desk{cursor:none}

/* ---------- windows ---------- */
#wins{position:absolute;inset:0;z-index:20;pointer-events:none}
.win{position:absolute;left:0;top:0;width:360px;display:none;flex-direction:column;pointer-events:auto;background:rgba(6,6,6,.88);border:1px solid var(--line2);
  box-shadow:0 0 0 1px #000,0 24px 70px rgba(0,0,0,.75),0 0 30px rgba(255,255,255,.04);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);will-change:transform;transform-origin:50% 50%}
.win.open{display:flex}
.win.min{display:none}
.win.active{border-color:rgba(255,255,255,.7);box-shadow:0 0 0 1px #000,0 28px 80px rgba(0,0,0,.8),0 0 26px rgba(255,255,255,.14)}
.win.pop{animation:pop .28s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{opacity:0;scale:.85}to{opacity:1;scale:1}}
.win-bar{display:flex;align-items:center;gap:10px;height:28px;padding:0 6px 0 10px;border-bottom:1px solid var(--line);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.0) 0 3px,rgba(255,255,255,.07) 3px 4px)}
.win.active .win-bar{background:repeating-linear-gradient(to bottom,rgba(255,255,255,.0) 0 3px,rgba(255,255,255,.2) 3px 4px)}
.win-bar:active{cursor:grabbing}
.win-title{font-size:10.5px;font-weight:800;letter-spacing:.14em;background:#060606;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.win-btns{margin-left:auto;display:flex;gap:4px;background:#060606;padding-left:4px}
.win-btns button{width:18px;height:18px;border:1px solid var(--line2);font-size:11px;line-height:14px;color:#ccc}
.win-btns button:hover{background:#fff;color:#000}
.win-btns button[data-act="close"]:hover{background:var(--red);border-color:var(--red);color:#000}
.win-body{padding:14px 16px 16px;overflow:auto;max-height:calc(100svh - var(--mbh) - var(--tbh) - 60px);scrollbar-width:thin;scrollbar-color:#555 transparent}
.win.max{transform:none!important;left:0;top:var(--mbh);width:100%!important;height:calc(100% - var(--mbh) - var(--tbh));z-index:5}
.win.max .win-body{max-height:none;flex:1}
.win-cracks{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .15s;mix-blend-mode:screen;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><g fill='none' stroke='white' stroke-width='.35' vector-effect='non-scaling-stroke'><path d='M62 38 L48 10 M62 38 L90 22 M62 38 L98 52 M62 38 L74 80 M62 38 L40 66 M62 38 L8 44 M55 24 L66 18 M78 46 L84 60 M50 50 L46 58 M70 30 L80 34'/></g></svg>") center/100% 100% no-repeat}
.win[data-dmg="1"] .win-cracks{opacity:.45}
.win[data-dmg="2"] .win-cracks{opacity:.95;filter:drop-shadow(0 0 2px #fff)}
.win[data-dmg="2"]{animation:jitter .18s steps(2) 3}
@keyframes jitter{50%{translate:2px -1px}}
.shard{position:fixed;left:0;top:0;pointer-events:none;z-index:70;will-change:transform,opacity}
.shard .win{display:flex!important;position:absolute;transform:none!important;left:0;top:0}

/* about */
.t-cmd{color:var(--tox);font-size:12px;margin-bottom:8px}
.lead{font:700 15px/1.4 var(--mono);color:#fff;margin-bottom:12px}
.spec{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:12.5px;margin-bottom:12px}
.spec dt{color:var(--dim);letter-spacing:.1em;font-size:11px;padding-top:1px}
.spec dd{color:#f2f2ee}
.spec a,.lnk{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px;text-align:left}
.spec a:hover,.lnk:hover{color:var(--tox)}
.spec.sm{font-size:11.5px;margin:10px 0}
.fine{font-size:10.5px;line-height:1.55;color:#9c9c96;border-top:1px dashed var(--line);padding-top:10px}
.fine b{color:#ddd}
/* genesis */
.genesis img{display:block;width:100%;height:auto;border:1px solid var(--line);background:#000}
.row{display:flex;gap:8px;flex-wrap:wrap}
/* promo */
.win-body.promo{padding:0;background:#000;position:relative;display:flex;align-items:center;justify-content:center;min-height:0}
.promo video{display:block;width:100%;height:auto;max-height:100%;aspect-ratio:16/9;background:#000;object-fit:contain;-webkit-touch-callout:none}
.promo-play{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);border:0;color:#fff;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.promo-play[hidden]{display:none!important}
.promo-play span{font:700 14px/1 var(--mono);letter-spacing:.14em;padding:16px 22px;border:1px solid #fff;background:rgba(0,0,0,.7);box-shadow:0 0 24px rgba(255,255,255,.25)}
@media (max-width:760px){
  .win.max .win-body.promo{height:100%;overflow:hidden}
  .promo video{width:100%;max-height:100%;height:auto}
  .promo-play span{min-height:48px;display:inline-flex;align-items:center}
}
/* trash */
.trash ul{list-style:none;display:grid;gap:2px}
.trash li button{display:flex;justify-content:space-between;width:100%;padding:7px 8px;font-size:12.5px;text-align:left;border:1px solid transparent}
.trash li button:hover{background:#fff;color:#000}
.trash li span{color:var(--dim)}
.t-err{margin-top:10px;font-size:12px;color:var(--red);min-height:1.5em}

/* arcade */
.win-body.arcade{padding:10px;position:relative}
.ar-hud{display:flex;gap:16px;font-size:11px;letter-spacing:.1em;color:#cfcfca;padding:0 2px 8px}
.ar-hud b{color:#fff;font-variant-numeric:tabular-nums}
.ar-hud .dim{margin-left:auto}
#ar-cv{display:block;width:100%;height:auto;aspect-ratio:640/240;background:#000;border:1px solid var(--line);touch-action:manipulation;cursor:pointer}
.ar-over{position:absolute;left:10px;right:10px;top:34px;bottom:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(0,0,0,.72);backdrop-filter:blur(2px);text-align:center}
.ar-over[hidden]{display:none}
.ar-rekt{font:900 clamp(32px,5vw,50px)/1 var(--disp);color:var(--red);text-shadow:0 0 18px rgba(255,59,74,.8)}
#ar-msg{font-size:12px;color:#ddd}
.ar-btns{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap;justify-content:center}

/* factory */
.win-body.factory{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:14px;align-items:start;overflow:hidden}
.mf-stage{min-width:0}
#mf-cv{width:100%;height:auto;aspect-ratio:1;border:1px solid var(--line);display:block;background:#000;touch-action:manipulation;-webkit-transform:translateZ(0);transform:translateZ(0)}
.mf-ui{min-width:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;max-height:100%}
.mf-h{font-size:10px;letter-spacing:.16em;color:var(--dim);margin:2px 0 6px}
.mf-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.mf-row.act{margin-top:12px;gap:6px}
.tg{font-size:10.5px;letter-spacing:.06em;padding:6px 8px;border:1px solid var(--line2);color:#ddd;transition:all .15s}
.tg:hover{border-color:#fff;color:#fff}
.tg[aria-pressed="true"]{background:#fff;color:#000;border-color:#fff;box-shadow:0 0 14px rgba(255,255,255,.4)}
.sw{width:24px;height:24px;border:1px solid var(--line2);border-radius:50%;position:relative}
.sw[aria-pressed="true"]{outline:2px solid #fff;outline-offset:2px}
#mf-cap{width:100%;background:#000;border:1px solid var(--line2);color:#fff;font:600 12px var(--mono);padding:8px 9px;text-transform:uppercase;letter-spacing:.05em}
#mf-cap:focus{outline:none;border-color:var(--tox)}

/* ---------- taskbar ---------- */
.taskbar{position:absolute;left:0;right:0;bottom:0;height:var(--tbh);z-index:60;display:flex;align-items:center;gap:8px;padding:0 8px;background:rgba(0,0,0,.9);border-top:1px solid var(--line2);box-shadow:0 -1px 0 #000,0 -10px 40px rgba(255,255,255,.035)}
.taskbar::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);opacity:.5}
#start{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;border:1px solid var(--line2);font-weight:800;font-size:12px;letter-spacing:.14em}
#start:hover,#start[aria-expanded="true"]{background:#fff;color:#000}
#start:hover svg,#start[aria-expanded="true"] svg{fill:#000;filter:none}
#tasks{display:flex;gap:5px;min-width:0;overflow:hidden}
#tasks button{height:30px;padding:0 10px;border:1px solid var(--line);font-size:10.5px;letter-spacing:.06em;color:#bbb;white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis}
#tasks button.active{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
#tasks button.isMin{opacity:.55;border-style:dashed}
.news{flex:1;min-width:60px;overflow:hidden;height:100%;display:flex;align-items:center;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.news-in{white-space:nowrap;font-size:11px;letter-spacing:.08em;color:#9a9a94;animation:news 60s linear infinite;padding-left:100%}
.news-in b{color:#fff;font-weight:600}
@keyframes news{to{transform:translateX(-100%)}}
.tb-link{font-size:11px;color:#ddd;text-decoration:none;border-left:1px solid var(--line);padding-left:10px}
.tb-link:hover{color:var(--tox)}
#startmenu{position:absolute;left:8px;bottom:calc(var(--tbh) + 6px);z-index:65;width:250px;background:rgba(5,5,5,.96);border:1px solid #fff;box-shadow:0 0 30px rgba(255,255,255,.15),0 20px 60px #000;padding:6px;display:grid}
#startmenu[hidden]{display:none}
.sm-head{font:900 13px var(--disp);padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.sm-head span{display:block;font:400 10px var(--mono);color:var(--dim);letter-spacing:.1em;margin-top:3px}
#startmenu button,#startmenu a{text-align:left;padding:8px 10px;font-size:12px;letter-spacing:.06em;text-decoration:none}
#startmenu button:hover,#startmenu a:hover{background:#fff;color:#000}
#startmenu hr{border:0;border-top:1px solid var(--line);margin:4px 0}

/* ---------- fx ---------- */
#fx{position:absolute;inset:0;z-index:55;pointer-events:none;overflow:hidden}
.p{position:absolute;left:0;top:0;font:900 26px var(--disp);will-change:transform,opacity}
.bubble{position:absolute;left:0;top:0;font:900 clamp(18px,2.3vw,30px)/1 var(--disp);letter-spacing:-.02em;padding:10px 14px;background:#000;color:#fff;border:2px solid #fff;box-shadow:0 0 18px rgba(255,255,255,.55),inset 0 0 12px rgba(255,255,255,.15);white-space:nowrap;transform-origin:0 100%}
.bubble.sm{font:700 13px/1.3 var(--mono);letter-spacing:0;padding:8px 11px;border-width:1px;white-space:normal;max-width:260px}
.bubble::after{content:"";position:absolute;left:14px;bottom:-9px;width:14px;height:14px;background:#000;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:skewX(30deg) rotate(45deg)}
.bubble.sm::after{border-width:1px;width:10px;height:10px;bottom:-6px}
.ring{position:absolute;left:0;top:0;width:40px;height:40px;margin:-20px 0 0 -20px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 22px #fff,inset 0 0 18px rgba(255,255,255,.6)}
.meteor{position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 18px 6px rgba(255,140,60,.9),0 0 50px 12px rgba(255,59,74,.5)}
.meteor::after{content:"";position:absolute;right:7px;bottom:7px;width:190px;height:3px;transform-origin:100% 50%;transform:rotate(var(--ang,-35deg));background:linear-gradient(90deg,transparent,rgba(255,170,90,.95));filter:blur(1px)}
.banner{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font:900 clamp(30px,7vw,110px)/.9 var(--disp);letter-spacing:-.04em;color:#fff;text-align:center;white-space:nowrap;text-shadow:0 0 4px #fff,0 0 30px rgba(255,255,255,.8),0 0 90px rgba(255,43,214,.6)}
.zz{position:absolute;font:900 22px var(--disp);color:#fff;text-shadow:0 0 10px #fff}
#dip{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) rotate(-6deg);z-index:56;pointer-events:none;font:900 clamp(44px,10vw,170px)/.9 var(--disp);letter-spacing:-.04em;color:#eaffef;white-space:nowrap;opacity:0;
  -webkit-text-stroke:2px var(--tox);text-shadow:0 0 6px var(--tox),0 0 28px var(--tox),0 0 90px rgba(57,255,106,.7)}
#dip.on{animation:dip 6s steps(1) forwards}
@keyframes dip{0%{opacity:0}4%{opacity:1}7%{opacity:.1}10%{opacity:1}13%{opacity:.3}16%,88%{opacity:1}92%{opacity:.2}95%{opacity:1}100%{opacity:0}}
#desk.shake{animation:shake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(5px,-3px)}30%,50%,70%{transform:translate(-9px,4px)}40%,60%{transform:translate(9px,-4px)}}
#toast{position:fixed;left:50%;bottom:calc(var(--tbh) + 18px);transform:translate(-50%,20px);z-index:120;background:#000;border:1px solid #fff;padding:9px 14px;font-size:12px;letter-spacing:.04em;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:0 0 20px rgba(255,255,255,.25);max-width:90vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
.shut{position:fixed;inset:0;z-index:190;background:#000;display:flex;align-items:center;justify-content:center;text-align:center;font:400 clamp(20px,3vw,30px)/1.3 var(--vt);color:#fff;padding:20px;text-shadow:0 0 8px #fff}

/* ---------- responsive ---------- */
@media (max-width:1100px){.hero{max-width:min(600px,60vw)}}
@media (max-width:760px){
  :root{--mbh:38px;--tbh:50px}
  .hide-s{display:none!important}
  .mb-menu button{padding:5px 7px}
  .mb-logo b{display:none}
  .hero{left:16px;right:16px;max-width:none;top:calc(var(--mbh) + 16px)}
  .kicker{font-size:10.5px;margin-bottom:10px}
  .kicker .dim{display:block}
  .glitch{font-size:clamp(34px,11.4vw,58px)}
  .glitch::before,.glitch::after{display:none}
  .sub{font-size:14px;margin-top:10px}
  .say{font-size:11.5px}
  .cta{gap:7px;margin-top:14px}
  .cta .btn{padding:11px 12px;font-size:11px;flex:1 1 auto}
  .cta .btn:nth-child(3){display:none}
  .chip{margin-top:12px;font-size:9.5px;letter-spacing:.08em}
  .icons{display:none}
  #rex{--rex:min(48svh,96vw)}
  .wp-word{bottom:calc(var(--tbh) + 4px)}
  .win{width:calc(100vw - 20px)!important}
  .win-body{max-height:calc(100svh - var(--mbh) - var(--tbh) - 90px)}
  .win-body.factory{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:6px;padding:8px 10px 10px;overflow:hidden;max-height:none;height:100%}
  .mf-stage{display:flex;justify-content:center;flex:0 0 auto}
  #mf-cv{max-width:min(160px,42vw);margin:0 auto}
  .mf-ui{display:flex;flex-direction:column;gap:0;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding-bottom:4px}
  .mf-row{gap:8px}
  .tg{font-size:12px;padding:10px 12px;min-height:40px;touch-action:manipulation}
  .sw{width:36px;height:36px;touch-action:manipulation}
  .mf-row.act{position:sticky;bottom:0;margin-top:auto;padding-top:8px;background:linear-gradient(180deg,transparent,rgba(6,6,6,.96) 30%);gap:8px}
  .mf-row.act .btn{flex:1 1 auto;min-height:48px;touch-action:manipulation}
  #mf-cap{font-size:16px;padding:12px 10px}
  .win-body{ -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y }
  .win.max{left:0!important;top:var(--mbh)!important;width:100%!important;height:calc(100% - var(--mbh) - var(--tbh))!important;transform:none!important;border-radius:0;display:flex;flex-direction:column;z-index:50!important}
  .win.max .win-body{max-height:none;overflow:hidden;flex:1;min-height:0}
  .win.max .win-body.factory{max-height:none;height:100%}
  .news{display:none}
  #tasks{flex:1}
  #start{padding:0 10px}
}
@media (max-height:620px) and (min-width:761px){.glitch{font-size:clamp(34px,5vw,72px)}#rex{--rex:min(60vh,520px)}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .fx-noise,.fx-scan::after,.glitch::before,.glitch::after,.news-in,.chip i,.caret{animation:none!important}
  .news-in{padding-left:0}
  #rex.on .rex-rig{animation:none}
  #desk.shake{animation:none}
  .win.pop{animation:none}
  .btn::before{transition:none}
  html{scroll-behavior:auto}
}
/* mobile: windows are full-width sheets — keep TREX behind them */
@media (max-width:760px){
  #rex{z-index:8}
  .win.open{z-index:40}
  .win.max{z-index:50!important}
  .win-bar{height:44px;padding:0 8px 0 12px;touch-action:manipulation;cursor:default}
  .win-title{font-size:11px;pointer-events:none}
  .win-btns{gap:6px;padding:4px;position:relative;z-index:2}
  .win-btns button{
    width:40px;height:40px;font-size:22px;line-height:38px;
    border:1px solid var(--line2);touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(255,255,255,.15);
  }
  .win-btns button[data-act="close"]{border-color:var(--red);color:#fff;background:rgba(255,59,74,.15)}
  /* hide min/max on phones — only close */
  .win-btns button[data-act="min"],
  .win-btns button[data-act="max"]{display:none}
}


/* ---------- lite / mobile perf ---------- */
html.lite #rex-svg{filter:drop-shadow(0 0 2px var(--neon)) drop-shadow(0 0 10px var(--neon-glow))}
html.lite .win{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(6,6,6,.94)}
html.lite .menubar{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.92)}
html.lite .ar-over{backdrop-filter:none;-webkit-backdrop-filter:none}
html.lite .ico svg{filter:none}
html.lite #rex{--rex:min(52vh,520px)}
@media (max-width:760px){
  .win{backdrop-filter:none;-webkit-backdrop-filter:none}
  #rex-svg{filter:drop-shadow(0 0 2px var(--neon)) drop-shadow(0 0 10px var(--neon-glow))}
}

/* ---------- language toggle ---------- */
#lang{display:inline-flex;align-items:center;gap:3px;padding:4px 7px;border:1px solid var(--line);border-radius:2px;color:var(--dim);font-size:11px;letter-spacing:.06em}
#lang i{font-style:normal;opacity:.4}
#lang b{font-weight:600;transition:color .15s,text-shadow .15s}
#lang b.on{color:#fff;text-shadow:0 0 6px var(--mag),0 0 14px var(--mag)}
#lang:hover{border-color:#fff}
html:lang(zh) body{font-family:var(--mono),"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
html:lang(zh) .glitch{font-family:"Unbounded","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-weight:900;letter-spacing:.01em;line-height:1.02}
html:lang(zh) .sub,html:lang(zh) .lead{letter-spacing:.04em}
html:lang(zh) .banner,html:lang(zh) #dip,html:lang(zh) .ag-big{font-family:"Unbounded","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:.02em}
@media (max-width:760px){#lang{padding:4px 6px;font-size:10.5px} .mb-right{gap:8px}}

/* ---------- custom claw cursor (mouse / trackpad only) ---------- */
@media (pointer:fine){
  html,body,#desk,#boot,#audio-gate,.win,.hero,.wp-grid{cursor:url("assets/claw.svg?v=5") 2 2,crosshair}
  a,button,[data-open],[data-cmd],[data-junk],.ico,#rex-hit,.btn,.lnk,.tg,.sw,#ar-cv,#start,#tasks button,#lang,#snd,label,select,summary{cursor:url("assets/claw-click.svg?v=5") 2 2,pointer}
  .win-bar{cursor:url("assets/claw.svg?v=5") 2 2,grab}
  input,textarea{cursor:text}
  html.claw-down,html.claw-down *:not(input):not(textarea){cursor:url("assets/claw-click.svg?v=5") 2 2,pointer!important}
  body.nom #desk,body.nom #desk *{cursor:none!important}
}

/* ---------- audio gate ---------- */
#audio-gate{position:fixed;inset:0;z-index:175;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.9);opacity:0;transition:opacity .45s ease;touch-action:manipulation;-webkit-user-select:none;user-select:none;outline:none}
#audio-gate[hidden]{display:none}
#audio-gate.on{opacity:1}
#audio-gate.off{opacity:0;transition:opacity .45s ease}
#audio-gate::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,rgba(255,43,214,.18),transparent 58%),repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(255,255,255,.035) 3px,transparent 4px)}
.ag-in{position:relative;text-align:center;padding:24px;display:flex;flex-direction:column;align-items:center;gap:6px}
.ag-rex{position:relative;width:clamp(110px,18vmin,170px);height:clamp(110px,18vmin,170px);margin-bottom:10px;display:grid;place-items:center}
.ag-rex svg{width:78%;height:78%;fill:#fff;filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 18px var(--mag));animation:agBob 1.1s ease-in-out infinite}
.ag-ring{position:absolute;inset:0;border:2px solid var(--mag);border-radius:50%;box-shadow:0 0 18px var(--mag),inset 0 0 18px var(--mag);animation:agRing 1.6s cubic-bezier(.1,.7,.3,1) infinite}
.ag-ring.r2{border-color:var(--cy);box-shadow:0 0 18px var(--cy),inset 0 0 18px var(--cy);animation-delay:.8s}
.ag-eq{display:flex;gap:4px;align-items:flex-end;height:22px;margin:4px 0 8px}
.ag-eq i{width:5px;height:100%;background:var(--tox);box-shadow:0 0 8px var(--tox);transform-origin:bottom;animation:agEq .9s ease-in-out infinite}
.ag-eq i:nth-child(2){animation-delay:-.2s;background:var(--cy);box-shadow:0 0 8px var(--cy)}
.ag-eq i:nth-child(3){animation-delay:-.45s;background:var(--mag);box-shadow:0 0 8px var(--mag)}
.ag-eq i:nth-child(4){animation-delay:-.1s}
.ag-eq i:nth-child(5){animation-delay:-.6s;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.ag-eq i:nth-child(6){animation-delay:-.35s;background:var(--cy);box-shadow:0 0 8px var(--cy)}
.ag-eq i:nth-child(7){animation-delay:-.75s;background:var(--mag);box-shadow:0 0 8px var(--mag)}
.ag-big{font:900 clamp(34px,7.4vw,92px)/.95 var(--disp);letter-spacing:-.02em;color:#fff;text-shadow:0 0 4px #fff,0 0 24px var(--mag),0 0 70px var(--mag);animation:agPulse 1.1s ease-in-out infinite}
.ag-sub{font:400 clamp(22px,3.4vw,34px)/1.1 var(--vt);color:var(--tox);letter-spacing:.12em;text-shadow:0 0 10px var(--tox);margin-top:6px}
.ag-tip{font-size:11px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;margin-top:12px}
html:lang(zh) .ag-sub{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;font-weight:900;letter-spacing:.2em}
html:lang(zh) .ag-tip{text-transform:none;letter-spacing:.08em}
@keyframes agPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.045);opacity:.82}}
@keyframes agRing{0%{transform:scale(.55);opacity:1}100%{transform:scale(1.35);opacity:0}}
@keyframes agBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
@keyframes agEq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
html.lite .ag-rex svg{filter:drop-shadow(0 0 6px var(--mag))}
html.lite .ag-ring{box-shadow:none}
html.lite .ag-big{text-shadow:0 0 4px #fff,0 0 22px var(--mag)}
@media (prefers-reduced-motion:reduce){.ag-big,.ag-ring,.ag-rex svg,.ag-eq i{animation:none!important}}

/* arcade overlay buttons — mobile hit targets */
@media (max-width:760px){
  .win-body.arcade{display:flex;flex-direction:column;min-height:0;height:100%;overflow:hidden}
  #ar-cv{flex:0 0 auto;width:100%}
  .ar-over{z-index:5;pointer-events:auto;touch-action:manipulation;padding:12px 10px;gap:10px}
  .ar-btns{gap:10px;width:100%;max-width:360px}
  .ar-btns .btn{flex:1 1 auto;min-height:48px;padding:14px 12px;font-size:12px;touch-action:manipulation;-webkit-tap-highlight-color:rgba(255,255,255,.18)}
  .ar-rekt{font-size:clamp(36px,12vw,56px)}
  #ar-msg{font-size:13px;line-height:1.35;padding:0 8px}
}