:root { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body[data-brand-page="competitions"] {
  margin: 0;
  min-height: 100vh;
  color: var(--af-cream);
  background: radial-gradient(ellipse at 80% 0, #36235c, transparent 44rem), var(--af-night);
}
.deck-header, .deck-bar, .deck-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}
.deck-header { justify-content: space-between; padding: .75rem clamp(.75rem, 4vw, 3rem); border-bottom: 1px solid #b59aff44; }
.deck-header .brand-wordmark { display: inline-flex; align-items: center; gap: .5rem; font-size: clamp(1rem, 3vw, 1.4rem); }
.deck-header .btn { display: inline-flex; align-items: center; }
.deck { width: min(64rem, 100%); margin: auto; display: grid; gap: 1rem; padding: clamp(.75rem, 3vw, 2rem); }
.deck h1, .deck h2, .deck p { margin: 0; }
.deck h1 { font-size: clamp(1.95rem, 7vw, 4rem); line-height: 1.05; }
.deck h2 { font-size: clamp(1.2rem, 4vw, 1.7rem); }
.deck-hero, .deck-panel {
  min-width: 0;
  border-radius: 1.1rem;
  border: 1px solid #b59aff55;
  box-shadow: inset 0 1px #fff2, 0 12px 40px #0a071947;
  background: var(--af-glass);
  padding: clamp(.9rem, 3vw, 1.8rem);
  display: grid;
  gap: .9rem;
}
.deck-hero {
  background:
    linear-gradient(95deg, #1e1642 20%, #1e164299 100%),
    repeating-linear-gradient(135deg, #4e3b80 0 2px, #2a1e54 2px 15px);
  border-top: 3px solid var(--af-mint);
}
.deck-hero > p { max-width: 42ch; color: var(--af-muted); }
.deck-badge, .deck-facts span, .deck-kicker {
  font: 700 .78rem/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .04em;
}
.deck-badge { width: fit-content; padding: .3rem .55rem; border: 1px solid #7cf8d26b; border-radius: .4rem; color: var(--af-mint); background: #15142c; }
.deck-badge i { display: inline-block; width: .5em; height: .5em; border-radius: 50%; margin-right: .25em; background: currentColor; }
.deck-facts { display: flex; flex-wrap: wrap; gap: .45rem; }
.deck-facts span { color: var(--af-cream); background: #100c29bc; border: 1px solid #b59aff50; border-radius: .45rem; padding: .35rem .55rem; }
.deck-kicker { color: var(--af-gold); }
.deck-bar { justify-content: space-between; }
.deck-notice { color: var(--af-muted); overflow-wrap: anywhere; }
.deck-notice:empty { display: none; }
.deck-notice[data-error="true"] { color: var(--af-coral); }
.deck-games { margin: 0; padding: 0; border: 0; min-inline-size: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .75rem; }
.deck-game { display: flex; align-items: center; gap: .75rem; background: var(--af-glass-deep); border: 1px solid #b59aff65; border-radius: .75rem; padding: .75rem; cursor: pointer; }
.deck-game:has(:checked) { border-color: var(--af-mint); box-shadow: 0 0 0 1px var(--af-mint); }
.deck-game img { width: 2.75rem; height: 2.75rem; }
.deck-game span { min-width: 0; overflow-wrap: anywhere; }
.deck-game input { flex: none; }
.deck summary { cursor: pointer; color: var(--af-mint); padding-block: .4rem; }
.deck details p + p { margin-top: .6rem; }
.deck-invite { padding: .75rem; border: 1px solid #b59aff50; background: var(--af-glass-deep); border-radius: .65rem; }
.deck-invite label { display: block; margin-bottom: .4rem; }
.deck-invite input { flex: 1 1 12rem; min-width: 0; }
.deck-board {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: clamp(2px, 1vw, 6px);
  width: min(100%, 30rem);
  background: #100c29;
  border: 1px solid #b59aff65;
  border-radius: .8rem;
  padding: clamp(.3rem, 1vw, .65rem);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.deck-board .deck-cell {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  border-radius: .32rem;
  border: 1px solid #786e9b;
  background: #211b43;
  padding: 0;
  touch-action: manipulation;
}
.deck-board .deck-cell[data-legal="true"] { border-color: var(--af-mint); cursor: pointer; }
.deck-board .deck-cell[data-legal="true"]::before { content: ''; width: 25%; aspect-ratio: 1; border-radius: 50%; background: #7cf8d279; }
.deck-board .deck-cell[data-piece="1"]::before, .deck-board .deck-cell[data-piece="2"]::before {
  content: '';
  width: 72%;
  aspect-ratio: 1;
  background: var(--af-gold);
  border-radius: 50%;
  box-shadow: inset 0 2px 4px #fff8, inset 0 -2px 3px #0006;
}
.deck-board .deck-cell[data-piece="2"]::before { background: var(--af-mint); border-radius: 24%; transform: rotate(45deg) scale(.83); }
.deck-board .deck-cell:disabled { opacity: 1; }
.deck-board .deck-column { min-height: 44px; padding: .2rem; }
.deck-piece { margin-bottom: .5rem !important; }
.deck-history { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.deck-history li { border: 1px solid #b59aff42; border-radius: .65rem; background: var(--af-glass-deep); padding: .6rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .55rem; }
.deck-history button { min-height: 44px; }
.deck-footer { color: var(--af-muted); font-size: .9rem; }
.deck-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 420px) {
  .deck-header { gap: .5rem; }
  .deck-header .btn { padding-inline: .65rem; }
  .deck-hero, .deck-panel { border-radius: .8rem; }
}
@media (forced-colors: active) {
  .deck-board .deck-cell[data-piece="1"]::before { background: CanvasText; }
  .deck-board .deck-cell[data-piece="2"]::before { background: LinkText; }
}