:root{--bg-dark: #0A0A0F;--bg-panel: #12121A;--bg-panel-hover: #1a1a25;--bg-panel-active: #222230;--accent-cyan: #00DDFF;--accent-cyan-dim: rgba(0, 221, 255, .25);--accent-cyan-glow: rgba(0, 221, 255, .4);--text-primary: #FFFFFF;--text-secondary: #888899;--text-muted: #555566;--rank-gold: #FFD700;--rank-silver: #C0C0C0;--rank-bronze: #CD7F32;--rank-candidate: #888899;--efficiency-green: #00FF88;--warning-amber: #FFAA00;--critical-red: #FF4444;--grade-s: #FFD700;--grade-a: #00FF88;--grade-b: #00DDFF;--grade-c: #FFAA00;--grade-d: #FF6644;--grade-f: #FF4444;--font-primary: "Inter", "Segoe UI", system-ui, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 40px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 20px;--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .3s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden}body{font-family:var(--font-primary);font-size:16px;line-height:1.5;color:var(--text-primary);background-color:var(--bg-dark);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;height:100%}h1,h2,h3,h4,h5,h6{font-weight:600;letter-spacing:1px}button{font-family:inherit;font-size:inherit;border:none;background:none;cursor:pointer;outline:none}button:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:2px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.text-cyan{color:var(--accent-cyan)}.text-green{color:var(--efficiency-green)}.text-amber{color:var(--warning-amber)}.text-red{color:var(--critical-red)}.text-gold{color:var(--rank-gold)}.text-silver{color:var(--rank-silver)}.text-bronze{color:var(--rank-bronze)}.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}.glow-cyan{text-shadow:0 0 10px var(--accent-cyan)}.panel{background-color:var(--bg-panel);border-radius:var(--radius-lg);padding:var(--spacing-lg)}.panel-bordered{border:1px solid var(--accent-cyan-dim)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes glow{0%,to{box-shadow:0 0 10px var(--accent-cyan-dim)}50%{box-shadow:0 0 20px var(--accent-cyan-glow)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-glow{animation:glow 2s ease-in-out infinite}.animate-fade-in{animation:fadeIn .3s ease-out}.animate-slide-up{animation:slideUp .3s ease-out}:root{--hud-primary: var(--accent-cyan);--hud-secondary: var(--text-secondary);--hud-accent: var(--accent-cyan-dim);--hud-danger: var(--critical-red);--font-header: var(--font-primary);--font-body: var(--font-mono)}#tetris-viewport .hud-panel{position:absolute;z-index:100;background-color:transparent;border:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;clip-path:none}#tetris-viewport .stats-bar{top:15px;left:50%;transform:translate(-50%);display:flex;justify-content:center;align-items:center;width:auto;min-width:500px;background:#0a0a0fcc;border:1px solid var(--hud-accent);border-radius:var(--radius-lg);padding:8px 24px;gap:30px;font-family:var(--font-header);text-transform:uppercase;letter-spacing:1px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#tetris-viewport .stat-item{position:relative;width:125px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-bottom:none;padding-bottom:0}#tetris-viewport .stat-label{color:var(--text-muted);font-size:.7rem;font-weight:600;margin-bottom:2px;letter-spacing:1px}#tetris-viewport .stat-value{color:var(--text-primary);font-size:1.2rem;font-weight:700;font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-shadow:0 0 10px var(--accent-cyan-dim)}#tetris-viewport .preview-panel{position:absolute;top:100px;width:140px;height:auto;min-height:175px;display:flex;flex-direction:column;align-items:center;background:var(--bg-panel);border:1px solid var(--hud-accent);border-radius:var(--radius-lg);padding:5px;box-shadow:0 0 20px #00000080}#tetris-viewport .preview-panel.next-piece{left:max(10px,calc(50% + var(--board-half-width, 27.5%) + 10px))}#tetris-viewport .preview-panel.held-piece{right:max(10px,calc(50% + var(--board-half-width, 27.5%) + 10px))}#tetris-viewport .preview-label{font-family:var(--font-header);color:var(--accent-cyan)!important;background-color:transparent;padding:4px 0;margin-bottom:10px;width:100%;text-align:center;font-size:.8rem;font-weight:700;letter-spacing:2px;border-bottom:1px solid var(--hud-accent);border-radius:0}#tetris-viewport .preview-panel.next-piece .preview-label,#tetris-viewport .preview-panel.held-piece .preview-label{background-color:transparent;border-radius:0;text-align:center;margin:0 0 10px;align-self:center}#tetris-viewport .preview-canvas-container{flex:1;width:100%;position:relative;background:#0000004d;border:1px solid var(--text-muted);border-radius:var(--radius-md)}#tetris-viewport .preview-panel.next-piece .preview-canvas-container,#tetris-viewport .preview-panel.held-piece .preview-canvas-container{border:1px solid var(--text-muted);border-radius:var(--radius-md)}#tetris-viewport .empty-slot,#tetris-viewport .piece-preview-empty{font-family:var(--font-mono);color:var(--text-muted);font-size:.8rem;text-transform:uppercase;letter-spacing:1px;opacity:.7;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#tetris-viewport .piece-preview{width:100%;height:100%;object-fit:contain;image-rendering:crisp-edges;pointer-events:none}#tetris-viewport .piece-preview-next{filter:brightness(0) invert(1) sepia(1) saturate(10000%) hue-rotate(90deg)}#tetris-viewport .piece-preview-held{filter:brightness(0) invert(1) sepia(1) saturate(10000%) hue-rotate(30deg)}#tetris-viewport .controls-pill{position:absolute;bottom:30px;left:50%;transform:translate(-50%);display:flex;gap:24px;align-items:center;justify-content:center;z-index:90;pointer-events:none;background:#0a0a0fe6;border:1px solid var(--text-muted);border-radius:4px;padding:12px 30px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}#tetris-viewport .control-group{font-family:var(--font-mono);font-size:.75rem;color:var(--text-secondary);letter-spacing:1px;font-weight:500;display:flex;align-items:center}#tetris-viewport .key-highlight{color:var(--accent-cyan);margin-right:6px;font-weight:700;background:#00ddff1a;padding:2px 6px;border-radius:3px;border:1px solid var(--accent-cyan-dim)}#tetris-viewport .level-indicator-panel{position:absolute;right:max(10px,calc(50% + var(--board-half-width, 27.5%) + 10px));top:300px;display:flex;flex-direction:column;gap:6px;z-index:90;max-height:calc(100vh - 300px);overflow-y:auto;scrollbar-width:none;background-color:var(--bg-panel);border:1px solid var(--hud-accent);border-radius:var(--radius-md);padding:6px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);width:60px}#tetris-viewport .level-indicator-header{font-family:var(--font-header);color:var(--accent-cyan);font-size:.6rem;text-align:center;text-transform:uppercase;border-bottom:1px solid var(--hud-accent);padding-bottom:3px;margin-bottom:3px;letter-spacing:1px}#tetris-viewport .level-stack{display:flex;flex-direction:column-reverse;gap:4px}#tetris-viewport .layer-container{display:flex;align-items:center;gap:4px;transition:opacity .3s}#tetris-viewport .layer-grid{display:grid;width:40px;height:40px;background:#0009;border:1px solid #222;transform:perspective(80px) rotateX(15deg);transform-style:preserve-3d}#tetris-viewport .minimap-cell{width:100%;height:100%;border:none}#tetris-viewport .minimap-cell.filled{border:1px solid rgba(0,0,0,.3)}#tetris-viewport .telemetry-panel{position:absolute;left:max(10px,calc(50% + var(--board-half-width, 27.5%) + 10px));top:300px;width:160px;display:flex;flex-direction:column;gap:4px;z-index:150;font-size:.65rem;pointer-events:none;max-height:calc(100vh - 300px);overflow-y:auto;background-color:#0a0a0fd9;border:1px solid var(--hud-accent);border-radius:var(--radius-md);padding:10px;font-family:var(--font-mono);color:var(--accent-cyan);box-shadow:0 0 20px #00000080;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:80%}#tetris-viewport .tele-header{font-weight:700;font-size:.7rem;letter-spacing:2px;border-bottom:1px solid var(--hud-accent);padding-bottom:8px;margin-bottom:4px;display:flex;align-items:center;gap:8px;color:var(--text-primary)}#tetris-viewport .tele-dot{color:var(--efficiency-green);animation:blink 2s infinite;font-size:1em}#tetris-viewport .tele-section{font-weight:700;color:var(--text-muted);margin-top:5px;text-transform:uppercase;font-size:.6rem;letter-spacing:1px}#tetris-viewport .tele-row{display:flex;justify-content:space-between;align-items:center;line-height:1.2}#tetris-viewport .tele-label{color:var(--text-secondary);text-transform:uppercase;font-weight:500}#tetris-viewport .tele-value{color:var(--accent-cyan);font-weight:600;text-shadow:0 0 5px rgba(0,243,255,.3);font-variant-numeric:tabular-nums}#tetris-viewport .tele-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}#tetris-viewport .tele-footer{margin-top:10px;text-align:right;font-size:.55rem;color:var(--text-muted);letter-spacing:1px;border-top:1px solid rgba(255,255,255,.1);padding-top:4px}@keyframes blink{0%{opacity:1}50%{opacity:.3}to{opacity:1}}#tetris-viewport .game-over-modal{background-color:var(--bg-panel);border:1px solid var(--hud-danger);border-left:1px solid var(--hud-danger);border-radius:var(--radius-lg);box-shadow:0 0 50px #000000e6}#tetris-viewport .lcars-alert-header{background-color:var(--hud-danger);border-radius:var(--radius-sm);padding:10px 20px;margin:-30px -30px 20px;width:calc(100% + 60px);display:block}#tetris-viewport .game-over-title{color:#fff;text-align:center;font-size:1.5rem;letter-spacing:4px}#tetris-viewport .lcars-text-input{background-color:var(--bg-dark);color:var(--text-primary);border:1px solid var(--hud-accent);border-radius:var(--radius-sm);font-family:var(--font-mono)}#tetris-viewport .game-over-modal form .cyber-btn.primary{background-color:var(--hud-primary);color:var(--bg-dark);border-radius:var(--radius-sm);border:none}#tetris-viewport .cyber-btn{font-family:var(--font-header);border-radius:var(--radius-sm);background:var(--bg-panel-active);color:var(--text-primary);border:1px solid var(--text-muted)}#tetris-viewport .cyber-btn:hover{background:var(--accent-cyan);color:var(--bg-dark);box-shadow:0 0 15px var(--accent-cyan-dim)}#tetris-viewport{width:100%;height:100%;background-color:#000;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative}