.system-button,
.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 255, 0.25);
  background: rgba(0, 229, 255, 0.06);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.system-button:hover,
.action-button:hover {
  transform: translateY(-1px);
  background: rgba(0, 229, 255, 0.12);
  border-color: rgba(0, 229, 255, 0.45);
}

.system-button.primary,
.action-button.primary {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.22), rgba(204, 0, 255, 0.16));
  box-shadow: 0 10px 30px rgba(0, 229, 255, 0.12);
}

.action-button.subtle,
.system-button {
  background: rgba(255, 255, 255, 0.04);
}

.action-button.selected-action {
  border-color: rgba(255, 196, 80, 0.65);
  background: rgba(255, 196, 80, 0.14);
  color: #ffd990;
  box-shadow: 0 0 0 1px rgba(255, 196, 80, 0.2);
}

/* ── Tutorial ── */

.tutorial-page {
  width: min(100%, 1380px);
  margin: 0 auto;
  padding: 32px 16px 36px;
}

.tutorial-launch {
  min-height: calc((100vh - 180px) / 2);
  display: grid;
  place-items: center;
}

.tutorial-launch[hidden],
.tutorial-experience[hidden] {
  display: none;
}

.tutorial-experience {
  display: grid;
  gap: 18px;
}

.tutorial-page + .site-footer {
  margin-top: 20px;
}

@media (max-width: 640px) {
  .tutorial-page + .site-footer {
    margin-top: 2px;
  }
}

.tutorial-launch-button {
  font-size: clamp(1rem, 2vw, 1.25rem);
  padding: 16px 28px;
}

.panel-label,
.player-label,
.hand-label {
  margin: 0 0 10px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
}

.tutorial-progress,
.turn-chip,
.vp-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  border: 1px solid rgba(0, 229, 255, 0.18);
  background: rgba(0, 229, 255, 0.08);
}

.lesson-rule-text-card {
  display: grid;
  gap: 6px;
  max-height: min(54vh, 620px);
  overflow-y: auto;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(0, 229, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  scrollbar-width: thin;
}

.lesson-rule-line {
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.45;
}

.lesson-rule-line.heading {
  color: var(--cyan);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 14px;
  padding-top: 14px;
  border-top-color: rgba(0, 229, 255, 0.14);
}

.lesson-rule-line.heading:first-child {
  margin-top: 0;
  border-top-color: transparent;
}

.lesson-rule-line.bullet::before {
  content: "- ";
  color: #ffd990;
}

.lesson-rule-line.numbered {
  padding-left: 18px;
}

.lesson-rule-line.completed {
  color: rgba(197, 204, 224, 0.48);
  background: rgba(255, 255, 255, 0.02);
  opacity: 0.72;
}

.lesson-rule-line.active {
  border-color: rgba(255, 196, 80, 0.72);
  background: rgba(255, 196, 80, 0.11);
  color: var(--ink);
  box-shadow:
    0 0 0 1px rgba(255, 196, 80, 0.22),
    0 0 18px rgba(255, 196, 80, 0.14);
}

.instruction-block.success,
.turn-chip.winner {
  color: #bafad2;
  border-color: rgba(96, 255, 167, 0.3);
  background: rgba(96, 255, 167, 0.08);
}

.action-tracker,
.action-button-group,
.setup-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}

.action-tracker {
  display: grid;
  gap: 7px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0, 229, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.1), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.03);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
}

.action-tracker.empty {
  border-color: rgba(255, 196, 80, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 196, 80, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.03);
}

.action-tracker-top,
.action-tracker-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.action-tracker-label {
  color: var(--cyan);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.action-tracker-count {
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
}

.action-tracker-foot {
  color: var(--ink-soft);
  font-size: 0.68rem;
}

.action-meter {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.action-slot {
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
}

.action-slot.used {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.95), rgba(204, 0, 255, 0.85));
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.35), 0 0 18px rgba(0, 229, 255, 0.35);
}

.action-slot.available {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.22), rgba(204, 0, 255, 0.16));
  border-color: rgba(0, 229, 255, 0.28);
}

.action-slot.inactive {
  opacity: 0.25;
}

.tutorial-card,
.mini-card {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--ink);
  padding: 0;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}

.card-view-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  text-align: inherit;
}

.tutorial-card:hover,
.mini-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 229, 255, 0.35);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

.tutorial-card.selected,
.mini-card.selected {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.45), 0 16px 34px rgba(0, 229, 255, 0.12);
}

.tutorial-card.highlighted,
.tutorial-card.targetable {
  border-color: rgba(255, 196, 80, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 196, 80, 0.2);
}

.tutorial-card-media,
.mini-card img,
.card-detail img {
  aspect-ratio: 5 / 7;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.tutorial-card-media,
.mini-card .card-view-button,
.card-detail img {
  display: block;
  overflow: hidden;
  border-radius: 16px;
}

.tutorial-card-media img,
.mini-card img,
.card-detail img {
  width: 100%;
  height: auto;
  transform: scale(var(--card-crop-scale));
  transform-origin: center;
  border-radius: inherit;
}

.card-modal-media {
  overflow: hidden;
  border-radius: 16px;
  touch-action: none;
}

.card-modal-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  transform: translate3d(var(--modal-pan-x, 0), var(--modal-pan-y, 0), 0) scale(calc(var(--card-crop-scale) * var(--modal-zoom-scale, 1.1)));
  transform-origin: center;
  border-radius: inherit;
}

.card-modal-media.is-pannable {
  cursor: grab;
}

.card-modal-media.is-dragging {
  cursor: grabbing;
}

.tutorial-card-content {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.tutorial-card-topline {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tutorial-card h4,
.card-detail h3 {
  margin: 0;
  font-size: 0.98rem;
}

.vc-tracker {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 196, 80, 0.28);
  background: rgba(255, 196, 80, 0.08);
}

.vc-tracker-label {
  color: #ffd990;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vc-tracker strong {
  grid-row: span 2;
  justify-self: end;
  color: var(--ink);
  font-size: 1.9rem;
  line-height: 1;
}

.vc-tracker span:last-child {
  color: var(--ink-soft);
  font-size: 0.76rem;
}

.tutorial-card p,
.instruction-block,
.card-detail-rules {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.instruction-block {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  overflow-wrap: anywhere;
}

.instruction-block.muted {
  opacity: 0.82;
}

.instruction-block.warning {
  color: #ffd990;
  border: 1px solid rgba(255, 196, 80, 0.32);
  background: rgba(255, 196, 80, 0.08);
}

.mini-card-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.mini-card-stack {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}

.mini-card {
  padding-bottom: 12px;
  overflow: hidden;
}

.mini-card span,
.mini-card strong {
  display: block;
  padding: 0 10px;
}

.mini-card span {
  margin-top: 8px;
  font-size: 0.85rem;
}

.mini-card strong {
  margin-top: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
}

.mini-card-actions,
.tutorial-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.mini-card-actions {
  padding: 0 10px 4px;
}

.action-button-group-stacked {
  display: grid;
  gap: 8px;
}

.mini-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mini-action:hover,
.mini-action.active {
  border-color: rgba(0, 229, 255, 0.45);
  background: rgba(0, 229, 255, 0.12);
  color: var(--cyan);
}

.mini-action.selected-action {
  border-color: rgba(255, 196, 80, 0.65);
  background: rgba(255, 196, 80, 0.14);
  color: #ffd990;
  box-shadow: 0 0 0 1px rgba(255, 196, 80, 0.2);
}

.selected-action-summary {
  margin-top: 4px;
}

.selected-action-summary.lesson-panel-target {
  display: grid;
  gap: 4px;
  padding-top: 18px;
}

.lesson-action-target,
.lesson-panel-target {
  position: relative;
  border-color: rgba(255, 196, 80, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 196, 80, 0.18);
  animation: lesson-target-pulse 1.2s ease-in-out infinite;
}

.lesson-action-target::before,
.lesson-panel-target::before {
  content: "↓";
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffd990;
  font-size: 1.3rem;
  line-height: 1;
  text-shadow: 0 0 12px rgba(255, 196, 80, 0.45);
  animation: lesson-arrow-bounce 1s ease-in-out infinite;
}

.lesson-arrow {
  position: static;
  display: inline-flex;
  align-self: flex-start;
  margin: 0 0 10px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255, 196, 80, 0.94);
  color: #241200;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.lesson-arrow-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: static;
  z-index: auto;
  justify-self: center;
  max-width: calc(100% - 20px);
  min-width: 84px;
  min-height: 30px;
  margin-inline: 10px;
  text-align: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.lesson-arrow::before,
.lesson-arrow-inline::before {
  content: "↓ ";
}

.mini-action.subtle {
  color: var(--ink-soft);
}

.victory-pile {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

.victory-pile img {
  width: 36px;
  aspect-ratio: 5 / 7;
  border-radius: 7px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transform: translateX(calc(var(--pile-index, 0) * -4px)) rotate(calc((var(--pile-index, 0) - 1) * 2deg));
  transform-origin: bottom center;
  margin-right: -4px;
}

.victory-pile img.new-vp-card {
  animation: vp-card-stack 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes lesson-arrow-bounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(4px);
  }
}

@keyframes vp-area-pop {
  0% {
    box-shadow: 0 0 0 rgba(255, 196, 80, 0);
  }
  35% {
    box-shadow: 0 0 0 5px rgba(255, 196, 80, 0.16), 0 0 28px rgba(255, 196, 80, 0.24);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 196, 80, 0);
  }
}

@keyframes vp-count-glow {
  0%, 100% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.14);
  }
}

@keyframes vp-pile-shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  50% {
    transform: translateX(4px);
  }
  75% {
    transform: translateX(-2px);
  }
}

@keyframes vp-card-stack {
  0% {
    opacity: 0;
    transform: translate(42px, -28px) rotate(16deg) scale(1.28);
  }
  68% {
    opacity: 1;
    transform: translateX(calc(var(--pile-index, 0) * -4px)) translateY(-5px) rotate(calc((var(--pile-index, 0) - 1) * 2deg)) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: translateX(calc(var(--pile-index, 0) * -4px)) rotate(calc((var(--pile-index, 0) - 1) * 2deg)) scale(1);
  }
}

@keyframes lesson-target-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 196, 80, 0.18),
      0 0 0 0 rgba(255, 196, 80, 0.22),
      0 0 0 rgba(255, 196, 80, 0);
    border-color: rgba(255, 196, 80, 0.55);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 196, 80, 0.28),
      0 0 0 6px rgba(255, 196, 80, 0.14),
      0 0 24px rgba(255, 196, 80, 0.24);
    border-color: rgba(255, 215, 120, 0.9);
  }
}

.empty-pile {
  color: var(--ink-soft);
  opacity: 0.75;
  font-size: 0.84rem;
}

.card-detail {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  min-width: 0;
}

.card-detail > div {
  min-width: 0;
}

.card-detail-vc {
  margin: 0 0 12px;
  color: var(--ink);
}

.card-detail-rules {
  padding-left: 18px;
}

.action-button,
.system-button {
  max-width: 100%;
}

.card-modal[hidden] {
  display: none;
}

.setup-modal[hidden] {
  display: none;
}

.setup-modal button[hidden] {
  display: none;
}

.setup-modal {
  position: relative;
  inset: auto;
  z-index: auto;
}

.tutorial-inline-panel {
  width: 100%;
}

.card-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
}

.confetti-celebration {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  overflow: hidden;
}

.confetti-celebration[hidden] {
  display: none;
}

.confetti-piece {
  position: absolute;
  left: var(--origin-x, 50vw);
  top: var(--origin-y, 50vh);
  width: 10px;
  height: 16px;
  border-radius: 3px;
  background: hsl(calc(var(--piece-index) * 37), 92%, 62%);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  animation: confetti-burst 2.8s cubic-bezier(0.12, 0.78, 0.22, 1) var(--delay) both;
}

.confetti-piece:nth-child(3n) {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.confetti-piece:nth-child(4n) {
  width: 6px;
  height: 20px;
}

@keyframes confetti-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
  }
  12% {
    opacity: 1;
  }
  48% {
    opacity: 1;
    transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(1) rotate(calc(var(--spin) * 260deg));
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--end-x)), calc(-50% + var(--end-y))) scale(0.86) rotate(calc(var(--spin) * 760deg));
  }
}

.card-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 14, 0.84);
  backdrop-filter: blur(6px);
}

.setup-modal-dialog,
.card-modal-dialog {
  position: relative;
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: 16px auto;
  padding: 48px 20px 20px;
  border-radius: 18px;
  border: 1px solid rgba(0, 229, 255, 0.18);
  background: rgba(8, 11, 22, 0.96);
  overflow-y: auto;
}

.setup-modal-dialog {
  width: min(1120px, 100%);
  padding-top: 14px;
  margin: 0 auto;
  max-height: none;
  display: grid;
  gap: 8px;
  overflow: visible;
}

.setup-modal-body {
  display: grid;
  gap: 8px;
  color: var(--ink-soft);
}

.setup-modal-body p {
  margin: 0;
}

.setup-modal-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.setup-modal-header h2 {
  margin: 0;
  min-width: 0;
}

.setup-modal-overall-tracker,
.setup-modal-phase-tracker {
  display: flex;
  gap: 3px;
  width: 100%;
}

.setup-modal-tracker-stack {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: stretch;
  width: 100%;
}

.setup-modal-tracker-row {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 100%;
}

.setup-modal-back-chip {
  grid-row: 1 / span 2;
  display: inline-grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  align-items: center;
  justify-content: center;
  width: 52px;
  min-height: 100%;
  padding: 8px 6px;
  border-radius: 16px;
  border: 1px solid rgba(0, 229, 255, 0.18);
  background:
    radial-gradient(circle at 50% 20%, rgba(0, 229, 255, 0.14), rgba(255, 255, 255, 0.02) 62%),
    rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-size: 0.68rem;
  line-height: 1.05;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.setup-modal-back-chip:hover:not(:disabled) {
  border-color: rgba(0, 229, 255, 0.42);
  background:
    radial-gradient(circle at 50% 20%, rgba(0, 229, 255, 0.2), rgba(255, 255, 255, 0.04) 62%),
    rgba(0, 229, 255, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(0, 229, 255, 0.08),
    0 0 14px rgba(0, 229, 255, 0.12);
}

.setup-modal-back-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.setup-modal-back-chip-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.setup-modal-back-chip-label {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.84;
}

.setup-modal-tracker-step,
.setup-modal-phase-node {
  display: block;
  min-width: 0;
  height: 6px;
  flex: 1 1 0;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.1);
  cursor: pointer;
  appearance: none;
  padding: 0;
}

.setup-modal-tracker-step:hover,
.setup-modal-phase-node:hover {
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.24), 0 0 10px rgba(0, 229, 255, 0.12);
}

.setup-modal-tracker-step.is-active,
.setup-modal-phase-node.is-active {
  background: linear-gradient(90deg, rgba(255, 196, 80, 0.88), rgba(255, 225, 150, 0.92));
  box-shadow: 0 0 12px rgba(255, 196, 80, 0.22);
}

.setup-modal-tracker-step.is-complete,
.setup-modal-phase-node.is-complete {
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.72), rgba(91, 236, 255, 0.78));
}

.setup-modal-tracker-step[title],
.setup-modal-phase-node[title],
.setup-modal-back-chip[title] {
  position: relative;
}

.setup-modal-stage {
  min-height: 340px;
  position: relative;
  display: grid;
  place-items: center;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(0, 229, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.setup-modal-stage[data-stage-kind="dice-practice"],
.setup-modal-stage[data-stage-kind="choose"] {
  place-items: stretch;
}

.setup-modal-stage[data-stage-kind="intro"] {
  min-height: 300px;
}

.setup-modal-stage[data-stage-kind="setup-handoff"],
.setup-modal-stage[data-stage-kind="turn-roll"],
.setup-modal-stage[data-stage-kind="select-script-kitty"],
.setup-modal-stage[data-stage-kind="script-kitty-follow"],
.setup-modal-stage[data-stage-kind="script-kitty-choose-action"],
.setup-modal-stage[data-stage-kind="script-kitty-target"],
.setup-modal-stage[data-stage-kind="script-kitty-roll"],
.setup-modal-stage[data-stage-kind="select-patch-paladin"],
.setup-modal-stage[data-stage-kind="patch-paladin-follow"],
.setup-modal-stage[data-stage-kind="patch-paladin-defend-target"],
.setup-modal-stage[data-stage-kind="patch-paladin-attack-target"],
.setup-modal-stage[data-stage-kind="patch-paladin-roll"],
.setup-modal-stage[data-stage-kind="tutorial-complete"] {
  place-items: stretch;
}

.setup-gameplay-stage {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
}

.setup-teach-card {
  position: relative;
  width: min(100%, 360px);
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
}

.setup-teach-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  transform: scale(var(--card-crop-scale));
  transform-origin: center;
  border-radius: inherit;
}

.setup-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.setup-modal-overview {
  max-width: 46ch;
  color: var(--ink);
  text-align: center;
  line-height: 1.6;
}

.tutorial-handoff-stage,
.tutorial-turn-stage,
.tutorial-target-stage,
.tutorial-complete-stage {
  display: grid;
  gap: 16px;
  align-content: start;
  width: 100%;
}

.tutorial-turn-stage.has-side-panel {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  align-items: start;
}

.tutorial-turn-rows,
.tutorial-turn-side {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.tutorial-turn-side {
  align-content: start;
}

.tutorial-turn-lane {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(0, 229, 255, 0.14);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 229, 255, 0.03)),
    rgba(6, 9, 18, 0.45);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 14px 28px rgba(0, 0, 0, 0.16);
}

.tutorial-turn-lane.is-compact {
  padding: 12px;
}

.tutorial-turn-lane.single-owner {
  align-items: center;
}

.tutorial-turn-lane-label {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid rgba(0, 229, 255, 0.22);
  background: rgba(0, 229, 255, 0.08);
}

.tutorial-turn-lane-label.is-opponent {
  border-color: rgba(255, 90, 120, 0.22);
  background: rgba(255, 90, 120, 0.08);
}

.tutorial-turn-lane-label span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--cyan);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tutorial-turn-lane-label.is-opponent span {
  color: #ff8ea4;
}

.tutorial-turn-lane-cards {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  min-width: 0;
}

.tutorial-handoff-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 280px);
  gap: 18px;
  align-items: center;
  min-height: 320px;
}

.tutorial-handoff-cards {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: nowrap;
}

.tutorial-handoff-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
  justify-items: center;
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  min-height: 280px;
  width: 100%;
  box-sizing: border-box;
  z-index: 1;
}

.tutorial-handoff-card,
.tutorial-stage-card,
.tutorial-ghost-card {
  width: min(168px, 22vw);
  display: grid;
  gap: 8px;
  justify-items: center;
  transition: transform 0.65s ease, opacity 0.65s ease, filter 0.45s ease, box-shadow 0.45s ease;
}

.tutorial-handoff-card {
  position: relative;
  width: min(148px, calc(100% - 12px));
  justify-self: center;
  align-self: start;
  transition:
    transform 5s cubic-bezier(0.22, 0.85, 0.28, 1),
    opacity 2s ease,
    filter 0.45s ease,
    box-shadow 0.45s ease;
  z-index: 2;
}

.tutorial-handoff-media,
.tutorial-stage-card-button,
.tutorial-ghost-card-button,
.tutorial-focus-card-button {
  display: block;
  overflow: hidden;
  border-radius: 16px;
}

.tutorial-handoff-card img,
.tutorial-stage-card-button img,
.tutorial-focus-card-button img,
.tutorial-ghost-card-button img,
.tutorial-ghost-card img {
  width: 100%;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  transform: scale(var(--card-crop-scale));
  transform-origin: center;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
  border-radius: inherit;
}

.tutorial-handoff-card span,
.tutorial-stage-card h4 {
  margin: 0;
  font-size: 0.92rem;
  text-align: center;
}

.tutorial-handoff-layout[data-phase="discard"] .discard-card,
.tutorial-handoff-layout[data-phase="pass"] .discard-card,
.tutorial-handoff-layout[data-phase="incoming"] .discard-card,
.tutorial-handoff-layout[data-phase="tighten"] .discard-card,
.tutorial-handoff-layout[data-phase="done"] .discard-card {
  opacity: 0;
  transform: translateY(18px) scale(0.72);
  transition-duration: 4s;
  pointer-events: none;
  z-index: 0;
}

.tutorial-handoff-layout[data-phase="pass"] .pass-card,
.tutorial-handoff-layout[data-phase="incoming"] .pass-card,
.tutorial-handoff-layout[data-phase="tighten"] .pass-card,
.tutorial-handoff-layout[data-phase="done"] .pass-card {
  opacity: 0;
  transform: translate(112%, -24px) rotate(120deg);
  transition-duration: 5s;
}

.tutorial-handoff-layout .incoming-card {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(140%, 0) rotate(180deg);
  transition-duration: 4.5s;
  z-index: 6;
  pointer-events: none;
}

.tutorial-handoff-layout[data-phase="incoming"] .incoming-card,
.tutorial-handoff-layout[data-phase="tighten"] .incoming-card,
.tutorial-handoff-layout[data-phase="done"] .incoming-card {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
  transition-duration: 4.5s;
  z-index: 6;
  pointer-events: auto;
}

.tutorial-handoff-dice {
  opacity: 0;
  justify-self: end;
  position: relative;
  z-index: 3;
  transition: opacity 0.55s ease;
}

.tutorial-handoff-dice.visible {
  opacity: 1;
}

.tutorial-phase-dice-shell {
  width: min(100%, 260px);
  height: 180px;
  margin: 0 auto;
  border-radius: 18px;
  border: 1px solid rgba(0, 229, 255, 0.16);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 196, 80, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
}

.tutorial-modal-board {
  display: grid;
  gap: 16px;
}

.tutorial-modal-board.is-compact {
  gap: 10px;
}

.tutorial-turn-lane.single-owner.is-tight .tutorial-stage-card {
  width: min(160px, 20vw);
  margin-inline: -2px;
}

.tutorial-stage-card {
  position: relative;
}

.tutorial-turn-lane.is-compact .tutorial-stage-card {
  width: min(112px, 13vw);
  gap: 6px;
}

.tutorial-turn-lane.is-compact .tutorial-stage-card h4 {
  font-size: 0.8rem;
}

.tutorial-turn-lane.is-compact .tutorial-stage-vc {
  padding: 4px 8px;
}

.tutorial-turn-lane.is-compact .tutorial-stage-vc strong {
  font-size: 0.92rem;
}

.tutorial-stage-card.is-selected .tutorial-stage-card-media,
.tutorial-stage-card.is-highlighted .tutorial-stage-card-media {
  filter: saturate(1.05);
  box-shadow: 0 0 0 2px rgba(255, 196, 80, 0.38), 0 0 28px rgba(255, 196, 80, 0.25);
  border-radius: 18px;
}

.tutorial-stage-card.is-faded,
.tutorial-ghost-card:not(.is-focus) {
  opacity: 0.25;
  filter: grayscale(0.3);
}

.tutorial-stage-card-media {
  position: relative;
  width: 100%;
}

.tutorial-stage-vc {
  position: absolute;
  top: 5%;
  left: 6%;
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 8px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 2px solid rgba(255, 196, 80, 0.96);
  background: rgba(7, 10, 18, 0.96);
  box-shadow: 0 0 16px rgba(255, 196, 80, 0.3);
}

.tutorial-stage-vc span {
  color: #ffd990;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tutorial-stage-vc strong {
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1;
}

.tutorial-stage-card-body {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.tutorial-stage-card-actions {
  position: relative;
  min-height: 34px;
}

.tutorial-stage-card-actions .mini-action {
  min-width: 84px;
}

.tutorial-stage-card-actions .mini-action.is-blocked[disabled] {
  opacity: 0.45;
}

.tutorial-disabled-mark {
  position: absolute;
  inset: -8px auto auto calc(50% + 24px);
  color: #ff7f7f;
  font-size: 1rem;
  font-weight: 700;
}

.tutorial-focus-card {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.tutorial-focus-card.is-inline-cues {
  grid-template-columns: minmax(180px, 320px);
  justify-content: start;
  gap: 10px;
}

.tutorial-focus-card-title {
  display: grid;
  gap: 6px;
}

.tutorial-focus-card-title h3 {
  margin: 0;
}

.tutorial-focus-card.is-inline-cues .tutorial-focus-card-media {
  position: relative;
}

.tutorial-focus-card-button {
  width: 100%;
}

.tutorial-focus-card-button img {
  width: 100%;
}

.tutorial-focus-card-rules {
  display: grid;
  gap: 10px;
}

.tutorial-focus-card-rules h3 {
  margin: 0;
}

.tutorial-rule-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}

.tutorial-rule-line.is-choose-one,
.tutorial-rule-line.is-bubbled {
  border: 1px solid rgba(255, 196, 80, 0.36);
  box-shadow: 0 0 18px rgba(255, 196, 80, 0.16);
}

.tutorial-rule-line.has-arrow {
  position: relative;
}

.tutorial-rule-arrow {
  color: #ffd990;
  font-size: 1.2rem;
  animation: lesson-arrow-bob 1s ease-in-out infinite;
}

.tutorial-focus-card-image-cues {
  position: absolute;
  inset: auto 10px 10px;
  z-index: 2;
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.tutorial-focus-card-image-cues .tutorial-rule-line {
  padding: 8px 10px;
  background: rgba(7, 10, 18, 0.76);
  backdrop-filter: blur(4px);
}

.tutorial-focus-card-image-cues .tutorial-rule-line.has-arrow {
  padding-left: 8px;
}

.tutorial-focus-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tutorial-ghost-card.is-focus {
  opacity: 0.4;
}

.tutorial-modal-dice-box {
  width: min(100%, 320px);
  min-height: 200px;
}

.tutorial-roll-summary {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 196, 80, 0.3);
  background: rgba(255, 196, 80, 0.08);
  font-weight: 700;
}

.tutorial-formula-stage {
  min-height: 54px;
  display: grid;
  place-items: center;
}

.tutorial-formula-rows {
  display: grid;
  gap: 12px;
}

.tutorial-formula-line {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.formula-chip {
  opacity: 0;
  transform: scale(0.86);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.formula-chip.visible {
  opacity: 1;
  transform: scale(1);
}

.formula-label {
  color: var(--cyan);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.formula-text {
  opacity: 0;
  transform: translateY(1px);
  color: var(--ink);
  font-weight: 600;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.formula-text.visible {
  opacity: 1;
  transform: translateY(0);
}

.formula-chip.total {
  font-weight: 700;
  border-color: rgba(0, 229, 255, 0.32);
}

.formula-chip.total.is-flight-source-hidden {
  opacity: 0;
}

.formula-chip.total.moving-to-script,
.formula-chip.total.moving-to-hacker,
.formula-chip.total.moving-to-patch {
  animation: tutorial-formula-flight 2.45s cubic-bezier(0.2, 0.75, 0.2, 1) forwards;
}

.formula-flight-clone {
  position: absolute;
  z-index: 8;
  margin: 0;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity;
  animation: tutorial-formula-fly 2.45s cubic-bezier(0.2, 0.75, 0.2, 1) forwards;
}

.formula-flight-clone.total {
  opacity: 1;
}

.tutorial-board-vc-cue {
  position: absolute;
  top: -8px;
  left: 20px;
  z-index: 3;
}

.tutorial-board-vc-cue span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 2px solid rgba(255, 196, 80, 0.9);
  background: rgba(7, 10, 18, 0.82);
  color: #ffd990;
  font-size: 1.35rem;
  animation: setup-vc-cue-burst 420ms ease-out forwards;
}

.tutorial-board-vc-cue.is-down span {
  transform: rotate(180deg);
}

@keyframes setup-vc-cue-burst {
  0% {
    opacity: 0;
    transform: scale(0.35);
  }
  18% {
    opacity: 1;
  }
  62% {
    opacity: 0.96;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

.tutorial-complete-stage {
  min-height: 320px;
  place-items: center;
}

.tutorial-complete-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

@keyframes tutorial-formula-flight {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-34px) scale(0.72);
    opacity: 0;
  }
}

@keyframes tutorial-formula-fly {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
  }
  10% {
    opacity: 1;
  }
  78% {
    opacity: 1;
    transform: translate3d(calc(var(--flight-dx) * 0.88), calc(var(--flight-dy) * 0.88), 0) scale(calc(var(--flight-scale) * 1.02));
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--flight-dx), var(--flight-dy), 0) scale(var(--flight-scale));
  }
}

.dice-explainer {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 18px;
  width: 100%;
}

.dice-type-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(0, 229, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}

.dice-svg {
  width: min(180px, 36vw);
  height: auto;
  overflow: visible;
}

.dice-svg polygon,
.dice-svg rect {
  fill: rgba(0, 229, 255, 0.14);
  stroke: rgba(0, 229, 255, 0.62);
  stroke-width: 4px;
}

.dice-svg circle {
  fill: rgba(255, 196, 80, 0.92);
}

.dice-svg text {
  fill: var(--ink);
  text-anchor: middle;
  font-weight: 700;
  dominant-baseline: middle;
}

.d4-svg text {
  font-size: 16px;
}

.d4-corner-label {
  transform-box: fill-box;
  transform-origin: center;
}

.d4-corner-top {
  transform: rotate(0deg);
}

.d4-corner-left {
  transform: rotate(-118deg);
}

.d4-corner-right {
  transform: rotate(118deg);
}

.dice-practice-stage {
  display: grid;
  grid-template-columns: minmax(240px, 290px) minmax(320px, 1fr);
  gap: 18px;
  width: 100%;
  align-items: stretch;
  min-height: 280px;
}

.dice-practice-copy {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 8px 0;
}

.dice-practice-copy p {
  margin: 0;
}

.dice-practice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.dice-practice-button {
  white-space: nowrap;
}

.dice-practice-result {
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
}

.dice-practice-result strong {
  color: var(--cyan);
}

.dice-practice-box {
  min-height: 220px;
  border-radius: 18px;
  border: 1px solid rgba(0, 229, 255, 0.14);
  background:
    radial-gradient(circle at top, rgba(0, 229, 255, 0.12), transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  overflow: hidden;
}

.dice-practice-box canvas {
  width: 100% !important;
  height: 100% !important;
}

.setup-choice-stage {
  display: grid;
  gap: 16px;
  width: 100%;
}

.setup-opponent-hidden {
  display: grid;
  gap: 8px;
  justify-items: center;
  opacity: 0.72;
}

.setup-opponent-hidden > span {
  color: var(--ink-soft);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.setup-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 14px;
  align-items: start;
}

.setup-choice-card {
  overflow: hidden;
  border: 1px solid rgba(0, 229, 255, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}

.setup-choice-card .card-view-button {
  aspect-ratio: 5 / 7;
  overflow: hidden;
  border-radius: 16px;
}

.setup-choice-card img {
  aspect-ratio: 5 / 7;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(var(--card-crop-scale));
  transform-origin: center;
}

.setup-choice-card-body {
  display: grid;
  gap: 8px;
  padding: 12px 10px 10px;
}

.setup-choice-card-body > strong {
  color: var(--ink);
  font-size: 0.88rem;
}

.setup-choice-card-body > span {
  color: var(--cyan);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .setup-choice-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .setup-modal-stage {
    min-height: 280px;
    padding: 14px;
  }

  .tutorial-focus-card {
    grid-template-columns: 1fr;
  }

  .tutorial-handoff-layout {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .tutorial-handoff-cards {
    min-height: 210px;
  }

  .tutorial-handoff-card,
  .tutorial-stage-card,
  .tutorial-ghost-card {
    width: min(136px, 28vw);
  }

  .tutorial-handoff-card {
    width: min(124px, calc(100% - 8px));
  }

  .tutorial-turn-stage.has-side-panel {
    grid-template-columns: 1fr;
  }

  .tutorial-turn-lane {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .tutorial-turn-lane-label {
    min-height: 100%;
  }

  .tutorial-turn-lane-cards {
    flex-wrap: wrap;
  }

  .tutorial-turn-lane.is-compact .tutorial-stage-card {
    width: min(102px, 24vw);
  }
}

.setup-demo-stack {
  position: relative;
  width: min(100%, 620px);
  height: 380px;
}

.setup-demo-card {
  width: 72px;
  aspect-ratio: 5 / 7;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.shuffle-demo .setup-demo-card {
  position: absolute;
  left: calc(50% - 36px);
  top: calc(50% - 50px);
  transform: translate(calc((var(--card-index) - 3.5) * 7px), calc((var(--card-index) - 3.5) * -2px)) rotate(calc((var(--card-index) - 3.5) * 3deg));
  transform-style: preserve-3d;
  transition: transform 0.45s ease;
}

.shuffle-demo .shuffle-card-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  backface-visibility: hidden;
}

.shuffle-demo .shuffle-card-back {
  transform: rotateY(180deg);
}

.shuffle-demo .setup-demo-card:nth-child(1) { --x1: -230px; --y1: -145px; --r1: -38deg; --x2: 190px; --y2: 118px; --r2: 52deg; --x3: -82px; --y3: 150px; --r3: -82deg; }
.shuffle-demo .setup-demo-card:nth-child(2) { --x1: 238px; --y1: -118px; --r1: 44deg; --x2: -208px; --y2: 86px; --r2: -58deg; --x3: 112px; --y3: -156px; --r3: 74deg; }
.shuffle-demo .setup-demo-card:nth-child(3) { --x1: -188px; --y1: 132px; --r1: 66deg; --x2: 224px; --y2: -92px; --r2: -74deg; --x3: -240px; --y3: -32px; --r3: 31deg; }
.shuffle-demo .setup-demo-card:nth-child(4) { --x1: 216px; --y1: 148px; --r1: -52deg; --x2: -156px; --y2: -142px; --r2: 82deg; --x3: 212px; --y3: 16px; --r3: -96deg; }
.shuffle-demo .setup-demo-card:nth-child(5) { --x1: -256px; --y1: -30px; --r1: 91deg; --x2: 176px; --y2: -158px; --r2: -35deg; --x3: -150px; --y3: 126px; --r3: 63deg; }
.shuffle-demo .setup-demo-card:nth-child(6) { --x1: 158px; --y1: -166px; --r1: -83deg; --x2: -236px; --y2: 138px; --r2: 43deg; --x3: 250px; --y3: 108px; --r3: -62deg; }
.shuffle-demo .setup-demo-card:nth-child(7) { --x1: -118px; --y1: 168px; --r1: -71deg; --x2: 252px; --y2: -10px; --r2: 93deg; --x3: -220px; --y3: -136px; --r3: -39deg; }
.shuffle-demo .setup-demo-card:nth-child(8) { --x1: 262px; --y1: 44px; --r1: 78deg; --x2: -196px; --y2: -110px; --r2: -88deg; --x3: 72px; --y3: 162px; --r3: 58deg; }

.shuffle-demo.is-shuffled .setup-demo-card {
  animation: shuffle-card 4s cubic-bezier(0.2, 0.75, 0.2, 1) both;
  animation-delay: calc((var(--card-index) % 4) * 55ms);
  transform: translate(0, calc(var(--card-index) * -1px)) rotate(0deg) rotateY(180deg);
}

.shuffle-demo.is-shuffle-complete .setup-demo-card {
  transform: translate(0, calc(var(--card-index) * -1px)) rotate(0deg) rotateY(180deg);
}

@keyframes shuffle-card {
  0% {
    transform: translate(calc((var(--card-index) - 3.5) * 7px), calc((var(--card-index) - 3.5) * -2px)) rotate(calc((var(--card-index) - 3.5) * 3deg)) rotateY(0deg);
  }
  12% {
    transform: translate(var(--x1), var(--y1)) rotate(var(--r1)) rotateY(0deg) scale(1.08);
  }
  20% {
    transform: translate(var(--x1), var(--y1)) rotate(var(--r1)) rotateY(0deg) scale(1.08);
  }
  28% {
    transform: translate(var(--x1), var(--y1)) rotate(var(--r1)) rotateY(180deg) scale(1.08);
  }
  36% {
    transform: translate(calc(var(--x1) * -0.45), calc(var(--y1) * 0.7)) rotate(calc(var(--r1) * -0.8)) rotateY(180deg) scale(0.88);
  }
  48% {
    transform: translate(var(--x2), var(--y2)) rotate(var(--r2)) rotateY(180deg) scale(1.12);
  }
  60% {
    transform: translate(calc(var(--x2) * -0.55), calc(var(--y2) * -0.75)) rotate(calc(var(--r2) * -0.9)) rotateY(180deg) scale(0.92);
  }
  72% {
    transform: translate(var(--x3), var(--y3)) rotate(var(--r3)) rotateY(180deg) scale(1.06);
  }
  84% {
    transform: translate(calc(var(--x3) * -0.35), calc(var(--y3) * 0.45)) rotate(calc(var(--r3) * -0.7)) rotateY(180deg) scale(0.9);
  }
  94% {
    transform: translate(calc((var(--card-index) - 3.5) * 14px), calc((var(--card-index) - 3.5) * -6px)) rotate(calc((var(--card-index) - 3.5) * 6deg)) rotateY(180deg) scale(1);
  }
  100% {
    transform: translate(0, calc(var(--card-index) * -1px)) rotate(0deg) rotateY(180deg);
  }
}

.deal-demo {
  display: grid;
  gap: 34px;
  width: min(100%, 420px);
  position: relative;
}

.deal-source-stack {
  position: absolute;
  right: 42px;
  top: 50%;
  width: 54px;
  height: 76px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

.deal-source-stack .setup-demo-card {
  position: absolute;
  width: 54px;
  left: 0;
  top: 0;
  transform: translate(0, 0);
}

.deal-demo.is-dealt .deal-source-stack {
  opacity: 0;
  transition: opacity 0.2s ease 0.72s;
}

.deal-demo > div {
  display: grid;
  gap: 8px;
}

.deal-demo span {
  color: var(--cyan);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.deal-row {
  display: grid;
  grid-template-columns: repeat(4, 54px);
  gap: 10px;
  justify-content: center;
  min-height: 76px;
  position: relative;
}

.deal-row .setup-demo-card {
  width: 54px;
  opacity: 0;
  transform: translate(var(--deal-from-x), var(--deal-from-y)) scale(0.92);
}

.deal-demo.is-dealt .deal-row .setup-demo-card {
  animation: deal-card 0.62s ease-out both;
  animation-delay: calc(var(--card-index) * 90ms);
}

.opponent-card {
  --deal-from-x: calc(184px - (var(--card-index) * 64px));
  --deal-from-y: 88px;
}

.player-card {
  --deal-from-x: calc(184px - (var(--card-index) * 64px));
  --deal-from-y: -88px;
}

@keyframes deal-card {
  0% {
    opacity: 1;
    transform: translate(var(--deal-from-x), var(--deal-from-y)) scale(0.92);
  }
  70% {
    opacity: 1;
    transform: translate(calc(var(--deal-from-x) * 0.08), calc(var(--deal-from-y) * 0.08)) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

.card-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  cursor: pointer;
}

.card-modal-layout {
  display: grid;
  grid-template-columns: minmax(260px, clamp(320px, 33vw, 430px)) 1fr;
  gap: 20px;
  align-items: start;
}

.card-modal-media {
  max-width: 100%;
  background: rgba(255, 255, 255, 0.02);
}

.card-modal-copy {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.card-modal-zoom {
  display: grid;
  grid-template-columns: auto minmax(140px, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.card-modal-zoom label,
.card-modal-zoom span {
  font-size: 0.84rem;
  color: var(--ink-soft);
}

.card-modal-zoom input {
  width: 100%;
}

.tutorial-card-media {
  display: block;
  aspect-ratio: 5 / 7;
}

.tutorial-card-media img {
  width: 100%;
  height: auto;
}

@media (max-width: 1280px) {
  .setup-modal-dialog {
    width: min(980px, 100%);
  }

  .tutorial-turn-stage.has-side-panel,
  .tutorial-focus-card,
  .dice-practice-stage {
    grid-template-columns: 1fr;
  }

  .dice-practice-stage {
    min-height: 0;
  }

  .dice-practice-box {
    min-height: 170px;
  }
}

@media (max-width: 1100px) {
  .tutorial-page {
    padding: 28px 14px 40px;
  }

  .setup-modal-dialog {
    width: 100%;
    padding: 14px 16px 18px;
    border-radius: 16px;
  }

  .setup-modal-stage {
    min-height: 320px;
  }

  .tutorial-turn-lane-cards {
    flex-wrap: wrap;
    justify-content: center;
  }

  .tutorial-turn-lane.single-owner.is-tight .tutorial-stage-card,
  .tutorial-turn-lane.is-compact .tutorial-stage-card,
  .tutorial-stage-card {
    width: min(148px, 27vw);
  }

  .tutorial-ghost-card {
    width: min(136px, 24vw);
  }

  .card-modal-dialog {
    width: min(860px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    margin: 12px auto;
  }
}

@media (max-width: 760px) {
  .tutorial-page {
    padding: 24px 12px 28px;
  }

  .action-button,
  .system-button {
    min-height: 40px;
    padding: 10px 14px;
    font-size: 0.88rem;
    gap: 6px;
  }

  .tutorial-experience {
    gap: 14px;
  }

  .setup-modal-dialog {
    padding: 12px 12px 16px;
    border-radius: 14px;
    gap: 10px;
  }

  .setup-modal-tracker-stack {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
  }

  .setup-modal-stage {
    min-height: 240px;
    padding: 12px;
  }

  .dice-practice-stage {
    min-height: 0;
  }

  .dice-practice-box {
    min-height: 150px;
  }

  .setup-modal-body {
    font-size: 0.95rem;
  }

  .setup-demo-stack {
    height: 310px;
  }

  .shuffle-demo .setup-demo-card:nth-child(1) { --x1: -128px; --y1: -106px; --x2: 118px; --y2: 92px; --x3: -74px; --y3: 102px; }
  .shuffle-demo .setup-demo-card:nth-child(2) { --x1: 138px; --y1: -92px; --x2: -124px; --y2: 82px; --x3: 92px; --y3: -116px; }
  .shuffle-demo .setup-demo-card:nth-child(3) { --x1: -126px; --y1: 94px; --x2: 132px; --y2: -86px; --x3: -142px; --y3: -28px; }
  .shuffle-demo .setup-demo-card:nth-child(4) { --x1: 126px; --y1: 106px; --x2: -108px; --y2: -98px; --x3: 126px; --y3: 10px; }
  .shuffle-demo .setup-demo-card:nth-child(5) { --x1: -146px; --y1: -26px; --x2: 116px; --y2: -108px; --x3: -108px; --y3: 94px; }
  .shuffle-demo .setup-demo-card:nth-child(6) { --x1: 102px; --y1: -118px; --x2: -142px; --y2: 102px; --x3: 142px; --y3: 88px; }
  .shuffle-demo .setup-demo-card:nth-child(7) { --x1: -94px; --y1: 114px; --x2: 144px; --y2: -8px; --x3: -128px; --y3: -104px; }
  .shuffle-demo .setup-demo-card:nth-child(8) { --x1: 148px; --y1: 36px; --x2: -122px; --y2: -86px; --x3: 62px; --y3: 116px; }

  .deal-demo {
    gap: 22px;
    width: min(100%, 320px);
  }

  .deal-source-stack {
    right: 24px;
  }

  .deal-row {
    grid-template-columns: repeat(4, 46px);
    gap: 8px;
    min-height: 64px;
  }

  .deal-row .setup-demo-card,
  .deal-source-stack .setup-demo-card {
    width: 46px;
  }

  .opponent-card,
  .player-card {
    --deal-from-x: calc(146px - (var(--card-index) * 52px));
  }

  .card-detail,
  .card-modal-layout {
    grid-template-columns: 1fr;
  }

  .card-modal-zoom {
    grid-template-columns: 1fr;
  }

  .action-button-group,
  .action-button-group-stacked,
  .setup-modal-actions {
    flex-direction: column;
  }

  .setup-modal-header {
    flex-direction: column;
    align-items: stretch;
  }

  .setup-modal-actions .action-button,
  .setup-modal-actions .system-button {
    width: 100%;
  }

  .dice-practice-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .dice-practice-button {
    width: 100%;
    min-width: 0;
    padding: 9px 10px;
  }

  .tutorial-turn-lane {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .tutorial-turn-lane-label {
    font-size: 0.74rem;
  }

  .tutorial-turn-lane.single-owner.is-tight .tutorial-stage-card,
  .tutorial-turn-lane.is-compact .tutorial-stage-card,
  .tutorial-stage-card,
  .tutorial-ghost-card {
    width: min(72px, 18vw);
  }

  .tutorial-handoff-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-height: 280px;
  }

  .lesson-arrow {
    top: 6px;
    left: 6px;
    font-size: 0.68rem;
  }
}

@media (max-width: 560px) {
  .tutorial-launch {
    min-height: calc((100vh - 140px) / 2);
  }

  .dice-explainer {
    grid-template-columns: 1fr;
    gap: 10px;
    justify-items: center;
  }

  .dice-type-card {
    width: 65%;
    min-width: 0;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
  }

  .dice-svg {
    width: min(117px, 28vw);
  }

  .action-button,
  .system-button {
    min-height: 36px;
    padding: 8px 11px;
    font-size: 0.8rem;
    letter-spacing: 0.01em;
  }

  .setup-modal-header h2 {
    font-size: 1.15rem;
  }

  .setup-teach-card {
    width: min(100%, 300px);
  }

  .setup-modal-tracker-stack {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 2px;
  }

  .setup-modal-back-chip {
    width: 44px;
    min-height: 100%;
    justify-self: start;
  }

  .setup-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .tutorial-handoff-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tutorial-handoff-card,
  .tutorial-stage-card,
  .tutorial-ghost-card {
    width: min(56px, calc(25vw - 12px));
    gap: 6px;
  }

  .dice-practice-button {
    width: 100%;
    min-width: 0;
    padding: 8px 9px;
  }

  .dice-practice-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-modal-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    margin: 8px auto;
    padding: 44px 12px 14px;
    border-radius: 14px;
  }

  .card-modal-close {
    top: 10px;
    right: 10px;
  }

  .card-modal-copy {
    gap: 10px;
  }

  .mini-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .tutorial-card-content {
    gap: 8px;
    padding: 10px;
  }

  .tutorial-card h4,
  .card-detail h3 {
    font-size: 0.9rem;
  }

  .vc-tracker {
    padding: 8px 10px;
    gap: 2px 8px;
  }

  .vc-tracker strong {
    font-size: 1.45rem;
  }

  .mini-card span {
    font-size: 0.78rem;
  }

  .mini-card strong {
    font-size: 0.68rem;
  }

  .setup-choice-card-body {
    gap: 6px;
    padding: 8px 8px 7px;
  }

  .setup-choice-card-body > strong {
    font-size: 0.72rem;
  }

  .setup-choice-card-body > span {
    font-size: 0.62rem;
  }

  .setup-choice-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .setup-choice-card .mini-card-actions {
    gap: 4px;
    padding: 0 8px 3px;
  }

  .setup-choice-card .mini-action {
    min-height: 26px;
    padding: 4px 7px;
    font-size: 0.66rem;
  }
}

@media (max-width: 430px) {
  .dice-explainer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    justify-items: stretch;
  }

  .dice-type-card {
    width: 100%;
    justify-self: stretch;
    gap: 6px;
    padding: 10px 8px;
  }

  .dice-svg {
    width: min(94px, 22vw);
  }

  .tutorial-turn-lane.single-owner.is-tight .tutorial-stage-card,
  .tutorial-turn-lane.is-compact .tutorial-stage-card,
  .tutorial-stage-card,
  .tutorial-ghost-card {
    width: min(44px, 11vw);
    gap: 4px;
  }

  .tutorial-handoff-card {
    width: min(44px, calc(25vw - 10px));
  }

  .tutorial-handoff-card span,
  .tutorial-stage-card h4 {
    font-size: 0.66rem;
  }

  .tutorial-stage-vc {
    top: 4%;
    left: 5%;
    padding: 3px 6px;
    gap: 1px 4px;
  }

  .tutorial-stage-vc span {
    font-size: 0.5rem;
  }

  .tutorial-stage-vc strong {
    font-size: 0.88rem;
  }
}

@media (max-width: 344px) {
  .tutorial-page {
    padding: 14px 8px 18px;
    --card-crop-scale: 1.04;
  }

  .tutorial-experience {
    gap: 10px;
  }

  .setup-modal-dialog {
    padding: 10px 10px 14px;
  }

  .setup-modal-stage {
    min-height: 0;
    padding: 10px;
  }

  .setup-teach-card {
    width: min(100%, 240px);
  }

  .setup-demo-stack {
    height: 240px;
  }

  .dice-explainer,
  .dice-practice-stage {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .dice-type-card {
    width: 100%;
    padding: 10px 8px;
  }

  .dice-svg {
    width: min(82px, 24vw);
  }

  .dice-practice-box {
    min-height: 130px;
  }

  .setup-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .setup-choice-card-body {
    gap: 4px;
    padding: 7px 7px 6px;
  }

  .setup-choice-card-body > strong {
    font-size: 0.66rem;
  }

  .setup-choice-card-body > span {
    font-size: 0.58rem;
  }

  .setup-choice-card .mini-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 0 6px 4px;
  }

  .setup-choice-card .mini-action {
    min-height: 22px;
    padding: 3px 5px;
    font-size: 0.58rem;
  }

  .mini-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .mini-card-stack {
    gap: 8px;
  }

  .mini-card span {
    font-size: 0.7rem;
  }

  .mini-card strong {
    font-size: 0.62rem;
  }

  .tutorial-turn-lane {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 4px;
  }

  .tutorial-turn-lane-label {
    font-size: 0.64rem;
  }

  .tutorial-turn-lane.single-owner.is-tight .tutorial-stage-card,
  .tutorial-turn-lane.is-compact .tutorial-stage-card,
  .tutorial-stage-card,
  .tutorial-ghost-card {
    width: min(38px, 9vw);
    gap: 3px;
  }

  .tutorial-handoff-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-height: 220px;
  }

  .tutorial-handoff-card {
    width: min(42px, calc(25vw - 10px));
  }

  .tutorial-handoff-card span,
  .tutorial-stage-card h4 {
    font-size: 0.58rem;
  }

  .tutorial-stage-vc {
    top: 4%;
    left: 4%;
    padding: 2px 5px;
    gap: 1px 3px;
  }

  .tutorial-stage-vc span {
    font-size: 0.45rem;
  }

  .tutorial-stage-vc strong {
    font-size: 0.82rem;
  }

  .tutorial-focus-card {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .card-modal-dialog {
    width: calc(100vw - 10px);
    max-height: calc(100vh - 10px);
    margin: 5px auto;
    padding: 40px 10px 12px;
  }
}