:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --var(--ease-out)-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

  :root {
    --bg: #f4fbf7;
    --panel: #ffffff;
    --panel-soft: #eaf7f0;
    --line: #cfe5d6;
    --ink: #153125;
    --muted: #64756c;
    --green: #24a36a;
    --green-dark: #15784c;
    --lime: #d8f765;
    --blue: #62b6f5;
    --yellow: #ffd86f;
    --orange: #f49d4e;
    --red: #ef6b6b;
    --shadow: 0 16px 40px rgba(35, 83, 60, .12);
    --radius: 8px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  *, *::before, *::after { box-sizing: border-box; }

  html {
    box-sizing: border-box;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-width: 100vw !important;
    width: 100% !important;
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: auto !important;
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    height: 100dvh;
    min-height: 100dvh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-width: 100vw !important;
    width: 100% !important;
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    background:
      radial-gradient(circle at top left, rgba(216, 247, 101, .35), transparent 34rem),
      linear-gradient(135deg, #f7fff9 0%, var(--bg) 48%, #eef8ff 100%);
    color: var(--ink);
  }

  body.touch-drag-active {
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: none !important;
  }

  .hide-mobile {
    /* Shown on desktop by default */
  }

  @media (max-width: 768px) {
    .hide-mobile {
      display: none !important;
    }
  }

  button, input { font: inherit; }

  .shell {
    width: min(1120px, calc(100% - 28px));
    max-width: 100vw !important;
    height: 100dvh;
    min-height: 100dvh;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    margin: 0 auto;
    padding: 22px 0 48px;
  }

  .layout,
  .panel.game,
  .stadium-stage,
  .stadium-layout,
  .stadium-center-console {
    min-height: 100dvh;
    box-sizing: border-box;
  }

  /* Ensure all game elements respect max-width: 100vw */
  .shell,
  .layout,
  .panel,
  .game,
  .content,
  .card,
  .game-card,
  .rank-stage,
  .rank-board,
  .rank-list,
  .rank-row,
  .current-card,
  .game-box,
  .board-grid,
  .results-card,
  .leaderboard-card,
  .solution-comp-card,
  .higher-lower-container,
  .legends-container,
  .club-ladder-container,
  .swap-hint-banner,
  .topbar,
  .modal-dialog,
  .dialog {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    letter-spacing: -.02em;
    font-size: clamp(24px, 4vw, 38px);
  }

  .brand-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--green);
    color: white;
    box-shadow: var(--shadow);
  }

  .pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .8);
    color: var(--muted);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700;
  }

  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    align-items: start;
  }

  .panel {
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  .game {
    min-height: 640px;
    overflow: hidden;
  }

  .side {
    display: grid;
    gap: 14px;
  }

  .ad-slot {
    min-height: 118px;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 16px;
    border: 1px dashed #a9c9b7;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .65);
    color: var(--muted);
    font-size: 13px;
  }

  .content { padding: clamp(18px, 4vw, 34px); }

  .hero {
    min-height: 570px;
    display: grid;
    align-content: center;
    gap: 28px;
  }

  h1, h2, h3, p { margin: 0; }

  .eyebrow {
    color: var(--green-dark);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 12px;
  }

  .hero h1 {
    max-width: 760px;
    font-size: clamp(38px, 7vw, 78px);
    line-height: .94;
    letter-spacing: -.06em;
  }

  .hero-copy {
    max-width: 650px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.55;
  }

  .mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .mode-card {
    text-align: left;
    display: grid;
    gap: 10px;
    min-height: 148px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #ffffff 0%, #f3fbf6 100%);
    border-radius: var(--radius);
    padding: 18px;
    cursor: pointer;
    color: var(--ink);
    transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out);
  }

  .mode-card:hover,
  .mode-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--green);
    box-shadow: 0 16px 26px rgba(36, 163, 106, .16);
    outline: none;
  }

  .mode-card[disabled] {
    opacity: .58;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  .mode-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 900;
    font-size: 20px;
  }

  .mode-card p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
  }

  .mini {
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .screen-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
  }

  .screen-head h2 {
    font-size: clamp(30px, 5vw, 52px);
    line-height: .98;
    letter-spacing: -.05em;
  }

  .screen-head p {
    margin-top: 10px;
    max-width: 620px;
    color: var(--muted);
    line-height: 1.5;
  }

  .back-btn,
  .ghost-btn,
  .primary-btn,
  .name-btn {
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 900;
    transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out), color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  }
  .back-btn:active,
  .ghost-btn:active,
  .primary-btn:active,
  .name-btn:active,
  .login-btn:active,
  .move-btn:active,
  .nav-link:active {
    transform: scale(0.96);
  }
  .primary-btn:hover:not(:disabled) {
    background: var(--green-dark);
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(36, 163, 106, .28);
  }

  .back-btn,
  .ghost-btn {
    background: var(--panel-soft);
    color: var(--green-dark);
    padding: 10px 13px;
  }

  .primary-btn {
    width: 100%;
    background: var(--green);
    color: white;
    padding: 15px 18px;
    box-shadow: 0 12px 24px rgba(36, 163, 106, .22);
  }

  .primary-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
  }

  .name-box {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    color: var(--muted);
    font-size: 14px;
  }

  .name-box strong { color: var(--ink); }

  .name-box input {
    width: min(260px, 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 9px 11px;
    color: var(--ink);
  }

  .name-btn {
    background: var(--yellow);
    color: #4e3812;
    padding: 9px 12px;
  }

  .rank-list {
    display: grid;
    gap: 10px;
    margin: 20px 0;
  }

  .rank-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
    padding: 12px 14px;
    border: 3px solid #111827;
    border-radius: 14px;
    box-shadow: 0 3px 0 #111827;
    background: rgba(255, 255, 255, 0.95);
    cursor: grab;
    cursor: -webkit-grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: element !important;
    -webkit-touch-callout: none;
    touch-action: pan-y;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 0.18s cubic-bezier(0.23, 1, 0.32, 1),
                border-color 0.18s ease,
                background-color 0.18s ease;
  }
  .rank-row:hover:not(.dragging):not(.selected-to-swap) {
    border-color: #078a3f;
    box-shadow: 0 5px 0 #111827, 0 6px 16px rgba(7, 138, 63, 0.08);
  }

  .rank-row:active { cursor: grabbing; cursor: -webkit-grabbing; }
  .rank-row.dragging { opacity: .75; transform: scale(1.02); box-shadow: 0 16px 32px rgba(0,0,0,0.2), 0 0 0 2px #078a3f; z-index: 50; position: relative; touch-action: none !important; }
  .rank-row.touch-dragging {
    transition: none !important;
    opacity: 0.98 !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35), 0 0 0 3px #078a3f !important;
    z-index: 1000 !important;
    pointer-events: none !important;
    will-change: transform;
    touch-action: none !important;
  }
  .rank-row.drop-target {
    border: 3px dashed #078a3f !important;
    background: rgba(7, 138, 63, 0.14) !important;
    box-shadow: 0 0 0 2px #078a3f, 0 8px 20px rgba(7, 138, 63, 0.25) !important;
    transform: scale(0.985);
  }
  .rank-row.selected-to-swap {
    border-color: #078a3f !important;
    background: #f0fdf4 !important;
    box-shadow: 0 0 0 3px rgba(7, 138, 63, 0.4), 0 4px 12px rgba(7, 138, 63, 0.15) !important;
    transform: scale(1.01);
  }

  .rank-row-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .rank-row-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    overflow: hidden;
  }

  .rank-no {
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--panel-soft);
    color: var(--green-dark);
    font-weight: 900;
  }

  .rank-player-name, .player-name {
    font-weight: 850;
    font-size: 16px;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    line-height: 1.25;
  }

  .rank-player-detail, .player-meta {
    font-size: 13px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
    margin-top: 2px;
  }

  .rank-player-detail .detail-label {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
  }

  .rank-row-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }

  .rank-arrow-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    border: 2px solid #111827;
    border-radius: 8px;
    background: #f8fafc;
    color: #111827;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s, background-color 0.12s;
    padding: 0;
  }

  .rank-arrow-btn:hover:not([disabled]) {
    background: #e2e8f0;
  }

  .rank-arrow-btn:active:not([disabled]) {
    transform: scale(0.92);
  }

  .drag-handle {
    width: 36px;
    height: 40px;
    min-width: 36px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #94a3b8;
    cursor: grab;
    cursor: -webkit-grab;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: element !important;
    -webkit-touch-callout: none !important;
    flex-shrink: 0;
    padding: 2px;
  }

  .drag-handle:hover {
    color: #078a3f;
  }

  .row-actions {
    display: flex;
    gap: 5px;
  }

  .move-btn {
    border: 1px solid var(--line);
    background: var(--panel-soft);
    color: var(--green-dark);
    border-radius: 6px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    font-weight: 900;
  }

  .result-ok { border-color: rgba(36, 163, 106, .8); background: #effcf5; }
  .result-close { border-color: rgba(244, 157, 78, .85); background: #fff7ef; }
  .result-off { border-color: rgba(239, 107, 107, .75); background: #fff3f3; }

  .value-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    border-radius: 999px;
    padding: 7px 10px;
    background: var(--panel-soft);
    color: var(--green-dark);
    font-size: 13px;
    font-weight: 900;
  }

  .legend-board {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }

  .current-card,
  .slot {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
  }

  .current-card {
    padding: 18px;
    position: sticky;
    top: 12px;
  }

  .current-card h3 {
    font-size: 30px;
    letter-spacing: -.04em;
    line-height: 1;
    margin: 8px 0 8px;
  }

  .drag-card {
    display: grid;
    gap: 8px;
    border-radius: var(--radius);
    padding: 16px;
    background: linear-gradient(135deg, #dbf8e8, #fff8d8);
    border: 1px solid #bde7cd;
    cursor: grab;
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  }
  .drag-card:active {
    cursor: grabbing;
    transform: scale(0.98);
  }

  .slot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .slot {
    min-height: 132px;
    padding: 14px;
    display: grid;
    align-content: space-between;
    gap: 12px;
    transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out), background 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  }

  .slot.open {
    cursor: pointer;
    background: #fbfffc;
  }

  .slot.open:hover,
  .slot.drop-target {
    border-color: var(--green);
    background: #f0fff6;
    transform: translateY(-2px);
  }

  .slot.locked {
    background: #f6faf7;
    border-color: #b7d8c3;
  }

  .slot-name {
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
  }

  .slot-player {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
  }

  .locked-note {
    color: var(--muted);
    font-size: 12px;
  }

  .progress {
    height: 10px;
    border-radius: 999px;
    background: var(--panel-soft);
    overflow: hidden;
    margin-top: 14px;
  }

  .progress span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--green);
    transition: width .25s var(--ease-out);
  }

  .score-card {
    display: grid;
    gap: 14px;
    margin-top: 20px;
    padding: 18px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #153125, #1f6847);
    color: white;
  }

  .score-big {
    font-size: clamp(42px, 9vw, 82px);
    line-height: .9;
    font-weight: 950;
    letter-spacing: -.07em;
  }

  .score-big small {
    font-size: .33em;
    color: rgba(255, 255, 255, .7);
    letter-spacing: 0;
  }

  .score-top-compare {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 12px;
    align-items: stretch;
  }

  .score-side {
    display: grid;
    gap: 8px;
    min-width: 0;
  }

  .score-side-label {
    color: rgba(255,255,255,.78);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .score-side-card {
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 14px;
    padding: 12px;
    background: rgba(255,255,255,.10);
  }

  .score-side-card strong {
    display: block;
    font-size: clamp(24px, 4vw, 34px);
    line-height: .95;
    letter-spacing: -.04em;
  }

  .mini-order {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
  }

  .mini-order span {
    max-width: 100%;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.94);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .breakdown {
    display: grid;
    gap: 8px;
  }

  .break-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .9);
  }

  .leaderboard {
    padding: 16px;
    touch-action: pan-y;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 80vh;
  }

  .leaderboard h3 {
    margin-bottom: 12px;
    font-size: 18px;
  }

  .lb-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease-out;
  }

  .lb-row.mine {
    margin: 0 -8px;
    padding: 9px 8px;
    border-radius: 7px;
    background: #eefaf3;
    border: 1px solid rgba(7, 138, 63, .22);
  }

  .lb-rank,
  .lb-score {
    font-weight: 900;
    color: var(--green-dark);
  }

  .lb-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .lb-row.mine .lb-name,
  .break-row.mine span {
    color: var(--green-dark);
    font-weight: 950;
  }

  .break-row.mine {
    background: #eefaf3;
    border-radius: 8px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .result-extra {
    display: grid;
    gap: 14px;
    margin-top: 16px;
  }

  .result-panel {
    background: rgba(255,255,255,.96);
    color: #101927;
    border: 2px solid #111827;
    border-radius: 18px;
    box-shadow: 0 4px 0 #111827;
    padding: 16px;
  }

  .result-panel h3 {
    margin-bottom: 10px;
    font-size: 18px;
    letter-spacing: -.02em;
  }

  .comparison-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .comparison-column {
    display: grid;
    gap: 8px;
  }

  .comparison-title,
  .round-title {
    color: #5f6977;
    font-size: 13px;
    font-weight: 950;
  }

  .comparison-row,
  .round-row {
    border: 1px solid #d8ddd8;
    border-radius: 12px;
    padding: 10px 11px;
    background: #fff;
  }

  .comparison-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px;
    align-items: start;
  }

  .comparison-pos {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eefaf3;
    color: #078a3f;
    font-weight: 950;
  }

  .comparison-name {
    font-weight: 950;
  }

  .comparison-meta,
  .round-meta {
    color: #667085;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
  }

  .comparison-status {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 950;
  }

  .comparison-row.status-ok,
  .round-row.status-ok { border-color: rgba(7,138,63,.45); background: #f1fff6; }
  .comparison-row.status-close,
  .round-row.status-close { border-color: rgba(244,157,78,.65); background: #fff8ef; }
  .comparison-row.status-off,
  .round-row.status-off { border-color: rgba(239,107,107,.55); background: #fff4f4; }

  .score-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }

  .summary-pill {
    border: 1px solid #d8ddd8;
    border-radius: 999px;
    padding: 8px 10px;
    background: #fbfffc;
    font-weight: 950;
    text-align: center;
    font-size: 13px;
  }

  .round-list {
    display: grid;
    gap: 8px;
  }

  .round-row {
    display: grid;
    gap: 5px;
  }

  .comparison-card {
    display: grid;
    gap: 9px;
  }

  .score-ideal-line {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 8px;
    align-items: stretch;
  }

  .score-ideal-box {
    border: 1px solid #d8ddd8;
    border-radius: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,.82);
  }

  .score-ideal-box strong {
    display: block;
    font-size: 14px;
    line-height: 1.22;
  }

  .pick-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .pick-box {
    border: 1px solid #d8ddd8;
    border-radius: 10px;
    padding: 9px 10px;
    background: rgba(255,255,255,.76);
  }

  .pick-label {
    display: block;
    color: #5f6977;
    font-size: 12px;
    font-weight: 950;
    margin-bottom: 3px;
  }

  .pick-value {
    font-weight: 950;
    line-height: 1.22;
  }

  .comparison-detail {
    display: grid;
    gap: 4px;
    color: #667085;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
  }

  .stat-icon,
  .ball-chip,
  .summary-pill,
  .comparison-pos,
  .mini-order,
  .value-badge,
  .locked-note,
  .club-badge {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif;
    font-variant-emoji: emoji;
    text-rendering: optimizeLegibility;
  }

  .stat-icon,
  .ball-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter: saturate(1.08) contrast(1.04);
  }

  .empty {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
  }

  .toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(20px) scale(0.96);
    opacity: 0;
    pointer-events: none;
    background: #0f291e;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1);
    z-index: 10005;
    transition: opacity .25s cubic-bezier(0.16, 1, 0.3, 1), transform .25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    max-width: 90vw;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    pointer-events: auto;
  }

  .toast.toast-success,
  .toast.toast-db {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
    border: 1px solid rgba(52, 211, 153, 0.45);
    color: #f0fdf4;
    box-shadow: 0 12px 32px rgba(6, 78, 59, 0.45), 0 0 0 1px rgba(52, 211, 153, 0.25), 0 0 20px rgba(16, 185, 129, 0.2);
  }

  @keyframes scoreDbPulse {
    0% {
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6), 0 8px 0 rgba(15, 23, 42, .14);
      transform: scale(1);
    }
    40% {
      box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.25), 0 8px 0 rgba(15, 23, 42, .14);
      transform: scale(1.015);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0), 0 8px 0 rgba(15, 23, 42, .14);
      transform: scale(1);
    }
  }

  .score-card.score-db-confirmed,
  .score-db-confirmed {
    animation: scoreDbPulse 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @media (max-width: 768px) {
    .toast {
      bottom: calc(78px + env(safe-area-inset-bottom, 0px));
      font-size: 13.5px;
      padding: 10px 16px;
    }
  }

  @media (max-width: 860px) {
    .layout { grid-template-columns: 1fr; }
    .side { grid-template-columns: 1fr; }
    .legend-board { grid-template-columns: 1fr; }
    .current-card { position: static; }
  }

  @media (max-width: 620px) {
    .shell { width: min(100% - 18px, 1120px); padding-top: 12px; }
    .topbar { align-items: flex-start; }
    .brand-mark { width: 36px; height: 36px; }
    .mode-grid,
    .slot-grid { grid-template-columns: 1fr; }
    .comparison-grid,
    .score-summary,
    .score-top-compare { grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
  }

  /* BallRanker game-portal skin */
  body {
    overflow-x: hidden;
    background:
      radial-gradient(circle at 16% 24%, rgba(29, 154, 82, .08), transparent 16rem),
      radial-gradient(circle at 84% 32%, rgba(29, 154, 82, .06), transparent 18rem),
      #fffdfb;
  }

  body::before,
  body::after {
    content: "";
    position: fixed;
    z-index: -1;
    top: 120px;
    width: 340px;
    height: 700px;
    opacity: .16;
    background:
      linear-gradient(var(--green), var(--green)) 46px 0 / 4px 700px no-repeat,
      linear-gradient(var(--green), var(--green)) 0 122px / 220px 4px no-repeat,
      linear-gradient(var(--green), var(--green)) 102px 370px / 210px 4px no-repeat,
      radial-gradient(circle at 128px 366px, transparent 0 90px, var(--green) 92px 96px, transparent 98px),
      radial-gradient(circle at 128px 366px, var(--green) 0 12px, transparent 13px);
    transform: rotate(20deg);
    pointer-events: none;
  }

  body::before { left: -120px; }

  body::after {
    right: -120px;
    transform: scaleX(-1) rotate(20deg);
  }

  .shell {
    width: 100%;
    max-width: none;
    height: 100dvh;
    min-height: 100dvh;
    padding: 0 0 46px;
  }

  .topbar {
    min-height: 84px;
    margin: 0;
    padding: 12px clamp(18px, 3vw, 48px);
    border-bottom: 1px solid #e6e9e5;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 14px rgba(16, 24, 40, .04);
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .brand {
    gap: 12px;
    color: #101927;
    font-size: clamp(28px, 3vw, 40px);
    letter-spacing: -.05em;
    white-space: nowrap;
  }

  .brand em {
    color: #078a3f;
    font-style: italic;
  }

  .brand-mark {
    width: 58px;
    height: 58px;
    background:
      radial-gradient(circle, #fff 0 28%, #101927 29% 34%, transparent 35%),
      conic-gradient(from 25deg, #0a8f43 0 18%, transparent 18% 34%, #0a8f43 34% 44%, transparent 44% 66%, #0a8f43 66% 76%, transparent 76%);
    color: #101927;
    border: 2px solid #101927;
    box-shadow: none;
    font-size: 0;
    position: relative;
  }

  .brand-mark::after {
    content: "⚽";
    font-size: 30px;
    filter: grayscale(.2);
  }

  .site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2.3vw, 34px);
    flex: 1;
    min-width: 0;
  }

  .nav-link {
    border: 0;
    border-bottom: 4px solid transparent;
    background: transparent;
    color: #111827;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 58px;
    padding: 0 4px;
    cursor: pointer;
    font-weight: 900;
    font-size: 16px;
    white-space: nowrap;
  }

  .nav-link span:first-child {
    font-size: 24px;
    line-height: 1;
  }

  .nav-link.active {
    color: #078a3f;
    border-bottom-color: #078a3f;
  }

  .top-actions {
    display: flex;
    align-items: center;
    gap: 18px;
  }

  .language {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #111827;
    font-weight: 900;
    border-left: 1px solid #d8ddd8;
    padding-left: 22px;
  }

  .login-btn {
    border: 0;
    border-radius: 12px;
    background: #078a3f;
    color: #fff;
    padding: 14px 22px;
    font-weight: 950;
    box-shadow: 0 9px 18px rgba(7, 138, 63, .24);
    cursor: pointer;
    transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  }
  .login-btn:hover {
    background: #0a9b49;
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(7, 138, 63, .32);
  }

  .pill { display: none; }

  .layout {
    display: block;
    width: min(1280px, calc(100% - 32px));
    margin: 0 auto;
  }

  .side { display: none; }

  .panel,
  .game {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }

  .game {
    min-height: calc(100dvh - 86px);
    overflow: visible;
  }

  .content {
    padding: clamp(22px, 4vw, 58px) 0;
  }

  .hero {
    min-height: auto;
    max-width: 980px;
    margin: 0 auto;
    gap: 22px;
    align-content: start;
  }

  .portal-title {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: clamp(34px, 4vw, 48px);
    letter-spacing: -.04em;
    color: #101927;
    margin-bottom: 8px;
  }

  .portal-title::before {
    content: "";
    width: 8px;
    height: 42px;
    border-radius: 999px;
    background: #078a3f;
  }

  .portal-title::after {
    content: "⚽";
    font-size: 34px;
  }

  .hero-copy,
  .name-box {
    display: none;
  }

  .mode-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  .mode-card {
    min-height: 180px;
    border: 3px solid #0f172a;
    border-radius: 22px;
    padding: 18px;
    overflow: hidden;
    position: relative;
    display: grid;
    align-content: end;
    justify-items: center;
    text-align: center;
    color: #060c18;
    box-shadow: 0 12px 0 rgba(15, 23, 42, .08);
  }

  .mode-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .23;
    background:
      linear-gradient(155deg, transparent 30%, rgba(255,255,255,.55) 31% 33%, transparent 34%),
      radial-gradient(circle at 16% 78%, rgba(255,255,255,.5), transparent 16rem),
      repeating-linear-gradient(-12deg, transparent 0 14px, rgba(255,255,255,.16) 15px 17px);
  }

  .mode-card:hover,
  .mode-card:focus-visible {
    transform: translateY(-5px);
    border-color: #0f172a;
    box-shadow: 0 18px 0 rgba(15, 23, 42, .08), 0 20px 34px rgba(8, 24, 18, .12);
  }

  .mode-card[disabled] {
    opacity: 1;
    filter: grayscale(.1);
  }

  . { background: linear-gradient(135deg, #74c84b 0%, #9ade58 100%); }
  . { background: linear-gradient(135deg, #ffc13d 0%, #ffd85b 100%); }
  . { background: linear-gradient(135deg, #2085ee 0%, #2c9bff 100%); }
  . { background: linear-gradient(135deg, #7258db 0%, #9275ff 100%); }
  . { background: linear-gradient(135deg, #ff6657 0%, #ff8b61 100%); }
  . { background: linear-gradient(135deg, #2ac7c8 0%, #49d7d0 100%); }

  .card-art {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 120px;
    height: 90px;
    margin: 0 auto 8px;
    font-size: 70px;
    text-shadow: 0 4px 0 rgba(0, 0, 0, .12);
  }

  .card-art {
    font-size: 0;
  }

  .card-art::before,
  .card-art::after {
    content: "";
    position: absolute;
    display: block;
  }

  .art-rank::before {
    width: 74px;
    height: 92px;
    border: 6px solid #111827;
    border-radius: 12px;
    background: #fff;
    transform: rotate(-10deg);
    box-shadow: 30px 8px 0 #ffd85b, 30px 8px 0 5px #111827;
  }

  .art-legends::before {
    width: 92px;
    height: 72px;
    background: #fff;
    border: 6px solid #111827;
    border-radius: 50%;
    bottom: 4px;
  }

  .art-legends::after {
    width: 98px;
    height: 52px;
    border: 6px solid #111827;
    border-bottom: 0;
    clip-path: polygon(0 100%, 14% 12%, 36% 58%, 50% 0, 64% 58%, 86% 12%, 100% 100%);
    top: -8px;
    background: #ffd85b;
  }

  .art-clubs::before {
    width: 86px;
    height: 96px;
    border: 6px solid #111827;
    border-radius: 18px 18px 28px 28px;
    clip-path: polygon(50% 0, 100% 18%, 88% 78%, 50% 100%, 12% 78%, 0 18%);
    background: rgba(255,255,255,.85);
  }

  .art-stats::before {
    width: 96px;
    height: 76px;
    border: 6px solid #111827;
    border-radius: 12px;
    background:
      linear-gradient(#111827,#111827) 22px 18px / 52px 5px no-repeat,
      linear-gradient(#111827,#111827) 22px 36px / 38px 5px no-repeat,
      linear-gradient(#111827,#111827) 22px 54px / 62px 5px no-repeat,
      #fff;
  }

  .art-transfers::before {
    width: 104px;
    height: 42px;
    border: 6px solid #111827;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(-22deg);
  }

  .art-transfers::after {
    width: 34px;
    height: 34px;
    right: 2px;
    top: 12px;
    border-right: 6px solid #111827;
    border-top: 6px solid #111827;
    transform: rotate(45deg);
  }

  .art-passport::before {
    width: 78px;
    height: 96px;
    border: 6px solid #111827;
    border-radius: 14px;
    background:
      radial-gradient(circle at 50% 34%, #111827 0 14px, transparent 15px),
      linear-gradient(#111827,#111827) 18px 66px / 42px 5px no-repeat,
      #fff;
  }

  .mode-title {
    position: relative;
    z-index: 1;
    display: block;
    font-size: clamp(22px, 2vw, 30px);
    letter-spacing: -.03em;
  }

  .mode-title .mini,
  .mode-card p {
    display: none;
  }

  .new-badge {
    position: absolute;
    right: 18px;
    top: 18px;
    z-index: 2;
    border-radius: 999px;
    background: #078a3f;
    color: #fff;
    padding: 7px 15px;
    font-weight: 950;
    font-size: 14px;
  }

  .portal-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    color: #4b5563;
    font-size: 18px;
    margin-top: 28px;
  }

  .portal-foot::before,
  .portal-foot::after {
    content: "";
    width: 220px;
    height: 1px;
    background: #8dc99e;
  }

  .screen-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 760px;
    margin: 0 auto 24px auto;
    padding: 0 120px;
    min-height: 54px;
    width: 100%;
    box-sizing: border-box;
    z-index: 120;
    isolation: isolate;
  }

  .screen-head .eyebrow,
  .screen-head p {
    display: none;
  }

  .screen-title-group {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    max-width: 100%;
  }

  .screen-title-group .title,
  .screen-head h2 {
    font-size: clamp(22px, 3.5vw, 32px);
    letter-spacing: -.03em;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }

  .screen-title-group .sub {
    font-size: 13.5px;
    color: #cbd5e1 !important;
    max-width: 580px;
    line-height: 1.35;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  }

  .back-btn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #ffffff;
    color: #0f172a;
    border: 2px solid #111827;
    box-shadow: 0 3px 0 #111827;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    z-index: 150 !important;
    white-space: nowrap;
    text-decoration: none;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    -webkit-tap-highlight-color: transparent;
  }

  .back-btn:hover {
    background: #f8fafc;
    transform: translateY(calc(-50% - 1px));
    box-shadow: 0 4px 0 #111827;
  }

  .back-btn:active {
    transform: translateY(-50%);
    box-shadow: 0 1px 0 #111827;
  }

  @media (max-width: 900px) {
    .screen-head {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 0;
      gap: 12px;
      margin-bottom: 22px;
      min-height: auto;
      z-index: 120;
    }

    .back-btn {
      position: static;
      transform: none;
      align-self: flex-start;
      margin-bottom: 4px;
      z-index: 150 !important;
    }

    .back-btn:hover {
      transform: translateY(-1px);
    }

    .back-btn:active {
      transform: translateY(0);
    }

    .screen-title-group {
      text-align: left;
      align-items: flex-start;
      width: 100%;
    }
  }

  .rank-list,
  .slot-grid,
  .category-grid,
  .hl-compare,
  .passport-box,
  .club-box,
  .option-grid,
  .career-list,
  .legend-board,
  .current-card {
    position: relative;
    z-index: 1;
  }

  .rank-row {
    position: relative;
    z-index: 2;
  }

  .rank-row.dragging {
    z-index: 20;
  }

  .game-hud {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin: 16px 0 22px;
  }

  .hud-pill {
    min-width: 270px;
    display: flex;
    justify-content: center;
    gap: 34px;
    border-radius: 17px;
    padding: 10px 18px;
    background: #f1f5ee;
    color: #101927;
    font-weight: 950;
    font-size: 20px;
  }

  .hud-pill span + span {
    border-left: 1px solid #d9dfd7;
    padding-left: 34px;
  }

  .screen-wrap {
    max-width: 720px;
    margin: 0 auto;
  }

  .mystery-card {
    width: 250px;
    margin: 0 auto 8px;
    text-align: center;
  }

  .mystery-art {
    height: 190px;
    border-radius: 14px;
    border: 1px solid #d9e8d9;
    background:
      radial-gradient(circle at 75% 15%, rgba(216, 247, 101, .8), transparent 6rem),
      linear-gradient(135deg, #98e368, #0a8f43);
    position: relative;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(15, 23, 42, .16);
  }

  .mystery-art::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .26;
    background:
      repeating-linear-gradient(-22deg, transparent 0 16px, rgba(255,255,255,.55) 17px 19px),
      radial-gradient(circle at 20% 72%, rgba(255,255,255,.7), transparent 4rem);
  }

  .player-silhouette {
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 100px;
    height: 100px;
    transform: translateX(-50%);
    background: transparent;
  }
  .player-silhouette::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 10px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #102033;
    transform: translateX(-50%);
  }
  .player-silhouette::after {
    content: "10";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 90px;
    height: 50px;
    border-radius: 40px 40px 0 0;
    background: #102033;
    transform: translateX(-50%);
    color: rgba(255,255,255,.88);
    font-weight: 900;
    font-size: 18px;
    text-align: center;
    line-height: 50px;
  }

  .ball-chip {
    position: absolute;
    right: -10px;
    bottom: -8px;
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 6px solid #fff;
    background: #111827;
    color: #fff;
    font-size: 34px;
    box-shadow: 0 5px 10px rgba(0,0,0,.18);
  }

  .mystery-name {  
    margin-top: 8px;
    font-size: 28px;
    font-weight: 950;
    letter-spacing: -.04em;
   color: inherit;  font-family: Inter, ui-sans-serif, system-ui, sans-serif; }

  .mystery-sub {  
     color: inherit; 
    font-weight: 900;
    font-size: 19px;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif; }

  .legend-board {
    display: block;
  }

  .current-card {
    position: static;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .drag-card {
    display: block;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: grab;
  }

  .slot-grid {
    max-width: 660px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .slot {
    min-height: 60px;
    grid-template-columns: 64px minmax(0, 1fr) auto auto;
    align-items: center;
    align-content: center;
    text-align: left;
    border: 3px solid #111827;
    border-radius: 12px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 3px 0 #111827;
    padding: 8px 18px;
    color: #101927;
  }

  .slot.open:hover,
  .slot.drop-target {
    border-color: #078a3f;
    background: #f3fff6;
    transform: translateY(-2px);
  }

  .slot.locked {
    background: #ecf8ef;
    color: #0c6937;
  }

  .slot-name {
    color: inherit;
    font-size: 23px;
    text-transform: none;
    letter-spacing: -.02em;
  }

  .slot-player {
    font-size: 15px;
    color: #0c6937;
    justify-self: end;
  }

  .locked-note {
    display: none;
  }

  .stat-icon {
    font-size: 34px;
    line-height: 1;
  }

  .rank-list {
    max-width: 720px;
    margin: 22px auto;
  }

  .rank-row {
    border: 3px solid #111827;
    border-radius: 12px;
    box-shadow: 0 3px 0 #111827;
    background: rgba(255,255,255,.92);
  }

  .primary-btn {
    max-width: 720px;
    display: block;
    margin: 0 auto;
    border-radius: 12px;
    background: #078a3f;
    box-shadow: 0 5px 0 #065f2e;
  }

  .score-card {
    max-width: 760px;
    margin: 20px auto 0;
    border-radius: 20px;
    border: 3px solid #111827;
    box-shadow: 0 8px 0 rgba(15, 23, 42, .14);
  }

  .passport-card {
    max-width: 760px;
    margin: 0 auto 18px;
    padding: 18px;
    border: 3px solid #111827;
    border-radius: 18px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 5px 0 #111827;
  }

  .passport-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    font-weight: 950;
    font-size: 24px;
  }

  .career-list {
    display: grid;
    gap: 9px;
  }

  .career-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 11px 12px;
    border: 2px solid #111827;
    border-radius: 11px;
    background: #fff;
  }

  .club-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 950;
    color: #101927;
    white-space: nowrap;
  }

  .club-flag {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 16px;
    flex: 0 0 24px;
    border: 1px solid rgba(17,24,39,.22);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(17,24,39,.10);
    vertical-align: -2px;
  }

  .club-flag.flag-large {
    width: 44px;
    height: 30px;
    flex: 0 0 44px;
    border-radius: 5px;
    vertical-align: middle;
    box-shadow: 0 3px 8px rgba(17,24,39,.18);
  }

  img.club-flag {
    display: inline-block;
    object-fit: cover;
  }

  .hero-flag .club-flag {
    width: 46px;
    height: 31px;
    border-radius: 5px;
    box-shadow: 0 3px 8px rgba(17,24,39,.20);
    vertical-align: middle;
  }

  .comp-flag .club-flag {
    vertical-align: middle;
  }

  .flag-gb {
    background-color: #012169;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='s'%3E%3Cpath d='M0,0 v30 h60 v-30 z'/%3E%3C/clipPath%3E%3CclipPath id='t'%3E%3Cpath d='M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23s)'%3E%3Cpath d='M0,0 v30 h60 v-30 z' fill='%23012169'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23C8102E' stroke-width='4' clip-path='url(%23t)'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%;
  }

  .flag-it { background: linear-gradient(90deg, #009246 0 33.33%, #fff 33.33% 66.66%, #ce2b37 66.66%); }
  .flag-pt { background: linear-gradient(90deg, #006600 0 42%, #ff0000 42%); }
  .flag-us { background: repeating-linear-gradient(#b22234 0 7.7%, #fff 7.7% 15.4%); }
  .flag-us::before { content: ""; position: absolute; left: 0; top: 0; width: 42%; height: 54%; background: #3c3b6e; }
  .flag-ar { background: linear-gradient(#74acdf 0 33.33%, #fff 33.33% 66.66%, #74acdf 66.66%); }
  .flag-br { background: #009b3a; }
  .flag-br::before { content: ""; position: absolute; inset: 3px 5px; background: #ffdf00; transform: rotate(45deg); }
  .flag-br::after { content: ""; position: absolute; left: 8px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: #002776; }
  .flag-sa { background: #006c35; }
  .flag-tr { background: #e30a17; }
  .flag-mc { background: linear-gradient(#ce1126 0 50%, #fff 50%); }
  .flag-ua { background: linear-gradient(#0057b7 0 50%, #ffd700 50%); }
  .flag-gr { background: repeating-linear-gradient(#0d5eaf 0 11.11%, #fff 11.11% 22.22%); }
  .flag-be { background: linear-gradient(90deg, #000 0 33.33%, #ffe936 33.33% 66.66%, #ef3340 66.66%); }
  .flag-ch { background: #d52b1e; }
  .flag-ch::before { content: ""; position: absolute; left: 10px; top: 3px; width: 4px; height: 10px; background: #fff; }
  .flag-ch::after { content: ""; position: absolute; left: 7px; top: 6px; width: 10px; height: 4px; background: #fff; }
  .flag-jp { background: #fff; }
  .flag-jp::after { content: ""; position: absolute; left: 7px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: #bc002d; }
  .flag-ae { background: linear-gradient(#009739 0 33.33%, #fff 33.33% 66.66%, #000 66.66%); }
  .flag-ae::before { content: ""; position: absolute; left: 0; top: 0; width: 28%; height: 100%; background: #ef3340; }
  .flag-se { background: linear-gradient(90deg, transparent 0 30%, #fecc00 30% 42%, transparent 42%), linear-gradient(transparent 0 38%, #fecc00 38% 54%, transparent 54%), #006aa7; }
  .flag-no { background: linear-gradient(90deg, transparent 0 28%, #fff 28% 44%, #00205b 44% 54%, #fff 54% 70%, transparent 70%), linear-gradient(transparent 0 32%, #fff 32% 46%, #00205b 46% 58%, #fff 58% 72%, transparent 72%), #ba0c2f; }
  .flag-pl { background: linear-gradient(#fff 0 50%, #dc143c 50%); }
  .flag-at { background: linear-gradient(#ed2939 0 33.33%, #fff 33.33% 66.66%, #ed2939 66.66%); }
  .flag-hr { background: linear-gradient(#f00 0 33.33%, #fff 33.33% 66.66%, #171796 66.66%); }
  .flag-eg { background: linear-gradient(#ce1126 0 33.33%, #fff 33.33% 66.66%, #000 66.66%); }
  .flag-qa { background: linear-gradient(90deg, #fff 0 26%, #8d1b3d 26%); }
  .flag-cn { background: #de2910; }
  .flag-neutral { background: linear-gradient(135deg, #f8fafc 0 50%, #e5e7eb 50%); }

  .club-strip .club-badge {
    color: inherit;
    justify-content: center;
  }

  .club-strip .club-flag {
    border-color: rgba(255,255,255,.72);
  }

  .career-meta {
    color: #667085;
    font-weight: 800;
  }

  .option-grid {
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .quiz-option {
    min-height: 62px;
    border: 3px solid #111827;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 3px 0 #111827;
    color: #101927;
    cursor: pointer;
    font-weight: 950;
    font-size: 18px;
  }

  .club-current {
    max-width: 420px;
    margin: 0 auto 18px;
    padding: 18px;
    border: 3px solid #111827;
    border-radius: 18px;
    background: linear-gradient(135deg, #2085ee, #49d7d0);
    box-shadow: 0 5px 0 #111827;
    text-align: center;
    cursor: grab;
  }

  .club-current h3 {
    font-size: 34px;
    letter-spacing: -.04em;
  }

  .club-strip {
    margin-bottom: 8px;
    color: #fff;
    font-weight: 950;
    text-shadow: 0 2px 0 rgba(0,0,0,.18);
  }

  @media (max-width: 1080px) {
    .site-nav { order: 3; flex-basis: 100%; overflow-x: auto; justify-content: flex-start; }
    .topbar { flex-wrap: wrap; }
    .top-actions { margin-left: auto; }
    .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 720px) {
    body::before,
    body::after { display: none; }
    .brand { font-size: 28px; }
    .brand-mark { width: 46px; height: 46px; }
    .language { display: none; }
    .login-btn { padding: 11px 14px; }
    .mode-grid { grid-template-columns: 1fr; }
    .portal-foot::before,
    .portal-foot::after { display: none; }
    .slot {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      justify-content: center !important;
      gap: 4px !important;
      min-height: 60px !important;
      padding: 10px 14px !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }
    .slot-name {
      font-size: 11px !important;
      width: 100% !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    .slot-player {
      font-size: 14px !important;
      width: 100% !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    .option-grid { grid-template-columns: 1fr; }
    .career-row { grid-template-columns: 1fr; }
  }

  /* Tactile game feedback */

  body::before,
  body::after {
    display: none;
  }

  .topbar {
    background: rgba(255,255,255,.96);
  }

  .slot,
  .quiz-option,
  .rank-row,
  .club-current,
  .drag-card {
    will-change: transform;
  }

  .slot::after {
    content: "›";
    justify-self: end;
    color: #111827;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
  }

  .slot.locked::after {
    content: "✓";
    color: #078a3f;
  }

  .slot.open:active,
  .quiz-option:active,
  .rank-row:active,
  .club-current:active,
  .primary-btn:active {
    transform: scale(.985);
  }

  .lock-pop {
    animation: lockPop .38s cubic-bezier(.2, 1.4, .35, 1);
  }

  .lock-burst {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    transform: translate(-50%, -50%);
    padding: 9px 14px;
    border: 3px solid #111827;
    border-radius: 999px;
    background: #078a3f;
    color: #fff;
    box-shadow: 0 5px 0 #065f2e, 0 14px 24px rgba(15,23,42,.18);
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
    animation: burstOut .68s ease forwards;
  }

  .global-rank-card {
    display: grid;
    justify-items: end;
    gap: 4px;
    max-width: 360px;
    margin: 0 auto 18px;
    padding: 18px 22px 16px;
    border: 3px solid #111827;
    border-radius: 0 18px 18px 0;
    background: rgba(255,255,255,.96);
    box-shadow: 0 5px 0 #111827;
    color: #101927;
  }

  .global-rank-label {
    color: #5f6977;
    font-size: 14px;
    font-weight: 950;
  }

  .global-rank-number {
    font-size: clamp(34px, 6vw, 50px);
    line-height: .95;
    font-weight: 950;
    letter-spacing: -.05em;
  }

  .global-rank-number span {
    color: #c9cdd3;
    font-size: .55em;
  }

  @keyframes lockPop {
    0% { transform: scale(1); }
    45% { transform: scale(.96) rotate(-.6deg); }
    72% { transform: scale(1.035) rotate(.4deg); }
    100% { transform: scale(1); }
  }

  @keyframes burstOut {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.75); }
    18% { opacity: 1; transform: translate(-50%, -68%) scale(1.05); }
    100% { opacity: 0; transform: translate(-50%, -116%) scale(.9); }
  }

  /* Website pages, custom CSS icons and generic field graphics */
  body {
    background:
      linear-gradient(to bottom, rgba(255,255,255,.98) 0%, rgba(255,255,255,.92) 34%, rgba(255,255,255,.66) 68%, rgba(226,244,226,.7) 100%),
      repeating-linear-gradient(90deg, #dfeedd 0 90px, #d5e8d2 90px 180px);
  }

  .shell::before {
    content: "";
    position: fixed;
    left: 50%;
    bottom: -210px;
    width: min(1220px, 130vw);
    height: 520px;
    transform: translateX(-50%);
    border: 5px solid rgba(255,255,255,.9);
    border-radius: 46px;
    background:
      linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)) 50% 0 / 5px 100% no-repeat,
      radial-gradient(circle at 50% 50%, transparent 0 118px, rgba(255,255,255,.9) 120px 124px, transparent 126px),
      linear-gradient(90deg, transparent 0 11%, rgba(255,255,255,.9) 11% 11.4%, transparent 11.4% 88.6%, rgba(255,255,255,.9) 88.6% 89%, transparent 89%),
      repeating-linear-gradient(90deg, rgba(46,129,57,.18) 0 90px, rgba(73,154,72,.18) 90px 180px);
    opacity: .72;
    pointer-events: none;
    z-index: -1;
  }

  .icon {
    width: 25px;
    height: 25px;
    display: inline-block;
    position: relative;
    border: 3px solid currentColor;
    border-radius: 7px;
  }

  .icon-home {
    border: 0;
    border-radius: 0;
  }

  .icon-home::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 10px;
    width: 19px;
    height: 13px;
    border: 3px solid currentColor;
    border-top: 0;
    border-radius: 0 0 4px 4px;
  }

  .icon-home::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 15px;
    height: 15px;
    border-left: 3px solid currentColor;
    border-top: 3px solid currentColor;
    transform: rotate(45deg);
    border-radius: 3px 0 0 0;
  }

  .icon-ball {
    border-radius: 50%;
  }

  .icon-ball::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 3px solid currentColor;
    border-radius: 50%;
  }

  .icon-rank {
    border: 0;
    border-radius: 0;
    background:
      linear-gradient(currentColor,currentColor) 2px 13px / 5px 11px no-repeat,
      linear-gradient(currentColor,currentColor) 10px 7px / 5px 17px no-repeat,
      linear-gradient(currentColor,currentColor) 18px 2px / 5px 22px no-repeat;
  }

  .icon-info {
    border-radius: 50%;
  }

  .icon-info::before {
    content: "i";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 950;
    font-size: 16px;
  }

  .icon-shield {
    border: 0;
    border-radius: 0;
  }

  .icon-shield::before {
    content: "";
    position: absolute;
    inset: 1px 3px 0;
    border: 3px solid currentColor;
    border-radius: 12px 12px 14px 14px;
    clip-path: polygon(50% 0, 100% 18%, 88% 76%, 50% 100%, 12% 76%, 0 18%);
  }

  .icon-shield::after {
    content: "";
    position: absolute;
    left: 12px;
    top: 8px;
    width: 3px;
    height: 10px;
    border-radius: 999px;
    background: currentColor;
  }

  .icon-mail::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-left: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(-45deg);
  }

  .page-card {
    max-width: 920px;
    margin: 0 auto;
    padding: clamp(22px, 4vw, 42px);
    border: 3px solid #111827;
    border-radius: 24px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 0 rgba(17,24,39,.12);
  }

  .page-card h1 {
    font-size: clamp(38px, 6vw, 72px);
    line-height: .95;
    letter-spacing: -.06em;
    margin-bottom: 16px;
  }

  .page-card h2 {
    margin-top: 24px;
    margin-bottom: 8px;
    font-size: 26px;
  }

  .page-card p,
  .page-card li {
    color: #4b5563;
    font-size: 17px;
    line-height: 1.58;
  }

  .legal-document {
    display: grid;
    gap: 18px;
    margin-top: 18px;
  }

  .legal-document h2 {
    border-top: 1px solid #e5e7eb;
    padding-top: 18px;
  }

  .legal-document h3 {
    margin: 12px 0 6px;
    font-size: 20px;
  }

  .legal-document ul {
    margin: 8px 0 0;
    padding-left: 22px;
  }

  .legal-meta {
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 2px solid #d8ddd8;
    border-radius: 12px;
    background: #f8fbf9;
  }

  .page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
  }

  .page-actions .primary-btn,
  .page-actions .ghost-btn {
    width: auto;
    margin: 0;
  }

  .sparql-box {
    margin-top: 18px;
    padding: 16px;
    border: 2px dashed #87b990;
    border-radius: 14px;
    background: #f6fff7;
  }

  .sparql-results {
    display: grid;
    gap: 8px;
    margin-top: 12px;
  }

  .sparql-row {
    padding: 10px 12px;
    border: 2px solid #111827;
    border-radius: 10px;
    background: #fff;
    font-weight: 850;
  }

  .cookie-banner {
    position: fixed;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 960px;
    margin: 0 auto;
    padding: 16px;
    border: 3px solid #111827;
    border-radius: 18px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 8px 0 rgba(17,24,39,.16);
  }

  .cookie-banner.show {
    display: flex;
  }

  .cookie-banner p {
    margin-top: 4px;
    color: #4b5563;
  }

  .cookie-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .cookie-actions .primary-btn,
  .cookie-actions .ghost-btn {
    width: auto;
    margin: 0;
    white-space: nowrap;
  }

  @media (max-width: 720px) {
    .cookie-banner {
      display: none;
      align-items: stretch;
      flex-direction: column;
    }

    .cookie-banner.show {
      display: flex;
    }
  }

  /* Final layout repair: prevent overlap, keep icons crisp */
  .topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(14px, 2vw, 28px);
    min-height: 78px;
    padding: 10px clamp(16px, 2.4vw, 34px);
    overflow: hidden;
  }

  .brand {
    min-width: 0;
    flex: none;
    font-size: clamp(26px, 2.4vw, 36px);
    letter-spacing: -.055em;
  }

  .brand-logo {
    display: block;
    width: clamp(190px, 18vw, 285px);
    height: auto;
    max-height: 58px;
    object-fit: contain;
  }

  .brand-mark {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: grid;
    place-items: center;
    border: 3px solid #111827;
    border-radius: 50%;
    background:
      linear-gradient(135deg, transparent 0 34%, rgba(7,138,63,.95) 35% 50%, transparent 51%),
      radial-gradient(circle at 64% 36%, #eaf4ff 0 16%, transparent 17%),
      #fff;
    color: #078a3f;
    font-size: 16px;
    font-weight: 950;
    letter-spacing: -.04em;
    box-shadow: none;
  }

  .brand-mark::before,
  .brand-mark::after {
    content: none !important;
  }

  .site-nav {
    min-width: 0;
    justify-content: flex-start;
    gap: clamp(12px, 1.45vw, 22px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .nav-link {
    flex: 0 0 auto;
    height: 58px;
    padding: 0 2px;
    gap: 8px;
    font-size: clamp(14px, 1.05vw, 16px);
    line-height: 1;
  }

  .nav-link span:last-child {
    white-space: nowrap;
  }

  .nav-link .icon,
  .language {
    flex: 0 0 auto;
  }

  .icon {
    width: 25px;
    height: 25px;
    border-width: 3px;
    background: transparent;
  }

  .icon-trophy {
    border: 0;
  }

  .icon-trophy::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 13px;
    height: 13px;
    border: 3px solid currentColor;
    border-radius: 3px 3px 8px 8px;
  }

  .icon-trophy::after {
    content: "";
    position: absolute;
    left: 4px;
    bottom: 1px;
    width: 17px;
    height: 9px;
    border-top: 4px solid currentColor;
    border-bottom: 4px solid currentColor;
  }

  .top-actions {
    flex: none;
    gap: 12px;
  }

  .countdown-pill {
    gap: 8px;
    white-space: nowrap;
  }

  .countdown-pill strong {
    color: #078a3f;
    font-variant-numeric: tabular-nums;
  }

  .next-game-card {
    max-width: 520px;
    margin: 14px auto 18px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 2px solid #d8ddd8;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #111827;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(17,24,39,.08);
  }

  .next-game-card strong {
    color: #078a3f;
    font-variant-numeric: tabular-nums;
  }

  .touch-ghost {
    position: fixed;
    left: 0;
    top: 0;
    width: min(340px, calc(100vw - 32px));
    pointer-events: none;
    z-index: 9999;
    opacity: .94;
    transform: translate(-50%, -50%) scale(.98);
    box-shadow: 0 18px 34px rgba(17,24,39,.22);
  }

  .login-btn {
    white-space: nowrap;
    padding: 13px 18px;
  }

  .language-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 8px;
    border: 2px solid #d8ddd8;
    border-radius: 12px;
    background: rgba(255,255,255,.92);
    color: #111827;
    font-weight: 900;
    white-space: nowrap;
  }

  .rank-row,
  .drag-card,
  .club-current {
    touch-action: pan-y;
    user-select: none;
  }

  .slot.open {
    touch-action: manipulation;
    user-select: none;
  }

  /* =========================================================================
     LANGUAGE DROPDOWN FLAG SPRITE (High Performance & Zero-Flicker)
     ========================================================================= */
  .flag-badge {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 16px;
    min-width: 24px;
    max-width: 24px;
    flex: 0 0 24px;
    border: 1px solid rgba(17, 24, 39, 0.22);
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.12);
    vertical-align: -2px;
    background-image: url("../images/lang-flags-sprite.svg"), url("/images/lang-flags-sprite.svg");
    background-repeat: no-repeat !important;
    background-size: 100% 700% !important;
    background-color: #f1f5f9;
    overflow: hidden;
  }

  .flag-badge::before,
  .flag-badge::after {
    display: none !important;
    content: none !important;
  }

  /* Specific sprite offsets for language dropdown & modal flags */
  .flag-badge.flag-gb,
  .flag-badge.flag-en,
  .flag-badge[class*="flag-gb"],
  .flag-badge[class*="flag-en"] {
    background-image: url("../images/lang-flags-sprite.svg"), url("/images/lang-flags-sprite.svg") !important;
    background-position: 0 0% !important;
    background-size: 100% 700% !important;
    background-repeat: no-repeat !important;
  }

  .flag-badge.flag-nl,
  .flag-badge[class*="flag-nl"] {
    background-image: url("../images/lang-flags-sprite.svg"), url("/images/lang-flags-sprite.svg") !important;
    background-position: 0 16.6667% !important;
    background-size: 100% 700% !important;
    background-repeat: no-repeat !important;
  }

  .flag-badge.flag-de,
  .flag-badge[class*="flag-de"] {
    background-image: url("../images/lang-flags-sprite.svg"), url("/images/lang-flags-sprite.svg") !important;
    background-position: 0 33.3333% !important;
    background-size: 100% 700% !important;
    background-repeat: no-repeat !important;
  }

  .flag-badge.flag-fr,
  .flag-badge[class*="flag-fr"] {
    background-image: url("../images/lang-flags-sprite.svg"), url("/images/lang-flags-sprite.svg") !important;
    background-position: 0 50% !important;
    background-size: 100% 700% !important;
    background-repeat: no-repeat !important;
  }

  .flag-badge.flag-es,
  .flag-badge[class*="flag-es"] {
    background-image: url("../images/lang-flags-sprite.svg"), url("/images/lang-flags-sprite.svg") !important;
    background-position: 0 66.6667% !important;
    background-size: 100% 700% !important;
    background-repeat: no-repeat !important;
  }

  .flag-badge.flag-id,
  .flag-badge[class*="flag-id"] {
    background-image: url("../images/lang-flags-sprite.svg"), url("/images/lang-flags-sprite.svg") !important;
    background-position: 0 83.3333% !important;
    background-size: 100% 700% !important;
    background-repeat: no-repeat !important;
  }

  .flag-badge.flag-in,
  .flag-badge.flag-pa,
  .flag-badge[class*="flag-in"],
  .flag-badge[class*="flag-pa"] {
    background-image: url("../images/lang-flags-sprite.svg"), url("/images/lang-flags-sprite.svg") !important;
    background-position: 0 100% !important;
    background-size: 100% 700% !important;
    background-repeat: no-repeat !important;
  }

  .flag-nl:not(.flag-badge) { background: linear-gradient(#ae1c28 0 33.33%, #fff 33.33% 66.66%, #21468b 66.66%); }
  .flag-fr:not(.flag-badge) { background: linear-gradient(90deg, #0055a4 0 33.33%, #fff 33.33% 66.66%, #ef4135 66.66%); }
  .flag-es:not(.flag-badge) { background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%); }
  .flag-id:not(.flag-badge) { background: linear-gradient(#ce1126 0 50%, #fff 50%); }
  .flag-de:not(.flag-badge) { background: linear-gradient(#000 0 33.33%, #dd0000 33.33% 66.66%, #ffce00 66.66%); }

  .flag-kw { background: linear-gradient(#007a3d 0 33.3%, #fff 33.3% 66.6%, #ce1126 66.6%); }
  .flag-kw::before { content: ""; position: absolute; left: 0; top: 0; width: 25%; height: 100%; background: #000; clip-path: polygon(0 0, 100% 33.3%, 100% 66.6%, 0 100%); }
  .flag-mx { background: linear-gradient(90deg, #006341 0 33.3%, #fff 33.3% 66.6%, #c8102e 66.6%); }
  .flag-mx::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #8b4513; }
  .flag-cl { background: linear-gradient(#fff 0 50%, #da291c 50%); }
  .flag-cl::before { content: ""; position: absolute; left: 0; top: 0; width: 33.3%; height: 50%; background: #0039a6; }
  .flag-cl::after { content: "★"; position: absolute; left: 3px; top: -1px; color: #fff; font-size: 8px; }
  .flag-wl { background: linear-gradient(#fff 0 50%, #00c000 50%); }
  .flag-wl::after { content: "🐉"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 10px; }
  .flag-uy { background: repeating-linear-gradient(#fff 0 11.1%, #0038a8 11.1% 22.2%); }
  .flag-uy::before { content: ""; position: absolute; left: 0; top: 0; width: 38%; height: 55.5%; background: #fff; }
  .flag-uy::after { content: "☀"; position: absolute; left: 2px; top: -2px; color: #fcd116; font-size: 12px; }

  .flag-ba { background: linear-gradient(-45deg, #002395 50%, #fecb00 50%); }
  .flag-co { background: linear-gradient(#fcd116 0 50%, #003893 50% 75%, #ce1126 75%); }
  .flag-cr { background: linear-gradient(#002b7f 0 16.6%, #fff 16.6% 33.3%, #ce1126 33.3% 66.6%, #fff 66.6% 83.3%, #002b7f 83.3%); }
  .flag-dk { background: linear-gradient(90deg, transparent 0 28%, #fff 28% 44%, transparent 44%), linear-gradient(transparent 0 40%, #fff 40% 60%, transparent 60%), #c60c30; }
  .flag-hn { background: linear-gradient(#0073cf 0 33.3%, #fff 33.3% 66.6%, #0073cf 66.6%); }
  .flag-ci { background: linear-gradient(90deg, #f77f00 0 33.3%, #fff 33.3% 66.6%, #009e60 66.6%); }
  .flag-lv { background: linear-gradient(#9e3039 0 40%, #fff 40% 60%, #9e3039 60%); }
  .flag-my { background: repeating-linear-gradient(#cc0000 0 10%, #fff 10% 20%); }
  .flag-my::before { content: ""; position: absolute; left: 0; top: 0; width: 50%; height: 50%; background: #010066; }
  .flag-sn { background: linear-gradient(90deg, #00853f 0 33.3%, #fdef42 33.3% 66.6%, #e31b23 66.6%); }
  .flag-kr { background: #fff; }
  .flag-kr::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(#cd2e3a 50%, #0047a0 50%); }

  .flag-england, .flag-gb-eng, .flag-eng { background: #fff; }
  .flag-england::before, .flag-gb-eng::before, .flag-eng::before { content: ""; position: absolute; left: 0; top: 40%; width: 100%; height: 20%; background: #ce1126; }
  .flag-england::after, .flag-gb-eng::after, .flag-eng::after { content: ""; position: absolute; left: 40%; top: 0; width: 20%; height: 100%; background: #ce1126; }
  .flag-wales, .flag-gb-wls, .flag-wls { background: linear-gradient(#fff 0 50%, #00c000 50%); }
  .flag-wales::after, .flag-gb-wls::after, .flag-wls::after { content: "🐉"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 10px; }
  .flag-scotland, .flag-gb-sct, .flag-sct { background: #0065bd; }
  .flag-scotland::before, .flag-gb-sct::before, .flag-sct::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to bottom right, transparent 45%, #fff 45%, #fff 55%, transparent 55%), linear-gradient(to top right, transparent 45%, #fff 45%, #fff 55%, transparent 55%); }
  .flag-pa { background: radial-gradient(circle at 50% 50%, #0a58ca 0 16%, transparent 17%), linear-gradient(#ff9933 0 33.33%, #fff 33.33% 66.66%, #138808 66.66%); }
  .flag-en {
    background-color: #012169;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='s'%3E%3Cpath d='M0,0 v30 h60 v-30 z'/%3E%3C/clipPath%3E%3CclipPath id='t'%3E%3Cpath d='M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23s)'%3E%3Cpath d='M0,0 v30 h60 v-30 z' fill='%23012169'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23C8102E' stroke-width='4' clip-path='url(%23t)'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  .language-select select {
    max-width: 112px;
    border: 0;
    background: transparent;
    color: inherit;
    font-weight: 900;
    outline: 0;
    cursor: pointer;
  }

  .portal-title {
    flex-wrap: wrap;
    line-height: 1;
  }

  .portal-title::after {
    content: "";
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 3px solid #111827;
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 50%, #2d67e8 0 18%, transparent 19%),
      conic-gradient(#7da2ff 0 18%, #fff 18% 33%, #2d67e8 33% 50%, #fff 50% 65%, #7da2ff 65% 82%, #fff 82%);
    box-shadow: 0 2px 0 rgba(17,24,39,.18);
  }

  .mode-grid {
    align-items: stretch;
  }

  .mode-card {
    min-height: 178px;
    isolation: isolate;
  }

  .card-art {
    width: 118px;
    height: 84px;
    margin-bottom: 10px;
  }

  .card-art::before {
    content: "";
    inset: auto;
    left: 50%;
    top: 50%;
    width: 92px;
    height: 66px;
    transform: translate(-50%, -50%);
    border: 6px solid #111827;
    border-radius: 18px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 6px 0 rgba(17,24,39,.12);
  }

  .card-art::after {
    left: 50%;
    top: 50%;
    width: 76px;
    height: 34px;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    border: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    clip-path: none;
    color: #111827;
    font-size: 20px;
    font-weight: 950;
    letter-spacing: -.03em;
    line-height: 1;
  }

  .art-rank::after { content: "INT"; }
  .art-legends::after { content: "LEG"; }
  .art-clubs::after { content: "CLUB"; }
  .art-stats::after { content: "H/L"; }
  .art-transfers::after { content: "TRF"; }
  .art-passport::after { content: "ID"; }

  .mode-explainer {
    max-width: 720px;
    margin: -6px auto 14px;
    padding: 12px 14px;
    border: 2px solid rgba(17,24,39,.16);
    border-radius: 12px;
    background: rgba(255,255,255,.82);
    color: #475467;
    font-weight: 750;
    line-height: 1.45;
    text-align: center;
  }

  .higher-lower-stage {
    display: grid;
    gap: 14px;
    max-width: 850px;
    margin: 0 auto;
  }

  .hl-stat-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 10px 16px;
    border: 2px solid rgba(17,24,39,.16);
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    color: #101927;
    font-weight: 950;
    box-shadow: 0 3px 0 rgba(17,24,39,.08);
  }

  .hl-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
  }

  .hl-versus {
    align-self: center;
    justify-self: center;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #111827;
    border-radius: 999px;
    background: #fff;
    color: #111827;
    font-size: 15px;
    font-weight: 950;
    box-shadow: 0 4px 0 rgba(17,24,39,.12);
  }

  .hl-player-card {
    min-width: 0;
    min-height: 245px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 8px;
    padding: 18px;
    border: 3px solid rgba(255,255,255,0.2);
    border-radius: 22px;
    background: rgba(0,0,0,0.6);
    color: inherit;
    text-align: center;
    box-shadow: 0 8px 0 rgba(17,24,39,.09);
    cursor: pointer;
  }

  .hl-player-card:hover,
  .hl-player-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 12px 0 rgba(17,24,39,.09), 0 16px 28px rgba(8,24,18,.12);
  }

  .hl-player-card[disabled] {
    cursor: default;
    opacity: .96;
  }

  .hl-player-card[disabled]:hover {
    transform: none;
  }

  .hl-player-card.is-correct {
    border-color: rgba(7,138,63,.75);
    background: #f1fff6;
  }

  .hl-player-card.is-wrong {
    border-color: rgba(239,107,107,.78);
    background: #fff4f4;
  }

  .hl-avatar {
    width: 92px;
    height: 92px;
    border: 4px solid #111827;
    border-radius: 26px;
    position: relative;
    overflow: hidden;
    background: url("../images/playericon.png") center / contain no-repeat, linear-gradient(135deg, #dbffe9, #ffffff 52%, #dbe8ff);
    box-shadow: 0 5px 0 rgba(17,24,39,.12);
  }


  .hl-name {  
    max-width: 100%;
    font-size: 21px;
    font-weight: 950;
    line-height: 1.05;
    overflow-wrap: anywhere;
   color: inherit;  font-family: Inter, ui-sans-serif, system-ui, sans-serif; }

  .hl-meta {  
     color: inherit; 
    font-size: 14px;
    font-weight: 850;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif; }

  .hl-value {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: #eefaf3;
    color: #078a3f;
    font-size: 15px;
    font-weight: 950;
  }

  .hl-value.is-hidden {
    background: #f2f4f7;
    color: #667085;
  }

  .hl-outcome,
  .hl-history,
  .hl-remaining {
    border: 2px solid rgba(17,24,39,.16);
    border-radius: 14px;
    background: rgba(255,255,255,.86);
    padding: 12px 14px;
    color: #344054;
    font-weight: 850;
  }

  .hl-outcome strong {
    color: #101927;
  }

  .hl-rounds {
    display: grid;
    gap: 8px;
    margin-top: 8px;
  }

  .hl-round-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    border: 1px solid #d8ddd8;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
  }

  .hl-round-row.status-ok {
    border-color: rgba(7,138,63,.45);
    background: #f1fff6;
  }

  .hl-round-row.status-off {
    border-color: rgba(239,107,107,.55);
    background: #fff4f4;
  }

  .hl-round-main {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hl-round-score {
    color: #667085;
    font-weight: 950;
  }

  .art-rank::before,
  .art-legends::before,
  .art-clubs::before,
  .art-stats::before,
  .art-transfers::before,
  .art-passport::before {
    clip-path: none;
  }

  .mode-title {
    text-align: center;
    line-height: 1.05;
  }

  @media (max-width: 1180px) {
    .topbar {
      grid-template-columns: auto auto;
      overflow: visible;
    }

    .site-nav {
      grid-column: 1 / -1;
      order: 3;
      border-top: 1px solid #eef1ed;
    }

    .top-actions {
      justify-self: end;
    }
  }

  @media (max-width: 720px) {
    .topbar {
      grid-template-columns: 1fr auto;
      gap: 8px 12px;
      padding: 10px 12px;
    }

    .brand {
      font-size: 27px;
    }

    .brand-logo {
      width: 184px;
      max-height: 46px;
    }

    .brand-mark {
      width: 44px;
      height: 44px;
      flex-basis: 44px;
      font-size: 13px;
    }

    .site-nav {
      padding-bottom: 4px;
    }

    .nav-link {
      height: 46px;
      font-size: 14px;
    }

    .nav-link .icon {
      width: 22px;
      height: 22px;
    }

    .login-btn {
      padding: 10px 12px;
      font-size: 14px;
    }

    .language-select {
      height: 38px;
      padding: 0 6px;
    }

    .language-select select {
      max-width: 86px;
      font-size: 13px;
    }

    .countdown-pill {
      font-size: 12px;
      padding: 7px 9px;
    }

    .portal-title {
      font-size: clamp(36px, 12vw, 58px);
    }

    .hl-board {
      grid-template-columns: 1fr;
    }

    .hl-versus {
      width: 42px;
      height: 42px;
      margin: -2px auto;
    }

    .hl-player-card {
      min-height: 210px;
    }

    .hl-round-row {
      grid-template-columns: auto minmax(0, 1fr);
    }

    .hl-round-score {
      grid-column: 2;
    }
  }

  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .result-animate-1 { animation: fadeInUp 0.4s ease-out forwards; opacity: 0; }
  .result-animate-2 { animation: fadeInUp 0.4s ease-out 0.15s forwards; opacity: 0; }
  .result-animate-3 { animation: fadeInUp 0.4s ease-out 0.3s forwards; opacity: 0; }
  

  /* ==========================================================
     RESULT SCREEN: 2-COLUMN SOLUTION COMPARISON
     ========================================================== */
  .result-side-by-side-wrap {
    margin-top: 24px;
    width: 100%;
  }

  .result-side-by-side {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  @media (min-width: 1025px) {
    .result-choice-col {
      position: sticky;
      top: 96px;
      align-self: flex-start;
      z-index: 10;
    }
  }

  @media (max-width: 1024px) {
    .result-side-by-side {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  }

  .result-col-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 0 4px;
  }

  .result-col-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #475569;
  }

  .result-round-pill, .result-col-sub {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
  }

  /* LEFT COLUMN: HERO CHOICE CARD */
  .hero-choice-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 400px;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .hero-choice-card.hero-card-animate {
    animation: heroCardSwitch 0.25s ease-out;
  }

  @keyframes heroCardSwitch {
    0% { opacity: 0.7; transform: translateY(4px) scale(0.99); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }

  .hero-choice-head {
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
  }

  .hero-choice-avatar {
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
  }

  .hero-flag {
    font-size: 48px;
    line-height: 1;
    display: inline-block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
  }

  .hero-ball {
    font-size: 40px;
    display: inline-block;
  }

  .hero-choice-avatar svg, .hero-choice-avatar img {
    width: 52px;
    height: 52px;
    object-fit: contain;
  }

  .hero-choice-title {
    font-size: clamp(20px, 3vw, 24px);
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .hero-choice-meta {
    font-size: 13.5px;
    color: #64748b;
    font-weight: 600;
  }

  .hero-choice-body {
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .hero-pick-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
  }

  .hero-pick-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 6px;
  }

  .hero-pick-cat {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 10px;
    line-height: 1.3;
  }

  .hero-pick-badge-row {
    display: flex;
    justify-content: center;
  }

  .hero-rank-badge {
    font-size: 17px;
    font-weight: 800;
    padding: 4px 18px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  }

  .hero-rank-badge.ok {
    background: #dcfce7;
    color: #15803d;
    border: 1.5px solid #86efac;
  }

  .hero-rank-badge.close {
    background: #fef3c7;
    color: #b45309;
    border: 1.5px solid #fde68a;
  }

  .hero-rank-badge.off {
    background: #fee2e2;
    color: #b91c1c;
    border: 1.5px solid #fecaca;
  }

  .hero-ideal-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13.5px;
    color: #475569;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    flex-wrap: wrap;
  }

  .hero-ideal-label {
    color: #64748b;
    font-weight: 700;
  }

  .hero-ideal-cat {
    font-weight: 800;
    color: #0f172a;
  }

  .hero-choice-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
    margin-top: auto;
  }

  .choice-nav-btn {
    background: #f1f5f9;
    border: 1.5px solid #e2e8f0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #334155;
    transition: background-color 0.15s, transform 0.15s, border-color 0.15s, opacity 0.15s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .choice-nav-btn:hover:not(:disabled) {
    background: #e2e8f0;
    color: #0f172a;
    transform: scale(1.05);
  }

  .choice-nav-btn:active:not(:disabled) {
    transform: scale(0.95);
  }

  .choice-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  .choice-nav-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .choice-nav-counter {
    font-size: 14px;
    font-weight: 800;
    color: #334155;
  }

  .choice-nav-dots {
    display: flex;
    gap: 5px;
    align-items: center;
  }

  .choice-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s;
  }

  .choice-dot.active {
    background: #078a3f;
    width: 16px;
    border-radius: 4px;
  }

  /* RIGHT COLUMN: SOLUTION COMPARISON LIST */
  .solution-comp-list {
    max-height: 490px;
    overflow-y: auto;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
  }

  .solution-comp-list::-webkit-scrollbar {
    width: 6px;
  }

  .solution-comp-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
  }

  .solution-comp-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
    user-select: none;
  }

  .solution-comp-card:hover {
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
  }

  .solution-comp-card.active {
    border-color: #078a3f;
    box-shadow: 0 0 0 2px rgba(7, 138, 63, 0.25), 0 4px 12px rgba(7, 138, 63, 0.08);
    background: #fafffc;
  }

  .solution-comp-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
  }

  .solution-comp-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 14.5px;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .comp-flag {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
  }

  .comp-icon {
    font-size: 14px;
    flex-shrink: 0;
  }

  .solution-comp-card-title svg, .solution-comp-card-title img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .comp-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .comp-round {
    font-size: 11.5px;
    font-weight: 800;
    color: #64748b;
    background: #f8fafc;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .solution-comp-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
  }

  .comp-divider {
    width: 1px;
    height: 80%;
    background: #f1f5f9;
  }

  .comp-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }

  .comp-col-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
  }

  .comp-col-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }

  .comp-cat {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .comp-badge {
    font-size: 12px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 9999px;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 28px;
    text-align: center;
  }

  .comp-badge.ok, .carousel-badge.ok {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
  }

  .comp-badge.close, .carousel-badge.close {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
  }

  .comp-badge.off, .carousel-badge.off {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
  }


  @keyframes slideInFade {
    0% { transform: translateX(15px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
  }
  .mode-transition {
    animation: slideInFade 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  }

  .club-header-plate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 24px;
    padding: 16px 32px;
    background: rgba(255, 255, 255, 0.92);
    border: 3px solid #111827;
    border-radius: 16px;
    box-shadow: 0 4px 0 #111827;
    width: fit-content;
    text-align: center;
  }
  .club-header-plate h2 {
    margin: 0;
    font-size: 24px;
    color: #111827;
    font-weight: 900;
  }

/* Streak Increase Fire Pulse & Bounce Animation */
@keyframes streakFirePulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.8), 0 0 0 0 rgba(239, 68, 68, 0.6);
  }
  20% {
    transform: scale(1.18) translateY(-3px);
    box-shadow: 0 0 18px 5px rgba(245, 158, 11, 0.95), 0 0 26px 8px rgba(239, 68, 68, 0.65);
    border-color: #f59e0b !important;
  }
  40% {
    transform: scale(1.06) translateY(-1px);
    box-shadow: 0 0 22px 7px rgba(245, 158, 11, 0.8), 0 0 30px 10px rgba(239, 68, 68, 0.45);
  }
  60% {
    transform: scale(1.14) translateY(-2px);
    box-shadow: 0 0 18px 5px rgba(245, 158, 11, 0.65), 0 0 24px 7px rgba(239, 68, 68, 0.3);
  }
  80% {
    transform: scale(1.03) translateY(-0.5px);
    box-shadow: 0 0 12px 3px rgba(245, 158, 11, 0.4);
  }
  100% {
    transform: scale(1) translateY(0);
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
  }
}

@keyframes streakFlameBounce {
  0% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(1.45) rotate(-14deg); }
  45% { transform: scale(1.5) rotate(14deg); }
  70% { transform: scale(1.25) rotate(-6deg); }
  85% { transform: scale(1.15) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.streak-pulse,
.streak-increase,
#streakCounter.streak-pulse,
#streakCounter.streak-increase {
  animation: streakFirePulse 0.95s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.streak-pulse span:first-child,
.streak-increase span:first-child,
#streakCounter.streak-pulse span:first-child,
#streakCounter.streak-increase span:first-child {
  display: inline-block;
  animation: streakFlameBounce 0.95s ease-in-out !important;
}

/* Custom Image Overrides */
body {
  background: url("../images/stadium.png") center center / cover no-repeat fixed !important;
}

.card-art {
  width: 160px !important;
  height: 160px !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.card-art::before, .card-art::after {
  display: none !important;
}

.art-rank { background-image: url("../images/interlands.png") !important; }
.art-legends { background-image: url("../images/legends.png") !important; }
.art-clubs { background-image: url("../images/clubs.png") !important; }
.art-stats { background-image: url("../images/higherlower.png") !important; }
.art-transfers { background-image: url("../images/transfers.png") !important; }
.art-passport { background-image: url("../images/passport.png") !important; }

.mode-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Icon Overrides */
.mystery-art {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.player-silhouette {
  width: 160px !important;
  height: 160px !important;
  bottom: 0px !important;
}

.player-silhouette::before,
.player-silhouette::after {
  display: none !important;
}

.hl-avatar {
  width: 130px !important;
  height: 130px !important;
}

@keyframes goldGlowContinuous {
  0% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); border-color: rgba(245, 158, 11, 0.8); }
  50% { box-shadow: 0 0 18px rgba(255, 215, 0, 1); border-color: rgba(255, 215, 0, 1); transform: translateY(-1px); }
  100% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); border-color: rgba(245, 158, 11, 0.8); transform: translateY(0); }
}

#streakCounter {
  animation: goldGlowContinuous 2.5s infinite ease-out;
  background: linear-gradient(135deg, #fffbeb, #fef3c7) !important;
  border-width: 2px !important;
  border-style: solid !important;
  color: #b45309 !important;
}

@media (max-width: 480px) {
  .card-art {
    width: 120px !important;
    height: 120px !important;
  }
}


/* Ad Slot responsive behavior */
@media (max-width: 768px) {
  .ad-slot {
    min-height: 0 !important;
  }
  .ad-slot:empty, .ad-slot[data-empty="true"] {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
  }
}

.modal, .modal-overlay {
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.modal[style*="display: flex"], .modal-overlay[style*="display: flex"],
.modal[style*="display: flex"], .modal-overlay[style*="display: block"] {
  @starting-style {
    opacity: 0;
    transform: scale(0.95);
  }
}

.toast {
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
  @starting-style {
    opacity: 0;
    transform: translateY(100%);
  }
}

/* --- Emil Design: Active States --- */
button:active, 
.btn:active, 
.primary-btn:active, 
.secondary-btn:active, 
.nav-link:active, 
.mode-card:active, 
.carousel-btn:active,
.hl-player-card:active,
.audio-toggle-btn:active {
  transform: scale(0.97) !important;
  transition: transform 150ms var(--ease-out) !important;
}

/* --- Missing Flags Added --- */
.flag-au { background: #00008b; }
.flag-bo { background: linear-gradient(#d52b1e 0 33.3%, #f9e11e 33.3% 66.6%, #007a33 66.6%); }
.flag-ca { background: linear-gradient(90deg, #ff0000 0 25%, #ffffff 25% 75%, #ff0000 75%); }
.flag-ca::after { content: "🍁"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 12px; color: #ff0000; }
.flag-cm { background: linear-gradient(90deg, #007a5e 0 33.3%, #ce1126 33.3% 66.6%, #fcd116 66.6%); }
.flag-cz { background: linear-gradient(#fff 0 50%, #d7141a 50%); }
.flag-cz::before { content: ""; position: absolute; left: 0; top: 0; width: 50%; height: 100%; background: #11457e; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.flag-dz { background: linear-gradient(90deg, #006233 0 50%, #fff 50%); }
.flag-ec { background: linear-gradient(#fcd116 0 50%, #0038a8 50% 75%, #ce1126 75%); }
.flag-gh { background: linear-gradient(#ce1126 0 33.3%, #fcd116 33.3% 66.6%, #006b3f 66.6%); }
.flag-gh::after { content: "★"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 10px; color: #000; }
.flag-ie { background: linear-gradient(90deg, #169b62 0 33.3%, #ffffff 33.3% 66.6%, #ff883e 66.6%); }
.flag-in:not(.flag-badge) { background: linear-gradient(#ff9933 0 33.3%, #ffffff 33.3% 66.6%, #138808 66.6%); }
.flag-in:not(.flag-badge)::after { content: "✺"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 10px; color: #000080; }
.flag-iq { background: linear-gradient(#ce1126 0 33.3%, #ffffff 33.3% 66.6%, #000000 66.6%); }
.flag-ir { background: linear-gradient(#239f40 0 33.3%, #ffffff 33.3% 66.6%, #da0000 66.6%); }
.flag-is { background: linear-gradient(90deg, transparent 0 28%, #fff 28% 44%, transparent 44%), linear-gradient(transparent 0 40%, #fff 40% 60%, transparent 60%), #02529c; }
.flag-is::after { content: ""; position: absolute; left: 32%; top: 0; width: 8%; height: 100%; background: #dc1e35; }
.flag-is::before { content: ""; position: absolute; left: 0; top: 45%; width: 100%; height: 10%; background: #dc1e35; z-index: 1; }
.flag-ma { background: #c1272d; }
.flag-ma::after { content: "☆"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 14px; color: #006233; }
.flag-ng { background: linear-gradient(90deg, #008751 0 33.3%, #ffffff 33.3% 66.6%, #008751 66.6%); }
.flag-nz { background: #00247d; }
.flag-nz::after { content: "✧"; position: absolute; left: 70%; top: 50%; transform: translate(-50%, -50%); font-size: 12px; color: #cc142b; }
.flag-pe { background: linear-gradient(90deg, #d91023 0 33.3%, #ffffff 33.3% 66.6%, #d91023 66.6%); }
.flag-py { background: linear-gradient(#d52b1e 0 33.3%, #ffffff 33.3% 66.6%, #0038a8 66.6%); }
.flag-ro { background: linear-gradient(90deg, #002b7f 0 33.3%, #fcd116 33.3% 66.6%, #ce1126 66.6%); }
.flag-rs { background: linear-gradient(#c6363c 0 33.3%, #0c4076 33.3% 66.6%, #ffffff 66.6%); }
.flag-scotland { background: #0065bd; }
.flag-scotland::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to bottom right, transparent 45%, #fff 45%, #fff 55%, transparent 55%), linear-gradient(to top right, transparent 45%, #fff 45%, #fff 55%, transparent 55%); }
.flag-sk { background: linear-gradient(#ffffff 0 33.3%, #0b4ea2 33.3% 66.6%, #ee1c25 66.6%); }
.flag-sy { background: linear-gradient(#ce1126 0 33.3%, #ffffff 33.3% 66.6%, #000000 66.6%); }
.flag-ve { background: linear-gradient(#fce300 0 33.3%, #0038a8 33.3% 66.6%, #ce1126 66.6%); }
.flag-za { background: linear-gradient(90deg, #007a4d 0 25%, #ffffff 25% 35%, #e31b23 35% 100%); } /* simplification */

/* --- Even More Flags --- */
.flag-ml { background: linear-gradient(90deg, #14b53a 0 33.3%, #fcd116 33.3% 66.6%, #ce1126 66.6%); }
.flag-cd { background: linear-gradient(135deg, #007aff 0 40%, #ce1126 40% 60%, #007aff 60%); }
.flag-gn { background: linear-gradient(90deg, #ce1126 0 33.3%, #fcd116 33.3% 66.6%, #009460 66.6%); }
.flag-jm { background: linear-gradient(to bottom right, #000 0 45%, #fcd116 45% 55%, #009b3a 55%), linear-gradient(to top right, #000 0 45%, #fcd116 45% 55%, #009b3a 55%); }
.flag-ge { background: #fff; }
.flag-ge::after { content: "+"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #ff0000; font-size: 20px; font-weight: bold; }
.flag-si { background: linear-gradient(#fff 0 33.3%, #005ce6 33.3% 66.6%, #ed1c24 66.6%); }
.flag-hu { background: linear-gradient(#ce2939 0 33.3%, #fff 33.3% 66.6%, #477050 66.6%); }
.flag-al { background: #e41e20; }
.flag-al::after { content: "🦅"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 10px; }
.flag-fi { background: #fff; }
.flag-fi::after { content: ""; position: absolute; left: 25%; top: 0; width: 15%; height: 100%; background: #002f6c; }
.flag-fi::before { content: ""; position: absolute; left: 0; top: 40%; width: 100%; height: 20%; background: #002f6c; }
.flag-bg { background: linear-gradient(#fff 0 33.3%, #00966e 33.3% 66.6%, #d62612 66.6%); }
.flag-mk { background: #d20000; }
.flag-mk::after { content: "☀"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #ffe600; font-size: 12px; }
.flag-me { background: #c40308; border: 1px solid #d4af37; }
.flag-il { background: linear-gradient(#fff 0 15%, #0038b8 15% 30%, #fff 30% 70%, #0038b8 70% 85%, #fff 85%); }
.flag-am { background: linear-gradient(#d90012 0 33.3%, #0033a0 33.3% 66.6%, #f2a800 66.6%); }
.flag-cu { background: repeating-linear-gradient(#002a8f 0 20%, #fff 20% 40%); }
.flag-cu::before { content: ""; position: absolute; left: 0; top: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #cf142b; }

@media (max-width: 620px) {
  .move-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.2rem !important;
  }
  .rank-row {
    padding: 10px 8px !important;
    gap: 8px !important;
    border-width: 2px !important;
  }
  .rank-row-left {
    gap: 8px !important;
  }
  .rank-no {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 0.85rem !important;
  }
  .rank-player-name {
    font-size: 14.5px !important;
  }
  .rank-player-detail {
    font-size: 11.5px !important;
  }
  .rank-row-controls {
    gap: 4px !important;
  }
  .rank-arrow-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 13px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
  }
  .drag-handle {
    width: 34px !important;
    height: 38px !important;
    min-width: 34px !important;
    min-height: 38px !important;
    font-size: 18px !important;
    touch-action: none !important;
  }
}

button, .nav-link, .slot, .move-btn, .mobile-menu-toggle { touch-action: manipulation; }

/* Collapsing non-essential side features on mobile */
@media (max-width: 768px) {
  .side {
    grid-template-columns: 1fr !important;
  }
  .side .ad-slot {
    display: none !important;
  }
  /* Increase hit-box size of mode-card */
  .mode-card {
    min-height: 180px !important;
    padding: 12px !important;
  }
}

.bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  .mobile-menu-toggle { display: none !important; }
  /* We only hide visually, logic relies on .site-nav buttons still existing */
  .site-nav { display: none !important; }

  /* Body and Shell clearance to prevent overlap with fixed bottom nav */
  body, .shell {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .layout,
  .panel.game {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
  
  /* Fixed Mobile Bottom Navigation Bar */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(66px + env(safe-area-inset-bottom, 0px));
    min-height: 66px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    z-index: 9990;
    justify-content: space-around;
    align-items: stretch;
    padding-top: 3px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
    pointer-events: auto;
    box-sizing: border-box;
  }
  
  /* Bottom Nav Items: High-comfort thumb touch-targets (>= 56px hitbox) */
  .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    cursor: pointer;
    flex: 1 1 0;
    min-width: 56px;
    min-height: 56px;
    height: 100%;
    padding: 4px 6px calc(6px + env(safe-area-inset-bottom, 0px)) 6px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation !important;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    outline: none;
    transition: background-color 0.2s ease, opacity 0.15s ease, transform 0.12s ease;
  }

  /* Active Indicator: Top Glowing Pill Bar */
  .bottom-nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 32px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: #078a3f;
    box-shadow: 0 2px 8px rgba(7, 138, 63, 0.45);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
    opacity: 0;
  }

  .bottom-nav-item.active::before {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
  }

  /* Icon Wrap with Soft Interactive Pill Background */
  .bottom-nav-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 30px;
    border-radius: 15px;
    background: transparent;
    color: #64748b;
    transition: background-color 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
  }

  .bottom-nav-item.active .bottom-nav-icon-wrap {
    background: rgba(7, 138, 63, 0.12);
    color: #078a3f;
    transform: translateY(-1px);
  }
  
  .bottom-nav-item svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), stroke 0.2s ease, stroke-width 0.2s ease, fill 0.2s ease;
  }

  .bottom-nav-item.active svg {
    stroke: #078a3f;
    stroke-width: 2.5;
  }

  /* Subtle contextual icon fills for active state */
  .bottom-nav-item[data-nav="play"].active svg path {
    fill: rgba(7, 138, 63, 0.18);
  }

  .bottom-nav-item[data-nav="leaderboard"].active svg polygon {
    fill: rgba(7, 138, 63, 0.25);
  }

  /* Bottom Nav Label Typography */
  .bottom-nav-label {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.15;
    color: #64748b;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  .bottom-nav-item.active .bottom-nav-label {
    color: #078a3f;
    font-weight: 800;
  }

  /* Micro-interactions: Tactile feedback on touch down */
  .bottom-nav-item:active {
    opacity: 0.88;
    transform: scale(0.96);
  }

  .bottom-nav-item:active .bottom-nav-icon-wrap {
    transform: scale(0.92);
  }

  /* Hover states for pointer devices / desktop testing */
  .bottom-nav-item:hover:not(.active) .bottom-nav-icon-wrap {
    color: #1e293b;
    background: rgba(0, 0, 0, 0.04);
  }

  .bottom-nav-item:hover:not(.active) .bottom-nav-label {
    color: #1e293b;
  }

  /* Ultra-compact mobile screens (<= 360px) */
  @media (max-width: 360px) {
    .bottom-nav-item {
      min-width: 48px;
      padding: 2px 2px calc(4px + env(safe-area-inset-bottom, 0px)) 2px;
      gap: 1px;
    }
    .bottom-nav-icon-wrap {
      width: 44px;
      height: 26px;
    }
    .bottom-nav-item svg {
      width: 20px;
      height: 20px;
    }
    .bottom-nav-label {
      font-size: 10px;
    }
  }

  /* Mobile overlap prevention for screens and footer */
  .panel.game.screen-leaderboard,
  #app.screen-leaderboard,
  #app:has(.lb-page-card),
  .panel.game:has(.lb-page-card) {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .lb-page-card {
    margin-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .publisher-content-hub {
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .footer-main,
  .footer-bottom-bar {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Google AdSense & Publisher Content Standards --- */
.publisher-content-hub {
  width: 100%;
  max-width: 1140px;
  margin: 36px auto 20px;
  padding: 0 16px;
  box-sizing: border-box;
}

.publisher-layout-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 992px) {
  .publisher-layout-container {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
}

#publisherStickySidebar,
.publisher-sticky-sidebar,
.publisherStickySidebar {
  position: sticky;
  top: 80px;
  align-self: start;
}

@media (max-width: 991px) {
  #publisherStickySidebar,
  .publisher-sticky-sidebar,
  .publisherStickySidebar {
    display: none;
  }
}

@media (min-width: 992px) {
  #publisherStickySidebar,
  .publisher-sticky-sidebar,
  .publisherStickySidebar {
    display: block;
    position: sticky;
    top: 80px;
    align-self: start;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
  }
}

.sidebar-sticky-inner {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.sidebar-header {
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}

.sidebar-badge {
  display: inline-block;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 6px;
  margin-bottom: 4px;
}

.sidebar-title {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.sidebar-nav-menu {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sidebar-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border-left: 3px solid transparent;
}

.sidebar-nav-link:hover {
  background: #f8fafc;
  color: #0f172a;
  transform: translateX(2px);
}

.sidebar-nav-link.active {
  background: #f0fdf4;
  color: #15803d;
  font-weight: 750;
  border-left-color: #16a34a;
  box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.12);
}

.sidebar-nav-link .nav-icon {
  font-size: 15px;
  flex-shrink: 0;
}

.sidebar-nav-link .nav-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 14px 4px 12px;
}

.sidebar-subheading {
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94a3b8;
  padding: 0 10px 6px;
}

.sidebar-quick-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  transition: all 0.15s ease;
}

.sidebar-quick-link:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* Mobile Quick Navigation Bar */
.publisher-quick-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
}

@media (min-width: 992px) {
  .publisher-quick-nav.desktop-hidden {
    display: none;
  }
}

.publisher-articles-stream {
  min-width: 0;
  width: 100%;
}

.publisher-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: clamp(22px, 3.2vw, 38px);
  margin-bottom: 28px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  scroll-margin-top: 90px;
}

.publisher-card h2 {
  font-size: clamp(22px, 3vw, 29px);
  font-weight: 800;
  color: #0f172a;
  margin-top: 0;
  margin-bottom: 16px;
  line-height: 1.28;
  letter-spacing: -0.015em;
}

.publisher-card h3 {
  font-size: 19px;
  font-weight: 750;
  color: #1e293b;
  margin-top: 26px;
  margin-bottom: 10px;
  line-height: 1.35;
}

.publisher-card p, .publisher-card li {
  font-size: 15.5px;
  line-height: 1.72;
  color: #334155;
  margin-bottom: 14px;
}

.publisher-card ul {
  padding-left: 22px;
  margin-bottom: 18px;
}

.publisher-badge {
  display: inline-block;
  background: #dcfce7;
  color: #15803d;
  font-size: 12px;
  font-weight: 750;
  padding: 3px 10px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.modes-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.mode-guide-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
}

.mode-guide-item h4 {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mode-guide-item p {
  font-size: 13.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.adsense-compliant-slot {
  max-width: 970px;
  margin: 28px auto;
  text-align: center;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  padding: 16px 12px;
  box-sizing: border-box;
}

.adsense-compliant-slot .ad-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #94a3b8;
  margin-bottom: 8px;
}

.faq-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.faq-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 20px;
}

.faq-item summary {
  font-size: 16px;
  font-weight: 750;
  color: #0f172a;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: 20px;
  font-weight: 700;
  color: #078a3f;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item p {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 14.5px;
  color: #475569;
  line-height: 1.6;
}

.publisher-footer {
  background: #0f172a;
  color: #94a3b8;
  border-radius: 20px;
  padding: clamp(24px, 4vw, 44px);
  margin-top: 32px;
  margin-bottom: 24px;
}

.publisher-footer h3 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  margin-top: 0;
  margin-bottom: 12px;
}

.publisher-footer p {
  font-size: 14px;
  line-height: 1.6;
  color: #94a3b8;
}

.publisher-footer a {
  color: #4ade80;
  text-decoration: none;
}

.publisher-footer a:hover {
  text-decoration: underline;
}

.footer-nav-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin: 24px 0;
  padding: 20px 0;
  border-top: 1px solid #334155;
  border-bottom: 1px solid #334155;
}

.footer-nav-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.footer-nav-col a {
  color: #cbd5e1;
  font-size: 14px;
  display: block;
}

.footer-bottom-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #64748b;
  margin-top: 16px;
}

/* ==========================================================================
   BALLRANKER - GOLDEN BADGE & REWARD SYSTEM (STREAK 7+)
   ========================================================================== */

@keyframes goldenShimmer {
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.85));
  }
}

@keyframes goldenPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.badge-golden {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #fef08a 0%, #f59e0b 50%, #b45309 100%);
  color: #78350f;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid #fde047;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 8px rgba(245, 158, 11, 0.35);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 1.3;
  animation: goldenShimmer 3s infinite ease-in-out;
  cursor: pointer;
}

.badge-golden-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, #fbbf24, #d97706);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
  margin-left: 4px;
  letter-spacing: 0.3px;
  animation: goldenShimmer 2.5s infinite;
}

.streak-badge-btn {
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.streak-badge-btn:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}
.streak-badge-btn:active {
  transform: translateY(1px) scale(0.98);
}

/* ==========================================================================
   BALLRANKER - UNIQUE GOLDEN PITCH THEME (THEME COLOR REWARD)
   ========================================================================== */

body.theme-golden,
html.theme-golden {
  --gold-accent: #f59e0b;
  --gold-glow: rgba(245, 158, 11, 0.3);
  --gold-border: rgba(245, 158, 11, 0.45);
}

body.theme-golden .shell {
  background: radial-gradient(circle at 50% 0%, #1c1503 0%, #07170e 60%, #020904 100%) !important;
}

body.theme-golden .topbar {
  border-bottom: 2px solid rgba(245, 158, 11, 0.5) !important;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15) !important;
}

body.theme-golden .screen-bezel {
  border-color: rgba(245, 158, 11, 0.55) !important;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.18), inset 0 0 20px rgba(245, 158, 11, 0.08) !important;
}

body.theme-golden .pillar-clock {
  border-color: rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.25) !important;
}

body.theme-golden .pillar-clock .clock-time {
  color: #fbbf24 !important;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.5) !important;
}

body.theme-golden .nav-link.active {
  color: #fbbf24 !important;
}

body.theme-golden .bottom-nav {
  background: rgba(24, 17, 10, 0.97) !important;
  border-top-color: rgba(245, 158, 11, 0.25) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3) !important;
}

body.theme-golden .bottom-nav-item::before {
  background: #fbbf24 !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.6) !important;
}

body.theme-golden .bottom-nav-item.active .bottom-nav-icon-wrap {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
}

body.theme-golden .bottom-nav-item.active svg {
  stroke: #fbbf24 !important;
}

body.theme-golden .bottom-nav-item[data-nav="play"].active svg path {
  fill: rgba(245, 158, 11, 0.25) !important;
}

body.theme-golden .bottom-nav-item[data-nav="leaderboard"].active svg polygon {
  fill: rgba(245, 158, 11, 0.3) !important;
}

body.theme-golden .bottom-nav-item.active .bottom-nav-label {
  color: #fbbf24 !important;
  text-shadow: 0 0 6px rgba(245, 158, 11, 0.4) !important;
}

body.theme-golden .mode-card:hover {
  border-color: #f59e0b !important;
  box-shadow: 0 10px 25px rgba(245, 158, 11, 0.25) !important;
}

body.theme-golden .brand-logo {
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6)) !important;
}

/* ==========================================================================
   BALLRANKER - MODERN SPORTS LEADERBOARD (CLEAN CONSOLE CARD)
   ========================================================================== */

/* Leaderboard screen container reset inside #app */
.panel.game.screen-leaderboard,
#app.screen-leaderboard,
#app:has(.lb-page-card),
.panel.game:has(.lb-page-card) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

.panel.game.screen-leaderboard .content.mode-transition,
#app.screen-leaderboard .content.mode-transition {
  padding: 0 !important;
  max-width: 100% !important;
}

/* Centered modern light card */
.lb-page-card {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 28px 22px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%) !important;
  border: 2px solid #0f172a !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 36px -4px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .lb-page-card {
    padding: 16px 14px 18px;
    border-radius: 18px !important;
    border-width: 1.5px !important;
  }
}

/* Header */
.lb-header-block {
  margin-bottom: 18px;
}

.lb-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 10px;
}

.lb-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lb-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #334155;
  padding: 5px 13px;
  border-radius: 9999px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

.lb-refresh-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.lb-refresh-btn:active {
  background: #e2e8f0;
  transform: translateY(0) scale(0.97);
}

.lb-refresh-icon {
  display: inline-block;
  font-size: 13.5px;
  transition: transform 0.3s ease;
}

.lb-refresh-btn.rotating .lb-refresh-icon,
.side-lb-refresh-btn.rotating {
  animation: lbSpin 0.7s linear infinite;
}

.side-lb-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: auto;
}

.side-lb-refresh-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #f8fafc;
  transform: scale(1.08);
}

.side-lb-refresh-btn:active {
  transform: scale(0.92);
}

@keyframes lbSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.lb-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #334155;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.lb-back-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
  transform: translateX(-2px);
}

.lb-daily-tag {
  font-size: 12px;
  font-weight: 800;
  color: #078a3f;
  background: rgba(7, 138, 63, 0.09);
  padding: 4px 11px;
  border-radius: 9999px;
  border: 1px solid rgba(7, 138, 63, 0.2);
  letter-spacing: 0.3px;
}

.lb-title {
  font-size: 26px;
  font-weight: 900;
  color: #0f172a !important;
  margin: 0 0 5px 0;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-shadow: none !important;
  text-transform: none !important;
}

@media (max-width: 640px) {
  .lb-title {
    font-size: 22px;
  }
}

.lb-subtitle {
  font-size: 14px;
  color: #64748b !important;
  margin: 0;
  font-weight: 500;
  line-height: 1.45;
}

/* Mode Navigation & Pill-shaped Tabs */
.lb-mode-nav-container {
  position: relative;
  width: 100%;
  margin-bottom: 18px;
}

.lb-mode-fade-left,
.lb-mode-fade-right {
  position: absolute;
  top: 0;
  bottom: 6px;
  width: 24px;
  pointer-events: none;
  z-index: 2;
}
.lb-mode-fade-left {
  left: 0;
  background: linear-gradient(to right, #ffffff 40%, rgba(255, 255, 255, 0));
}
.lb-mode-fade-right {
  right: 0;
  background: linear-gradient(to left, #ffffff 40%, rgba(255, 255, 255, 0));
}

.lb-mode-pills,
.lb-mode-chips {
  display: flex !important;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 4px 10px;
  scroll-behavior: smooth;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y !important;
  grid-template-columns: none !important;
}
.lb-mode-pills::-webkit-scrollbar,
.lb-mode-chips::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.lb-mode-pill,
.lb-mode-chip {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px !important;
  padding: 9px 18px !important;
  border-radius: 9999px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  white-space: nowrap;
  border: 1.5px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #334155 !important;
  cursor: pointer;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.lb-mode-pill:hover,
.lb-mode-chip:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  transform: translateY(-1px);
}

.lb-mode-pill.active,
.lb-mode-chip.active {
  background: #078a3f !important;
  color: #ffffff !important;
  border-color: #05682f !important;
  box-shadow: 0 4px 12px rgba(7, 138, 63, 0.28) !important;
  font-weight: 800 !important;
  transform: scale(1.02);
}
.lb-mode-pill.active span,
.lb-mode-chip.active span {
  color: #ffffff !important;
}

/* User Status Card */
.lb-user-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-radius: 14px;
  margin-bottom: 16px;
  font-size: 13.5px;
  gap: 12px;
  flex-wrap: wrap;
}

.lb-user-status.played {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #14532d !important;
}
.lb-user-status.played strong {
  color: #078a3f !important;
}

.lb-user-status.not-played {
  background: #f8fafc !important;
  border: 1px dashed #cbd5e1 !important;
  color: #475569 !important;
}

.lb-status-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lb-status-done {
  font-size: 12px;
  font-weight: 700;
  color: #078a3f;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.lb-play-mode-btn {
  background: #078a3f !important;
  color: #ffffff !important;
  border: none;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.lb-play-mode-btn:hover {
  background: #05682f !important;
  transform: translateY(-1px);
}
.lb-play-mode-btn:active {
  transform: scale(0.96);
}

/* Leaderboard List / Rows */
.lb-refresh-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
  animation: lbFadeIn 0.25s ease-out forwards;
}

.side-lb-refresh-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #6ee7b7;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 8px;
  animation: lbFadeIn 0.25s ease-out forwards;
}

.lb-loading-spinner.small {
  width: 15px;
  height: 15px;
  border-width: 2px;
  margin-bottom: 0;
  border-top-color: #16a34a;
}

.lb-list-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
  overflow-y: auto !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  animation: lbFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lb-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  min-height: 52px;
  padding: 10px 16px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation !important;
  transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1),
              background-color 0.15s ease,
              border-color 0.15s ease,
              box-shadow 0.15s ease;
  animation: lbRowFadeIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes lbFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lbRowFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger animation on rows */
.lb-row:nth-child(1) { animation-delay: 0.02s; }
.lb-row:nth-child(2) { animation-delay: 0.04s; }
.lb-row:nth-child(3) { animation-delay: 0.06s; }
.lb-row:nth-child(4) { animation-delay: 0.08s; }
.lb-row:nth-child(5) { animation-delay: 0.10s; }
.lb-row:nth-child(6) { animation-delay: 0.12s; }
.lb-row:nth-child(7) { animation-delay: 0.14s; }
.lb-row:nth-child(8) { animation-delay: 0.16s; }

.lb-row:nth-child(even) {
  background: #f8fafc;
}

.lb-row:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  transform: scale(1.015) translateX(2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.lb-row:active {
  background: #e2e8f0 !important;
  transform: scale(0.985);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.lb-row svg,
.side-lb-item svg,
.lb-row img,
.side-lb-item img {
  pointer-events: none !important;
}

/* Top 3 Subtle Accents */
.lb-row.rank-gold {
  background: linear-gradient(90deg, #fffbeb 0%, #ffffff 100%) !important;
  border-color: #fde68a !important;
}
.lb-row.rank-gold .lb-score-number {
  color: #b45309 !important;
}

.lb-row.rank-silver {
  background: linear-gradient(90deg, #f8fafc 0%, #ffffff 100%) !important;
  border-color: #cbd5e1 !important;
}
.lb-row.rank-silver .lb-score-number {
  color: #334155 !important;
}

.lb-row.rank-bronze {
  background: linear-gradient(90deg, #fff7ed 0%, #ffffff 100%) !important;
  border-color: #fed7aa !important;
}
.lb-row.rank-bronze .lb-score-number {
  color: #c2410c !important;
}

/* Current User Highlight */
.lb-row.is-me {
  background: #f0fdf4 !important;
  border-color: #34d399 !important;
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.3) !important;
}

/* Columns */
.lb-col-rank {
  display: flex;
  align-items: center;
}

.lb-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.lb-rank-badge.badge-gold,
.lb-rank-badge.badge-silver,
.lb-rank-badge.badge-bronze {
  font-size: 20px;
}

.lb-rank-badge.badge-other {
  font-size: 12.5px;
  font-weight: 800;
  color: #64748b;
  font-variant-numeric: tabular-nums;
  background: #f1f5f9;
  width: 26px;
  height: 26px;
  border-radius: 9999px;
}

.lb-row.is-me .lb-rank-badge.badge-other {
  color: #078a3f;
  background: #dcfce7;
}

.lb-col-player {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 8px;
}

.lb-player-name {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-row.is-me .lb-player-name {
  color: #047857;
  font-weight: 800;
}

.lb-tag-you {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 9999px;
  background: #078a3f;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.lb-tag-golden {
  font-size: 13px;
  cursor: help;
}

.lb-col-score {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.lb-score-number {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
}

.lb-score-unit {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

/* Empty State: Clean, modern sports card aesthetic */
.lb-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 44px 24px;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1.5px dashed #cbd5e1;
  border-radius: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.025);
  animation: lbFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lb-empty-badge {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 2px solid #86efac;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.18);
}

.lb-empty-badge .lb-empty-trophy {
  font-size: 34px;
  line-height: 1;
  margin: 0;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1));
}

.lb-empty-badge .lb-empty-sparkle {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 17px;
  animation: streakFlameBounce 2.5s infinite ease-in-out;
}

.lb-empty-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 9999px;
  margin-bottom: 12px;
}

.lb-empty-heading {
  font-size: 21px;
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 8px 0;
  letter-spacing: -0.4px;
}

.lb-empty-sub {
  font-size: 14.5px;
  color: #64748b;
  margin: 0 0 22px 0;
  max-width: 400px;
  line-height: 1.5;
}

.lb-empty-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #078a3f;
  color: #ffffff !important;
  border: none;
  padding: 12px 28px;
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(7, 138, 63, 0.35);
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  text-decoration: none;
}

.lb-empty-cta-btn:hover {
  background: #05682f;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(7, 138, 63, 0.45);
}

.lb-empty-cta-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 8px rgba(7, 138, 63, 0.3);
}

.lb-empty-cta-btn .lb-cta-arrow {
  font-size: 14px;
  transition: transform 0.2s ease;
}

.lb-empty-cta-btn:hover .lb-cta-arrow {
  transform: translateX(3px);
}

/* Loading & Error States */
.lb-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 20px;
  text-align: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  margin-bottom: 16px;
}
.lb-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e2e8f0;
  border-top-color: #078a3f;
  border-radius: 50%;
  animation: lbSpin 0.8s linear infinite;
  margin-bottom: 12px;
}
@keyframes lbSpin {
  to { transform: rotate(360deg); }
}
.lb-loading-text {
  font-size: 14px;
  font-weight: 700;
  color: #475569;
  margin: 0;
}

.lb-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  text-align: center;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 16px;
  margin-bottom: 16px;
}
.lb-error-icon {
  font-size: 32px;
  margin-bottom: 8px;
}
.lb-error-title {
  font-size: 15px;
  font-weight: 800;
  color: #991b1b;
  margin: 0 0 6px 0;
}
.lb-error-desc {
  font-size: 13px;
  color: #b91c1c;
  margin: 0 0 14px 0;
}
.lb-retry-btn {
  background: #dc2626;
  color: #ffffff;
  border: none;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}
.lb-retry-btn:hover {
  background: #b91c1c;
  transform: translateY(-1px);
}

/* Last Place Card & Indicators */
.lb-last-place-card {
  margin-top: 14px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
}
.lb-last-place-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.lb-last-place-icon {
  font-size: 13px;
  color: #64748b;
}
.lb-tag-last {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 9999px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
  letter-spacing: 0.3px;
  margin-left: 4px;
  white-space: nowrap;
}
.lb-row-separator {
  text-align: center;
  padding: 6px 0;
  color: #94a3b8;
  font-size: 13px;
  letter-spacing: 4px;
  line-height: 1;
}

/* Bottom Bar */
.lb-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
  flex-wrap: wrap;
  gap: 10px;
}

.lb-back-link {
  background: none;
  border: none;
  color: #64748b;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 10px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s ease;
}
.lb-back-link:hover {
  color: #0f172a;
  background: #f1f5f9;
}
.lb-back-link:active {
  transform: scale(0.96);
}

.lb-streak-mini-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 9999px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s ease;
}
.lb-streak-mini-btn:hover {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
  transform: translateY(-1px);
}
.lb-streak-mini-btn:active {
  transform: scale(0.96);
}

/* ==========================================================================
   BALLRANKER - MODERN SIDEBAR LEADERBOARD (CLEAN LIST WITH STRIPING & MEDALS)
   ========================================================================== */

/* Dark Stadium Console Container for Sidebar */
.panel.leaderboard,
#leaderboard {
  background: linear-gradient(180deg, rgba(13, 20, 16, 0.82) 0%, rgba(9, 14, 11, 0.92) 100%) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 2px solid rgba(16, 94, 44, 0.8) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  padding: 18px 16px !important;
  color: #f8fafc !important;
  position: relative;
  overflow: visible;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

body.theme-golden .panel.leaderboard,
body.theme-golden #leaderboard {
  border-color: rgba(245, 158, 11, 0.7) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 24px rgba(245, 158, 11, 0.2) !important;
}

.side-lb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.side-lb-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.side-lb-live-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  display: inline-block;
  animation: livePulse 2s infinite ease-in-out;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.side-lb-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffffff !important;
  letter-spacing: 0.3px;
}

.side-lb-more-link {
  background: none;
  border: none;
  color: #34d399 !important;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 3px;
}
.side-lb-more-link:hover {
  background: rgba(52, 211, 153, 0.12);
  color: #6ee7b7 !important;
  transform: translateX(1px);
}

/* Compact Mode Switcher in Sidebar */
.side-lb-mode-nav {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 10px;
  scrollbar-width: none;
}
.side-lb-mode-nav::-webkit-scrollbar {
  display: none;
}

.side-lb-mode-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.side-lb-mode-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
.side-lb-mode-btn.active {
  background: rgba(7, 138, 63, 0.35);
  border-color: #34d399;
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.2);
}

/* ==========================================================================
   SHIMMERING SKELETON LOADER (MODERN FLEXBOX & GRID)
   ========================================================================== */
.side-lb-skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 0;
}

.side-lb-skeleton-item {
  display: grid;
  grid-template-columns: 28px 1fr 44px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}

.side-lb-skeleton-item:nth-child(odd) {
  background: rgba(255, 255, 255, 0.03);
}

.side-lb-skeleton-item:nth-child(even) {
  background: rgba(255, 255, 255, 0.065);
}

.side-lb-skeleton-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: sideLbShimmer 1.5s infinite;
}

@keyframes sideLbShimmer {
  100% {
    transform: translateX(100%);
  }
}

.side-lb-skeleton-rank {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.side-lb-skeleton-name {
  height: 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  width: 75%;
}

.side-lb-skeleton-score {
  height: 14px;
  width: 32px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.2);
  justify-self: end;
}

/* User-Friendly Empty State */
.side-lb-empty {
  text-align: center;
  padding: 22px 14px;
  background: rgba(255, 255, 255, 0.025);
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}

.side-lb-empty-icon {
  font-size: 28px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.side-lb-empty-title {
  color: #f8fafc !important;
  font-size: 13px;
  font-weight: 800;
}

.side-lb-empty-desc {
  margin: 0;
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.4;
  max-width: 220px;
}

.side-lb-empty-btn {
  background: #078a3f;
  color: #ffffff;
  border: none;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.side-lb-empty-btn:hover {
  background: #10b981;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* ==========================================================================
   RANKING ROWS (FLEXBOX / GRID, ROW-STRIPING & GOLD/SILVER/BRONZE ACCENTS)
   ========================================================================== */
.side-lb-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
  animation: sideLbFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sideLbFadeIn {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.side-lb-item {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 3.5px solid transparent;
  font-size: 13px;
  color: #f1f5f9;
  cursor: pointer;
  user-select: none;
  transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1),
              background-color 0.15s ease,
              border-color 0.15s ease;
  position: relative;
  animation: sideItemFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes sideItemFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.side-lb-item:nth-child(1) { animation-delay: 0.02s; }
.side-lb-item:nth-child(2) { animation-delay: 0.04s; }
.side-lb-item:nth-child(3) { animation-delay: 0.06s; }
.side-lb-item:nth-child(4) { animation-delay: 0.08s; }
.side-lb-item:nth-child(5) { animation-delay: 0.10s; }

/* Subtle Row Striping */
.side-lb-item:nth-child(odd) {
  background: rgba(255, 255, 255, 0.025);
}

.side-lb-item:nth-child(even) {
  background: rgba(255, 255, 255, 0.065);
}

.side-lb-item:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.22);
  transform: scale(1.02) translateX(2px);
}

.side-lb-item:active {
  background: rgba(255, 255, 255, 0.24) !important;
  transform: scale(0.985);
}

/* Visual Hierarchy: Top 3 ranks border-left accents */
.side-lb-item.rank-accent-1,
.side-lb-list > .side-lb-item:nth-child(1) {
  border-left: 3.5px solid #fbbf24 !important;
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
}

.side-lb-item.rank-accent-2,
.side-lb-list > .side-lb-item:nth-child(2) {
  border-left: 3.5px solid #cbd5e1 !important;
  background: linear-gradient(90deg, rgba(203, 213, 225, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
}

.side-lb-item.rank-accent-3,
.side-lb-list > .side-lb-item:nth-child(3) {
  border-left: 3.5px solid #d97706 !important;
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
}

/* Current User Row Highlight */
.side-lb-item.is-me {
  background: linear-gradient(90deg, rgba(7, 138, 63, 0.35) 0%, rgba(5, 104, 47, 0.2) 100%) !important;
  border-color: #10b981 !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.25);
}

/* Top 3 Spot Icons & Rank Badges */
.side-rank-slot {
  display: flex;
  align-items: center;
  justify-content: center;
}

.side-rank-badge {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  position: relative;
}

.side-rank-badge.rank-1 {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.3) 0%, rgba(20, 16, 10, 0.7) 100%);
  border: 1px solid rgba(251, 191, 36, 0.7);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
  font-size: 15px;
}

.side-rank-badge.rank-2 {
  background: radial-gradient(circle, rgba(203, 213, 225, 0.25) 0%, rgba(15, 23, 18, 0.7) 100%);
  border: 1px solid rgba(203, 213, 225, 0.6);
  box-shadow: 0 0 8px rgba(148, 163, 184, 0.2);
  font-size: 14px;
}

.side-rank-badge.rank-3 {
  background: radial-gradient(circle, rgba(217, 119, 6, 0.25) 0%, rgba(20, 14, 10, 0.7) 100%);
  border: 1px solid rgba(217, 119, 6, 0.6);
  box-shadow: 0 0 8px rgba(217, 119, 6, 0.2);
  font-size: 14px;
}

.side-rank-badge.rank-other {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 10px;
  font-weight: 800;
}

.side-player-slot {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  padding: 0 8px;
}

.side-player-name {
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-tag-you {
  font-size: 9px;
  font-weight: 800;
  background: #078a3f;
  color: #ffffff !important;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.side-golden-badge {
  font-size: 11px;
  flex-shrink: 0;
  display: inline-flex;
}

.side-score-slot {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.side-score-val {
  font-size: 14px;
  font-weight: 900;
  color: #34d399;
}

.side-rank-badge.rank-1 ~ .side-player-slot + .side-score-slot .side-score-val {
  color: #fbbf24;
}

.side-rank-badge.rank-2 ~ .side-player-slot + .side-score-slot .side-score-val {
  color: #e2e8f0;
}

.side-rank-badge.rank-3 ~ .side-player-slot + .side-score-slot .side-score-val {
  color: #fb923c;
}

.side-score-unit {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
}

.side-lb-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 12px;
  letter-spacing: 3px;
  padding: 2px 0;
  line-height: 1;
}

.side-lb-cta-btn {
  margin-top: 10px;
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.side-lb-cta-btn:hover {
  background: rgba(7, 138, 63, 0.25);
  border-color: #34d399;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(52, 211, 153, 0.2);
}

body.theme-golden .side-lb-item.is-me {
  border-color: #fbbf24 !important;
  background: rgba(245, 158, 11, 0.22) !important;
}

body.theme-golden .side-lb-more-link {
  color: #fbbf24 !important;
}

body.theme-golden .side-lb-cta-btn:hover {
  border-color: #fbbf24;
  background: rgba(245, 158, 11, 0.25);
}

/* ==========================================================================
   BALLRANKER - STREAK & REWARDS MODAL (DARK STADIUM CONSOLE)
   ========================================================================== */

.rewards-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(5, 10, 7, 0.85);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.rewards-modal-overlay.open {
  display: flex;
  opacity: 1;
}

.rewards-modal-box {
  background: rgba(14, 23, 17, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 22px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(245, 158, 11, 0.15) !important;
  transform: translateY(20px);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  color: #f1f5f9 !important;
}

.rewards-modal-overlay.open .rewards-modal-box {
  transform: translateY(0);
}

.rewards-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 16px;
  color: #cbd5e1 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.rewards-modal-close:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.rewards-streak-meter {
  text-align: center;
  margin: 8px 0 22px 0;
}

.rewards-flame-icon {
  font-size: 52px;
  display: inline-block;
  animation: goldenPulse 2s infinite ease-in-out;
}

.rewards-streak-count {
  font-size: 34px;
  font-weight: 900;
  color: #ffffff !important;
  margin: 6px 0 2px 0;
}

.rewards-progress-track {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px;
  overflow: hidden;
  margin: 14px 0 8px 0;
}

.rewards-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  border-radius: 999px;
  transition: width 0.4s ease;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.rewards-tier-grid {
  display: grid;
  gap: 14px;
  margin: 18px 0;
}

.reward-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  transition: all 0.2s ease;
}

.reward-card.unlocked {
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15);
}

.reward-icon-badge {
  font-size: 28px;
  line-height: 1;
}

.reward-details {
  flex: 1;
}

.reward-title {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.reward-status-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.reward-status-pill.unlocked {
  background: #fef08a !important;
  color: #78350f !important;
}

.reward-status-pill.locked {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
}

.reward-desc {
  font-size: 12px;
  color: #94a3b8 !important;
  margin: 0;
  line-height: 1.4;
}

/* ==========================================================================
   BALLRANKER - POLISHED SPORTS APP VISUAL ENHANCEMENTS
   ========================================================================== */

/* 1. Header Auth & Profile Badge */
.auth-action-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 12px 4px 6px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  color: #f8fafc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  user-select: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.user-profile-chip:hover {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(74, 222, 128, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), 0 0 12px rgba(34, 197, 94, 0.2);
}
.user-profile-chip:active {
  transform: scale(0.97);
}
.user-profile-chip:focus-visible {
  outline: 2px solid #22c55e !important;
  outline-offset: 2px !important;
}

.user-avatar-mini {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #22c55e;
}

.user-avatar-fallback {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #078a3f, #15803d);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  border: 1.5px solid #4ade80;
}

.user-name-header {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ballranker-auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  user-select: none;
}
.ballranker-auth-btn:active {
  transform: scale(0.96);
}

.ballranker-auth-btn.btn-login {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.ballranker-auth-btn.btn-login:hover {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
  transform: translateY(-1px);
}

.ballranker-auth-btn.btn-logout {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.ballranker-auth-btn.btn-logout:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
  transform: translateY(-1px);
}

/* 2. Drag & Drop Tactile Excellence */
.rank-row {
  cursor: grab !important;
  cursor: -webkit-grab !important;
  user-select: none;
  transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1), 
              box-shadow 0.18s cubic-bezier(0.23, 1, 0.32, 1), 
              background 0.18s ease, 
              border-color 0.18s ease;
  position: relative;
  touch-action: pan-y;
}
.rank-row:hover {
  border-color: #078a3f !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
.rank-row:active {
  cursor: grabbing !important;
  cursor: -webkit-grabbing !important;
}
.rank-row.dragging {
  opacity: 0.85 !important;
  transform: scale(1.02) rotate(0.8deg) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22), 0 0 0 2px #078a3f !important;
  z-index: 50 !important;
}
.rank-row.drop-target {
  border: 2px dashed #078a3f !important;
  background: rgba(7, 138, 63, 0.08) !important;
  transform: scale(0.99);
}

/* 3. Slot Grid & Category Drag-Drop Polish */
.slot {
  transition: all 0.22s cubic-bezier(0.23, 1, 0.32, 1) !important;
  border-radius: 16px !important;
  position: relative;
  overflow: hidden;
}
.slot:hover:not(.locked) {
  border-color: #078a3f !important;
  box-shadow: 0 8px 20px rgba(7, 138, 63, 0.15) !important;
  transform: translateY(-2px);
}
.slot.locked {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

/* 4. Smooth Micro-interactions & Buttons */
.game-btn, 
.action-btn, 
.lock-pop, 
.back-btn, 
.lb-back-btn, 
.lb-mode-pill {
  transition: transform 0.15s cubic-bezier(0.23, 1, 0.32, 1), 
              box-shadow 0.15s cubic-bezier(0.23, 1, 0.32, 1), 
              background 0.15s ease, 
              color 0.15s ease !important;
}
.game-btn:active, 
.action-btn:active, 
.lock-pop:active, 
.back-btn:active, 
.lb-back-btn:active, 
.lb-mode-pill:active {
  transform: scale(0.97) !important;
}

/* 5. Mobile Responsiveness Fine-Tuning */
@media (max-width: 640px) {
  .top-actions {
    gap: 6px !important;
  }
  .user-name-header {
    display: none;
  }
  .user-profile-chip {
    padding: 4px;
  }
  .ballranker-auth-btn {
    padding: 5px 10px;
    font-size: 11px;
  }
  .brand-logo {
    max-height: 44px !important;
  }
}

/* =========================================================================
   6. PHONE & IPAD USER EXPERIENCE, DRAG-AND-DROP & TEXT OVERFLOW PERFECTION
   ========================================================================= */

/* Prevent accidental horizontal overflow while allowing vertical scrolling */
html, body {
  overscroll-behavior-x: none !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
}

body.touch-drag-active {
  overscroll-behavior-y: none !important;
  touch-action: none !important;
}

/* When dragging on mobile, keep card cleanly elevated and avoid rubber-band */
.rank-row.touch-dragging {
  position: relative !important;
  z-index: 9999 !important;
  opacity: 0.98 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), 0 0 0 3px #078a3f !important;
  pointer-events: none !important;
  touch-action: none !important;
  transition: none !important;
  will-change: transform;
}

.rank-row.drop-target {
  border: 3px dashed #078a3f !important;
  background: rgba(7, 138, 63, 0.12) !important;
  transform: scale(0.985);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

/* Phone screen adjustments (<= 480px) */
@media (max-width: 480px) {
  .shell {
    width: min(100% - 16px, 1120px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .screen-head {
    margin-bottom: 16px !important;
    gap: 8px !important;
  }

  .screen-title-group .title,
  .screen-head .title,
  h2.title {
    font-size: 21px !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }

  .screen-title-group .sub,
  .screen-head .sub {
    font-size: 13px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }

  /* Ranking rows on phones: tight, elegant, perfectly fitting within 320px-480px */
  .rank-list {
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .rank-row {
    padding: 10px 8px !important;
    gap: 8px !important;
    border-radius: 12px !important;
    border-width: 2.5px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .rank-row-left {
    gap: 8px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .rank-no {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
  }

  .rank-row-info {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .rank-player-name {
    font-size: 14px !important;
    line-height: 1.25 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .rank-player-detail {
    font-size: 11.5px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .rank-player-detail .detail-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  .rank-row-controls {
    gap: 3px !important;
    flex-shrink: 0 !important;
  }

  .rank-arrow-btn {
    width: 34px !important;
    height: 36px !important;
    min-width: 34px !important;
    min-height: 36px !important;
    font-size: 12px !important;
    border-radius: 7px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
  }

  .drag-handle {
    width: 34px !important;
    height: 38px !important;
    min-width: 34px !important;
    min-height: 38px !important;
    font-size: 19px !important;
    padding: 0 !important;
    touch-action: none !important;
  }

  /* Swap hint banner on mobile */
  .swap-hint-banner {
    font-size: 12px !important;
    padding: 8px 10px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Current player card (Legends & Clubs modes) */
  .current-card {
    padding: 14px 12px !important;
    border-radius: 14px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .current-card h3 {
    font-size: clamp(18px, 5.5vw, 24px) !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.2 !important;
  }

  /* Slots in Legends/Clubs */
  .slot {
    padding: 10px 10px !important;
    min-height: 58px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .slot-name {
    font-size: 11px !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  .slot-player {
    font-size: 13px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Score and Result screen actions on phones */
  .score-card {
    padding: 16px 14px !important;
  }

  .score-big {
    font-size: 42px !important;
  }

  #copyScore, #socialShare, #playOtherBtn, #viewLeaderboardBtn {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 120px !important;
    font-size: 12.5px !important;
    padding: 10px 6px !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.25 !important;
  }

  #aiInsightsBtn, #aiDeepBtn {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    font-size: 12.5px !important;
    padding: 10px 12px !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.3 !important;
  }

  .score-ideal-line {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .score-ideal-box strong {
    word-break: break-word !important;
  }

  .comparison-row {
    padding: 8px 10px !important;
  }

  .comparison-name {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .solution-comp-card {
    padding: 10px 12px !important;
  }

  /* Submit button on mobile */
  #submitRankBtn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Screen reader only utility class */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Rank row accessibility focus rings and keyboard interaction */
.rank-row:focus-visible {
  outline: 3px solid #078a3f !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(7, 138, 63, 0.25), 0 5px 0 #111827 !important;
}

.rank-arrow-btn:focus-visible,
.primary-btn:focus-visible,
.secondary-btn:focus-visible,
.bottom-nav-item:focus-visible,
.nav-link:focus-visible {
  outline: 2.5px solid #078a3f !important;
  outline-offset: 2px !important;
}

/* =========================================================================
   7. SPELER PROFIEL MODAL & STATISTIEKEN VITRINE
   ========================================================================= */

.player-profile-modal-box {
  max-width: 560px !important;
  width: 100% !important;
  background: linear-gradient(180deg, rgba(14, 25, 18, 0.98), rgba(9, 16, 12, 0.98)) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 24px !important;
  padding: 24px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 40px rgba(34, 197, 94, 0.12) !important;
  color: #f8fafc !important;
  position: relative;
}

/* Header & Avatar Card */
.profile-header-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 16px;
  margin-top: 8px;
  margin-bottom: 18px;
  backdrop-filter: blur(12px);
}

.profile-avatar-container {
  position: relative;
  flex-shrink: 0;
}

.profile-large-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid #22c55e;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.3);
}

.profile-large-fallback {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #078a3f, #15803d);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 900;
  border: 2.5px solid #4ade80;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.25);
}

.profile-large-avatar.golden-ring,
.profile-large-fallback.golden-ring {
  border-color: #f59e0b !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.5) !important;
}

.profile-crown-badge {
  position: absolute;
  top: -8px;
  right: -6px;
  font-size: 18px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  animation: goldenPulse 2s infinite ease-in-out;
}

.profile-identity-info {
  flex: 1;
  min-width: 0;
}

.profile-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.profile-modal-player-name {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.profile-status-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.profile-status-pill.verified {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.4);
}

.profile-status-pill.guest {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.profile-badges-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-flame-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(239, 68, 68, 0.16);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}

.profile-gold-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  animation: goldenPulse 2.5s infinite ease-in-out;
}

/* 4 Metrics Grid */
.profile-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

@media (max-width: 580px) {
  .profile-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

.profile-metric-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.profile-metric-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.055);
}

.profile-metric-card.highlight-gold {
  border-color: rgba(245, 158, 11, 0.35);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.09), rgba(255, 255, 255, 0.02));
}

.profile-metric-card.highlight-badge {
  border-color: rgba(34, 197, 94, 0.35);
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.09), rgba(255, 255, 255, 0.02));
}

.profile-metric-card .metric-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.profile-metric-card .metric-label {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.profile-metric-card .metric-val {
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.profile-metric-card .metric-val-sub {
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
}

/* Sections inside profile */
.profile-section-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.profile-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.profile-section-icon {
  font-size: 18px;
}

.profile-section-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #f1f5f9;
  letter-spacing: -0.2px;
}

/* Modes historical average list */
.profile-mode-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 10px 14px;
  transition: all 0.15s ease;
}

.profile-mode-row:hover {
  background: rgba(15, 23, 42, 0.7);
  border-color: rgba(74, 222, 128, 0.25);
}

.profile-mode-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 140px;
}

.profile-mode-icon-badge {
  font-size: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  flex-shrink: 0;
}

.profile-mode-text-group {
  display: flex;
  flex-direction: column;
}

.profile-mode-name {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
}

.profile-mode-meta {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}

.profile-mode-score-wrap {
  flex: 1;
  max-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-mode-bar-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  overflow: hidden;
}

.profile-mode-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #22c55e);
  border-radius: 9999px;
  transition: width 0.4s ease;
}

.profile-mode-bar-fill.gold {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.profile-mode-avg-badge {
  font-size: 13px;
  font-weight: 800;
  color: #4ade80;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.profile-mode-avg-badge.gold {
  color: #f59e0b;
}

.profile-mode-action-btn {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.profile-mode-action-btn:hover {
  background: #22c55e;
  color: #ffffff;
  transform: translateY(-1px);
}

.profile-mode-action-btn.done {
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
  border-color: rgba(255, 255, 255, 0.1);
  cursor: default;
  transform: none;
}

/* Badges Showcase Grid */
.profile-badges-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (max-width: 520px) {
  .profile-badges-grid {
    grid-template-columns: 1fr;
  }
}

.profile-badge-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.profile-badge-card.unlocked {
  border-color: rgba(245, 158, 11, 0.4);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(15, 23, 42, 0.6));
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.08);
}

.profile-badge-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  filter: grayscale(1) opacity(0.4);
  transition: filter 0.2s ease;
}

.profile-badge-card.unlocked .profile-badge-icon {
  filter: none;
  animation: goldenPulse 2.5s infinite ease-in-out;
}

.profile-badge-details {
  flex: 1;
  min-width: 0;
}

.profile-badge-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.profile-badge-title {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
}

.profile-badge-status-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}

.profile-badge-status-pill.unlocked {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.profile-badge-status-pill.locked {
  background: rgba(255, 255, 255, 0.06);
  color: #64748b;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-badge-desc {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.4;
  margin: 0;
}

/* Auth prompt */
.profile-auth-prompt {
  background: rgba(34, 197, 94, 0.08);
  border: 1px dashed rgba(74, 222, 128, 0.3);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 16px;
}

.profile-auth-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-auth-icon {
  font-size: 24px;
}

.profile-auth-text strong {
  font-size: 13px;
  color: #f1f5f9;
  display: block;
}

.profile-auth-text p {
  font-size: 11px;
  color: #94a3b8;
  margin: 2px 0 0 0;
}

/* Footer buttons */
.profile-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.profile-footer-close-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.profile-footer-close-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

/* ==========================================================================
   BALLRANKER - CHALLENGE A FRIEND & HEAD-TO-HEAD DUEL STYLES
   ========================================================================== */

.challenge-friend-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.challenge-friend-btn:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5) !important;
}

.challenge-friend-btn:active {
  transform: scale(0.97);
}

.challenge-modal-box {
  max-width: 520px;
  background: rgba(13, 23, 17, 0.98);
  border: 1px solid rgba(245, 158, 11, 0.3);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(245, 158, 11, 0.12);
}

.challenge-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.challenge-modal-icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f59e0b, #b45309);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
  flex-shrink: 0;
}

.challenge-modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.challenge-modal-subtitle {
  margin: 4px 0 0 0;
  font-size: 13px;
  color: #94a3b8;
}

/* Match Ticket Card */
.challenge-ticket-card {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.75), rgba(15, 23, 42, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.challenge-ticket-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f59e0b, #22c55e, #f59e0b);
}

.challenge-ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}

.challenge-ticket-mode {
  font-size: 14px;
  font-weight: 800;
  color: #4ade80;
  display: flex;
  align-items: center;
  gap: 6px;
}

.challenge-ticket-daily {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 8px;
  border-radius: 6px;
  color: #94a3b8;
}

.challenge-ticket-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.challenge-target-score-wrap {
  display: flex;
  flex-direction: column;
}

.challenge-target-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
}

.challenge-target-score-val {
  font-size: 32px;
  font-weight: 900;
  color: #fbbf24;
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(251, 191, 36, 0.35);
}

.challenge-target-score-val small {
  font-size: 14px;
  font-weight: 700;
  color: #94a3b8;
}

.challenge-challenger-info {
  text-align: right;
  display: flex;
  flex-direction: column;
}

.challenge-challenger-label {
  font-size: 11px;
  color: #94a3b8;
}

.challenge-challenger-name {
  font-size: 15px;
  color: #ffffff;
  font-weight: 800;
}

/* Taunt field */
.challenge-taunt-group {
  margin-bottom: 16px;
}

.challenge-taunt-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
  margin-bottom: 6px;
}

.challenge-taunt-input {
  width: 100%;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 10px 14px;
  color: #ffffff;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.challenge-taunt-input:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}

/* Link input & copy row */
.challenge-link-group {
  margin-bottom: 18px;
}

.challenge-link-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
  margin-bottom: 6px;
}

.challenge-input-row {
  display: flex;
  gap: 8px;
}

.challenge-link-input {
  flex: 1;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  color: #94a3b8;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.challenge-action-copy-btn {
  background: linear-gradient(135deg, #078a3f, #15803d);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: all 0.15s ease;
  box-shadow: 0 4px 12px rgba(7, 138, 63, 0.3);
}

.challenge-action-copy-btn:hover {
  background: linear-gradient(135deg, #10b981, #059669);
  transform: translateY(-1px);
}

.challenge-action-copy-btn.copied {
  background: #16a34a !important;
  color: #ffffff !important;
}

/* Share buttons */
.challenge-share-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.challenge-btn-whatsapp {
  flex: 1;
  min-width: 140px;
  background: #25D366;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
  transition: all 0.15s ease;
}

.challenge-btn-whatsapp:hover {
  background: #22bf5b;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
}

.challenge-btn-native {
  flex: 1;
  min-width: 140px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s ease;
}

.challenge-btn-native:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.challenge-modal-footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
}

/* Challenge Arrival Modal */
.challenge-arrival-banner {
  text-align: center;
  margin-bottom: 20px;
}

.challenge-duel-swords {
  font-size: 42px;
  animation: bouncePistons 1.6s ease infinite;
}

@keyframes bouncePistons {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12) rotate(4deg); }
}

.challenge-arrival-eyebrow {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #f59e0b;
  margin-top: 6px;
}

.challenge-arrival-title {
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  margin: 4px 0 0 0;
}

.highlight-arrival {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
  border: 1.5px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15);
}

.challenge-arrival-target-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.challenge-arrival-mode-tag {
  font-size: 17px;
  font-weight: 900;
  color: #4ade80;
}

.challenge-arrival-date-tag {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 2px;
}

.challenge-arrival-score-badge {
  text-align: right;
}

.score-to-beat-lbl {
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #f59e0b;
}

.score-to-beat-num {
  font-size: 34px;
  font-weight: 900;
  color: #fbbf24;
}

.score-to-beat-num + small {
  font-size: 13px;
  color: #cbd5e1;
}

.challenge-arrival-taunt-bubble {
  background: rgba(0, 0, 0, 0.35);
  border-left: 3px solid #f59e0b;
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 14px;
}

.challenge-arrival-taunt-bubble p {
  margin: 0;
  font-size: 13px;
  font-style: italic;
  color: #e2e8f0;
}

.challenge-arrival-prompt {
  font-size: 13px;
  color: #94a3b8;
  text-align: center;
  margin: 16px 0;
  line-height: 1.45;
}

.challenge-arrival-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.challenge-accept-btn {
  background: linear-gradient(135deg, #078a3f, #15803d);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(7, 138, 63, 0.4);
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.challenge-accept-btn:hover {
  background: linear-gradient(135deg, #10b981, #059669);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(7, 138, 63, 0.55);
}

.challenge-later-btn {
  background: transparent;
  color: #94a3b8;
  border: none;
  padding: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s;
}

.challenge-later-btn:hover {
  color: #ffffff;
}

/* In-game Sticky Challenge HUD */
.challenge-game-hud {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 9999px;
  padding: 6px 16px;
  margin: 0 auto 14px auto;
  width: fit-content;
  max-width: 90%;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.2);
  animation: slideDownHud 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes slideDownHud {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.challenge-hud-icon {
  font-size: 14px;
}

.challenge-hud-text {
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
}

.challenge-hud-score {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 9999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 900;
}

/* Head-to-Head Duel Verdict Card on Results Screen */
.challenge-duel-verdict-card {
  border-radius: 14px;
  padding: 16px;
  margin: 16px 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.challenge-duel-verdict-card.win {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(7, 138, 63, 0.25));
  border: 1.5px solid #22c55e;
}

.challenge-duel-verdict-card.tie {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(29, 78, 216, 0.25));
  border: 1.5px solid #3b82f6;
}

.challenge-duel-verdict-card.loss {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.25));
  border: 1.5px solid #f59e0b;
}

.challenge-duel-verdict-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.challenge-duel-verdict-icon {
  font-size: 26px;
}

.challenge-duel-verdict-title {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: #ffffff;
}

.challenge-duel-scores-compare {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 12px;
}

.challenge-duel-score-col {
  text-align: center;
}

.challenge-duel-score-name {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 700;
  margin-bottom: 2px;
}

.challenge-duel-score-num {
  font-size: 28px;
  font-weight: 900;
  color: #ffffff;
}

.challenge-duel-vs {
  font-size: 14px;
  font-weight: 900;
  color: #f59e0b;
  letter-spacing: 0.08em;
}

/* ==========================================================================
   BALLRANKER MASTER FOOTBALL DATABASE & PLAYER BATTLE STYLES
   ========================================================================== */

.player-db-container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
}

.player-db-hero {
  text-align: center;
  margin-bottom: 24px;
}

.player-db-title {
  font-size: 28px;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
}

.player-db-subtitle {
  font-size: 14px;
  color: #94a3b8;
  max-width: 600px;
  margin: 0 auto 20px auto;
  line-height: 1.5;
}

.player-db-search-bar {
  display: flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 8px 16px;
  max-width: 680px;
  margin: 0 auto 16px auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.player-db-search-bar:focus-within {
  border-color: #22c55e;
  box-shadow: 0 4px 24px rgba(34, 197, 94, 0.25);
}

.player-db-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  padding: 6px 12px;
}

.player-db-search-input::placeholder {
  color: #64748b;
}

.player-db-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}

.player-db-select {
  background: rgba(15, 23, 42, 0.9);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: all 0.15s ease;
}

.player-db-select:hover, .player-db-select:focus {
  border-color: #22c55e;
  background: rgba(15, 23, 42, 1);
}

.player-db-stats-count {
  font-size: 13px;
  color: #64748b;
  font-weight: 700;
  margin-left: 8px;
}

.player-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.player-mini-card {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.2, 1, 0.3, 1), border-color 0.2s ease;
}

.player-mini-card:hover {
  transform: translateY(-4px);
  border-color: rgba(34, 197, 94, 0.5);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 20px rgba(34, 197, 94, 0.15);
}

.player-mini-card.is-icon {
  border-color: rgba(234, 179, 8, 0.35);
}

.player-mini-card.is-icon:hover {
  border-color: rgba(234, 179, 8, 0.8);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 20px rgba(234, 179, 8, 0.2);
}

.player-mini-card.is-hero {
  border-color: rgba(236, 72, 153, 0.35);
}

.player-mini-card.is-hero:hover {
  border-color: rgba(236, 72, 153, 0.8);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 20px rgba(236, 72, 153, 0.2);
}

.player-card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.player-card-rating-badge {
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.player-card-rating-badge.rating-elite {
  color: #facc15;
  border-color: rgba(250, 204, 21, 0.4);
}

.player-card-rating-badge .card-pos {
  font-size: 12px;
  font-weight: 800;
  color: #94a3b8;
}

.player-type-pill {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}

.player-type-pill.type-icon {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.3), rgba(161, 98, 7, 0.5));
  color: #fef08a;
  border: 1px solid rgba(234, 179, 8, 0.4);
}

.player-type-pill.type-hero {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.3), rgba(190, 24, 93, 0.5));
  color: #fbcfe8;
  border: 1px solid rgba(236, 72, 153, 0.4);
}

.player-card-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.player-avatar-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 2px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  color: #22c55e;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.player-card-meta {
  flex: 1;
  min-width: 0;
}

.player-card-name {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-card-club-flag {
  font-size: 12px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
}

.player-mini-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  background: rgba(0, 0, 0, 0.35);
  padding: 8px 6px;
  border-radius: 10px;
  text-align: center;
}

.mini-stat-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mini-stat-lbl {
  font-size: 9px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
}

.mini-stat-val {
  font-size: 12px;
  font-weight: 900;
  color: #e2e8f0;
}

/* Player Detail Modal Card */
.player-card-modal-box {
  max-width: 560px;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(34, 197, 94, 0.15);
  border-radius: 24px;
  color: #ffffff;
}

.player-detail-header-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.player-detail-avatar-big {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, #15803d, #047857);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

.player-detail-title-info {
  flex: 1;
}

.player-detail-name-big {
  font-size: 24px;
  font-weight: 900;
  margin: 0 0 4px 0;
  color: #ffffff;
}

.player-detail-sub-meta {
  font-size: 13px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.player-detail-rating-circle {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
  flex-shrink: 0;
}

.detail-rating-num {
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
}

.detail-rating-txt {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.85);
}

.player-stats-bars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.stat-bar-item {
  background: rgba(0, 0, 0, 0.35);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.stat-bar-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 800;
}

.stat-bar-header .lbl {
  color: #94a3b8;
}

.stat-bar-header .val {
  color: #ffffff;
}

.stat-bar-track {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #10b981, #34d399);
}

.stat-bar-fill.bar-elite {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.player-career-milestones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
  text-align: center;
}

.milestone-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 8px 4px;
}

.milestone-num {
  font-size: 18px;
  font-weight: 900;
  color: #38bdf8;
  margin-bottom: 2px;
}

.milestone-lbl {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
}

.player-clubs-history {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 20px;
}

.clubs-history-title {
  font-size: 12px;
  font-weight: 800;
  color: #94a3b8;
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.clubs-badges-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.club-badge-tag {
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: 8px;
}

.club-badge-tag.current {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.player-detail-actions {
  display: flex;
  gap: 10px;
}

.detail-btn-compare {
  flex: 1;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s ease;
}

.detail-btn-compare:hover {
  background: linear-gradient(135deg, #0369a1, #075985);
  transform: translateY(-1px);
}

/* Head-to-Head Comparison Battle Modal */
.player-compare-modal-box {
  max-width: 680px;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  color: #ffffff;
}

.compare-head-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  text-align: center;
}

.compare-player-col {
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.compare-player-col.is-winner {
  border-color: rgba(250, 204, 21, 0.5);
  box-shadow: 0 0 20px rgba(250, 204, 21, 0.15);
}

.compare-player-name {
  font-size: 17px;
  font-weight: 900;
  color: #ffffff;
  margin: 6px 0 2px 0;
}

.compare-player-ovr {
  font-size: 26px;
  font-weight: 900;
  color: #22c55e;
}

.compare-vs-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #b45309);
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}

.compare-rows-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.compare-stat-row {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.35);
  padding: 10px 14px;
  border-radius: 12px;
}

.stat-col-val {
  font-size: 16px;
  font-weight: 900;
  text-align: center;
}

.stat-col-val.win {
  color: #22c55e;
}

.stat-col-val.lose {
  color: #94a3b8;
}

.stat-col-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-col-bar-lbl {
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: #cbd5e1;
  text-transform: uppercase;
}

.stat-dual-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  gap: 2px;
}

.stat-half-bar {
  height: 100%;
  transition: width 0.3s ease;
}

.stat-half-bar.left {
  background: #38bdf8;
  border-radius: 4px 0 0 4px;
}

.stat-half-bar.right {
  background: #f59e0b;
  border-radius: 0 4px 4px 0;
}

/* ==========================================================================
   STANDALONE PWA VIEWPORT & GAME LAYOUT CONTAINER LOCK (NO SHIFTING)
   ========================================================================== */

@media all and (display-mode: standalone), (display-mode: fullscreen) {
  html, body {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
  }

  .shell {
    height: 100dvh !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Main layout container uses inset: 0 and position: fixed to prevent layout shifting in standalone PWA mode */
  .layout,
  .main-layout,
  .layout-container,
  .main-container {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-top: calc(72px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(115px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9995 !important;
    padding-top: max(14px, calc(12px + env(safe-area-inset-top, 0px))) !important;
  }

  /* Game mode layout containers use fixed positioning or absolute positioning with inset: 0 to avoid shifting */
  .panel.game,
  .game-container-fullscreen,
  .rank-stage-fullscreen,
  .mode-stage-container {
    position: relative;
    min-height: 100%;
    box-sizing: border-box !important;
  }

  .panel.game > .content,
  .rank-stage,
  .higher-lower-container,
  .legends-container,
  .club-ladder-container,
  .passport-container,
  .game-layout-fixed {
    position: relative;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
  }

  /* Fixed or absolute positioning with inset: 0 to avoid shifting */
  .standalone-stage-lock,
  .game-viewport-lock {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .game-absolute-lock {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }

  /* Padding clearance for fixed bottom navigation in standalone mode */
  .panel.game {
    padding-bottom: calc(115px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    height: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    z-index: 9999 !important;
  }
}

/* ==========================================================================
   DAILY MISSIONS / OBJECTIVES COMPONENT
   ========================================================================== */

.daily-missions-card {
  width: 100%;
  max-width: 860px;
  margin: 0 auto 28px auto;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(13, 35, 22, 0.88) 100%);
  border: 1px solid rgba(74, 222, 128, 0.22);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 20px rgba(34, 197, 94, 0.08);
  border-radius: 16px;
  padding: 18px 20px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.daily-missions-card:hover {
  border-color: rgba(74, 222, 128, 0.38);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3), 0 0 25px rgba(34, 197, 94, 0.12);
}

.daily-missions-card.all-completed-glow {
  border-color: rgba(250, 204, 21, 0.45);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35), 0 0 30px rgba(250, 204, 21, 0.15);
}

.daily-missions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.daily-missions-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.daily-missions-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(16, 185, 129, 0.1));
  border: 1px solid rgba(74, 222, 128, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.daily-missions-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.daily-missions-subtitle {
  font-size: 12px;
  color: #94a3b8;
  margin: 2px 0 0 0;
}

.daily-missions-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.daily-missions-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.28);
  color: #4ade80;
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.daily-missions-summary-pill.gold {
  background: rgba(250, 204, 21, 0.12);
  border-color: rgba(250, 204, 21, 0.35);
  color: #facc15;
}

.daily-missions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.daily-mission-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 14px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.daily-mission-item:hover {
  background: rgba(15, 23, 42, 0.75);
  border-color: rgba(74, 222, 128, 0.2);
}

.daily-mission-item.is-completed {
  border-color: rgba(74, 222, 128, 0.35);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.6) 0%, rgba(22, 101, 52, 0.18) 100%);
}

.daily-mission-item.is-claimed {
  opacity: 0.82;
  border-color: rgba(255, 255, 255, 0.08);
}

.daily-mission-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.daily-mission-icon {
  font-size: 22px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.daily-mission-details {
  flex: 1;
  min-width: 0;
}

.daily-mission-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.daily-mission-name {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.daily-mission-desc {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.35;
  margin-bottom: 6px;
}

.daily-mission-progress-container {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
}

.daily-mission-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}

.daily-mission-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981 0%, #4ade80 100%);
  border-radius: 9999px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.daily-mission-progress-text {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  min-width: 44px;
  text-align: right;
}

.daily-mission-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.daily-mission-reward-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.28);
  color: #facc15;
  font-size: 12px;
  font-weight: 800;
}

.daily-mission-claim-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #15803d 0%, #16a34a 45%, #22c55e 100%);
  color: #ffffff;
  border: 1.5px solid rgba(250, 204, 21, 0.7);
  box-shadow: 0 0 16px rgba(74, 222, 128, 0.45), 0 0 28px rgba(250, 204, 21, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  padding: 8px 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  animation: festiveClaimPulse 2.2s infinite ease-in-out;
  transform-origin: center;
}

/* Glistening light streak sweeping across the completed mission button */
.daily-mission-claim-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -140%;
  width: 90%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 15%,
    rgba(255, 255, 255, 0.2) 30%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(250, 204, 21, 0.75) 60%,
    transparent 80%
  );
  transform: rotate(25deg);
  animation: festiveShimmerSweep 2.2s infinite ease-in-out;
  pointer-events: none;
}

.daily-mission-claim-btn:hover {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 50%, #4ade80 100%);
  transform: translateY(-2px) scale(1.06);
  border-color: #fde047;
  box-shadow: 0 0 22px rgba(74, 222, 128, 0.7), 0 0 36px rgba(250, 204, 21, 0.55), inset 0 1px 0 #ffffff;
}

.daily-mission-claim-btn:active {
  transform: scale(0.96);
}

.festive-sparkle {
  font-size: 12px;
  display: inline-block;
  animation: festiveSparkleTwinkle 1.8s infinite ease-in-out;
}
.festive-sparkle.right {
  animation-delay: 0.9s;
}

.festive-gift-icon {
  font-size: 14px;
  display: inline-block;
  animation: festiveGiftBounce 2.2s infinite ease-in-out;
}

@keyframes festiveClaimPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.4), 0 0 24px rgba(250, 204, 21, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  50% {
    transform: scale(1.045) translateY(-1px);
    box-shadow: 0 0 24px rgba(74, 222, 128, 0.7), 0 0 36px rgba(250, 204, 21, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
}

@keyframes festiveShimmerSweep {
  0% {
    left: -150%;
  }
  35%, 100% {
    left: 170%;
  }
}

@keyframes festiveSparkleTwinkle {
  0%, 100% {
    transform: scale(0.9) rotate(0deg);
    opacity: 0.75;
    filter: drop-shadow(0 0 2px #facc15);
  }
  50% {
    transform: scale(1.25) rotate(18deg);
    opacity: 1;
    filter: drop-shadow(0 0 6px #fef08a);
  }
}

@keyframes festiveGiftBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px) scale(1.1);
  }
}

.daily-mission-claimed-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #4ade80;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 12px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.16) 0%, rgba(250, 204, 21, 0.14) 100%);
  border: 1px solid rgba(74, 222, 128, 0.45);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(34, 197, 94, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}

.daily-mission-claimed-tag::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: claimedGleam 4s infinite ease-in-out;
  pointer-events: none;
}

@keyframes claimedGleam {
  0%, 65% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}

.daily-mission-play-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.daily-mission-play-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(74, 222, 128, 0.4);
  color: #4ade80;
}

@media (max-width: 640px) {
  .daily-missions-card {
    padding: 14px 12px;
    margin-bottom: 20px;
  }
  .daily-mission-item {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .daily-mission-right {
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
  .daily-mission-progress-container {
    max-width: 100%;
  }
}

/* ==========================================================================
   AD-BLOCKER DETECTED MODAL & OVERLAY
   ========================================================================== */

.adblock-modal-box {
  max-width: 520px !important;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.98) 0%, rgba(18, 30, 22, 0.98) 100%) !important;
  border: 1px solid rgba(250, 204, 21, 0.3) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(250, 204, 21, 0.12) !important;
  padding: 30px 26px !important;
  text-align: center;
}

.adblock-header-icon-wrap {
  position: relative;
  width: 70px;
  height: 70px;
  margin: 0 auto 16px auto;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(245, 158, 11, 0.18) 100%);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.15);
}

.adblock-shield-icon {
  font-size: 34px;
}

.adblock-ball-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 18px;
  background: #0f172a;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.adblock-modal-title {
  font-size: 21px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: -0.3px;
}

.adblock-modal-subtitle {
  font-size: 13px;
  font-weight: 700;
  color: #facc15;
  margin: 0 0 14px 0;
}

.adblock-modal-desc {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0 0 18px 0;
  text-align: left;
}

.adblock-steps-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 22px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.adblock-step-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.adblock-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #15803d;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.adblock-step-text {
  font-size: 12px;
  color: #e2e8f0;
  line-height: 1.4;
}

.adblock-step-text strong {
  color: #4ade80;
}

.adblock-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.adblock-primary-btn {
  flex: 1;
  min-width: 170px;
  background: linear-gradient(135deg, #15803d 0%, #22c55e 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35);
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.adblock-primary-btn:hover {
  background: linear-gradient(135deg, #16a34a 0%, #4ade80 100%);
  transform: translateY(-1px) scale(1.02);
}

.adblock-primary-btn:active {
  transform: scale(0.98);
}

.adblock-secondary-btn {
  flex: 1;
  min-width: 170px;
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.adblock-secondary-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(74, 222, 128, 0.4);
  color: #4ade80;
}

.adblock-secondary-btn:active {
  transform: scale(0.98);
}

.adblock-modal-foot {
  text-align: center;
}

.adblock-modal-lock-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.32);
  border-radius: 9px;
  color: #fca5a5;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  max-width: 100%;
}

.adblock-lock-icon {
  font-size: 14px;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .adblock-modal-box {
    padding: 24px 16px !important;
  }
  .adblock-modal-actions {
    flex-direction: column;
  }
  .adblock-primary-btn,
  .adblock-secondary-btn {
    width: 100%;
  }
}

@keyframes shakeError {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.shake-error {
  animation: shakeError 0.45s ease-in-out !important;
}

/* Confetti particles for mission completion celebration */
.festive-confetti-wrap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10050;
  overflow: hidden;
}

.festive-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  pointer-events: none;
  animation: festiveParticleFly 0.9s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

.festive-particle.circle {
  border-radius: 50%;
}

.festive-particle.star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  width: 10px;
  height: 10px;
}

.festive-particle.strip {
  width: 4px;
  height: 12px;
  border-radius: 2px;
}

@keyframes festiveParticleFly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) scale(0) rotate(0deg);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(var(--scale)) rotate(var(--rot));
  }
}

/* ==========================================================================
   DYNAMIC SCORE CARD GENERATOR & MODAL
   ========================================================================== */

.scorecard-modal-box {
  max-width: 620px !important;
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.98) 0%, rgba(6, 22, 14, 0.98) 100%) !important;
  border: 1px solid rgba(74, 222, 128, 0.35) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(34, 197, 94, 0.15) !important;
  padding: 24px 22px !important;
  text-align: center;
}

.scorecard-modal-head {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  margin-bottom: 14px;
}

.scorecard-icon-badge {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(250, 204, 21, 0.2) 100%);
  border: 1px solid rgba(74, 222, 128, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}

.scorecard-modal-title {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 4px 0 !important;
  letter-spacing: -0.3px;
}

.scorecard-modal-subtitle {
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  margin: 0;
}

.scorecard-theme-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 16px 0;
  flex-wrap: wrap;
}

.scorecard-theme-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
}

.scorecard-theme-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  transform: translateY(-1px);
}

.scorecard-theme-btn.active {
  background: rgba(34, 197, 94, 0.2);
  border-color: #4ade80;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.3);
}

.scorecard-theme-btn[data-scorecard-theme="gold"].active {
  background: rgba(250, 204, 21, 0.2);
  border-color: #facc15;
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.3);
}

.scorecard-theme-btn[data-scorecard-theme="midnight"].active {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
}

.theme-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.theme-dot.emerald { background: #22c55e; }
.theme-dot.gold { background: #eab308; }
.theme-dot.midnight { background: #38bdf8; }

.scorecard-preview-wrap {
  position: relative;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 16px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#scoreCardCanvas {
  width: 100%;
  max-width: 380px;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
  display: block;
}

.scorecard-preview-badge {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.scorecard-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.scorecard-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  border: none;
}

.scorecard-action-btn.primary {
  background: linear-gradient(135deg, #15803d 0%, #22c55e 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35);
}

.scorecard-action-btn.primary:hover {
  background: linear-gradient(135deg, #16a34a 0%, #4ade80 100%);
  transform: translateY(-1px) scale(1.02);
}

.scorecard-action-btn.secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.scorecard-action-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-color: rgba(74, 222, 128, 0.4);
  transform: translateY(-1px);
}

.scorecard-action-btn.whatsapp {
  background: linear-gradient(135deg, #128c7e 0%, #25d366 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.scorecard-action-btn.whatsapp:hover {
  background: linear-gradient(135deg, #169c8c 0%, #34e77b 100%);
  transform: translateY(-1px);
}

.scorecard-action-btn:active {
  transform: scale(0.97);
}

@media (max-width: 480px) {
  .scorecard-modal-box {
    padding: 20px 14px !important;
  }
  .scorecard-actions-grid {
    grid-template-columns: 1fr;
  }
}