/* 🏄 Σέρφερ του Δικτύου (ομάδα «Διαδίκτυο») — 3D runner σε WebGL */
.ns-wrap { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; background: #1a237e; }
.ns-canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.ns-nogl { padding: 40px; text-align: center; font-size: 20px; font-weight: 700; color: #37474f; }
.ns-hud { position: absolute; left: 12px; right: 12px; top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; pointer-events: none; }
.ns-box { background: rgba(0,0,0,.4); color: #fff; border-radius: 12px; padding: 6px 12px; font-weight: 900; font-size: 18px; line-height: 1.2; white-space: nowrap; }
.ns-box.ns-title { margin-left: auto; font-size: 16px; }
.ns-dist { position: absolute; left: 50%; transform: translateX(-50%); top: 56px; width: min(420px, 60%); height: 22px; border-radius: 11px; background: rgba(0,0,0,.4); overflow: hidden; pointer-events: none; }
.ns-dist-fill { height: 100%; width: 0; background: linear-gradient(90deg, #ffd54f, #ff9800); transition: width .15s linear; }
.ns-dist span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 13px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.ns-tip { position: absolute; left: 50%; transform: translateX(-50%); top: 88px; max-width: min(760px, 90%); background: rgba(255,249,196,.95); color: #4e342e; border-radius: 14px; padding: 10px 16px; font-weight: 700; font-size: 17px; text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,.25); pointer-events: none; animation: ng-in .3s ease-out; }
.ns-tip.hidden { display: none; }
.ns-flash { position: absolute; inset: 0; background: rgba(229,57,53,.45); opacity: 0; pointer-events: none; }
.ns-flash.on { animation: ns-flash .5s ease-out; }
@keyframes ns-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
/* Κουμπιά αφής — μόνο σε οθόνες αφής (υπάρχει και σύρσιμο/χτύπημα πάνω στον καμβά) */
.ns-touch { display: none; position: absolute; left: 0; right: 0; bottom: 12px; justify-content: center; gap: 12px; pointer-events: none; }
@media (pointer: coarse) { .ns-touch { display: flex; } }
.ns-tb { pointer-events: auto; width: 62px; height: 62px; border-radius: 50%; border: 3px solid rgba(255,255,255,.7); background: rgba(255,255,255,.28); color: #fff; font-size: 26px; font-weight: 900; font-family: inherit; touch-action: none; user-select: none; }