/* 遊戲畫面：HUD、桌面、木架。 */

.play {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  min-height: 100dvh;
}

/* ── HUD ─────────────────────────────────────────────── */
.hud {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(6px + env(safe-area-inset-top)) 8px 6px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.hud__tier { font-weight: 700; font-size: .95rem; }
.hud__time {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.dealing {
  flex: 1;
  display: grid;
  place-items: center;
  color: var(--ink-3);
}

/* ── 桌面 ─────────────────────────────────────────────── */
/* 桌面本身即暫存區（§8.4）：湊不成組的牌擺在這裡是合法的中間狀態。 */
.board {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px;
  padding: 12px;
  /* 一組最長可以是 13 張同色順子（約 560px），窄螢幕放不下。
     讓牌桌自己吃掉捲動，頁面本身永遠不橫向捲。
     兩軸都寫明：只寫 overflow-y 時 overflow-x 會由 visible 自動變成 auto，
     行為雖然一樣，但那條規則太隱晦，不該讓版面靠它撐著。 */
  overflow: auto;
  /* 空白處要夠大才好放牌（拖到空白處＝開新組）。 */
  min-height: 220px;
  background:
    radial-gradient(circle at 1px 1px, rgba(43, 48, 56, .07) 1px, transparent 0) 0 0 / 14px 14px;
}

.set {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6px;
  border-radius: var(--r-md);
  border: 2px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: border-color .12s, background .12s;
  /* 邊界／留白也是施力點（抓這裡＝整組），所以碰到它同樣不能捲頁面。 */
  touch-action: none;
  cursor: grab;
}

/* 握把：整組的施力點。抓牌＝一張，抓這裡＝整組。 */
.set__grip {
  display: inline-flex;
  align-items: center;
  width: 10px;
  height: var(--tile-h);
  margin-right: 1px;
  color: var(--ink-3);
  cursor: grab;
  flex: none;
}
.set__grip svg { width: 100%; height: 22px; }
.set:active .set__grip { color: var(--ink-2); }
.set--ok { border-color: #c7d6c9; }
.set--short { border-color: var(--warn); border-style: dashed; }
.set--invalid { border-color: var(--bad); background: #fff5f5; }

.set__hint {
  padding: 0 4px;
  color: var(--ink-3);
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}
.set--invalid .set__hint { color: var(--bad); }
.set--short .set__hint { color: var(--warn); }

/* 目標放置區高亮（§8.5）。 */
.drop-hover {
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
  background: #e7f0fa;
}
.board.drop-hover { outline-offset: -6px; }

/* ── 木架 ─────────────────────────────────────────────── */
.tray {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.stats {
  display: flex;
  gap: 14px;
  color: var(--ink-2);
  font-size: .82rem;
}
.stat__v { color: var(--ink); }
.stat__v--warn { color: var(--warn); }

.rack {
  display: flex;
  align-items: center;
  min-height: calc(var(--tile-h) + 20px);
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: linear-gradient(#d9c9a8, #c9b48c);
  border: 1px solid #b39f7a;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .16);
}
.rack__tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  min-height: var(--tile-h);
}