/* ==========================================================================
   Wheel Cue — embeddable wheel (/embed/)
   Loaded after site.css, inside an iframe 300-800px wide and 420-700px tall.
   The page is one column that exactly fills the frame: title, wheel, result,
   buttons, credit. Everything but the wheel keeps a fixed height, and the
   wheel takes the smaller of the width and the height that is left, so the
   frame never scrolls and the wheel never jumps when a result appears.
   ========================================================================== */

html, .emb-body { height: 100%; }
.emb-body {
  margin: 0;
  background: var(--bg);
  overflow-x: hidden;
  line-height: 1.4;
}

.emb {
  height: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  padding: 10px 12px 8px;
  max-width: 100%;
  overflow: hidden;
}

/* ---------- title: at most two lines ---------- */
.emb-title {
  flex: none; max-width: 100%;
  font-size: 1.08rem; line-height: 1.25; letter-spacing: -.01em; text-align: center;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}

/* ---------- the wheel: the smaller of the free width and height ---------- */
.emb-stage {
  flex: 1 1 0; min-height: 0; width: 100%;
  display: grid; place-items: center;
  padding: 6px 0 2px; /* room for the pointer, which sits a little above the rim */
}
.emb-stage .wheel-wrap {
  /* Fallback for engines without container units: the fixed parts of the
     layout add up to about 230px. */
  width: min(100%, calc(100vh - 230px));
  max-width: 100%;
}
@supports (container-type: size) {
  .emb-stage { container-type: size; }
  .emb-stage .wheel-wrap { width: min(100cqw, 100cqh); }
}
.emb-stage .wheel-wrap::after { box-shadow: 0 18px 50px rgb(124 92 255 / .22); }
.emb-stage .wheel-hub { font-size: clamp(.68rem, 3.4cqmin, .95rem); }
/* One entry left (or only one given): nothing to click. */
.emb-stage .wheel-wrap.is-locked .wheel-canvas,
.emb-stage .wheel-wrap.is-locked .wheel-hub { cursor: default; }

/* ---------- result: fixed height, so the wheel does not resize ---------- */
.emb-result {
  flex: none; width: 100%; max-width: 520px;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 6px 12px;
  /* one meta line and two label lines, filled or not */
  height: calc(.8rem * 1.35 + 1.1rem * 2.5 + 14px);
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.emb-result-meta {
  font-size: .8rem; line-height: 1.35; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.emb-result-label {
  font-size: 1.1rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em;
  color: var(--text);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
.emb-result-label:empty { display: none; }
.emb-result-label.is-idle { font-weight: 600; font-size: .95rem; color: var(--text-dim); }

/* ---------- buttons ---------- */
.emb-controls {
  flex: none; max-width: 100%;
  display: flex; flex-wrap: nowrap; gap: 8px; justify-content: center; align-items: center;
}
.emb-controls .btn { white-space: nowrap; }
.emb-spin { padding: 9px 30px; font-size: 1rem; }

/* ---------- error and no-script states ---------- */
.emb-error, .emb-noscript {
  flex: 1 1 auto; width: 100%; max-width: 420px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; color: var(--text-dim);
}
.emb-error-msg { font-size: 1rem; color: var(--text); font-weight: 600; }
.emb-noscript a { color: var(--accent); }
.emb-error[hidden] { display: none !important; }

/* ---------- credit ---------- */
.emb-credit {
  flex: none; font-size: 12.5px; line-height: 1.3; color: var(--text-dim); text-align: center;
}
.emb-credit a { color: var(--text); text-underline-offset: 2px; }
.emb-credit a:hover { color: var(--accent); }

/* ---------- short or narrow frames ---------- */
@media (max-height: 520px) {
  .emb { gap: 6px; padding-top: 8px; padding-bottom: 6px; }
  .emb-title { -webkit-line-clamp: 1; white-space: nowrap; text-overflow: ellipsis; display: block; }
  .emb-result { height: calc(.8rem * 1.35 + 1.1rem * 1.25 + 12px); padding-top: 4px; padding-bottom: 4px; }
  .emb-result-label { display: block; white-space: nowrap; text-overflow: ellipsis; }
  .emb-spin { padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 360px) {
  .emb { padding-left: 10px; padding-right: 10px; }
  .emb-controls { gap: 6px; }
  .emb-spin { padding-left: 24px; padding-right: 24px; }
  .emb-controls .btn-sm { padding-left: 11px; padding-right: 11px; }
}

/* ---------- fullscreen: the whole frame becomes the stage ---------- */
:root:fullscreen .emb-body { background: var(--bg); }
:root:fullscreen .emb-title { font-size: 1.5rem; }
:root:fullscreen .emb-result { max-width: 640px; }

/* ---------- winner card: over the wheel after each spin ----------
   The result line under the wheel is easy to miss while everyone is watching
   the wheel, so the winner also appears in the middle of it, framed in the
   winning slice's colour. Screen readers get the result line (aria-live); the
   card is aria-hidden so the name is not read twice. A click on the card, Esc,
   Reset or the next spin hides it. */
.emb-winner {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  width: min(78%, 420px); max-height: 64%;
  padding: 14px 18px;
  padding: clamp(10px, 4cqmin, 22px) clamp(12px, 5cqmin, 26px);
  background: var(--surface-2); color: var(--text);
  border: 3px solid var(--win, var(--accent)); border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgb(0 0 0 / .35);
  text-align: center;
  opacity: 0; transform: translate(-50%, -50%) scale(.85);
  pointer-events: none;
  transition: opacity .18s ease, transform .24s cubic-bezier(.2, .8, .3, 1.25);
}
.emb-winner.is-shown { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; cursor: pointer; }
.emb-winner-kicker {
  display: block; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim);
  font-size: .72rem; font-size: clamp(.66rem, 3cqmin, .85rem);
}
.emb-winner-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; overflow-wrap: anywhere;
  margin-top: 4px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em;
  font-size: 1.6rem; font-size: clamp(1.1rem, 8cqmin, 2.5rem);
}
@media (prefers-reduced-motion: reduce) { .emb-winner { transition: none; } }