/* ─────────────────────────── Arcade: a game's HUD ─────────────────────────── */

:root[data-skin="arcade"] {
  --background: 246 60% 97%;
  --foreground: 245 38% 12%;
  --card: 0 0% 100%;
  --card-foreground: 245 38% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 245 38% 12%;
  --primary: 252 88% 60%;
  --primary-foreground: 0 0% 100%;
  --secondary: 246 45% 93%;
  --secondary-foreground: 245 38% 12%;
  --muted: 246 45% 93%;
  --muted-foreground: 246 18% 38%;
  --accent: 246 60% 91%;
  --accent-foreground: 245 38% 12%;
  --destructive: 349 80% 47%;
  --destructive-foreground: 0 0% 100%;
  --border: 246 35% 85%;
  --input: 246 35% 80%;
  --ring: 252 88% 60%;
  --radius: 0.125rem;
  --grid-line: hsl(252 88% 60% / 0.07);
  --font-body: "Barlow", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Chakra Petch", var(--font-body);
  --font-label: "Chakra Petch", var(--font-body);
  --notch: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  --slant: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  --hexagon: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

:root.dark[data-skin="arcade"] {
  --background: 245 33% 7%;
  --foreground: 243 100% 96%;
  --card: 244 35% 12%;
  --card-foreground: 243 100% 96%;
  --popover: 244 35% 12%;
  --popover-foreground: 243 100% 96%;
  --primary: 74 100% 61%;
  --primary-foreground: 245 33% 7%;
  --secondary: 245 32% 17%;
  --secondary-foreground: 243 100% 96%;
  --muted: 245 32% 17%;
  --muted-foreground: 245 37% 74%;
  --accent: 245 30% 21%;
  --accent-foreground: 0 0% 100%;
  --destructive: 349 100% 68%;
  --destructive-foreground: 340 100% 4%;
  --border: 246 28% 21%;
  --input: 246 28% 27%;
  --ring: 74 100% 61%;
  --grid-line: hsl(250 100% 75% / 0.07);
}

:root[data-skin="arcade"] body {
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
}

:root[data-skin="arcade"] .font-display {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

:root[data-skin="arcade"] [data-slot="button"]:is([data-variant="default"], [data-variant="destructive"], [data-variant="secondary"], [data-variant="outline"]) {
  border-radius: 0;
  font-family: var(--font-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Cut corners, except while the keyboard is on it: the cut would hide its ring. */
:root[data-skin="arcade"] [data-slot="button"]:is([data-variant="default"], [data-variant="destructive"], [data-variant="secondary"], [data-variant="outline"]):not(:focus-visible) {
  clip-path: var(--notch);
}
:root[data-skin="arcade"] [data-slot="button"][data-variant="outline"] {
  border-color: hsl(var(--border));
  background-color: hsl(var(--secondary));
}
:root[data-skin="arcade"] [data-slot="button"]:is([data-variant="default"], [data-variant="destructive"]):hover {
  filter: brightness(1.12);
}

:root[data-skin="arcade"] [data-slot="card"] {
  border-radius: 0;
  box-shadow: none;
  /* A bracket on the top left corner, as a HUD frames its panels. */
  background-image: linear-gradient(hsl(var(--primary)), hsl(var(--primary))),
    linear-gradient(hsl(var(--primary)), hsl(var(--primary)));
  background-repeat: no-repeat;
  background-size: 16px 2px, 2px 16px;
}

:root[data-skin="arcade"] [data-slot="badge"] {
  border-radius: 0;
  clip-path: var(--slant);
  padding-inline: 0.6rem;
  font-family: var(--font-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

:root[data-skin="arcade"] [data-slot="input"] {
  border-radius: 0;
  background-color: hsl(var(--card));
}

:root[data-skin="arcade"] [data-slot="tabs-list"] {
  border-radius: 0;
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--card));
}
:root[data-skin="arcade"] [data-slot="tabs-trigger"] {
  border-radius: 0;
  font-family: var(--font-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
:root[data-skin="arcade"] [data-slot="tabs-trigger"][data-state="active"] {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: none;
}

:root[data-skin="arcade"] [data-slot="table"] th {
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
:root[data-skin="arcade"] [data-slot="table"] tbody tr:hover {
  box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.55);
}

:root[data-skin="arcade"] :is([data-slot="overlay"], [data-slot="dialog"], [data-slot="tooltip"]) {
  border-radius: 0;
}
:root[data-skin="arcade"] [data-slot="dialog"] {
  box-shadow: inset 0 3px 0 hsl(var(--primary)), 0 24px 60px -20px rgb(0 0 0 / 0.6);
}

:root[data-skin="arcade"] [data-slot="avatar"] {
  border-radius: 0;
  clip-path: var(--hexagon);
  font-family: var(--font-label);
}

:root[data-skin="arcade"] :is([data-slot="checkbox"], [data-slot="switch"]) {
  border-radius: 0;
}
:root[data-skin="arcade"] [data-slot="switch"] > span {
  border-radius: 0;
}

/* ── The pages' own parts ── */

/* Arcade has no rounded corners at all. */
:root[data-skin="arcade"] *,
:root[data-skin="arcade"] *::before,
:root[data-skin="arcade"] *::after {
  border-radius: 0 !important;
}

:root[data-skin="arcade"] [data-slot="board-column"] {
  background-color: hsl(var(--card) / 0.6);
}

:root[data-skin="arcade"] [data-slot="segmented"] {
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--card));
}
:root[data-skin="arcade"] [data-slot="segmented"] > [aria-pressed="true"] {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

:root[data-skin="arcade"] [data-slot="nav-link"] {
  border-radius: 0;
  font-family: var(--font-label);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
:root[data-skin="arcade"] [data-slot="nav-link"]:is([aria-current="page"], [data-active]) {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: none;
  clip-path: var(--slant);
}
:root[data-skin="arcade"] [data-slot="logo"] {
  border-radius: 0;
  clip-path: var(--notch);
}

:root[data-skin="arcade"] [data-slot="project-icon"] {
  border-radius: 0;
  clip-path: var(--notch);
}

:root[data-skin="arcade"] [data-slot="progress"] {
  border-radius: 0;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 calc(10% - 4px), transparent calc(10% - 4px) 10%);
  mask-image: repeating-linear-gradient(90deg, #000 0 calc(10% - 4px), transparent calc(10% - 4px) 10%);
}
:root[data-skin="arcade"] [data-slot="progress-fill"] {
  border-radius: 0;
  background-color: hsl(var(--primary));
}

:root[data-skin="arcade"] [data-slot="stat"][data-tone] {
  border: 1px solid currentColor;
  border-radius: 0;
  font-family: var(--font-label);
  font-weight: 600;
  letter-spacing: 0.04em;
}
:root[data-skin="arcade"] [data-slot="stat"] [data-slot="stat-value"] {
  font-family: var(--font-label);
  font-weight: 700;
}

:root[data-skin="arcade"] [data-slot="banner"] {
  border-radius: 0;
  clip-path: var(--notch);
}