: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;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    min-height: 100vh;
    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);
  }

  button, input { font: inherit; }

  .shell {
    width: min(1120px, calc(100% - 28px));
    margin: 0 auto;
    padding: 22px 0 48px;
  }

  .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 ease, box-shadow .18s ease, border-color .18s ease;
  }

  .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;
  }

  .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; align-items: center;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
    cursor: grab;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
  }

  .rank-row:active { cursor: grabbing; }
  .rank-row.dragging { opacity: .48; transform: scale(.99); }
  .rank-row.drop-target { border-color: var(--green); background: #f0fff6; }

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

  .player-name {
    font-weight: 900;
    font-size: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .player-meta {
    color: var(--muted);
    font-size: 13px;
    margin-top: 3px;
  }

  .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;
  }

  .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 .15s ease, transform .15s ease, background .15s ease;
  }

  .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 ease;
  }

  .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;
  }

  .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;
  }

  .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: 18px;
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
    pointer-events: none;
    background: #153125;
    color: white;
    padding: 11px 14px;
    border-radius: 999px;
    font-weight: 800;
    transition: opacity .2s ease, transform .2s ease;
  }

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

  @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; }
    .screen-head { display: grid; }
    .back-btn { justify-self: start; }
    
  }

  @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;
    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;
  }

  .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(100vh - 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 {
    justify-content: center;
    text-align: center;
    margin-bottom: 16px;
  }

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

  .screen-head h2 {
    font-size: 30px;
    letter-spacing: -.04em;
  }

  .back-btn {
    position: absolute;
    left: clamp(16px, 3vw, 42px);
    top: 104px;
    background: #fff;
    color: #111827;
    border: 2px solid #111827;
    box-shadow: 0 3px 0 #111827;
  }

  .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,.28);
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(17,24,39,.08);
    vertical-align: -2px;
  }

  .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 { grid-template-columns: 48px minmax(0, 1fr) auto; }
    .slot-player { grid-column: 2; justify-self: start; }
    .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,
  .slot.open {
    touch-action: none;
    user-select: none;
  }

  .flag-badge {
    display: inline-block;
    width: 24px;
    height: 17px;
    flex: 0 0 24px;
    border: 1px solid rgba(17, 24, 39, .25);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(17,24,39,.12);
  }

  .flag-nl { background: linear-gradient(#ae1c28 0 33.33%, #fff 33.33% 66.66%, #21468b 66.66%); }
  .flag-fr { background: linear-gradient(90deg, #0055a4 0 33.33%, #fff 33.33% 66.66%, #ef4135 66.66%); }
  .flag-es { background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%); }
  .flag-id { background: linear-gradient(#ce1126 0 50%, #fff 50%); }
  .flag-de { 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 { background: #fff; }
  .flag-england::before { content: ""; position: absolute; left: 0; top: 40%; width: 100%; height: 20%; background: #ce1126; }
  .flag-england::after { content: ""; position: absolute; left: 40%; top: 0; width: 20%; height: 100%; background: #ce1126; }
  .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:
      radial-gradient(circle at 50% 30%, #111827 0 19%, transparent 20%),
      radial-gradient(ellipse at 50% 82%, #111827 0 34%, transparent 35%),
      linear-gradient(135deg, #dbffe9, #ffffff 52%, #dbe8ff);
    box-shadow: 0 5px 0 rgba(17,24,39,.12);
  }

  .hl-avatar::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 22px;
    background:
      radial-gradient(circle at 78% 76%, #2d67e8 0 10%, transparent 11%),
      conic-gradient(from 18deg at 78% 76%, #2d67e8 0 18%, #fff 18% 33%, #7da2ff 33% 50%, #fff 50% 65%, #2d67e8 65% 82%, #fff 82%);
    opacity: .24;
  }

  .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-carousel {
    background: transparent;
    margin-top: 24px;
    overflow: hidden;
  }
  .result-carousel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 8px 20px;
    border-bottom: none;
  }
  .result-carousel-title {
    font-weight: 700;
    font-size: 18px;
    color: #475569;
  }
  .result-carousel-controls {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .carousel-btn {
    background: #f1f5f9;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #475569;
    transition: all 0.2s;
  }
  .carousel-btn:hover:not(:disabled) {
    background: #e2e8f0;
    color: #0f172a;
  }
  .carousel-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .carousel-dots {
    display: flex;
    gap: 6px;
  }
  .carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: all 0.2s;
  }
  .carousel-dot.active {
    background: #f59e0b;
    width: 16px;
    border-radius: 4px;
  }
  .result-carousel-viewport {
    overflow: hidden;
    position: relative;
    width: 100%;
  }
  .result-carousel-track {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .result-carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }
  .carousel-card {
    background: #ffffff;
    border: 2px solid #111827;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 4px 4px 0px #111827;
    margin: 4px; /* leave space for shadow */
  }
  .carousel-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #111827;
  }
  .carousel-card-title {
    font-weight: 800;
    font-size: 18px;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .carousel-card-round {
    font-weight: 800;
    font-size: 14px;
    color: #111827;
  }
  .carousel-card-body {
    display: flex;
    justify-content: space-between;
    gap: 16px;
  }
  .carousel-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
  }
  .carousel-label {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 4px;
    font-weight: 700;
  }
  .carousel-value-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .carousel-value-name {
    font-weight: 800;
    font-size: 16px;
    color: #111827;
  }
  .carousel-badge {
    background: #e2e8f0;
    color: #334155;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
  }
  .carousel-badge.ok {
    background: #dcfce7;
    color: #166534;
  }
  .carousel-badge.off {
    background: #fee2e2;
    color: #991b1b;
  }
  .carousel-badge.close {
    background: #fef3c7;
    color: #92400e;
  }


  @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;
  }