.settings-layer{ align-items:flex-end; padding-bottom:calc(106px + env(safe-area-inset-bottom)); background:#10152c33; } .settings-dialog{ max-width:410px; gap:16px; padding:22px; }
.settings-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; } .settings-row+.settings-row{ border-top:1px solid var(--line); } .settings-row strong{ display:block; font-size:13px; } .settings-row small{ display:block; color:var(--muted); font-size:11px; margin-top:4px; }
.toggle{ border:0; width:44px; height:26px; border-radius:20px; background:var(--line); padding:3px; flex-shrink:0; } .toggle:after{ content:''; display:block; width:20px; height:20px; background:var(--surface); border-radius:50%; box-shadow:0 1px 4px #0002; transition:transform .2s; } .toggle[aria-checked="true"]{ background:var(--accent); } .toggle[aria-checked="true"]:after{ transform:translateX(18px); }
.theme-label{ display:block; font-size:12px; font-weight:650; margin:8px 0 10px; } .theme-picker,.palette-picker{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .theme-option,.palette-option{ min-width:0; padding:10px 5px; font-size:11px; } .theme-option[aria-pressed="true"],.palette-option[aria-pressed="true"]{ border-color:var(--accent); background:var(--tint); color:var(--accent); }
.palette-panel{ min-width:0; border:0; padding:0; margin:10px 0 0; }
.palette-panel .theme-label{ font-size:10px; margin:0 0 6px; } .swatch-light{ background:linear-gradient(135deg,#f4f5fb 50%,#6555dd 50%); } .swatch-dark{ background:linear-gradient(135deg,#1e2235 50%,#ac9cff 50%); } .swatch-classic{ background:linear-gradient(135deg,#add8e6 50%,#d0dd1a 50%); }
.swatch-ocean{ background:linear-gradient(135deg,#eef7ff 50%,#175f9e 50%); }
.swatch-lime{ background:linear-gradient(135deg,#f7faef 50%,#bfdc98 50%); }
.swatch-sunset{ background:linear-gradient(135deg,#fff8ef 50%,#ffd09b 50%); }
html[data-theme="dark"] .swatch-ocean{ background:linear-gradient(135deg,#1e2a38 50%,#85c4ff 50%); }
html[data-theme="dark"] .swatch-lime{ background:linear-gradient(135deg,#1e3026 50%,#90dda6 50%); }
html[data-theme="dark"] .swatch-sunset{ background:linear-gradient(135deg,#38291f 50%,#ffc27b 50%); }
.quick-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; } .quick-actions button{ font-size:11px; display:flex; align-items:center; justify-content:center; gap:7px; padding:11px 6px; } .quick-actions svg{ width:16px; height:16px; }
.period-tabs{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding:4px; border-radius:13px; background:var(--soft); flex-shrink:0; margin-bottom:16px; } .period-tabs button{ font-size:12px; border:0; padding:10px 4px; background:transparent; color:var(--muted); border-radius:9px; white-space:nowrap; } .period-tabs button[aria-selected="true"]{ color:var(--accent); background:var(--surface); box-shadow:0 2px 6px #00000008; }
.personal-rating{ display:flex; align-items:center; gap:12px; background:var(--tint); border:1px solid color-mix(in srgb,var(--accent) 15%,transparent); border-radius:15px; padding:14px 16px; margin-bottom:16px; }
.personal-icon{ color:var(--accent); } .personal-icon svg{ width:28px; height:28px; } .personal-main{ flex:1; min-width:0; } .personal-main strong{ font-size:13px; } .personal-main small{ display:block; color:var(--muted); font-size:11px; margin-top:3px; line-height:1.4; } .personal-value{ text-align:right; white-space:nowrap; } .personal-value b{ font-size:23px; color:var(--accent); } .personal-value small{ display:block; color:var(--muted); font-size:10px; }
.podium{ display:grid; grid-template-columns:repeat(3,1fr); align-items:end; gap:10px; padding-top:8px; margin-bottom:14px; }
.podium-card{ position:relative; display:flex; flex-direction:column; align-items:center; min-width:0; border-radius:17px; background:var(--silver-bg); color:var(--silver); padding:14px 8px 12px; min-height:139px; border:1px solid transparent; }
.podium-card.gold{ grid-column:2; grid-row:1; background:var(--gold-bg); color:var(--gold); min-height:162px; } .podium-card.silver{ grid-column:1; grid-row:1; } .podium-card.bronze{ grid-column:3; grid-row:1; background:var(--bronze-bg); color:var(--bronze); }
.podium-card .rating-avatar,.podium-card .rating-avatar-placeholder{ width:36px; height:36px; font-size:14px; margin-bottom:8px; } .podium-card strong{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-size:12px; } .podium-score{ font-size:17px; font-weight:750; margin-top:6px; } .podium-card small{ font-size:9px; margin-top:2px; } .podium-medal{ position:absolute; top:-8px; right:10px; font-weight:800; font-size:11px; border-radius:50%; width:23px; height:23px; background:var(--surface); display:grid; place-items:center; border:1px solid currentColor; } .you-badge{ font-size:9px; font-weight:650; color:var(--accent); margin-left:5px; }
.leader-list{ display:flex; flex-direction:column; gap:6px; } .leader-row{ display:flex; align-items:center; gap:10px; border:1px solid var(--line); background:var(--soft); border-radius:12px; padding:9px 12px; min-width:0; } .leader-place{ width:20px; font-size:12px; color:var(--muted); text-align:center; flex-shrink:0; } .rating-avatar{ width:29px; height:29px; border-radius:50%; object-fit:cover; flex-shrink:0; } .rating-avatar-placeholder{ width:29px; height:29px; background:var(--surface); border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; font-size:11px; color:var(--accent); flex-shrink:0; }
.leader-name{ min-width:0; flex:1; } .leader-name strong{ font-size:12px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .leader-name small{ display:block; font-size:10px; color:var(--muted); margin-top:2px; } .leader-score{ font-size:14px; font-weight:700; white-space:nowrap; } .leader-score small{ display:block; font-size:9px; font-weight:400; color:var(--muted); text-align:right; }
.empty-state{ background:var(--soft); border:1px dashed var(--line); padding:24px 16px; text-align:center; border-radius:16px; } .empty-state strong{ display:block; font-size:14px; margin-bottom:7px; } .empty-state p{ font-size:12px; } .empty-state button{ margin-top:12px; font-size:12px; }
.error-state{ color:var(--error); } .error-state p{ color:var(--error); }
.rules-list{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .rule-card{ background:var(--soft); border:1px solid var(--line); padding:18px; border-radius:16px; } .rule-card strong{ display:block; font-size:13px; margin-bottom:8px; } .rule-card p{ font-size:12px; }
.rank-help-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; } .rank-help-item{ padding:14px; background:var(--soft); border:1px solid var(--line); border-radius:14px; } .rank-help-item strong{ display:block; font-size:13px; margin-bottom:4px; } .rank-help-item span{ color:var(--accent); font-size:12px; } .rank-help-item p{ font-size:11px; margin-top:5px; }
.mistake-count{ color:var(--muted); font-size:12px; } .mistake-question{ font-size:20px; line-height:1.4; margin:14px 0 20px; overflow-wrap:anywhere; } .mistake-answer{ border-radius:14px; padding:13px 16px; margin-top:10px; font-size:15px; line-height:1.4; overflow-wrap:anywhere; } .mistake-answer small{ display:block; font-size:10px; margin-bottom:5px; } .mistake-answer.wrong{ color:var(--error); background:var(--error-bg); } .mistake-answer.right{ color:var(--success); background:var(--success-bg); }
.pager{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:16px; } .pager button{ display:grid; place-items:center; width:36px; height:34px; padding:7px; border-radius:9px; } .pager span{ font-size:11px; color:var(--muted); }
@media(max-width:700px){
 .period-tabs button{ font-size:11px; } .personal-rating{ padding:11px 12px; } .personal-value b{ font-size:20px; } .personal-main strong{ font-size:12px; } .personal-main small{ font-size:10px; }
 .podium{ gap:7px; } .podium-card{ min-height:128px; padding:12px 5px 10px; } .podium-card.gold{ min-height:147px; } .podium-card strong{ font-size:11px; } .podium-score{ font-size:15px; } .leader-row{ padding:8px 10px; } .rules-list{ gap:8px; } .rule-card{ padding:12px; } .rule-card p{ font-size:11px; } .rule-card strong{ font-size:12px; } .mistake-question{ font-size:17px; }
}
@media(max-height:580px){
 .period-tabs button{ padding:7px 4px; font-size:11px; }
 .settings-layer{ align-items:center; padding:10px; } .settings-dialog{ width:560px; max-width:100%; gap:8px; } .settings-dialog .dialog-body{ display:grid; grid-template-columns:1fr 1fr; gap:0 22px; } .settings-toggles{ grid-row:1/3; } .settings-row{ padding:10px 0; } .theme-label{ margin:0 0 7px; } .theme-option{ padding:7px 4px; } .quick-actions{ margin-top:10px; } .quick-actions button{ padding:8px 4px; font-size:10px; }
}
@media(max-width:420px) and (max-height:580px){

 .settings-dialog .dialog-body{ display:block; } .settings-row{ padding:8px 0; } .theme-label{ margin-top:8px; } .settings-dialog{ max-width:340px; }
}
.period-tabs{ position:sticky; top:0; z-index:2; }
.rating-popup{
 background:linear-gradient(155deg,var(--surface),var(--tint)); border:1px solid var(--line); box-shadow:var(--shadow);
 padding:22px; gap:16px;
}
.rating-popup .dialog-header h2{ font-size:23px; letter-spacing:-.7px; }
.rating-popup .close-popup{ background:var(--surface); color:var(--accent); border-color:var(--line); border-radius:12px; }
.rating-popup .dialog-body{ padding:0 3px 3px; scrollbar-color:var(--line) transparent; }
.rating-popup .period-tabs{ background:var(--soft); border:1px solid var(--line); border-radius:15px; padding:4px; gap:4px; margin-bottom:16px; }
.rating-popup .period-tabs button{ color:var(--muted); font-weight:650; border-radius:11px; padding:10px 3px; font-size:12px; }
.rating-popup .period-tabs button[aria-selected="true"]{ background:var(--accent-fill); color:var(--accent-contrast); box-shadow:0 3px 0 color-mix(in srgb,var(--accent-fill) 70%,var(--text)),0 4px 9px color-mix(in srgb,var(--accent-fill) 30%,transparent); }
.rating-popup .personal-rating{ position:relative; border:1px solid var(--line); background:linear-gradient(115deg,var(--surface),var(--tint)); border-radius:18px; padding:12px 16px; gap:13px; margin-bottom:16px; box-shadow:0 4px 12px color-mix(in srgb,var(--text) 8%,transparent); }
.rating-popup .personal-rating:before{ content:""; position:absolute; left:-1px; top:20%; bottom:20%; width:4px; border-radius:0 4px 4px 0; background:var(--accent); }
.rating-popup .personal-main strong{ font-size:13px; font-weight:750; }
.rating-popup .personal-main small{ font-size:10px; margin-top:2px; }
.rating-popup .personal-value b{ font-size:25px; letter-spacing:-.7px; color:var(--accent); }
.rating-popup .personal-value small{ font-size:10px; }
.rating-popup .you-badge{ display:inline-block; vertical-align:middle; background:var(--tint); border:1px solid var(--line); border-radius:5px; padding:1px 4px; font-size:8px; line-height:1.2; color:var(--accent); }
.rating-popup .player-avatar{ --avatar-size:40px; position:relative; display:inline-grid; place-items:center; width:var(--avatar-size); height:var(--avatar-size); flex-shrink:0; border-radius:50%; background:linear-gradient(145deg,var(--surface),var(--tint)); box-shadow:0 0 0 2px var(--surface),0 2px 6px color-mix(in srgb,var(--text) 12%,transparent); }
.rating-popup .player-avatar .rating-avatar,.rating-popup .player-avatar .rating-avatar-placeholder{ width:100%; height:100%; margin:0; border:2px solid var(--surface); border-radius:50%; background:linear-gradient(145deg,var(--surface),var(--tint)); color:var(--accent); font-size:calc(var(--avatar-size) * .38); font-weight:750; }
.rating-popup .avatar-frame{ position:absolute; inset:-14%; width:128%; height:128%; pointer-events:none; filter:drop-shadow(0 1px 1px #55402b40); }
.rating-popup .frame-none .avatar-frame{ visibility:hidden; }
.rating-popup .frame-laurel{ color:#c19537; }
.rating-popup .frame-solar{ color:#a680dd; }
.rating-popup .frame-solar .avatar-frame{ fill:#dab9ff22; stroke-width:2.4; }
.rating-popup .frame-orbit{ color:#428bbf; }
.rating-popup .player-badges{ display:flex; align-items:center; gap:4px; min-height:19px; height:19px; margin-top:3px; max-width:100%; }
.rating-popup .player-badge{ display:inline-flex; align-items:center; justify-content:center; gap:2px; height:17px; min-width:19px; padding:1px 4px; border-radius:5px; border:1px solid currentColor; font-size:8px; font-weight:800; line-height:1; }
.rating-popup .player-badge svg{ width:12px; height:12px; }
.rating-popup .badge-amber{ color:#9b6519; background:#fff0c2; }
.rating-popup .badge-rose{ color:#aa4065; background:#ffe1ec; }
.rating-popup .badge-blue{ color:#2d71a8; background:#dcefff; }
.rating-popup .badge-violet{ color:#7651b0; background:#efe4ff; }
.rating-popup .badge-mint{ color:#328269; background:#ddf5e6; }
.rating-popup .podium{ position:relative; isolation:isolate; gap:8px; padding:25px 12px 0; margin-bottom:16px; border-radius:20px; background:radial-gradient(ellipse at 50% 85%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%); overflow:hidden; }
.rating-popup .podium:before{ content:""; position:absolute; z-index:-1; inset:-40px -30% 0; opacity:.4; background:repeating-conic-gradient(from -8deg at 50% 100%,var(--surface) 0deg 12deg,color-mix(in srgb,var(--accent) 25%,var(--surface)) 12deg 24deg); mask-image:linear-gradient(transparent,#000 50%); }
.rating-popup .podium-card{ --step-top:#ffe777; --step-face:#ffdc5d; --step-side:#dbb54b; position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; padding:0; border:0; background:transparent; border-radius:0; min-height:0; color:#997622; }
.rating-popup .podium-card.gold{ --step-top:#b7ec92; --step-face:#93d977; --step-side:#76b55e; background:transparent; min-height:0; color:#508440; }
.rating-popup .podium-card.bronze{ --step-top:#ffd4e6; --step-face:#f5b3d2; --step-side:#d08cab; background:transparent; color:#a4577d; }
.rating-popup .podium-person{ position:relative; display:flex; flex-direction:column; align-items:center; min-width:0; padding:0 2px 15px; }
.rating-popup .podium-person .player-avatar{ --avatar-size:53px; margin-bottom:9px; box-shadow:0 0 0 3px #fff,0 0 0 5px color-mix(in srgb,currentColor 28%,transparent),0 6px 12px #35486225; }
.rating-popup .podium-card.gold .player-avatar{ --avatar-size:61px; }
.rating-popup .podium-person strong{ font-size:12px; font-weight:750; max-width:100%; color:var(--text); line-height:18px; }
.rating-popup .podium-person .player-badges{ justify-content:center; margin:3px 0 7px; }
.rating-popup .podium-score{ display:flex; align-items:center; justify-content:center; gap:4px; max-width:100%; border:1px solid var(--line); background:var(--tint); color:var(--accent); border-radius:9px; padding:5px 7px; margin:0; font-size:12px; font-weight:800; white-space:nowrap; box-shadow:0 2px 0 color-mix(in srgb,var(--accent) 20%,var(--surface)); }
.rating-popup .podium-score svg{ width:13px; height:13px; flex-shrink:0; fill:var(--accent); stroke:var(--accent); }
.rating-popup .podium-score{ flex-wrap:wrap; }
.rating-popup .podium-score-number{ min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; line-height:1.2; }
.rating-popup .podium-score small{ margin:0; color:var(--muted); font-size:8px; font-weight:500; }
.rating-popup .podium-step{ position:relative; display:grid; place-items:center; height:63px; margin:0; background:linear-gradient(100deg,var(--step-face),color-mix(in srgb,var(--step-face) 45%,#fff)); border-radius:0 0 10px 10px; box-shadow:inset -9px 0 0 color-mix(in srgb,var(--step-side) 55%,transparent); }
.rating-popup .podium-step:before{ content:""; position:absolute; top:-12px; left:0; width:100%; height:13px; background:var(--step-top); clip-path:polygon(10% 0,90% 0,100% 100%,0 100%); }
.rating-popup .gold .podium-step{ height:84px; }
.rating-popup .bronze .podium-step{ height:48px; }
.rating-popup .podium-medal{ position:static; display:block; width:auto; height:auto; border:0; border-radius:0; background:none; font-size:38px; line-height:1; font-weight:900; color:#fff; text-shadow:0 2px 0 color-mix(in srgb,var(--step-side) 70%,transparent),0 -1px 0 #ffffff55; }
.rating-popup .podium-crown{ position:absolute; top:-26px; left:calc(50% - 16px); width:32px; height:26px; color:#c68a1e; transform:rotate(-8deg); z-index:1; }
.rating-popup .podium-crown svg{ width:100%; height:100%; fill:#ffe177; stroke-width:1.5; filter:drop-shadow(0 2px 0 #e6ad55); }
.rating-popup .podium-card.is-me .podium-person strong{ color:var(--accent); }
.rating-popup .podium-card.is-me .podium-score{ box-shadow:0 0 0 2px var(--accent); }
.rating-popup .leader-list{ gap:7px; }
.rating-popup .leader-row{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:8px 13px; gap:13px; min-height:64px; box-shadow:0 3px 0 color-mix(in srgb,var(--line) 55%,transparent),0 4px 10px color-mix(in srgb,var(--text) 5%,transparent); }
.rating-popup .leader-row.is-me{ background:var(--tint); border-color:var(--accent)!important; box-shadow:inset 3px 0 var(--accent),0 3px 0 color-mix(in srgb,var(--accent) 25%,var(--surface)); }
.rating-popup .leader-place{ width:18px; font-size:13px; font-weight:750; color:var(--muted); }
.rating-popup .leader-name strong{ font-size:13px; font-weight:700; line-height:17px; }
.rating-popup .leader-name small{ font-size:9px; margin-top:1px; line-height:12px; }
.rating-popup .leader-score{ font-size:17px; font-weight:800; color:var(--accent); letter-spacing:-.4px; }
.rating-popup .leader-score small{ font-size:9px; margin-top:2px; letter-spacing:0; }

html[data-theme="dark"] .rating-popup{
 background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--accent) 17%,transparent),transparent 68%),linear-gradient(145deg,var(--surface),var(--bg) 75%); border-color:var(--line); box-shadow:var(--shadow);
}
html[data-theme="dark"] .rating-popup .dialog-header h2{ color:var(--text); }
html[data-theme="dark"] .rating-popup .close-popup{ background:var(--tint); border-color:var(--line); color:var(--accent); }
html[data-theme="dark"] .rating-popup .dialog-body{ scrollbar-color:var(--line) transparent; }
html[data-theme="dark"] .rating-popup .period-tabs{ background:color-mix(in srgb,var(--surface) 82%,transparent); border-color:var(--line); }
html[data-theme="dark"] .rating-popup .period-tabs button{ color:var(--muted); }
html[data-theme="dark"] .rating-popup .period-tabs button[aria-selected="true"]{ background:var(--accent-fill); color:var(--accent-contrast); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--accent-contrast) 35%,transparent),0 3px 0 color-mix(in srgb,var(--accent-fill) 65%,var(--bg)); }
html[data-theme="dark"] .rating-popup .personal-rating{ background:color-mix(in srgb,var(--tint) 82%,transparent); border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--surface) 30%,transparent),0 4px 16px #10051130; }
html[data-theme="dark"] .rating-popup .personal-rating:before{ background:var(--accent); }
html[data-theme="dark"] .rating-popup .personal-value b{ color:var(--accent); }
html[data-theme="dark"] .rating-popup .you-badge{ background:var(--tint); border-color:var(--line); color:var(--accent); }
html[data-theme="dark"] .rating-popup .player-avatar{ box-shadow:0 0 0 2px var(--line),0 2px 6px #0d0418; background:var(--tint); }
html[data-theme="dark"] .rating-popup .player-avatar .rating-avatar,html[data-theme="dark"] .rating-popup .player-avatar .rating-avatar-placeholder{ border-color:var(--line); background:linear-gradient(145deg,var(--surface),var(--tint)); color:var(--accent); }
html[data-theme="dark"] .rating-popup .frame-laurel{ color:#e2b976; }
html[data-theme="dark"] .rating-popup .frame-solar{ color:#ddbefc; }
html[data-theme="dark"] .rating-popup .frame-orbit{ color:#f4b998; }
html[data-theme="dark"] .rating-popup .player-badge{ box-shadow:inset 0 1px 0 #fff4; border-color:color-mix(in srgb,currentColor 75%,transparent); }
html[data-theme="dark"] .rating-popup .badge-amber{ color:#f8d583; background:#7a442b; }
html[data-theme="dark"] .rating-popup .badge-rose{ color:#ffbcce; background:#833c59; }
html[data-theme="dark"] .rating-popup .badge-blue{ color:#a9daff; background:#334f76; }
html[data-theme="dark"] .rating-popup .badge-violet{ color:#e1c6ff; background:#644179; }
html[data-theme="dark"] .rating-popup .badge-mint{ color:#b6e8d7; background:#376555; }
html[data-theme="dark"] .rating-popup .podium{ background:radial-gradient(ellipse at 50% 80%,#ac6c483b,transparent 65%); }
html[data-theme="dark"] .rating-popup .podium:before{ opacity:.35; background:repeating-conic-gradient(from -9deg at 50% 95%,#eeba7640 0deg 7deg,transparent 7deg 23deg); }
html[data-theme="dark"] .rating-popup .podium:after{ content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(circle at 14% 31%,#ffd8a6 0 1px,transparent 2px),radial-gradient(circle at 81% 25%,#ffd8a6 0 1px,transparent 2px),radial-gradient(circle at 33% 12%,#fff3d5 0 1px,transparent 2px),radial-gradient(circle at 68% 62%,#fff3d5 0 1px,transparent 2px); }
html[data-theme="dark"] .rating-popup .podium-card.silver{ --step-top:#e5dae2; --step-face:#a4a0b2; --step-side:#6b657b; color:#d5ccde; }
html[data-theme="dark"] .rating-popup .podium-card.gold{ --step-top:#fce7b0; --step-face:#d1ab67; --step-side:#8a632e; color:#f6d793; }
html[data-theme="dark"] .rating-popup .podium-card.bronze{ --step-top:#ebbaa8; --step-face:#b77866; --step-side:#71453e; color:#e3a991; }
html[data-theme="dark"] .rating-popup .podium-person .player-avatar{ box-shadow:0 0 0 3px #482030,0 0 0 5px currentColor,0 0 20px color-mix(in srgb,currentColor 35%,transparent); }
html[data-theme="dark"] .rating-popup .podium-score{ color:var(--accent); background:color-mix(in srgb,var(--surface) 75%,transparent); border-color:color-mix(in srgb,var(--accent) 50%,var(--line)); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--accent-contrast) 12%,transparent); }
html[data-theme="dark"] .rating-popup .podium-score svg{ fill:var(--accent); stroke:var(--accent); }
html[data-theme="dark"] .rating-popup .podium-score small{ color:var(--muted); }
html[data-theme="dark"] .rating-popup .podium-step{ background:linear-gradient(110deg,color-mix(in srgb,var(--step-face) 80%,#fff),var(--step-face) 35%,var(--step-side) 100%); box-shadow:inset -9px 0 #0002,inset 0 1px #fff6; }
html[data-theme="dark"] .rating-popup .podium-medal{ color:color-mix(in srgb,var(--step-top) 90%,#fff); text-shadow:0 2px 1px var(--step-side),0 -1px 0 #fff5; }
html[data-theme="dark"] .rating-popup .leader-row{ background:color-mix(in srgb,var(--surface) 72%,transparent); border-color:var(--line); box-shadow:inset 0 1px 0 #e5a78c0a; }
html[data-theme="dark"] .rating-popup .leader-row.is-me{ background:color-mix(in srgb,var(--tint) 78%,transparent); border-color:var(--accent)!important; box-shadow:inset 3px 0 var(--accent); }
html[data-theme="dark"] .rating-popup .leader-place{ color:var(--muted); }
html[data-theme="dark"] .rating-popup .leader-score{ color:var(--accent); }
html[data-theme="dark"] .rating-popup{
 background-color:var(--bg);
 background-image:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 68%),linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,transparent),color-mix(in srgb,var(--bg) 94%,transparent));
 background-position:center top; background-size:cover; border-color:var(--line);
 box-shadow:var(--shadow),inset 0 1px 0 color-mix(in srgb,var(--accent-contrast) 12%,transparent);
}
html[data-theme="dark"] .rating-popup .dialog-header h2{ color:var(--text); }
html[data-theme="dark"] .rating-popup .period-tabs{ background:color-mix(in srgb,var(--surface) 72%,transparent); border-color:color-mix(in srgb,var(--line) 75%,transparent); backdrop-filter:blur(12px); }
html[data-theme="dark"] .rating-popup .period-tabs button{ color:var(--muted); }
html[data-theme="dark"] .rating-popup .period-tabs button[aria-selected="true"]{ color:var(--accent-contrast); background:var(--accent-fill); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--accent-contrast) 45%,transparent),0 2px 10px color-mix(in srgb,var(--accent-fill) 22%,transparent); }
html[data-theme="dark"] .rating-popup .personal-rating{ background:color-mix(in srgb,var(--tint) 80%,transparent); border-color:color-mix(in srgb,var(--accent) 56%,var(--line)); backdrop-filter:blur(12px); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--accent-contrast) 16%,transparent),0 6px 22px #15040c2b; }
html[data-theme="dark"] .rating-popup .podium{ padding-top:44px; padding-bottom:0; background:transparent; overflow:hidden; border-radius:0 0 16px 16px; }
html[data-theme="dark"] .rating-popup .podium:before,html[data-theme="dark"] .rating-popup .podium:after{ display:none; }
html[data-theme="dark"] .rating-popup .podium-person{ padding-bottom:16px; }
html[data-theme="dark"] .rating-popup .podium-person .player-avatar{ --avatar-size:55px; margin-bottom:27px; box-shadow:0 0 0 2px #e8d4f24d,0 0 20px #f8c79224; }
html[data-theme="dark"] .rating-popup .podium-card.gold .player-avatar{ --avatar-size:65px; margin-bottom:31px; }
html[data-theme="dark"] .rating-popup .podium-person .player-avatar:after{ content:""; position:absolute; z-index:3; inset:-38%; width:176%; height:176%; background-position:center; background-repeat:no-repeat; background-size:contain; pointer-events:none; filter:drop-shadow(0 4px 4px #19020d70); }
html[data-theme="dark"] .rating-popup .gold .player-avatar:after{ background-image:url("img/rating-gold.0fedb5e05e6c.webp"); }
html[data-theme="dark"] .rating-popup .silver .player-avatar:after{ background-image:url("img/rating-silver.36b8739df322.webp"); }
html[data-theme="dark"] .rating-popup .bronze .player-avatar:after{ background-image:url("img/rating-bronze.c9ac4a9aca50.webp"); }
html[data-theme="dark"] .rating-popup .podium-person .avatar-frame,html[data-theme="dark"] .rating-popup .podium-crown{ visibility:hidden; }
html[data-theme="dark"] .rating-popup .podium-person strong{ font-size:12px; text-shadow:0 1px 4px #230211; }
html[data-theme="dark"] .rating-popup .podium-score{ background:color-mix(in srgb,var(--surface) 72%,transparent); border-color:color-mix(in srgb,var(--accent) 50%,var(--line)); color:var(--accent); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--accent-contrast) 15%,transparent); }
html[data-theme="dark"] .rating-popup .podium-step{ border-radius:2px 2px 7px 7px; background:linear-gradient(100deg,var(--step-top),var(--step-face) 24%,var(--step-face) 69%,var(--step-side)); box-shadow:inset 0 2px 0 #fff6,inset -9px 0 0 #18080e25,0 5px 18px #17040b55; }
html[data-theme="dark"] .rating-popup .podium-step:after{ content:""; position:absolute; inset:3px 12px 5px 3px; border:1px solid #fff3; border-bottom-color:#3b1c1833; border-radius:2px; pointer-events:none; }
html[data-theme="dark"] .rating-popup .podium-card.gold{ --step-top:#ffe3a0; --step-face:#d6a143; --step-side:#ad7430; }
html[data-theme="dark"] .rating-popup .podium-card.silver{ --step-top:#edf0ff; --step-face:#a7b0cb; --step-side:#7d84a1; }
html[data-theme="dark"] .rating-popup .podium-card.bronze{ --step-top:#f7bdac; --step-face:#c88473; --step-side:#935146; }
html[data-theme="dark"] .rating-popup .podium-medal{ position:relative; z-index:1; font-size:39px; color:#fff6df; text-shadow:0 2px 2px #6b371f77,0 -1px 0 #fff9; }
html[data-theme="dark"] .rating-popup .leader-row{ background:color-mix(in srgb,var(--surface) 74%,transparent); border-color:color-mix(in srgb,var(--line) 80%,transparent); backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 #ffd9c610; }
html[data-theme="dark"] .rating-popup .leader-row.is-me{ background:color-mix(in srgb,var(--tint) 82%,transparent); border-color:var(--accent)!important; box-shadow:inset 3px 0 var(--accent),inset 0 1px 0 color-mix(in srgb,var(--accent-contrast) 12%,transparent); }
html[data-theme="dark"] .rating-popup .leader-place{ color:var(--muted); }
@media(max-width:360px){

 html[data-theme="dark"] .rating-popup .podium-person .player-avatar{ --avatar-size:45px; margin-bottom:23px; }
 html[data-theme="dark"] .rating-popup .podium-card.gold .player-avatar{ --avatar-size:53px; margin-bottom:27px; }
 html[data-theme="dark"] .rating-popup .podium-person strong{ font-size:10px; }
}

html[data-theme="classic"] .rating-popup{ --text:#293125; --muted:#6b7057; --accent:#347784; --soft:#f3edc8; --tint:#eef2cf; background:linear-gradient(150deg,#fffce9,#f3eed0); border-color:#d8d3b3; }
html[data-theme="classic"] .rating-popup .period-tabs{ background:#e9e5c2; border-color:#d6d2ac; }
html[data-theme="classic"] .rating-popup .period-tabs button[aria-selected="true"]{ background:linear-gradient(#5196a0,#347784); box-shadow:0 3px 0 #205460; }
html[data-theme="classic"] .rating-popup .personal-rating{ background:linear-gradient(110deg,#fffce9,#e6eccc); border-color:#cdd5a9; }
html[data-theme="classic"] .rating-popup .leader-row{ background:#fffdf0; border-color:#e5dfc5; box-shadow:0 3px 0 #dcd6b83d; }
html[data-theme="classic"] .rating-popup .leader-row.is-me{ background:#edf0ce; }
html[data-theme="classic"] .rating-popup .podium:before{ background:repeating-conic-gradient(from -8deg at 50% 100%,#fff 0deg 12deg,#dfefd4 12deg 24deg); }

@media(max-width:700px){

 .rating-popup{ padding:18px 14px; gap:13px; }
 .rating-popup .dialog-header h2{ font-size:21px; }
 .rating-popup .podium{ padding:26px 4px 0; gap:6px; }
 .rating-popup .personal-rating{ padding:11px 12px; gap:11px; }
 .rating-popup .personal-main strong{ font-size:12px; }
 .rating-popup .personal-main small{ font-size:9px; }
 .rating-popup .personal-value b{ font-size:22px; }
 .rating-popup .leader-row{ padding:8px 10px; gap:10px; min-height:64px; }
 .rating-popup .leader-name strong{ font-size:12px; }
 .rating-popup .podium-person strong{ font-size:11px; }
 .rating-popup .podium-score{ font-size:11px; padding:5px; gap:3px; }
 .rating-popup .podium-score small{ font-size:7px; }
}
@media(max-width:360px){

 .rating-popup{ padding:14px 10px; }
 .rating-popup .dialog-header h2{ font-size:19px; }
 .rating-popup .period-tabs button{ font-size:10px; padding:10px 2px; }
 .rating-popup .podium{ gap:5px; padding-left:2px; padding-right:2px; }
 .rating-popup .podium-person .player-avatar{ --avatar-size:45px; }
 .rating-popup .podium-card.gold .player-avatar{ --avatar-size:52px; }
 .rating-popup .podium-score{ font-size:10px; padding:4px; gap:2px; }
 .rating-popup .podium-score svg{ width:10px; height:10px; }
 .rating-popup .podium-person strong{ font-size:10px; }
 .rating-popup .leader-row{ gap:8px; padding:8px; }
 .rating-popup .leader-row .player-avatar{ --avatar-size:34px; }
 .rating-popup .leader-score{ font-size:15px; }
 .rating-popup .leader-name strong{ font-size:11px; }
 .rating-popup .personal-rating{ padding:10px; gap:9px; }
 .rating-popup .personal-rating .player-avatar{ --avatar-size:34px; }
 .rating-popup .personal-value b{ font-size:19px; }
}
.rating-popup .podium{ padding-top:44px; }
.rating-popup .podium .podium-person .player-avatar{ --avatar-size:55px; margin-bottom:27px; }
.rating-popup .podium .podium-card.gold .player-avatar{ --avatar-size:65px; margin-bottom:31px; }
.rating-popup .podium .player-avatar:after{ content:""; position:absolute; z-index:3; inset:-38%; width:176%; height:176%; background-position:center; background-repeat:no-repeat; background-size:contain; pointer-events:none; filter:drop-shadow(0 3px 3px #63486530); }
.rating-popup .podium .gold .player-avatar:after{ background-image:url("img/rating-gold.0fedb5e05e6c.webp"); }
.rating-popup .podium .silver .player-avatar:after{ background-image:url("img/rating-silver.36b8739df322.webp"); }
.rating-popup .podium .bronze .player-avatar:after{ background-image:url("img/rating-bronze.c9ac4a9aca50.webp"); }
.rating-popup .podium .avatar-frame,.rating-popup .podium-crown{ visibility:hidden; }
@media(max-width:360px){

 .rating-popup .podium .podium-person .player-avatar{ --avatar-size:45px; margin-bottom:23px; }
 .rating-popup .podium .podium-card.gold .player-avatar{ --avatar-size:53px; margin-bottom:27px; }
}
.personal-main .login-prompt{ flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:8px; }
.personal-main .login-prompt>span{ flex:none; min-width:0; }
.personal-main .login-btn{ color:#fff; background:#b84d0e; border-color:#b84d0e; border-radius:10px; padding:7px 12px; }
.personal-main .login-btn:hover{ background:#9e3d08; border-color:#9e3d08; }