/* The site's older pages off the games hub (Friends, Credits, Memories) in the
   hub's own look: its greys, Baloo 2, the Shop's blue for a primary action.
   html.oto-dark; each page's tokens are swapped here and its few hard-coded
   light surfaces darkened. With oto-page-back.css (the round back button). */
@font-face {
    font-family: "Baloo 2";
    src: url("/static/games/shared/fonts/Baloo2-latin.woff2") format("woff2");
    font-weight: 400 800;
    font-display: swap;
}

html.oto-dark {
    color-scheme: dark;
    --dk-bg: #1e1f22;
    --dk-panel: #2b2d31;
    --dk-pill: #313338;
    --dk-pill-hover: #383a40;
    --dk-line: #3f4147;
    --dk-ink: #f2f3f5;
    --dk-muted: #a6abb3;
    --dk-accent: linear-gradient(135deg, #3fd8ff 0%, #4f97ff 50%, #b9a0ff 100%);
    /* the shared tokens (oto-unified-ui.css) */
    --oto-bg: var(--dk-bg);
    --oto-surface: var(--dk-panel);
    --oto-surface-strong: var(--dk-panel);
    --oto-surface-soft: var(--dk-pill);
    --oto-ink: var(--dk-ink);
    --oto-muted: var(--dk-muted);
    --oto-quiet: #8a8f98;
    --oto-line: var(--dk-line);
    --oto-line-strong: #4a4d55;
    --oto-accent: #8fc8ff;
    --oto-accent-strong: #b9dcff;
    --oto-accent-soft: rgba(143, 200, 255, 0.12);
    --oto-shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.4);
    /* the games page's (Friends) */
    --gp-card: var(--dk-panel);
    --gp-ink: var(--dk-ink);
    --gp-muted: var(--dk-muted);
    --gp-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    /* Memories' own */
    --ink: var(--dk-ink);
    --muted: var(--dk-muted);
    --quiet: #8a8f98;
    --line: var(--dk-line);
    --accent: #8fc8ff;
    --accent-strong: #b9dcff;
    --accent-soft: rgba(143, 200, 255, 0.12);
    --page-bg: var(--dk-bg);
    background: var(--dk-bg);
}

html.oto-dark body,
html.oto-dark body.oto-ui-page {
    background: var(--dk-bg) !important;
    color: var(--dk-ink);
    font-family: "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html.oto-dark .oto-app-page,
html.oto-dark .friends-page {
    background: var(--dk-bg);
}

/* ---- Friends ---- */
html.oto-dark .friends-backdrop {
    background: var(--dk-bg);
    animation: none;
}

html.oto-dark .friends-curtain {
    display: none;
}

html.oto-dark .friends-hero h1 {
    color: var(--dk-ink);
    font-weight: 800;
}

html.oto-dark .friends-panel {
    border-color: var(--dk-line);
    box-shadow: none;
}

html.oto-dark .friend-code-value {
    background: var(--dk-pill);
    border-color: #4a4d55;
    color: var(--dk-ink);
}

html.oto-dark .friends-btn {
    border-color: transparent;
    background: var(--dk-pill);
    color: var(--dk-ink);
    box-shadow: none;
}

html.oto-dark .friends-btn:hover {
    background: var(--dk-pill-hover);
    box-shadow: none;
}

html.oto-dark .friends-btn.primary {
    background: var(--dk-accent);
    color: #fff;
}

html.oto-dark .friends-btn.danger {
    background: rgba(240, 163, 163, 0.12);
    color: #f0a3a3;
}

html.oto-dark .friend-add-row input {
    border-color: var(--dk-line);
    background: var(--dk-pill);
    color: var(--dk-ink);
}

html.oto-dark .friend-row {
    border-color: var(--dk-line);
}

html.oto-dark .friend-row-button:hover,
html.oto-dark .friend-row-hit:hover {
    background: var(--dk-pill);
    box-shadow: none;
}

html.oto-dark .friend-icon-btn {
    background: var(--dk-pill);
    color: var(--dk-muted);
}

html.oto-dark .friend-msg-btn:hover {
    background: rgba(143, 200, 255, 0.14);
    color: #8fc8ff;
}

/* ---- Credits (/billing) ---- */
html.oto-dark .balance-card,
html.oto-dark .topup-card,
html.oto-dark .history-card,
html.oto-dark .admin-card,
html.oto-dark .auth-gate {
    border-color: var(--dk-line);
    background: var(--dk-panel);
    box-shadow: none;
    color: var(--dk-ink);
}

html.oto-dark .preset-btn,
html.oto-dark .amount-input-wrap,
html.oto-dark .amount-input,
html.oto-dark .icon-btn {
    border-color: var(--dk-line);
    background: var(--dk-pill);
    color: var(--dk-ink);
}

html.oto-dark .preset-btn:hover,
html.oto-dark .preset-btn.is-active,
html.oto-dark .preset-btn[aria-pressed="true"] {
    border-color: #8fc8ff;
    background: rgba(143, 200, 255, 0.14);
    color: #fff;
}

html.oto-dark .btn-checkout {
    background: var(--dk-accent);
    color: #fff;
}

html.oto-dark .history-table th,
html.oto-dark .history-table td {
    border-color: var(--dk-line);
    color: var(--dk-ink);
}

html.oto-dark .billing-footer {
    background: transparent;
    border-color: var(--dk-line);
}

/* ---- Memories ---- */
html.oto-dark .memories-header {
    background: var(--dk-bg);
    border-color: var(--dk-line);
}

html.oto-dark .panel,
html.oto-dark .soft-panel,
html.oto-dark .session-card,
html.oto-dark .recap-card,
html.oto-dark .confirm-card {
    border-color: var(--dk-line);
    background: var(--dk-panel);
    box-shadow: none;
    color: var(--dk-ink);
}

html.oto-dark .hint-chip,
html.oto-dark .theme-chip,
html.oto-dark .char-chip,
html.oto-dark .ghost-btn,
html.oto-dark .tell-input {
    border-color: var(--dk-line);
    background: var(--dk-pill);
    color: var(--dk-ink);
}

html.oto-dark .primary-btn,
html.oto-dark .tell-send {
    background: var(--dk-accent);
    color: #fff;
}

/* ---- the Messages button: a small round icon, not a pill over the page ---- */
html.oto-dark .oto-messages-launcher {
    width: 48px;
    min-height: 48px;
    padding: 0;
    border-color: var(--dk-line);
    background: var(--dk-panel);
    color: var(--dk-ink);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

html.oto-dark .oto-messages-launcher > span:not(.oto-dm-nav-badge) {
    display: none;
}

html.oto-dark .oto-messages-launcher:hover,
html.oto-dark .oto-messages-launcher[aria-expanded="true"] {
    background: var(--dk-pill-hover);
}

html.oto-dark .oto-messages-launcher .oto-dm-nav-badge {
    border-color: var(--dk-bg);
}

/* ---- Get the app (/download, index.html): the phone apps, then the desktop ---- */
html.oto-dark .new-hero-title {
    color: var(--dk-ink) !important;
    font-family: "Baloo 2", system-ui, sans-serif !important;
    font-weight: 800 !important;
}

html.oto-dark .phone-downloads {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}

html.oto-dark .phone-download-btn {
    background: var(--dk-accent) !important;
    border: 0 !important;
    color: #fff !important;
}

html.oto-dark .phone-download-btn svg {
    fill: #fff;
}

html.oto-dark .phone-download-note {
    margin: 0;
    color: var(--dk-muted);
    font-size: 13px;
    font-weight: 700;
}

html.oto-dark .desktop-download-btn:not(.phone-download-btn) {
    border-color: var(--dk-line) !important;
    background: var(--dk-panel) !important;
    color: var(--dk-ink) !important;
}

html.oto-dark .desktop-download-btn:not(.phone-download-btn) svg {
    fill: var(--dk-ink);
}

html.oto-dark .social-icon-btn {
    border-color: var(--dk-line) !important;
    background: var(--dk-panel) !important;
}

html.oto-dark .social-icon-btn img {
    filter: invert(1);
}

html.oto-dark .oto-landing-content {
    background: transparent !important;
    box-shadow: none !important;
}

html.oto-dark .oto-landing-main .oto-backbar {
    padding-left: 16px;
}