/* FCC Family Cards — Phase 7B.4 Wave C (iOS / warm table polish)
 *
 * TODO(cursor): Cloud replay viewer (fcc-games-replay-viewer.js renderBoard) still
 * dumps JSON for gameId family-cards; it does not mount this renderRoom output.
 * Per Wave C scope, replay-*.js is off-limits — integrate there in a future wave.
 *
 * VoiceOver smoke (manual): tab through .fc-hand with a 4-card hand; each .fc-card
 * should announce aria-label built from color + rank (e.g. "Sun 7", "Wild Draw 4").
 * Verify when tested on device — not automated in CI.
 */

:root {
  --fc-sun-1: #ffe680;
  --fc-sun-2: #f4a300;
  --fc-sky-1: #a9e5ff;
  --fc-sky-2: #3084d6;
  --fc-leaf-1: #b5e8b0;
  --fc-leaf-2: #3fa34d;
  --fc-berry-1: #ffb7b7;
  --fc-berry-2: #d8475f;
  --fc-wild-grad: conic-gradient(from 220deg,
    var(--fc-sun-2), var(--fc-sky-2),
    var(--fc-leaf-2), var(--fc-berry-2), var(--fc-sun-2));
  --fc-card-radius: 18px;
  --fc-card-radius-lg: 22px;
  --fc-surface: #fffcf7;
  --fc-surface-2: #f4efe6;
  --fc-ink: #2a2320;
  --fc-ink-soft: #6b6157;
  --fc-ring-warm: rgba(244, 163, 0, 0.55);
  --fc-shadow-card: 0 6px 18px rgba(42, 35, 32, 0.18);
  --fc-shadow-card-hover: 0 10px 28px rgba(42, 35, 32, 0.24);
  --fc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fc-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fc-card-w: 80px;
  --fc-card-h: 112px;
}

@media (min-width: 481px) {
  :root {
    --fc-card-w: 96px;
    --fc-card-h: 134px;
  }
}

@media (min-width: 901px) {
  :root {
    --fc-card-w: 104px;
    --fc-card-h: 146px;
  }
}

@media (prefers-contrast: more) {
  :root {
    --fc-sun-2: #c77f00;
    --fc-sky-2: #1f5ea3;
    --fc-leaf-2: #2d7a36;
    --fc-berry-2: #a83248;
    --fc-ink: #1a1412;
  }
}

/* ── Root / shell ─────────────────────────────────────────── */
.fc-root.fcc-games-game {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 720px;
  margin: 0 auto;
  min-height: 420px;
  color: var(--fc-ink);
  background: linear-gradient(180deg, var(--fc-surface) 0%, #f0ebe2 100%);
  border-radius: 20px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-top: env(safe-area-inset-top, 0);
}

.fc-root > .fcc-games-game__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(42, 35, 32, 0.08);
}

.fc-root > .fcc-games-game__head .fcc-games-game__title {
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
}

.fc-stage {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 12px 20px;
  min-height: 320px;
}

/* ── Banners ─────────────────────────────────────────────── */
.fc-banner-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fc-banner {
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  animation: fc-banner-in 200ms var(--fc-ease) both;
}

.fc-banner[hidden] {
  display: none !important;
}

.fc-banner--reconnecting {
  background: rgba(255, 252, 247, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--fc-ink-soft);
}

.fc-banner--caughtup {
  background: rgba(181, 232, 176, 0.45);
  color: #1e4d22;
  animation: fc-banner-in 200ms var(--fc-ease) both, fc-banner-out 240ms var(--fc-ease) 1.2s forwards;
}

.fc-banner--away {
  background: rgba(255, 183, 183, 0.35);
  color: #5c2323;
}

.fc-banner--ended {
  background: rgba(169, 229, 255, 0.4);
  color: #153a5c;
}

@keyframes fc-banner-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fc-banner-out {
  to { opacity: 0; transform: translateY(-4px); }
}

/* ── Turn bar ─────────────────────────────────────────────── */
.fc-turn-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 16px;
  background: var(--fc-surface-2);
  outline: none;
}

.fc-turn-bar:focus-visible {
  box-shadow: 0 0 0 3px var(--fc-ring-warm);
  outline: none;
}

.fc-turn-bar__label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--fc-ink-soft);
}

.fc-turn-bar__name {
  font-weight: 700;
  font-size: 1.05rem;
}

/* ── Players ───────────────────────────────────────────────── */
.fc-players {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 8px 10px;
  padding: 4px 0;
}

@media (max-width: 480px) {
  .fc-players {
    max-width: 100%;
  }
  .fc-player-chip:nth-child(n+6) {
    flex-basis: 40%;
  }
}

.fc-dir-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 1.15rem;
  color: var(--fc-ink-soft);
  transition: transform 320ms var(--fc-ease);
}

.fc-dir-icon.is-dir-spin {
  animation: fc-dir-flip 320ms var(--fc-ease);
}

@keyframes fc-dir-flip {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}

.fc-player-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 72px;
  padding: 6px 8px 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(42, 35, 32, 0.08);
  transition: transform 180ms var(--fc-ease), box-shadow 180ms var(--fc-ease);
}

.fc-player-chip.is-active-turn {
  transform: scale(1.04);
  box-shadow: 0 0 0 2px var(--fc-ring-warm);
  animation: fc-active-ring-glow 1.6s ease-in-out infinite;
}

@keyframes fc-active-ring-glow {
  0%, 100% { box-shadow: 0 0 0 2px var(--fc-ring-warm); }
  50% { box-shadow: 0 0 0 2px rgba(244, 163, 0, 0.35); }
}

.fc-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--fc-sky-1), var(--fc-sky-2));
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
}

.fc-chip__text {
  text-align: center;
}

.fc-chip__name {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-chip__turn-line {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--fc-sun-2);
  letter-spacing: 0.2px;
}

.fc-chip__count {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--fc-ink-soft);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(42, 35, 32, 0.06);
}

.fc-chip__count.is-one-left {
  background: rgba(244, 163, 0, 0.35);
  color: #5a3d00;
  animation: fc-one-left-pill 1.4s ease-in-out infinite;
}

@keyframes fc-one-left-pill {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: 0.9; }
}

/* ── Field: discard + draw ───────────────────────────────── */
.fc-field {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 16px 8px 8px;
  flex: 1;
}

@media (max-width: 480px) {
  .fc-field {
    flex-direction: column;
    gap: 16px;
  }
}

.fc-discard-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fc-discard {
  position: relative;
  width: calc(var(--fc-card-w) + 16px);
  height: calc(var(--fc-card-h) + 16px);
  display: grid;
  place-items: center;
}

.fc-stack-ghost {
  position: absolute;
  width: var(--fc-card-w);
  height: var(--fc-card-h);
  pointer-events: none;
  opacity: 0.92;
}

.fc-discard > .fc-stack-ghost:nth-child(1) {
  transform: rotate(-2deg) translate(-4px, 4px);
  z-index: 0;
}

.fc-discard > .fc-stack-ghost:nth-child(2) {
  transform: rotate(1deg) translate(2px, 2px);
  z-index: 1;
}

.fc-discard-top {
  position: relative;
  z-index: 2;
  width: var(--fc-card-w);
  height: var(--fc-card-h);
  box-shadow: var(--fc-shadow-card);
}

.fc-root:not(.fc-scrub-back) .fc-discard-top:not(.fc-card--empty) {
  animation: fc-discard-settle 280ms var(--fc-ease) both;
}

@keyframes fc-discard-settle {
  0% {
    opacity: 0;
    transform: translateY(-40px) scale(1.06) rotate(calc(var(--fc-land, 0deg) * 0.3));
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(var(--fc-land, 0deg));
  }
}

.fc-active-color {
  position: absolute;
  right: -8px;
  top: -8px;
  min-width: 44px;
  min-height: 44px;
  padding: 4px 6px 6px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  z-index: 4;
  background: var(--fc-surface);
  box-shadow: 0 4px 12px rgba(42, 35, 32, 0.15);
  outline: none;
}

.fc-active-color__swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fc-active-color__text {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fc-ink-soft);
  line-height: 1;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.fc-active-color:focus-visible {
  box-shadow: 0 0 0 3px var(--fc-ring-warm), 0 4px 12px rgba(42, 35, 32, 0.15);
  outline: none;
}

.fc-active-color[data-color="sun"] .fc-active-color__swatch { background: linear-gradient(145deg, var(--fc-sun-1), var(--fc-sun-2)); }
.fc-active-color[data-color="sky"] .fc-active-color__swatch { background: linear-gradient(145deg, var(--fc-sky-1), var(--fc-sky-2)); }
.fc-active-color[data-color="leaf"] .fc-active-color__swatch { background: linear-gradient(145deg, var(--fc-leaf-1), var(--fc-leaf-2)); }
.fc-active-color[data-color="berry"] .fc-active-color__swatch { background: linear-gradient(145deg, var(--fc-berry-1), var(--fc-berry-2)); }
.fc-active-color[data-color="wild"] .fc-active-color__swatch { background: var(--fc-wild-grad); }

.fc-active-color.is-color-bump .fc-active-color__swatch {
  animation: fc-color-pulse 1.5s ease-out 1;
}

@keyframes fc-color-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(244, 163, 0, 0.5); }
  40% { transform: scale(1.18); box-shadow: 0 0 0 10px rgba(244, 163, 0, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(244, 163, 0, 0); }
}

/* Draw pile control */
.fc-draw {
  position: relative;
  min-width: calc(var(--fc-card-w) + 24px);
  min-height: calc(var(--fc-card-h) + 32px);
  padding: 12px 16px 20px;
  border: none;
  border-radius: var(--fc-card-radius-lg);
  background: transparent;
  font: inherit;
  cursor: pointer;
  color: var(--fc-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  outline: none;
}

.fc-draw:focus-visible {
  box-shadow: 0 0 0 3px var(--fc-ring-warm);
  outline: none;
}

.fc-draw__stack {
  position: relative;
  width: var(--fc-card-w);
  height: var(--fc-card-h);
}

.fc-draw-card {
  position: absolute;
  inset: 0;
  width: var(--fc-card-w);
  height: var(--fc-card-h);
  box-shadow: var(--fc-shadow-card);
}

.fc-draw-card:nth-child(1) { transform: translate(0, 0); }
.fc-draw-card:nth-child(2) { transform: translate(1px, 1px); }
.fc-draw-card:nth-child(3) { transform: translate(2px, 2px); }

.fc-draw__label {
  font-weight: 600;
  letter-spacing: 0.2px;
}

.fc-draw__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--fc-surface);
  font-weight: 700;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(42, 35, 32, 0.12);
}

.fc-draw.is-attention::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 45%,
    rgba(255, 255, 255, 0.55) 55%,
    transparent 100%
  );
  background-size: 200% 100%;
  opacity: 0;
  animation: fc-draw-shimmer-sheen 8s linear infinite;
}

@keyframes fc-draw-shimmer-sheen {
  0%, 92% { opacity: 0; background-position: 100% 0; }
  96% { opacity: 0.85; background-position: 0 0; }
  100% { opacity: 0; background-position: 0 0; }
}

.fc-draw.is-tappable {
  animation: fc-draw-ring 1.5s ease-in-out infinite;
}

@keyframes fc-draw-ring {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(244, 163, 0, 0)); }
  50% { filter: drop-shadow(0 0 10px rgba(244, 163, 0, 0.55)); }
}

.fc-reshuffle-toast {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fc-ink-soft);
  opacity: 0;
  pointer-events: none;
}

.fc-draw.is-reshuffling .fc-draw__stack {
  animation: fc-reshuffle-blip 180ms ease-in-out 3;
}

.fc-draw.is-reshuffling .fc-reshuffle-toast {
  animation: fc-reshuffle-toast 800ms var(--fc-ease) forwards;
}

@keyframes fc-reshuffle-blip {
  0%, 100% { transform: translate(1px, 1px) scale(1); filter: blur(0); }
  50% { transform: translate(1px, 1px) scale(0.96); filter: blur(1px); }
}

@keyframes fc-reshuffle-toast {
  0% { opacity: 0; transform: translateX(-50%) translateY(60%); }
  15% { opacity: 1; transform: translateX(-50%) translateY(100%); }
  85% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Cards ─────────────────────────────────────────────────── */
.fc-card {
  --fc-land: 0deg;
  --lift: 0px;
  position: relative;
  width: var(--fc-card-w);
  height: var(--fc-card-h);
  padding: 0;
  border: none;
  border-radius: var(--fc-card-radius);
  box-sizing: border-box;
  font: inherit;
  cursor: pointer;
  flex: 0 0 auto;
  outline: none;
  overflow: visible;
  background: linear-gradient(135deg, var(--fc-sun-1), var(--fc-sun-2));
  box-shadow: var(--fc-shadow-card), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  transition: transform 90ms ease, box-shadow 180ms var(--fc-ease);
}

.fc-card:focus-visible {
  box-shadow: var(--fc-shadow-card), 0 0 0 3px var(--fc-ring-warm);
  outline: none;
  outline-offset: 3px;
}

.fc-card:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.25);
}

.fc-card[data-color="sun"] { background: linear-gradient(135deg, var(--fc-sun-1), var(--fc-sun-2)); }
.fc-card[data-color="sky"] { background: linear-gradient(135deg, var(--fc-sky-1), var(--fc-sky-2)); color: #fff; }
.fc-card[data-color="leaf"] { background: linear-gradient(135deg, var(--fc-leaf-1), var(--fc-leaf-2)); color: #0f2a12; }
.fc-card[data-color="berry"] { background: linear-gradient(135deg, var(--fc-berry-1), var(--fc-berry-2)); color: #fff; }
.fc-card[data-color="wild"] { background: var(--fc-wild-grad); color: #fff; }

.fc-card[data-color="sky"] .fc-card__glyph,
.fc-card[data-color="berry"] .fc-card__glyph,
.fc-card[data-color="wild"] .fc-card__glyph {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.fc-card__hit-zone {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -24px;
  height: 32px;
  pointer-events: none;
}

.fc-card__corner {
  position: absolute;
  width: 10%;
  min-width: 14px;
  font-size: max(10px, calc(var(--fc-card-w) * 0.1));
  line-height: 1;
  color: rgba(42, 35, 32, 0.85);
  font-family: system-ui, "Segoe UI Symbol", "Apple Symbols", sans-serif;
}

.fc-card__corner--tl { top: 6px; left: 6px; }
.fc-card__corner--br { bottom: 6px; right: 6px; transform: rotate(180deg); }

.fc-card__disc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 75%;
  height: 55%;
  transform: translate(-50%, -50%) rotate(-12deg);
  border-radius: 50%;
  background: rgba(255, 252, 247, 0.95);
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 2px rgba(42, 35, 32, 0.08);
}

.fc-card__rank {
  transform: rotate(12deg);
  font-weight: 800;
  font-size: clamp(1.4rem, calc(var(--fc-card-w) * 0.28), 2.1rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fc-ink);
}

.fc-card__wild-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transform: rotate(12deg);
}

.fc-card__wild-star {
  font-size: 0.85em;
  line-height: 1;
}

.fc-card__wild-plus {
  font-weight: 800;
  font-size: 1em;
}

.fc-card--ghost,
.fc-card--empty {
  cursor: default;
  pointer-events: none;
}

.fc-card--empty {
  opacity: 0.35;
  background: var(--fc-surface-2);
}

@media (hover: hover) {
  .fc-field .fc-discard-top.fc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fc-shadow-card-hover), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
    transition: transform 180ms var(--fc-ease), box-shadow 180ms var(--fc-ease);
  }
}

.fc-card:active:not(:disabled) {
  transform: scale(0.97);
}

.fc-card--face-down {
  background: linear-gradient(145deg, var(--fc-surface-2), #c7b89a) !important;
  color: var(--fc-ink);
}

.fc-card--face-down .fc-card__back {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.fc-card--face-down .fc-card__back-motif {
  font-size: clamp(1.6rem, calc(var(--fc-card-w) * 0.35), 2.4rem);
  opacity: 0.5;
  color: #c99400;
}

.fc-replay-hidden .fc-hand .fc-card--face-down .fc-card__back-motif {
  opacity: 0.55;
}

/* ── Hand tray ─────────────────────────────────────────────── */
.fc-hand {
  --fc-overlap: 52%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  min-height: calc(var(--fc-card-h) + 56px);
  padding: 8px 12px calc(16px + env(safe-area-inset-bottom, 0));
  margin: 0 -8px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  gap: 0;
}

.fc-hand::-webkit-scrollbar {
  display: none;
}

@media (min-width: 481px) {
  .fc-hand { --fc-overlap: 38%; }
}

@media (min-width: 901px) {
  .fc-hand { --fc-overlap: 32%; }
}

.fc-hand .fc-card {
  scroll-snap-align: center;
  margin-left: calc(var(--fc-card-w) * var(--fc-overlap) * -1);
  transform-origin: 50% 100%;
  transform:
    translateY(var(--lift, 0px))
    rotate(calc((var(--i, 0) - (var(--n, 1) - 1) / 2) * 4deg));
  transition: transform 180ms var(--fc-ease), z-index 0s linear 0s;
  z-index: calc(1 + var(--i, 0));
}

.fc-hand .fc-card:first-child {
  margin-left: 0;
}

@media (hover: hover) {
  .fc-hand .fc-card:hover:not(:disabled) {
    transform: translateY(calc(-14px + var(--lift, 0px))) scale(1.05) rotate(0deg) !important;
    z-index: 20 !important;
  }
}

.fc-hand .fc-card:focus-visible:not(:disabled) {
  transform: translateY(calc(-14px + var(--lift, 0px))) scale(1.05) rotate(0deg) !important;
  z-index: 20 !important;
}

.fc-hand .fc-card.is-active-play {
  transform: translateY(calc(-28px + var(--lift, 0px))) scale(1.08) rotate(0deg) !important;
  transition: transform 280ms var(--fc-spring) !important;
  z-index: 25 !important;
}

.fc-hand .fc-card.is-one-card-left {
  animation: fc-one-card-glow 1.4s var(--fc-ease) 2;
}

@keyframes fc-one-card-glow {
  0%, 100% {
    box-shadow: var(--fc-shadow-card), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
    filter: saturate(1);
  }
  50% {
    box-shadow: 0 12px 32px rgba(244, 163, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
    filter: saturate(1.08);
  }
}

/* Draw hint: non-layout motion (keeps hand fan transforms intact) */
.fc-root:not(.fc-scrub-back)[data-fc-last-action="forced_draw"] .fc-hand .fc-card:last-child {
  animation: fc-draw-pop 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fc-root:not(.fc-scrub-back)[data-fc-last-action="penalty_draw"] .fc-hand .fc-card:nth-last-child(3) { animation: fc-draw-pop 240ms cubic-bezier(0.22, 1, 0.36, 1) 0ms both; }
.fc-root:not(.fc-scrub-back)[data-fc-last-action="penalty_draw"] .fc-hand .fc-card:nth-last-child(2) { animation: fc-draw-pop 240ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both; }
.fc-root:not(.fc-scrub-back)[data-fc-last-action="penalty_draw"] .fc-hand .fc-card:last-child { animation: fc-draw-pop 240ms cubic-bezier(0.22, 1, 0.36, 1) 160ms both; }

@keyframes fc-draw-pop {
  0% { filter: brightness(1.15) saturate(1.1); }
  70% { filter: brightness(1.05) saturate(1.05); }
  100% { filter: brightness(1) saturate(1); }
}

/* TODO(cursor): True FLIP from hand rect to discard needs a post-render hook
 * (getBoundingClientRect) which is outside renderRoom-only scope; using CSS
 * discard settle + draw arc approximations above. */

.fc-one-card-banner {
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(255, 230, 128, 0.55);
  color: #4a3a12;
  animation: fc-one-left-banner 3.2s var(--fc-ease) forwards;
}

@keyframes fc-one-left-banner {
  0%, 82% { opacity: 1; max-height: 64px; margin-bottom: 0; }
  100% { opacity: 0; max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; visibility: hidden; }
}

.fc-notice {
  text-align: center;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(169, 229, 255, 0.35);
  font-weight: 600;
}

.fc-pass-btn {
  align-self: center;
  min-height: 44px;
  padding-left: 20px;
  padding-right: 20px;
}

/* ── Color picker bottom sheet ─────────────────────────────── */
.fc-color-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: end;
  justify-items: center;
  background: rgba(42, 35, 32, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fc-sheet-backdrop 240ms var(--fc-ease) both;
}

.fc-color-picker {
  width: min(100vw, 480px);
  border-radius: 28px 28px 0 0;
  background: var(--fc-surface);
  padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -12px 40px rgba(42, 35, 32, 0.18);
  transform: translateY(0);
  animation: fc-sheet-in 320ms var(--fc-ease) both;
}

@keyframes fc-sheet-backdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fc-sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.fc-color-picker__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 12px;
}

@media (orientation: landscape) and (max-height: 520px) {
  .fc-color-picker__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.fc-color-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 88px;
  min-width: 0;
  border: none;
  border-radius: 22px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: var(--fc-ink);
  transition: transform 100ms ease;
  outline: none;
}

.fc-color-tile:active {
  transform: scale(0.95);
}

.fc-color-tile:focus-visible {
  box-shadow: 0 0 0 3px var(--fc-ring-warm);
  outline: none;
}

.fc-color-tile__swatch {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  box-shadow: var(--fc-shadow-card);
}

.fc-color-tile__swatch[data-color="sun"] { background: linear-gradient(135deg, var(--fc-sun-1), var(--fc-sun-2)); }
.fc-color-tile__swatch[data-color="sky"] { background: linear-gradient(135deg, var(--fc-sky-1), var(--fc-sky-2)); }
.fc-color-tile__swatch[data-color="leaf"] { background: linear-gradient(135deg, var(--fc-leaf-1), var(--fc-leaf-2)); }
.fc-color-tile__swatch[data-color="berry"] { background: linear-gradient(135deg, var(--fc-berry-1), var(--fc-berry-2)); }

.fc-color-picker__cancel {
  width: 100%;
  min-height: 44px;
}

/* ── Celebration ───────────────────────────────────────────── */
.fc-celebration {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(42, 35, 32, 0.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow: hidden;
  animation: fc-fade-in 200ms var(--fc-ease) both;
}

.fc-confetti {
  position: absolute;
  top: -12%;
  left: calc(var(--fc-cf-i, 0) * 5% + 2%);
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.95;
  pointer-events: none;
  background: hsl(calc(var(--fc-cf-i, 0) * 41), 85%, 58%);
  animation: fc-confetti-fall 1.2s var(--fc-ease) forwards;
  animation-delay: calc(var(--fc-cf-i, 0) * 40ms);
}

@keyframes fc-confetti-fall {
  0% { transform: translateY(0) rotate(0deg) translateX(0); opacity: 1; }
  100% { transform: translateY(110vh) rotate(540deg) translateX(calc((var(--fc-cf-i, 0) - 10) * 8px)); opacity: 0.85; }
}

.fc-celebration__panel {
  position: relative;
  z-index: 2;
  max-width: 340px;
  margin: 16px;
  padding: 24px 22px;
  border-radius: 24px;
  background: var(--fc-surface);
  box-shadow: 0 20px 50px rgba(42, 35, 32, 0.22);
  text-align: center;
}

.fc-celebration__head {
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
}

.fc-celebration__sub {
  margin: 0 0 18px;
  font-size: 1rem;
  color: var(--fc-ink-soft);
}

.fc-celebration__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.fc-celebration__actions .fcc-games-btn {
  min-height: 44px;
  min-width: 120px;
}

@keyframes fc-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── prefers-reduced-motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fc-banner,
  .fc-dir-icon.is-dir-spin,
  .fc-player-chip.is-active-turn,
  .fc-chip__count.is-one-left,
  .fc-root:not(.fc-scrub-back) .fc-discard-top:not(.fc-card--empty),
  .fc-active-color.is-color-bump .fc-active-color__swatch,
  .fc-draw.is-tappable,
  .fc-draw.is-attention::after,
  .fc-draw.is-reshuffling .fc-draw__stack,
  .fc-draw.is-reshuffling .fc-reshuffle-toast,
  .fc-hand .fc-card.is-one-card-left,
  .fc-root:not(.fc-scrub-back)[data-fc-last-action="forced_draw"] .fc-hand .fc-card:last-child,
  .fc-root:not(.fc-scrub-back)[data-fc-last-action="penalty_draw"] .fc-hand .fc-card,
  .fc-one-card-banner,
  .fc-color-picker,
  .fc-color-picker-backdrop,
  .fc-confetti,
  .fc-celebration {
    animation: none !important;
    transition: opacity 120ms ease !important;
  }

  .fc-one-card-banner {
    animation: fc-rm-flash 240ms ease both !important;
  }

  @keyframes fc-rm-flash {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; max-height: 0; }
  }

  .fc-hand .fc-card:hover:not(:disabled),
  .fc-hand .fc-card:focus-visible:not(:disabled) {
    transform: translateY(calc(-6px + var(--lift, 0px))) scale(1.02) rotate(0deg) !important;
  }
}

@media (prefers-contrast: more) {
  .fc-card,
  .fc-discard-top {
    box-shadow: var(--fc-shadow-card), inset 0 0 0 2px rgba(42, 35, 32, 0.35);
  }
}