*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Comic Neue (SIL OFL, fonts/OFL.txt) for clown mode on devices without Comic Sans.
   Only downloaded when a device actually falls back to it. */
@font-face {
  font-family: "Comic Neue";
  src: url("fonts/comic-neue-400.woff2") format("woff2");
  font-weight: 100 400;
  font-display: swap;
}

@font-face {
  font-family: "Comic Neue";
  src: url("fonts/comic-neue-700.woff2") format("woff2");
  font-weight: 500 900;
  font-display: swap;
}

/* Färglägen: set as data-theme on <html> (by an inline script in <head>, so the page
   never flashes the wrong one) and switched by theme.js. The wheel and the remote read
   these variables too. Objects like the hat's slips and the lever keep their colours. */
:root {
  color-scheme: dark;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #111;
  --fg: #fff;
  --surface: #1a1a1a;     /* text area, hover, reel window */
  --border: #333;
  --muted: #888;          /* inactive tabs and methods */
  --subtle: #666;         /* secondary actions */
  --faint: #555;          /* placeholders, headings, history details */
  --dim: #444;            /* disabled text */
  --text-soft: #aaa;      /* history names */
  /* The rest of the site theme (see the inline block), used here by the site menu */
  --rule: #222;
  --secondary: #999;
  --bright: #ccc;
  --series-1: #3987e5;    /* statistics bars; checked against each theme's --bg */
  --accent-bg: #fff;      /* main button, selected method */
  --accent-fg: #111;
  --accent-hover: #ddd;
  --spotlight-bg: rgba(17, 17, 17, 0.85);
  --spotlight-glow: rgba(255, 255, 255, 0.35);
  --lever-mount: #2a2a2a;
  --lever-mount-border: #444;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f6f4;
  --fg: #111;
  --surface: #fff;
  --border: #d4d4d0;
  --muted: #6b6b6b;
  --subtle: #777;
  --faint: #8f8f8f;
  --dim: #bdbdb8;
  --text-soft: #444;
  --rule: #e6e6e2;
  --secondary: #555;
  --bright: #222;
  --series-1: #2a78d6;
  --accent-bg: #111;
  --accent-fg: #fff;
  --accent-hover: #333;
  --spotlight-bg: rgba(246, 246, 244, 0.88);
  --spotlight-glow: rgba(0, 0, 0, 0.12);
  --lever-mount: #e2e2de;
  --lever-mount-border: #c4c4bf;
}

:root[data-theme="clown"] {
  color-scheme: light;
  --font: "Comic Sans MS", "Comic Neue", "Chalkboard SE", "Marker Felt", cursive;
  --bg: #fff6d5;
  --fg: #1d1a5e;
  --surface: #fff;
  --border: #f4a7b9;
  --muted: #7b4fa0;
  --subtle: #d81b60;
  --faint: #a1887f;
  --dim: #d7c9a0;
  --text-soft: #1d1a5e;
  --rule: #f9d0da;
  --secondary: #7b4fa0;
  --bright: #1d1a5e;
  --series-1: #2a78d6;
  --accent-bg: #e53935;
  --accent-fg: #fff;
  --accent-hover: #ff7043;
  --spotlight-bg: rgba(255, 246, 213, 0.9);
  --spotlight-glow: rgba(229, 57, 53, 0.35);
  --lever-mount: #8e24aa;
  --lever-mount-border: #6a1b9a;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 2rem;
}

main {
  width: 100%;
  max-width: 480px;
  /* Lets the method row and the history adapt to the space they actually get */
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

h1 {
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-align: center;
}

textarea {
  width: 100%;
  min-height: 180px;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}

textarea::placeholder {
  color: var(--faint);
}

textarea:focus {
  border-color: var(--subtle);
}

button {
  background: var(--accent-bg);
  color: var(--accent-fg);
  border: none;
  border-radius: 6px;
  padding: 0.75rem 1.5rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}

button:hover {
  background: var(--accent-hover);
}

button:disabled {
  background: var(--border);
  color: var(--subtle);
  cursor: default;
}

#result {
  text-align: center;
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#result span {
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--fg);
  opacity: 0;
  transition: opacity 0.25s;
}

#result span.visible {
  opacity: 1;
}

#result span.landing {
  opacity: 1;
  color: var(--fg);
}

#group-bar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#group-tabs {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}

#group-tabs::-webkit-scrollbar {
  display: none;
}

.group-tab {
  flex-shrink: 0;
  max-width: 12rem;
  margin-bottom: -1px;
  background: transparent;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  padding: 0.6rem 0.9rem;
  font-size: 0.75rem;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-tab:hover {
  background: var(--surface);
  color: var(--fg);
}

.group-tab[aria-selected="true"] {
  color: var(--fg);
  border-bottom-color: var(--fg);
}

.group-tab.group-add {
  font-size: 1rem;
  padding: 0.4rem 0.8rem;
}

.group-tab:disabled {
  background: transparent;
  color: var(--dim);
}

.group-tab[aria-selected="true"]:disabled {
  color: var(--muted);
  border-bottom-color: var(--muted);
}

#group-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem 1rem;
}

@container (max-width: 380px) {
  #group-actions {
    column-gap: 0.75rem;
  }

  #group-actions button {
    letter-spacing: 0.03em;
  }
}

#group-actions button {
  white-space: nowrap;
  background: none;
  color: var(--subtle);
  padding: 0;
  font-size: 0.7rem;
  font-weight: 400;
}

#group-actions button:hover {
  color: var(--fg);
}

#group-actions #toggle-names {
  margin-right: auto;
}

/* Metoder: vilka dragningsmetoder gruppen använder. Fil: export och import. */
#method-settings,
#file-settings {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem 0.9rem 0.75rem;
}

#method-settings legend,
#file-settings legend {
  padding: 0 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#method-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

#method-list label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--text-soft);
  cursor: pointer;
}

#method-list input {
  accent-color: var(--accent-bg);
  cursor: pointer;
}

#method-list input:disabled,
#method-list input:disabled + * {
  cursor: default;
}

#file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#file-actions button {
  background: none;
  color: var(--text-soft);
  border: 1px solid var(--border);
  padding: 0.45rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 400;
}

#file-actions button:hover {
  background: var(--surface);
  color: var(--fg);
}

#file-actions button:disabled {
  background: none;
  color: var(--border);
}

.file-hint {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--faint);
}

#mode-switch button[hidden] {
  display: none;
}

/* Namnlistan dold: ge hjulet och hatten mer plats */
main.names-hidden #names {
  display: none;
}

main.names-hidden #wheel-wrap,
main.names-hidden #remote-wrap {
  width: 100%;
}

main.names-hidden #hat-stage.active {
  height: 360px;
}

main.names-hidden #hat-scene {
  transform: scale(1.5);
}

#group-actions button:disabled {
  background: none;
  color: var(--border);
}

/* The 1px gaps show the border colour behind the buttons as dividers, which also works
   when a narrow row wraps onto two lines. */
#mode-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

#mode-switch button {
  flex: 1 1 auto;
  white-space: nowrap;
  background: var(--bg);
  color: var(--muted);
  border-radius: 0;
  padding: 0.6rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 400;
}

/* Small phones: tighter, so the whole row still fits on one line where it can */
@container (max-width: 380px) {
  #mode-switch button {
    padding-inline: 0.35rem;
    letter-spacing: 0.03em;
  }
}

#mode-switch button:hover {
  background: var(--surface);
  color: var(--fg);
}

#mode-switch button[aria-pressed="true"] {
  background: var(--accent-bg);
  color: var(--accent-fg);
}

#mode-switch button:disabled {
  background: var(--bg);
  color: var(--dim);
}

#mode-switch button[aria-pressed="true"]:disabled {
  background: var(--border);
  color: var(--muted);
}

/* Slumpa: markeringen hoppar mellan metoderna innan dragningen */
#mode-switch button.shuffle-hit,
#mode-switch button.shuffle-hit:disabled {
  background: var(--accent-bg);
  color: var(--accent-fg);
}

#mode-switch button.shuffle-done {
  animation: shuffle-done 0.35s ease-in-out 2;
}

@keyframes shuffle-done {
  50% { background: #ffd93d; }
}

#stage {
  transition: opacity 0.3s;
}

#stage.shuffling {
  opacity: 0.25;
}

.stage-panel {
  display: none;
  position: relative;
  justify-content: center;
}

.stage-panel.active {
  display: flex;
}

/* Lyckohjul */
#wheel-wrap {
  position: relative;
  width: min(320px, 100%);
  aspect-ratio: 1;
}

#wheel {
  display: block;
  width: 100%;
  height: 100%;
  /* Dragging spins the wheel instead of scrolling the page. */
  touch-action: none;
}

/* Hjulet, hatten och spaken går att klicka på som alternativ till knappen */
main.can-pick #wheel,
main.can-pick #hat,
main.can-pick #remote {
  cursor: pointer;
}

main.can-pick #wheel.dragging,
main.can-pick #remote.dragging {
  cursor: grabbing;
}

#wheel-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 24px solid var(--fg);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
  z-index: 1;
}

/* Fjärrkontrollen */
#remote-wrap {
  width: min(320px, 100%);
  aspect-ratio: 1;
}

#remote {
  display: block;
  width: 100%;
  height: 100%;
  /* Dragging spins the remote instead of scrolling the page. */
  touch-action: none;
}

/* Hatten */
#hat-stage.active {
  height: 240px;
  overflow: hidden;
}

#hat-scene {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 240px;
  transform-origin: 50% 100%;
}

#hat {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 200px;
  height: 170px;
  margin-left: -100px;
  transform-origin: 50% 100%;
  z-index: 2;
  transition: transform 0.2s;
}

main.can-pick #hat:hover {
  transform: rotate(-4deg);
}

#hat.shaking {
  animation: hat-shake 0.25s ease-in-out 6;
}

@keyframes hat-shake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}

#hat-slips {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hat-slip {
  position: absolute;
  left: 50%;
  top: 110px;
  width: 64px;
  height: 20px;
  margin-left: -32px;
  background: #e8e0c8;
  color: #333;
  font-size: 0.6rem;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  animation: slip-peek 0.7s ease-in-out var(--delay) both;
}

@keyframes slip-peek {
  0%, 100% { transform: translate(var(--dx), 0) rotate(var(--rot)); }
  50% { transform: translate(var(--dx), -55px) rotate(calc(var(--rot) * -1)); }
}

#hat-note {
  position: absolute;
  left: 50%;
  top: 110px;
  width: 100px;
  height: 40px;
  transform: translate(-50%, 0) rotate(-3deg);
  opacity: 0;
  background: #f3ecd8 linear-gradient(to bottom, transparent 48%, rgba(0, 0, 0, 0.18) 50%, transparent 52%);
  color: #111;
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: transform 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.15), opacity 0.2s, width 0.45s ease, height 0.45s ease;
}

#hat-note.risen {
  opacity: 1;
  transform: translate(-50%, -100px) rotate(2deg);
}

#hat-note.open {
  width: min(280px, 100%);
  height: 64px;
  background-image: none;
  transform: translate(-50%, -100px) rotate(0);
}

#hat-note span {
  max-width: 100%;
  padding: 0 1rem;
  font-size: 1.4rem;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.3s 0.25s;
}

#hat-note.open span {
  opacity: 1;
}

/* Enarmad bandit */
#slot-machine {
  display: flex;
  width: 100%;
}

#reel-box {
  position: relative;
  flex: 1;
  min-width: 0;
}

#reel-window {
  height: 224px;
  overflow: hidden;
  background: var(--surface);
  border-radius: 6px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}

#reel {
  will-change: transform;
}

.reel-item {
  height: 56px;
  line-height: 56px;
  padding: 0 1rem;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reel-item.win {
  color: var(--fg);
}

#reel-frame {
  position: absolute;
  left: 0;
  right: 0;
  top: 84px;
  height: 56px;
  border-top: 1px solid var(--faint);
  border-bottom: 1px solid var(--faint);
  pointer-events: none;
}

/* Spaken: armen fälls genom vridpunkten med scaleY, kulan följer med */
#lever,
#lever:hover,
#lever:disabled {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 224px;
  background: none;
  padding: 0;
  border-radius: 0;
  cursor: grab;
  touch-action: none;
}

#lever:active {
  cursor: grabbing;
}

#lever:disabled {
  cursor: default;
}

#lever-mount {
  position: absolute;
  left: 0;
  top: 92px;
  width: 30px;
  height: 40px;
  background: var(--lever-mount);
  border: 1px solid var(--lever-mount-border);
  border-left: none;
  border-radius: 0 6px 6px 0;
}

#lever-arm {
  position: absolute;
  left: 30px;
  top: 20px;
  width: 8px;
  height: 92px;
  margin-left: -4px;
  background: linear-gradient(to right, #666, #ddd 40%, #888);
  border-radius: 4px;
  transform-origin: 50% 100%;
}

#lever-knob {
  position: absolute;
  left: 30px;
  top: 6px;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  background: radial-gradient(circle at 35% 35%, #ff8a80, #b3261e 55%, #6d1510);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

#lever:disabled #lever-knob {
  filter: grayscale(0.6) brightness(0.7);
}

#history {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#history-tools {
  display: flex;
  gap: 1rem;
}

#history-tools button,
#history-more {
  background: none;
  color: var(--subtle);
  padding: 0;
  font-size: 0.7rem;
  font-weight: 400;
}

#history-tools button:hover,
#history-more:hover {
  background: none;
  color: var(--fg);
}

#history-more {
  align-self: flex-start;
  margin-left: 2.25rem; /* lines up with the names */
}

#history-more[hidden] {
  display: none;
}

/* Slå ihop / Ersätt / Avbryt när historik importeras */
#import-dialog {
  margin: auto; /* the reset above removes the default centring */
  max-width: min(24rem, calc(100vw - 2rem));
  padding: 1.25rem;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font);
}

#import-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

#import-dialog p {
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.5;
}

#import-dialog-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

#import-dialog-buttons button {
  padding: 0.55rem 1rem;
  font-size: 0.75rem;
}

#import-dialog-buttons button:not([value="merge"]) {
  background: none;
  color: var(--text-soft);
  border: 1px solid var(--border);
}

#import-dialog-buttons button:not([value="merge"]):hover {
  background: var(--bg);
  color: var(--fg);
}

#history h2 {
  font-size: 0.75rem;
  font-weight: 400;
}

/* Rubriken fäller ihop och ut historiken */
#toggle-history {
  background: none;
  color: var(--faint);
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0.1em;
  transition: color 0.15s;
}

#toggle-history::after {
  content: " \2212";
}

#toggle-history[aria-expanded="false"]::after {
  content: " +";
}

#toggle-history:hover {
  background: none;
  color: var(--fg);
}

#history ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

#history ol[hidden] {
  display: none;
}

#history li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--text-soft);
}

#history li .rank {
  font-size: 0.7rem;
  color: var(--dim);
  width: 1.5rem;
  text-align: right;
  flex-shrink: 0;
}

#history li .hist-name {
  flex: 1;
}

#history li .hist-mode,
#history li .hist-date {
  font-size: 0.75rem;
  color: var(--faint);
  flex-shrink: 0;
}

/* Uteslutna val: kvar i listan, men räknas inte */
#history li.excluded .hist-name,
#history li.excluded .hist-mode,
#history li.excluded .hist-date {
  text-decoration: line-through;
  opacity: 0.45;
}

#history li .hist-exclude {
  flex-shrink: 0;
  background: none;
  color: var(--dim);
  padding: 0 0.25rem;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
}

#history li .hist-exclude:hover,
#history li .hist-exclude:focus-visible {
  background: none;
  color: var(--fg);
}

#history li .hist-exclude:disabled {
  background: none;
  color: var(--border);
}

#result span.excluded {
  text-decoration: line-through;
  opacity: 0.45;
}

#toggle-stats[aria-pressed="true"] {
  color: var(--fg);
}

/* Statistik: samma rubrik som historiken, i stället för listan */
#history-stats {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

#history-stats[hidden] {
  display: none;
}

#stats-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--faint);
}

#stats-controls select {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  font: inherit;
  font-size: 0.8rem;
}

#stats-summary {
  color: var(--muted);
}

#stats-content {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

#history-stats caption {
  text-align: left;
  padding-bottom: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.stat-bars {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.stat-bars th {
  width: 35%;
  padding: 0.2rem 0.75rem 0.2rem 0;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Thin bars, square at the baseline and rounded at the value end */
.bar {
  height: 10px;
  background: var(--series-1);
  border-radius: 0 4px 4px 0;
}

.bar-value {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.stat-matrix-wrap {
  overflow-x: auto;
}

.stat-matrix {
  border-collapse: collapse;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.stat-matrix th,
.stat-matrix td {
  padding: 0.25rem 0.6rem;
  text-align: right;
  font-weight: 300;
  white-space: nowrap;
}

.stat-matrix thead th {
  font-size: 0.7rem;
  color: var(--faint);
  border-bottom: 1px solid var(--border);
}

.stat-matrix th:first-child {
  padding-left: 0;
  text-align: left;
}

.stat-matrix tbody th {
  color: var(--text-soft);
}

.stat-matrix td {
  color: var(--fg);
}

.stat-matrix td.zero {
  color: var(--dim);
}

.stat-matrix td:last-child,
.stat-matrix thead th:last-child {
  color: var(--muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Ångra efter en dragning */
#undo-pick {
  align-self: center;
  margin-top: -1rem;
  background: none;
  color: var(--subtle);
  border: 1px solid var(--border);
  padding: 0.4rem 0.9rem;
  font-size: 0.7rem;
  font-weight: 400;
}

#undo-pick:hover {
  background: var(--surface);
  color: var(--fg);
}

#undo-pick[hidden] {
  display: none;
}

/* Narrow: method and date go on a small line under the name, which gets the full width */
@container (max-width: 420px) {
  #history li {
    display: grid;
    grid-template-columns: 1.5rem 1fr auto auto;
    column-gap: 0.75rem;
  }

  #history li .hist-name {
    grid-column: 2 / 4;
  }

  #history li .hist-exclude {
    grid-column: 4;
    grid-row: 1 / span 2;
    align-self: center;
  }

  #history li .hist-mode {
    grid-column: 2;
  }

  #history li .hist-date {
    grid-column: 3;
  }

  #history ol {
    gap: 0.5rem;
  }
}

#spotlight {
  position: fixed;
  inset: 0;
  z-index: 90; /* under the confetti */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--spotlight-bg);
  backdrop-filter: blur(4px);
  cursor: pointer;
  animation: spotlight-in 0.3s ease-out;
  transition: opacity 0.3s;
}

#spotlight[hidden] {
  display: none;
}

#spotlight.leaving {
  opacity: 0;
}

#spotlight-name {
  font-size: clamp(3rem, 12vw, 7rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-align: center;
  /* showSpotlight shrinks the text so each word fits; this only kicks in below its minimum */
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--fg);
  text-shadow: 0 0 2rem var(--spotlight-glow);
  animation: spotlight-pop 0.6s cubic-bezier(0.2, 1.5, 0.4, 1);
}

@keyframes spotlight-in {
  from { opacity: 0; }
}

@keyframes spotlight-pop {
  from { transform: scale(0.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #spotlight-name { animation: none; }
}

#confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

/* Färglägesväljaren, uppe till höger (sajtmenyn sitter uppe till vänster) */
#theme-switch {
  position: absolute;
  top: 0.45rem;
  right: 1rem;
  z-index: 50;
  display: flex;
  gap: 0.15rem;
}

#theme-switch button {
  background: none;
  color: var(--muted);
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.08em;
}

#theme-switch button:hover {
  background: none;
  color: var(--fg);
}

#theme-switch button[aria-pressed="true"] {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* Sajtmenyn är samma på alla sidor; här följer den färgläget */
.site-menu summary,
.site-menu a {
  color: var(--muted);
}

.site-menu summary:hover,
.site-menu[open] summary,
.site-menu a:hover,
.site-menu a[aria-current="page"] {
  color: var(--fg);
}

.site-menu ul {
  background: var(--bg);
  border: 1px solid var(--border);
}

/* Clownläge: prickar, regnbåge och lite gung */
:root[data-theme="clown"] body {
  background-image:
    radial-gradient(rgba(229, 57, 53, 0.22) 14%, transparent 15%),
    radial-gradient(rgba(41, 121, 255, 0.2) 14%, transparent 15%),
    radial-gradient(rgba(67, 160, 71, 0.2) 14%, transparent 15%);
  background-size: 72px 72px;
  background-position: 0 0, 24px 24px, 48px 48px;
  background-attachment: fixed;
}

:root[data-theme="clown"] main {
  background: rgba(255, 246, 213, 0.92);
  border: 3px dashed #e53935;
  border-radius: 20px;
  padding: 1.5rem;
}

:root[data-theme="clown"] h1,
:root[data-theme="clown"] #spotlight-name {
  background: linear-gradient(90deg, #e53935, #fb8c00, #fdd835, #43a047, #1e88e5, #8e24aa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

:root[data-theme="clown"] h1 {
  font-weight: 700;
  animation: clown-wobble 2.4s ease-in-out infinite;
}

:root[data-theme="clown"] #spotlight-name {
  font-weight: 700;
}

:root[data-theme="clown"] #pick-btn {
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 4px 0 #8e1b18;
}

:root[data-theme="clown"] #pick-btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #8e1b18;
}

:root[data-theme="clown"] #result span {
  color: #e53935;
  font-weight: 700;
}

@keyframes clown-wobble {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="clown"] h1 { animation: none; }
}

/* Små telefoner: mindre marginaler, så innehållet får plats */
@media (max-width: 480px) {
  body {
    padding: 2.25rem 1rem 1.5rem;
  }

  :root[data-theme="clown"] main {
    padding: 1rem 0.85rem;
  }
}