/* ============================================================
   Pinwheel Names — embeddable widget styles
   Self-contained: no dependency on the main site's style.css,
   so this never breaks if that file changes.
   ============================================================ */

:root {
  --canvas: #0C4548;
  --canvas-deep: #072F31;
  --paper: #F7EFDA;
  --ink: #17262A;
  --ink-soft: #4A5C5E;
  --cherry-deep: #B92F1D;
  --marigold: #F5A623;
  --cobalt: #2C5D8F;
  --cream-text: #FBF6E9;
  --font-display: "Bungee", "Arial Black", system-ui, sans-serif;
  --font-body: "Fraunces", Georgia, serif;
  --font-util: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; background: transparent;
  font-family: var(--font-body); color: var(--ink);
}

.ew {
  max-width: 360px; margin: 0 auto; padding: 16px;
  background: var(--canvas); border: 2px solid var(--ink); border-radius: 16px;
  text-align: center;
}

.ew-frame { position: relative; width: 74%; margin: 4px auto 0; }
.ew-ring {
  position: absolute; inset: -12px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #2b6b6e 0%, var(--canvas-deep) 60%);
  border: 4px solid var(--canvas-deep);
}
.bulb { fill: var(--marigold); stroke: var(--canvas-deep); stroke-width: 1; opacity: 0.3; transition: opacity 0.15s; }
.ew-frame.is-lit .bulb { animation: ew-chase 0.9s linear infinite; animation-delay: calc(var(--i) * 0.06s); }
@keyframes ew-chase { 0%, 100% { opacity: 0.3; } 15% { opacity: 1; } 35% { opacity: 0.3; } }
.ew-frame.is-won .bulb { animation: none; opacity: 1; }

.ew-pointer { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 26px; z-index: 3; }
.ew-wheel { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
.ew-rotor-group { transform-origin: 240px 240px; }
#ew-rotor { transform-origin: 240px 240px; transform-box: view-box; }
#ew-rotor.is-spinning { transition: transform 3.6s cubic-bezier(0.14,0.72,0.12,1); }

.wedge { stroke: var(--marigold); stroke-width: 2.5; transition: opacity 0.35s; }
.wedge-label { font-family: var(--font-display); font-size: 15px; transition: opacity 0.35s; }
#ew-wheel.is-settled .wedge, #ew-wheel.is-settled .wedge-label { opacity: 0.45; }
#ew-wheel.is-settled .wedge.is-win, #ew-wheel.is-settled .wedge-label.is-win { opacity: 1; }
.wedge.is-win { stroke: var(--cream-text); stroke-width: 4; }
.hub { fill: var(--canvas-deep); stroke: var(--marigold); stroke-width: 3; }
.hub-text { font-family: var(--font-display); font-size: 11px; fill: var(--cream-text); }

.ew-controls { margin: 14px 0 0; }
.ew-segmented { display: inline-flex; border: 2px solid var(--cream-text); border-radius: 999px; overflow: hidden; }
.ew-segmented input { position: absolute; opacity: 0; width: 0; height: 0; }
.ew-segmented label {
  font-family: var(--font-util); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.4rem 0.75rem; cursor: pointer; color: var(--cream-text);
}
.ew-segmented input:checked + label { background: var(--marigold); color: var(--ink); }

.ew-spin {
  margin-top: 14px; font-family: var(--font-display); font-size: 0.95rem;
  color: var(--cream-text); background: var(--cherry-deep);
  border: 2px solid var(--ink); border-radius: 999px; padding: 0.65rem 1.8rem; cursor: pointer;
  box-shadow: 3px 4px 0 var(--ink);
}
.ew-spin:hover { background: #cf3822; }
.ew-spin:active { transform: translate(2px, 3px); box-shadow: 0 0 0 var(--ink); }
.ew-spin[disabled] { opacity: 0.55; cursor: wait; }

.ew-result {
  margin-top: 14px; background: var(--paper); border: 2px solid var(--ink); border-radius: 10px;
  padding: 14px; text-align: center; min-height: 30px;
}
.ew-result.is-empty .ew-body { display: none; }
.ew-hint { margin: 0; font-family: var(--font-util); font-size: 0.72rem; color: var(--ink-soft); line-height: 1.6; }
.ew-result:not(.is-empty) .ew-hint { display: none; }

.ew-name {
  font-family: var(--font-display); font-size: 1.6rem; line-height: 1;
  margin: 0 0 4px; color: var(--cherry-deep); word-break: break-word;
}
.ew-meaning { font-size: 0.92rem; font-style: italic; margin: 0 0 8px; color: var(--ink); }
.ew-tag {
  display: inline-block; font-family: var(--font-util); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; background: var(--cobalt); color: var(--cream-text);
  border: 2px solid var(--ink); padding: 0.2rem 0.55rem; border-radius: 3px;
}

@keyframes ew-stamp { 0% { opacity: 0; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
.ew-body.is-stamped { animation: ew-stamp 0.3s ease both; }

.ew-credit {
  display: block; margin-top: 14px; font-family: var(--font-util); font-size: 0.68rem;
  letter-spacing: 0.02em; color: var(--cream-text); text-decoration: none; opacity: 0.9;
}
.ew-credit:hover { opacity: 1; text-decoration: underline; }
.ew-credit strong { color: var(--marigold); }

@media (prefers-reduced-motion: reduce) {
  #ew-rotor.is-spinning { transition-duration: 0.5s; }
  .ew-frame.is-lit .bulb { animation: none; opacity: 0.7; }
  .ew-body.is-stamped { animation: none; }
}