:root {
      --bg: #f7f9fc;
      --panel: #ffffff;
      --ink: #1d2733;
      --muted: #68778a;
      --line: #dfe7f1;
      --court: #2e86de;
      --court-soft: #5ba4eb;
      --accent: #ffd166;
      --accent-strong: #e2a900;
      --danger: #f26868;
      --success: #25a56a;
      --shadow: 0 18px 45px rgba(30, 54, 84, .13);
      --radius: 8px;
      font-family: Nunito, Poppins, ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      background:
        linear-gradient(180deg, rgba(46, 134, 222, .08), transparent 300px),
        var(--bg);
      color: var(--ink);
    }

    button,
    textarea,
    input {
      font: inherit;
    }

    button {
      border: 0;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    button:disabled {
      cursor: not-allowed;
      opacity: .55;
    }

    .app {
      width: min(100%, 980px);
      margin: 0 auto;
      padding: 18px 14px 42px;
    }

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

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .logo {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .08);
      font-size: 24px;
      flex: 0 0 auto;
    }

    h1 {
      margin: 0;
      font-size: clamp(1.35rem, 6vw, 2.1rem);
      line-height: 1.05;
      letter-spacing: 0;
    }

    .subtitle {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: .95rem;
    }

    .header-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex: 0 0 auto;
    }

    .lang-toggle {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(46, 134, 222, .22);
      border-radius: 999px;
      background: rgba(255, 255, 255, .72);
      font-size: 1.35rem;
      box-shadow: 0 8px 18px rgba(30, 54, 84, .08);
    }


    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .screen {
      display: none;
      animation: screenIn .22s ease both;
    }

    .screen.is-active {
      display: block;
    }

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

    .section {
      margin-bottom: 18px;
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 14px;
    }

    .panel.is-disabled {
      filter: grayscale(1);
      opacity: .48;
      background: #f3f5f8;
      box-shadow: none;
    }

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

    .label-row h2 {
      margin: 0;
      font-size: 1.05rem;
    }

    .advanced-sport {
      display: inline-grid;
      grid-template-columns: auto minmax(180px, 260px) auto;
      align-items: center;
      gap: 8px;
      min-height: 34px;
      padding: 6px 8px;
      border: 1px solid #e6edf5;
      border-radius: var(--radius);
      background: #fbfcfe;
      color: var(--muted);
      font-size: .78rem;
      font-weight: 800;
    }

    .advanced-sport-title {
      color: var(--muted);
      font-weight: 900;
    }

    .sport-select-wrap {
      position: relative;
      flex: 1 1 auto;
      min-width: 0;
    }

    .sport-select-wrap::after {
      content: "▾";
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      font-size: .9rem;
      font-weight: 900;
      pointer-events: none;
    }

    .sport-select {
      width: 100%;
      min-height: 34px;
      appearance: none;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #f8fbff;
      color: var(--ink);
      padding: 6px 30px 6px 9px;
      font-size: .78rem;
      font-weight: 900;
      opacity: 1;
    }

    .sport-select:disabled {
      cursor: not-allowed;
      color: var(--ink);
      -webkit-text-fill-color: var(--ink);
    }

    .sport-lock {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 800;
      text-align: right;
    }

    .count {
      color: var(--muted);
      font-weight: 900;
      white-space: nowrap;
    }

    textarea {
      display: block;
      width: 100%;
      min-height: 190px;
      resize: vertical;
      border: 2px solid var(--line);
      border-radius: var(--radius);
      padding: 14px;
      background: #fbfdff;
      color: var(--ink);
      outline: 0;
      font-size: 1.02rem;
      line-height: 1.45;
    }

    textarea:focus,
    .inline-input:focus,
    .add-input:focus {
      border-color: var(--court);
      box-shadow: 0 0 0 4px rgba(46, 134, 222, .14);
    }

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

    .btn {
      min-height: 48px;
      border-radius: var(--radius);
      padding: 0 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-weight: 900;
      color: var(--ink);
      background: #eef3f8;
      border: 1px solid transparent;
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    }

    .btn:active {
      transform: translateY(1px) scale(.99);
    }

    .btn.primary {
      background: #f08a24;
      color: #fff;
      box-shadow: 0 10px 22px rgba(240, 138, 36, .24);
    }

    .btn.blue {
      background: var(--court);
      color: #fff;
      box-shadow: 0 10px 22px rgba(46, 134, 222, .22);
    }

    .btn.green {
      background: var(--success);
      color: #fff;
      box-shadow: 0 10px 22px rgba(37, 165, 106, .22);
    }

    .btn.ghost {
      background: #fff;
      border-color: var(--line);
    }

    .pulse:not(:disabled) {
      animation: pulse 1.5s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { box-shadow: 0 10px 22px rgba(46, 134, 222, .20); }
      50% { box-shadow: 0 10px 26px rgba(46, 134, 222, .38), 0 0 0 7px rgba(46, 134, 222, .09); }
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      min-height: 8px;
    }

    .chips:not(:empty) {
      min-height: 52px;
      margin-bottom: 8px;
    }

    .chip {
      min-height: 42px;
      max-width: 100%;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-radius: 999px;
      padding: 5px 6px 5px 13px;
      background: #eef6ff;
      border: 2px solid transparent;
      color: #174f86;
      font-weight: 900;
      animation: chipIn .18s ease both;
    }

    .chip.duplicate {
      border-color: var(--danger);
      background: #fff0f0;
      color: #a43434;
    }

    .chip-name {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      overflow-wrap: anywhere;
    }

    .chip-emoji {
      font-size: 1.25rem;
      line-height: 1;
    }

    .chip-remove {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .8);
      color: currentColor;
      font-size: 1.12rem;
      line-height: 1;
    }

    @keyframes chipIn {
      from { transform: scale(.86); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }

    .inline-input,
    .add-input {
      min-height: 42px;
      border: 2px solid var(--court);
      border-radius: 999px;
      padding: 0 13px;
      outline: 0;
      color: var(--ink);
      background: #fff;
      font-weight: 800;
      max-width: 100%;
    }

    .add-row {
      display: none;
      gap: 8px;
      width: 100%;
      margin-top: 12px;
    }

    .add-row.is-visible {
      display: flex;
    }

    .add-input {
      flex: 1;
      border-radius: var(--radius);
      min-width: 0;
    }

    .advanced-toggle {
      display: block;
      margin: 14px 4px 0 auto;
      min-height: 24px;
      padding: 0;
      background: transparent;
      color: #8793a4;
      font-size: .72rem;
      font-weight: 700;
      text-align: right;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .list-tools {
      display: none;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
    }

    .list-tools.is-visible {
      display: flex;
    }

    .random-add {
      display: inline-grid;
      grid-template-columns: auto 54px auto;
      align-items: center;
      gap: 6px;
      padding: 6px 8px;
      border: 1px solid #e6edf5;
      border-radius: var(--radius);
      background: #fbfcfe;
      color: var(--muted);
    }

    .random-add span {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 800;
      line-height: 1.1;
    }

    .random-count {
      min-height: 34px;
      width: 100%;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 0 6px;
      color: var(--ink);
      background: #fff;
      font-size: .9rem;
      font-weight: 900;
      text-align: center;
    }

    .mini-btn {
      min-height: 34px;
      padding: 0 9px;
      font-size: .78rem;
      border-radius: var(--radius);
    }

    .random-add .mini-btn {
      color: var(--muted);
      background: #fff;
      border-color: #e6edf5;
      font-weight: 800;
    }

    .danger-outline {
      color: #b63a3a;
      background: #fff;
      border-color: rgba(242, 104, 104, .55);
    }

    .player-option {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 34px;
      padding: 6px 8px;
      border: 1px solid #e6edf5;
      border-radius: var(--radius);
      background: #fbfcfe;
      color: var(--muted);
      font-size: .78rem;
      font-weight: 800;
      cursor: pointer;
      user-select: none;
    }

    .player-option input {
      width: 15px;
      height: 15px;
      accent-color: var(--court);
    }

    .create-actions {
      margin-top: 0;
    }

    .create-actions-label {
      margin: 0 0 10px;
      color: var(--ink);
      font-size: 1.05rem;
      font-weight: 900;
      line-height: 1.2;
    }

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

    .court-actions .btn {
      width: 100%;
      min-width: 0;
      padding-inline: 10px;
      white-space: normal;
      line-height: 1.15;
    }

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

    .format-option {
      min-height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #f8fbff;
      color: var(--ink);
      text-align: center;
      cursor: pointer;
      user-select: none;
    }

    .format-copy {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      line-height: 1.05;
      min-width: 0;
    }

    .format-name {
      color: var(--ink);
      font-size: .9rem;
      font-weight: 900;
    }

    .format-detail {
      margin-top: 3px;
      color: var(--muted);
      font-size: .74rem;
      font-weight: 800;
    }

    .format-option input {
      width: 16px;
      height: 16px;
      accent-color: var(--court);
      flex: 0 0 auto;
    }

    .stepper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px;
      border-radius: var(--radius);
      background: #f2f7fc;
      border: 1px solid var(--line);
    }

    .stepper button {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: var(--court);
      color: #fff;
      font-size: 1.75rem;
      font-weight: 900;
    }

    .stepper-value {
      text-align: center;
      flex: 1;
    }

    .stepper-value strong {
      display: block;
      font-size: 2rem;
      line-height: 1;
    }

    .stepper-value span,
    .preview,
    .hint {
      color: var(--muted);
      font-weight: 800;
    }

    .preview {
      margin-top: 10px;
      min-height: 24px;
      line-height: 1.35;
    }

    .message {
      margin: 0 0 14px;
      min-height: 48px;
      display: flex;
      align-items: center;
      border-radius: var(--radius);
      padding: 11px 13px;
      background: #fff7d8;
      border: 1px solid rgba(226, 169, 0, .25);
      color: #785a00;
      font-weight: 900;
    }

    .courts-grid {
      display: grid;
      gap: 14px;
    }

    .court-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 12px;
    }

    .court-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }

    .court-title {
      margin: 0;
      font-size: 1rem;
    }

    .court {
      position: relative;
      overflow: hidden;
      aspect-ratio: 1.72 / 1;
      min-height: 188px;
      border-radius: var(--radius);
      background: linear-gradient(135deg, var(--court), var(--court-soft));
      border: 4px solid #fff;
      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .86);
    }

    .court-card.incomplete .court {
      background: linear-gradient(135deg, #2f8adf, #89bcea);
    }

    .court::before,
    .court::after {
      content: "";
      position: absolute;
      inset: 13%;
      border: 2px solid rgba(255, 255, 255, .88);
      pointer-events: none;
    }

    .court::after {
      inset: 0 50% 0 auto;
      width: 0;
      border: 0;
      border-left: 4px dashed rgba(255, 255, 255, .94);
      transform: translateX(2px);
    }

    .court-line {
      position: absolute;
      background: rgba(255, 255, 255, .86);
      pointer-events: none;
    }

    .court-line.horizontal.top { left: 0; right: 0; top: 31%; height: 2px; }
    .court-line.horizontal.bottom { left: 0; right: 0; bottom: 31%; height: 2px; }
    .court-line.vertical.left { top: 0; bottom: 0; left: 25%; width: 2px; }
    .court-line.vertical.right { top: 0; bottom: 0; right: 25%; width: 2px; }

    .player {
      position: absolute;
      width: 38%;
      max-width: 150px;
      transform: translate(-50%, -50%);
      display: grid;
      justify-items: center;
      gap: 5px;
      text-align: center;
      color: #fff;
      text-shadow: 0 1px 3px rgba(0, 0, 0, .34);
      font-weight: 1000;
      line-height: 1.1;
      animation: playerDrop .28s ease both;
    }

    .avatar {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      border: 3px solid #fff;
      background: var(--avatar, var(--accent));
      color: #17202b;
      text-shadow: none;
      box-shadow: 0 8px 16px rgba(0, 0, 0, .18);
      font-size: 1rem;
    }

    .avatar.animal {
      font-size: 1.75rem;
    }

    .player-name {
      max-width: 100%;
      padding: 3px 7px;
      border-radius: 999px;
      background: rgba(19, 41, 70, .36);
      overflow-wrap: anywhere;
      font-size: .86rem;
    }

    @keyframes playerDrop {
      from { opacity: 0; transform: translate(-50%, -58%) scale(.92); }
      to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    .pos-0 { left: 22%; top: 24%; }
    .pos-1 { left: 78%; top: 24%; }
    .pos-2 { left: 22%; top: 76%; }
    .pos-3 { left: 78%; top: 76%; }
    .pos-2p-0 { left: 25%; top: 56%; }
    .pos-2p-1 { left: 75%; top: 56%; }
    .pos-3p-0 { left: 25%; top: 30%; }
    .pos-3p-1 { left: 25%; top: 78%; }
    .pos-3p-2 { left: 75%; top: 56%; }

    .bench {
      margin-top: 14px;
      background: #fff;
      border: 1px dashed #c5cfdb;
      border-radius: var(--radius);
      padding: 12px;
    }

    .bench h3 {
      margin: 0 0 8px;
      font-size: .96rem;
    }

    .tournament-grid {
      display: grid;
      gap: 12px;
    }

    .match-card,
    .champion-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 12px;
    }

    .match-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
      color: var(--muted);
      font-weight: 900;
      font-size: .9rem;
    }

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

    .competitor-btn {
      min-height: 48px;
      width: 100%;
      justify-content: flex-start;
      border-radius: var(--radius);
      padding: 10px 12px;
      background: #eef6ff;
      color: #174f86;
      font-weight: 1000;
      text-align: left;
    }

    .competitor-btn.is-winner {
      background: var(--accent);
      color: var(--ink);
    }

    .champion-card {
      display: grid;
      gap: 8px;
      background: #fff7d8;
      border-color: rgba(226, 169, 0, .35);
      color: #785a00;
      font-weight: 1000;
    }

    .bench-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .bench-player {
      padding: 7px 10px;
      border-radius: 999px;
      background: #eef3f8;
      font-weight: 900;
    }

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

    .score-team {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #f8fbff;
      padding: 8px;
    }

    .score-team label {
      display: grid;
      gap: 5px;
      color: var(--muted);
      font-size: .74rem;
      font-weight: 900;
    }

    .score-team small {
      color: var(--muted);
      font-size: .68rem;
      font-weight: 800;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .score-team select {
      width: 100%;
      min-height: 36px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      color: var(--ink);
      font-size: 1rem;
      font-weight: 1000;
      text-align: center;
    }

    .score-team select:focus {
      outline: 0;
      border-color: var(--court);
      box-shadow: 0 0 0 3px rgba(46, 134, 222, .14);
    }

    .ranking {
      margin-top: 14px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 12px;
    }

    .ranking h3 {
      margin: 0 0 9px;
      font-size: 1rem;
    }

    .ranking-meta {
      margin: -3px 0 10px;
      color: var(--muted);
      font-size: .76rem;
      font-weight: 800;
    }

    .ranking-reset {
      margin-top: 10px;
      min-height: 34px;
      padding: 0 10px;
      border: 1px solid rgba(242, 104, 104, .55);
      border-radius: var(--radius);
      background: #fff;
      color: #b63a3a;
      font-size: .78rem;
      font-weight: 900;
    }

    .score-history {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid var(--line);
    }

    .score-history h4 {
      margin: 0 0 8px;
      color: var(--ink);
      font-size: .9rem;
      font-weight: 1000;
    }

    .history-rounds {
      display: grid;
      gap: 9px;
    }

    .history-round {
      display: grid;
      gap: 6px;
      padding: 8px;
      border: 1px solid #e8eef5;
      border-radius: var(--radius);
      background: #f9fbfe;
    }

    .history-round-title {
      color: var(--muted);
      font-size: .72rem;
      font-weight: 1000;
      text-transform: uppercase;
    }

    .history-game {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: 7px;
      color: var(--muted);
      font-size: .74rem;
      font-weight: 800;
    }

    .history-score {
      color: var(--ink);
      font-weight: 1000;
      white-space: nowrap;
    }

    .ranking-list {
      display: grid;
      gap: 7px;
    }

    .ranking-row {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      align-items: center;
      gap: 9px;
      min-height: 42px;
      padding: 7px 9px;
      border: 1px solid #e8eef5;
      border-radius: var(--radius);
      background: #f9fbfe;
    }

    .ranking-row.gold { background: #fff5cf; border-color: #ffd76a; }
    .ranking-row.silver { background: #f2f5f8; border-color: #cfd7e1; }
    .ranking-row.bronze { background: #fff0df; border-color: #dfa56b; }

    .rank-place,
    .rank-name {
      font-weight: 1000;
      overflow-wrap: anywhere;
    }

    .rank-score {
      color: var(--muted);
      font-size: .74rem;
      font-weight: 800;
      text-align: right;
      white-space: nowrap;
    }

    .shuffle-fx {
      pointer-events: none;
      position: fixed;
      inset: 0;
      z-index: 10;
      overflow: hidden;
    }

    .shuttle {
      position: absolute;
      left: -70px;
      top: 22%;
      font-size: 2.2rem;
      animation: shuttleFly .78s cubic-bezier(.2, .7, .2, 1) forwards;
    }

    @keyframes shuttleFly {
      to { left: calc(100% + 70px); top: 58%; transform: rotate(520deg); }
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 18px;
      z-index: 20;
      max-width: calc(100% - 28px);
      min-height: 44px;
      display: none;
      align-items: center;
      justify-content: center;
      transform: translateX(-50%);
      border-radius: 999px;
      padding: 10px 15px;
      background: #132842;
      color: #fff;
      font-weight: 900;
      box-shadow: var(--shadow);
    }

    .toast.is-visible {
      display: flex;
      animation: toastIn .18s ease both;
    }

    @keyframes toastIn {
      from { opacity: 0; transform: translate(-50%, 8px); }
      to { opacity: 1; transform: translate(-50%, 0); }
    }

    @media (min-width: 760px) {
      .app {
        padding: 28px 24px 56px;
      }

      .setup-grid {
        display: grid;
        grid-template-columns: 1.35fr .85fr;
        gap: 18px;
        align-items: start;
      }

      .create-actions {
        grid-column: 1 / -1;
      }

      .courts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .actions .btn {
        flex: 0 0 auto;
      }
    }

    @media (max-width: 520px) {
      .topbar {
        align-items: flex-start;
      }

      .actions .btn,
      .actions {
        width: 100%;
      }

      .court-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .court-actions .btn {
        width: 100%;
        min-height: 52px;
        font-size: .86rem;
        padding-inline: 7px;
      }

      .list-tools.is-visible {
        align-items: stretch;
      }

      .random-add {
        grid-template-columns: auto 54px auto;
      }

      .advanced-sport {
        grid-template-columns: 1fr;
        align-items: stretch;
      }

      .sport-lock {
        text-align: left;
      }

      .score-entry {
        grid-template-columns: 1fr;
      }

      .ranking-row {
        grid-template-columns: 30px minmax(0, 1fr);
      }

      .rank-score {
        grid-column: 2;
        text-align: left;
      }

      .player {
        width: 42%;
      }

      .avatar {
        width: 40px;
        height: 40px;
      }

      .player-name {
        font-size: .78rem;
      }
    }