/* ==========================================================================
   WILDSTARZ Colouring — shares design tokens with the main WILDSTARZ theme
   ========================================================================== */

:root{
  --ws-sunshine:   #FFC93C;
  --ws-coral:      #FF6B6B;
  --ws-sky:        #4ECDC4;
  --ws-grass:      #6BCB77;
  --ws-berry:      #A66CFF;
  --ws-ink:        #2E2A4A;
  --ws-ink-soft:   rgba(46,42,74,0.62);
  --ws-cream:      #FFF9EE;
  --ws-white:      #FFFFFF;
  --ws-line:       rgba(46,42,74,0.12);

  --ws-font-heading: 'Baloo 2', 'Comic Sans MS', cursive, sans-serif;
  --ws-font-body:    'Nunito Sans', 'Trebuchet MS', sans-serif;

  --ws-radius-lg: 32px;
  --ws-radius-md: 20px;
  --ws-radius-sm: 12px;

  --ws-shadow: 0 8px 0 var(--ws-line);
  --ws-shadow-hover: 0 4px 0 var(--ws-line);

  --ws-max-width: 1180px;
}

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

html, body{
  margin:0;
  background: var(--ws-cream);
  color: var(--ws-ink);
  font-family: var(--ws-font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
}

body{ padding: 28px 20px 48px; }

h1, h2, h3{
  font-family: var(--ws-font-heading);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

button{ font-family: inherit; }

.wrap{ max-width: var(--ws-max-width); margin: 0 auto; }

/* ---------- Top banner ---------- */
.banner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom: 28px;
}
.banner__title{ font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--ws-berry); }
.banner__sub{ margin: 4px 0 0; color: var(--ws-ink-soft); font-size: 0.95rem; }
.banner__badge{
  font-family: var(--ws-font-heading); font-weight: 800; font-size: 0.85rem;
  background: var(--ws-sunshine); color: var(--ws-ink);
  padding: 8px 18px; border-radius: 999px; box-shadow: var(--ws-shadow);
  white-space: nowrap;
}

/* ---------- Screen switching ---------- */
.screen{ display:none; }
.screen.is-active{ display:block; }

/* ==========================================================================
   PICKER SCREEN
   ========================================================================== */
.scene-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

.scene-card{
  background: var(--ws-white);
  border-radius: var(--ws-radius-md);
  box-shadow: var(--ws-shadow);
  overflow:hidden;
  display:flex; flex-direction:column;
}

.scene-card__thumb{
  aspect-ratio: 4/3; width:100%; object-fit:cover; display:block;
  background: linear-gradient(160deg, #FFE9B3, var(--ws-cream));
}

.scene-card__body{ padding: 16px 18px 18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.scene-card__title{ font-size: 1.15rem; color: var(--ws-coral); }

.scene-card__play{
  margin-top:auto;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family: var(--ws-font-heading); font-weight:800; font-size: 0.95rem;
  padding: 11px 20px; border-radius:999px; border:none; cursor:pointer;
  background: var(--ws-coral); color: var(--ws-white);
  box-shadow: 0 4px 0 rgba(46,42,74,0.18);
  transition: transform .12s ease, box-shadow .12s ease;
}
.scene-card__play:hover{ transform: translateY(2px); box-shadow: 0 2px 0 rgba(46,42,74,0.18); }

/* "coming soon" placeholder card */
.scene-card--soon{
  box-shadow:none; border: 3px dashed var(--ws-line); background: transparent;
}
.scene-card--soon .scene-card__thumb{
  aspect-ratio: 4/3; display:flex; align-items:center; justify-content:center;
  background: transparent; font-size: 2.2rem;
}
.scene-card--soon .scene-card__title{ color: var(--ws-ink-soft); }
.scene-card--soon .scene-card__note{
  font-size: 0.85rem; color: var(--ws-ink-soft); margin:0;
}

/* ==========================================================================
   PLAY SCREEN
   ========================================================================== */
.play-topbar{
  display:flex; align-items:center; gap:14px; margin-bottom: 18px; flex-wrap:wrap;
}
.back-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--ws-font-heading); font-weight:800; font-size:0.9rem;
  background: var(--ws-white); color: var(--ws-ink); border:none;
  padding: 10px 16px; border-radius:999px; cursor:pointer; box-shadow: var(--ws-shadow-hover);
}
.play-topbar h2{ font-size: 1.4rem; color: var(--ws-berry); }

.play-layout{
  display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap;
}

.canvas-card{
  background: var(--ws-white); border-radius: var(--ws-radius-md); box-shadow: var(--ws-shadow);
  padding: 12px; flex: 1 1 480px; min-width: 280px;
}
#colorCanvas{
  width:100%; height:auto; display:block; border-radius: var(--ws-radius-sm);
  cursor: crosshair; touch-action:none; background:#fff;
}

.controls{
  background: var(--ws-white); border-radius: var(--ws-radius-md); box-shadow: var(--ws-shadow);
  padding: 20px; width: 260px; flex: 0 0 260px;
}
.controls h3{ font-size: 1rem; color: var(--ws-coral); margin-bottom: 12px; }

.palette{ display:grid; grid-template-columns: repeat(5, 1fr); gap:9px; margin-bottom: 18px; }
.swatch{
  width:100%; aspect-ratio:1; border-radius:50%; border:3px solid var(--ws-white);
  outline: 2px solid var(--ws-line); cursor:pointer; transition: transform .1s ease;
  padding:0;
}
.swatch:hover{ transform: scale(1.08); }
.swatch.is-selected{ outline: 3px solid var(--ws-ink); transform: scale(1.1); }

.action-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; margin-top:9px; padding: 12px 14px; border:none; border-radius:999px;
  font-family: var(--ws-font-heading); font-weight:800; font-size: 0.95rem; cursor:pointer;
  box-shadow: 0 4px 0 rgba(46,42,74,0.15); transition: transform .12s ease, box-shadow .12s ease;
}
.action-btn:active{ transform: translateY(3px); box-shadow:none; }
.action-btn--reset{ background: var(--ws-sunshine); color: var(--ws-ink); }
.action-btn--save{ background: var(--ws-sky); color: var(--ws-white); }

.status{ min-height: 1.3em; margin-top: 12px; font-size: 0.85rem; color: var(--ws-ink-soft); text-align:center; }

@media (max-width: 760px){
  .controls{ width:100%; flex-basis:100%; order:-1; }
  .palette{ grid-template-columns: repeat(8, 1fr); }
}