/* ============================================================
   Royal Felt · Poker Club · Telegram Mini App
   Premium dark + gold + burgundy. Playfair Display + Inter.
   ============================================================ */
:root {
    /* Black + red palette. The accent vars are still named --gold-* (kept to
       avoid touching every usage) but now hold RED values; --gold-500 is the
       main red accent. */
    --bg:          #0a0a0a;
    --bg-deep:     #120304;
    --felt:        #2a0a0d;
    --gold-300:    #ff5763;
    --gold-500:    #e11d2a;
    --gold-600:    #b3141f;
    --gold-700:    #7d0f17;
    --burgundy:    #b3141f;
    --burgundy-2:  #5e0a10;
    --ivory:       #f4f4f5;
    --ivory-soft:  #cdced2;
    --text-dim:    #8f8f93;
    --text-faint:  #5a5a5e;
    --card:        #181818;
    --card-2:      #1f1f1f;
    --card-inner:  rgba(255, 255, 255, 0.04);
    /* Soft dark card sheen (top-lit) used across the home cards */
    --card-grad:   linear-gradient(160deg, #202020 0%, #161616 60%, #131313 100%);
    /* Dark inset pill used for the action chips on cards */
    --pill-bg:     #0f0f0f;
    --line:        rgba(255, 255, 255, 0.10);
    --line-soft:   rgba(255, 255, 255, 0.06);
    --border:      rgba(255, 255, 255, 0.07);
    --accent-green: #2bd66b;
    --amber:        #f5c518;   /* late-registration badge */

    --font-display: "Oswald", "Golos Text", "Inter", sans-serif;
    --font-ui:      "Golos Text", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "Menlo", monospace;

    --r-card: 18px;
    --r-pill: 999px;
    --r-chip: 8px;

    --nav-h: 64px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ivory);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button {
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
}

.app {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
    position: relative;
}

.screen-root { padding: 14px 14px 24px; }
.screen { display: block; }
.screen[hidden] { display: none; }

/* ============================================================
   Bottom nav — gold-accented dark bar
   ============================================================ */
.bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: rgba(8, 8, 8, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--line);
    height: var(--nav-h);
    padding: 8px max(12px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-right));
    z-index: 50;
}
.bottom-nav-inner {
    max-width: 480px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
}
.nav-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--r-pill);
    color: var(--ivory-soft);
    opacity: 0.55;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.nav-btn .nav-label { display: none; font-weight: 600; }
.nav-btn.active {
    opacity: 1;
    color: var(--ivory);
    background: rgba(255, 255, 255, 0.07);
    border: none;
}
.nav-btn.active .nav-label { display: inline; letter-spacing: 0.01em; font-size: 13px; font-weight: 600; }
.nav-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
.nav-btn.profile-tab { padding: 4px; }
.nav-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--accent-green);
    color: #ffffff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 18px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.10) inset;
}

/* ============================================================
   Club header (top of Home) — плашка: логотип + название клуба,
   меняются по выбранному городу (content.js → clubs)
   ============================================================ */
.club-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    margin-bottom: 14px;
    border-radius: var(--r-card);
    background:
        radial-gradient(140% 200% at 0% 0%, rgba(225, 29, 42, 0.18), transparent 55%),
        var(--card-grad);
    border: 1px solid var(--line);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
/* тонкая красная линия-акцент по нижнему краю */
.club-header::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-500), rgba(225, 29, 42, 0) 70%);
    opacity: 0.85;
}
/* значок масти (пика-водяной знак) убран по запросу */
.club-logo {
    /* Без плашки-рамки: логотип «как есть», увеличен в 1.5× (54 → 81px) */
    width: 81px;
    height: 81px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.club-logo-fallback {
    width: 45px;
    height: 45px;
    color: var(--gold-500);
    filter: drop-shadow(0 0 6px rgba(225, 29, 42, 0.45));
}
.club-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* 4бетпуш: логотип-вордмарк уже содержит название клуба, поэтому название
   скрываем, а логотип увеличиваем по максимуму — он заполняет всю ширину
   шапки (высота — по пропорции), отступы шапки сводим к минимуму.
   (Тарантино — квадратный логотип + текстовое название, не трогается.) */
.club-header[data-city="volgograd"] {
    padding: 5px;
    gap: 0;
}
.club-header[data-city="volgograd"] .club-name { display: none; }
.club-header[data-city="volgograd"] .club-logo {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
}
.club-header[data-city="volgograd"] .club-logo-img {
    width: 100%;
    height: auto;
}
.club-name {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 34px;
    line-height: 1.08;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--ivory);
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.45);
    z-index: 1;
}

/* ============================================================
   Headers & big titles
   ============================================================ */
.screen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 2px 16px;
}
.screen-title {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.01em;
    color: var(--ivory);
}
.icon-btn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ivory-soft);
    border-radius: 10px;
    position: relative;
    border: none;
    background: transparent;
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn .dot {
    position: absolute;
    top: 3px; right: 3px;
    width: 8px; height: 8px;
    background: var(--gold-500);
    border-radius: 50%;
    border: 2px solid var(--bg);
}

.big-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 46px;
    line-height: 0.95;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 10px 0 18px;
    color: var(--ivory);
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.45);
}
.big-title::after { content: none; }

/* ============================================================
   Decorative gold corner brackets (reusable wrapper)
   ============================================================ */
.deco-frame {
    position: relative;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(225, 29, 42, 0.04), transparent 70%),
        var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    padding: 18px;
    margin-bottom: 12px;
    overflow: hidden;
}
.deco-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
}
.deco-corner-tl { top: -1px; left: -1px;  border-top: 1.5px solid var(--gold-500); border-left: 1.5px solid var(--gold-500); }
.deco-corner-tr { top: -1px; right: -1px; border-top: 1.5px solid var(--gold-500); border-right: 1.5px solid var(--gold-500); }
.deco-corner-bl { bottom: -1px; left: -1px;  border-bottom: 1.5px solid var(--gold-500); border-left: 1.5px solid var(--gold-500); }
.deco-corner-br { bottom: -1px; right: -1px; border-bottom: 1.5px solid var(--gold-500); border-right: 1.5px solid var(--gold-500); }

/* ============================================================
   Tournament card (used on Home + Tournaments list)
   ============================================================ */
.tournament-card {
    position: relative;
    background: var(--card-grad);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    padding: 18px;
    margin-bottom: 12px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    gap: 14px;
    min-height: 132px;
}
.tournament-card-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-width: 0; }
.tournament-card-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--ivory);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
    overflow-wrap: anywhere;
}
.tournament-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--pill-bg);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-pill);
    padding: 8px 13px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ivory-soft);
    letter-spacing: 0.01em;
}
.pill svg { width: 14px; height: 14px; color: var(--ivory); }
.pill.danger { color: #f3a0a0; }

/* Title + optional "late registration" badge, kept together at the top of the
   card so the pills row still sits at the bottom (space-between body). */
.tournament-card-head { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.tournament-late {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--amber);
    background: rgba(245, 197, 24, 0.12);
    border: 1px solid rgba(245, 197, 24, 0.35);
}
.tournament-late svg { width: 13px; height: 13px; }

/* Finished tournaments ("Прошедшие") are read-only — dim them a touch. */
.tournament-card.is-past { opacity: 0.7; }
.tournament-card.is-past .tournament-emblem { opacity: 0.55; }

.tournament-emblem {
    width: 104px;
    height: 104px;
    flex-shrink: 0;
    align-self: center;
}
.tournament-emblem svg { width: 100%; height: auto; display: block; }

/* ============================================================
   Big burgundy CTA card (Rating)
   ============================================================ */
.rating-cta {
    width: 100%;
    text-align: left;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, transparent 42%),
        linear-gradient(305deg, rgba(0, 0, 0, 0.32) 0%, transparent 52%),
        linear-gradient(140deg, #e6151f 0%, #c10f19 46%, #7d0a12 100%);
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 120, 120, 0.22);
    border-radius: var(--r-card);
    padding: 20px;
    margin-bottom: 12px;
    color: var(--ivory);
    display: flex;
    align-items: stretch;
    gap: 12px;
    min-height: 178px;
    overflow: hidden;
    position: relative;
}
/* Faint faceted texture, like the mockup's low-poly trophy backdrop */
.rating-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 26px),
        repeating-linear-gradient(-60deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 26px);
    pointer-events: none;
    opacity: 0.9;
}
/* When a custom photo is set, darken bottom for text legibility */
.rating-cta.has-photo {
    background-blend-mode: normal;
}
.rating-cta.has-photo::after { content: none; }
.rating-cta.has-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.20) 45%, rgba(0,0,0,0.78) 100%);
    pointer-events: none;
}
.rating-cta-body {
    flex: 1; z-index: 1;
    display: flex; flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}
.rating-cta-eyebrow {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    color: var(--gold-500);
    letter-spacing: 0.28em;
    text-transform: uppercase;
}
.rating-cta-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 34px;
    line-height: 0.98;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 2px 0 rgba(120, 8, 14, 0.55), 0 3px 8px rgba(0, 0, 0, 0.35);
}
.rating-cta-action {
    align-self: flex-start;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--r-pill);
    padding: 9px 15px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ivory);
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.rating-cta-action svg { width: 15px; height: 15px; color: #ffd34d; }

/* Trophy / image slot on the red Rating CTA.
   The negative margins cancel the card's 20px padding on the top/right/bottom
   so the trophy bleeds to those three edges (the card's overflow:hidden +
   border-radius clip it to the rounded corners). margin-right:-20px offsets the
   +20px width bump, so the body keeps the same horizontal room as before. */
.rating-cta-emblem {
    flex-shrink: 0;
    width: 150px;
    align-self: stretch;
    margin: -20px -20px -20px 0;
    z-index: 1;
    overflow: hidden;
}
/* Trophy hugs the right edge and is scaled up so the bowl/emblem dominate; the
   foot and outer handle edges bleed past the frame and are clipped (overflow
   hidden above). transform-origin keeps the rim near the top. */
.rating-cta-emblem .card-image {
    object-fit: cover;
    object-position: center;
    transform: translateY(25%) scale(1.2);
    transform-origin: 50% 35%;
}

/* ============================================================
   Swappable card images (configured in content.js → images)
   A dashed placeholder shows where to drop an image when unset.
   ============================================================ */
.card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.card-image-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    min-height: 80px;
    border: 1.5px dashed rgba(255, 255, 255, 0.22);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-dim);
    text-align: center;
    padding: 8px 6px;
}
.card-image-ph svg { width: 22px; height: 22px; opacity: 0.85; color: var(--ivory-soft); }
.card-image-ph span { font-family: var(--font-mono); font-size: 9px; line-height: 1.25; letter-spacing: 0.02em; }
/* Placeholder on the red Rating card — lighter so it stays legible */
.rating-cta-emblem .card-image-ph {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(0, 0, 0, 0.18);
    color: rgba(255, 255, 255, 0.88);
}
.rating-cta-emblem .card-image-ph svg { color: #ffffff; opacity: 1; }

/* ============================================================
   Quick-action grid on Home
   ============================================================ */
.quick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.quick-card {
    background: var(--card-grad);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    padding: 16px;
    text-align: left;
    min-height: 108px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.quick-card.wide {
    grid-column: 1 / -1;
    min-height: 116px;
    flex-direction: row;
    align-items: stretch;
}
.quick-card-content { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; flex: 1; }
.quick-card-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 23px;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--ivory);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* Club address shown directly on the "Адрес" card, so it can be read without
   opening maps. Wraps the full address; hidden when no address is known. */
.quick-card-sub {
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--ivory-soft);
    letter-spacing: 0.01em;
    overflow-wrap: anywhere;
}
.quick-card-sub:empty { display: none; }
.quick-card-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--pill-bg);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-pill);
    padding: 8px 13px;
    font-size: 12px;
    color: var(--ivory-soft);
    letter-spacing: 0.01em;
    align-self: flex-start;
}
.quick-card-action svg { width: 14px; height: 14px; color: var(--ivory); }
.badge-new {
    display: inline-flex;
    align-items: center;
    background: var(--gold-500);
    color: #ffffff;
    border-radius: var(--r-pill);
    padding: 3px 9px;
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.quick-card-emblem { width: 88px; align-self: center; opacity: 0.92; }
.quick-card-emblem svg { width: 100%; height: auto; }

/* ============================================================
   Filters + segmented tabs (Tournaments + Leaderboard)
   ============================================================ */
.filter-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
.dropdown {
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-pill);
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--ivory);
    cursor: pointer;
}
.dropdown svg.lead { width: 16px; height: 16px; color: var(--ivory); }
.dropdown svg.chev { width: 16px; height: 16px; margin-left: auto; opacity: 0.7; color: var(--ivory-soft); }
.dropdown .dropdown-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-pill);
    padding: 4px;
    margin-bottom: 14px;
}
.segmented.three { grid-template-columns: 1fr 1fr 1fr; }
.segmented-btn {
    padding: 9px 12px;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--text-dim);
    text-align: center;
}
.segmented-btn.active {
    background: rgba(255, 255, 255, 0.12);
    color: var(--ivory);
}

.chips-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.chip-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-pill);
    padding: 8px 12px;
    font-size: 12px;
    color: var(--ivory);
    flex: 1;
    justify-content: center;
    letter-spacing: 0.04em;
}
.chip-filter svg { width: 14px; height: 14px; color: var(--ivory); }
.chip-filter svg:last-child { color: var(--ivory-soft); opacity: 0.7; }

.search-box {
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-pill);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.search-box svg { width: 16px; height: 16px; color: var(--ivory-soft); flex-shrink: 0; }
.search-box input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--ivory);
    font: inherit;
    font-size: 14px;
}
.search-box input::placeholder { color: var(--text-dim); }

/* ============================================================
   Leaderboard table
   ============================================================ */
.lb-head {
    display: grid;
    grid-template-columns: 22px 1fr 60px 80px;
    gap: 10px;
    align-items: center;
    padding: 0 8px 10px;
    font-size: 10px;
    font-weight: 600;
    color: var(--ivory-soft);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 4px;
}
.lb-head .col-name { text-align: left; }
.lb-head .col-stat { text-align: center; }
.lb-head .col-rating { text-align: right; padding-right: 6px; }
.lb-row {
    display: grid;
    grid-template-columns: 22px 1fr 60px 80px;
    gap: 10px;
    align-items: center;
    padding: 12px 8px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.lb-rank {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 19px;
    color: var(--ivory);
    text-align: center;
}
.lb-player { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lb-avatar {
    position: relative;
    width: 34px; height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line-soft);
    color: var(--ivory);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 14px;
}
.lb-avatar .badge {
    position: absolute;
    right: -3px; bottom: -3px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--gold-500);
    color: #ffffff;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px;
    font-weight: 700;
    border: 1.5px solid var(--bg);
    line-height: 1;
}
.lb-nick { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ivory); }
.lb-medal { color: var(--ivory-soft); margin-left: 4px; }
.lb-num { text-align: center; font-variant-numeric: tabular-nums; color: var(--ivory-soft); }
.lb-rating {
    text-align: right;
    padding-right: 6px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ivory);
    font-family: var(--font-mono);
}

/* ============================================================
   Profile screen
   ============================================================ */
.profile-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 4px 18px;
}
.profile-avatar {
    width: 68px; height: 68px;
    border-radius: 50%;
    background: var(--accent-green);
    color: #ffffff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 30px;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.30) inset;
}
.profile-avatar .edit {
    position: absolute;
    right: -2px; bottom: -2px;
    width: 22px; height: 22px;
    background: var(--card);
    border: 1px solid var(--line-soft);
    color: var(--ivory-soft);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.profile-avatar .edit svg { width: 11px; height: 11px; }
.profile-id {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 23px;
    color: var(--ivory);
}
.profile-id .edit-icon { color: var(--ivory-soft); }
.profile-id .edit-icon svg { width: 14px; height: 14px; }
.profile-counters {
    display: flex; gap: 18px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: 0.04em;
}
.profile-counters b { color: var(--ivory); margin-right: 4px; font-weight: 600; font-family: var(--font-display); font-style: italic; }

.profile-card {
    background: var(--card-grad);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    padding: 16px;
    margin-bottom: 10px;
}
.profile-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.profile-card-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 21px;
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--ivory);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    overflow-wrap: break-word;
    word-break: break-word;
}
.mini-tabs { display: flex; gap: 4px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-soft); border-radius: var(--r-pill); padding: 3px; }
.mini-tab { padding: 6px 12px; border-radius: var(--r-pill); font-size: 12px; color: var(--text-dim); letter-spacing: 0.01em; text-transform: none; font-weight: 600; }
.mini-tab.active {
    background: rgba(255, 255, 255, 0.12);
    color: var(--ivory);
}

.stat-cols {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    text-align: center;
}
.stat-cols .stat-val {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 25px;
    line-height: 1;
    margin-bottom: 6px;
    color: var(--ivory);
}
.stat-cols .stat-cap {
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
}

/* Title + rank badge grouped on the left of the "Статистика" header, so the
   Всего/Лучшая/Средняя tabs stay on the right (and wrap below on narrow screens). */
.stats-title-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* Cumulative standing badge ("#5") next to the "Статистика" title. Goes gold
   when the player holds a medal. */
.rank-badge {
    display: inline-flex;
    align-items: center;
    min-width: 40px;
    justify-content: center;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 14px;
    color: var(--ivory);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line-soft);
}
.rank-badge.is-medal {
    color: #1a1407;
    background: linear-gradient(160deg, #ffd969, var(--amber));
    border-color: rgba(245, 197, 24, 0.6);
}

.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
.profile-grid .profile-card { margin-bottom: 0; min-width: 0; overflow: hidden; }
.profile-card-action {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    background: var(--pill-bg);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-pill);
    padding: 8px 13px;
    font-size: 12px;
    color: var(--ivory-soft);
    letter-spacing: 0.01em;
}
.profile-card-action svg { width: 14px; height: 14px; color: var(--ivory); flex-shrink: 0; }
.profile-card-action span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.history-card { display: flex; align-items: stretch; gap: 12px; }
.history-card .history-body { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.history-card .quick-card-emblem { width: 92px; }

.profile-mail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}
.profile-mail-value { display: inline-flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 13px; }
.profile-mail-value svg { width: 16px; height: 16px; color: var(--ivory-soft); }
.profile-mail-edit {
    background: var(--pill-bg);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-pill);
    padding: 8px 14px;
    font-size: 12px;
    color: var(--ivory);
    letter-spacing: 0.02em;
    text-transform: none;
    font-weight: 600;
}

/* ============================================================
   Interactive card / chip hint
   ============================================================ */
.interactive { cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.interactive:hover { background: rgba(225, 29, 42, 0.04); border-color: var(--line); }
.interactive:active { transform: scale(0.995); }

.chip-filter, .dropdown { cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.chip-filter:hover, .dropdown:hover { background: rgba(225, 29, 42, 0.05); border-color: var(--line); }

/* ============================================================
   Bottom-sheet modal (City selector)
   ============================================================ */
body.modal-open { overflow: hidden; }

.modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 100;
}
.modal[hidden] { display: none; }

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: modal-backdrop-in 0.18s ease-out;
}

.modal-sheet {
    position: relative;
    width: 100%;
    max-width: 480px;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(225, 29, 42, 0.06), transparent 70%),
        var(--card);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line-soft);
    border-right: 1px solid var(--line-soft);
    border-radius: 14px 14px 0 0;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 12px 14px calc(20px + env(safe-area-inset-bottom, 0px));
    animation: modal-sheet-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.55), 0 -1px 0 var(--gold-500) inset;
}

.modal-grabber {
    width: 36px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.22);
    margin: 0 auto 10px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 14px;
}
.modal-title {
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    color: var(--ivory);
}
.modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ivory-soft);
    font-size: 28px;
    line-height: 1;
    border-radius: 8px;
    border: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.04);
}

.modal-search {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-pill);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.modal-search svg { width: 16px; height: 16px; color: var(--ivory-soft); flex-shrink: 0; }
.modal-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--ivory);
    font: inherit;
    font-size: 14px;
}
.modal-search input::placeholder { color: var(--text-dim); }

.modal-list {
    overflow-y: auto;
    overscroll-behavior: contain;
    max-height: 60vh;
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
}
.modal-row {
    width: 100%;
    text-align: left;
    padding: 13px 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ivory);
    font-family: var(--font-ui);
    font-size: 15px;
    background: transparent;
    border: 1px solid transparent;
    transition: background 0.15s ease;
}
.modal-row:hover  { background: rgba(225, 29, 42, 0.06); }
.modal-row:active { background: rgba(225, 29, 42, 0.10); }
.modal-row > svg { width: 18px; height: 18px; color: var(--ivory); flex-shrink: 0; }
.modal-row .name { flex: 1; }
.modal-row .check { width: 18px; height: 18px; color: var(--ivory); }
.modal-row.selected {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--line);
    color: var(--ivory);
}
.modal-error { margin-top: 8px; }

@keyframes modal-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-sheet-in    { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ============================================================
   Info modal (Q&A / About)
   ============================================================ */
.info-sheet { max-height: 86vh; }
.modal-content {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    max-height: 70vh;
    padding: 4px 4px 12px;
    font-family: var(--font-ui);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ivory-soft);
}
.modal-content p { margin: 0 0 10px; }
.modal-content strong { color: var(--ivory); }
.modal-content em { font-style: italic; color: var(--text-dim); }
.modal-content ul {
    list-style: none;
    padding: 0;
    margin: 6px 0 12px;
}
.modal-content ul li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 6px;
}
.modal-content ul li::before {
    content: "♠";
    position: absolute;
    left: 0;
    color: var(--gold-500);
    font-size: 11px;
    top: 3px;
}
.modal-content code {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--gold-500);
    background: rgba(225, 29, 42, 0.08);
    padding: 1px 5px;
    border-radius: 4px;
}

.qa-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
}
.qa-item:last-child { border-bottom: none; }
.qa-q {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.25;
    color: var(--ivory);
    margin-bottom: 10px;
}
.qa-q-num {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--gold-500);
    font-size: 18px;
    flex-shrink: 0;
}
.qa-a {
    color: var(--ivory-soft);
    padding-left: 24px;
}
.qa-a p:last-child { margin-bottom: 0; }

/* ============================================================
   Game history rows
   ============================================================ */
.history-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.015);
    margin-bottom: 8px;
}
.history-place {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(225, 29, 42, 0.10);
    border: 1px solid var(--line-soft);
    color: var(--gold-500);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 13px;
    flex-shrink: 0;
}
.history-place.win { background: var(--gold-500); color: #ffffff; }
.history-info { min-width: 0; }
.history-name {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 16px;
    color: var(--ivory);
    line-height: 1.2;
    margin-bottom: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.history-meta { font-size: 12px; color: var(--text-dim); letter-spacing: 0.04em; }
.history-meta .sep { color: var(--gold-500); margin: 0 4px; }
.history-numbers {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ivory);
}
.history-numbers .rt { color: var(--gold-500); font-weight: 600; }
.history-numbers .nk { color: var(--text-dim); }

/* ============================================================
   My Registrations rows
   ============================================================ */
.myreg-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
    border-radius: 10px;
    border: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.015);
    margin-bottom: 8px;
}
.myreg-info { flex: 1; min-width: 0; }
.myreg-name {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 17px;
    color: var(--ivory);
    line-height: 1.2;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.myreg-meta {
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: 0.04em;
}
.myreg-meta .sep { color: var(--gold-500); margin: 0 4px; }
.myreg-cancel {
    flex-shrink: 0;
    background: rgba(139, 26, 26, 0.18);
    border: 1px solid rgba(139, 26, 26, 0.5);
    color: #ffb3b3;
    border-radius: var(--r-pill);
    padding: 7px 12px;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
}
.myreg-cancel:hover  { background: rgba(139, 26, 26, 0.28); }
.myreg-cancel:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   Royal Felt Toasts (in-app notifications)
   ============================================================ */
.toast-stack {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--nav-h) + 14px + env(safe-area-inset-bottom, 0px));
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    width: calc(100% - 28px);
    max-width: 460px;
}
.toast {
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(225,29,42,0.08), transparent 70%),
        var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ivory);
    pointer-events: auto;
    box-shadow:
        0 -8px 28px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(225, 29, 42, 0.06);
    animation: toast-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.4;
}
.toast.leaving { animation: toast-out 0.22s ease-in forwards; }
.toast-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
}
.toast.success .toast-icon { background: rgba(43, 214, 107, 0.14); color: var(--accent-green); border: 1px solid rgba(43, 214, 107, 0.30); }
.toast.error   .toast-icon { background: rgba(225,  90,  90, 0.14); color: #ff8585;           border: 1px solid rgba(225,  90,  90, 0.30); }
.toast.info    .toast-icon { background: rgba(225, 29, 42, 0.14); color: var(--gold-500);   border: 1px solid var(--line); }
.toast-text { flex: 1; }

@keyframes toast-in  { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { from { opacity: 1; transform: translateY(0); }   to { opacity: 0; transform: translateY(20px); } }

/* ============================================================
   Player profile modal (opened by tapping a leaderboard row)
   ============================================================ */
.player-sheet { max-height: 88vh; }
.player-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    max-height: 74vh;
    padding: 2px 2px 4px;
}
.player-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 4px 16px;
}
.player-avatar {
    position: relative;
    width: 60px; height: 60px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(225, 29, 42, 0.10);
    border: 1px solid var(--line);
    color: var(--gold-500);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 26px;
    box-shadow: none;
}
.player-avatar .badge {
    position: absolute;
    right: -2px; bottom: -2px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--gold-500);
    color: #ffffff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 700;
    border: 1.5px solid var(--card);
    line-height: 1;
}
.player-headinfo { min-width: 0; flex: 1; }
.player-name {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.1;
    color: var(--ivory);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-bottom: 8px;
}
.player-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.player-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(225, 29, 42, 0.07);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-pill);
    padding: 4px 10px;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ivory-soft);
}
.player-badge.rank {
    color: var(--gold-500);
    font-family: var(--font-mono);
    font-weight: 600;
}
.player-history { margin-top: 14px; }

.player-actions { padding: 0 2px 14px; }
.follow-btn {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--gold-500);
    color: #ffffff;
    border-radius: var(--r-pill);
    padding: 12px 16px;
    font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.follow-btn.following {
    background: rgba(225, 29, 42, 0.06);
    border: 1px solid var(--line);
    color: var(--ivory);
}
.follow-btn:disabled { opacity: 0.6; cursor: default; }

/* ============================================================
   Custom avatars (own profile, nav, player modal) + edit button
   ============================================================ */
.profile-avatar.has-avatar,
.nav-avatar.has-avatar,
.player-avatar.has-avatar,
.lb-avatar.has-avatar {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: transparent;              /* hide the fallback letter */
}
.profile-save-btn {
    width: 100%;
    margin-top: 12px;
    background: var(--gold-500);
    color: #ffffff;
    border-radius: var(--r-pill);
    padding: 13px 16px;
    font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
}
.profile-save-btn:disabled { opacity: 0.6; cursor: default; }

/* ============================================================
   Notifications (bell modal)
   ============================================================ */
.icon-btn .dot[hidden] { display: none; }
.notif-row {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
}
.notif-date {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.notif-text { font-size: 14px; line-height: 1.4; color: var(--ivory); }

/* ============================================================
   Misc / states
   ============================================================ */
.loading { text-align: center; color: var(--text-dim); padding: 24px 16px; font-size: 14px; letter-spacing: 0.08em; }
.empty   { text-align: center; color: var(--text-dim); padding: 24px 16px; font-size: 14px; }
.error {
    color: #ff8585;
    background: rgba(139, 26, 26, 0.18);
    border: 1px solid rgba(139, 26, 26, 0.5);
    border-radius: var(--r-chip);
    padding: 10px 12px;
    font-size: 13px;
    margin-top: 8px;
}