/* theme.css — Design-Tokens, Reset, Basis-Styles.
 *
 * Theme-Steuerung: `data-theme="light|dark"` auf <html>.
 */

:root,
:root[data-theme='light'] {
  --bg: #e8edf9;
  --bg-2: #f6f8ff;
  --bg-deep: #d3dcf3;
  --surface: #ffffff;
  --surface-2: #f4f7ff;
  --surface-3: #e9eefb;
  --text: #16203a;
  --muted: #6b7a99;
  --border: #d6def0;
  --primary: #4f46e5;
  --primary-2: #7c5cff;
  --primary-contrast: #ffffff;
  --gold: #f59e0b;
  --danger: #e11d48;
  --success: #10b981;
  --shadow: 0 10px 30px rgba(23, 33, 66, 0.12);
  --shadow-lg: 0 24px 60px rgba(23, 33, 66, 0.22);
  --radius: 20px;

  /* Glas */
  --glass: rgba(255, 255, 255, 0.42);
  --glass-2: rgba(226, 235, 255, 0.30);
  --glass-edge: rgba(120, 142, 190, 0.55);
  --glass-hi: rgba(255, 255, 255, 0.95);
  --glass-shadow: rgba(40, 60, 110, 0.16);

  --gold-glow: rgba(245, 158, 11, 0.55);
  --primary-glow: rgba(99, 102, 241, 0.55);

  --board-bg: linear-gradient(180deg, #ffffff 0%, #eef2fe 100%);
}

:root[data-theme='dark'] {
  --bg: #0b1020;
  --bg-2: #131a30;
  --bg-deep: #060a15;
  --surface: #151d33;
  --surface-2: #1b2440;
  --surface-3: #222d4e;
  --text: #e9eefc;
  --muted: #8fa0c4;
  --border: #2a3557;
  --primary: #6366f1;
  --primary-2: #a78bfa;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.65);

  --glass: rgba(255, 255, 255, 0.07);
  --glass-2: rgba(160, 190, 255, 0.05);
  --glass-edge: rgba(160, 185, 235, 0.38);
  --glass-hi: rgba(255, 255, 255, 0.75);
  --glass-shadow: rgba(0, 0, 0, 0.45);

  --gold-glow: rgba(245, 158, 11, 0.7);
  --primary-glow: rgba(129, 140, 248, 0.7);

  --board-bg: linear-gradient(180deg, #1a2340 0%, #111830 100%);
}

/* Flüssigkeitsfarben — kräftig, klar unterscheidbar, in beiden Themes gleich. */
:root {
  --c1:  #ff4d4d;  /* rot        */
  --c2:  #2f80ff;  /* blau       */
  --c3:  #2ee06a;  /* grün       */
  --c4:  #ffc61a;  /* gelb       */
  --c5:  #a855f7;  /* violett    */
  --c6:  #ff8a1f;  /* orange     */
  --c7:  #14d5c4;  /* türkis     */
  --c8:  #9aa8bd;  /* grau       */
  --c9:  #ff5bb0;  /* pink       */
  --c10: #38d0ff;  /* hellblau   */
  --c11: #b06a3a;  /* braun      */
  --c12: #128f4d;  /* dunkelgrün */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: "Baloo 2", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(1000px 600px at 15% -10%, var(--bg-2) 0%, transparent 55%),
    radial-gradient(900px 520px at 88% 8%, color-mix(in srgb, var(--primary) 14%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  background-attachment: fixed;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  transition: background 0.3s ease, color 0.3s ease;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.muted { color: var(--muted); font-size: 0.9rem; }

.link {
  background: none;
  border: none;
  padding: 0;
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Premium color direction (v3): deeper contrast, cleaner glass and richer liquids. */
:root,
:root[data-theme='light'] {
  --bg: #eaf0ff;
  --bg-2: #fbfcff;
  --bg-deep: #d8e1f6;
  --surface: rgba(255, 255, 255, .86);
  --surface-2: rgba(243, 247, 255, .9);
  --surface-3: #e8eefc;
  --border: rgba(120, 141, 185, .26);
  --primary: #5147e8;
  --primary-2: #8b72ff;
  --glass: rgba(241, 247, 255, .42);
  --glass-edge: rgba(103, 130, 184, .53);
  --glass-shadow: rgba(35, 53, 103, .22);
  --board-bg: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(232,239,255,.92) 100%);
}

:root[data-theme='dark'] {
  --bg: #070b17;
  --bg-2: #101934;
  --bg-deep: #040711;
  --surface: rgba(20, 29, 53, .84);
  --surface-2: rgba(27, 38, 70, .9);
  --surface-3: #263254;
  --border: rgba(116, 139, 194, .26);
  --primary: #736df5;
  --primary-2: #ae96ff;
  --glass: rgba(180, 205, 255, .075);
  --glass-edge: rgba(170, 199, 255, .46);
  --glass-hi: rgba(255,255,255,.84);
  --glass-shadow: rgba(0, 3, 14, .6);
  --board-bg: linear-gradient(180deg, rgba(24,35,68,.96) 0%, rgba(12,19,40,.98) 100%);
}

body {
  min-width: 0;
  background:
    radial-gradient(900px 520px at 10% -8%, color-mix(in srgb, var(--primary-2) 14%, var(--bg-2)) 0%, transparent 58%),
    radial-gradient(800px 560px at 92% 10%, color-mix(in srgb, var(--primary) 18%, transparent) 0%, transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}

button { touch-action: manipulation; }

/* ==================================================================
 * Mobile game atmosphere (v5)
 * ================================================================== */

:root,
:root[data-theme='light'] {
  --bg: #eaf0ff;
  --bg-2: #f8faff;
  --bg-deep: #ced9f3;
  --surface: rgba(255, 255, 255, .82);
  --surface-2: rgba(239, 244, 255, .9);
  --border: rgba(92, 113, 166, .24);
  --primary: #5547e8;
  --primary-2: #8a70ff;
  --ambient-a: rgba(89, 91, 238, .22);
  --ambient-b: rgba(41, 189, 211, .16);
  --ambient-c: rgba(244, 143, 66, .12);
  --ui-highlight: rgba(255, 255, 255, .74);
  --ui-shadow: rgba(54, 66, 120, .22);
}

:root[data-theme='dark'] {
  --bg: #070a16;
  --bg-2: #10172d;
  --bg-deep: #02040b;
  --surface: rgba(18, 27, 51, .82);
  --surface-2: rgba(24, 35, 66, .9);
  --border: rgba(138, 158, 214, .22);
  --primary: #6d66f6;
  --primary-2: #9a83ff;
  --ambient-a: rgba(92, 83, 255, .28);
  --ambient-b: rgba(25, 169, 210, .16);
  --ambient-c: rgba(224, 105, 65, .09);
  --ui-highlight: rgba(255, 255, 255, .15);
  --ui-shadow: rgba(0, 2, 12, .58);
}

body {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  background:
    radial-gradient(95% 54% at 50% -10%, var(--ambient-a), transparent 68%),
    radial-gradient(70% 54% at -12% 48%, var(--ambient-b), transparent 70%),
    radial-gradient(65% 48% at 112% 82%, var(--ambient-c), transparent 72%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 42%, var(--bg-deep) 100%);
}

body::before {
  content: '';
  position: fixed;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at center, color-mix(in srgb, var(--primary-2) 24%, transparent) 0 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 72%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 72%);
  opacity: .28;
}

body::after {
  content: '';
  position: fixed;
  z-index: -1;
  width: min(92vw, 680px);
  aspect-ratio: 1;
  left: 50%;
  top: 22%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--primary) 11%, transparent),
    transparent 68%);
  filter: blur(24px);
  transform: translate(-50%, -50%);
  animation: ambientBreathe 9s ease-in-out infinite;
}

@keyframes ambientBreathe {
  0%, 100% { opacity: .68; transform: translate(-50%, -50%) scale(.92); }
  50% { opacity: 1; transform: translate(-50%, -47%) scale(1.08); }
}

button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary-2) 72%, white);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}