:root{--fire-red: #d32f2f;--fire-red-dark: #9a0007;--fire-red-light: #ff6659;--bg: #000000;--surface: #0a0a0a;--surface-variant: #161616;--surface-elev-8: #1c1c1c;--on-dark: #e8e8e8;--on-dark-muted: #9e9e9e;--gold: #ffd54f;--silver: #bdbdbd;--bronze: #bf8970;--correct: #4caf50;--wrong: #ef5350;--primary-container: #9a0007;--on-primary-container: #ff6659;--topbar-h: 64px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;background-color:var(--bg);color:var(--on-dark);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font-family:inherit}input,button{color:inherit}.t-display-large{font-size:32px;font-weight:700;color:var(--on-dark);margin:0;line-height:1.2}.t-headline-large{font-size:24px;font-weight:700;color:var(--on-dark);margin:0}.t-headline-medium{font-size:20px;font-weight:600;color:var(--on-dark);margin:0}.t-body-large{font-size:16px;font-weight:400;color:var(--on-dark);margin:0}.t-body-medium{font-size:14px;font-weight:400;color:var(--on-dark-muted);margin:0}.t-label-large{font-size:14px;font-weight:600;color:var(--on-dark)}.t-label-small{font-size:11px;font-weight:500;color:var(--on-dark-muted)}.topbar{min-height:var(--topbar-h);display:flex;align-items:center;padding:env(safe-area-inset-top) 8px 0;background-color:var(--surface);border-bottom:1px solid #1f1f1f;position:sticky;top:0;z-index:10}.topbar>*{margin-top:0}.topbar .nav-btn,.topbar .action-btn{background:transparent;border:none;color:var(--on-dark);width:48px;height:48px;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.topbar .nav-btn:hover,.topbar .action-btn:hover{background-color:#ffffff14}.topbar .title{flex:1;font-size:22px;font-weight:400;padding:0 8px;color:var(--on-dark)}.topbar .logo{width:40px;height:40px;margin:0 8px}.page{min-height:calc(100vh - var(--topbar-h));padding:16px}.center{display:flex;align-items:center;justify-content:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background-color:var(--fire-red);color:#fff;border:none;border-radius:100px;padding:14px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .15s,opacity .15s,transform .05s;min-height:40px}.btn:hover:not(:disabled){background-color:#c12828}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.btn-full{width:100%}.btn.btn-large{min-height:52px;font-size:15px}.btn-outlined{background-color:transparent;color:var(--fire-red);border:1px solid #404040}.btn-outlined:hover:not(:disabled){background-color:#d32f2f14}.btn-text{background-color:transparent;color:var(--fire-red)}.btn-text:hover:not(:disabled){background-color:#d32f2f14}.icon-btn{background-color:transparent;border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--on-dark)}.icon-btn:hover{background-color:#ffffff14}.field{display:flex;flex-direction:column;gap:4px;width:100%}.field-label{font-size:12px;color:var(--on-dark-muted);margin-left:16px}.field-wrapper{display:flex;align-items:center;border:1px solid #404040;border-radius:var(--radius-sm);background-color:transparent;padding:0 12px;transition:border-color .15s}.field-wrapper:focus-within{border-color:var(--fire-red);border-width:2px;padding:0 11px}.field-wrapper.error{border-color:var(--wrong)}.field-wrapper .leading{color:var(--on-dark-muted);display:flex;align-items:center;margin-right:8px}.field-wrapper input{flex:1;background:transparent;border:none;outline:none;padding:16px 0;font-size:16px;color:var(--on-dark)}.field-wrapper .trailing-btn{background:transparent;border:none;color:var(--on-dark-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:4px}.field-error{font-size:12px;color:var(--wrong);margin-left:16px}.card{background-color:var(--surface-variant);border-radius:var(--radius-md);overflow:hidden}.card.elevated{background-color:var(--surface-variant);box-shadow:0 1px 3px #0006,0 1px 2px #00000080}.card.clickable{cursor:pointer;transition:background-color .15s,transform .05s}.card.clickable:hover{background-color:#1e1e1e}.card.clickable:active{transform:scale(.99)}.card.primary{background-color:var(--primary-container);color:var(--on-primary-container)}.card.primary .t-headline-medium,.card.primary .t-body-medium,.card.primary .t-headline-large,.card.primary .t-body-large{color:var(--on-primary-container)}.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;border:1px solid #404040;background-color:transparent;font-size:14px;color:var(--on-dark);cursor:default}.chip.correct{background-color:var(--correct);border-color:var(--correct);color:#fff}.chip.wrong{background-color:var(--wrong);border-color:var(--wrong);color:#fff}.chip.filter{cursor:pointer;transition:background-color .15s}.chip.filter:hover{background-color:#ffffff0f}.chip.filter.selected{background-color:#d32f2f40;border-color:var(--fire-red)}.dialog-scrim{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px}.dialog{background-color:#1d1d1d;border-radius:28px;width:100%;max-width:420px;padding:24px;display:flex;flex-direction:column;gap:16px;box-shadow:0 10px 40px #0009}.dialog h2{margin:0;font-size:24px;font-weight:500;color:var(--on-dark)}.dialog .dialog-text{font-size:14px;color:var(--on-dark-muted)}.dialog .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--fire-red);border-radius:50%;animation:spin 1s linear infinite}.spinner.small{width:20px;height:20px;border-width:2px}@keyframes spin{to{transform:rotate(360deg)}}.column{display:flex;flex-direction:column}.row{display:flex;flex-direction:row}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.login-wrapper{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:calc(32px + env(safe-area-inset-top)) 32px calc(32px + env(safe-area-inset-bottom));background-color:var(--bg)}.login-card{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:16px}.login-card .logo{width:120px;height:120px}.login-card .error{color:var(--wrong);font-size:14px;text-align:center}.home-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:16px 24px calc(16px + env(safe-area-inset-bottom));gap:16px;max-width:720px;margin:0 auto;min-height:calc(100vh - var(--topbar-h))}.menu-card{width:100%;display:flex;align-items:center;gap:16px;padding:20px;background-color:var(--surface-variant);border-radius:var(--radius-md);cursor:pointer;transition:background-color .15s,transform .05s;border:none;text-align:left;color:var(--on-dark)}.menu-card:hover{background-color:#1e1e1e}.menu-card:active{transform:scale(.99)}.menu-card.primary-container{background-color:var(--primary-container);color:var(--on-primary-container)}.menu-card.primary-container .icon{color:var(--fire-red-light)}.menu-card .icon{color:var(--fire-red);flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.menu-card .icon svg{width:40px;height:40px}.menu-card .info{display:flex;flex-direction:column}.menu-card .info .title{font-size:20px;font-weight:600}.menu-card .info .subtitle{font-size:14px;color:var(--on-dark-muted);margin-top:2px}.menu-card.primary-container .info .subtitle{color:#ffffffd9}.vehicle-list{display:flex;flex-direction:column;gap:16px;padding:16px 16px calc(16px + env(safe-area-inset-bottom));max-width:720px;margin:0 auto}.vehicle-card{display:flex;height:120px;background-color:var(--surface-variant);border-radius:var(--radius-md);cursor:pointer;overflow:hidden;transition:transform .05s,background-color .15s;box-shadow:0 1px 3px #0006,0 1px 2px #00000080}.vehicle-card:hover{background-color:#1e1e1e}.vehicle-card:active{transform:scale(.99)}.vehicle-card .preview{width:120px;height:120px;flex-shrink:0;object-fit:cover;background-color:#222}.vehicle-card .preview-empty{width:120px;height:120px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--on-dark-muted);background-color:#222;flex-shrink:0}.vehicle-card .vehicle-info{flex:1;padding:16px;display:flex;flex-direction:column;justify-content:center}.vehicle-card .vehicle-info .vehicle-name{font-size:22px;font-weight:700;color:var(--on-dark)}.vehicle-card .vehicle-info .vehicle-meta{font-size:14px;color:var(--on-dark-muted);margin-top:4px}.compartment-wrapper{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:20px;padding:16px 20px}.compartment-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.compartment-btn{height:56px;background-color:var(--fire-red);color:#fff;border:none;border-radius:100px;font-size:20px;font-weight:600;cursor:pointer;transition:background-color .15s,transform .05s}.compartment-btn:hover:not(:disabled){background-color:#c12828}.compartment-btn:active:not(:disabled){transform:scale(.98)}.compartment-btn:disabled{opacity:.5;cursor:not-allowed}.feedback-banner{width:100%;padding:12px;border-radius:var(--radius-md);text-align:left;color:#fff;font-weight:600;animation:fadein .3s}.feedback-banner.correct{background-color:var(--correct)}.feedback-banner.wrong{background-color:var(--wrong)}@keyframes fadein{0%{opacity:0}to{opacity:1}}.image-wrapper{flex:1;width:100%;display:flex;align-items:center;justify-content:center;background-color:var(--bg);overflow:hidden;padding:8px;min-height:0}.image-stage{position:relative;max-width:100%;max-height:100%}.image-stage img{display:block;width:100%;height:100%;object-fit:fill}.image-stage img.blurred{filter:blur(20px)}.dot-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;cursor:pointer;pointer-events:auto}.dot{position:absolute;transform:translate(-50%,-50%);pointer-events:none}.dot-outer{width:44px;height:44px;border-radius:50%;background-color:#ffffff40;display:flex;align-items:center;justify-content:center}.dot-inner{width:22px;height:22px;border-radius:50%;background-color:#fffc}.time-bar{width:100%;height:8px;background-color:#ffffff14;overflow:hidden}.time-bar .fill{height:100%;transition:width 1s linear,background-color .3s}.time-bar .fill.normal{background-color:var(--fire-red)}.time-bar .fill.warn{background-color:var(--gold)}.time-bar .fill.danger{background-color:var(--wrong)}.time-row{display:flex;justify-content:space-between;padding:6px 16px;font-size:20px;font-weight:600}.time-row .danger{color:var(--wrong)}.leaderboard-wrapper{display:flex;flex-direction:column;height:calc(100vh - var(--topbar-h))}.filter-row{display:flex;gap:8px;padding:8px 16px;overflow-x:auto;scrollbar-width:thin}.filter-row::-webkit-scrollbar{height:6px}.filter-row::-webkit-scrollbar-thumb{background-color:#2a2a2a;border-radius:3px}.lb-list{flex:1;overflow-y:auto;padding:16px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;max-width:720px;width:100%;margin:0 auto}.lb-row{display:flex;align-items:center;gap:16px;padding:12px 16px;border-radius:var(--radius-md);background-color:var(--surface)}.lb-row.top3{background-color:var(--surface-variant)}.lb-row .rank{width:40px;text-align:center;font-size:28px}.lb-row .rank-text{font-size:14px;font-weight:600}.lb-row .initials{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);font-weight:700;font-size:14px}.lb-row .user{flex:1;display:flex;flex-direction:column}.lb-row .user .user-name{font-size:16px;font-weight:600}.lb-row .user .vehicle-name{font-size:11px;color:var(--on-dark-muted);margin-top:2px}.lb-row .score{font-size:20px;font-weight:700}.lb-row .pts{font-size:11px}.exploration-panel{background-color:var(--surface-elev-8);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:16px;max-height:250px;display:flex;flex-direction:column;box-shadow:0 -8px 24px #00000080}.exploration-panel .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.exploration-panel .head .title{color:var(--fire-red);font-size:16px;font-weight:600}.exploration-panel hr{border:none;border-top:1px solid #2a2a2a;margin:4px 0 12px}.exploration-panel .list{overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-bottom:8px}.exploration-panel .name-card{background-color:#ffffff0d;border-radius:var(--radius-md);padding:12px;font-size:16px}.empty-state{display:flex;align-items:center;justify-content:center;min-height:60vh;color:var(--on-dark-muted);text-align:center;padding:24px}.assist-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background-color:var(--surface-variant);border-radius:8px;border:1px solid #2a2a2a;font-size:14px;color:var(--on-dark)}.assist-chip.correct{background-color:var(--correct);border-color:var(--correct);color:#fff}.assist-chip.wrong{background-color:var(--wrong);border-color:var(--wrong);color:#fff}.row-between{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px 16px}