/* Reservekast usage badge */
.rk-usage-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,0.06);
  color: var(--color-text);
  white-space: nowrap;
}
/* Larger, centered badge for station body */
.rk-usage-wrap { display: flex; justify-content: center; margin: 8px 0 12px; }
.rk-usage-badge--large { font-size: 1.1rem; font-weight: 300; padding: 8px 14px; }
/* Reservekast dice row */
.rk-dice-wrap { display:flex; justify-content:center; margin: 8px 0 8px; }
.rk-dice-row { display:flex; gap: 10px; align-items:center; }
/* Make Reservekast dice rather large and keep pip proportions */
.rk-dice-row .die-face { --die-size: 3.6em; --pip: 0.585em; --o: 0.99em;}
/* Slow down rolling a bit for Reservekast dice only */
.rk-dice-row .die-face.is-rolling { animation-duration: 1.2s; }

/* Station cards – color gradients and states */
.station-card { --station-grad: var(--grad-default-light); background: var(--station-grad), var(--color-surface); }
.station-card.is-complete { --station-grad: var(--grad-default-dark); opacity: 0.92; }

.station-card[data-color="green"] { --station-grad: var(--grad-green-light); }
.station-card[data-color="green"].is-complete { --station-grad: var(--grad-green-dark); }
.station-card[data-color="yellow"] { --station-grad: var(--grad-yellow-light); }
.station-card[data-color="yellow"].is-complete { --station-grad: var(--grad-yellow-dark); }
.station-card[data-color="blue"] { --station-grad: var(--grad-blue-light); }
.station-card[data-color="blue"].is-complete { --station-grad: var(--grad-blue-dark); }
.station-card[data-color="red"] { --station-grad: var(--grad-red-light); }
.station-card[data-color="red"].is-complete { --station-grad: var(--grad-red-dark); }
.station-card[data-color="orange"] { --station-grad: var(--grad-orange-light); }
.station-card[data-color="orange"].is-complete { --station-grad: var(--grad-orange-dark); }
.station-card[data-color="gray"] { --station-grad: var(--grad-gray-light); }
.station-card[data-color="gray"].is-complete { --station-grad: var(--grad-gray-dark); }
.station-card[data-color="purple"] { --station-grad: var(--grad-purple-light); }
.station-card[data-color="purple"].is-complete { --station-grad: var(--grad-purple-dark); }
.station-card[data-color="pink"] { --station-grad: var(--grad-pink-light); }
.station-card[data-color="pink"].is-complete { --station-grad: var(--grad-pink-dark); }
.station-card[data-color="brown"] { --station-grad: var(--grad-brown-light); }
.station-card[data-color="brown"].is-complete { --station-grad: var(--grad-brown-dark); }
.station-card[data-color="white"] { --station-grad: var(--grad-white-light); }
.station-card[data-color="white"].is-complete { --station-grad: var(--grad-white-dark); }

/* Station card actions layout */
.station-card .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; align-items: center; }
/* Make the primary controls larger for thumb usage */
.station-card .actions .btn,
.station-card .reserve-actions .btn { padding: 12px 16px; font-size: 1.05rem; }
/* Stretch reserve mode action buttons */
.station-card .reserve-actions { width: 100%; }
.station-card .reserve-actions .btn-row { display: flex; gap: 12px; flex-wrap: wrap; width: 100%; }
.station-card .reserve-actions .btn { flex: 1 1 0; min-width: 0; }
/* Stack main action buttons vertically and full width */
.station-card .actions { flex-direction: column; align-items: stretch; }
.station-card .actions .btn[data-action="roll"],
.station-card .actions .btn[data-action="commit"][data-role="commit-normal"],
.station-card .reserve-actions .btn { width: 100%; flex: 0 0 auto; }

/* Dice rows */
.station-card .dice-row { gap: 8px; }
.station-card .die-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px; min-width: 0; flex: 1 1 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease; }
.station-card .die-btn:hover { border-color: var(--color-muted); }
.station-card .die-btn:is(:active,[aria-pressed="true"]) { transform: translateY(1px); }
/* Make die icon larger in the row */
.station-card .dice-row .die-face { --die-size: 2rem; --pip: 0.34rem; --o: 0.58rem; }
/* Held state */
.station-card .die-btn.is-held { background: rgba(227,6,19,0.10); border-color: rgba(227,6,19,0.60); box-shadow: inset 0 0 0 1px rgba(227,6,19,0.35); }
/* Dice zones (Kast / Hold trays) */
.dice-zones { display: grid; gap: 10px; }
.dice-zone { padding: 10px; border: 1px dashed var(--color-border); border-radius: 12px; background: rgba(255,255,255,0.03); }
.dice-zone.play { border-style: solid; }
.dice-zone h4 { margin: 0 0 8px; font-size: 0.9rem; color: var(--color-muted); }
.dice-zone .dice-row { display: flex; gap: 8px; flex-wrap: wrap; min-height: 44px; }
.die-btn.move-in { animation: pop-in 180ms ease-out; }
.die-btn.move-back { animation: pop-in 180ms ease-out; }
@keyframes pop-in { from { transform: scale(.9); opacity: .6; } to { transform: scale(1); opacity: 1; } }
/* Completed stations: dim interactions */
.station-card.is-complete .die-btn { pointer-events: none; opacity: .6; }
/* In reserve mode, re-enable */
.station-card.is-complete.reserve-mode .die-btn { pointer-events: auto; opacity: 1; }

/* Status visibility and errors */
.station-card [data-role="status"] { margin-top: 6px; color: var(--color-text); }
.station-card [data-role="status"].is-error { padding: 6px 8px; border-radius: 8px; background: rgba(227,6,19,0.15); border: 1px solid rgba(227,6,19,0.35); color: #ffccd1; }

/* Station card Activate button */
.station-card .btn-activate { width: 100%; margin-top: 10px; color: var(--color-white); border-color: transparent; box-shadow: 0 8px 18px rgba(0,0,0,0.28); font-size: 1.05rem; padding: 12px 16px; }
.station-card .btn-activate[aria-busy="true"] { opacity: 0.85; }
/* Color theming: use same gradient tokens as card color */
.station-card[data-color="default"] .btn-activate { background: var(--grad-default-light); }
.station-card[data-color="green"] .btn-activate { background: var(--grad-green-light); }
.station-card[data-color="yellow"] .btn-activate { background: var(--grad-yellow-light); }
.station-card[data-color="blue"] .btn-activate { background: var(--grad-blue-light); }
.station-card[data-color="red"] .btn-activate { background: var(--grad-red-light); }
.station-card[data-color="orange"] .btn-activate { background: var(--grad-orange-light); }
.station-card[data-color="gray"] .btn-activate { background: var(--grad-gray-light); }
.station-card[data-color="purple"] .btn-activate { background: var(--grad-purple-light); }
.station-card[data-color="pink"] .btn-activate { background: var(--grad-pink-light); }
.station-card[data-color="brown"] .btn-activate { background: var(--grad-brown-light); }
.station-card[data-color="white"] .btn-activate { background: var(--grad-white-light); }

/* Reservekast card theming */
#reservekastCard { --reserve-grad: var(--grad-blue-light); background: var(--reserve-grad), var(--color-surface); }
#reservekastCard[data-color="default"] { --reserve-grad: var(--grad-default-light); }
#reservekastCard[data-color="green"] { --reserve-grad: var(--grad-green-light); }
#reservekastCard[data-color="yellow"] { --reserve-grad: var(--grad-yellow-light); }
#reservekastCard[data-color="blue"] { --reserve-grad: var(--grad-blue-light); }
#reservekastCard[data-color="red"] { --reserve-grad: var(--grad-red-light); }
#reservekastCard[data-color="orange"] { --reserve-grad: var(--grad-orange-light); }
#reservekastCard[data-color="gray"] { --reserve-grad: var(--grad-gray-light); }
#reservekastCard[data-color="purple"] { --reserve-grad: var(--grad-purple-light); }
#reservekastCard[data-color="pink"] { --reserve-grad: var(--grad-pink-light); }
#reservekastCard[data-color="brown"] { --reserve-grad: var(--grad-brown-light); }
#reservekastCard[data-color="white"] { --reserve-grad: var(--grad-white-light); }