/* ==========================================================================
   Willekeurige Kleurknop — Casino Felt
   Design tokens (:root) overgenomen uit de gekozen design system
   (.context/design-system/project/colors_and_type.css). Niet hardcoden.
   ========================================================================== */

:root {
  /* ---------- Color: surface (the felt table) ----------------------------- */
  --cf-felt-900: #062a14;
  --cf-felt-800: #0c4725;
  --cf-felt-700: #0f5b2f;
  --cf-felt-600: #16703c;
  --cf-felt-500: #1f8a4d;
  --game-felt-hi: #2f6f4a;
  --game-felt-mid: #1f5235;
  --game-felt-lo: #143a25;

  /* ---------- Color: scoresheet (cream paper) ----------------------------- */
  --cf-paper-50:  #fbf7ec;
  --cf-paper-100: #f4ecd6;
  --cf-paper-200: #e7dcc1;
  --cf-paper-300: #c9bb98;
  --cf-paper-400: #97896a;

  /* ---------- Color: ink -------------------------------------------------- */
  --cf-ink-900: #1a1408;
  --cf-ink-700: #3a2f1c;
  --cf-ink-500: #6a5a3f;
  --cf-ink-300: #a0916f;

  /* ---------- Color: foil & accents -------------------------------------- */
  --cf-gold-700: #8a6a1c;
  --cf-gold-500: #d4a13a;
  --cf-gold-300: #f1cf6b;
  --cf-gold-100: #fff1c2;

  --cf-crimson-700: #6b1320;
  --cf-crimson-600: #8a1a2a;
  --cf-crimson-500: #b82033;
  --cf-crimson-400: #d73a4d;

  /* ---------- Semantic colors -------------------------------------------- */
  --cf-bg:               radial-gradient(120% 90% at 50% 18%, var(--game-felt-hi) 0%, var(--game-felt-mid) 45%, var(--game-felt-lo) 100%);
  --cf-fg-on-felt:       #f3ead2;
  --cf-fg-on-felt-muted: #e7dcc0;

  /* ---------- Type ------------------------------------------------------- */
  --cf-font-sans:    "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --cf-fw-bold:    700;
  --cf-fw-heavy:   800;

  --cf-tracking-cap: 0.18em;

  /* ---------- Spacing ---------------------------------------------------- */
  --cf-space-2: 8px;
  --cf-space-3: 12px;
  --cf-space-6: 24px;

  /* ---------- Radii ------------------------------------------------------ */
  --cf-radius-pill: 999px;
}

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

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

body {
  font-family: var(--cf-font-sans);
  color: var(--cf-fg-on-felt);
  background: var(--cf-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(22px, 6vh, 48px) 24px;
  padding-top: calc(clamp(22px, 6vh, 48px) + env(safe-area-inset-top));
  padding-bottom: calc(clamp(22px, 6vh, 48px) + env(safe-area-inset-bottom));
  overflow: hidden;
}

/* ---------- Header ----------------------------------------------------- */
.header { text-align: center; }
.eyebrow {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: var(--cf-tracking-cap);
  color: var(--cf-gold-500);
  font-weight: var(--cf-fw-bold);
  margin-bottom: 6px;
}
.title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: var(--cf-fw-heavy);
  color: var(--cf-gold-100);
  letter-spacing: .01em;
}

/* ---------- Stage: de kleurknop als pokerfiche ------------------------- */
.stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-btn {
  width: min(70vw, 250px);
  height: min(70vw, 250px);
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 8px dashed rgba(255, 255, 255, .55);
  outline: 3px solid var(--cf-crimson-700);
  background: var(--cf-crimson-600);
  color: var(--cf-gold-100);
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: var(--cf-fw-heavy);
  cursor: pointer;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .45), inset 0 0 0 6px rgba(0, 0, 0, .18);
  transition: transform .08s ease, background .25s ease, color .25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  touch-action: manipulation;
}
.color-btn:active { transform: scale(.97); }

/* ---------- Footer: hint + reset --------------------------------------- */
.footer { text-align: center; }
.hint {
  font-size: .9rem;
  color: var(--cf-fg-on-felt-muted);
  margin: 0 0 var(--cf-space-3);
  min-height: 1.2em;
}
.code {
  color: var(--cf-gold-300);
  font-weight: var(--cf-fw-bold);
  letter-spacing: .05em;
}
.reset {
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 241, 194, .45);
  color: var(--cf-gold-100);
  font-family: inherit;
  font-size: 1rem;
  font-weight: var(--cf-fw-bold);
  border-radius: var(--cf-radius-pill);
  padding: 11px 22px;
  min-height: 44px;
  cursor: pointer;
  touch-action: manipulation;
}
.reset:active { transform: scale(.97); }

/* ---------- Loading overlay (template) --------------------------------- */
.loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cf-space-3);
  background: var(--cf-felt-900);
  color: var(--cf-fg-on-felt);
  z-index: 1000;
}
.loading-overlay--hidden { display: none; }
.loading-spinner {
  width: 36px;
  height: 36px;
  border: 4px solid rgba(255, 241, 194, .25);
  border-top-color: var(--cf-gold-300);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 700px) {
  .title { font-size: 1.8rem; }
}