@jjlmoya/utils-sports 1.1.0

package/src/tool/tournamentBracket/component.astro

@@ -0,0 +1,1092 @@
+---
+import type { TournamentBracketUI } from './ui';
+interface Props { ui: TournamentBracketUI }
+const { ui: t } = Astro.props;
+---
+
+<div id="tb-app" class="tb-app" data-tb-ui={JSON.stringify(t)}>
+  <div id="active-controls" class="tb-active-controls tb-hidden">
+    <div class="tb-tournament-header">
+      <h2 id="tournament-title-display" class="tb-tournament-title">{t.tournamentInProgress}</h2>
+      <span id="tournament-date-display" class="tb-tournament-date"></span>
+    </div>
+    <div class="tb-controls-actions">
+      <button id="next-match-btn" class="tb-btn-next-match">
+        <span>{t.nextMatch}</span>
+        <svg xmlns="http://www.w3.org/2000/svg" class="tb-icon-md" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>
+      </button>
+      <button id="share-tournament-btn" class="tb-btn-share">
+        <svg xmlns="http://www.w3.org/2000/svg" class="tb-icon-md" viewBox="0 0 24 24" fill="currentColor"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z"/></svg>
+        <span class="tb-share-label">{t.share}</span>
+      </button>
+      <button id="reset-btn" class="tb-btn-back">
+        <svg xmlns="http://www.w3.org/2000/svg" class="tb-icon-md" viewBox="0 0 24 24" fill="currentColor"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+        <span class="tb-back-full">{t.backNew}</span>
+        <span class="tb-back-short">{t.back}</span>
+      </button>
+    </div>
+  </div>
+
+  <div id="setup-view" class="tb-setup-view">
+    <div class="tb-setup-grid">
+      <div class="tb-setup-card">
+        <div class="tb-setup-card-header">
+          <h2 class="tb-setup-title">{t.newTournament}</h2>
+          <p class="tb-setup-subtitle">{t.setupSubtitle}</p>
+        </div>
+        <div class="tb-field">
+          <label class="tb-label">{t.tournamentNameLabel}</label>
+          <input type="text" id="tournament-name-input" placeholder={t.tournamentNamePlaceholder} class="tb-input" />
+        </div>
+        <div class="tb-field">
+          <label class="tb-label">{t.addPlayersLabel}</label>
+          <div class="tb-input-row">
+            <input type="text" id="new-player-input" placeholder={t.addPlayerPlaceholder} class="tb-input" />
+            <button id="add-player-btn" class="tb-btn-add" aria-label={t.addPlayersLabel}>
+              <svg xmlns="http://www.w3.org/2000/svg" class="tb-icon-lg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+            </button>
+          </div>
+        </div>
+        <div class="tb-field">
+          <div class="tb-players-header">
+            <span class="tb-label">{t.playersLabel} (<span id="player-count">0</span>)</span>
+            <button id="clear-players-btn" class="tb-btn-clear tb-hidden">{t.clearAll}</button>
+          </div>
+          <ul id="player-list" class="tb-player-list">
+            <li class="tb-player-empty">{t.emptyList}</li>
+          </ul>
+        </div>
+        <div id="shuffle-wrapper"></div>
+        <button id="generate-btn" class="tb-btn-generate tb-btn-disabled" disabled>
+          <svg xmlns="http://www.w3.org/2000/svg" class="tb-icon-md" viewBox="0 0 24 24" fill="currentColor"><path d="M2 2v2h5v4H2v2h5c1.11 0 2-.89 2-2V7h5v10H9v-1c0-1.11-.89-2-2-2H2v2h5v4H2v2h5c1.11 0 2-.89 2-2v-1h5c1.11 0 2-.89 2-2v-4h6v-2h-6V7c0-1.11-.89-2-2-2H9V4c0-1.11-.89-2-2-2z"/></svg>
+          {t.generateBtn}
+        </button>
+      </div>
+
+      <div class="tb-setup-side">
+        <div class="tb-how-card">
+          <h3 class="tb-how-title">{t.howItWorks}</h3>
+          <p class="tb-how-text">{t.howItWorksText}</p>
+        </div>
+        <div class="tb-history-card">
+          <h3 class="tb-history-title">
+            <svg xmlns="http://www.w3.org/2000/svg" class="tb-icon-sm" viewBox="0 0 24 24" fill="currentColor"><path d="M13,3A9,9 0 0,0 4,12H1L4.89,15.89L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,19.99 10.51,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3Z"/></svg>
+            {t.historyLabel}
+          </h3>
+          <div id="history-container" class="tb-history-container">
+            <div class="tb-history-empty">{t.noHistory}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div id="bracket-view" class="tb-bracket-view tb-hidden">
+    <div class="tb-mobile-bracket">
+      <div class="bracket-mobile"></div>
+    </div>
+    <div class="desktop-bracket-container tb-desktop-bracket tb-cursor-grab">
+      <div class="tb-drag-hint">
+        <svg xmlns="http://www.w3.org/2000/svg" class="tb-icon-sm" viewBox="0 0 24 24" fill="currentColor"><path d="M9 3c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2M9 9c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-3 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"/></svg>
+        {t.dragHint}
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  import { TournamentController } from './tournament.controller';
+  document.addEventListener('DOMContentLoaded', () => new TournamentController());
+</script>
+
+<style>
+  .tb-app {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  :global(#tb-app .tb-hidden) {
+    display: none;
+  }
+
+  .tb-active-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+
+  .tb-tournament-header {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .tb-tournament-title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--text-base);
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .tb-tournament-date {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+  }
+
+  :global(#tb-app .tb-title-input) {
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid var(--accent);
+    color: var(--text-base);
+    font-weight: 700;
+    font-size: 1.25rem;
+    outline: none;
+    min-width: 200px;
+  }
+
+  :global(#tb-app .tb-edit-icon) {
+    display: inline-block;
+    width: 0.9em;
+    height: 0.9em;
+    background: currentcolor;
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
+    mask-size: contain;
+    opacity: 0.5;
+    cursor: pointer;
+    vertical-align: middle;
+    margin-left: 0.5rem;
+  }
+
+  .tb-controls-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+  }
+
+  .tb-btn-next-match {
+    display: none;
+    align-items: center;
+    gap: 0.5rem;
+    background: var(--accent);
+    color: white;
+    font-size: 0.875rem;
+    font-weight: 700;
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 0.5rem;
+    cursor: pointer;
+  }
+
+  @media (min-width: 768px) {
+    .tb-btn-next-match {
+      display: flex;
+    }
+  }
+
+  .tb-btn-share {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: #059669;
+    color: white;
+    font-size: 0.875rem;
+    font-weight: 700;
+    padding: 0.5rem 0.75rem;
+    border: none;
+    border-radius: 0.5rem;
+    cursor: pointer;
+  }
+
+  .tb-share-label {
+    display: none;
+  }
+
+  @media (min-width: 768px) {
+    .tb-share-label {
+      display: inline;
+    }
+  }
+
+  .tb-btn-back {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    color: var(--text-muted);
+    font-size: 0.875rem;
+    font-weight: 700;
+    padding: 0.375rem 0.75rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+
+  .tb-btn-back:hover {
+    color: var(--accent);
+    border-color: var(--accent);
+  }
+
+  .tb-back-short {
+    display: inline;
+  }
+
+  .tb-back-full {
+    display: none;
+  }
+
+  @media (min-width: 640px) {
+    .tb-back-short {
+      display: none;
+    }
+
+    .tb-back-full {
+      display: inline;
+    }
+  }
+
+  .tb-setup-view {
+    display: flex;
+  }
+
+  .tb-setup-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2rem;
+    width: 100%;
+  }
+
+  @media (min-width: 768px) {
+    .tb-setup-grid {
+      grid-template-columns: 1fr 1fr;
+      align-items: start;
+    }
+  }
+
+  .tb-setup-card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    border-radius: 1.5rem;
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+
+  .tb-setup-card-header {
+    text-align: center;
+  }
+
+  .tb-setup-title {
+    font-size: 1.5rem;
+    font-weight: 900;
+    color: var(--text-base);
+    margin: 0 0 0.5rem;
+  }
+
+  .tb-setup-subtitle {
+    color: var(--text-muted);
+    font-size: 0.875rem;
+    margin: 0;
+  }
+
+  .tb-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .tb-label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .tb-input {
+    background: var(--bg-page);
+    border: 1px solid var(--border-color);
+    border-radius: 0.75rem;
+    padding: 0.75rem 1rem;
+    color: var(--text-base);
+    font-size: 1rem;
+    outline: none;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .tb-input:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.15);
+  }
+
+  .tb-input-row {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .tb-input-row .tb-input {
+    flex: 1;
+  }
+
+  .tb-btn-add {
+    background: var(--accent);
+    color: white;
+    border: none;
+    border-radius: 0.75rem;
+    padding: 0.75rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .tb-btn-add:active {
+    transform: scale(0.95);
+  }
+
+  .tb-players-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .tb-btn-clear {
+    background: none;
+    border: none;
+    color: #ef4444;
+    font-size: 0.7rem;
+    cursor: pointer;
+    padding: 0;
+  }
+
+  .tb-btn-clear:hover {
+    color: #dc2626;
+  }
+
+  .tb-player-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+
+  :global(#tb-app .tb-player-item) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--bg-page);
+    border: 1px solid var(--border-color);
+    border-radius: 0.75rem;
+    padding: 0.75rem 1rem;
+  }
+
+  :global(#tb-app .tb-player-item:hover) {
+    border-color: var(--accent);
+  }
+
+  :global(#tb-app .tb-player-name) {
+    font-weight: 500;
+    font-size: 0.875rem;
+    color: var(--text-base);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    padding-right: 1rem;
+  }
+
+  :global(#tb-app .tb-player-empty) {
+    text-align: center;
+    color: var(--text-muted);
+    font-style: italic;
+    font-size: 0.875rem;
+    padding: 1rem;
+    border: 2px dashed var(--border-color);
+    border-radius: 0.75rem;
+  }
+
+  :global(#tb-app .tb-player-remove) {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0.25rem;
+    display: flex;
+  }
+
+  :global(#tb-app .tb-player-remove:hover) {
+    color: #ef4444;
+  }
+
+  :global(#tb-app .tb-toggle-group) {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  :global(#tb-app .tb-toggle-label) {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+  }
+
+  :global(#tb-app .tb-toggle-label:hover) {
+    background: var(--bg-page);
+  }
+
+  :global(#tb-app .tb-toggle) {
+    position: relative;
+    width: 2.5rem;
+    height: 1.5rem;
+    flex-shrink: 0;
+  }
+
+  :global(#tb-app .tb-toggle-input) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+  }
+
+  :global(#tb-app .tb-toggle-track) {
+    position: absolute;
+    inset: 0;
+    background: var(--border-color);
+    border-radius: 9999px;
+    transition: background 0.2s;
+  }
+
+  :global(#tb-app .tb-toggle-input:checked + .tb-toggle-track) {
+    background: var(--accent);
+  }
+
+  :global(#tb-app .tb-toggle-thumb) {
+    position: absolute;
+    top: 0.25rem;
+    left: 0.25rem;
+    width: 1rem;
+    height: 1rem;
+    background: white;
+    border-radius: 50%;
+    transition: transform 0.2s;
+  }
+
+  :global(#tb-app .tb-toggle-input:checked ~ .tb-toggle-thumb) {
+    transform: translateX(1rem);
+  }
+
+  :global(#tb-app .tb-toggle-text) {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--text-base);
+  }
+
+  .tb-btn-generate {
+    width: 100%;
+    background: var(--accent);
+    color: white;
+    border: none;
+    border-radius: 0.75rem;
+    padding: 1rem;
+    font-size: 1.125rem;
+    font-weight: 700;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    transition: opacity 0.2s;
+  }
+
+  .tb-btn-generate:hover:not(.tb-btn-disabled) {
+    opacity: 0.9;
+    transform: scale(1.02);
+  }
+
+  .tb-btn-generate:active:not(.tb-btn-disabled) {
+    transform: scale(0.98);
+  }
+
+  :global(#tb-app .tb-btn-disabled) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .tb-setup-side {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .tb-how-card {
+    background: #1e1b4b;
+    color: white;
+    border-radius: 1.5rem;
+    padding: 1.5rem;
+  }
+
+  .tb-how-title {
+    font-weight: 700;
+    font-size: 1.125rem;
+    margin: 0 0 0.5rem;
+  }
+
+  .tb-how-text {
+    color: rgba(199, 210, 254, 0.9);
+    font-size: 0.875rem;
+    line-height: 1.6;
+    margin: 0;
+  }
+
+  .tb-history-card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    border-radius: 1.5rem;
+    padding: 1.5rem;
+    flex: 1;
+  }
+
+  .tb-history-title {
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin: 0 0 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .tb-history-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    max-height: 300px;
+    overflow-y: auto;
+  }
+
+  :global(#tb-app .tb-history-empty) {
+    text-align: center;
+    color: var(--text-muted);
+    font-size: 0.875rem;
+    padding: 2rem;
+    font-style: italic;
+  }
+
+  :global(#tb-app .tb-history-item) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem;
+    background: var(--bg-page);
+    border: 1px solid var(--border-color);
+    border-radius: 0.75rem;
+  }
+
+  :global(#tb-app .tb-history-item:hover) {
+    border-color: var(--accent);
+    background: rgba(244, 63, 94, 0.03);
+  }
+
+  :global(#tb-app .tb-history-load) {
+    background: none;
+    border: none;
+    text-align: left;
+    flex: 1;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    overflow: hidden;
+    padding: 0;
+  }
+
+  :global(#tb-app .tb-history-name) {
+    font-weight: 700;
+    color: var(--text-base);
+    font-size: 0.875rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+
+  :global(#tb-app .tb-history-date) {
+    font-size: 0.625rem;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex-wrap: wrap;
+  }
+
+  :global(#tb-app .tb-history-badge-winner) {
+    color: #16a34a;
+    font-weight: 700;
+    font-size: 0.625rem;
+    background: rgba(22, 163, 74, 0.1);
+    padding: 0.125rem 0.375rem;
+    border-radius: 9999px;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  :global(#tb-app .tb-history-badge-active) {
+    color: #f97316;
+  }
+
+  :global(#tb-app .tb-history-delete) {
+    background: rgba(239, 68, 68, 0.1);
+    border: none;
+    color: #ef4444;
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    display: flex;
+    margin-left: 0.5rem;
+  }
+
+  :global(#tb-app .tb-history-delete:hover) {
+    background: rgba(239, 68, 68, 0.2);
+  }
+
+  .tb-bracket-view {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    position: relative;
+  }
+
+  .tb-mobile-bracket {
+    display: block;
+  }
+
+  @media (min-width: 768px) {
+    .tb-mobile-bracket {
+      display: none;
+    }
+  }
+
+  .tb-desktop-bracket {
+    display: none;
+    flex: 1;
+    min-height: 600px;
+    max-height: 80vh;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    border-radius: 1.5rem;
+    position: relative;
+    overflow: auto;
+  }
+
+  @media (min-width: 768px) {
+    .tb-desktop-bracket {
+      display: block;
+    }
+  }
+
+  .tb-cursor-grab {
+    cursor: grab;
+  }
+
+  :global(#tb-app .tb-cursor-grabbing) {
+    cursor: grabbing;
+  }
+
+  .tb-drag-hint {
+    position: absolute;
+    bottom: 1rem;
+    right: 2rem;
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(4px);
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    border: 1px solid var(--border-color);
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  :global(#tb-app .tb-tabs) {
+    display: flex;
+    overflow-x: auto;
+    gap: 0.5rem;
+    padding: 0.25rem;
+    position: sticky;
+    top: 0;
+    background: rgba(248, 250, 252, 0.95);
+    backdrop-filter: blur(4px);
+    z-index: 20;
+    margin-bottom: 1rem;
+  }
+
+  :global(#tb-app .tb-round-tab) {
+    white-space: nowrap;
+    padding: 0.5rem 1rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    background: var(--bg-surface);
+    color: var(--text-muted);
+    border: 1px solid var(--border-color);
+    cursor: pointer;
+  }
+
+  :global(#tb-app .tb-round-tab-active) {
+    background: var(--accent);
+    color: white;
+    border-color: var(--accent);
+  }
+
+  :global(#tb-app .tb-rounds) {
+    position: relative;
+    min-height: 500px;
+    margin-top: 1rem;
+  }
+
+  :global(#tb-app .tb-round-content) {
+    width: 100%;
+    transition: all 0.3s;
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(2rem);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding-bottom: 2rem;
+  }
+
+  :global(#tb-app .tb-round-active) {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateX(0);
+    position: relative;
+  }
+
+  :global(#tb-app .tb-round-empty) {
+    text-align: center;
+    padding: 2rem;
+    color: var(--text-muted);
+    font-style: italic;
+  }
+
+  :global(#tb-app .tb-match-card) {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    border-radius: 0.75rem;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  :global(#tb-app .tb-match-card-bye) {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    border-radius: 0.75rem;
+    padding: 0.75rem 1rem;
+    position: relative;
+  }
+
+  :global(#tb-app .tb-match-card::before),
+  :global(#tb-app .tb-match-card-bye::before) {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+  }
+
+  :global(#tb-app .tb-match-card::before) {
+    background: var(--border-color);
+  }
+
+  :global(#tb-app .tb-match-card-bye::before) {
+    background: var(--accent);
+  }
+
+  :global(#tb-app .tb-match-row) {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+  }
+
+  :global(#tb-app .tb-match-divider) {
+    height: 1px;
+    background: var(--border-color);
+    margin: 0 0.75rem;
+  }
+
+  :global(#tb-app .tb-match-btn) {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.5rem;
+    border: none;
+    background: none;
+    cursor: pointer;
+    text-align: left;
+    color: var(--text-base);
+  }
+
+  :global(#tb-app .tb-match-btn:hover:not([disabled])) {
+    background: var(--bg-page);
+  }
+
+  :global(#tb-app .tb-match-btn[disabled]) {
+    cursor: default;
+  }
+
+  :global(#tb-app .tb-match-btn-winner) {
+    background: rgba(99, 102, 241, 0.1);
+    font-weight: 700;
+    color: #4338ca;
+    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.2);
+  }
+
+  :global(#tb-app .tb-player-label) {
+    font-size: 0.875rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :global(#tb-app .tb-player-empty-label) {
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    font-style: italic;
+  }
+
+  :global(#tb-app .tb-winner-icon) {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    background: #4338ca;
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.2,2H19.5H18C17.1,2 16,3 16,4H8C8,3 6.9,2 6,2H4.5H3.8C2.8,2 2,2.8 2,3.8V4.5C2,8.9 5.6,12.5 10,12.5V15H7V17H17V15H14V12.5C18.4,12.5 22,8.9 22,4.5V3.8C22,2.8 21.2,2 20.2,2Z'/%3E%3C/svg%3E");
+    mask-size: contain;
+  }
+
+  :global(#tb-app .tb-score-input) {
+    width: 3rem;
+    height: 2.25rem;
+    text-align: center;
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 700;
+    background: var(--bg-page);
+    color: var(--text-base);
+    flex-shrink: 0;
+  }
+
+  :global(#tb-app .tb-score-input:focus) {
+    border-color: var(--accent);
+    outline: none;
+  }
+
+  :global(#tb-app .tb-bye-label) {
+    display: block;
+    font-size: 0.625rem;
+    font-weight: 700;
+    color: var(--accent);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin-bottom: 0.25rem;
+  }
+
+  :global(#tb-app .tb-bye-name) {
+    font-weight: 700;
+    color: var(--text-base);
+    font-size: 1rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :global(#tb-app .tb-bracket-wrapper) {
+    position: relative;
+  }
+
+  :global(#tb-app .tb-round-header) {
+    text-align: center;
+    font-weight: 700;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-size: 0.75rem;
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: 0.5rem;
+    margin-bottom: 1.5rem;
+    position: sticky;
+    top: 0;
+    background: var(--bg-surface);
+    z-index: 30;
+  }
+
+  :global(#tb-app .tb-desktop-card) {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    border-radius: 0.75rem;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: 100px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  :global(#tb-app .tb-desktop-card:hover) {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  }
+
+  :global(#tb-app .tb-desktop-card-bye) {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    border-radius: 0.75rem;
+    position: relative;
+    width: 100%;
+    height: 100px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0.75rem 1rem;
+    box-sizing: border-box;
+  }
+
+  :global(#tb-app .tb-connector-dot-left) {
+    position: absolute;
+    top: 50%;
+    left: -6px;
+    width: 12px;
+    height: 12px;
+    background: var(--border-color);
+    border-radius: 50%;
+    transform: translateY(-50%);
+    border: 2px solid var(--bg-surface);
+    box-sizing: content-box;
+  }
+
+  :global(#tb-app .tb-connector-dot-right) {
+    position: absolute;
+    top: 50%;
+    right: -6px;
+    width: 12px;
+    height: 12px;
+    background: rgba(99, 102, 241, 0.3);
+    border-radius: 50%;
+    transform: translateY(-50%);
+    border: 2px solid var(--bg-surface);
+    box-sizing: content-box;
+  }
+
+  :global(#tb-app .tb-connectors) {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  :global(#tb-app .tb-trophy-icon) {
+    width: 1rem;
+    height: 1rem;
+    display: inline-block;
+    color: #4338ca;
+    margin-left: 0.25rem;
+  }
+
+  :global(#tb-app .tb-icon-xs) {
+    width: 0.75rem;
+    height: 0.75rem;
+    display: inline-block;
+  }
+
+  :global(#tb-app .tb-icon-sm) {
+    width: 1.25rem;
+    height: 1.25rem;
+    display: inline-block;
+  }
+
+  :global(#tb-app .tb-icon-md) {
+    width: 1.25rem;
+    height: 1.25rem;
+    display: inline-block;
+  }
+
+  :global(#tb-app .tb-icon-lg) {
+    width: 1.5rem;
+    height: 1.5rem;
+    display: inline-block;
+  }
+
+  :global(#tb-app .tb-highlight) {
+    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.4);
+  }
+
+  :global(#tb-app .tb-toast) {
+    position: fixed;
+    bottom: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.75rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: white;
+    z-index: 9999;
+  }
+
+  :global(#tb-app .tb-toast-victory) {
+    background: #4338ca;
+    top: 50%;
+    bottom: auto;
+    transform: translate(-50%, -50%);
+    font-size: 1.25rem;
+    font-weight: 700;
+    padding: 1rem 2rem;
+  }
+
+  :global(#tb-app .tb-toast-success) {
+    background: #059669;
+  }
+
+  :global(#tb-app .tb-toast-error) {
+    background: #dc2626;
+  }
+
+  :global(#tb-app .tb-toast-info) {
+    background: var(--accent);
+  }
+</style>