> ## Documentation Index
> Fetch the complete documentation index at: https://docs.1up.vision/llms.txt
> Use this file to discover all available pages before exploring further.

# Tournament CSS Designer

> Design the look of your tournament overlays and Custom Games with custom CSS. Control team colors, fonts, and layout for Hearts, Points per Round, Best-of Series, and more.

## What is the Tournament CSS Designer?

The Tournament CSS Designer lets you control how your **tournament overlays** and **Custom Games** look on stream by writing **CSS that targets specific classes** rendered by the tournament layer. Basic familiarity with CSS selectors and properties is required.

With it, you can:

* **Change colors, fonts, and spacing** to match your branding.
* **Style teams and players** (names, totals, highlights) via their CSS classes.
* **Adapt each game mode** (Hearts, Points per Round, Best-of Series, Tannenbaum, etc.) to your visual style by targeting its game-type classes.

You do not need to know the internal React components or data structures – this guide focuses on the **CSS classes** and variables you can safely style.

<Tip>
  If you are new to tournaments, start with the main **[Stream Tournaments](/events/tournaments)** page first, then come back here to fine-tune the visuals.
</Tip>

***

## How the Designer Works

### Opening the CSS Designer

<Steps>
  <Step title="Open your tournament">
    In the Vision dashboard, go to **Tournaments** and open the tournament you want to style.
  </Step>

  <Step title="Open the Tournament Designer">
    From the tournament view, go to the **Tournament-Designer** to open the CSS editor and live preview.
  </Step>

  <Step title="Pick a game mode to preview">
    In the Designer, choose which **Custom Game mode** (e.g. Hearts, Points per Round, Best-of Series, Tannenbaum) you want to see in the live preview.
  </Step>

  <Step title="Edit CSS">
    Use the CSS editor on the left to adjust colors, fonts, borders, spacing, and more. Changes are shown immediately in the live preview.
  </Step>

  <Step title="Save your design">
    When you are happy, click **Save changes** to store the CSS with your tournament.
  </Step>
</Steps>

### Using Presets

The Designer comes with several **presets**, including for example *Classic Default Layout*, *Neon Dark*, *Score Sheet*, *Retro Arcade*, *Glass*, and *Cyber Glitch*. A preset is a complete style that you can use as:

* A **ready-to-use theme**, or
* A **starting point** which you copy and then adjust.

You can:

* Select a preset from the dropdown.
* Load its CSS into the editor.
* Tweak colors, fonts, and spacing to match your channel.

***

## Elements & Core CSS Classes

The tournament overlay is built from a set of **core CSS classes**. You will see these in the live preview (via your browser dev tools) and inside the preset CSS. This section explains the main visual roles; a full per-class reference follows in **“Reference: Available CSS Classes”**.

### Tournament View & Game Container

* **`.tournament-view` (tournament view)** – the outer area that contains everything related to the tournament or Custom Game in your overlay.
* **`.custom_game` (game container)** – the box that holds one Custom Game (for example, one Hearts board, one Points-per-Round table, or one Best-of match view).

You typically use these for:

* Backgrounds (solid, gradients, glassmorphism).
* Padding and spacing around the whole game.
* Global fonts and base text color.

### Teams

Each team is rendered as a **team block** using:

* **`.team-color`** – small bar or circle with the team color.
* **`.team-name`** – team name text.
* **`.team-total`** (and sometimes `.team-points`) – overall points or wins, depending on the game mode.

Design ideas:

* Use the team color as a border or accent around the team block.
* Make winning or active teams brighter and losing/inactive teams slightly dimmed.
* Align names and totals in a way that fits your layout (e.g. name left, total right).

### Players

Inside each team you see **players**, typically using:

* **`.player-name`** – label for each individual participant.
* **`.player-total` / `.player-points`** – the sum of their current points.
* **`.player-point`** – per-round points, depending on the mode.
* **`.player-hearts` / `.heart`** – hearts in Hearts mode.

Design ideas:

* Use badges or small chips for totals.
* Stack player name and score vertically on small layouts.
* Highlight active players subtly (e.g. a stronger border or slightly brighter background).

### Game Mode Sections

Depending on the selected Custom Game mode, you will see additional sections:

* **Hearts** – hearts or lives displayed next to each player or team.
* **Points per Round** – columns of round scores plus a total.
* **Best-of Series** – per-round win markers plus a total match winner indicator.
* **Tannenbaum** – a Kegeln-inspired (German-style bowling) tree/diamond-shaped grid of target numbers that fill in as they are completed.

You can style:

* The shape and size of hearts or icons (by targeting `.heart` and related classes).
* The layout of columns and rows for scores (by targeting the relevant container classes per mode).
* and many more

***

## Team Colors and CSS Variables

To make styling easier, the system exposes **CSS variables** that you can use anywhere inside the tournament view.

### Per-Team Variables

For each team, the following variables are available:

* `--team-color` – the main color for this team (used for borders, accents, badges, etc.).
* `--team-0-color`, `--team-1-color`, … – per-team colors on the root element.
* `--team-0-name`, `--team-1-name`, … – team names as text values.

Typical usage:

* Backgrounds: `background-color: var(--team-color);`
* Borders: `border-color: var(--team-color);`
* Text accents: `color: var(--team-color);`

You can also reference the numbered team color variables (`--team-0-color`, `--team-1-color`, …) if you are designing a layout that always shows a fixed number of teams in known positions.

### Player Name Variables

For each player, the system exposes name variables like:

* `--team-0-member-0-name`
* `--team-0-member-1-name`
* `--team-1-member-0-name`

While you will not usually write selectors for individual players, these variables make it possible to:

* Inject names into `content` for decorative labels.
* Build advanced themes where specific positions in the layout represent specific players.

### State Classes

The overlay uses **state classes** to indicate things like:

* Active vs. inactive team or player (`.team-active`, `.team-inactive`, `.player-active`, `.player-inactive`).
* Winning vs. losing team (`.team-winner`, `.team-loser` in Best-of).
* Completed vs. incomplete cells (e.g. `.complete` / `.incomplete` in Tannenbaum).

These class names are important: your CSS should reference the exact state classes you want to style. For example:

* Make active items brighter or larger by styling `.team-active` or `.player-active`.
* Fade out inactive teams or players via `.team-inactive` and `.player-inactive`.
* Add a glow or badge around winners using `.team-winner` or `.winner-indicator`.

You can see concrete examples of how these classes are used in the preset CSS and in the **Reference: Available CSS Classes** section below.

***

## Reference: Available CSS Classes

For advanced themes, you can target the same classes that the built-in styles use. This section summarizes the most important ones.

### Global Containers

* **`.tournament-view`** – top-level container for all Custom Games in the overlay.
* **`.custom_game`** – main container of a single Custom Game (one game mode box).
  * **`.custom_game.game-active`** – the active game mode (visible).
  * **`.custom_game.game-inactive`** – inactive game modes (hidden or scaled down in the overlay).
* **Transform origin / position classes** – applied based on the designer’s position setting (e.g. bottom-left, center, top-right) and control where the game is anchored.
* **Game meta classes on the game container**:
  * `game_index_${index}` – index of the game in the list (0-based).
  * `game_type_${normalizeString(game.game)}` – normalized game identifier, e.g.:
    * `game_type_pointsround`
    * `game_type_bestof`
    * `game_type_hearts`
    * `game_type_tannenbaum`
  * `game_${normalizeString(game.name)}` – normalized display name, useful for theme-specific variants.

### Global Team & Player Classes

* **`.team-container`** – wrapper for a team (header plus players).
  * Status classes (depending on mode):
    * `.team-active`
    * `.team-inactive`
    * `.team-throwing`
    * `.team-receiving`
    * `.team-waiting`
* **`.team-row`** – horizontal row with team info (color, name, points).
  * `.team-row.team-active` – emphasized version of the active team row.
  * `.team-row.team-inactive` – dimmed version of inactive team rows.
* **`.team-color`** – small color indicator using `var(--team-color)`.
* **`.team-name`** – text container for the team name (`data-team-name` attribute holds the actual name).
* **`.player-row`** – container for a list of players in a team.
* **`.player-col`** – single player cell.
  * `.player-col.player-active`
  * `.player-col.player-inactive`
* **`.player-color`** – color overlay for a player, usually tinted by the team color.
* **`.player-name`** – text container for the player name.

Helpful data attributes:

* `data-team-name` – logical team name.
* `data-points` – numeric point values (team/player/round).
* `data-win` – `"true"` or `"false"` for round win/loss in Best-of.

### Tournament Scoreboard (Elimination & Group Views)

The **tournament scoreboard** overlay (used for group standings and elimination scoreboards) reuses the global team/player structure wherever possible, so your existing styles for `.team-container`, `.team-row`, `.team-name`, `.team-points`, and `.team-total` also apply here. The avatar area intentionally does **not** use `.player-row` / `.player-col` so it stays independent from per-player layouts in other modes.

Additional, scoreboard-specific classes are only used where necessary:

* **`.tournament-scoreboard`** – outer container for the scoreboard list.
* **`.scoreboard-team`** – per-row helper class for a single team entry (in addition to `.team-container`).
* **`.scoreboard-team-profiles`** – avatar strip for all players in a team.
* **`.scoreboard-team-profile`** – wrapper around a single avatar.
* **`.scoreboard-team-avatar`** – actual avatar image for a player.
* **`.scoreboard-team-avatar-placeholder`** – fallback placeholder when no picture is available.
* **`.scoreboard-team-name`** – main team name line (combined captain + members, inside `.team-name`).
* **`.scoreboard-team-captain`** – first player’s name (visually highlighted as captain).
* **`.scoreboard-team-members`** – container for remaining player names of a team.
* **`.scoreboard-team-member-name`** – span around each non-captain name (also marked as `.player-name`).
* **`.team-member-separator`** – separator between names (e.g. `" & "` or `", "`).
* **`.scoreboard-team-points`** – container for the team’s points column (also `.team-points`).
* **`.scoreboard-team-points-value`** – numeric total points for the team (also `.team-total`).

Example styling:

```css theme={null}
.tournament-scoreboard {
  gap: 8px;
}

.scoreboard-team.team-container {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
}

.scoreboard-team-avatar {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.scoreboard-team-avatar-placeholder {
  font-weight: 600;
}

.scoreboard-team-captain {
  font-weight: 700;
  color: var(--team-color, #4acf44);
}

.scoreboard-team-members .team-member-separator {
  opacity: 0.8;
}

.scoreboard-team-points-value.team-total {
  font-variant-numeric: tabular-nums;
}
```

### Hearts (`game_type_hearts`)

* **`.hearts-container`** – vertical list of all teams in hearts mode.
* **`.team-container.team_id_{teamId}`** – per-team wrapper (also used in other modes).
* **`.player-col.player_id_{playerId}`** – per-player wrapper.
* **`.player-hearts`** – container for hearts belonging to a player.
* **`.heart`** – individual heart:
  * `.heart.heart-on` – active heart.
  * `.heart.heart-off` – inactive heart.

### Points Round (`game_type_pointsround`)

* **`.game_type_pointsround`** – scope for points-round styles.
* **`.game_type_pointsround .team-name`** – team name in this mode.
* **`.game_type_pointsround .team-container`** – team container with:
  * `team-active`
  * `team-inactive`
  * `no-active-player`
* **`.game_type_pointsround .team-active .player-row`** – expanded player rows.
* **`.game_type_pointsround .team-inactive .player-row`** – collapsed player rows.
* **`.team-points .team-point`** – per-round scores for a team.
  * `.team-point.has-points` – round with non-zero points.
* **`.team-total`** – total team points across rounds.
* **`.player-point`** – player’s round score.
* **`.player-total`** – player’s total points.
* **`.game_boxautomat`** – special variant:
  * `.game_boxautomat .player-total` – hidden totals.
  * `.game_boxautomat .player-point` – focused round points.
  * `.game_boxautomat .team-points .team-point` – iconified team points.

### Best Of (`game_type_bestof`)

* **`.game_type_bestof`** – scope for Best-of styles.
* **`.game_type_bestof .team-name`** – team name styling.
* **`.game_type_bestof .team-row:after`** – disables the default underline in this mode.
* **`.winner-indicator`** – indicator before the team name:
  * `.game_type_bestof .team-winner .winner-indicator`
  * `.game_type_bestof .team-loser .winner-indicator`
* **`.versus-container`** – box around both teams in a match.
  * `.versus-container .team-container.team-winner`
  * `.versus-container .team-container.team-loser`
* **`.team-win-icon`** – round result icon:
  * `.team-win-icon-win`
  * `.team-win-icon-lose`
* **`.matches-container`** – all matches:
  * `.matches-container.active-match`
  * `.matches-container.no-active-match`
* **`.match-container`** – single match container:
  * `.match-container.match-active`
  * `.active-match .match-container:not(.match-active)` – collapsed matches.
* **`.team-points`**, **`.team-win`**, **`.team-total`**, **`.team-total-points`** – per-round and total score containers.
* **`.no-matches-container`**, **`.no-matches-text`** – empty-state view when no matches are configured.

### Tannenbaum (`game_type_tannenbaum`)

* **`.tannenbaum-wrapper`** – wrapper used in several presets for the Tannenbaum layout.
* **`.team-container.team_id_${teamId}`** – per-team container with:
  * `team-active`
  * `team-inactive`
* **`.tannenbaum-container.player-row`** – outer container for the tree/diamond rows.
* **`.player-col`** – each cell in the tree layout.
* **`.player-points`** – value inside each cell.
* **`.player-point`** – target number (1–9) for that cell.
  * `.player-point.complete`
  * `.player-point.incomplete`

Use this reference together with the live preview: inspect elements in your browser dev tools, find the classes you care about (for example `.game_type_pointsround .team-total` or `.hearts-container .heart-on`), and then add or override CSS rules in the Tournament Designer to achieve your desired look.

***

## Styling Best Practices

To keep your overlays readable and robust, follow these guidelines:

* **Focus on visuals, not structure** – change colors, fonts, borders, radiuses, shadows, and spacing, but avoid changing core layout rules like `display`, `position`, or `height` on critical containers unless you know what you’re doing.
* **Keep important information visible** – make sure team names, scores, and game status (e.g. current round, winner) remain clear and high-contrast.
* **Use team colors consistently** – rely on `var(--team-color)` for all team-related accents so the theme stays coherent when you change team colors in the app.
* **Test different game modes** – switch the preview between Hearts, Points per Round, Best-of Series, and Tannenbaum to ensure your CSS works well in each mode.
* **Start from a preset** – instead of styling from scratch, copy a preset that is close to your desired look and adjust step by step.

<Tip>
  If you break the layout, you can always **reload a preset** or clear your CSS to get back to a working baseline.
</Tip>

***

## Where to Go Next

* Learn how to set up and run events on the main **[Stream Tournaments](/events/tournaments)** page.
* Experiment with different Custom Game modes (Hearts, Points per Round, Best-of Series, Tannenbaum) in the Tournament Designer.
* Share your favorite designs with your community and reuse them across multiple tournaments.