@font-face {
  font-family: 'Pixeloid Sans';
  src: url('../assets/fonts/Pixeloid/PixeloidSans.ttf') format('truetype');
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pixeloid Sans';
  src: url('../assets/fonts/Pixeloid/PixeloidSans-Bold.ttf') format('truetype');
  font-weight: bold;
  font-display: swap;
}
@font-face {
  font-family: 'DotGothic16';
  src: url('../assets/fonts/DotGothic16/DotGothic16-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}
@font-face {
  font-family: 'DotGothic16';
  src: url('../assets/fonts/DotGothic16/DotGothic16-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  font-display: swap;
}

/* Surfaces follow Master layout: wine panels, copper cards, and green stone frames.
   Bracket geometry, team emblems, and drawing palettes retain their own contracts. */
/* Tournament tabs and registration cards */
.tournament-tabs {
  display: flex;
  gap: 8px;
  margin: 14px 0;
  overflow-x: auto;
}

.tournament-tabs button {
  flex: 1 0 auto;
  padding: 9px 12px;
  border: 2px solid var(--t-card-border);
  background: var(--t-tab-bg);
  color: var(--t-tab-color);
  font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
}

.tournament-tabs button[aria-selected="true"] {
  border-color: var(--t-card-selected-border);
  background: var(--t-tab-active-bg);
  color: var(--t-tab-active-color);
  box-shadow: inset 0 -3px var(--t-card-selected-border);
}

.tournament-tab-panel[hidden] { display: none !important; }
.tournament-list { display: grid; gap: 14px; }
.tournament-editor-notices { display: grid; gap: 7px; }
.tournament-editor-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 8px; border: 1px solid var(--t-card-border); background: var(--t-panel-header-bg); }
.tournament-editor-notice span { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.tournament-editor-notice small { color: color-mix(in srgb, var(--t-card-text) 80%, transparent); }
.tournament-editor-notice button { flex: 0 0 auto; }

.tournament-card {
  min-width: 0;
  padding: 14px;
  border: 3px solid var(--t-card-border, #263336);
  background: var(--t-card-bg, #79515b);
  box-shadow: 4px 4px 0 var(--z-shadow, #0d0905);
  color: var(--t-card-text);
}

.tournament-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.tournament-card-info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.tournament-card-info h4 {
  margin: 0 0 8px;
  color: var(--z-gold-light, #ffd97a);
  font: 18px/1.6 var(--z-font-title, 'Arcana', 'Pixeloid Sans', monospace);
  overflow-wrap: anywhere;
}

.tournament-card-info p,
.tournament-signup-team p {
  margin: 4px 0;
  color: color-mix(in srgb, var(--t-card-text) 85%, transparent);
  font: 18px/1.2 var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
}
.tournament-signup-team .tournament-team-feedback { color: var(--z-gold-light); border-left: 3px solid var(--z-gold); padding-left: 8px; }

.tournament-card-info > small {
  flex: none;
  color: var(--z-green-light, #74c65a);
  font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
  text-align: right;
}

.tournament-signup {
  display: grid;
  gap: 10px;
}

.tournament-signup-team,
.tournament-create-team {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 2px solid var(--t-card-border, #263336);
  background: var(--t-panel-header-bg, #392b35);
}

.tournament-signup-team h5 {
  margin: 0;
  color: var(--t-card-text);
  font: 18px/1.6 var(--z-font-title, 'Arcana', 'Pixeloid Sans', monospace);
  overflow-wrap: anywhere;
}

.tournament-signup-team ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 20px;
  color: color-mix(in srgb, var(--t-card-text) 85%, transparent);
  font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
}

.tournament-signup form {
  display: flex;
  align-items: end;
  gap: 8px;
}

.tournament-signup label {
  display: grid;
  flex: 1;
  gap: 5px;
  color: color-mix(in srgb, var(--t-card-text) 85%, transparent);
  font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
}

.tournament-signup input {
  min-width: 0;
  padding: 8px;
  border: var(--t-field-border);
  background: var(--t-field-bg, #fff0d6);
  color: var(--t-field-color, #35272c);
}

.tournament-signup button {
  padding: 8px 10px;
  border: 2px solid var(--t-card-selected-border, #afbbb0);
  background: var(--z-wood-dark, #3b2516);
  color: var(--t-card-text);
  font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
}

.tournament-signup button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

.tournament-signup-choices button {
  min-height: 44px;
  font-size: 18px;
}

.fixed-team-signup-note {
  margin: 8px 0 0;
  color: color-mix(in srgb, var(--t-card-text) 85%, transparent);
  font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
}

.team-shield {
  display: inline-block;
  object-fit: contain;
  image-rendering: pixelated;
}

.fixed-team-signup-note .team-shield {
  width: 28px;
  height: 28px;
  margin-right: 8px;
  vertical-align: middle;
}

.fixed-team-form {
  display: grid;
  gap: 12px;
  margin: 12px 0;
  padding: 14px;
  border: 2px solid var(--t-card-border, #263336);
  background: var(--t-panel-header-bg, #392b35);
}

.fixed-team-form h4 {
  margin: 0;
  color: var(--z-gold-light, #ffd97a);
  font: 18px/1.6 var(--z-font-title, 'Arcana', 'Pixeloid Sans', monospace);
}

.fixed-team-form label {
  display: grid;
  gap: 5px;
  color: color-mix(in srgb, var(--t-card-text) 85%, transparent);
  font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
}

.fixed-team-form input:not([type="checkbox"]):not([type="color"]):not([type="file"]) {
  min-width: 0;
  padding: 8px;
  border: var(--t-field-border);
  background: var(--t-field-bg, #fff0d6);
  color: var(--t-field-color, #35272c);
}

.fixed-team-form > button,
.fixed-team-invite button,
.fixed-team-member button {
  padding: 8px 10px;
  border: 2px solid var(--t-card-selected-border, #afbbb0);
  background: var(--z-wood-dark, #3b2516);
  color: var(--t-card-text);
  font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
}

.fixed-team-leave {
  margin-top: 10px;
  padding: 8px 12px;
  border: var(--t-btn-danger-border);
  background: var(--t-btn-danger-bg);
  color: var(--t-btn-danger-color);
  font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
  cursor: pointer;

  border: var(--t-btn-danger-border);
}

.fixed-team-emblem-fields {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 10px;
  border: 2px solid var(--t-card-border, #263336);
}

.fixed-team-emblem-fields legend {
  padding: 0 6px;
  color: var(--z-gold-light, #ffd97a);
  font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
}

.fixed-team-emblem-thumb {
  position: relative;
  display: grid;
  flex: none;
  width: 166px;
  height: 166px;
  padding: 0;
  border: 3px solid var(--t-card-selected-border, #afbbb0);
  background-color: var(--t-card-bg, #79515b);
  background-image: linear-gradient(45deg, #ffffff12 25%, transparent 25%), linear-gradient(-45deg, #ffffff12 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ffffff12 75%), linear-gradient(-45deg, transparent 75%, #ffffff12 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  cursor: pointer;
}

.fixed-team-emblem-thumb canvas {
  width: 160px;
  height: 160px;
  image-rendering: pixelated;
}

.fixed-team-emblem-hint {
  position: absolute;
  inset: auto 0 0;
  padding: 2px 4px;
  background: color-mix(in srgb, var(--t-panel-header-bg) 90%, transparent);
  color: var(--z-gold-light, #ffd97a);
  font: 18px/1.2 var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
  opacity: 0;
  transition: opacity .15s;
}

.fixed-team-emblem-thumb:is(:hover, :focus-visible) .fixed-team-emblem-hint { opacity: 1; }
.fixed-team-emblem-thumb:focus-visible { outline: 2px solid var(--t-card-selected-border); outline-offset: 3px; }
.fixed-team-emblem-thumb.is-readonly { cursor: default; }
.fixed-team-emblem-thumb.is-readonly .fixed-team-emblem-hint { display: none; }

.fixed-team-emblem-dialog {
  width: min(1000px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 0;
  border: var(--t-panel-border);
  background: var(--t-panel-bg);
  color: var(--t-panel-text);
  box-shadow: var(--z-frame), 5px 5px 0 var(--z-shadow);
  overflow: auto;
}

.fixed-team-emblem-dialog::backdrop { background: #0a0f18b3; }

.fixed-team-emblem-dialog-card { position: relative; padding: 14px 16px 16px; }

.fixed-team-emblem-dialog-header h2 {
  margin: 0 40px 12px 0;
  color: var(--z-gold-light, #ffd97a);
  font: 20px/1.4 var(--z-font-title, 'Arcana', 'Pixeloid Sans', monospace);
  text-shadow: 2px 2px 0 var(--z-shadow, #0d0905);
}

/* ===================================================================
   SHIELD EDITOR (ASEPRITE-STYLE TOOLS)
   =================================================================== */
.emblem-studio { width: min(1060px, calc(100vw - 24px)); }

.emblem-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 6px 8px;
  border: 2px solid var(--t-card-border, #263336);
  background: var(--t-panel-header-bg, #392b35);
}

.emblem-tool-name { display: grid; min-width: 170px; line-height: 1.2; font: 18px/1.2 var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace); }
.emblem-tool-name b { color: var(--z-gold-light, #ffd97a); }
.emblem-tool-name small { color: color-mix(in srgb, var(--t-card-text) 80%, transparent); font-size: 18px; }
.emblem-option-set { display: flex; gap: 4px; }
.emblem-spacer { flex: 1; }

.emblem-workspace {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.emblem-tool {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--z-outline, #1e140c);
  background: var(--z-wood, #5f3c22);
  color: var(--t-card-text);
  box-shadow: var(--z-bevel, none);
  cursor: pointer;
}

.emblem-tool:hover:not(:disabled) { background: var(--z-copper); }
.emblem-tool[aria-pressed="true"] { background: var(--z-gold, #e3ac3c); color: var(--t-field-color, #35272c); }
.emblem-tool.danger { background: var(--z-red-dark, #741c16); }
.emblem-tool:disabled, .emblem-tool:has(input:disabled) { opacity: .45; cursor: default; }
.emblem-tool:focus-visible { outline: 2px solid var(--t-card-selected-border); outline-offset: 2px; }
.emblem-icon { width: 24px; height: 24px; }
.emblem-tool input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* A corner mark: this tool has more variants (opened beside it). */
.emblem-tool.has-variants::after {
  content: '';
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 6px;
  height: 6px;
  background: currentColor;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.emblem-tools {
  display: grid;
  gap: 4px;
  padding: 4px;
  border: 2px solid var(--t-card-border, #263336);
  background: var(--t-panel-header-bg, #392b35);
}

.emblem-tool-group { position: relative; }

.emblem-flyout {
  position: absolute;
  top: -4px;
  right: calc(100% + 8px);
  z-index: 5;
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 2px solid var(--z-gold, #e3ac3c);
  background: var(--t-panel-header-bg, #392b35);
  box-shadow: 4px 4px 0 var(--z-shadow, #0d0905);
}

.emblem-flyout[hidden] { display: none; }

.emblem-side { display: grid; gap: 10px; }

.emblem-current { display: block; }
.emblem-current input[type="color"] {
  display: block;
  width: 100%;
  height: 44px;
  padding: 2px;
  border: 2px solid var(--z-outline, #1e140c);
  background: var(--t-field-bg, #fff0d6);
  cursor: pointer;
}

.emblem-palette {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 3px;
  border: 2px solid var(--t-card-border, #263336);
  background: #000;
}

.emblem-swatch {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: var(--swatch);
  cursor: pointer;
}

.emblem-swatch[aria-pressed="true"] { outline: 2px solid var(--t-card-text); outline-offset: -2px; box-shadow: inset 0 0 0 3px #000; }
.emblem-swatch:focus-visible { outline: 2px solid var(--t-card-selected-border); outline-offset: 1px; }

.emblem-preview {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  padding: 10px;
  border: 2px solid var(--t-card-border, #263336);
  background-color: var(--t-card-bg, #79515b);
  background-image: linear-gradient(45deg, #ffffff12 25%, transparent 25%), linear-gradient(-45deg, #ffffff12 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ffffff12 75%), linear-gradient(-45deg, transparent 75%, #ffffff12 75%);
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  background-size: 8px 8px;
}

.emblem-preview canvas { image-rendering: pixelated; }
.emblem-preview .is-1x { width: 32px; height: 32px; }
.emblem-preview .is-2x { width: 64px; height: 64px; }

.emblem-canvas-wrap { display: grid; place-items: center; min-width: 0; }

/* The canvas takes the room left by the side panel and the tool column. */
.emblem-studio #fixedTeamEmblemCanvas {
  width: min(544px, calc(100vh - 250px), calc(100vw - 360px));
  min-width: 192px;
  height: auto;
  aspect-ratio: 1;
  border: 3px solid var(--t-card-selected-border, #afbbb0);
  background-color: var(--t-card-bg, #79515b);
  background-image: linear-gradient(45deg, #ffffff12 25%, transparent 25%), linear-gradient(-45deg, #ffffff12 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ffffff12 75%), linear-gradient(-45deg, transparent 75%, #ffffff12 75%);
  background-position: 0 0, 0 17px, 17px -17px, -17px 0;
  background-size: 34px 34px;
  image-rendering: pixelated;
  touch-action: none;
  cursor: crosshair;
}

.emblem-studio #fixedTeamEmblemCanvas[data-tool="picker"] { cursor: copy; }
.emblem-studio #fixedTeamEmblemCanvas[data-tool="move"] { cursor: move; }

.emblem-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.fixed-team-emblem-note { margin: 0; color: color-mix(in srgb, var(--t-card-text) 80%, transparent); font: 18px/1.3 var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace); }
.fixed-team-emblem-dialog .fixed-team-emblem-done {
  min-height: 42px;
  padding: 6px 22px;
  border: 2px solid var(--z-outline, #1e140c);
  background: var(--z-green, #3b9139);
  color: var(--t-card-text);
  box-shadow: var(--z-bevel, none);
  font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
  cursor: pointer;
}

/* Phone: drawing first, the tools in a row under it, then the palette. */
@media (max-width: 760px) {
  .emblem-workspace { grid-template-columns: 1fr; }
  .emblem-canvas-wrap { order: 1; }
  .emblem-tools { order: 2; display: flex; flex-wrap: wrap; justify-content: center; }
  .emblem-side { order: 3; grid-template-columns: 1fr auto; align-items: start; }
  .emblem-current { grid-column: 1 / -1; }
  .emblem-studio #fixedTeamEmblemCanvas { width: min(100%, calc(100vh - 300px)); min-width: 0; }
  .emblem-flyout { top: calc(100% + 6px); right: 0; }
  .emblem-tool-name { min-width: 0; flex-basis: 100%; }
}

.fixed-team-members {
  display: grid;
  gap: 6px;
}

.fixed-team-member {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 8px !important;
  padding: 8px;
  border: 1px solid var(--t-card-border, #263336);
  background: var(--t-card-bg, #79515b);
}

@media (max-width: 700px) {
  .fixed-team-emblem-fields { flex-wrap: wrap; }
  .fixed-team-member { grid-template-columns: auto minmax(0, 1fr) auto; }
  .fixed-team-member button { grid-column: 1 / -1; }
}

.fixed-team-member small {
  color: var(--z-gold-light, #ffd97a);
  font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
}

.fixed-team-invites {
  display: grid;
  gap: 8px;
}

.fixed-team-invite {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 2px solid var(--t-card-border, #263336);
  background: var(--t-panel-header-bg, #392b35);
  color: var(--t-card-text);
  font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
}

.fixed-team-invite span { flex: 1 1 180px; }


/* Pixel-art tournament bracket */
.tournament-bracket-visual {
  --bracket-column-gap: 40px;
  --bracket-match-gap: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--bracket-column-gap);
  padding: 20px 8px;
  overflow-x: auto;
  font-family: var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
  scrollbar-color: var(--z-gold-light, #ffd97a) var(--t-card-bg, #79515b);
}

.bracket-round {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--bracket-match-gap);
}

.bracket-match {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: none;
}

.bracket-watch {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  border: 2px solid var(--t-card-selected-border, #afbbb0);
  background: var(--t-btn-neutral-bg);
  color: var(--t-btn-neutral-color);
  box-shadow: 3px 3px 0 var(--z-shadow, #0d0905);
  font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;

  border: var(--t-btn-neutral-border);
}

.bracket-watch-live { color: var(--z-green-light, #74c65a); font-weight: 700; }

.spectator-match-data-button {
  position: absolute;
  z-index: 7;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  min-height: 44px;
  padding: 8px 14px;
  border: 3px solid var(--t-card-selected-border, #afbbb0);
  background: var(--t-btn-neutral-bg);
  color: var(--t-btn-neutral-color);
  box-shadow: 3px 3px 0 var(--z-shadow, #0d0905);
  font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
  cursor: pointer;

  border: var(--t-btn-neutral-border);
}

.spectator-match-data-button[hidden],
.spectator-match-data-dialog[hidden] { display: none !important; }

.spectator-match-data-dialog {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #0d0905c9;
}

.spectator-match-data-card {
  width: min(780px, 100%);
  max-height: min(80vh, 800px);
  overflow: auto;
  border: var(--t-panel-border);
  background: var(--t-panel-bg);
  color: var(--t-panel-text);
  box-shadow: var(--z-frame), 5px 5px 0 var(--z-shadow);
  font-family: var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
}

.spectator-match-data-card > header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 2px solid var(--t-panel-header-line);
  background: var(--t-panel-header-bg);

  color: var(--t-panel-header-color);
}

.spectator-match-data-card h2 { margin: 0; color: var(--z-gold-light, #ffd97a); font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace); }
.spectator-match-data-card header button { min-width: 44px; min-height: 44px; border: 2px solid var(--t-card-selected-border, #afbbb0); background: var(--z-wood-dark, #3b2516); color: var(--t-card-text); font-size: 28px; cursor: pointer; }
.spectator-match-data-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 16px; padding: 16px; }
.spectator-data-team h3 { margin: 0 0 10px; color: var(--z-gold-light, #ffd97a); font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace); }
.spectator-data-team ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.spectator-data-team li { padding: 10px; border: 2px solid var(--t-card-border, #263336); background: var(--t-panel-header-bg, #392b35); }
.spectator-data-player { display: flex; justify-content: space-between; gap: 8px; font-size: 18px; }
.spectator-data-player strong { overflow-wrap: anywhere; }
.spectator-data-player span { color: color-mix(in srgb, var(--t-card-text) 85%, transparent); }
.spectator-data-stats { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 5px; color: var(--z-green-light, #74c65a); font-size: 18px; }

.bracket-watch:hover,
.bracket-watch:focus-visible { background: var(--t-btn-neutral-bg); transform: translateY(-2px); outline: 2px solid var(--t-card-selected-border); outline-offset: 2px; }

.match-card {
  position: relative;
  z-index: 2;
  width: 230px;
  min-height: 68px;
  padding: 8px 30px 8px 10px;
  border: 3px solid var(--t-card-border, #263336);
  background: var(--t-card-bg, #79515b);
  box-shadow: 4px 4px 0 var(--z-shadow, #0d0905);
  color: var(--t-card-text);
}

.match-card.winner {
  border-color: var(--t-card-selected-border, #afbbb0);
  box-shadow: 0 0 0 1px var(--t-card-selected-border), 0 0 14px var(--z-gold-light, #ffd97a), 4px 4px 0 var(--z-shadow, #0d0905);
}

.match-card.winner::after,
.match-card.loser::after {
  position: absolute;
  top: 5px;
  right: 7px;
  font: 18px/1.2 var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
}

.match-card.winner::after {
  content: '↗';
  color: var(--z-green-light);
  text-shadow: 0 0 8px var(--z-green);
}

.match-card.loser {
  opacity: 0.5;
  filter: grayscale(80%);
}

.match-card.loser::after {
  content: '×';
  color: var(--z-red-light);
  font-size: 27px;
  font-weight: 700;
  text-shadow: 0 0 6px var(--z-red);
}

.team-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.team-info .avatar {
  display: inline-block;
  flex: none;
  width: 48px;
  height: 48px;
  border: 2px solid var(--t-card-border, #263336);
  background: var(--z-wood-dark, #3b2516);
  image-rendering: pixelated;
}

.team-name {
  overflow: hidden;
  color: var(--t-card-text);
  font: 18px/1.2 var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-name small {
  display: block;
  overflow: hidden;
  color: color-mix(in srgb, var(--t-card-text) 80%, transparent);
  font: 18px/1.2 var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
  text-overflow: ellipsis;
}

/* Connector lines. A knockout tree (.is-tree) groups each round in pairs: the
   two matches of a pair sit at 25% and 75% of its height and their lines meet
   halfway to the next round, exactly at the centre of the match they feed.
   Brackets that are not a plain tree (double elimination, points, byes) show
   their rounds as columns without lines, so no line points to the wrong match. */
/* A grid row is as tall as the tallest column (the first round), even when the
   bracket box is shorter and scrolls; a flex row would squeeze every column to the box. */
.tournament-bracket-visual.is-tree { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; align-items: stretch; justify-content: start; column-gap: var(--bracket-column-gap); }
.is-tree .bracket-round { position: relative; justify-content: space-around; gap: 0; padding-top: 30px; }
.is-tree .bracket-round > h5 { position: absolute; top: 0; left: 0; right: 0; margin: 0; }
.is-tree .champion-round { justify-content: center; }
.bracket-pair { position: relative; display: flex; flex: 1 1 0; flex-direction: column; justify-content: space-around; }
.bracket-pair > .bracket-match { margin: calc(var(--bracket-match-gap) / 2) 0; }
.is-tree .bracket-pair > .bracket-match::after,
.is-tree .bracket-pair:not(.is-single)::after,
.is-tree .bracket-pair:not(.is-single)::before {
  position: absolute;
  z-index: 1;
  border: 0 solid var(--t-card-border, #263336);
  content: '';
}
/* Each match to its pair's bar. */
.is-tree .bracket-pair > .bracket-match::after { top: 50%; right: calc(-1 * var(--bracket-column-gap) / 2); width: calc(var(--bracket-column-gap) / 2); border-top-width: 3px; }
/* The bar joining the pair. */
.is-tree .bracket-pair:not(.is-single)::after { top: 25%; bottom: 25%; right: calc(-1 * var(--bracket-column-gap) / 2 - 3px); border-right-width: 3px; }
/* From the bar to the match the pair feeds. */
.is-tree .bracket-pair:not(.is-single)::before { top: 50%; right: calc(-1 * var(--bracket-column-gap)); width: calc(var(--bracket-column-gap) / 2); border-top-width: 3px; }
/* The final reaches the champion; the newest round of a running tournament feeds nothing yet. */
.is-tree .bracket-round:has(+ .champion-round) .bracket-match::after { right: calc(-1 * var(--bracket-column-gap)); width: var(--bracket-column-gap); }
.is-tree .bracket-round:last-child .bracket-pair::before,
.is-tree .bracket-round:last-child .bracket-pair::after,
.is-tree .bracket-round:last-child .bracket-match::after { display: none; }
/* Decided paths are lit in gold. */
.is-tree .bracket-pair > .bracket-match.has-winner::after,
.is-tree .bracket-pair.is-done::after,
.is-tree .bracket-pair.is-done::before { border-color: var(--z-gold, #e3ac3c); }


.champion-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-left: 20px;
  text-align: center;
}

.coin-reward {
  display: inline-block;
  margin-bottom: 8px;
  padding: 6px 10px;
  border: 2px solid var(--t-card-selected-border, #afbbb0);
  background: var(--t-card-bg, #79515b);
  color: var(--z-gold-light, #ffd97a);
  font: 18px/1.2 var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
  text-align: center;
}

.trophy-box {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 220px;
  padding: 20px;
  border: 4px solid var(--t-card-selected-border, #afbbb0);
  background: var(--t-card-bg, #79515b);
  box-shadow: 0 0 0 2px var(--t-card-selected-border), 0 0 16px var(--z-gold-light, #ffd97a), 4px 4px 0 var(--z-shadow, #0d0905);
  text-align: center;
  animation: champion-glow 1.8s steps(2, end) infinite;
}

.trophy-box h3 {
  margin: 0;
  font-size: 40px;
  line-height: 1;
}

.trophy-box p {
  margin: 0;
  color: color-mix(in srgb, var(--t-card-text) 80%, transparent);
  font: 18px/1.2 var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
}

.trophy-box p strong {
  display: block;
  margin-top: 6px;
  color: var(--t-card-text);
  font: 18px/1.5 var(--z-font-title, 'Arcana', 'Pixeloid Sans', monospace);
  overflow-wrap: anywhere;
}

.trophy-box p small {
  display: inline-block;
  margin-top: 6px;
}

/* The champion's shield sits in the middle of the card; the card opens the team window.
   Shields are 32x32 pixel art, so they scale by whole steps (2x here, 3x in the window). */
.champion-emblem {
  width: 64px;
  height: 64px;
}

.trophy-box[data-team-details] {
  cursor: pointer;
}

.trophy-box[data-team-details]:hover,
.trophy-box[data-team-details]:focus-visible {
  outline: 2px solid var(--t-card-selected-border);
  outline-offset: 4px;
}

.tournament-team-dialog {
  width: min(340px, calc(100vw - 24px));
  max-height: calc(100vh - 40px);
  padding: 0;
  border: var(--t-panel-border);
  background: var(--t-panel-bg);
  color: var(--t-panel-text);
  box-shadow: var(--z-frame), 5px 5px 0 var(--z-shadow);
}

.tournament-team-dialog::backdrop {
  background: #0a0f18b3;
}

.tournament-team-dialog-card {
  position: relative;
  margin: 0;
  padding: 24px 18px 18px;
}

.tournament-team-dialog-body {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.tournament-team-dialog-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--t-card-border, #263336);
  background: var(--t-btn-neutral-bg);
  color: var(--t-btn-neutral-color);
  font: 18px/1.2 var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
  cursor: pointer;

  border: var(--t-btn-neutral-border);
}

.tournament-team-dialog-emblem {
  width: 96px;
  height: 96px;
}

span.tournament-team-dialog-emblem {
  display: grid;
  place-items: center;
  font-size: 56px;
}

.tournament-team-dialog-eyebrow,
.tournament-team-dialog-count {
  margin: 0;
  color: var(--z-gold-light, #ffd97a);
  font: 18px/1.2 var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
  text-transform: uppercase;
}

.tournament-team-dialog-count {
  color: color-mix(in srgb, var(--t-card-text) 80%, transparent);
}

.tournament-team-dialog h3 {
  margin: 0;
  color: var(--t-card-text);
  font: 18px/1.5 var(--z-font-title, 'Arcana', 'Pixeloid Sans', monospace);
  overflow-wrap: anywhere;
}

.tournament-team-dialog-members {
  display: grid;
  gap: 4px;
  width: 100%;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font: 18px/1.2 var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
}

.tournament-team-dialog-members li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 9px;
  border: 1px solid var(--t-card-border, #263336);
  background: var(--t-panel-header-bg, #392b35);
  text-align: left;
}

.tournament-team-dialog-members small {
  color: var(--z-gold-light, #ffd97a);
}

.tournament-admin-screen {
  width: min(100%, 900px);
  margin: 4vh auto;
  padding: 24px;
  border: var(--t-panel-border);
  background: var(--t-panel-bg);
  box-shadow: var(--z-frame), 5px 5px 0 var(--z-shadow);
  color: var(--t-panel-text);
}

.tournament-admin-screen h1 {
  color: var(--z-gold-light, #ffd97a);
  font-size: clamp(16px, 3vw, 24px);
  line-height: 1.6;
}

.tournament-admin-screen .muted,
.tournament-admin-screen #tournamentAdminStatus {
  color: color-mix(in srgb, var(--t-card-text) 80%, transparent);
}

.tournament-admin-history {
  display: grid;
  gap: 12px;
  margin: 20px 0;
}

.tournament-admin-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border: 3px solid var(--t-card-border, #263336);
  background: var(--t-panel-header-bg, #392b35);
}

.tournament-admin-entry h2 {
  margin: 0 0 6px;
  color: var(--t-card-text);
  font: 18px/1.6 var(--z-font-title, 'Arcana', 'Pixeloid Sans', monospace);
  overflow-wrap: anywhere;
}

.tournament-admin-entry p {
  margin: 0;
  color: color-mix(in srgb, var(--t-card-text) 80%, transparent);
  font: 18px/1.2 var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
}

.tournament-admin-entry button,
.tournament-admin-screen .tournament-admin-back,
.tournament-admin-screen #clearTournamentAdminHistory {
  flex: none;
  padding: 9px 12px;
  border: 2px solid var(--z-red-light);
  background: var(--t-card-bg, #79515b);
  color: var(--t-card-text);
  font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
  text-decoration: none;
  cursor: pointer;
}

.tournament-admin-entry button:disabled {
  opacity: 0.6;
  cursor: wait;
}

@keyframes champion-glow {
  50% {
    box-shadow: 0 0 0 3px var(--t-card-selected-border), 0 0 24px 6px var(--z-gold-light, #ffd97a), 4px 4px 0 var(--z-shadow, #0d0905);
  }
}

@media (prefers-reduced-motion: reduce) {
  .trophy-box { animation: none; }
}

@media (max-width: 520px) {
  .tournament-card { padding: 10px; }
  .tournament-card-info { flex-direction: column; }
  .tournament-card-info > small { text-align: left; }
  .tournament-signup form { align-items: stretch; flex-direction: column; }
  .tournament-signup-choices { grid-template-columns: 1fr; }
  .fixed-team-emblem-fields { flex-direction: column; }
  .fixed-team-member { grid-template-columns: auto minmax(0, 1fr) auto; }
  .fixed-team-member button { grid-column: 2 / -1; justify-self: start; }
  .tournament-admin-screen { margin: 0; padding: 16px; }
  .tournament-admin-entry { align-items: flex-start; flex-direction: column; }
}
.tournament-status-badge{position:fixed;top:84px;left:12px;z-index:120;display:flex;align-items:center;gap:8px;max-width:min(260px,58vw);padding:7px 11px 7px 5px;border:2px solid var(--t-hud-line);border-radius:9px;background:var(--t-hud-bg);color:var(--t-card-text);box-shadow:0 3px 14px #0009;cursor:pointer;text-align:left}
.tournament-status-badge[hidden]{display:none!important}
.tournament-status-badge[data-state="registration"]{border-color:var(--z-green-light)}
.tournament-status-badge[data-state="running"]{border-color:var(--z-copper)}
.tournament-status-badge:disabled{cursor:default;opacity:1}
.tournament-status-copy .tournament-status-timer{margin-top:2px;font-size:18px;font-weight:bold;font-variant-numeric:tabular-nums;color:var(--z-green-light)}
.tournament-status-badge[data-state="running"] .tournament-status-timer{color:var(--z-gold-light)}
.tournament-status-timer[hidden]{display:none}
.tournament-status-copy{display:flex;flex-direction:column;line-height:1.2}.tournament-status-copy b{font-size:18px}.tournament-status-copy small{font-size:18px;color:var(--t-hud-color)}
.tournament-status-sprite{display:block;flex:none;width:32px;height:32px;background:url('../assets/ui/tournament-status.svg') 0 0/128px 64px no-repeat;animation:tournament-sprite .7s steps(4) infinite}
.tournament-status-badge[data-state="running"] .tournament-status-sprite{background-position-y:-32px}
@keyframes tournament-sprite{to{background-position-x:-128px}}
@media(max-width:600px){.tournament-status-badge{top:66px;left:6px}}
@media(prefers-reduced-motion:reduce){.tournament-status-sprite{animation:none}}
.tournament-announcement-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:18px;padding:14px;border:1px solid var(--z-wood, #5f3c22);border-radius:8px;background:var(--t-card-bg, #79515b)}
.tournament-announcement-form h4,.tournament-announcement-form p{grid-column:1/-1;margin:0}
.tournament-announcement-form label{display:flex;flex-direction:column;gap:4px;font-size:18px}
.tournament-announcement-form label:has(textarea){grid-column:1/-1}
.tournament-announcement-form input,.tournament-announcement-form textarea{width:100%;box-sizing:border-box}

/* Compact tournament overview and round navigation. */
.tournament-tabs{gap:4px;margin:8px 0}.tournament-tabs button{padding:7px 9px}
.tournament-list{gap:9px}.tournament-card{padding:10px;border-width:2px}
.tournament-card-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:4px 12px;margin-bottom:8px;box-sizing:border-box;min-width:0;max-width:100%}
.tournament-card-info>div{min-width:0;max-width:100%}
.tournament-card-info :is(h4,p){white-space:normal;overflow-wrap:anywhere}
.tournament-card-info h4{margin:0 0 4px}.tournament-card-info p{margin:0}
.tournament-card-info>small{align-self:start;min-width:0;max-width:32ch;white-space:normal;overflow-wrap:anywhere}
.tournament-card-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 12px;color:color-mix(in srgb, var(--t-card-text) 85%, transparent);font:18px/1.2 var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace)}
.tournament-card-meta span{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.tournament-signup{gap:6px}.tournament-signup-team,.tournament-create-team{gap:6px;padding:8px}
.bracket-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0;color:color-mix(in srgb, var(--t-card-text) 85%, transparent);font:18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace)}
.bracket-toolbar div{display:flex;gap:4px}.bracket-toolbar button{min-width:44px;min-height:36px;border:2px solid var(--t-card-border, #263336);background:var(--z-wood-dark, #3b2516);color:var(--t-card-text);font:18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);cursor:pointer}
.tournament-bracket-visual{--bracket-column-gap:20px;--bracket-match-gap:18px;gap:20px;padding:8px 4px 14px;scroll-snap-type:x proximity}
.tournament-bracket-visual.is-points .bracket-match::before,.tournament-bracket-visual.is-points .bracket-match::after{display:none}
.bracket-round{scroll-snap-align:start}.bracket-round h5{margin:0 0 5px;color:var(--z-gold-light, #ffd97a);font:18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace)}
.bracket-match{gap:2px}.bracket-match-status{color:color-mix(in srgb, var(--t-card-text) 80%, transparent);font:18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace)}
.match-card{width:176px;min-height:44px;padding:5px 25px 5px 6px;border-width:2px}
.team-info{gap:6px;margin:0}.team-info .avatar{width:32px;height:32px}.team-name{flex:1;min-width:0;font-size:18px}.team-name small{font-size:18px}
.match-kills{flex:none;color:var(--z-green-light, #74c65a);font:18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace)}
.bracket-tiebreak{color:color-mix(in srgb, var(--t-card-text) 85%, transparent);font:18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace)}
.bracket-watch{min-height:44px;padding:4px 7px;justify-content:center;font-size:18px}
.champion-card{gap:6px;margin-left:0}.trophy-box{min-width:176px;padding:12px}.trophy-box h3{font-size:30px}.trophy-box p{font-size:18px}
.tournament-standing-wrap{max-width:100%;overflow-x:auto;margin:8px 0}
.tournament-standing{width:100%;border-collapse:collapse;color:var(--t-card-text);font:18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace)}
.tournament-standing caption{text-align:left;color:var(--z-gold-light, #ffd97a);padding-bottom:5px}
.tournament-standing th,.tournament-standing td{padding:4px 6px;border-bottom:1px solid var(--t-card-border, #263336);text-align:right;white-space:nowrap}
.tournament-standing th:first-child{text-align:left}.tournament-standing tbody tr:first-child{color:var(--z-green-light, #74c65a)}

/* The creation form exposes essentials first; details remain available on demand. */
#tournamentForm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#tournamentForm>.tournament-editor-group{grid-column:1/-1}
.tournament-subtabs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.tournament-subtabs button{flex:1 1 160px;padding:9px 12px;background: var(--t-tab-bg);color: var(--t-tab-color);border:2px solid var(--z-shadow, #0d0905);box-shadow:3px 3px 0 var(--z-shadow, #0d0905);font:18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);cursor:pointer}
.tournament-subtabs button.active{background: var(--t-tab-active-bg);color: var(--t-tab-active-color)}
.tournament-preset-bar{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:end;gap:8px;padding:10px;border:2px solid var(--t-card-selected-border, #afbbb0);background:var(--t-card-bg, #79515b);color:var(--t-card-text)}
.tournament-preset-bar label{flex:1 1 240px;display:grid;gap:4px;font:18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace)}
.tournament-preset-bar select{width:100%;padding:7px}
.tournament-schedule-actions{display:flex;flex-wrap:wrap;gap:8px}
.tournament-schedule-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin:0}
.tournament-schedule-head span{color:var(--z-green-light, #74c65a)}
.tournament-schedule-fields{display:contents}
.tournament-schedule-kind,.tournament-weekdays,.tournament-times,.tournament-schedule-warning{grid-column:1/-1}
.tournament-weekdays{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:8px;border:1px solid var(--t-card-border, #263336)}
.tournament-weekdays legend{padding:0 4px;color:var(--z-gold-light, #ffd97a);font:18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace)}
fieldset.tournament-weekdays label{display:flex;align-items:center;gap:5px;font:18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);cursor:pointer}
fieldset.tournament-weekdays input{width:auto}
.tournament-times{display:grid;gap:6px;justify-items:start;font:18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace)}
.tournament-times [data-time-list]{display:flex;flex-wrap:wrap;gap:8px}
.tournament-time-row{display:flex;align-items:center;gap:4px}
span.tournament-time-row input{width:auto}
.tournament-time-row button,.tournament-times [data-add-time]{padding:4px 9px}
.tournament-schedule-warning{margin:4px 0;color:var(--z-gold-light, #ffd97a)}
.tournament-editor-group{min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0;padding:10px;border:2px solid var(--t-card-border, #263336);background:var(--t-card-bg, #79515b);color:var(--t-card-text)}
.tournament-editor-group legend{padding:0 6px;color:var(--z-gold-light, #ffd97a);font:18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace)}
.tournament-editor-group label,.tournament-settings-form label{display:grid;align-content:space-between;gap:4px;min-width:0;font:18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace)}
.tournament-editor-group [hidden],.tournament-settings-form [hidden]{display:none!important}
.tournament-editor-group input,.tournament-editor-group select,.tournament-editor-group textarea,.tournament-settings-form input,.tournament-settings-form select{box-sizing:border-box;width:100%;min-width:0;padding:7px}
.tournament-editor-group .tournament-bot-option,.tournament-settings-form .tournament-bot-option{display:grid;grid-template-columns:auto 1fr;align-items:center;justify-content:start;gap:3px 9px}
.tournament-editor-group .tournament-bot-option input,.tournament-settings-form .tournament-bot-option input{grid-row:1/3;width:auto;min-width:auto;padding:0}
.tournament-bot-option span,.tournament-bot-option small{grid-column:2}
.tournament-editor-group .tournament-wide,.tournament-editor-group p{grid-column:1/-1;margin:0}
.tournament-editor-notices{display:block}.tournament-editor-notices>summary{cursor:pointer;color:var(--z-gold-light, #ffd97a);font:18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace)}
.tournament-editor-group-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:10px}
.tournament-editor-group-fields label:last-child{grid-column:1/-1}
.tournament-detail>summary{display:flex;justify-content:space-between;gap:12px;cursor:pointer}
.tournament-detail>summary span{color:color-mix(in srgb, var(--t-card-text) 85%, transparent)}
.tournament-detail>p{margin:7px 0;font:18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace)}
.tournament-subsection{margin-top:8px;padding:7px;border:1px solid var(--t-card-border, #263336);background:var(--t-panel-header-bg, #392b35)}
.tournament-subsection>summary{cursor:pointer;color:var(--z-gold-light, #ffd97a);font:18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace)}
.tournament-roster{margin:8px 0;padding-left:20px}
.tournament-settings-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.tournament-settings-form p{grid-column:1/-1;margin:0;color:color-mix(in srgb, var(--t-card-text) 80%, transparent);font:18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace)}
.tournament-announcement-form{margin-top:10px;padding:8px}
.tournament-editor-actions{margin-top:8px}
@media(max-width:600px){#tournamentForm,.tournament-editor-group,.tournament-editor-group-fields,.tournament-settings-form{grid-template-columns:1fr}.tournament-card-info{grid-template-columns:1fr}.tournament-card-info>small{text-align:left}.tournament-card-meta span{white-space:normal}.tournament-detail>summary{flex-direction:column;gap:3px}.tournament-bracket-visual{max-width:100%}}

/* The tournament browser uses the whole game surface so large brackets remain readable. */
#gameScreen .menu-overlay:has(#tournamentMenu:not([hidden])) {
  position: absolute;
  inset: 0;
  z-index: 20;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 0;
  box-shadow: var(--z-frame);
}
#gameScreen .menu-overlay:has(#tournamentMenu:not([hidden])) .menu-content {
  overscroll-behavior: contain;
  padding: clamp(10px, 2vw, 22px);
}
#gameScreen .menu-overlay:has(#tournamentMenu:not([hidden])) .tournament-lobby {
  min-height: calc(100% - 28px);
  box-sizing: border-box;
}
.tournament-bracket-visual {
  max-height: clamp(260px, calc(100dvh - 280px), 900px);
  overflow: auto;
  align-items: safe center;
  scroll-snap-type: none;
  /* Touch uses the browser's own scrolling (with momentum); a vertical swipe
     that the bracket cannot use still scrolls the page. */
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.tournament-bracket-visual:focus-visible { outline: 2px solid var(--z-gold, #e8b23a); outline-offset: 2px; }
.tournament-bracket-visual.is-dragging,
.tournament-bracket-visual.is-dragging * { cursor: grabbing !important; }
/* Images never start the browser's own drag; a press on them drags the bracket. */
.tournament-bracket-visual img { -webkit-user-drag: none; pointer-events: none; }
.tournament-bracket-visual .bracket-round { flex: 0 0 auto; }
.tournament-bracket-visual button { cursor: pointer; }

/* Round navigation: one button per column, lit while it is on screen. */
.bracket-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 4px; }
.bracket-toolbar.fits { display: none; }
.bracket-jumps { display: flex; flex-wrap: wrap; gap: 6px; }
.bracket-jumps button { min-height: 32px; padding: 4px 10px; font-size: 18px; opacity: .65; }
.bracket-jumps button.is-visible { opacity: 1; }
.bracket-steps { display: flex; align-items: center; gap: 6px; }
.bracket-hint { margin-right: 4px; font-size: 18px; opacity: .8; }
.bracket-steps button { min-width: 40px; min-height: 34px; padding: 0 8px; font-size: 18px; line-height: 1; }
.bracket-steps button:disabled { opacity: .35; }

/* Room between cells so neighbouring names never run together. */
.tournament-bracket-visual { --bracket-column-gap: 34px; --bracket-match-gap: 30px; padding: 12px 12px 16px; }
.bracket-match { gap: 0; }
.bracket-match-status { margin-bottom: 4px; }
.bracket-vs { align-self: center; margin: 4px 0; font-size: 18px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
/* Wide enough for team names at 18px; the right side keeps room for the ↗ / × mark. */
.match-card { width: 250px; padding-right: 34px; }
.team-name { font-size: 18px; line-height: 1.2; }
.tournament-card + .tournament-card { margin-top: 18px; }
@media (max-width: 720px) {
  #gameScreen .menu-overlay:has(#tournamentMenu:not([hidden])) {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    border-width: 0;
  }
  .tournament-bracket-visual { max-height: calc(100dvh - 245px); }
}

/* ===================================================================
   TOURNAMENT CALENDAR
   =================================================================== */
.calendar-section {
  margin: 4px 0 0;
  color: var(--t-panel-text);
  font: 18px/1.6 var(--z-font-title, 'Arcana', 'Pixeloid Sans', monospace);
}

.calendar-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.calendar-card-main { display: grid; gap: 6px; min-width: 0; }
.calendar-card-main :is(h4, p) { margin: 0; overflow-wrap: anywhere; }

.calendar-card-main h4 {
  color: var(--z-gold-light, #ffd97a);
  font: 18px/1.5 var(--z-font-title, 'Arcana', 'Pixeloid Sans', monospace);
}

.calendar-card-main p {
  color: color-mix(in srgb, var(--t-card-text) 85%, transparent);
  font: 18px/1.3 var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
}

.calendar-frequency { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }

.calendar-kind {
  padding: 1px 8px;
  border: 2px solid var(--z-outline, #1e140c);
  background: var(--z-green, #3b9139);
  color: var(--t-card-text);
  box-shadow: var(--z-bevel, none);
}

.calendar-kind[data-kind="weekly"] { background: var(--t-btn-neutral-bg); color: var(--t-btn-neutral-color); }
.calendar-kind[data-kind="monthly"] { background: var(--t-panel-header-bg); color: var(--t-panel-header-color); }
.calendar-kind[data-kind="once"] { background: var(--t-btn-highlight-bg); color: var(--t-btn-highlight-color); }

.calendar-countdown {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 150px;
  padding: 8px 12px;
  border: 3px solid var(--z-gold, #e3ac3c);
  background: var(--t-panel-header-bg, #392b35);
  text-align: center;
}

.calendar-countdown small {
  color: color-mix(in srgb, var(--t-card-text) 80%, transparent);
  font: 18px/1.2 var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
}

.calendar-countdown b {
  color: var(--z-gold-light, #ffd97a);
  font: 18px/1.3 var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
  font-weight: bold;
  white-space: nowrap;
}

.calendar-note {
  margin: 0;
  color: var(--t-panel-text);
  font: 18px/1.3 var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
}

@media (max-width: 520px) {
  .tournament-card-info { grid-template-columns: minmax(0, 1fr); }
  .tournament-card-info > small { max-width: 100%; text-align: left; }
  .calendar-card { grid-template-columns: 1fr; }
}
.tournament-monthdays{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px 10px}

/* ===================================================================
   REGISTRATION TEAMS: MEMBERS, CAPACITY, AND JOIN REQUESTS
   =================================================================== */
.tournament-team-list { display: grid; gap: 6px; margin-top: 12px; }
.tournament-team-list h5 { margin: 0; color: var(--z-gold-light, #ffd97a); font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace); }
.tournament-team-list > p { margin: 0; color: color-mix(in srgb, var(--t-card-text) 80%, transparent); font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace); }
.tournament-team-list ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tournament-team-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 2px solid var(--t-card-border, #263336);
  background: var(--t-card-bg, #79515b);
  color: var(--t-card-text);
  font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
}
.tournament-team-row.is-mine { border-color: var(--z-gold, #e3ac3c); }
.tournament-team-row .team-shield { width: 32px; height: 32px; image-rendering: pixelated; }
.tournament-team-row .team-shield-empty { display: block; background: #ffffff12; }
.tournament-team-row-text { display: grid; gap: 2px; min-width: 0; }
.tournament-team-row-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t-card-text); }
.tournament-team-row-text small, .tournament-team-requested { color: color-mix(in srgb, var(--t-card-text) 80%, transparent); font-size: 18px; font-weight: normal; }
.tournament-team-state { color: var(--z-gold-light); white-space: nowrap; }
.tournament-team-row.is-full .tournament-team-state { color: var(--z-green-light); }
.tournament-team-action { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tournament-request-notice { margin: 10px 0 0; padding: 6px 10px; border: var(--t-btn-danger-border); background: var(--t-btn-danger-bg); color: var(--t-btn-danger-color); font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
  border: var(--t-btn-danger-border);
}
.tournament-team-hint { margin: 0; color: color-mix(in srgb, var(--t-card-text) 80%, transparent); }
.tournament-team-requests { display: grid; gap: 6px; }
.tournament-team-requests h6 { margin: 0; color: var(--z-gold-light, #ffd97a); font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace); }
.tournament-team-request { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* A team with a bye appears in the bracket and advances directly, or receives three points. */
.bracket-match.is-bye .match-card { border-style: dashed; }
.bracket-bye-note { max-width: 250px; color: color-mix(in srgb, var(--t-card-text) 80%, transparent); font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace); }
/* The leader can withdraw until shortly before the tournament starts; afterward, explain why the button is disabled. */
.tournament-quit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Leave team and Withdraw use danger red, including inside menus where the wood theme rule is more specific. */
.tournament-signup-team button.danger[data-action] { background: var(--t-btn-danger-bg); color: var(--t-btn-danger-color); }
.tournament-quit small { flex: 1 1 220px; color: color-mix(in srgb, var(--t-card-text) 80%, transparent); font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace); }
@media (max-width: 600px) {
  .tournament-team-row { grid-template-columns: 32px minmax(0, 1fr); }
  .tournament-team-action { grid-column: 2; justify-content: flex-start; }
}

/* Join requests appear in the leader's Fixed team tab. */
.fixed-team-requests { display: grid; gap: 8px; margin-bottom: 14px; }
.fixed-team-requests[hidden] { display: none; }
.fixed-team-requests h4 { margin: 0; color: var(--t-panel-text); font: 18px/1.6 var(--z-font-title, 'Arcana', 'Pixeloid Sans', monospace); }
/* Help text inside dark fixed-team forms. */
.fixed-team-form p { color: color-mix(in srgb, var(--t-card-text) 80%, transparent); }
.fixed-team-request {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 2px solid var(--z-gold, #e3ac3c);
  background: var(--t-card-bg, #79515b);
  color: var(--t-card-text);
  font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
}
.fixed-team-request span { flex: 1 1 260px; }

/* A corner marker indicates new activity on tournament tabs and the dock button. */
[data-tournament-tab].has-news, #tournamentDockButton.has-news { position: relative; }
[data-tournament-tab].has-news::after,
#tournamentDockButton.has-news::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--z-outline, #1e140c);
  background: var(--z-red-light);
  box-shadow: 0 0 0 1px var(--z-gold);
  animation: tournament-news 1.2s steps(2) infinite;
}
@keyframes tournament-news { 50% { background: var(--z-gold); } }
@media (prefers-reduced-motion: reduce) {
  [data-tournament-tab].has-news::after, #tournamentDockButton.has-news::after { animation: none; }
}

.tournament-check-in { position: fixed; z-index: 10000; }
.tournament-check-in .ready-check-card { width: min(100%, 460px); }
.tournament-check-in .ready-check-actions button { background: var(--t-btn-confirm-bg); color: var(--t-btn-confirm-color); border: var(--t-btn-confirm-border); box-shadow: var(--t-btn-confirm-shadow); }

#gameScreen .world-wrap > .event-notice-sidebar {
  position: absolute; top: 84px; left: 8px; z-index: 125;
  display: flex; align-items: flex-start; filter: drop-shadow(3px 5px 3px #0009);
}
.event-notice-panel {
  box-sizing: border-box; width: min(290px, calc(100vw - 62px)); max-height: min(68vh, 600px);
  padding: 10px; overflow-y: auto; overscroll-behavior: contain;
  border: var(--t-panel-border); background: var(--t-panel-bg); color: var(--t-panel-text);
  box-shadow: var(--z-frame), 5px 5px 0 var(--z-shadow);
}
.event-notice-sidebar[data-open="false"] .event-notice-panel { display: none; }
.event-notice-panel h2 { margin: 2px 4px 10px; color: var(--t-panel-text); font-size: 18px; }
#gameScreen .event-notice-sidebar .tournament-status-badge {
  position: static; box-sizing: border-box; width: 100%; max-width: none;
  margin-bottom: 8px; padding: 6px; box-shadow: none;
}
#gameScreen .event-notice-sidebar .tournament-status-copy :is(b, small, .tournament-status-timer) { font-size: 14px; }
.event-notice-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.event-notice-list li { display: grid; gap: 4px; padding: 8px; border: 2px solid var(--t-card-border); background: var(--t-card-bg); font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.event-notice-list strong { color: var(--t-card-text); }
.event-notice-list time { color: color-mix(in srgb, var(--t-card-text) 80%, transparent); font-size: 12px; }
.event-notice-champion[hidden] { display: none; }
.event-notice-champion { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; padding: 6px; border: 2px solid var(--t-card-selected-border); background: var(--t-card-bg); color: var(--t-card-text); font-size: 14px; }
.event-notice-champion > span { font-size: 23px; }
.event-notice-champion div { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.event-notice-champion small { color: var(--t-card-text); font-size: 12px; }
.event-notice-empty { margin: 8px 4px; color: var(--t-panel-muted); font-size: 15px; }
.event-notice-toggle {
  position: relative; width: 34px; min-height: 54px; padding: 0;
  border: var(--t-panel-border); border-left: 0; border-radius: 0 6px 6px 0;
  background: var(--t-btn-neutral-bg); color: var(--t-btn-neutral-color); font-size: 32px; line-height: 1;
  cursor: pointer; box-shadow: inset 0 0 0 2px var(--t-hud-line);
}
.event-notice-toggle:hover,.event-notice-toggle:focus-visible { background: var(--t-btn-neutral-bg); }
#eventNoticeToggle { background: transparent; border: 0; box-shadow: none; padding: 0; }
#eventNoticeToggle:focus-visible { outline: 2px solid var(--t-panel-text); outline-offset: 3px; }
.event-notice-icon { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1em; height: 1em; line-height: 1; pointer-events: none; }
.event-notice-icon .icon-image { display: block; width: 100%; height: 100%; vertical-align: baseline; }
.event-notice-unread { position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; border: 2px solid var(--z-outline); border-radius: 50%; background: var(--z-red-light); box-shadow: 0 0 5px var(--z-red-light); }
.event-notice-unread[hidden] { display: none; }
@media (max-width: 600px) {
  #gameScreen .world-wrap > .event-notice-sidebar { top: 58px; left: 3px; }
  .event-notice-panel { width: min(250px, calc(100vw - 48px)); max-height: 48vh; }
  .event-notice-list li { font-size: 14px; }
}

/* Keep the handle visible while the panel yields space on narrow or zoomed screens. */
.event-notice-toggle { flex: 0 0 auto; align-self: flex-start; }
.event-notice-panel { flex: 0 1 auto; min-width: 0; }