.rk-screen { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin: 0 auto; }

.rk-topbar { display: flex; gap: 8px; flex-wrap: wrap; }
.rk-player { background: rgba(255, 255, 255, .15); color: #fff; border-radius: 10px;
  padding: 6px 10px; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.rk-player.turn { background: #fff; color: #4a4a8a; }
.rk-player .dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd0e0; }
.rk-player.turn .dot { background: #2ecc71; }
.rk-player .sc { opacity: .85; }

.rk-status { color: #fff; font-weight: 700; padding: 2px 2px; }

.rk-table { background: radial-gradient(circle at 30% 15%, #137a5c 0%, #0c5f49 70%, #0a5340 100%);
  border-radius: 14px; padding: 12px; min-height: 170px;
  display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start;
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, .35); }
.rk-meld { display: inline-flex; gap: 3px; padding: 5px; border-radius: 9px;
  background: rgba(0, 0, 0, .16); border: 2px solid transparent; }
.rk-meld.ok { border-color: #4cd699; }
.rk-meld.bad { border-color: #ff6b6b; }

.rk-tile { width: 34px; height: 46px; border-radius: 6px; background: #fdf6e3;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3); border: 1px solid rgba(0, 0, 0, .12);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px;
  user-select: none; }
.rk-tile.c-r { color: #c0392b; } .rk-tile.c-b { color: #1d4ed8; }
.rk-tile.c-o { color: #e67e22; } .rk-tile.c-k { color: #1f2937; }
.rk-tile.c-j { color: #b5179e; }

.rk-rack { background: #5b4636; border-radius: 12px; padding: 10px; display: flex;
  flex-wrap: wrap; gap: 5px; min-height: 64px; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35); }

.rk-pool { color: #fff; font-size: 14px; opacity: .9; }
.rk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rk-empty { color: #999; font-style: italic; }
.rk-table .rk-empty { color: rgba(255, 255, 255, .7); }
.rk-rack .rk-empty { color: #e8dcc8; }
.rk-tile.picked { outline: 3px solid #ffd84d; outline-offset: 1px; transform: translateY(-4px); }
.rk-hint { color: #ffe08a; font-size: 13px; font-weight: 600; }
.rk-tile { touch-action: none; }
.rk-tile.dragging { opacity: .35; }
.rk-ghost { position: fixed; transform: translate(-50%, -62%); pointer-events: none;
  z-index: 100; opacity: .92; box-shadow: 0 10px 18px rgba(0, 0, 0, .45); }
.rk-table { --rk-scale: 1; touch-action: none; }
.rk-table .rk-tile { width: calc(34px * var(--rk-scale)); height: calc(46px * var(--rk-scale));
  font-size: calc(18px * var(--rk-scale)); }

/* Subtle motion */
.rk-meld { transition: border-color .15s ease; }
.rk-tile { transition: transform .08s ease; }

/* Larger tiles on tablets/desktops */
@media (min-width: 768px) {
  .rk-tile { width: 42px; height: 56px; font-size: 22px; }
  .rk-table .rk-tile { width: calc(42px * var(--rk-scale)); height: calc(56px * var(--rk-scale));
    font-size: calc(22px * var(--rk-scale)); }
}