.spider-game{color:#fff;-webkit-user-select:none;user-select:none;touch-action:none;background:#182631;font-family:Arial,sans-serif;position:fixed;inset:0;overflow:hidden}.spider-world,.spider-world canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.spider-top{z-index:4;top:max(20px,env(safe-area-inset-top));pointer-events:none;align-items:center;gap:18px;display:flex;position:absolute;left:24px;right:24px}.spider-top a,.spider-top button{pointer-events:auto;color:#fff;background:#132c3cc9;border:1px solid #ffffff30;border-radius:50%;place-items:center;width:42px;height:42px;text-decoration:none;display:grid}.spider-top button{margin-left:auto}.spider-top strong{letter-spacing:.3em;font-size:22px;font-style:italic}.spider-top small{letter-spacing:.2em;color:#d1d9df;margin-top:5px;font-size:8px;display:block}.spider-hud{z-index:3;text-shadow:0 2px 10px #000;position:absolute;top:110px;left:26px}.spider-hud>span{letter-spacing:.2em;color:#b8eee6;font-size:10px}.spider-hud strong{font-size:42px;display:block}.spider-hud small,.spider-hud p{font-size:11px}.spider-reticle{opacity:.6;pointer-events:none;position:absolute;top:45%;left:50%}.spider-look{z-index:2;touch-action:none;position:absolute;inset:85px 0 130px 20%}.spider-controls{z-index:4;bottom:max(35px,env(safe-area-inset-bottom));pointer-events:none;justify-content:space-between;align-items:end;display:flex;position:absolute;left:30px;right:30px}.spider-stick{pointer-events:auto;touch-action:none;background:#15334260;border:1px solid #fff5;border-radius:50%;place-items:center;width:100px;height:100px;display:grid}.spider-stick span{opacity:.7;font-size:50px}.spider-actions{align-items:end;gap:14px;display:flex}.spider-actions button{pointer-events:auto;touch-action:none;color:#fff;background:#173546b5;border:1px solid #fff5;border-radius:24px;width:92px;height:76px;font-size:12px;font-weight:700}.spider-actions small{letter-spacing:.05em;margin-top:6px;font-size:7px;display:block}.spider-actions .spider-web{color:#b8fff3;border-color:#8fe2dc;width:106px;height:96px}.spider-actions button:active{background:#276f79}.spider-hint{letter-spacing:.1em;white-space:nowrap;opacity:.7;font-size:9px;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.spider-intro{z-index:10;text-align:center;background:linear-gradient(110deg,#071923ec,#173745b5);flex-direction:column;justify-content:center;align-items:center;padding:25px;display:flex;position:absolute;inset:0;overflow:auto}.spider-intro>span{letter-spacing:.4em;color:#b7e7dc;font-size:10px}.spider-intro h1{letter-spacing:.15em;color:#f1d4ad;margin:10px 0;font-size:clamp(38px,10vw,110px);font-style:italic}.spider-intro p{color:#d2dbe0;font-size:14px}.spider-guide{margin:14px 0}.spider-guide p{margin:8px 0;font-size:12px}.spider-intro button{color:#cbd8dc;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:13px 25px}.spider-intro .spider-start{color:#143142;letter-spacing:.1em;background:#bce8df;margin:8px 0;font-weight:800}@media (max-height:520px){.spider-intro h1{margin:0;font-size:38px}.spider-guide,.spider-intro p{margin:4px}.spider-hud{top:85px}.spider-hud strong{font-size:26px}.spider-controls{bottom:20px}.spider-stick{width:75px;height:75px}.spider-actions button{height:60px}.spider-actions .spider-web{height:75px}}@media (max-width:600px){.spider-top{left:14px;right:14px}.spider-hud{left:18px}.spider-controls{left:18px;right:18px}.spider-actions{gap:8px}.spider-actions button{width:75px}.spider-actions .spider-web{width:85px}.spider-hint{font-size:7px}}.spider-game .spider-reticle{top:50%;transform:translate(-50%,-50%)}
