/* Dominoes: an oval table with the players seated around it and the CCMA crest in the middle */
.dom-arena { container-type: inline-size; width: 100%; max-width: 860px; margin: 0 auto .6rem; }
.dom-inner { position: relative; width: 100%; aspect-ratio: 16 / 10; --hs: clamp(14px, 4cqw, 32px); --av: clamp(38px, 9cqw, 64px); }
@container (max-width: 520px) { .dom-inner { aspect-ratio: 4 / 4.6; --hs: clamp(12px, 6cqw, 19px); --av: clamp(40px, 15cqw, 56px); } }

/* the table: mahogany rail with a brass edge, navy felt */
.dtable { position: absolute; inset: 10% 12% 11%; border-radius: 999px; padding: 3.2cqw;
  background: linear-gradient(180deg, #a1502d, #632a16 55%, #36130a); box-shadow: 0 16px 30px rgba(0,0,0,.65), inset 0 2px 0 rgba(255,225,180,.4), inset 0 -3px 6px rgba(0,0,0,.5); }
.dfelt { position: relative; width: 100%; height: 100%; border-radius: 999px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 38%, #2766b8 0%, #14468a 55%, #0a2a57 100%); box-shadow: inset 0 0 36px rgba(0,0,0,.65), 0 0 0 3px #c9a24a, 0 0 0 5px #6b4f16; }
.dlogo { position: absolute; left: 50%; top: 50%; width: 40%; max-width: 270px; transform: translate(-50%, -50%); opacity: .45; filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)); pointer-events: none; user-select: none; }
.dchain { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; gap: calc(var(--hs) * .16); padding: 7% 11%; max-width: 100%; }
.dchain .tile { box-shadow: 0 3px 5px rgba(0,0,0,.55); border-width: 2px; border-radius: calc(var(--hs) * .24); }
.dchain .half, .dreveal .half { width: var(--hs); height: var(--hs); padding: calc(var(--hs) * .11); gap: 0; }
.dom-inner.myturn .dchain .tile.endL, .dom-inner.myturn .dchain .tile.endR { outline: 3px solid #ffd66b; outline-offset: 1px; box-shadow: 0 0 14px 5px rgba(255,214,107,.85); }

/* seats around the table */
.dseat { position: absolute; z-index: 5; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; width: calc(var(--av) * 2); }
.dseat.pos0 { left: 50%; top: 91%; } .dseat.pos1 { left: 7%; top: 50%; } .dseat.pos2 { left: 50%; top: 9%; } .dseat.pos3 { left: 93%; top: 50%; }
.dring { position: relative; width: var(--av); height: var(--av); border-radius: 50%; padding: 3px; background: linear-gradient(135deg, #f8e7a8, #c9a24a 40%, #8f6f2a); box-shadow: 0 4px 10px rgba(0,0,0,.6); }
.dseat.team1 .dring { background: linear-gradient(135deg, #e3eefb, #8fb2d6 40%, #44688f); }
.dring .avatar { width: 100% !important; height: 100% !important; font-size: calc(var(--av) * .5) !important; border: 0; }
.dseat.turn .dring { box-shadow: 0 0 0 3px #fff3b0, 0 0 20px 8px rgba(255,214,107,.85); animation: dpulse 1.3s ease-in-out infinite; }
.dseat.win .dring { box-shadow: 0 0 0 4px #7ee0a0, 0 0 22px 8px rgba(126,224,160,.8); }
.dcrown { position: absolute; top: -.75em; left: 50%; transform: translateX(-50%); font-size: calc(var(--av) * .42); filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
@keyframes dpulse { 50% { box-shadow: 0 0 0 3px #fff3b0, 0 0 8px 3px rgba(255,214,107,.5); } }
.dname { max-width: 100%; padding: 1px 9px; border-radius: 10px; background: rgba(8,16,32,.85); color: #fff7dc; font: 700 clamp(.62rem, 1.9cqw, .85rem) system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcount { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 9px; background: #101a2c; border: 1px solid #c9a24a; color: #fff; font: 700 clamp(.66rem, 2cqw, .85rem) system-ui, sans-serif; }
.mini-tile { display: inline-block; width: .55em; height: .9em; background: #fdfcf6; border: 1px solid #222; border-radius: 2px; }
.dsay { position: absolute; top: -4px; left: calc(50% + var(--av) * .5); background: #fffdf3; color: #14213d; border-radius: 10px 10px 10px 2px; padding: 2px 8px; font: 700 clamp(.6rem, 1.8cqw, .78rem) system-ui, sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,.5); white-space: nowrap; }
.dseat.pos3 .dsay { left: auto; right: calc(50% + var(--av) * .5); border-radius: 10px 10px 2px 10px; }
.dreveal { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: calc(var(--av) * 2.6); margin-top: 2px; }
.dreveal .tile { border-width: 1.5px; border-radius: 3px; }

/* boneyard */
.dyard { position: absolute; z-index: 4; left: 71%; top: 66%; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; padding: 0; color: #fff; cursor: default; }
.dyard b { font: 700 .85rem system-ui, sans-serif; text-shadow: 0 1px 3px #000; }
.dyard small { font: 700 .62rem system-ui, sans-serif; color: #ffe9a0; }
.ystack { position: relative; width: 30px; height: 22px; }
.ystack .mini-tile { position: absolute; width: 14px; height: 22px; background: #2b4a8a; border-color: #0b1530; }
.ystack .mini-tile:nth-child(1) { left: 0; } .ystack .mini-tile:nth-child(2) { left: 8px; top: -2px; } .ystack .mini-tile:nth-child(3) { left: 16px; }
.dyard.draw { cursor: pointer; animation: dpulse 1.3s ease-in-out infinite; border-radius: 10px; filter: drop-shadow(0 0 10px #ffd66b); }
.dyard:disabled { opacity: .95; }

/* your tiles: a wooden tray */
.dom-hand { background: linear-gradient(180deg, #5f2a16, #34120a); border: 2px solid #c9a24a; border-radius: 14px; padding: .7rem .6rem .5rem; box-shadow: inset 0 4px 10px rgba(0,0,0,.55); justify-content: center; }
.dom-hand .half { width: clamp(24px, 4.6vw, 38px); height: clamp(24px, 4.6vw, 38px); }
.dom-ends { text-align: center; margin: .2rem 0 .4rem; }
@media (prefers-reduced-motion: reduce) { .dseat.turn .dring, .dyard.draw { animation: none; } }

/* give the table the full width; the table chat goes underneath */
.board-wrap:has(.dom-arena) { flex-direction: column; }
.board-wrap:has(.dom-arena) .game-area, .board-wrap:has(.dom-arena) .side-area { flex: 1 1 auto; width: 100%; min-width: 0; }

/* narrow screens: keep the side seats fully inside the table area */
@container (max-width: 520px) {
  .dseat { width: calc(var(--av) * 1.85); }
  .dseat.pos1 { left: 15%; } .dseat.pos3 { left: 85%; }
  .dtable { inset: 9% 10% 11%; }
  .dsay { left: calc(50% + var(--av) * .42); }
}


/* linear chain: every tile is placed by position (see layoutDominoChain) */
.dchain { position: absolute; inset: 0; display: block; padding: 0; gap: 0; z-index: 2; }
.dchain .tile.dtl { position: absolute; box-sizing: border-box; display: flex; flex-direction: row; width: calc(var(--hs) * 2); height: var(--hs); border-width: 1.5px; border-radius: calc(var(--hs) * .2); }
.dchain .tile.dtl .half { flex: 1 1 0; width: auto; height: 100%; padding: calc(var(--hs) * .1); }
.dchain .tile.dtl .half + .half { border-left-width: 1.5px; }