:root { --mode-duel-accent:#be185d;--mode-duel-tint:#fdf0f6;--mode-duel-edge:#f3cadd;--mode-individual-accent:#0f766e;--mode-individual-tint:#e8f6f3;--mode-individual-edge:#bde3dc; }
[data-theme="dark"] { --mode-duel-accent:#f9a8d4;--mode-duel-tint:#382333;--mode-duel-edge:#694057;--mode-individual-accent:#5eead4;--mode-individual-tint:#183832;--mode-individual-edge:#31675a; }
[data-mode-color="duel"],.cup-page[data-mode-color="duel"] { --mode-accent:var(--mode-duel-accent);--mode-tint:var(--mode-duel-tint);--mode-edge:var(--mode-duel-edge); }
[data-mode-color="individual"],.cup-page[data-mode-color="individual"] { --mode-accent:var(--mode-individual-accent);--mode-tint:var(--mode-individual-tint);--mode-edge:var(--mode-individual-edge); }
.mode-picker { display:flex;align-items:center;gap:10px;min-width:0; }
.mode-picker-label { flex:none;color:var(--text-muted);font-size:13px;font-weight:500;white-space:nowrap; }
.mode-picker-trigger { display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:44px;padding:9px 12px;border:1px solid var(--mode-edge);border-radius:12px;background:var(--mode-tint);color:var(--text-main);font:inherit;font-size:14px;font-weight:600;line-height:1.3;cursor:pointer;white-space:nowrap; }
.mode-picker-trigger:hover,.mode-picker-trigger[aria-expanded="true"] { border-color:var(--mode-accent); }
.mode-picker-trigger:focus-visible,.mode-card:focus-visible { outline:2px solid var(--mode-accent);outline-offset:3px; }
.mode-picker-icon,.mode-picker-people { display:flex;align-items:center;flex:none;color:var(--mode-accent); }
.mode-picker-people { gap:1px; }
.mode-selector-symbol { display:block;width:21px;height:21px;flex:none; }
.mode-person { display:block;width:12px;height:17px;flex:none; }
.mode-picker-arrow { width:14px;height:14px;flex:none;color:var(--text-muted);transition:transform .15s; }
.mode-picker-trigger[aria-expanded="true"] .mode-picker-arrow { transform:rotate(180deg); }
.mode-picker-title { min-width:0;overflow:hidden;text-overflow:ellipsis; }
.mode-picker-bar-slot { display:none;flex:1 0 100%;width:100%; }
.mode-picker-bar-slot .mode-picker { width:100%; }
.mode-picker-bar-slot .mode-picker-trigger { flex:1; }
#main[data-header-layout="menu"] .mode-picker-bar-slot { display:flex; }
#main[data-header-layout="menu"] .top-bar-inner { flex-wrap:wrap; }
.mode-picker-menu { flex-wrap:wrap; }
.mode-picker-menu .mode-picker-trigger { flex:1 0 100%;justify-content:flex-start; }
.mode-picker-menu .mode-picker-arrow { margin-left:auto; }
.mode-catalog-open { overflow:hidden;scrollbar-gutter:stable; }
.game-page .mode-catalog { position:fixed;inset:0;width:min(740px,calc(100% - 40px));height:max-content;max-width:740px;max-height:calc(100dvh - 48px);margin:auto;padding:0;border:1px solid var(--gray-light);border-radius:20px;color:var(--text-main);background:var(--bg-white);box-shadow:var(--shadow-lg);animation:none; }
.game-page .mode-catalog:not([open]) { display:none; }
.game-page .mode-catalog[open] { display:flex; }
.mode-catalog::backdrop { background:rgb(15 23 42 / .4);backdrop-filter:blur(3px); }
.mode-catalog .modal-header { flex:none; }
.mode-catalog-body { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:20px;min-height:0;overflow:auto;overscroll-behavior:contain; }
.mode-catalog-group { display:flex;flex-direction:column;gap:9px;min-width:0; }
.mode-catalog-group h3 { padding:0 4px 3px;margin:0;font-size:13px;font-weight:600;color:var(--text-muted); }
.mode-card { display:flex;align-items:center;gap:12px;min-width:0;min-height:86px;padding:13px;border:1px solid var(--gray);border-radius:12px;background:var(--bg-white);color:var(--text-main);text-decoration:none; }
.mode-card:hover { background:var(--mode-tint); }
.mode-card.is-current { background:var(--mode-tint);border-color:var(--mode-accent); }
.mode-card-icon { display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:11px;background:var(--mode-tint);color:var(--mode-accent); }
.mode-card-copy { display:flex;flex-direction:column;gap:5px;min-width:0;flex:1; }
.mode-card-title { font-size:15px;font-weight:600;line-height:1.3; }
.mode-card-description { font-size:12px;font-weight:400;line-height:1.4;color:var(--text-muted); }
.mode-card-check { visibility:hidden;flex:none;width:18px;height:18px;color:var(--mode-accent); }
.mode-card-meta { display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:5px;flex:none;min-width:38px; }
.mode-card.is-current .mode-card-check { visibility:visible; }
.rules-family-tabs { display:flex;justify-content:center;gap:6px;margin-bottom:5px; }
.rules-family-tabs button { flex:1;padding:5px 12px;border:1px solid transparent;border-radius:8px;text-align:center;color:var(--text-muted);background:transparent;font:inherit;font-size:13px;font-weight:600;cursor:pointer; }
.rules-family-tabs button[aria-pressed="true"] { color:var(--text-main);background:var(--gray-light);border-color:var(--gray-light); }
@media(max-width:1024px) {
    .game-page .top-bar-inner { flex-wrap:wrap; }
    .mode-picker-bar-slot { display:flex;flex:1 0 100%;width:100%; }
    .mode-picker-bar-slot .mode-picker { width:100%; }
    .mode-picker-bar-slot .mode-picker-trigger { flex:1; }
}
@media(max-width:640px) {
    .game-page .mode-catalog { inset:auto 0 0;width:100%;max-height:calc(100dvh - 16px);margin:0 auto;border-radius:20px 20px 0 0;border-bottom:0; }
    .mode-catalog-body { grid-template-columns:1fr;gap:18px;padding:14px 14px max(14px,env(safe-area-inset-bottom)); }
    .mode-catalog-group { gap:6px; }
    .mode-card { min-height:65px;padding:10px;gap:10px; }
    .mode-card-title { font-size:14px; }
    .mode-picker-trigger { gap:6px;padding-inline:9px;font-size:13px; }
    .mode-picker-label { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .mode-picker-arrow { transition:none; } }
#rulesModal .rules-mode-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
.rules-mode-tabs [hidden] { display:none; }
.tutorial-launch { margin:0 0 12px; color:var(--mode-accent); background:var(--bg-white); border:1px solid var(--mode-edge); border-radius:8px; padding:8px 12px; cursor:pointer; }
.cup-format-card { display:flex; gap:18px; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.cup-format-card p { max-width:560px; }
.cup-format-card [data-create] { min-height:56px; padding:14px 24px; font-size:18px; font-weight:700; background:linear-gradient(135deg,#047857,#065f46); color:#fff; }
.cup-help-actions { display:flex; align-items:center; gap:8px; margin-top:20px; }
@media(max-width:640px) {
    .cup-format-card [data-create] { width:100%; min-height:60px; }
}

[hidden].app-update-btn,[hidden].app-update-dot,[hidden].daily-reminder { display:none!important; }
.hamburger-btn { position:relative; }
.app-update-count { display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:20px;background:#c2410c;color:#fff;font-size:12px;font-weight:700;line-height:1; }
.app-update-dot { position:absolute;right:0;top:1px;width:10px;height:10px;border-radius:50%;background:#f97316;box-shadow:0 0 0 2px var(--bg-white); }
.app-sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.daily-reminder { margin-block:16px; }
.daily-reminder-card { display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid var(--mode-daily-edge);border-radius:14px;background:var(--mode-daily-tint);color:var(--text-main); }
.daily-reminder-sun { display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;color:var(--mode-daily-accent);font-size:28px;line-height:1; }
.daily-reminder p { flex:1;margin:0;line-height:1.45; }.daily-reminder p span { display:block;color:var(--text-muted);font-size:13px; }
.daily-reminder a { color:var(--mode-daily-accent);font-weight:600;white-space:nowrap; }
.daily-reminder-close { display:grid;place-items:center;align-self:flex-start;width:28px;height:28px;flex-shrink:0;padding:0;border:0;background:transparent;color:var(--text-muted);font:24px/1 sans-serif;cursor:pointer;border-radius:6px; }
@media(max-width:640px) { .daily-reminder-card { gap:8px;flex-wrap:wrap;padding:10px; }.daily-reminder p { flex-basis:calc(100% - 80px);font-size:14px; }.daily-reminder a { margin-left:42px;font-size:13px; }.daily-reminder-close { position:absolute;right:10px;top:9px; }.daily-reminder-card { position:relative;padding-right:32px; } }

[data-theme="dark"] :is([data-mode-color="duel"],[data-mode-color="individual"]) { --mode-active-ink:#17212d; }