:root{--bg-color: #f1f5f9;--panel-bg: rgba(255, 255, 255, .42);--border-glow: #0284c7;--neon-blue: #0ea5e9;--neon-green: #10b981;--neon-purple: #8b5cf6;--neon-orange: #f97316;--neon-red: #ef4444;--text-primary: #0f172a;--text-muted: #475569;--font-display: "Orbitron", sans-serif;--font-body: "Outfit", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:#cbd5e1;color:var(--text-primary);font-family:var(--font-body);display:flex;justify-content:center;align-items:center;min-height:100vh;overflow:hidden;background-image:radial-gradient(circle at 50% 20%,#e2e8f0 0%,transparent 60%),radial-gradient(circle at 10% 80%,#94a3b8 0%,transparent 50%),repeating-linear-gradient(45deg,rgba(0,0,0,.01) 0px,rgba(0,0,0,.01) 2px,transparent 2px,transparent 10px)}.arcade-cabinet{display:flex;flex-direction:column;width:95vw;max-width:1100px;height:95vh;max-height:900px;background:linear-gradient(135deg,#f8fafc,#e2e8f0,#cbd5e1);border:4px solid #475569;border-radius:20px;box-shadow:0 30px 60px #0f172a40,inset 0 2px 5px #fffc,0 0 35px #0284c71a;padding:20px;position:relative;overflow:hidden}.arcade-cabinet:after{content:"";position:absolute;top:4px;left:4px;right:4px;bottom:4px;border:1.5px solid rgba(255,255,255,.6);border-radius:16px;pointer-events:none;z-index:5}.arcade-cabinet:before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--neon-blue),var(--neon-green),var(--neon-purple),var(--neon-blue));background-size:300% 100%;animation:borderGlow 6s linear infinite;z-index:10}@keyframes borderGlow{0%{background-position:0% 50%}to{background-position:300% 50%}}.arcade-header{text-align:center;margin-bottom:16px;border-bottom:2px dashed #94a3b8;padding-bottom:14px;flex-shrink:0}.logo{font-family:var(--font-display);font-size:2.6rem;font-weight:900;letter-spacing:6px;color:#1e3a8a;text-shadow:0 2px 4px rgba(15,23,42,.1),0 0 20px rgba(14,165,233,.25)}.logo .accent{color:var(--neon-green);text-shadow:0 2px 4px rgba(15,23,42,.1),0 0 20px rgba(16,185,129,.35)}.subtitle{font-family:var(--font-display);font-size:.78rem;letter-spacing:8px;color:var(--text-muted);margin-top:6px;font-weight:800}.arcade-main{display:flex;flex:1;gap:20px;min-height:0}.panel{flex:0 0 265px;display:flex;flex-direction:column;gap:14px;min-height:0}.panel-section{background:var(--panel-bg);border:1px solid rgba(255,255,255,.5);border-radius:16px;padding:14px 16px;box-shadow:0 10px 25px -5px #94a3b826,inset 0 1px #ffffffb3;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.panel-section h2{font-family:var(--font-display);font-size:.85rem;letter-spacing:2px;color:var(--text-muted);margin-bottom:10px;border-bottom:1px solid rgba(148,163,184,.2);padding-bottom:6px;font-weight:800;text-transform:uppercase}.stat-box{display:flex;flex-direction:column;margin-bottom:10px;border-bottom:1px solid rgba(148,163,184,.1);padding-bottom:8px}.stat-box:last-child{margin-bottom:0;border-bottom:none;padding-bottom:0}.stat-label{font-size:.7rem;letter-spacing:1.5px;color:var(--text-muted);text-transform:uppercase;font-weight:700}.stat-value{font-family:var(--font-display);font-size:1.8rem;font-weight:900;margin-top:4px;transition:text-shadow .2s ease}.neon-green{color:var(--neon-green);text-shadow:0 0 10px rgba(16,185,129,.35)}.neon-blue{color:var(--neon-blue);text-shadow:0 0 10px rgba(14,165,233,.35)}.neon-purple{color:var(--neon-purple);text-shadow:0 0 10px rgba(139,92,246,.35)}.neon-orange{color:var(--neon-orange);text-shadow:0 0 10px rgba(249,115,22,.35)}.radar-section{flex:1;display:flex;flex-direction:column}.depth-bar-container{flex:1;width:28px;background:#94a3b826;border:1.5px solid rgba(255,255,255,.4);border-radius:14px;margin:14px auto;overflow:hidden;position:relative;display:flex;flex-direction:column-reverse;box-shadow:inset 0 2px 4px #00000014}.depth-bar{width:100%;background:linear-gradient(to top,var(--neon-green),var(--neon-orange),var(--neon-red));border-radius:12px;transition:height .4s cubic-bezier(.25,1,.5,1);box-shadow:0 0 8px #f973164d}.depth-warning{text-align:center;font-family:var(--font-display);font-size:.78rem;font-weight:800;letter-spacing:1.5px;padding:6px 12px;border-radius:8px;background:#10b98114;border:1px solid rgba(16,185,129,.2);color:var(--neon-green);text-shadow:0 0 6px rgba(16,185,129,.4);animation:pulse 1.5s infinite;display:block}.depth-warning.alarm{background:#ef444414;border-color:#ef44444d;color:var(--neon-red);text-shadow:0 0 10px rgba(239,68,68,.5);animation:alarmFlash .8s infinite alternate}@keyframes alarmFlash{0%{opacity:.6;transform:scale(.98)}to{opacity:1;transform:scale(1.02)}}@keyframes pulse{0%,to{opacity:.85}50%{opacity:1}}.screen-container{flex:1;display:flex;justify-content:center;align-items:center;min-height:0}.screen-border{position:relative;background:#cbd5e1;border:8px solid #475569;border-radius:20px;box-shadow:0 25px 50px -12px #0f172a59,inset 0 0 25px #00000026;overflow:hidden;display:flex;aspect-ratio:3 / 4;height:100%;max-width:100%}canvas#game-canvas{width:100%;height:100%;display:block;z-index:1}.crt-glow{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#ffffff2e,#fff0,#0000000d),radial-gradient(#ffffff1f,#00000005);pointer-events:none;z-index:10}.screen-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#f8fafcf0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:20;opacity:0;pointer-events:none;transition:opacity .4s cubic-bezier(.25,1,.5,1)}.screen-overlay.active{opacity:1;pointer-events:auto}#overlay-gameover{background:#0f172a73;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}#overlay-gameover .overlay-content{background:#fffffff0;border:1.5px solid rgba(255,255,255,.6);border-radius:20px;box-shadow:0 25px 50px -12px #0f172a66,0 0 30px #ef444433}.overlay-content{text-align:center;padding:36px;max-width:85%;display:flex;flex-direction:column;align-items:center;gap:20px}.glow-text{font-family:var(--font-display);font-size:2.4rem;letter-spacing:3px;color:#1e3a8a;text-shadow:0 2px 4px rgba(15,23,42,.1),0 0 15px rgba(14,165,233,.2)}.glow-text-red{font-family:var(--font-display);font-size:2.4rem;letter-spacing:3px;color:var(--neon-red);text-shadow:0 2px 4px rgba(15,23,42,.1),0 0 20px rgba(239,68,68,.35);animation:jitter 1.5s infinite}@keyframes jitter{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}.overlay-content p{font-size:.98rem;line-height:1.6;color:#334155;margin-bottom:10px;font-weight:500}.final-score-box{background:#94a3b81a;border:1px solid rgba(148,163,184,.2);border-radius:12px;padding:16px 32px;display:flex;flex-direction:column;gap:6px;box-shadow:inset 0 2px 4px #00000005}.final-score-box span:first-child{font-size:.75rem;letter-spacing:1.5px;color:var(--text-muted);font-weight:700}.final-score-box span:last-child{font-family:var(--font-display);font-size:2.4rem;font-weight:900}.arcade-btn{position:relative;overflow:hidden;font-family:var(--font-display);font-size:1rem;font-weight:800;letter-spacing:2px;color:#fff;background:linear-gradient(135deg,#0ea5e9,#0284c7);border:1px solid rgba(255,255,255,.25);border-bottom:4px solid #0369a1;border-radius:10px;padding:16px 32px;cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.3);box-shadow:0 8px 24px #0284c74d,inset 0 1px #fff6;transition:all .2s ease}.arcade-btn:after{content:"";position:absolute;top:-50%;left:-60%;width:30%;height:200%;background:#ffffff40;transform:rotate(30deg);transition:all .5s ease-out}.arcade-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px #0284c773,inset 0 1px #ffffff80;background:linear-gradient(135deg,#38bdf8,#0ea5e9)}.arcade-btn:hover:after{left:140%}.arcade-btn:active{transform:translateY(2px);border-bottom-width:1px;box-shadow:0 2px 4px #0284c733}.arcade-btn.danger{background:linear-gradient(135deg,#ef4444,#dc2626);border-bottom-color:#991b1b;box-shadow:0 8px 24px #dc26264d,inset 0 1px #fff6}.arcade-btn.danger:hover{background:linear-gradient(135deg,#f87171,#ef4444);box-shadow:0 12px 30px #dc262673}.preview-section{display:flex;flex-direction:column;align-items:center}.next-preview-box{width:120px;height:150px;background:#94a3b81f;border:1.5px solid rgba(255,255,255,.4);border-radius:12px;display:flex;justify-content:center;align-items:center;overflow:hidden;margin-bottom:12px;box-shadow:inset 0 2px 4px #0000000f}.next-preview-box canvas{display:block}.next-type-label{font-size:.72rem;letter-spacing:1.5px;color:var(--text-muted);text-align:center;text-transform:uppercase;font-weight:700}.controls-section{flex:1;display:flex;flex-direction:column;min-height:0;overflow-y:hidden}.control-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;background:#ffffff4d;padding:6px 10px;border-radius:8px;border:1px solid rgba(148,163,184,.15);border-left:4px solid var(--neon-blue);box-shadow:0 2px 4px #00000005}.control-key{font-family:var(--font-display);font-size:.75rem;background:#94a3b833;border:1px solid rgba(148,163,184,.3);border-radius:6px;padding:3px 8px;font-weight:800;color:#0f172a;box-shadow:0 1px 2px #0000000d}.control-desc{font-size:.78rem;color:var(--text-primary);font-weight:600;white-space:nowrap}.rules-tip{margin-top:8px;padding:10px;background:#0ea5e90f;border:1px solid rgba(14,165,233,.18);border-radius:10px;font-size:.75rem;line-height:1.4;color:#0369a1}.rules-tip strong{color:#0284c7}.arcade-footer{text-align:center;margin-top:16px;border-top:1px dashed #94a3b8;padding-top:12px;font-family:var(--font-display);font-size:.68rem;letter-spacing:5px;color:var(--text-muted);flex-shrink:0;font-weight:800}.controls-section::-webkit-scrollbar{width:4px}.controls-section::-webkit-scrollbar-track{background:transparent}.controls-section::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}