.game-unplug { background:#ecefe6; overflow:hidden; }
.game-unplug * { box-sizing:border-box; }
.unplug-world { --strain:0; position:relative; height:430px; color:#233e34; overflow:hidden; background:radial-gradient(ellipse at 50% 33%,#dce9be 0,transparent 62%); transition:background-color .6s; }
.unplug-machine { position:absolute; width:min(410px,calc(100% - 44px)); height:218px; top:28px; left:50%; transform:translateX(-50%); border:3px solid #233e34; border-radius:17px; background:#30483e; box-shadow:0 8px 0 #182f27,0 17px 0 #233e3411; padding:14px; }
.unplug-machine::before { content:''; position:absolute; inset:8px; border:1px solid #71816b; border-radius:8px; pointer-events:none; }
.unplug-machine::after { content:''; position:absolute; top:100%; right:74px; width:9px; height:60px; background:#233e34; border-radius:0 0 5px 5px; }
.unplug-core-shell { position:absolute; width:174px; height:170px; top:13px; left:50%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(#d0f29b66 0,#cce89011 57%,transparent 70%); }
.unplug-core-shell::before,.unplug-core-shell::after { content:''; position:absolute; inset:10px; border:1px solid #d9f5ac77; border-radius:50%; }
.unplug-core-shell::after { inset:0; border-style:dashed; animation:unplug-orbit 16s linear infinite; }
.unplug-core { position:absolute; inset:2px; filter:drop-shadow(0 0 11px #d4ef9d88); transition:filter .18s,opacity .25s,transform .5s; }
.unplug-core svg { display:block; width:100%; height:100%; }
.unplug-bank { position:absolute; top:24px; bottom:47px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(5,1fr); gap:6px; width:66px; }
.unplug-bank-left { left:23px; }.unplug-bank-right { right:23px; }
.unplug-bank i { border-radius:2px; background:#bfe6a0; box-shadow:0 0 5px #c6f29955; animation:unplug-compute var(--speed) var(--delay) linear infinite alternate; transition:background .1s,box-shadow .1s; transition-delay:calc(var(--i) * 12ms); }
.unplug-bank-right i:nth-child(3n) { background:#f3c17b; }
.unplug-traces { position:absolute; left:25%; right:25%; bottom:30px; height:10px; display:flex; justify-content:center; gap:5px; }
.unplug-traces i { height:3px; width:25%; background:#bfe6a0; transform:skewX(-30deg); animation:unplug-trace .65s linear infinite; }
.unplug-traces i:nth-child(2){animation-delay:-.15s}.unplug-traces i:nth-child(3){animation-delay:-.3s}.unplug-traces i:nth-child(4){animation-delay:-.45s}
.unplug-nameplate { position:absolute; left:50%; bottom:24px; transform:translateX(-50%); width:152px; height:40px; padding:5px 14px; border:1px solid #71816b; border-left:3px solid var(--rig-accent,#d9efaa); border-radius:3px; background:#1c3029; box-shadow:0 2px 0 #14271f; pointer-events:none; text-align:left; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; transition:filter .2s; }
.unplug-nameplate::after { content:''; position:absolute; right:5px; top:6px; width:3px; height:3px; border-radius:50%; background:#71816b; box-shadow:0 25px 0 #71816b; }
.unplug-model { display:block; color:var(--rig-accent,#d9efaa); font-size:13px; line-height:15px; font-weight:700; white-space:nowrap; }
.unplug-vendor { display:block; color:#ccd5be; font-size:10px; line-height:13px; white-space:nowrap; }
.unplug-machine-foot { position:absolute; left:23px; right:23px; bottom:12px; height:6px; display:flex; gap:5px; }
.unplug-machine-foot i { flex:1; border-radius:1px; background:#b7d896; box-shadow:0 0 5px #d9f5ac55; }
.unplug-rail { position:absolute; top:275px; left:50%; transform:translateX(-50%); width:340px; max-width:calc(100% - 40px); height:125px; }
.unplug-cable { position:absolute; inset:0; width:100%; height:125px; overflow:visible; }
.unplug-cable path { fill:none; stroke:#233e34; stroke-width:8; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.unplug-socket { position:absolute; right:9px; top:10px; height:75px; width:60px; border:3px solid #233e34; border-radius:10px; background:#c4cbb9; box-shadow:4px 4px 0 #889b88; display:flex; align-items:center; justify-content:center; gap:10px; }
.unplug-socket span { width:5px; height:20px; border-radius:2px; background:#20372f; }
.unplug-socket i { position:absolute; bottom:6px; width:6px; height:4px; background:#d9f5ac; border-radius:2px; box-shadow:0 0 7px #e7ffb9; }
.unplug-plug { --pull:0px; position:absolute; left:calc(100% - 156px); top:20px; width:90px; height:56px; padding:0; border:3px solid #233e34; border-radius:12px 7px 7px 12px; background:#f37c5c; box-shadow:0 5px 0 #233e3425,inset 0 5px 0 #ffb18a; transform:translateX(var(--pull)); transition:transform .3s cubic-bezier(.2,.8,.2,1); z-index:2; touch-action:none; cursor:grab; }
.unplug-plug::before { content:''; position:absolute; top:15px; left:-12px; width:13px; height:20px; background:#d77555; border:3px solid #233e34; border-radius:5px 0 0 5px; }
.unplug-grip { display:flex; justify-content:center; gap:8px; }.unplug-grip i{width:3px;height:26px;background:#233e34;border-radius:2px;opacity:.8}
.unplug-prongs { position:absolute; top:9px; right:-23px; display:flex; flex-direction:column; gap:13px; z-index:-1; }.unplug-prongs i{width:22px;height:8px;background:#e2d8b7;border:2px solid #233e34;border-left:0}
.unplug-arrow { position:absolute; top:15px; left:34px; width:44px; height:26px; fill:none; stroke:#55775c; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; animation:unplug-hint 1.8s ease-in-out infinite; }
.unplug-shortcut { position:absolute; right:18px; top:94px; width:38px; height:32px; display:grid; place-items:center; border:1px solid #9eac99; background:#f4f4e9; border-radius:7px; padding:6px; cursor:pointer; }.unplug-shortcut svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.unplug-shortcut:hover{background:#dded9f}
.unplug-plug:focus-visible,.unplug-shortcut:focus-visible { outline:3px solid #f37c5c; outline-offset:6px; }
.unplug-dragging .unplug-plug { cursor:grabbing; transition:none; }
.unplug-dragging .unplug-machine { box-shadow:0 8px 0 #182f27,calc(var(--strain) * 3px) 17px 0 #233e3411; }
.unplug-dragging .unplug-arrow { opacity:0; }
.unplug-sparks { position:absolute; left:calc(100% - 73px); top:46px; pointer-events:none; opacity:0; z-index:4; }.unplug-sparks i{position:absolute;height:3px;width:17px;background:#f2b566;transform:rotate(calc(var(--n) * 90deg)) translateX(8px)}.unplug-sparks i:nth-child(1){--n:0}.unplug-sparks i:nth-child(2){--n:1}.unplug-sparks i:nth-child(3){--n:2}.unplug-sparks i:nth-child(4){--n:3}
.unplug-disconnected { background-color:#e2e5de; }
.unplug-disconnected .unplug-bank i,.unplug-disconnected .unplug-traces i,.unplug-disconnected .unplug-machine-foot i,.unplug-disconnected .unplug-socket i { animation:none; background:#4c6052; box-shadow:none; }
.unplug-disconnected .unplug-core { filter:grayscale(1) brightness(.42); opacity:.7; transform:translateY(5px); }
.unplug-disconnected .unplug-nameplate { filter:grayscale(1) brightness(.6); }
.unplug-disconnected .unplug-core-shell { background:none; }.unplug-disconnected .unplug-core-shell::before,.unplug-disconnected .unplug-core-shell::after{animation:none;opacity:.12}
.unplug-disconnected .unplug-arrow,.unplug-disconnected .unplug-shortcut{visibility:hidden}
.unplug-disconnected .unplug-plug { opacity:1; cursor:default; transform:translateX(var(--pull)) translateY(15px) rotate(-10deg); }
.unplug-disconnected .unplug-sparks { animation:unplug-spark .34s ease-out both; }
.unplug-reduced-motion *,.unplug-reduced-motion *::before,.unplug-reduced-motion *::after { animation:none!important;transition:none!important; }
@keyframes unplug-compute { from{opacity:.55;transform:scaleY(.65)}to{opacity:1;transform:scaleY(1)} }
@keyframes unplug-trace { 0%,20%{opacity:.15}60%,100%{opacity:1} }
@keyframes unplug-orbit { to{transform:rotate(360deg)} }
@keyframes unplug-hint { 50%{transform:translateX(-7px);opacity:.45} }
@keyframes unplug-spark { 0%{opacity:1;transform:scale(.4)}70%{opacity:.6}100%{opacity:0;transform:scale(1.8)} }
@media(max-width:700px){.unplug-world{height:400px}.unplug-machine{top:25px;height:205px;width:calc(100% - 38px)}.unplug-core-shell{width:148px;height:152px;top:16px}.unplug-bank{width:41px;gap:4px;top:29px;bottom:47px}.unplug-bank-left{left:15px}.unplug-bank-right{right:15px}.unplug-machine-foot{left:15px;right:15px;gap:4px}.unplug-rail{top:258px}.unplug-machine::after{right:32px;height:62px}.unplug-arrow{left:18px}}
@media(prefers-reduced-motion:reduce){.game-unplug *,.game-unplug *::before,.game-unplug *::after{animation:none!important;transition:none!important}}

.unplug-disconnected .core-flow,.unplug-disconnected .core-sweep { animation:none!important; }
.unplug-disconnected .core-sweep { display:none; }

/* Swappable racks share one control: the blackout is the beat, not the ending. */
.unplug-world[data-rig="1"] .unplug-machine { border-radius:6px; background:#283943; }
.unplug-world[data-rig="1"] .unplug-bank { grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(3,1fr); }
.unplug-world[data-rig="1"] .unplug-plug { background:#dfc779; box-shadow:0 5px 0 #233e3425,inset 0 5px 0 #f2dfa0; }
.unplug-world[data-rig="2"] .unplug-machine { background:#433e35; border-radius:24px 6px 24px 6px; }
.unplug-world[data-rig="2"] .unplug-bank i:nth-child(2n) { background:#f3c17b; }
.unplug-world[data-rig="2"] .unplug-core-shell { transform:translateX(-50%) rotate(90deg); }
.unplug-world[data-rig="3"] .unplug-machine { background:#294947; border-radius:5px; }
.unplug-world[data-rig="3"] .unplug-plug { background:#b2c699; box-shadow:0 5px 0 #233e3425,inset 0 5px 0 #d7e3b3; }
.unplug-world[data-rig="3"] .unplug-bank { gap:3px; grid-template-columns:1fr; grid-template-rows:repeat(15,1fr); }
.unplug-dragging .unplug-core { transform:scale(calc(1 + var(--strain) * .06)); }
.unplug-dragging .unplug-plug { border-radius:calc(12px - var(--strain) * 5px) 7px 7px 12px; }
.unplug-offline { position:absolute; left:50%; top:222px; width:min(420px,calc(100% - 30px)); height:42px; transform:translateX(-50%); display:flex; align-items:flex-end; justify-content:space-between; gap:4px; opacity:.75; }
.unplug-offline i { width:36px; height:30px; border:2px solid #61715e; border-radius:3px; background:repeating-linear-gradient(0deg,#a6af9c 0 5px,#6d7c69 5px 7px); opacity:0; transform:rotate(var(--tilt,0deg)); }
.unplug-offline i.is-offline { opacity:1; }
.unplug-shockwave { position:absolute; left:50%; top:145px; width:100px; height:100px; margin:-50px; border:3px solid #829a68; border-radius:50%; opacity:0; pointer-events:none; }
.unplug-disconnected .unplug-shockwave { animation:unplug-shock .5s ease-out; }
.unplug-disconnected .unplug-machine { animation:unplug-drop .42s cubic-bezier(.2,.9,.3,1); }
.unplug-disconnected .unplug-plug { transition:transform .13s cubic-bezier(.13,.9,.18,1); transform:translateX(var(--pull)) translateY(20px) rotate(-17deg); }
.unplug-disconnected .unplug-bank i { background:#3d4b42!important; transition-delay:calc(var(--i) * 15ms); }
.unplug-reduced-motion .unplug-shockwave { display:none; }
@keyframes unplug-shock { from{opacity:.6;transform:scale(.6)}to{opacity:0;transform:scale(4.6)} }
@keyframes unplug-drop { 0%{transform:translateX(-50%) translateY(0)}25%{transform:translateX(-50%) translateY(7px)}60%{transform:translateX(-50%) translateY(-2px)}100%{transform:translateX(-50%) translateY(0)} }
@media(max-width:700px){.unplug-offline{top:210px}.unplug-offline i{width:27px;height:25px}}
@media(prefers-reduced-motion:reduce){.unplug-shockwave{display:none}}