/* Tournament center — scoped reference styles. */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap");

.tournament-app {
  --ink: #17352d;
  --muted: #62766d;
  --cream: #f5f5ed;
  --line: #dce5d8;
  --green: #194f3d;
  --lime: #d9f274;
  color: var(--ink);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

.tournament-app button,
.tournament-app input,
.tournament-app select,
.tournament-app textarea {
  font: inherit;
}

.tournament-app button {
  cursor: pointer;
}

.tournament-app button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tournament-app :focus-visible {
  outline: 3px solid #78ae39;
  outline-offset: 3px;
}

.tournament-app .display {
  font-family: Fraunces, Georgia, serif;
  letter-spacing: -0.045em;
}

.tournament-app .eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tournament-app .card {
  background: #fffefa;
  border: 1px solid var(--line);
  border-radius: 19px;
  box-shadow: 0 8px 30px #17352d08;
  margin: 0;
}

.tournament-app .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  border: 1px solid var(--green);
  line-height: 1.15;
  text-align: center;
  transition: transform 0.15s, background 0.15s;
}

.tournament-app .button:hover:not(:disabled) {
  background: #286c4e;
  transform: translateY(-1px);
}

.tournament-app .button.secondary {
  background: #fff;
  color: var(--green);
  border-color: #cbdace;
}

.tournament-app .button.secondary:hover {
  background: #eff7e8;
}

.tournament-app .button.light {
  background: var(--lime);
  color: var(--green);
  border-color: var(--lime);
}

.tournament-app .button.danger {
  background: #fff2eb;
  color: #a8422b;
  border-color: #f1d4cb;
}

.tournament-app .button.small {
  padding: 7px 10px;
  font-size: 12px;
}

.tournament-app .field {
  width: 100%;
  min-height: 42px;
  border: 1px solid #cbd9ce;
  border-radius: 10px;
  background: #fff;
  padding: 9px 11px;
  color: var(--ink);
}

.tournament-app textarea.field {
  min-height: 80px;
  resize: vertical;
}

.tournament-app .label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
}

.tournament-app .muted {
  color: var(--muted);
}

.tournament-app .pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
  background: #eaf1df;
  color: #31523b;
}

.tournament-app .pill.open {
  background: #e6f6d0;
  color: #396322;
}

.tournament-app .pill.progress {
  background: #fff0ca;
  color: #815919;
}

.tournament-app .pill.closed {
  background: #ebeeeb;
  color: #56635b;
}

.tournament-app .tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}

.tournament-app .tab {
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: 9px 9px 0 0;
  padding: 11px 14px;
  color: #576d61;
  font-weight: 700;
}

.tournament-app .tab.active {
  background: #e7efdd;
  color: var(--green);
}

.tournament-app .table {
  width: 100%;
  border-collapse: collapse;
  min-width: 430px;
}

.tournament-app .table th,
.tournament-app .table td {
  text-align: left;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.tournament-app .table th {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
}

.tournament-app .draggable {
  cursor: grab;
}

.tournament-app .draggable:active {
  cursor: grabbing;
}

.tournament-app .drop-over {
  outline: 3px dashed #85aa4e !important;
  outline-offset: -3px;
  background: #f0f9dd !important;
}

.tournament-app .fixture {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 13px;
}

.tournament-app .bracket-scroll {
  overflow-x: auto;
  padding: 12px 3px 20px;
}

.tournament-app .bracket {
  display: flex;
  align-items: stretch;
  gap: 48px;
  min-width: max-content;
  padding: 4px 12px;
}

.tournament-app .round {
  width: 215px;
  flex: none;
  display: flex;
  flex-direction: column;
}

.tournament-app .round-title {
  min-height: 46px;
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 14px;
}

.tournament-app .round-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 18px;
}

.tournament-app .match-node {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  min-height: 86px;
  padding: 9px;
  box-shadow: 0 3px 12px #17352d0a;
}

.tournament-app .match-node:not(.last)::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 48px;
  border-top: 2px solid #a3bd89;
}

.tournament-app .match-node.win {
  border-color: #9cbd73;
}

.tournament-app .slot {
  display: block;
  width: 100%;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  font-size: 12px;
  min-height: 27px;
}

.tournament-app .slot.winner {
  background: #e6f2d1;
  font-weight: 800;
}

.tournament-app .slot[draggable="true"] {
  cursor: grab;
}

.tournament-app .group-card {
  border: 1px solid var(--line);
  background: #f8faf3;
  border-radius: 14px;
  padding: 13px;
}

.tournament-app .modal-backdrop {
  position: fixed;
  inset: 0;
  background: #10291fd1;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
}

.tournament-app .modal-box {
  background: #fffefa;
  border-radius: 19px;
  width: min(100%, 550px);
  max-height: 90%;
  overflow: auto;
  padding: 25px;
  box-shadow: 0 25px 80px #0004;
}

.tournament-app .fade {
  animation: tournament-rise 0.3s both;
}

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

/* Notice */
.tournament-app .ta-notice {
  margin-bottom: 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  padding: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.tournament-app .ta-notice[hidden] {
  display: none;
}

/* Layout utilities */
.tournament-app .flex { display: flex; }
.tournament-app .flex-wrap { flex-wrap: wrap; }
.tournament-app .flex-1 { flex: 1 1 0%; }
.tournament-app .items-center { align-items: center; }
.tournament-app .items-end { align-items: flex-end; }
.tournament-app .items-start { align-items: flex-start; }
.tournament-app .justify-between { justify-content: space-between; }
.tournament-app .justify-end { justify-content: flex-end; }
.tournament-app .grid { display: grid; }
.tournament-app .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tournament-app .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tournament-app .gap-1 { gap: 0.25rem; }
.tournament-app .gap-2 { gap: 0.5rem; }
.tournament-app .gap-3 { gap: 0.75rem; }
.tournament-app .gap-4 { gap: 1rem; }
.tournament-app .gap-5 { gap: 1.25rem; }
.tournament-app .gap-6 { gap: 1.5rem; }
.tournament-app .space-y-2 > * + * { margin-top: 0.5rem; }
.tournament-app .space-y-3 > * + * { margin-top: 0.75rem; }
.tournament-app .max-w-5xl { max-width: 64rem; }
.tournament-app .mx-auto { margin-left: auto; margin-right: auto; }
.tournament-app .overflow-hidden { overflow: hidden; }
.tournament-app .overflow-x-auto { overflow-x: auto; }
.tournament-app .h-2 { height: 0.5rem; }
.tournament-app .w-full { width: 100%; }
.tournament-app .w-auto { width: auto; }
.tournament-app .mt-1 { margin-top: 0.25rem; }
.tournament-app .mt-2 { margin-top: 0.5rem; }
.tournament-app .mt-3 { margin-top: 0.75rem; }
.tournament-app .mt-4 { margin-top: 1rem; }
.tournament-app .mt-5 { margin-top: 1.25rem; }
.tournament-app .mt-6 { margin-top: 1.5rem; }
.tournament-app .mt-7 { margin-top: 1.75rem; }
.tournament-app .mt-9 { margin-top: 2.25rem; }
.tournament-app .mb-1 { margin-bottom: 0.25rem; }
.tournament-app .mb-2 { margin-bottom: 0.5rem; }
.tournament-app .mb-3 { margin-bottom: 0.75rem; }
.tournament-app .mb-4 { margin-bottom: 1rem; }
.tournament-app .mb-5 { margin-bottom: 1.25rem; }
.tournament-app .mb-6 { margin-bottom: 1.5rem; }
.tournament-app .mr-3 { margin-right: 0.75rem; }
.tournament-app .my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.tournament-app .p-2 { padding: 0.5rem; }
.tournament-app .p-3 { padding: 0.75rem; }
.tournament-app .p-4 { padding: 1rem; }
.tournament-app .p-5 { padding: 1.25rem; }
.tournament-app .p-6 { padding: 1.5rem; }
.tournament-app .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.tournament-app .pt-5 { padding-top: 1.25rem; }
.tournament-app .border { border: 1px solid #dce5d8; }
.tournament-app .border-t { border-top: 1px solid #dce5d8; }
.tournament-app .border-y { border-top: 1px solid #dce5d8; border-bottom: 1px solid #dce5d8; }
.tournament-app .border-\[\#dce5d8\] { border-color: #dce5d8; }
.tournament-app .rounded-lg { border-radius: 0.5rem; }
.tournament-app .rounded-xl { border-radius: 0.75rem; }
.tournament-app .bg-white { background: #fff; }
.tournament-app .bg-\[\#edf5e3\] { background: #edf5e3; }
.tournament-app .bg-\[\#e6f2d1\] { background: #e6f2d1; }
.tournament-app .bg-\[\#194f3d\] { background: #194f3d; }
.tournament-app .bg-\[\#a3c979\] { background: #a3c979; }
.tournament-app .bg-\[\#d9f274\] { background: #d9f274; }

/* Type utilities */
.tournament-app .text-left { text-align: left; }
.tournament-app .text-white { color: #fff; }
.tournament-app .text-xs { font-size: 0.75rem; line-height: 1rem; }
.tournament-app .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.tournament-app .text-2xl { font-size: 1.5rem; line-height: 2rem; }
.tournament-app .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.tournament-app .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.tournament-app .text-\[10px\] { font-size: 10px; }
.tournament-app .text-\[\#30634b\] { color: #30634b; }
.tournament-app .text-\[\#598044\] { color: #598044; }
.tournament-app .text-\[\#668957\] { color: #668957; }
.tournament-app .text-\[\#679043\] { color: #679043; }
.tournament-app .text-\[\#69845b\] { color: #69845b; }
.tournament-app .font-normal { font-weight: 400; }
.tournament-app .font-bold { font-weight: 700; }
.tournament-app .font-extrabold { font-weight: 800; }
.tournament-app .leading-tight { line-height: 1.25; }
.tournament-app .block { display: block; }
.tournament-app .inline { display: inline; }
.tournament-app .hover\:underline:hover { text-decoration: underline; }
.tournament-app .hidden { display: none !important; }
.tournament-app .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;
}
.tournament-app .\!mb-0 { margin-bottom: 0 !important; }
.tournament-app .\!w-auto { width: auto !important; }
.tournament-app .\!w-\[130px\] { width: 130px !important; }
.tournament-app .my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem; }

@media (min-width: 640px) {
  .tournament-app .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .tournament-app .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tournament-app .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tournament-app .md\:grid-cols-\[1\.3fr_1fr\] { grid-template-columns: 1.3fr 1fr; }
  .tournament-app .md\:grid-cols-\[1\.2fr_1fr\] { grid-template-columns: 1.2fr 1fr; }
  .tournament-app .md\:col-span-2 { grid-column: span 2 / span 2; }
  .tournament-app .md\:p-6 { padding: 1.5rem; }
  .tournament-app .md\:p-7 { padding: 1.75rem; }
  .tournament-app .md\:p-8 { padding: 2rem; }
  .tournament-app .md\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .tournament-app .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
}

@media (min-width: 1024px) {
  .tournament-app .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tournament-app .lg\:grid-cols-\[1fr_1\.4fr\] { grid-template-columns: 1fr 1.4fr; }
}

@media (max-width: 700px) {
  .tournament-app .bracket { gap: 34px; }
  .tournament-app .round { width: 185px; }
  .tournament-app .match-node:not(.last)::after { width: 34px; }
}