/* ============================================================
 * TOGYZ PRO — Dala Noir Premium Redesign
 * Legacy component skin; structural layout is owned by home-redesign/play-platform/milestone.
 * Safe: never touches game logic files or DOM IDs
 * ============================================================ */

/* ── REFINED DARK TOKENS ─────────────────────────────────── */
:root {
    --bg-void:      #09090F;
    --bg-base:      #0F0F18;
    --bg-surface:   #141420;
    --bg-elevated:  #1A1A28;
    --bg-overlay:   #212132;
    --bg-card:      #161622;
    --bg-input:     #0F0F18;

    --gold:         #C89B3C;
    --gold-bright:  #E8B84B;
    --gold-light:   #F5D080;
    --gold-dim:     #8B6820;
    --gold-glow:    rgba(232,184,75,0.18);
    --shadow-gold:  0 0 24px rgba(200,151,61,0.30);
    --border-gold:  rgba(200,151,61,0.28);

    --green:        #3D8A55;
    --green-bright: #52AA6F;
    --red:          #C24040;
    --red-bright:   #E05555;

    --text-primary:   #EDE8DF;
    --text-secondary: #9A9180;
    --text-muted:     #6A6258;
    --text-disabled:  #45403A;

    --border:         rgba(255,243,220,0.07);
    --border-strong:  rgba(255,243,220,0.13);

    --ink-strong:   #EDE8DF;
    --ink-base:     #B4AA98;
    --ink-muted:    #78706A;
    --ink-disabled: #48443E;
    --line-soft:    rgba(255,243,220,0.06);
    --line-strong:  rgba(255,243,220,0.12);

    --board-bg:     #130D07;
    --board-mid:    #1E1408;
    --board-border: rgba(90,55,15,0.6);
    --pit-bg:       #0D0905;
    --pit-border:   rgba(80,48,12,0.9);
    --stone-color:  #E8D8B0;

    --sidebar-w:    240px;
    --header-h:     60px;

    --t-fast: 0.13s;
    --t-base: 0.22s;
    --ease:   cubic-bezier(0.22,0.61,0.36,1);

    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  16px;
    --radius-xl:  22px;
    --radius-pill:999px;
}

/* ── GLOBAL BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,243,220,0.08); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,243,220,0.14); }

::selection { background: rgba(200,155,60,0.28); color: var(--ink-strong); }

/* ── APP SHELL ───────────────────────────────────────────── */
/* ── GLOBAL HEADER ───────────────────────────────────────── */
.sm-app-header {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 0 20px 0 20px !important;
    height: var(--header-h) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 60 !important;
}

.sm-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display, 'Unbounded', sans-serif);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.02em;
    color: var(--ink-strong);
    text-decoration: none;
}

.sm-logo-image {
    display: block;
    width: clamp(148px, 13vw, 180px);
    height: auto;
    max-height: 52px;
    object-fit: contain;
    border-radius: 7px;
    flex-shrink: 0;
}

.sm-user-pod {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 11px 5px 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.sm-user-pod:hover {
    border-color: var(--border-gold);
    background: var(--bg-overlay);
}

.sm-user-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--bg-overlay);
    border: 1.5px solid var(--border-gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.sm-user-meta { display: flex; flex-direction: column; gap: 1px; }
.sm-user-name {
    font-size: 13px; font-weight: 600;
    color: var(--ink-strong); line-height: 1.2;
}
.sm-user-elo {
    font-size: 11px; font-weight: 600;
    color: var(--gold); line-height: 1.2;
}

.sm-streak {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    background: rgba(194,64,64,0.12);
    border: 1px solid rgba(194,64,64,0.2);
    border-radius: var(--radius-pill);
    font-size: 12px; font-weight: 700;
    color: #f08080;
}

/* ── SIDEBAR ─────────────────────────────────────────────── */
.sm-app-sidebar {
    background: var(--bg-surface) !important;
    border-right: 1px solid var(--border) !important;
    padding: 12px 8px !important;
    overflow-y: auto;
    scrollbar-width: none;
}
.sm-app-sidebar::-webkit-scrollbar { display: none; }
.sm-app-sidebar::before {
    content: '';
    position: absolute; inset: 0;
    top: 0; height: 160px; pointer-events: none;
    background: radial-gradient(ellipse at 50% 0%, rgba(200,155,60,0.06) 0%, transparent 70%);
}

.sm-nav-section {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    color: var(--ink-disabled) !important;
    padding: 14px 10px 5px !important;
    margin-top: 4px !important;
}

.sm-nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 8px 10px !important;
    border-radius: 9px !important;
    margin: 1px 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--ink-muted) !important;
    font-family: var(--font-body, 'DM Sans', sans-serif) !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    cursor: pointer !important;
    text-align: left !important;
    width: 100% !important;
    line-height: 1.3 !important;
    transition: all var(--t-fast) var(--ease) !important;
}
.sm-nav-item:hover {
    background: var(--bg-elevated) !important;
    color: var(--ink-base) !important;
}
.sm-nav-item.is-active {
    background: rgba(200,155,60,0.11) !important;
    color: var(--gold-bright) !important;
    font-weight: 600 !important;
}
.sm-nav-item i {
    width: 17px !important; text-align: center !important;
    font-size: 13px !important; flex-shrink: 0 !important;
}
.sm-nav-item.is-active i { color: var(--gold) !important; }
.sm-nav-spacer { flex: 1 !important; min-height: 16px !important; }

/* ── MAIN CONTENT AREA ───────────────────────────────────── */
.sm-app-main {
    background: var(--bg-base) !important;
}
.sm-app-main > .screen {
    background: var(--bg-base) !important;
}

/* ── HOME SCREEN ─────────────────────────────────────────── */
#screen-home.sm-home { max-width: 780px; margin: 0 auto; }

.sm-page-content { padding-bottom: 40px; }

.sm-greeting {
    font-family: var(--font-display, 'Unbounded', sans-serif) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--ink-strong) !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 3px !important;
}
.sm-greeting-sub {
    color: var(--ink-muted) !important;
    font-size: 13px !important;
    margin: 0 0 22px !important;
}

/* Hero play card */
.sm-hero {
    background: linear-gradient(135deg, #1C1408 0%, #110D07 100%) !important;
    border: 1px solid rgba(200,155,60,0.2) !important;
    border-radius: var(--radius-xl) !important;
    padding: 26px 26px 26px 26px !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
    margin-bottom: 16px !important;
    transition: border-color var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease) !important;
    min-height: 160px;
}
.sm-hero::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse at 10% 50%, rgba(200,155,60,0.07) 0%, transparent 40%),
        radial-gradient(ellipse at 90% 10%, rgba(61,138,85,0.05) 0%, transparent 35%);
}
.sm-hero:hover {
    border-color: rgba(200,155,60,0.38) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.55) !important;
}

.sm-hero-live {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important; font-weight: 600 !important;
    color: var(--green-bright) !important;
    padding: 3px 10px !important;
    background: rgba(61,138,85,0.12) !important;
    border: 1px solid rgba(61,138,85,0.24) !important;
    border-radius: var(--radius-pill) !important;
    margin-bottom: 10px !important;
}
.sm-hero-live::before {
    content: ''; width: 6px; height: 6px;
    border-radius: 50%; background: var(--green-bright);
    animation: dot-pulse 2s infinite;
}
@keyframes dot-pulse {
    0%,100% { opacity:1; }
    50%      { opacity:0.35; }
}

.sm-hero-eyebrow {
    font-size: 9.5px !important; font-weight: 700 !important;
    letter-spacing: 0.1em !important; text-transform: uppercase !important;
    color: var(--gold) !important; margin-bottom: 6px !important;
}
.sm-hero-title {
    font-family: var(--font-display, 'Unbounded', sans-serif) !important;
    font-size: 24px !important; font-weight: 700 !important;
    color: var(--ink-strong) !important; letter-spacing: -0.02em !important;
    margin: 0 0 8px !important; line-height: 1.15 !important;
}
.sm-hero-sub {
    font-size: 13px !important; color: var(--ink-muted) !important;
    margin: 0 0 18px !important; max-width: 300px; line-height: 1.5 !important;
}
.sm-hero-cta {
    background: var(--gold) !important;
    color: #0E0E18 !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 9px !important;
    font-family: var(--font-body, 'DM Sans', sans-serif) !important;
    font-weight: 700 !important; font-size: 13.5px !important;
    cursor: pointer !important;
    display: inline-flex !important; align-items: center !important; gap: 7px !important;
    transition: all var(--t-fast) var(--ease) !important;
    letter-spacing: 0.01em !important;
}
.sm-hero-cta:hover {
    background: var(--gold-bright) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-gold) !important;
}

.sm-hero-decor { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); opacity: 0.25; }
.sm-hero-board { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.sm-hero-pit {
    width: 32px; height: 32px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #2A1A0A, #0E0805);
    border: 1px solid rgba(200,155,60,0.3);
}

/* Quick actions */
.sm-actions {
    display: grid !important;
    grid-template-columns: repeat(3,1fr) !important;
    gap: 10px !important; margin-bottom: 16px !important;
}
.sm-action {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 17px 15px !important;
    cursor: pointer !important;
    transition: all var(--t-base) var(--ease) !important;
    text-align: left !important;
}
.sm-action:hover {
    border-color: rgba(200,155,60,0.28) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.4) !important;
}
.sm-action-icon {
    width: 38px; height: 38px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; margin-bottom: 11px;
}
.sm-action--ai   .sm-action-icon { background:rgba(200,155,60,0.12); color:var(--gold); }
.sm-action--tourn .sm-action-icon { background:rgba(61,138,85,0.12);  color:var(--green-bright); }
.sm-action--puzzle .sm-action-icon { background:rgba(74,125,168,0.12); color:#7AADDB; }

.sm-action-title {
    font-family: var(--font-display, 'Unbounded', sans-serif) !important;
    font-size: 13px !important; font-weight: 700 !important;
    color: var(--ink-strong) !important; margin-bottom: 4px !important;
}
.sm-action-sub { font-size: 11.5px !important; color: var(--ink-muted) !important; line-height: 1.45 !important; }

/* Stats + Activity */
.sm-bottom-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important; margin-bottom: 14px !important;
}
.sm-stats-card, .sm-activity-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 16px !important;
}
.sm-card-section-label {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px;
}
.sm-card-section-label > span:first-child {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--ink-muted);
}
.sm-card-section-label > span:last-child { font-size: 10px; color: var(--ink-disabled); }

.sm-stats-rows { display: flex; flex-direction: column; gap: 2px; }
.sm-stat-row {
    display: flex; justify-content: space-between; align-items: center; padding: 4px 0;
}
.sm-stat-row-label { font-size: 12.5px; color: var(--ink-muted); }
.sm-stat-row-value { font-size: 13px; font-weight: 700; color: var(--ink-strong); }
.sm-stat-row-value.is-gold { color: var(--gold-bright) !important; }

.sm-winbar { height: 3px; background: var(--bg-elevated); border-radius: 2px; overflow: hidden; margin: 4px 0 8px; }
.sm-winbar-fill { height:100%; background: linear-gradient(90deg,var(--gold-dim),var(--gold-bright)); border-radius:2px; transition: width 0.6s var(--ease); }

.sm-recent-games { display: flex; gap: 3px; align-items: center; }
.sm-game-dot     { width:7px; height:7px; border-radius:50%; }
.sm-game-dot--w  { background:var(--gold); }
.sm-game-dot--l  { background:var(--red); }
.sm-game-dot--d  { background:var(--ink-disabled); }

.sm-activity-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 9px 0; border-bottom: 1px solid var(--border); cursor: pointer;
}
.sm-activity-item:last-child { border-bottom: none; padding-bottom: 0; }
.sm-activity-item:hover .sm-activity-text { color: var(--gold-bright); }
.sm-activity-icon {
    width: 30px; height: 30px; border-radius: 9px;
    background: rgba(200,155,60,0.1); color: var(--gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0;
}
.sm-activity-text { font-size: 12.5px; color: var(--ink-base); line-height: 1.4; }
.sm-activity-time { font-size: 10.5px; color: var(--ink-muted); margin-top: 2px; }
.sm-activity-body { flex: 1; min-width: 0; }

/* Invite */
.sm-invite {
    background: linear-gradient(135deg,rgba(61,138,85,0.10),rgba(45,107,65,0.05)) !important;
    border: 1px solid rgba(61,138,85,0.2) !important;
    border-radius: var(--radius-lg) !important;
    padding: 13px 16px !important;
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    transition: border-color var(--t-fast) var(--ease) !important;
}
.sm-invite:hover { border-color: rgba(61,138,85,0.38) !important; }
.sm-invite-left  { display: flex; align-items: center; gap: 12px; }
.sm-invite-icon  { font-size: 18px; color: var(--green-bright); }
.sm-invite-title { font-size: 13.5px; font-weight: 700; color: var(--ink-strong); }
.sm-invite-sub   { font-size: 11.5px; color: var(--ink-muted); margin-top: 2px; }
.sm-invite-arrow { color: var(--ink-disabled); }

/* ── GAME SCREEN ─────────────────────────────────────────── */
.sm-app-main > #screen-game {
    padding: 0 !important;
}
#screen-game.active {
    flex-direction: column !important;
    height: 100% !important;
    background: var(--bg-void) !important;
}

/* Top game bar */
.po-top-bar {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 0 14px !important;
    height: 50px !important;
    display: flex !important; align-items: center !important; gap: 10px !important;
    flex-shrink: 0 !important;
}
.po-left-title {
    font-size: 13px !important; font-weight: 600 !important;
    color: var(--ink-muted) !important; flex: 1 !important;
    font-family: var(--font-body, 'DM Sans', sans-serif) !important;
}
.po-right { display: flex; gap: 2px; align-items: center; }
.po-right > div {
    width: 34px; height: 34px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background var(--t-fast);
}
.po-right > div:hover { background: var(--bg-elevated); }
.po-right i { color: var(--ink-muted) !important; font-size: 15px !important; }
.po-right > div:last-child i { color: var(--red) !important; }

/* Board layout */
.board-stage {
    flex: 1;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    padding: 12px 16px !important;
    background: var(--bg-void) !important;
}
.board-layout {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; gap: 6px !important;
    width: 100% !important; max-width: 480px !important;
}

/* Clock panels */
.board-device-clock, .board-match-clock {
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-size: 20px !important; font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    color: var(--ink-muted) !important;
    padding: 5px 14px !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    text-align: center !important;
    min-width: 88px !important;
    transition: color 0.2s, border-color 0.2s !important;
    align-self: flex-end;
}
.board-device-clock { align-self: flex-start !important; }
.board-match-clock  { align-self: flex-end !important; }

/* Board wood container */
.board-container {
    background: linear-gradient(160deg, #1E1408 0%, #130D06 100%) !important;
    border: 1px solid rgba(90,55,20,0.55) !important;
    border-radius: 18px !important;
    padding: 14px 12px !important;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.55),
        0 20px 48px rgba(0,0,0,0.7),
        inset 0 1px 0 rgba(255,220,120,0.07) !important;
    width: 100% !important;
    position: relative !important;
}
.board-container::before {
    content: '';
    position: absolute; inset: 0; border-radius: 17px;
    background: repeating-linear-gradient(
        90deg,
        rgba(255,180,40,0.012) 0px, rgba(255,180,40,0.012) 1px,
        transparent 1px, transparent 28px
    );
    pointer-events: none;
}

/* Pit rows */
.row { display: flex !important; gap: 5px !important; justify-content: center !important; width: 100% !important; }

/* Pit */
.pit {
    background: radial-gradient(ellipse at 38% 28%, #201508, #0D0905) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(80,46,10,0.8) !important;
    box-shadow:
        inset 0 2px 8px rgba(0,0,0,0.82),
        inset 0 -1px 2px rgba(180,120,40,0.07) !important;
    transition: all 0.14s var(--ease) !important;
    position: relative !important;
    overflow: visible !important;
}
.pit.player-pit { cursor: pointer !important; }
.pit.player-pit:hover {
    border-color: rgba(200,155,60,0.65) !important;
    box-shadow:
        inset 0 2px 8px rgba(0,0,0,0.82),
        0 0 8px rgba(200,155,60,0.22),
        0 0 20px rgba(200,155,60,0.10) !important;
    transform: scale(1.05) !important;
}
.pit.player-pit:active { transform: scale(0.97) !important; }
.pit.last-pit, .pit.last-move-highlight {
    border-color: rgba(61,138,85,0.75) !important;
    box-shadow:
        inset 0 2px 8px rgba(0,0,0,0.82),
        0 0 10px rgba(61,138,85,0.28) !important;
}
.pit.last-move-highlight.player-pit {
    background: radial-gradient(ellipse at 38% 28%, #1A2010, #0D1008) !important;
}
.pit.tuzdyk {
    background: radial-gradient(ellipse at 38% 28%, #200808, #0D0404) !important;
    border-color: rgba(194,64,64,0.55) !important;
}
.pit.tuzdyk::after {
    content: '' !important;
    position: absolute; bottom: 3px; right: 3px;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--red); font-size: 0;
    box-shadow: 0 0 4px rgba(194,64,64,0.55);
}

.count-badge {
    background: rgba(200,155,60,0.14) !important;
    color: var(--stone-color) !important;
    border-radius: 4px !important;
    font-family: var(--font-mono, monospace) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    border: 1px solid rgba(200,155,60,0.10) !important;
}

/* Kazans */
.kazan-track {
    background: linear-gradient(180deg, #1A1008 0%, #0E0904 100%) !important;
    border: 1px solid rgba(80,46,10,0.5) !important;
    border-radius: 10px !important;
    display: flex !important; align-items: center !important;
    padding: 7px 12px !important; gap: 8px !important;
}
.kazan-score {
    font-family: var(--font-display, 'Unbounded', sans-serif) !important;
    font-size: 22px !important; font-weight: 700 !important;
    color: var(--gold-bright) !important;
    letter-spacing: -0.01em !important;
    min-width: 30px !important; text-align: right !important;
}

/* Pit label numbers */
.num-label {
    color: rgba(200,155,60,0.4) !important;
    font-size: 10px !important; font-weight: 600 !important;
    font-family: var(--font-mono, monospace) !important;
}

/* Side control buttons */
.board-side-controls {
    display: flex !important; gap: 7px !important; flex-shrink: 0 !important;
}
.board-side-btn {
    width: 38px; height: 38px;
    border-radius: 9px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--ink-muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px;
    transition: all var(--t-fast) var(--ease);
}
.board-side-btn:hover { background: var(--bg-elevated); color: var(--ink-base); border-color: var(--border-strong); }
.board-side-btn.exit   { border-color: rgba(194,64,64,0.2); }
.board-side-btn.exit:hover {
    background: rgba(194,64,64,0.1);
    color: var(--red);
    border-color: rgba(194,64,64,0.4);
}

/* ── LEADERBOARD ─────────────────────────────────────────── */
.league-season-banner {
    background: linear-gradient(135deg, rgba(200,155,60,0.1) 0%, rgba(130,90,30,0.05) 100%) !important;
    border: 1px solid rgba(200,155,60,0.18) !important;
    border-radius: var(--radius-lg) !important;
    padding: 18px 20px !important;
    margin-bottom: 14px !important;
}

.lb-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 11px !important;
    padding: 11px 14px !important;
    display: flex !important; align-items: center !important;
    gap: 11px !important; margin-bottom: 5px !important;
    transition: border-color var(--t-fast) !important;
}
.lb-card:hover { border-color: var(--border-strong) !important; }

.lb-card:nth-child(1), .lb-card.lb-rank-1 {
    background: linear-gradient(135deg, rgba(240,196,88,0.10) 0%, transparent 100%) !important;
    border-color: rgba(240,196,88,0.25) !important;
}
.lb-card:nth-child(2), .lb-card.lb-rank-2 {
    background: linear-gradient(135deg, rgba(200,200,200,0.08) 0%, transparent 100%) !important;
    border-color: rgba(200,200,200,0.16) !important;
}
.lb-card:nth-child(3), .lb-card.lb-rank-3 {
    background: linear-gradient(135deg, rgba(205,127,50,0.09) 0%, transparent 100%) !important;
    border-color: rgba(205,127,50,0.16) !important;
}

/* ── TOURNAMENT CARDS ────────────────────────────────────── */
.sm-tournament-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 13px !important;
    padding: 15px !important;
    margin-bottom: 8px !important;
    transition: all var(--t-fast) var(--ease) !important;
}
.sm-tournament-card:hover {
    border-color: rgba(200,155,60,0.22) !important;
    transform: translateY(-1px) !important;
}

/* Featured tournament events */
.featured-events {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 10px !important; margin-bottom: 16px !important;
}
.featured-event {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 18px 16px !important;
    transition: all var(--t-base) var(--ease) !important;
}
.featured-event:hover {
    border-color: rgba(200,155,60,0.28) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
}
.featured-event-badge {
    display: inline-block; padding: 2px 8px;
    background: rgba(200,155,60,0.12); color: var(--gold);
    border-radius: var(--radius-pill);
    font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; margin-bottom: 10px;
}
.featured-event-icon { font-size: 24px; margin-bottom: 8px; color: var(--gold); }
.featured-event-title {
    font-family: var(--font-display, 'Unbounded', sans-serif) !important;
    font-size: 13.5px !important; font-weight: 700 !important;
    color: var(--ink-strong) !important; margin-bottom: 4px !important;
}
.featured-event-sub { font-size: 12px !important; color: var(--ink-muted) !important; line-height: 1.4 !important; }
.steppe-mark {
    font-size: 10px; color: var(--gold-dim);
    font-family: var(--font-mono, monospace); letter-spacing: 0.06em;
    margin-bottom: 5px;
}

/* ── TIME SELECT ─────────────────────────────────────────── */
.time-option {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 11px !important;
    transition: all var(--t-fast) var(--ease) !important;
}
.time-option:hover { border-color: rgba(200,155,60,0.38) !important; }
.time-option.selected {
    background: rgba(200,155,60,0.09) !important;
    border-color: rgba(200,155,60,0.45) !important;
}
.time-option-main {
    font-family: var(--font-display, 'Unbounded', sans-serif) !important;
    color: var(--ink-strong) !important; font-size: 22px !important;
}
.time-option-inc  { color: var(--gold) !important; font-size: 11px !important; }
.time-option-type { color: var(--ink-muted) !important; font-size: 10px !important; }
.time-category-label {
    font-size: 10px !important; font-weight: 700 !important;
    letter-spacing: 0.09em !important; text-transform: uppercase !important;
    color: var(--ink-muted) !important; padding: 14px 4px 7px !important;
    display: flex; align-items: center; gap: 6px;
}

.search-with-time-btn {
    background: var(--gold) !important; color: #0F0F18 !important;
    border: none !important; border-radius: 11px !important;
    padding: 13px 20px !important; font-family: var(--font-body, 'DM Sans', sans-serif) !important;
    font-weight: 700 !important; font-size: 14px !important;
    width: 100% !important; cursor: pointer !important;
    margin-top: 18px !important;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all var(--t-fast) var(--ease) !important;
}
.search-with-time-btn:hover {
    background: var(--gold-bright) !important;
    box-shadow: var(--shadow-gold) !important;
    transform: translateY(-1px) !important;
}

/* ── BOT SETUP ───────────────────────────────────────────── */
.side-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 13px !important;
    transition: all var(--t-fast) var(--ease) !important;
}
.side-card:hover { border-color: rgba(200,155,60,0.3) !important; }
.side-card.selected {
    background: rgba(200,155,60,0.09) !important;
    border-color: rgba(200,155,60,0.42) !important;
}
.start-game-btn {
    background: var(--gold) !important; color: #0F0F18 !important;
    border: none !important; border-radius: 11px !important;
    font-weight: 700 !important; letter-spacing: 0.03em !important;
    transition: all var(--t-fast) var(--ease) !important;
}
.start-game-btn:hover {
    background: var(--gold-bright) !important;
    box-shadow: var(--shadow-gold) !important;
    transform: translateY(-1px) !important;
}
.menu-select {
    background: var(--bg-elevated) !important;
    color: var(--ink-base) !important;
    border: 1px solid var(--border) !important;
    border-radius: 9px !important;
    padding: 10px 14px !important;
    font-family: var(--font-body, 'DM Sans', sans-serif) !important;
    font-size: 14px !important;
    width: 100% !important; outline: none !important;
    cursor: pointer !important;
    transition: border-color var(--t-fast) !important;
    -webkit-appearance: none;
}
.menu-select:focus { border-color: rgba(200,155,60,0.45) !important; }

/* ── SETTINGS ────────────────────────────────────────────── */
.settings-content { padding: 4px 0; }
.settings-section-label {
    font-size: 10px !important; font-weight: 700 !important;
    letter-spacing: 0.09em !important; text-transform: uppercase !important;
    color: var(--ink-muted) !important; padding: 14px 2px 7px !important;
}
.settings-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important; margin-bottom: 6px !important;
}
.settings-row {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
    padding: 13px 15px !important;
    border-bottom: 1px solid var(--border) !important; gap: 10px !important;
}
.settings-row:last-child { border-bottom: none !important; }
.settings-row-icon {
    width: 33px; height: 33px; border-radius: 9px;
    background: rgba(255,255,255,0.04); color: var(--ink-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.settings-row-icon.gold  { background: rgba(200,155,60,0.11); color: var(--gold); }
.settings-row-icon.green { background: rgba(61,138,85,0.11);  color: var(--green-bright); }
.settings-row-icon.blue  { background: rgba(74,125,168,0.11); color: #7AADDB; }

.settings-row-left { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.settings-row-title { font-size: 13.5px; font-weight: 600; color: var(--ink-strong); margin-bottom: 1px; }
.settings-row-sub   { font-size: 11.5px; color: var(--ink-muted); }

/* Toggle */
.toggle-switch { position: relative; display: inline-block; width: 42px; height: 23px; flex-shrink: 0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider {
    position: absolute; inset:0;
    background: var(--bg-overlay); border: 1px solid var(--border-strong);
    border-radius: 12px; cursor: pointer; transition: all 0.18s;
}
.toggle-slider::before {
    content: ''; position: absolute;
    width: 17px; height: 17px; border-radius: 50%;
    background: var(--ink-muted); left: 2px; top: 2px;
    transition: all 0.18s;
}
.toggle-switch input:checked + .toggle-slider {
    background: rgba(200,155,60,0.22); border-color: var(--gold-dim);
}
.toggle-switch input:checked + .toggle-slider::before {
    background: var(--gold); transform: translateX(19px);
}

/* Theme/lang pickers */
.lang-picker { display: flex; gap: 4px; }
.lang-btn {
    background: var(--bg-elevated); border: 1px solid var(--border);
    color: var(--ink-muted); border-radius: 7px;
    padding: 5px 9px; font-size: 11px; font-weight: 700;
    cursor: pointer; transition: all var(--t-fast);
}
.lang-btn.active, .lang-btn[data-active="true"] {
    background: rgba(200,155,60,0.12); border-color: var(--border-gold);
    color: var(--gold);
}

/* ── FRIENDS / MESSAGES ──────────────────────────────────── */
.friends-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.friends-tab {
    flex: 1; background: transparent; border: none;
    padding: 10px 8px; font-size: 13px; font-weight: 600;
    color: var(--ink-muted); cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--t-fast); text-align: center;
}
.friends-tab.active { color: var(--gold); border-bottom-color: var(--gold); }

.search-input {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important; color: var(--ink-strong) !important;
    font-family: var(--font-body, 'DM Sans', sans-serif) !important;
    font-size: 14px !important; padding: 10px 14px !important;
    width: 100% !important; outline: none !important;
    transition: border-color var(--t-fast) !important;
}
.search-input:focus { border-color: rgba(200,155,60,0.4) !important; }
.search-input::placeholder { color: var(--ink-disabled) !important; }

/* Empty state */
.empty-state {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 10px; padding: 48px 24px;
    color: var(--ink-muted); text-align: center;
}
.empty-state i { font-size: 28px; opacity: 0.35; }
.empty-state p { font-size: 13.5px; line-height: 1.5; }

/* ── DATABASE SEARCH ─────────────────────────────────────── */
.db-search-bar {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 11px !important;
    display: flex !important; align-items: center !important;
    gap: 9px !important; padding: 10px 13px !important;
    margin-bottom: 14px !important;
    transition: border-color var(--t-fast) !important;
}
.db-search-bar:focus-within { border-color: rgba(200,155,60,0.38) !important; }
.db-search-input {
    background: transparent !important; border: none !important;
    outline: none !important; color: var(--ink-strong) !important;
    font-family: var(--font-body, 'DM Sans', sans-serif) !important;
    font-size: 14px !important; flex: 1 !important;
}
.db-search-input::placeholder { color: var(--ink-disabled) !important; }
.db-search-icon { color: var(--ink-muted) !important; flex-shrink: 0; }

/* ── ANALYSIS SCREEN ─────────────────────────────────────── */
.analysis-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 18px !important; margin-bottom: 12px !important;
}
.analysis-textarea {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border) !important;
    border-radius: 9px !important; color: var(--ink-strong) !important;
    font-family: var(--font-mono, monospace) !important;
    font-size: 13px !important; padding: 10px 12px !important;
    width: 100% !important; resize: vertical !important;
    outline: none !important; transition: border-color var(--t-fast) !important;
}
.analysis-textarea:focus { border-color: rgba(200,155,60,0.4) !important; }
.analyze-btn-new {
    background: var(--gold) !important; color: #0F0F18 !important;
    border: none !important; border-radius: 10px !important;
    padding: 11px 18px !important; font-weight: 700 !important;
    font-size: 13.5px !important; width: 100% !important;
    cursor: pointer !important; margin-top: 12px !important;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all var(--t-fast) var(--ease) !important;
}
.analyze-btn-new:hover { background: var(--gold-bright) !important; box-shadow: var(--shadow-gold) !important; }

/* ── MODALS / GAME MENU ──────────────────────────────────── */
.modal-overlay {
    background: rgba(8,8,16,0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
.modal-sheet {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 18px 18px 32px !important;
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.modal-title {
    font-family: var(--font-display, 'Unbounded', sans-serif) !important;
    font-size: 16px !important; font-weight: 700 !important;
    color: var(--ink-strong) !important;
}
.modal-close-btn {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--bg-overlay); border: none;
    color: var(--ink-muted); display: flex; align-items: center;
    justify-content: center; cursor: pointer; font-size: 13px;
    transition: all var(--t-fast);
}
.modal-close-btn:hover { background: rgba(194,64,64,0.14); color: var(--red); }

/* Big action buttons in game menu */
.big-btn {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 13px !important;
    display: flex !important; align-items: center !important; gap: 12px !important;
    padding: 13px 15px !important; cursor: pointer !important;
    transition: all var(--t-fast) var(--ease) !important;
    width: 100% !important; text-align: left !important;
}
.big-btn:hover { border-color: var(--border-strong) !important; background: var(--bg-elevated) !important; }
.big-btn-title { font-size: 14px !important; font-weight: 700 !important; color: var(--ink-strong) !important; }
.big-btn-desc  { font-size: 11.5px !important; color: var(--ink-muted) !important; margin-top: 2px !important; }

/* ── REWARDS SCREEN ──────────────────────────────────────── */
.rewards-streak-banner {
    background: linear-gradient(135deg, rgba(200,155,60,0.10), rgba(130,90,30,0.05)) !important;
    border: 1px solid rgba(200,155,60,0.18) !important;
    border-radius: var(--radius-lg) !important;
    margin-bottom: 14px !important;
}
.rsb-val {
    font-family: var(--font-display, 'Unbounded', sans-serif) !important;
    font-size: 26px !important; font-weight: 700 !important;
    color: var(--ink-strong) !important;
}

/* ── MORE LIST ───────────────────────────────────────────── */
.list-item {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 14px 16px !important;
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    transition: background var(--t-fast) !important;
    color: var(--ink-base) !important; font-size: 14px !important;
}
.list-item:first-of-type { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.list-item:last-of-type  { border-radius: 0 0 var(--radius-md) var(--radius-md); border-bottom: none; }
.list-item:hover { background: var(--bg-elevated) !important; }
.list-item-left { display: flex; align-items: center; gap: 12px; }
.list-item i:first-child { width: 18px; text-align: center; color: var(--gold); font-size: 14px; }
.more-section-label {
    font-size: 10px !important; font-weight: 700 !important;
    letter-spacing: 0.09em !important; text-transform: uppercase !important;
    color: var(--ink-muted) !important; padding: 16px 4px 6px !important;
}

/* ── LOADING SPINNER ─────────────────────────────────────── */
.league-loading-spinner {
    width: 24px; height: 24px;
    border: 2px solid var(--border) !important;
    border-top-color: var(--gold) !important;
    border-radius: 50% !important;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── CHAT ────────────────────────────────────────────────── */
.chat-messages {
    background: var(--bg-base) !important;
    padding: 12px 14px !important;
}
.chat-input-area {
    background: var(--bg-surface) !important;
    border-top: 1px solid var(--border) !important;
    padding: 10px 12px !important;
    display: flex !important; gap: 8px !important; align-items: flex-end !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
}
.chat-input {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important; color: var(--ink-strong) !important;
    font-family: var(--font-body, 'DM Sans', sans-serif) !important;
    font-size: 14px !important; padding: 9px 12px !important;
    flex: 1 !important; resize: none !important; outline: none !important;
    transition: border-color var(--t-fast) !important;
}
.chat-input:focus { border-color: rgba(200,155,60,0.38) !important; }
.chat-send-btn {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--gold); border: none;
    color: #0F0F18; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    transition: all var(--t-fast) var(--ease);
}
.chat-send-btn:hover { background: var(--gold-bright); }
.chat-header-name {
    font-size: 15px !important; font-weight: 700 !important;
    color: var(--ink-strong) !important;
}
.chat-header-sub { font-size: 12px !important; color: var(--gold) !important; }

/* ── LANDING PAGE ────────────────────────────────────────── */
.sm-landing {
    background: var(--bg-void) !important;
    background-image:
        radial-gradient(ellipse at 12% 50%, rgba(200,155,60,0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 88% 15%, rgba(61,138,85,0.04) 0%, transparent 45%) !important;
}
.sm-landing-header {
    background: rgba(15,15,24,0.88) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255,243,220,0.05) !important;
}
.sm-landing-title { letter-spacing: -0.03em !important; }
.sm-landing-title em {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 55%, var(--gold) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; font-style: normal;
}

.sm-demo {
    background: linear-gradient(145deg, #1E1408 0%, #130D05 100%) !important;
    border: 1px solid rgba(200,155,60,0.2) !important;
    border-radius: 18px !important;
    box-shadow:
        0 28px 56px rgba(0,0,0,0.6),
        0 0 0 1px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,220,120,0.07) !important;
}
.sm-demo-pit {
    background: radial-gradient(ellipse at 38% 28%, #2A1A0A, #0E0905) !important;
    border: 1px solid rgba(80,46,10,0.8) !important;
    border-radius: 5px !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.7) !important;
    color: var(--stone-color) !important;
    font-family: var(--font-mono, monospace) !important;
    font-weight: 600 !important;
}

.sm-auth-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 48px rgba(0,0,0,0.5) !important;
}
.sm-auth-tabs { border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.sm-auth-tab {
    background: transparent; border: none;
    padding: 9px 16px; font-family: var(--font-body, 'DM Sans', sans-serif);
    font-weight: 600; font-size: 13.5px; color: var(--ink-muted);
    cursor: pointer; border-bottom: 2px solid transparent;
    margin-bottom: -1px; transition: all var(--t-fast);
}
.sm-auth-tab.is-active { color: var(--gold); border-bottom-color: var(--gold); }

.sm-auth-input {
    background: var(--bg-elevated) !important; color: var(--ink-strong) !important;
    border: 1px solid var(--border) !important; border-radius: 9px !important;
    padding: 11px 13px !important; font-family: var(--font-body, 'DM Sans', sans-serif) !important;
    font-size: 14px !important; width: 100% !important;
    transition: border-color var(--t-fast), box-shadow var(--t-fast) !important;
    margin-bottom: 9px !important; outline: none !important;
    display: block !important;
}
.sm-auth-input:focus {
    border-color: rgba(200,155,60,0.48) !important;
    box-shadow: 0 0 0 3px rgba(200,155,60,0.11) !important;
}
.sm-auth-input::placeholder { color: var(--ink-disabled) !important; }

.sm-auth-submit {
    background: var(--gold) !important; color: #0F0F18 !important;
    border: none !important; border-radius: 9px !important;
    padding: 12px 18px !important; font-family: var(--font-body, 'DM Sans', sans-serif) !important;
    font-weight: 700 !important; font-size: 14.5px !important;
    width: 100% !important; cursor: pointer !important;
    transition: all var(--t-fast) var(--ease) !important;
    margin-top: 2px !important; display: block !important;
}
.sm-auth-submit:hover {
    background: var(--gold-bright) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-gold) !important;
}
.sm-auth-hint {
    font-size: 12px !important; color: var(--ink-muted) !important;
    text-align: center !important; margin-top: 12px !important;
}

.sm-landing-cta--primary {
    background: var(--gold) !important; color: #0F0F18 !important;
    border: none !important; border-radius: 10px !important;
    padding: 12px 22px !important; font-weight: 700 !important;
    font-size: 14.5px !important; cursor: pointer !important;
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    transition: all var(--t-fast) var(--ease) !important;
}
.sm-landing-cta--primary:hover {
    background: var(--gold-bright) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-gold) !important;
}
.sm-landing-cta--ghost {
    background: transparent !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--ink-base) !important;
    border-radius: 10px !important; padding: 11px 20px !important;
    font-weight: 600 !important; font-size: 14px !important;
    cursor: pointer !important; transition: all var(--t-fast) var(--ease) !important;
}
.sm-landing-cta--ghost:hover { border-color: var(--border-gold) !important; color: var(--ink-strong) !important; }

.sm-landing-bullet {
    display: flex !important; align-items: center !important; gap: 10px !important;
    font-size: 13px !important; color: var(--ink-muted) !important;
    padding: 4px 0 !important;
}
.sm-landing-bullet i { color: var(--green-bright) !important; flex-shrink: 0; }

/* ── RATING TOAST ────────────────────────────────────────── */
.rating-toast {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 13px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
    padding: 11px 16px !important;
}
.rating-toast-label { font-size: 11px !important; color: var(--ink-muted) !important; }
.rating-toast-value { font-family: var(--font-display, 'Unbounded', sans-serif) !important; font-size: 22px !important; font-weight: 700 !important; }
.rating-toast-current { font-size: 11px !important; color: var(--ink-muted) !important; }

/* Page header used by sub-screens */
.sm-page-header, .sub-screen-header, .home-header, .lobby-header {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border) !important;
    display: flex !important; align-items: center !important;
    padding: 0 16px !important; gap: 10px !important; flex-shrink: 0 !important;
    position: sticky !important; top: 0 !important; z-index: 30 !important;
}
.sub-screen-title, .sm-page-title {
    font-family: var(--font-display, 'Unbounded', sans-serif) !important;
    font-size: 17px !important; font-weight: 700 !important;
    color: var(--ink-strong) !important; letter-spacing: -0.02em !important;
}
.sub-screen-back, .back-btn-top, .sm-back-btn {
    background: transparent !important; border: none !important;
    color: var(--ink-muted) !important; font-size: 15px !important;
    cursor: pointer !important; padding: 8px !important;
    border-radius: 8px !important; display: flex !important;
    align-items: center !important; gap: 6px !important;
    transition: all var(--t-fast) !important;
}
.sub-screen-back:hover, .back-btn-top:hover { color: var(--gold) !important; background: var(--bg-elevated) !important; }

/* ── PREMIUM INPUTS (used in tournaments form) ───────────── */
.premium-input {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border) !important;
    border-radius: 9px !important; color: var(--ink-strong) !important;
    font-family: var(--font-body, 'DM Sans', sans-serif) !important;
    font-size: 14px !important; padding: 10px 12px !important;
    width: 100% !important; outline: none !important;
    transition: border-color var(--t-fast) !important;
}
.premium-input:focus { border-color: rgba(200,155,60,0.42) !important; }
.premium-input::placeholder { color: var(--ink-disabled) !important; }

.btn-launch-tourn {
    background: var(--gold) !important; color: #0F0F18 !important;
    border: none !important; border-radius: 10px !important;
    padding: 12px 18px !important; font-weight: 700 !important;
    font-size: 13.5px !important; width: 100% !important;
    cursor: pointer !important; letter-spacing: 0.02em !important;
    transition: all var(--t-fast) var(--ease) !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important; gap: 7px !important;
}
.btn-launch-tourn:hover { background: var(--gold-bright) !important; box-shadow: var(--shadow-gold) !important; }

/* ── MOBILE RESPONSIVE ───────────────────────────────────── */
@media (max-width: 900px) {
    .sm-actions { grid-template-columns: 1fr 1fr !important; }
    .sm-actions .sm-action:last-child { grid-column: 1 / -1; }
    .sm-bottom-grid { grid-template-columns: 1fr !important; }
    .sm-hero-decor { display: none !important; }

}

@media (max-width: 560px) {
    .sm-greeting { font-size: 19px !important; }
    .sm-hero-title { font-size: 20px !important; }
    .sm-hero { padding: 20px !important; min-height: 140px; }
    .sm-actions { gap: 8px !important; }
    .featured-events { grid-template-columns: 1fr !important; }
}

/* ── LEAGUE SEASON GOALS ─────────────────────────────────── */
.season-goals { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 16px; }
.season-goal {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: 13px; padding: 14px 12px; text-align: center;
}
.season-goal-icon { font-size: 20px; color: var(--gold); margin-bottom: 7px; }
.season-goal-title { font-size: 12px; font-weight: 700; color: var(--ink-strong); margin-bottom: 4px; }
.season-goal-sub   { font-size: 11px; color: var(--ink-muted); line-height: 1.45; }

@media (max-width: 560px) {
    .season-goals { grid-template-columns: 1fr; }
}

/* ── PUZZLE CARDS ────────────────────────────────────────── */
.puzzle-card-hero {
    border-radius: var(--radius-xl) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5) !important;
}

/* ── SCROLLABLE AREAS ────────────────────────────────────── */
.puzzles-content, .learn-content, .rewards-screen-body,
.tournaments-content, .more-list, .setup-container, .time-select-screen,
.settings-content, .friend-screen-body, .analysis-screen-wrap {
    overflow-y: auto !important;
    max-height: calc(100vh - var(--header-h) - 50px) !important;
}

/* ── LIGHT THEME ─────────────────────────────────────────── */
/* Smooth theme transitions */
body, .sm-app-header, .sm-app-sidebar, .sm-app-main,
.board-container, .sm-card, .sm-action-card, .stat-card,
.tour-card, .lb-card, .settings-card {
    transition: background var(--t-base) var(--ease),
                border-color var(--t-base) var(--ease),
                color var(--t-base) var(--ease) !important;
}