/* Square mahjong table drawn by table.js, sized in container units (1cqw = 1% of the table's width).
   Seats sit in a pinwheel around the edge: hand toward the centre, name tag toward the player; each seat's
   band is rotated to face it. Its discard pond sits in front of it, and the centre box holds wall / winds / dealer. */
.mjtable { --mj-accent: #e8b931; --mj-hot: #d33; position: relative; width: 100%; aspect-ratio: 1; container-type: inline-size; border-radius: 12px;
           background: radial-gradient(circle at 50% 50%, #1d6b4e, #14513c 70%); box-shadow: inset 0 0 0 3px #0a2b20; overflow: hidden; }
.mjtable > * { position: absolute; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); }
.mjtable .k0 { --rot: 0deg; } .mjtable .k1 { --rot: -90deg; } .mjtable .k2 { --rot: 180deg; } .mjtable .k3 { --rot: 90deg; }
.mjtable .band { width: 86cqw; height: 14cqw; padding: .7cqw 1cqw; border-radius: 1.5cqw; display: flex; flex-direction: column; justify-content: space-between; }
.mjtable .band.k0 { left: 43cqw; top: 93cqw; } .mjtable .band.k1 { left: 93cqw; top: 57cqw; }
.mjtable .band.k2 { left: 57cqw; top: 7cqw; } .mjtable .band.k3 { left: 7cqw; top: 43cqw; }
.mjtable .band.active { background: #e8b93126; box-shadow: inset 0 0 0 .5cqw var(--mj-accent); }
.mjtable .band.win { background: #d3333333; box-shadow: inset 0 0 0 .6cqw var(--mj-hot); }
.mjtable .hand { display: flex; align-items: flex-end; white-space: nowrap; min-height: 6.6cqw; }
.mjtable .hand .t { --tw: 4.6cqw; }
.mjtable .hand .melds { display: flex; gap: 1cqw; margin-left: 1.2cqw; }
.mjtable .hand .melds:first-child { margin-left: 0; }
.mjtable .hand .melds span { display: flex; }
.mjtable .hand .melds .t { --tw: 3.6cqw; }
.mjtable .tag { display: flex; align-items: center; gap: .8cqw; font-size: 2.9cqw; line-height: 1.2; font-weight: 600; white-space: nowrap; }
.mjtable .tag .t { --tw: 2.8cqw; }
.mjtable .tag .wind { background: var(--mj-accent); color: #222; border-radius: 3px; padding: 0 .35em; }
.mjtable .tag .dealer { background: var(--mj-hot); color: #fff; border-radius: 3px; padding: 0 .35em; }
.mjtable .tag .rel { font-weight: 400; color: #b9c9bf; }
.mjtable .tag .cnt { margin-left: auto; font-weight: 400; color: #b9c9bf; }
.mjtable .pond { width: 42cqw; height: 15cqw; display: flex; flex-wrap: wrap; align-content: flex-start; gap: .25cqw 0; }
.mjtable .pond .t { --tw: 3.4cqw; }
.mjtable .pond.k0 { left: 50cqw; top: 78.5cqw; } .mjtable .pond.k1 { left: 78.5cqw; top: 50cqw; }
.mjtable .pond.k2 { left: 50cqw; top: 21.5cqw; } .mjtable .pond.k3 { left: 21.5cqw; top: 50cqw; }
.mjtable .center { left: 50cqw; top: 50cqw; width: 30cqw; height: 30cqw; border-radius: 2cqw; background: #0a2b20d9; box-shadow: 0 0 0 .4cqw #e8b93166;
                   display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 2.8cqw; line-height: 1.25; color: #b9c9bf; }
.mjtable .center b { font-size: 3.6cqw; color: var(--mj-accent); }
.mjtable .center big { display: block; font-size: 6.5cqw; font-weight: 700; color: #f3f0e6; line-height: 1.1; }
.mjtable .cw { position: absolute; left: 50%; top: 50%; width: 4.6cqw; height: 4.6cqw; margin: -2.3cqw; border-radius: 50%; font-size: 3cqw; line-height: 4.6cqw; font-weight: 700;
               background: #f3f0e6; color: #222; transform: rotate(var(--rot)) translateY(12.4cqw); }
.mjtable .cw.on { background: var(--mj-accent); }
.mjtable .cw.dl { box-shadow: 0 0 0 .5cqw var(--mj-hot); }