.dom-screen { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto; color: #fff; }
.dom-opp { display: flex; align-items: center; gap: 8px; font: 600 13px system-ui; }
.dom-backs { display: flex; }
.dom-back { width: 14px; height: 26px; border-radius: 3px; margin-left: -6px; border: 1.5px solid #fff;
  background: repeating-linear-gradient(45deg, #1f2937, #1f2937 3px, #374151 3px, #374151 6px); }
.dom-back:first-child { margin-left: 0; }
.dom-board { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center;
  background: #2e7d46; border-radius: 12px; padding: 16px 10px; min-height: 90px; }
.dom-end { background: #16a34a; color: #fff; border-radius: 6px; padding: 6px 8px; font: 700 12px system-ui; }
.dom-end.active { outline: 3px dashed #ffe14d; outline-offset: 1px; cursor: pointer; }
.dom-tile { background: #fff; color: #222; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center; gap: 4px; font: 800 14px system-ui; }
.dom-tile.dom-h { width: 50px; height: 25px; flex-direction: row; }
.dom-tile.dom-v { width: 25px; height: 50px; flex-direction: column; }
.dom-div { background: #999; }
.dom-h .dom-div { width: 1.5px; height: 16px; }
.dom-v .dom-div { width: 16px; height: 1.5px; }
.dom-status { font: 700 13px system-ui; text-align: center; }
.dom-hand { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; padding: 10px 6px;
  background: rgba(0,0,0,.22); border-radius: 12px; }
.dom-hand .dom-tile { width: 56px; height: 28px; }
.dom-tile.playable { outline: 3px solid #ffe14d; outline-offset: 1px; transform: translateY(-4px); cursor: pointer; }
.dom-actions { display: flex; gap: 8px; justify-content: center; }