* {
  box-sizing: border-box;
}

:root {
  /* Card sprite dimensions: 15% + 20% larger for readability */
  --card-width: 110px;
  --card-height: 155px;
}

body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 100vh;
  color: #e8e8e8;
}

/* ----- Home page ----- */
.home-page .header {
  text-align: center;
  padding: 2rem 1rem;
}

.home-page .header h1 {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
}

.home-page .tagline {
  margin: 0.5rem 0 0;
  opacity: 0.85;
  font-size: 1.1rem;
}

.home-page .main {
  max-width: 480px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 1.5rem;
}

.card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.card p {
  margin: 0 0 1rem;
  opacity: 0.9;
  font-size: 0.95rem;
}

.form label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
  opacity: 0.9;
}

.form input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 1rem;
}

.form input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.btn {
  padding: 0.65rem 1.25rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-primary {
  background: #e94560;
  color: #fff;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.btn-small {
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
}

/* ----- Room page ----- */
.room-page {
  padding: 1rem;
  max-width: 900px;
  margin: 0 auto;
}

.room-header {
  text-align: center;
  margin-bottom: 1rem;
}

/* Tabs below room link */
.room-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 0;
}

.room-tab-btn {
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.room-tab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.room-tab-btn.is-active {
  color: #fff;
  border-bottom-color: #eab308;
  background: rgba(255, 255, 255, 0.1);
}

.room-tab-panels {
  margin-bottom: 1.5rem;
}

.room-tab-panel {
  display: none;
}

.room-tab-panel.is-active {
  display: block;
}

.tab-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.leaderboard-full {
  width: 100%;
}

.trashbin-full {
  width: 100%;
}

.room-header h1 {
  margin: 0 0 1rem;
  font-size: 1.75rem;
  color: #fff;
}

.connection-status {
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  display: inline-block;
}
.connection-status.connection-ok {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(34, 197, 94, 0.2);
}
.connection-status.connection-disconnected {
  color: #fef08a;
  background: rgba(234, 179, 8, 0.2);
}
.connection-status.connection-unhealthy {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.2);
}

.share-area label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
  opacity: 0.9;
}

.share-row {
  display: flex;
  gap: 0.5rem;
  max-width: 420px;
  margin: 0 auto;
}

.share-row input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 0.9rem;
}

.input-with-button {
  display: flex;
  gap: 0.5rem;
}

.input-with-button input {
  flex: 1;
  min-width: 0;
}

.input-with-button .btn-small {
  flex-shrink: 0;
}

/* ----- Phase banner ----- */
.last-round-banner {
  text-align: center;
  padding: 0.65rem 1rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 10px;
  background: rgba(234, 179, 8, 0.2);
  color: #fde047;
  border: 2px solid rgba(234, 179, 8, 0.55);
  animation: last-round-pulse 2s ease-in-out infinite;
}

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

@keyframes last-round-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); }
  50% { box-shadow: 0 0 10px 3px rgba(234, 179, 8, 0.3); }
}

.phase-banner {
  text-align: center;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.4);
}

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

.ui-area .phase-banner {
  background: rgba(255, 255, 255, 0.1);
}

.phase-banner--flavor_selection {
  background: rgba(234, 179, 8, 0.25);
  color: #fef08a;
  border-color: rgba(234, 179, 8, 0.6);
}

.phase-banner--action {
  background: rgba(34, 197, 94, 0.25);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.6);
}

.loser-notice {
  margin-top: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #fca5a5;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
}

.loser-notice[hidden] {
  display: none !important;
}

.start-game-area {
  text-align: center;
  margin-bottom: 1rem;
}

.start-game-area[hidden] {
  display: none !important;
}

.start-game-area .btn {
  font-size: 1.1rem;
  padding: 0.75rem 1.5rem;
}

.move-to-action-area,
.pay-to-draw-area {
  text-align: center;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.4);
}
.pay-to-draw-area[hidden] {
  display: none !important;
}
.pay-to-draw-msg {
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
}
.pay-to-draw-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}
.resolve-flavors-note {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  color: var(--text-muted, #666);
}
.resolve-flavors-waiting {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-muted, #6b7280);
}
.resolve-flavors-waiting[hidden] {
  display: none !important;
}
.resolve-flavors-waiting-list {
  font-weight: 500;
  color: var(--text, #e5e7eb);
}
.resolve-flavors-area {
  text-align: center;
  padding: 1rem 0;
}

.move-to-action-area[hidden],
.resolve-flavors-area[hidden] {
  display: none !important;
}

.action-phase-area {
  text-align: center;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 10px;
}

.action-phase-area[hidden] {
  display: none !important;
}

.recipe-bidding-banner {
  text-align: center;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.35);
  border-radius: 10px;
}

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

.recipe-bidding-banner-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fcd34d;
}

.recipe-bidding-card-wrap {
  display: flex;
  justify-content: center;
  margin: 0.5rem 0;
}

.recipe-bidding-card-slot {
  width: var(--card-width);
  height: var(--card-height);
  min-width: var(--card-width);
  min-height: var(--card-height);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Recipe sprites: 20% bigger than base card size */
.recipe-bidding-card-slot {
  width: 132px;
  height: 186px;
  min-width: 132px;
  min-height: 186px;
}
.card-slot.recipe-card,
.card-slot.recipe-marketplace-card,
.card-slot.displayed-recipe {
  width: 110px;
  height: 157px;
}

.recipe-bidding-card-slot[hidden] {
  display: none !important;
}

.recipe-bidding-recipe-name,
.recipe-bidding-leader {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  opacity: 0.95;
}

.recipe-bidding-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.recipe-bidding-actions[hidden] {
  display: none !important;
}

.recipe-bidding-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.recipe-bidding-picker[hidden] {
  display: none !important;
}

.recipe-bidding-status {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

.recipe-bidding-status[hidden] {
  display: none !important;
}

.action-turn-status {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #86efac;
}

.marketplace-buyable {
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.marketplace-buyable:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.recipe-marketplace-bidding-slot {
  outline: 2px solid rgba(234, 179, 8, 0.8);
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.4);
  cursor: default;
}

.cooking-cookable {
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.cooking-cookable:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.4);
}

/* ----- Board layout ----- */
.board-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* UI area: phase banner, choice/action areas, buttons only — lighter background for clarity */
.ui-area {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Shared top boxes: Marketplace, then Trashbin 50% + Leaderboard 50% */
.shared-boxes {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.marketplace-full {
  width: 100%;
}

.shared-boxes-row {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.trashbin-half {
  flex: 0 0 49%;
  min-width: 0;
}

.leaderboard-half {
  flex: 0 0 49%;
  min-width: 0;
}

.shared-box {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 1rem;
}

.shared-box h2 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.shared-cards-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.shared-cards-strip .card-slot {
  flex-shrink: 0;
}

/* Trashbin: face-down card stack */
.trashbin-stack {
  display: flex;
  align-items: center;
  min-height: 131px;
  min-width: 125px;
  position: relative;
}

.trashbin-stack .card-slot {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.trashbin-stack .card-slot:nth-child(1) { left: 0; z-index: 1; }
.trashbin-stack .card-slot:nth-child(2) { left: 11px; z-index: 2; }
.trashbin-stack .card-slot:nth-child(3) { left: 22px; z-index: 3; }
.trashbin-stack .card-slot:nth-child(4) { left: 34px; z-index: 4; }
.trashbin-stack .card-slot:nth-child(5) { left: 44px; z-index: 5; }
.trashbin-stack .card-slot:nth-child(n+6) { left: 55px; z-index: 6; }

.leaderboard-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
}

.leaderboard-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.leaderboard-list li:last-child {
  border-bottom: none;
}

.leaderboard-list .leaderboard-coins {
  font-weight: 700;
  color: #e6c200;
  margin-left: 0.5rem;
}

.chef-stage {
  font-size: 0.85em;
  font-weight: 600;
  margin-left: 0.35rem;
}
.chef-stage--novice {
  color: #a08040;
}
.chef-stage--sous-chef {
  color: #c0c0c0;
}
.chef-stage--master-chef {
  color: #d4af37;
}

.players-scroll-area,
.choice-status-area {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 1rem;
}

.players-scroll-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.players-scroll-header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.players-scroll-area h2,
.choice-status-area h2 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-weight: 600;
}

/* Renders all player content at full height; board-container scrolls if needed */
.players-scroll-area {
  display: block;
}

.players-zones {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.players-scroll-area:has(.player-zone) .waiting-msg {
  display: none;
}

.player-zone {
  background: rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 0.75rem 1rem;
}

.player-zone.you {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
}

.player-zone-header {
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.player-zone-coins {
  font-size: 1.25rem;
  font-weight: 700;
  color: #e6c200;
  flex-shrink: 0;
}

.hand-label {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.9;
  margin-bottom: 0.35rem;
}

.player-zone-row {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}

.player-zone-left,
.player-zone-flavor-hand {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 60px;
}

.player-zone-left {
  flex: 0 0 auto;
}

.player-zone-flavor-hand {
  flex: 1;
  min-width: 0;
  border-left: 2px solid rgba(255, 255, 255, 0.25);
  padding-left: 0.75rem;
  margin-left: 0.25rem;
}

.player-zone-cards-inner {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: stretch;
}

.player-zone-cooking-hand,
.player-zone-combined-hand {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.player-zone-cooking-hand .player-zone-cards-inner,
.player-zone-combined-hand .player-zone-cards-inner {
  min-height: 60px;
}

.player-zone-cards {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  flex-wrap: wrap;
}

.card-slot {
  width: 92px;
  height: 131px;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

/* Flavor cards (hand + played slot): 20% smaller than other cards */
.player-zone-flavor-hand .card-slot,
.player-zone-played-card-wrap .card-slot.right-slot {
  width: 74px;
  height: 105px;
}

@media (max-width: 768px) {
  .card-slot {
    width: 56px;
    height: 83px;
    border-radius: 6px;
    border-width: 1px;
  }
  .player-zone-flavor-hand .card-slot,
  .player-zone-played-card-wrap .card-slot.right-slot {
    width: 45px;
    height: 66px;
  }
  .card-slot.recipe-card,
  .card-slot.recipe-marketplace-card,
  .card-slot.displayed-recipe {
    width: 67px;
    height: 100px;
  }
  .player-zone-left,
  .player-zone-flavor-hand .player-zone-cards-inner {
    gap: 0.35rem;
  }
  .player-zone-row {
    gap: 0.5rem;
  }
  .player-zone-flavor-hand {
    padding-left: 0.5rem;
    margin-left: 0.15rem;
  }
  .shared-boxes-row {
    flex-direction: column;
  }
  .trashbin-half,
  .leaderboard-half {
    flex: 1 1 auto;
  }
}

.action-mode-buttons {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.action-end-turn-wrap {
  margin-top: 0.75rem;
}

.action-end-turn-wrap[hidden],
.action-mode-buttons[hidden],
.action-switch-mode-wrap[hidden],
.action-cook-selected-wrap[hidden],
.action-undo-wrap[hidden] {
  display: none !important;
}

.action-switch-mode-wrap {
  margin-top: 0.5rem;
}

.action-cook-selected-wrap {
  margin-top: 0.5rem;
}

.action-undo-wrap {
  margin-top: 0.75rem;
}

.cooking-card-selected,
.recipe-card-selected {
  box-shadow:
    0 0 0 4px rgba(234, 179, 8, 1),
    0 0 20px 4px rgba(234, 179, 8, 0.6),
    0 0 40px 8px rgba(234, 179, 8, 0.3);
  outline: 3px solid rgba(234, 179, 8, 1);
  outline-offset: 2px;
}

.action-cook-recipe-note {
  margin: 0 0 0.5rem 0;
}

.card-slot.face-down {
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}

.card-slot.face-down:hover {
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.card-slot.face-down.selected,
.card-slot.face-up.clickable.selected {
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.card-slot.face-down.disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.card-slot.played {
  border-color: rgba(255, 255, 255, 0.4);
}

.card-slot-empty {
  border-style: dashed;
  opacity: 0.5;
}

.card-slot.face-up.clickable {
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}

.card-slot.face-up.clickable:hover {
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.player-zone-played-cards {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.player-zone-displayed-recipes {
  margin-top: 0.75rem;
}

.player-zone-displayed-recipes .player-zone-cards-inner {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.player-zone-played-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.player-zone-outcome-under-card {
  margin-top: 0.4rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.player-zone-outcome-under-card.outcome-win { color: #4ade80; }
.player-zone-outcome-under-card.outcome-lose { color: #f87171; }
.player-zone-outcome-under-card.outcome-draw { color: #9ca3af; }
.player-zone-outcome-under-card.outcome-paid { color: #60a5fa; }
.player-zone-outcome-under-card.player-zone-chosen { color: #6b7280; }

.player-zone-outcome {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.player-zone-outcome.outcome-win { color: #4ade80; }
.player-zone-outcome.outcome-lose { color: #f87171; }
.player-zone-outcome.outcome-draw { color: #9ca3af; }

.choice-status-area {
  grid-column: 1 / -1;
}

.choice-status-area .choice-status {
  margin: 0;
}

.waiting-msg {
  text-align: center;
  opacity: 0.7;
  font-size: 0.9rem;
  margin: 0.5rem 0 0;
}

.choice-status {
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.9;
}

.next-round-area {
  grid-column: 1 / -1;
  text-align: center;
  padding: 1rem 0 0;
}

.next-round-area[hidden] {
  display: none !important;
}

.next-round-msg {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

/* Join name overlay */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.overlay[hidden] {
  display: none !important;
}

.overlay-card {
  background: #1a1a2e;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 360px;
  width: 90%;
}

.overlay-card h2 {
  margin: 0 0 0.5rem;
}

.overlay-card p {
  margin: 0 0 1rem;
  opacity: 0.9;
}

.round-display {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  opacity: 0.85;
}

/* Sprite test boxes (techniques, aromatics, ingredients) */
.sprite-test-section {
  grid-column: 1 / -1;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  clear: both;
}

.sprite-test-box {
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
}

.sprite-test-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
}

.sprite-test-box-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.9;
}

.sprite-test-box-content {
  display: none;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sprite-test-box-content.is-open {
  display: block;
}

.simplified-rules-text {
  line-height: 1.5;
}
.simplified-rules-text p {
  margin: 0 0 0.5rem;
}
.simplified-rules-text p:last-child {
  margin-bottom: 0;
}

.sprite-test-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.sprite-test-strip .sprite-test-card {
  cursor: pointer;
  flex-shrink: 0;
}

.sprite-test-strip--recipes .sprite-test-card {
  width: 122px;
  height: 173px;
}

@media (max-width: 768px) {
  .sprite-test-strip--recipes .sprite-test-card {
    width: 74px;
    height: 109px;
  }
}

.sprite-load-err {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Technique detail popup */
.card-detail-popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 1rem;
}

.card-detail-popup[hidden] {
  display: none !important;
}

.card-detail-popup-inner {
  background: #1a1a2e;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 1.25rem;
  max-width: 420px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.card-detail-popup-image {
  width: 100%;
  aspect-ratio: 72 / 100;
  max-width: 175px;
  margin: 0 auto 1rem;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.3);
}

.card-detail-popup-image.card-detail-image--recipe {
  max-width: 192.5px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card-detail-popup-body {
  margin-bottom: 1rem;
}

.card-detail-popup-name {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  color: #fff;
}

.card-detail-popup-meta {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.95;
}

.card-detail-popup-meta .card-detail-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.6rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.card-detail-popup-meta .card-detail-row:first-child {
  padding-top: 0.6rem;
}

.card-detail-popup-meta .card-detail-row[hidden] {
  display: none !important;
}

.card-detail-popup-meta dt {
  margin: 0;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  flex-shrink: 0;
}

.card-detail-popup-meta dt::after {
  content: ': ';
  font-weight: 600;
}

.card-detail-popup-meta dd {
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 0;
}

.card-detail-popup-close {
  display: block;
  margin: 0 auto;
}

/* Recipe bid overlay */
.recipe-bid-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.recipe-bid-overlay[hidden] {
  display: none !important;
}

.recipe-bid-overlay-inner {
  background: #1a1a2e;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 360px;
  width: calc(100% - 2rem);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.recipe-bid-title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  color: #fff;
}

.recipe-bid-recipe-name {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: #e2e8f0;
}

.recipe-bid-current-price {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  opacity: 0.9;
}

.recipe-bid-no-coins-banner,
.recipe-bid-already-won-banner {
  margin-bottom: 1rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  font-size: 0.9rem;
}

.recipe-bid-no-coins-banner {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.recipe-bid-already-won-banner {
  background: rgba(251, 191, 36, 0.2);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: #fde047;
}

.recipe-bid-choices {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.recipe-bid-picker-wrap {
  margin-top: 1rem;
}

.recipe-bid-picker-wrap label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
  opacity: 0.9;
}

.recipe-bid-amount-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 1rem;
}

.recipe-bid-confirm-msg {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  opacity: 0.95;
}

.recipe-bid-picker-buttons {
  display: flex;
  gap: 0.5rem;
}

.recipe-bid-waiting-msg {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  opacity: 0.85;
  font-style: italic;
}

/* Action log button (circle, bottom right) and panel */
.action-log-btn {
  position: fixed;
  bottom: 4rem; /* above room-footer */
  right: 1.25rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(30, 41, 59, 0.9);
  color: #e2e8f0;
  font-size: 1.25rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s;
}

.action-log-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.action-log-panel {
  position: fixed;
  bottom: 7rem; /* above action-log-btn and footer */
  right: 1.25rem;
  width: min(380px, calc(100vw - 2.5rem));
  max-height: 60vh;
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 160;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.action-log-panel[hidden] {
  display: none !important;
}

.action-log-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.action-log-panel-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.action-log-content {
  padding: 0.75rem 1rem;
  overflow-y: auto;
  font-size: 0.9rem;
  line-height: 1.45;
}

.action-log-empty {
  margin: 0;
  opacity: 0.8;
}

.action-log-entry {
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

.action-log-entry:last-child {
  border-bottom: none;
}

.action-log-requirements {
  font-size: 1em;
}

.action-log--system {
  opacity: 0.85;
  font-style: italic;
}

.action-log--last-round {
  color: #fde047;
  font-weight: 600;
}

.action-log--promotion {
  color: #86efac;
  font-weight: 600;
}

/* Room footer: Quit game (always visible at bottom) */
.room-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 1.25rem;
  background: rgba(15, 23, 42, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  z-index: 100;
}

.room-footer .btn {
  min-width: 8rem;
}