*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}:root{--color-primary: #4a8bff;--color-secondary: #2d7aff;--color-accent: #ff6b6b;--color-bg-dark: #0a1628;--color-bg-light: #1a2947;--glass-bg: rgba(25, 35, 60, .85);--glass-border: rgba(255, 255, 255, .12);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px);--panel-max-width: 400px}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,var(--color-bg-dark) 0%,var(--color-bg-light) 50%,#0d1b2a 100%);color:#e8ebff;min-height:100vh;min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased}#root{width:100%;height:100vh;height:100dvh}.app-container{position:relative;width:100vw;width:100dvw;height:100vh;height:100dvh;background:linear-gradient(180deg,#0d1b2a,#0a1628,#08121f)}.app-container.menu-mode{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:2rem;padding-top:calc(2rem + var(--safe-top));padding-bottom:calc(2rem + var(--safe-bottom));overflow-y:auto}.menu-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem;max-width:500px;width:100%}.app-container.menu-mode h1{font-size:clamp(2rem,7vw,3.5rem);background:linear-gradient(135deg,#a8bfff,#6c9aff,#4a8bff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem;text-align:center}.app-container.menu-mode>p,.menu-content p{font-size:clamp(.95rem,2vw,1.2rem);max-width:600px;text-align:center;line-height:1.6;opacity:.9}.game-mode-selector{width:100%;max-width:400px;text-align:center}.game-mode-selector h3{font-size:.9rem;text-transform:uppercase;letter-spacing:1px;color:#ffffff80;margin-bottom:.75rem}.mode-options{display:flex;gap:1rem;justify-content:center}.mode-btn{flex:1;padding:1rem;border-radius:14px;border:2px solid rgba(255,255,255,.12);background:#ffffff0d;color:#e8ebff;cursor:pointer;transition:all .25s ease;display:flex;flex-direction:column;align-items:center;gap:.3rem;min-width:120px;min-height:80px}.mode-btn:hover{border-color:#4a8bff66;background:#4a8bff1a}.mode-btn-active{border-color:#4a8bff;background:#4a8bff26;box-shadow:0 0 20px #4a8bff26}.mode-name{font-size:1.1rem;font-weight:600}.mode-desc{font-size:.85rem;color:#ffffff8c}.menu-difficulty-summary{margin-top:-.5rem}.dist-text{font-size:.8rem;color:#fff6;letter-spacing:.5px}.btn-primary{padding:.875rem 2.5rem;font-size:1.1rem;font-weight:600;border-radius:12px;background:linear-gradient(135deg,#4a8bff,#2d7aff);color:#fff;border:none;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 20px #4a8bff4d;min-height:48px;touch-action:manipulation}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px #4a8bff66}.btn-primary:active{transform:translateY(0)}.btn-secondary{padding:.75rem 2rem;font-size:1rem;font-weight:600;border-radius:12px;background:#ffffff14;color:#e8ebff;border:1px solid rgba(255,255,255,.15);cursor:pointer;transition:all .3s ease;min-height:48px;touch-action:manipulation}.btn-secondary:hover{background:#ffffff26;transform:translateY(-2px)}.globe-container{width:100%;height:100vh;height:100dvh}.question-panel{position:fixed;z-index:100;pointer-events:none}.question-panel>*{pointer-events:auto}.question-panel.bottom{bottom:calc(1rem + var(--safe-bottom));left:50%;transform:translate(-50%);width:calc(100% - 2rem);max-width:var(--panel-max-width)}.question-panel.bottom .hud-panel{padding:.7rem;border-radius:14px}.question-panel.left{display:none;left:1.5rem;top:50%;transform:translateY(-50%)}.question-panel.right{display:none;right:1.5rem;top:50%;transform:translateY(-50%)}@media (min-width: 768px){.question-panel.bottom{display:none}.question-panel.left{display:block}}.hud-panel{background:var(--glass-bg);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-radius:16px;border:1px solid var(--glass-border);box-shadow:0 8px 32px #0006;padding:1.5rem;max-width:var(--panel-max-width)}@media (max-width: 767px){.hud-panel{padding:1rem}.question-panel.bottom .hud-panel{padding:.7rem}.question-panel.bottom .query-text{font-size:clamp(.85rem,2.5vw,1rem);margin-bottom:.5rem}.question-panel.bottom .category-tag{font-size:.6rem;margin-bottom:.4rem}.question-panel.bottom .hud-panel>div:first-child{margin-bottom:.4rem!important}.question-panel.bottom button{margin-top:.4rem!important;padding:4px 10px!important;font-size:.75rem!important}.question-panel.bottom .hint-text{margin-top:.3rem!important;font-size:.7rem}.question-panel.bottom .explanation-box{margin-top:.4rem!important}.question-panel.bottom .explanation-box p{font-size:.75rem}}.category-tag{display:inline-block;font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:#fff9;margin-bottom:.75rem}.hud-panel .query-text{font-size:clamp(1rem,3vw,1.3rem);font-weight:600;line-height:1.5;margin-bottom:.75rem;animation:queryFadeIn .35s ease-out}@keyframes queryFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.difficulty-badge{display:inline-block;padding:.2rem .6rem;border-radius:99px;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.hint-text{font-size:.8rem;color:#ffffff80;margin-top:1rem}.round-counter{position:fixed;top:calc(.5rem + var(--safe-top));left:50%;transform:translate(-50%);z-index:50;display:flex;gap:.75rem;align-items:center;background:#19233cd9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:.4rem 1rem;border-radius:20px;border:1px solid var(--glass-border);font-size:.8rem;-webkit-user-select:none;user-select:none;white-space:nowrap}.round-text{display:flex;align-items:center;gap:.5rem;color:#ffffffbf}.round-diff{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:99px}.diff-easy{color:#4ade80;background:#22c55e33}.diff-medium{color:#facc15;background:#facc1533}.diff-hard{color:#f97316;background:#f9731633}.diff-expert{color:#f44;background:#f443}.round-score{color:#ffffff80}@media (max-width: 767px){.round-counter{top:0;left:0;transform:none;width:100%;justify-content:space-between;border-radius:0;padding:.5rem 1rem;padding-top:calc(.5rem + var(--safe-top))}}.result-overlay{position:fixed;bottom:calc(1rem + var(--safe-bottom));left:50%;transform:translate(-50%);z-index:999;display:flex;align-items:center;justify-content:center;pointer-events:none}.result-overlay>*{pointer-events:auto}.result-card{position:relative;padding:clamp(1rem,3vw,1.5rem);max-width:360px;width:calc(100% - 2rem);text-align:center}.result-title{font-size:clamp(1.1rem,2.5vw,1.4rem);color:#e8ebff;margin-bottom:.75rem}.close-btn{position:absolute;top:.5rem;right:.5rem;font-size:1.75rem;line-height:1;color:#fff9;background:none;border:none;cursor:pointer;padding:.5rem;touch-action:manipulation}.close-btn:hover{color:#fff}.score-display{text-align:center;margin-bottom:.5rem}.score-display .value{font-size:clamp(2rem,6vw,3rem);font-weight:800;background:linear-gradient(135deg,#e8ebff,#d4daf9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.metric-row{display:flex;gap:.75rem;margin-bottom:.75rem}.metric-item{background:#4a8bff26;border-radius:8px;padding:.5rem .75rem;min-width:100px;flex:1}.metric-item .m-label{display:block;font-size:.7rem;color:#fff9;margin-bottom:.2rem}.metric-item .value{font-size:clamp(1rem,2.5vw,1.5rem);font-weight:700;color:#e8ebff}.explanation-box{background:#ffffff0d;border-radius:12px;padding:.75rem;margin-top:.75rem}.explanation-box p{font-size:.9rem;line-height:1.6;color:#fffc}.finish-screen{display:flex;align-items:center;justify-content:center;width:100%;min-height:100vh;min-height:100dvh;padding:2rem;padding-top:calc(2rem + var(--safe-top));padding-bottom:calc(2rem + var(--safe-bottom))}.finish-card{background:var(--glass-bg);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-radius:24px;border:1px solid var(--glass-border);box-shadow:0 8px 32px #0006;padding:clamp(1.5rem,4vw,3rem);max-width:520px;width:100%;text-align:center}.finish-title{font-size:clamp(1.5rem,4vw,2.2rem);font-weight:800;background:linear-gradient(135deg,#a8bfff,#6c9aff,#4a8bff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1.5rem}.finish-stats{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}.stat-row{display:flex;gap:.75rem}.stat-item{flex:1;background:#4a8bff1f;border-radius:12px;padding:.75rem;display:flex;flex-direction:column;gap:.25rem}.stat-label{font-size:.65rem;text-transform:uppercase;letter-spacing:1px;color:#ffffff8c;font-weight:500}.stat-value{font-size:clamp(1rem,2.5vw,1.3rem);font-weight:700;color:#e8ebff}.username-input{width:100%;padding:.75rem 1rem;font-size:1rem;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:#ffffff0f;color:#e8ebff;outline:none;transition:border-color .2s}.username-input:focus{border-color:#4a8bff}.username-input::placeholder{color:#ffffff4d}.username-error{color:#ff6b6b;font-size:.8rem;margin-top:.35rem;text-align:left}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:100vh;min-height:100dvh;gap:2rem;padding:2rem}.loading-screen h1{font-size:clamp(1.5rem,5vw,2rem);font-weight:600;color:#e8ebff}.loading-spinner{width:48px;height:48px;border:3px solid rgba(74,139,255,.2);border-top:3px solid #4a8bff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-bar-track{width:min(280px,80vw);height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}.loading-bar-fill{height:100%;background:linear-gradient(90deg,#4a8bff,#6c9aff);border-radius:3px;transition:width .3s ease;width:0%}.loading-error{color:#ff6b6b;font-size:.95rem;text-align:center;max-width:400px}.leaderboard-screen{display:flex;align-items:flex-start;justify-content:center;width:100%;min-height:100vh;min-height:100dvh;padding:2rem;padding-top:calc(2rem + var(--safe-top));padding-bottom:calc(2rem + var(--safe-bottom))}.leaderboard-card{background:var(--glass-bg);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-radius:24px;border:1px solid var(--glass-border);box-shadow:0 8px 32px #0006;padding:clamp(1.25rem,3vw,2.5rem);max-width:640px;width:100%;text-align:center;margin-top:auto;margin-bottom:auto}.leaderboard-title{font-size:clamp(1.3rem,3.5vw,1.8rem);font-weight:800;background:linear-gradient(135deg,#a8bfff,#6c9aff,#4a8bff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem}.lb-mode-tabs{display:flex;gap:.5rem;justify-content:center;margin-bottom:1rem}.lb-tab{padding:.5rem 1.25rem;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:transparent;color:#ffffff80;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s ease;touch-action:manipulation}.lb-tab:hover{border-color:#4a8bff66;color:#fffc}.lb-tab-active{border-color:#4a8bff;background:#4a8bff26;color:#fff}.leaderboard-table{width:100%;border-collapse:collapse;margin-bottom:1.5rem}.leaderboard-table th{font-size:.65rem;text-transform:uppercase;letter-spacing:1px;color:#ffffff80;padding:.5rem;border-bottom:1px solid rgba(255,255,255,.1);text-align:left}.leaderboard-table td{padding:.5rem;font-size:.85rem;color:#e8ebff;border-bottom:1px solid rgba(255,255,255,.05)}.leaderboard-table tr.current-player{background:#4a8bff26}.leaderboard-table tr.current-player td{color:#fff;font-weight:600}.leaderboard-rank{font-weight:700;width:2rem;color:#ffffff80}.leaderboard-table tr.current-player .leaderboard-rank{color:#4a8bff}.leaderboard-username{text-align:left;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard-score{text-align:right;font-weight:600}.leaderboard-dist{text-align:right;color:#fff9;font-size:.75rem}.leaderboard-date{text-align:right;color:#fff6;font-size:.7rem}.leaderboard-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}@media (max-width: 480px){.app-container.menu-mode{padding:1.5rem 1rem}.mode-btn{min-width:100px;min-height:70px;padding:.75rem}.mode-name{font-size:1rem}.btn-primary,.btn-secondary{padding:.75rem 1.5rem;font-size:1rem;width:100%}.leaderboard-actions .btn-primary,.leaderboard-actions .btn-secondary{width:auto;flex:1}.stat-row,.metric-row{flex-direction:column;gap:.5rem}.finish-card{padding:1.25rem}.result-card{max-width:100%}}@media (min-width: 768px) and (max-width: 1024px){.question-panel.left{left:1rem}.hud-panel{max-width:320px;padding:1.25rem}}@media (orientation: landscape) and (max-height: 500px){.question-panel.top .hud-panel{padding:.6rem .8rem}.question-panel.top .query-text{font-size:.95rem;margin-bottom:.4rem}.question-panel.top .category-tag{margin-bottom:.3rem}.question-panel.top .hint-text{display:none}}html{overscroll-behavior:none}