*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{overscroll-behavior:none}
body{min-height:100vh;font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at top,#17315f 0%,#070912 48%,#02030a 100%);color:white;overflow-x:hidden}
.app{width:min(1260px,96vw);margin:0 auto;padding:18px}
.top-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px}
.top-bar h1{font-size:clamp(38px,7vw,72px);color:#00f7ff;letter-spacing:3px;text-shadow:0 0 10px #00f7ff,0 0 28px rgba(0,247,255,.9)}
.top-bar p{color:#ff4ffd;font-weight:bold;letter-spacing:4px;text-transform:uppercase}
.hud{display:grid;grid-template-columns:repeat(4,auto);gap:8px 18px;text-align:right;background:rgba(255,255,255,.08);border:1px solid rgba(0,247,255,.55);border-radius:18px;padding:12px 16px;box-shadow:0 0 24px rgba(0,247,255,.18),inset 0 0 18px rgba(0,247,255,.05)}
body.menu-active .hud{display:none}
.hud span{color:#fff36b;font-weight:bold}
#timeLeft.warning{color:#ff315c;text-shadow:0 0 12px #ff315c;animation:dangerPulse .55s infinite alternate}
@keyframes dangerPulse{from{opacity:.55}to{opacity:1}}
.screen{display:none}.screen.active{display:block}
.hero-card{min-height:580px;border-radius:34px;overflow:hidden;border:2px solid rgba(0,247,255,.72);background:linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.78)),url("assets/menu-background.png"),radial-gradient(circle at top left,rgba(0,247,255,.22),transparent 35%),radial-gradient(circle at bottom right,rgba(255,79,253,.16),transparent 35%),#06101d;background-size:cover;background-position:center;box-shadow:0 0 32px rgba(0,247,255,.32),0 0 70px rgba(255,79,253,.14);display:grid;place-items:center;text-align:center;padding:26px}
.hero-overlay{max-width:980px;padding:clamp(22px,5vw,56px);border-radius:28px;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(6px);box-shadow:inset 0 0 40px rgba(0,247,255,.05)}
.boot-lines{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:14px}
.boot-lines span{font-size:12px;letter-spacing:2px;color:#54ff74;border:1px solid rgba(84,255,116,.28);border-radius:999px;padding:6px 10px;background:rgba(84,255,116,.08)}
.hero-overlay h2{font-size:clamp(36px,7vw,78px);color:#00f7ff;text-shadow:0 0 12px #00f7ff,0 0 32px rgba(255,79,253,.8);margin-bottom:12px}
.hero-overlay p{color:rgba(255,255,255,.88);line-height:1.6;font-size:18px;margin-bottom:18px}
.feature-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:20px}
.feature-row div{border-radius:999px;padding:10px 14px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.9)}
.intro{text-align:center;margin-bottom:22px}
.intro h2{font-size:clamp(34px,6vw,66px);color:#fff;text-shadow:0 0 18px rgba(0,247,255,.7);margin-bottom:8px}
.intro p{max-width:850px;margin:0 auto;color:rgba(255,255,255,.76);line-height:1.5}
.level-grid{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:14px}
.level-card{min-height:235px;border-radius:22px;padding:16px;text-align:left;color:white;position:relative;overflow:hidden;border:1px solid rgba(0,247,255,.65);background:radial-gradient(circle at top left,rgba(0,247,255,.18),transparent 45%),rgba(255,255,255,.06);box-shadow:0 0 22px rgba(0,247,255,.12),inset 0 0 28px rgba(255,255,255,.03)}
.level-card.completed{border-color:rgba(84,255,116,.7);box-shadow:0 0 25px rgba(84,255,116,.12)}
.level-card.locked{opacity:.42;filter:grayscale(.7);cursor:not-allowed}.level-card:not(.locked){cursor:pointer}
.level-card h3{color:#00f7ff;font-size:24px;margin-bottom:8px}.level-card p{color:rgba(255,255,255,.76);line-height:1.35;margin-bottom:10px;font-size:14px}
.level-stars{color:#fff36b;font-size:22px}.best-moves,.level-score{color:rgba(255,255,255,.72);font-size:13px;margin-top:6px}
.level-preview{height:56px;border-radius:14px;margin-top:12px;border:1px solid rgba(0,247,255,.28);background:linear-gradient(135deg,rgba(0,247,255,.12),rgba(255,79,253,.1)),repeating-linear-gradient(90deg,rgba(0,247,255,.18) 0 2px,transparent 2px 22px),#030a14}
.menu-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}
button{cursor:pointer;border:none;border-radius:999px;padding:12px 20px;font-weight:bold;color:#050514;background:linear-gradient(135deg,#00f7ff,#ff4ffd);box-shadow:0 0 14px rgba(0,247,255,.55),0 0 24px rgba(255,79,253,.25)}
button:hover{filter:brightness(1.1)}button:active{transform:scale(.96)}
.primary-button,.secondary-button{padding:16px 34px;font-size:18px}.secondary-button{background:linear-gradient(135deg,#fff36b,#ff9d00)}.danger-button{background:linear-gradient(135deg,#ff9d00,#ff315c)}
.game-layout{display:grid;grid-template-columns:1fr 305px;gap:16px;align-items:stretch}
.canvas-wrap{position:relative;border-radius:24px;overflow:hidden;border:2px solid rgba(0,247,255,.75);background:#040711;box-shadow:0 0 20px rgba(0,247,255,.5),0 0 55px rgba(255,79,253,.13);touch-action:none}
canvas{width:100%;aspect-ratio:9/7;display:block}
.side-panel{background:radial-gradient(circle at top,rgba(0,247,255,.08),transparent 45%),rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:18px}
.side-panel h3{color:#00f7ff;margin-bottom:10px;text-shadow:0 0 12px rgba(0,247,255,.7)}
.side-panel p{color:rgba(255,255,255,.76);line-height:1.45;margin-bottom:14px}
.legend{display:grid;gap:7px;margin-bottom:18px}.legend div{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.88);font-size:14px}
.legend-icon{width:27px;height:27px;border-radius:7px;display:inline-block;position:relative;border:1px solid rgba(255,255,255,.22);min-width:27px}
.legend-icon.player{border-radius:50%;background:radial-gradient(circle,#fff 0%,#00f7ff 35%,#061521 75%);box-shadow:0 0 14px rgba(0,247,255,.8)}
.legend-icon.floor{background:linear-gradient(90deg,rgba(0,247,255,.12) 1px,transparent 1px),linear-gradient(rgba(0,247,255,.12) 1px,transparent 1px),#061521;background-size:9px 9px}
.legend-icon.wall{background:linear-gradient(135deg,#1b3448,#05080d);border:2px solid #00f7ff;box-shadow:0 0 12px rgba(0,247,255,.75)}
.legend-icon.key{border-radius:50%;background:#fff36b;box-shadow:0 0 14px rgba(255,243,107,.9)}.legend-icon.key::after{content:"";position:absolute;inset:8px;background:#ff9d00;transform:rotate(45deg)}
.legend-icon.door{background:#b44dff;box-shadow:0 0 14px rgba(180,77,255,.85)}.legend-icon.door::after{content:"🔒";position:absolute;font-size:12px;left:4px;top:4px}
.legend-icon.switch{background:#00b7ff;border-radius:50%;box-shadow:0 0 14px rgba(0,183,255,.9)}.legend-icon.gate{background:repeating-linear-gradient(90deg,#ff9d00 0 4px,transparent 4px 8px);box-shadow:0 0 14px rgba(255,157,0,.85)}
.legend-icon.portal{border-radius:50%;background:radial-gradient(circle,rgba(184,77,255,.2),#061521 65%);border:3px solid #b84dff;box-shadow:0 0 14px rgba(184,77,255,.9)}
.legend-icon.oneway{background:#132238}.legend-icon.oneway::after{content:"➜";position:absolute;left:5px;top:2px;color:#00f7ff;font-weight:bold}
.legend-icon.cracked{background:#241724;box-shadow:0 0 12px rgba(255,79,253,.7)}.legend-icon.cracked::after{content:"X";position:absolute;left:8px;top:4px;color:#ff4ffd;font-weight:bold}
.legend-icon.bot{border-radius:50%;background:radial-gradient(circle,#fff 0%,#ff9d00 35%,#2d1600 75%);box-shadow:0 0 14px rgba(255,157,0,.9)}
.legend-icon.timed,.legend-icon.laser{background:#1b2028}.legend-icon.timed{box-shadow:0 0 14px rgba(255,243,107,.8)}.legend-icon.laser{box-shadow:0 0 14px rgba(255,49,92,.8)}
.legend-icon.timed::after,.legend-icon.laser::after{content:"";position:absolute;left:4px;right:4px;top:12px;height:5px;border-radius:999px}.legend-icon.timed::after{background:#fff36b;box-shadow:0 0 12px #fff36b}.legend-icon.laser::after{background:#ff315c;box-shadow:0 0 12px #ff315c}
.legend-icon.camera{border-radius:50%;background:radial-gradient(circle,#fff 0%,#ff315c 30%,#1b2028 70%);box-shadow:0 0 14px rgba(255,49,92,.9)}
.legend-icon.exit{border-radius:50%;background:radial-gradient(circle,rgba(84,255,116,.2),#061521 65%);border:3px solid #54ff74;box-shadow:0 0 14px rgba(84,255,116,.9)}
.control-buttons{display:grid;gap:10px;margin-bottom:14px}.help-box{margin-top:12px;padding:12px;border-radius:16px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12)}.help-box p{margin-bottom:6px;font-size:13px}
.overlay{position:absolute;inset:0;z-index:10;display:grid;place-items:center;text-align:center;padding:20px;background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}.overlay.hidden{display:none}
.overlay-card{width:min(660px,94%);padding:24px;border-radius:26px;background:radial-gradient(circle at top left,rgba(0,247,255,.18),transparent 40%),rgba(9,13,30,.95);border:1px solid rgba(0,247,255,.45);box-shadow:0 0 30px rgba(0,247,255,.24)}
.overlay-card h2{font-size:clamp(34px,6vw,62px);color:#fff36b;text-shadow:0 0 24px rgba(255,243,107,.7);margin-bottom:12px}.overlay-card p{color:white;font-size:18px;line-height:1.45;margin:8px 0}
.result-stats{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:10px;margin:16px 0}.stat-pill{border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:12px}.stat-pill strong{color:#fff36b}
.level-intro{position:absolute;inset:0;z-index:9;display:grid;place-items:center;pointer-events:none;background:rgba(0,0,0,.28)}.level-intro.hidden{display:none}
.level-intro div{padding:22px 34px;border-radius:24px;background:rgba(0,0,0,.72);border:1px solid rgba(0,247,255,.45);box-shadow:0 0 24px rgba(0,247,255,.22);text-align:center}.level-intro h2{color:#00f7ff;font-size:clamp(32px,5vw,54px);margin-bottom:8px}.level-intro p{color:rgba(255,255,255,.88);font-size:18px}
.message-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.mobile-controls{display:none;margin-top:16px;text-align:center}.mobile-controls button{width:76px;height:56px;margin:4px;font-size:24px}
@media (max-width:1100px){.level-grid{grid-template-columns:repeat(2,minmax(150px,1fr))}.hud{grid-template-columns:repeat(2,auto)}}
@media (max-width:930px){.top-bar{flex-direction:column;text-align:center}.hud{text-align:center}.game-layout{grid-template-columns:1fr}.side-panel{order:2}.mobile-controls{display:block}}
@media (max-width:560px){.app{width:100vw;padding:10px}.hud{grid-template-columns:repeat(2,1fr);width:100%}.hero-card{min-height:560px;border-radius:24px}.level-grid{grid-template-columns:1fr}.canvas-wrap{border-radius:18px}.side-panel{padding:14px}.mobile-controls button{width:70px;height:54px}.result-stats{grid-template-columns:1fr}}