.network-lab{position:relative;padding:1.25rem;border:1px solid rgba(66,199,255,.14);border-radius:22px;background:radial-gradient(circle at 50% 10%,rgba(66,199,255,.08),transparent 32%),linear-gradient(145deg,rgba(10,28,44,.96),rgba(4,13,22,.98));overflow:hidden;box-shadow:0 28px 90px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.035)}
.network-lab:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(#000,transparent 88%)}
.game-topbar{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.018);backdrop-filter:blur(8px)}
.game-brand{display:flex;align-items:center;gap:.7rem}.game-brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid rgba(66,199,255,.24);background:rgba(66,199,255,.07);color:var(--cyan);font:600 .63rem var(--mono);letter-spacing:.08em}.game-brand strong{display:block;font-size:.88rem}.game-brand small{display:block;color:#647f92;font:500 .58rem var(--mono);margin-top:.12rem}.game-stats{display:flex;gap:.4rem}.game-stat{min-width:74px;padding:.45rem .55rem;border:1px solid var(--line);border-radius:9px;text-align:right;background:rgba(255,255,255,.015)}.game-stat span{display:block;color:#688195;font:500 .53rem var(--mono);text-transform:uppercase;letter-spacing:.08em}.game-stat b{display:block;color:#e7f5ff;font:600 .95rem var(--mono);margin-top:.08rem}
.game-layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(270px,.75fr);gap:.85rem;margin-top:.85rem}.game-map,.game-inspector{border:1px solid var(--line);border-radius:16px;background:rgba(3,11,19,.62)}.game-map{position:relative;min-height:420px;overflow:hidden}.game-map-head,.game-inspector-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.72rem .82rem;border-bottom:1px solid var(--line);color:#6d8799;font:500 .58rem var(--mono);letter-spacing:.1em;text-transform:uppercase}.game-live{color:var(--green)}.game-map-body{position:absolute;inset:44px 0 0}.game-topology{position:absolute;inset:0;width:100%;height:100%;padding:2.25rem}.g-link{stroke:rgba(66,199,255,.17);stroke-width:.55;fill:none}.g-link.active{stroke:rgba(66,199,255,.7);stroke-width:.9;filter:drop-shadow(0 0 3px rgba(66,199,255,.45))}.g-link.complete{stroke:rgba(111,229,174,.78);stroke-width:.9;filter:drop-shadow(0 0 3px rgba(111,229,174,.45))}.g-node{cursor:default}.g-node .g-halo{fill:rgba(66,199,255,.03);stroke:rgba(66,199,255,.12);stroke-width:.18}.g-node .g-ring{fill:#091925;stroke:rgba(66,199,255,.34);stroke-width:.25}.g-node .g-core{fill:#51caff}.g-node text{fill:#b9cfde;font:500 3.2px var(--mono);letter-spacing:.02em;pointer-events:none}.g-node.g-endpoint .g-ring{stroke:#6fe5ae}.g-node.g-firewall .g-ring{stroke:#ff9c72}.g-node.g-server .g-ring{stroke:#9a8cff}.g-node.g-wan .g-ring{stroke:#42c7ff}.g-node.g-dmz .g-ring{stroke:#d4a0ff}.g-node.current .g-ring{stroke:#42c7ff;stroke-width:.42}.g-node.target .g-ring{stroke:#6fe5ae;stroke-width:.42}.g-node.passed .g-core{fill:#6fe5ae}.g-packet{fill:#fff;filter:drop-shadow(0 0 5px rgba(255,255,255,.95));transition:cx .38s ease,cy .38s ease}
.game-map-overlay{position:absolute;left:1rem;bottom:1rem;display:flex;gap:.35rem;flex-wrap:wrap;max-width:80%}.game-legend{display:flex;align-items:center;gap:.4rem;padding:.35rem .48rem;border:1px solid var(--line);border-radius:7px;background:rgba(5,13,21,.78);color:#7890a1;font:500 .54rem var(--mono);backdrop-filter:blur(8px)}.game-legend i{width:7px;height:7px;border-radius:50%;display:inline-block}.game-legend .lg-blue{background:var(--cyan);box-shadow:0 0 8px rgba(66,199,255,.7)}.game-legend .lg-green{background:var(--green);box-shadow:0 0 8px rgba(111,229,174,.7)}.game-legend .lg-orange{background:#ff9c72}
.game-inspector{overflow:hidden}.packet-card{padding:.9rem;border-bottom:1px solid var(--line)}.packet-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.32rem .45rem;border-radius:6px;background:rgba(66,199,255,.06);border:1px solid rgba(66,199,255,.12);color:var(--cyan);font:500 .55rem var(--mono);letter-spacing:.08em}.packet-card h3{margin:.7rem 0 .35rem;font-size:1rem}.packet-value{margin:0 0 .8rem;color:#7f96a8;font-size:.68rem;line-height:1.5}.packet-grid{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}.packet-field{padding:.5rem;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.018)}.packet-field small{display:block;color:#61798b;font:500 .5rem var(--mono);text-transform:uppercase}.packet-field b{display:block;color:#dcebf6;font:500 .61rem var(--mono);margin-top:.12rem;word-break:break-all}.packet-field .allow{color:var(--green)}
.game-choices{padding:.85rem;display:grid;gap:.4rem}.hop-btn{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;padding:.62rem .65rem;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.02);color:#c6d8e5;text-align:left;font:500 .63rem var(--sans);cursor:pointer;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}.hop-btn span{color:#637c8e;font:500 .48rem var(--mono);letter-spacing:.08em}.hop-btn:hover{transform:translateX(2px);border-color:rgba(66,199,255,.35);background:rgba(66,199,255,.055)}.hop-btn.right{border-color:rgba(111,229,174,.5);background:rgba(111,229,174,.08);box-shadow:0 0 20px rgba(111,229,174,.08)}.hop-btn.wrong{border-color:rgba(255,120,133,.6);background:rgba(255,120,133,.08);animation:shake .28s linear}@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.game-feedback{min-height:34px;margin:0 .85rem .8rem;padding:.55rem .6rem;border:1px solid var(--line);border-radius:8px;color:#708899;font:500 .57rem/1.45 var(--mono)}.game-feedback.good{color:var(--green);border-color:rgba(111,229,174,.17);background:rgba(111,229,174,.035)}.game-feedback.bad{color:#ff9aa4;border-color:rgba(255,120,133,.18);background:rgba(255,120,133,.035)}.game-status{margin:0 .85rem .8rem;color:#7891a3;font:500 .55rem var(--mono)}
.game-footer{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.72rem .2rem .05rem}.game-footer p{margin:0;color:#5f788b;font:500 .56rem var(--mono)}.game-actions{display:flex;gap:.4rem}.game-actions button{border:1px solid var(--line);border-radius:8px;padding:.45rem .65rem;background:rgba(255,255,255,.02);color:#96adbd;font:600 .57rem var(--mono);cursor:pointer}.game-actions button:hover{border-color:rgba(66,199,255,.32);color:var(--cyan)}.next-btn{border-color:rgba(111,229,174,.25)!important;color:var(--green)!important;background:rgba(111,229,174,.05)!important}.game-help{margin-top:.75rem;color:#60798b;font:400 .57rem/1.55 var(--mono)}
@media(max-width:900px){.game-layout{grid-template-columns:1fr}.game-map{min-height:390px}.game-inspector{display:grid;grid-template-columns:1fr 1fr}.game-inspector-head{grid-column:1/-1}.packet-card{border-bottom:0;border-right:1px solid var(--line)}.game-choices{border-left:1px solid var(--line)}}
@media(max-width:600px){.game-topbar{align-items:flex-start}.game-stats{display:none}.game-map{min-height:330px}.game-topology{padding:1rem}.game-inspector{display:block}.packet-card{border-right:0;border-bottom:1px solid var(--line)}.game-map-overlay{left:.6rem;bottom:.6rem;max-width:100%}.game-help{font-size:.54rem}}