/* Dominoes — game-specific */
.diff-seg { display:flex; gap:8px; }
.diff-seg button { flex:1; }
.game-shell { max-width:560px; }

.cpu-hand { display:flex; gap:5px; justify-content:center; flex-wrap:wrap; margin-bottom:10px; min-height:40px; }
.tile-back {
  width:26px; height:48px; border-radius:6px; background:var(--purple);
  border:3px solid var(--stroke); box-shadow:inset 0 0 0 3px rgba(255,255,255,0.25);
}

.chain-wrap {
  flex:1; overflow:auto; display:flex; align-items:center; padding:10px;
  background:rgba(255,255,255,0.25); border:4px dashed var(--wood-deep); border-radius:16px; min-height:90px;
}
.chain { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:auto; }

.domino {
  display:flex; background:var(--card); border:3px solid var(--stroke); border-radius:8px; overflow:hidden;
  box-shadow:0 3px 0 var(--stroke); flex-shrink:0;
}
.domino.placed { animation:popIn 0.25s var(--bounce); }
.half {
  width:34px; height:34px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  padding:4px; gap:1px;
}
.half:first-child { border-right:2px solid var(--stroke); }
.pip { width:6px; height:6px; border-radius:50%; background:var(--stroke); place-self:center; }
.pip.off { background:transparent; }

.player-hand { display:flex; gap:7px; justify-content:center; flex-wrap:wrap; margin-top:12px; min-height:50px; }
.player-hand .domino { cursor:pointer; transition:transform 0.12s var(--bounce); }
.player-hand .domino.playable { box-shadow:0 4px 0 var(--green); }
.player-hand .domino.playable:active { transform:translateY(4px); box-shadow:0 0 0 var(--green); }
.player-hand .domino.dim { opacity:0.45; }
.player-hand .half { width:40px; height:40px; }

.status-line { text-align:center; font-weight:700; font-size:16px; margin:10px 0; min-height:22px; }
.choice-bar, .draw-bar { display:flex; gap:10px; justify-content:center; margin-bottom:6px; }
.sbtn.small, .pbtn.small { width:auto; padding:10px 16px; font-size:15px; }