/* Cup Shuffle: editor rows + shuffle-stage play UI. */

/* ---- Editor ------------------------------------------------------------ */
.editor-head { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0 .75rem; }
.editor-head h2 { margin: 0; font-size: 1.1rem; }
.editor-head .meta { color: var(--ink-soft); font-weight: 400; font-size: .9rem; }
.editor-head .btn { margin-inline-start: auto; }

.editor-grid { display: grid; gap: .5rem; max-width: 460px; }
.word-row {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .6rem;
  align-items: center;
}
.word-row .card-index { color: var(--ink-soft); text-align: center; font-variant-numeric: tabular-nums; }
.word-row .word-input { font-size: 1.15rem; }

/* ---- Scorebar ------------------------------------------------------------ */
/* Growth-only: --cs-scale is 1 (today's size) up to the 800px reference
   viewport, then grows past it — every fixed dimension below (stage height,
   cup/base/block sizes) is derived from this one variable via calc() so the
   whole scene scales together in lockstep; cup left-offsets already use %
   (JS-driven, see play.js SLOT_PCTS) so they follow the wider stage for
   free. Computed in play.js's updateCsScale() (not a CSS
   calc(100vw/800px) — Firefox renders that division as invalid, which
   silently drops every declaration reading it); this static `1` is only
   the pre-JS first-paint fallback. */
.cs-main {
  --cs-scale: 1;
  max-width: calc(720px * var(--cs-scale));
}
.scorebar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .75rem 1.1rem; box-shadow: var(--shadow);
  margin-bottom: 1rem;
}
.scorebar .deck-name { font-weight: 700; font-size: 1.05rem; }
.scorebar .stats { display: flex; gap: 1.25rem; }
.scorebar .stat { color: var(--ink-soft); font-size: .9rem; }
.scorebar .stat strong { color: var(--ink); font-size: 1.1rem; margin-inline-start: .3rem; }

.cs-status { text-align: center; color: var(--ink-soft); font-size: .95rem; margin: 0 0 1rem; min-height: 1.4em; }

/* ---- Stage --------------------------------------------------------------- */
.cs-stage {
  position: relative;
  height: calc(260px * var(--cs-scale, 1));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 6%, var(--surface)) 0%,
      var(--surface) 55%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.cs-base {
  position: absolute;
  top: calc(190px * var(--cs-scale, 1));
  width: calc(76px * var(--cs-scale, 1)); height: calc(18px * var(--cs-scale, 1));
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, .16);
  filter: blur(1px);
}

.cs-cup {
  position: absolute;
  top: calc(96px * var(--cs-scale, 1));
  width: calc(92px * var(--cs-scale, 1)); height: calc(90px * var(--cs-scale, 1));
  margin: 0; padding: 0; border: none; cursor: pointer;
  border-radius: 50% 50% 12% 12% / 65% 65% 10% 10%;
  background: linear-gradient(180deg, #e0574c, #b5372e);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .22), inset 0 -10px 14px rgba(0, 0, 0, .18);
}
.cs-cup:disabled { cursor: default; }
.cs-cup.lifted { box-shadow: 0 22px 20px rgba(0, 0, 0, .18); }

.cs-block {
  position: absolute;
  top: calc(150px * var(--cs-scale, 1));
  width: calc(56px * var(--cs-scale, 1)); height: calc(56px * var(--cs-scale, 1));
  transform: translate(-50%, 0);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #d9a85c, #a97636);
  border-radius: 8px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .2);
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease;
}
.cs-block.visible { visibility: visible; opacity: 1; }
.cs-block-word { font-size: calc(.55rem * var(--cs-scale, 1)); font-weight: 700; color: #3a230a; direction: rtl; text-align: center; line-height: 1; }

/* ---- Confetti (the "salute") ----------------------------------------------- */
.cs-confetti {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 2px;
  pointer-events: none;
  animation: cs-confetti-burst .7s ease-out forwards;
}
@keyframes cs-confetti-burst {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

/* ---- Word reveal (mirrors Word Tower's pattern) ---------------------------- */
.cs-reveal {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 16, 10, .5);
  border-radius: var(--radius);
  cursor: pointer;
  z-index: 20;
}
.cs-reveal.hidden { display: none; }

.cs-reveal-card {
  border-radius: 16px;
  padding: 2rem clamp(1.75rem, 6vw, 3.5rem);
  text-align: center;
  box-shadow: 0 20px 45px rgba(0, 0, 0, .35);
  animation: cs-reveal-in .22s cubic-bezier(.2, .9, .3, 1.2);
}
.cs-reveal-card.success {
  background: linear-gradient(180deg, #d9a85c, color-mix(in srgb, #d9a85c 75%, #a97636));
}
.cs-reveal-card.miss {
  background: linear-gradient(180deg, color-mix(in srgb, #d9a85c 55%, #fff), #d9a85c);
}
.cs-reveal-word {
  font-size: max(1.8rem, 5vw);
  font-weight: 700;
  color: #2a1a0a;
  direction: rtl;
}
.cs-reveal-hint {
  margin: .75rem 0 0;
  color: rgba(42, 26, 10, .75);
  font-size: .85rem;
}
@keyframes cs-reveal-in {
  from { transform: scale(.35); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ---- Game-over overlay ------------------------------------------------------ */
.cs-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 12, 16, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; z-index: 50;
  backdrop-filter: blur(3px);
}
.cs-card {
  background: var(--surface);
  border-radius: 20px;
  padding: 2rem clamp(1.5rem, 5vw, 3rem);
  text-align: center;
  box-shadow: var(--shadow);
  max-width: 420px; width: 100%;
}
.result-emoji { font-size: 3rem; }
.cs-card h2 { margin: .25rem 0 .5rem; }
.cs-final-score { color: var(--ink-soft); font-size: 1rem; font-variant-numeric: tabular-nums; }
.result-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.5rem; }

@media (max-width: 520px) {
  .scorebar { justify-content: center; text-align: center; }
}