/* --- Board shell --------------------------------- */
.board {
  background: linear-gradient(180deg, var(--felt-a), var(--felt-b));
  border: 1px solid #98d7b8; border-radius: 14px;
  box-shadow: var(--shadow); padding: 8px;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 8px;
}

/* --- Player rows --------------------------------- */
.player-row { display: grid; grid-template-rows: auto minmax(0,1fr); gap: 5px; overflow: hidden; }
.my-row {
  grid-template-rows: 1fr auto;
  overflow: visible;
  position: relative;
  z-index: 20;
}
.opponent-row .meld-slots,
.my-row .meld-slots {
  height: var(--phase-band-height);
  max-height: var(--phase-band-height);
}
.opponent-row .meld-slots {
  align-self: start;
}
.my-row .meld-slots {
  align-self: end;
}

.row-head {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 7px; background: rgba(255,255,255,.18);
  border-radius: 10px; flex-wrap: nowrap; overflow: hidden;
}
.opponent-row .row-head {
  position: relative;
  height: var(--edge-band-height);
}
.player-name {
  font-size: 1.8rem; font-weight: 800; color: #fff; white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    -2px 0 0 #000,
    2px 0 0 #000,
    0 -2px 0 #000,
    0 2px 0 #000;
}

.opponent-row .player-name {
  position: absolute;
  top: -2px;
  left: 8px;
  z-index: 10;
}

.hand-count-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 11;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  font-weight: 900;
  color: #ffffff;
  background: rgba(20, 35, 55, 0.72);
  border: 1px solid rgba(255,255,255,.45);
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.hand-row {
  position: relative;
}

.hand-row .hand-count-badge {
  top: 6px;
  right: 54px;
}

/* Phase index badge — same look as .hand-count-badge, different position */
.phase-index-badge {
  position: absolute;
  top: 6px;
  z-index: 11;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  font-weight: 900;
  color: #ffffff;
  background: rgba(20, 35, 55, 0.72);
  border: 1px solid rgba(255,255,255,.45);
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
  white-space: nowrap;
  pointer-events: none;
}
/* opponent phase badge: just left of card-count badge (right: 8+32+6 = 46px) */
#opponentPanel .phase-index-badge {
  right: 50px;
}
/* my phase badge: just left of card-count badge */
.hand-row .phase-index-badge {
  top: 6px;
  right: 96px;
}

/* Sort button */
.sort-hand-btn {
  position: absolute;
  left: 8px;
  top: 6px;
  z-index: 12;
  height: 32px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(20, 35, 55, 0.72);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
  transition: background 120ms, transform 80ms;
  display: flex; align-items: center;
}
.sort-hand-btn:hover { background: rgba(50, 60, 80, 0.92); transform: scale(1.06); }
.sort-hand-btn:active { transform: scale(0.96); }

.reaction-toggle-btn {
  position: absolute;
  right: 8px;
  top: 6px;
  z-index: 13;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(20, 35, 55, 0.72);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
  transition: background 120ms, transform 80ms;
}
.reaction-toggle-btn:hover { background: rgba(50, 60, 80, 0.92); transform: scale(1.06); }
.reaction-toggle-btn:active { transform: scale(0.96); }

.reaction-panel {
  position: absolute;
  right: 8px;
  bottom: calc(100% + 4px);
  top: auto;
  z-index: 120;
  width: min(220px, calc(100% - 16px));
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(18, 30, 46, 0.92);
  box-shadow: 0 10px 24px rgba(20,35,55,.35);
}

.reaction-choice-btn {
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 6px 8px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reaction-choice-btn:hover {
  background: rgba(255,255,255,.16);
}

.reaction-choice-btn.reaction-choice-love {
  background: linear-gradient(120deg, rgba(255, 113, 170, .28), rgba(255, 70, 140, .2));
  border-color: rgba(255, 146, 196, .62);
}

.reaction-choice-btn.reaction-choice-love:hover {
  background: linear-gradient(120deg, rgba(255, 132, 181, .42), rgba(255, 88, 152, .32));
}

.reaction-choice-btn.reaction-choice-thanks {
  background: linear-gradient(120deg, rgba(252, 211, 77, .26), rgba(56, 189, 248, .2));
  border-color: rgba(253, 230, 138, .6);
}

.reaction-choice-btn.reaction-choice-respect {
  background: linear-gradient(120deg, rgba(134, 239, 172, .26), rgba(96, 165, 250, .18));
  border-color: rgba(187, 247, 208, .6);
}

.reaction-choice-btn.reaction-choice-hype {
  background: linear-gradient(120deg, rgba(251, 146, 60, .27), rgba(239, 68, 68, .24));
  border-color: rgba(254, 215, 170, .62);
}

.reaction-choice-btn.reaction-choice-laugh {
  background: linear-gradient(120deg, rgba(250, 204, 21, .24), rgba(245, 158, 11, .24));
  border-color: rgba(254, 240, 138, .62);
}

.reaction-choice-btn.reaction-choice-wow {
  background: linear-gradient(120deg, rgba(56, 189, 248, .25), rgba(14, 165, 233, .22));
  border-color: rgba(125, 211, 252, .62);
}

.reaction-choice-btn.reaction-choice-celebrate {
  background: linear-gradient(120deg, rgba(74, 222, 128, .25), rgba(250, 204, 21, .22));
  border-color: rgba(187, 247, 208, .6);
}

.reaction-bubble {
  position: absolute;
  z-index: 14;
  max-width: min(240px, calc(100% - 20px));
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.42);
  padding: 5px 8px;
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  background: rgba(20, 35, 55, 0.86);
  box-shadow: 0 8px 20px rgba(20,35,55,.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}
.reaction-bubble.show {
  opacity: 1;
  transform: translateY(0);
}

.reaction-bubble.reaction-love {
  background: linear-gradient(120deg, rgba(255, 82, 152, .94), rgba(255, 116, 177, .9));
  border-color: rgba(255, 204, 230, .85);
  box-shadow: 0 10px 24px rgba(255, 74, 156, .45);
  animation: reactionLovePulse 420ms ease;
}

.reaction-love-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.reaction-love-heart {
  position: absolute;
  left: calc(18% + (var(--heart-i) * 18%));
  bottom: 2px;
  font-size: calc(0.52rem + (var(--heart-i) * 0.04rem));
  opacity: 0;
  animation: reactionHeartRise 900ms ease-out forwards;
  animation-delay: calc(var(--heart-i) * 70ms);
}

@keyframes reactionLovePulse {
  0% { transform: translateY(0) scale(0.95); }
  45% { transform: translateY(0) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes reactionHeartRise {
  0% { opacity: 0; transform: translateY(0) scale(0.65); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-24px) scale(1.08); }
}

#opponentPanel .reaction-bubble {
  top: 43px;
  right: 8px;
}

.hand-row .reaction-bubble {
  top: 43px;
  right: 8px;
}

.player-row.active-turn {}

/* --- Opponent hand (card backs) ------------------ */
.opponent-cards {
  display: flex; gap: 3px; flex-wrap: nowrap; overflow: hidden;
  flex: 1; min-width: 0;
  align-items: center;
  justify-content: center;
}
.opponent-cards .card-back {
  flex: 1 1 0;
  min-width: 0;
  max-width: var(--hand-card-w);
  width: min(var(--hand-card-w), 100%);
  height: auto;
  aspect-ratio: 52 / 74;
  border-radius: 8px;
  border: 2.4px solid rgba(255,255,255,0.86);
  background: var(--card-back-base);
  box-shadow: 2px 2px 0 rgba(0,0,0,.22);
  position: relative;
  overflow: hidden;
}

.opponent-cards .card-back::before {
  content: "";
  position: absolute;
  inset: -2.7% 1.1% -3.2% 1.1%;
  border: 2px solid rgba(255,255,255,0.24);
  border-radius: 50%;
  transform: rotate(26deg);
}

.opponent-cards .card-back::after {
  content: "CC";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Baloo 2", sans-serif;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  font-size: calc(var(--card-w) * 0.34);
  color: #eef5ff;
  -webkit-text-stroke: 1.1px #0b1626;
  text-shadow:
    0 1px 0 rgba(255,255,255,.25),
    0 3px 0 rgba(7,14,24,.72),
    0 7px 12px rgba(0,0,0,.35);
}

/* --- Phase slots --------------------------------- */
.meld-slots { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; overflow: visible; isolation: isolate; min-width: 0; }
.meld-slots.single-slot { grid-template-columns: minmax(0,1fr); }
.meld-slots.triple-slot { grid-template-columns: repeat(3,minmax(0,1fr)); }
.meld-slots.quad-slot { grid-template-columns: repeat(4,minmax(0,1fr)); }
.phase-slot {
  background: rgba(255,255,255,.13); border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 11px; padding: 6px; backdrop-filter: blur(6px);
  display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 4px;
  min-height: var(--phase-slot-min-height);
  min-width: 0;
  position: relative;
  z-index: 1;
  overflow: visible;
}
.phase-slot.with-actions { z-index: 30; }
.phase-slot-head {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  min-width: 0;
  position: relative;
  z-index: 3;
  padding-left: 2px;
}
.phase-slot-actions {
  position: relative;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 8;
  margin-top: 2px;
}
.phase-slot-label {
  font-size: clamp(0.9rem, 1.9vw, 1.32rem); font-weight: 800; color: rgba(255,255,255,.9);
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-left: 1px;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    -2px 0 0 #000,
    2px 0 0 #000,
    0 -2px 0 #000,
    0 2px 0 #000;
}
.meld-slots.triple-slot .phase-slot-label {
  font-size: clamp(0.74rem, 1.45vw, 1.02rem);
}
.meld-slots.quad-slot .phase-slot-label {
  font-size: clamp(0.68rem, 1.2vw, 0.92rem);
}

/* Action buttons */
.phase-action-btn {
  width: 30px; height: 30px; border-radius: 8px; border: none;
  font-size: 1rem; font-weight: 800; cursor: pointer;
  display: grid; place-items: center; flex: 0 0 auto;
  transition: transform 80ms, box-shadow 80ms;
  position: relative;
  z-index: 5;
}
.phase-action-btn:hover:not(:disabled) { transform: scale(1.1); }
.phase-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.phase-check { background: rgba(255,255,255,.25); color: rgba(255,255,255,.5); }
.phase-check.active { background: #22c55e; color: #fff; box-shadow: 0 0 8px rgba(34,197,94,.55); }
.phase-clear { background: rgba(230,57,70,.75); color: #fff; }
.phase-clear:hover:not(:disabled) { background: var(--danger); }

/* Phase add shortcut */
.phase-add-btn {
  width: min(var(--hand-card-w), 100%); height: auto; aspect-ratio: 52 / 74; border-radius: 7px;
  border: 2px dashed rgba(255,255,255,.5);
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.7);
  font-size: 1.1rem; font-weight: 800; cursor: pointer;
}
.phase-hit-btn {
  flex: 1 1 0;
  min-width: 0;
  width: min(var(--hand-card-w), 100%);
  max-width: var(--hand-card-w);
  height: auto;
  aspect-ratio: 52 / 74;
  border-radius: 8px;
  border: 2px dashed rgba(255,255,255,.6);
  background: rgba(175, 180, 190, 0.35);
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}
.phase-hit-btn:hover {
  background: rgba(205, 210, 220, 0.45);
  transform: scale(1.02);
}
.phase-hit-left {
  order: -1;
}

/* Cards in slots */
.phase-slot-cards {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  justify-content: center;
  align-items: center;
  align-content: center;
  overflow: visible;
  width: 100%;
  min-width: 0;
  min-height: 0;
  border-radius: 4px;
  position: relative;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  padding: 2px 0;
}

/* Keep staged cards centered: place the + button outside normal flex flow */
/* Staging + is an inline flex item — sits directly beside the staged cards */
.phase-slot-cards .phase-add-btn:not(.phase-hit-btn) {
  flex: 0 1 auto;
  width: min(var(--hand-card-w), 100%);
  height: auto;
  aspect-ratio: 52 / 74;
  position: static;
  transform: none;
}

.phase-slot-cards.has-side-add {
  padding-right: 0;
}

.phase-slot-cards .card-obj.card-slot {
  flex: 0 1 auto;
  min-width: 0;
  max-width: var(--hand-card-w);
  width: min(var(--hand-card-w), 100%);
  height: auto;
  aspect-ratio: 52 / 74;
  max-height: none;
}
.phase-slot-cards.phase-slot-cards-laid {
  justify-content: center;
}
.phase-slot-cards.phase-slot-cards-laid .card-obj.card-slot {
  flex: 1 1 0;
  min-width: 0;
  max-width: var(--hand-card-w);
}
.phase-slot-cards .phase-laid-card {
  flex: 1 1 0;
  min-width: 0;
  max-width: var(--hand-card-w);
  width: min(var(--hand-card-w), 100%);
  height: auto;
  aspect-ratio: 52 / 74;
  min-height: 0;
  max-height: none;
  border-radius: 8px;
  align-self: center;
}
.opponent-row .phase-slot-cards .phase-laid-card {
  flex: 1 1 0;
  min-width: 0;
  max-width: var(--hand-card-w);
  width: min(var(--hand-card-w), 100%);
  height: auto;
}

/* --- Center piles -------------------------------- */
.board-center {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  align-self: center;
  gap: 12px;
  padding: 0;
  width: 100%;
}
.pile-btn {
  position: relative; width: 100%; min-height: 160px;
  border-radius: 13px; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 8px 6px;
  transition: transform 80ms, box-shadow 80ms; overflow: hidden;
}
.pile-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,35,55,.2); }
.pile-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.draw-btn {
  background: linear-gradient(145deg,#3b82f6,#1d4ed8);
  box-shadow: 4px 4px 0 #1e3a8a, 0 6px 16px rgba(29,78,216,.35);
}
.pile-btn.guide-draw {
  animation: none;
}
.pile-btn.guide-draw .draw-card-back,
#discardPileBtn.guide-draw #discardTopCard {
  animation: guideCardPulse 0.9s ease-in-out infinite;
}
@keyframes guideCardPulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(255,230,0,.7),
      0 0 8px rgba(255,215,0,.4),
      3px 3px 0 rgba(0,0,0,.25), 6px 6px 0 rgba(0,0,0,.12);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(255,230,0,1),
      0 0 20px rgba(255,215,0,.85),
      3px 3px 0 rgba(0,0,0,.25), 6px 6px 0 rgba(0,0,0,.12);
    transform: scale(1.05);
  }
}

.pile-stack {
  width: var(--pile-card-w); height: var(--pile-card-h); border-radius: 9px;
  border: 2px solid rgba(255,255,255,.4);
  background: repeating-linear-gradient(45deg,rgba(255,255,255,.15) 0 4px,transparent 4px 8px);
  box-shadow: 3px 3px 0 rgba(0,0,0,.25), 6px 6px 0 rgba(0,0,0,.12);
}
.discard-btn {
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.4) !important;
  backdrop-filter: blur(6px);
}
.pile-card-face {
  width: var(--pile-card-w); height: var(--pile-card-h); border-radius: 9px;
  border: 1.5px solid rgba(255,255,255,.5);
  display: grid; align-content: center; justify-items: center;
  font-size: 1.15rem; font-weight: 800;
}
.pile-card-face.empty { background: rgba(255,255,255,.1); color: rgba(255,255,255,.4); }
.pile-label {
  font-size: 1.4rem; color: rgba(255,255,255,.85); font-weight: 700;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    -2px 0 0 #000,
    2px 0 0 #000,
    0 -2px 0 #000,
    0 2px 0 #000;
}
.pile-btn strong { font-size: 0.75rem; color: rgba(255,255,255,.75); }

/* --- My hand row --------------------------------- */
@keyframes handWaiting {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
@keyframes handActive {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
.hand-row {
  background: linear-gradient(135deg, #ffffff, #ff6b6b, #ffffff, #c0392b);
  background-size: 400% 400%;
  animation: handWaiting 3s ease-in-out infinite;
  border-radius: 11px;
  border: 1px solid #aaa;
  padding: 7px; display: grid; gap: 6px;
  align-self: end;
  height: var(--edge-band-height);
  overflow: visible;
}
.hand-row.active-turn {
  background: linear-gradient(135deg, #ffffff, #2ecc71, #ffffff, #1a7a43);
  background-size: 400% 400%;
  animation: handActive 3s ease-in-out infinite;
  border-color: #aaa;
}
.hand-row.guide-shake {
  animation: handActive 3s ease-in-out infinite, handShake .48s ease-in-out 0s 1;
}
@keyframes handShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
.hand-meta {
  position: absolute;
  top: 6px;
  right: 46px;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
}
.btn-discard { font-size: 0.8rem; padding: 5px 10px; min-height: 34px; }
.my-hand-cards {
  display: flex; flex-wrap: nowrap; gap: 3px;
  overflow: visible;
  padding: 8px 10px 4px;
  justify-content: safe center;
  align-items: flex-end;
  min-width: 0;
}
.my-hand-cards .card-obj {
  flex: 1 1 0;
  min-width: 0;
  max-width: var(--hand-card-w);
  width: min(var(--hand-card-w), 100%);
  height: auto;
  aspect-ratio: 52 / 74;
}