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

/* 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 */
  --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);
}

: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;
  --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);
}

: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;
  --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);
}

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;
  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;
  justify-content: flex-end;
  gap: 1rem;
}

#group-actions button {
  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 */
#method-settings {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem 0.9rem 0.75rem;
}

#method-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;
}

#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);
}

#mode-switch {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

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

/* A divider before every button that follows a visible one (methods can be hidden) */
#mode-switch button:not([hidden]) ~ button {
  border-left: 1px solid var(--border);
}

/* Kort etikett, så ge metoderna mer plats */
#shuffle-mode {
  flex: 0.7;
}

#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: transparent;
  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: #2a2a2a;
  border: 1px solid #444;
  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;
}

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

#export-history:hover {
  background: none;
  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: 1rem;
  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;
}

#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;
  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; }
}