/* Table skin and original tile sheet are isolated from the game rules. */
.tile.face-tile{
  background:#fffdf6;border-color:#fffdf4;border-bottom-color:#eeeae0;
  border-bottom-width:5px;border-radius:9px;padding:3px 2px 2px;
  box-shadow:inset 1px 1px 1px #fff,2px 3px 1px #16261a42;
  overflow:hidden;
}
.tile-face{display:block;width:100%;height:100%;pointer-events:none;flex:none;border-radius:5px;filter:brightness(1.08) saturate(.96)}
.tile.face-tile.small{padding:1px;border-bottom-width:3px;border-radius:5px}
.tile.back-tile{background:#d697a6;border:1px solid #fffdf4;border-bottom:3px solid #eeeae0;border-radius:7px;box-shadow:inset 1px 1px 1px #ffffff60,1px 2px 2px #0d291f40}
.tile-stack .tile.face-tile{border-bottom-color:#e5e5e1;padding:5px 3px;box-shadow:inset -3px 0 #f4f4f0,3px 4px 0 #cfcfcb}
.hero .tile-stack{filter:drop-shadow(10px 18px 7px #05251f66)}
.login-tiles .tile.face-tile{border-bottom-color:#e5e5e1;box-shadow:3px 5px 0 #cfcfcb}

.game-table{
  position:relative;border:0;border-radius:22px;padding:5.3% 6% 8.5%;
  background:linear-gradient(145deg,#246b41,#1b5935);
  box-shadow:inset 0 0 0 11px #39271b,inset 0 0 0 13px #b89d63,inset 0 0 0 15px #f0d68a,0 13px 25px #2c1c2033,0 4px 0 #24190f;
  color:#fff9e9;isolation:isolate;
}
.game-table .player-row{gap:9px}
.game-table .player-tag{background:#163e32e8;border-color:#e4d9af36;padding:10px 9px;box-shadow:0 3px 8px #0b2b2855}
.game-table .player-tag.active{border-color:#f0ce77;box-shadow:0 0 0 1px #f0ce77,0 3px 8px #0b2b2855}
.game-table .player-tag.self{background:#204f37ee}
.game-table .player-wind{background:#e7d6a9;color:#3a3323;border:1px solid #c5ab72;box-shadow:0 2px 0 #927447}
.game-table .player-tag div>span{color:#e0e7d3}
.game-table .player-tag strong small{color:#ecce8f}
.game-table .river-board{min-height:340px;padding:22px 4px;gap:26px 154px}
.game-table .river>small{color:#f2ecd9;text-shadow:0 1px 2px #17372c;font-size:11px}
.game-table .river-tiles{gap:4px}
.game-table .river-tiles .claimed{opacity:.38}
.game-table .table-center{
  width:148px;height:146px;max-width:100%;
  background:linear-gradient(145deg,#403e34,#242e27);border:4px solid #aaa187;
  border-radius:13px;box-shadow:0 0 0 2px #403b2e,inset 0 0 0 1px #d6c9a36b,0 6px 10px #0c2b2566;
}
.game-table .table-emblem{color:#e8d6a3;font-size:28px;letter-spacing:5px;margin-bottom:8px}
.game-table .table-center strong{font-size:11px;color:#fffaeb;max-width:100%;padding:0 5px;text-align:center;overflow-wrap:anywhere}
.game-table .table-center>span:not(.table-emblem){color:#dfdac7}
.game-table .countdown{color:#ffe6a3;font-size:19px;margin-top:6px}
.game-table .hand-zone{border-top:1px solid #ddce9659;padding:17px 0 0}
.game-table .hand-caption{color:#fff9e8;text-shadow:0 1px 2px #0d3226;align-items:center;gap:10px}
.game-table .hand-caption>span{color:#efe6cf;font-size:11px}
.game-table .hand{gap:4px;justify-content:flex-start;padding:8px 4px 10px;scroll-padding:4px;min-height:88px}
.game-table .hand .tile{width:48px;height:72px;border-bottom-width:6px;flex-shrink:0}
.game-table .hand .tile.drawn{margin-left:9px;border-color:#f4f4f0;border-bottom-color:#e5e5e1;outline:2px solid #f3cf69;box-shadow:2px 4px 2px #0b2b2855}
.game-table .hand button.tile:hover{background:#f4f3e5;transform:translateY(-4px)}
.game-table .hand button.tile:focus-visible{outline:3px solid white;outline-offset:3px}
.game-table .game-actions{gap:10px;min-height:12px}
.game-table .game-actions .button{min-height:42px;padding:9px 18px;box-shadow:0 3px 5px #0c2b2555}
.game-table .game-actions .ivory{background:#f2dfb1;color:#352e20;border:1px solid #fbeed2}
.game-table .game-actions .outline-light{background:#193e32;color:#fff6dc;border-color:#e3cf94}
.game-table .tile.small{width:26px;height:37px}

@media(min-width:1450px){
  .game-table .hand .tile{width:53px;height:79px}
}
@media(max-width:1150px){
  .game-table .river-board{gap:24px 140px}
  .game-table .table-center{width:130px;height:140px}
}
@media(max-width:700px){
  .game-table{margin:0 -7px;padding:7% 5% 11%;border-radius:18px}
  .game-table .player-row{gap:4px}
  .game-table .player-tag{padding:7px 2px;min-width:0}
  .game-table .player-tag strong{font-size:10px}
  .game-table .player-tag div>span{font-size:8px}
  .game-table .player-wind{display:none}
  .game-table .river-board{min-height:350px;grid-template-rows:auto 102px auto;gap:7px 12px;padding:17px 1px}
  .game-table .river-0{grid-area:1 / 1}
  .game-table .river-1{grid-area:1 / 2}
  .game-table .river-2{grid-area:3 / 1}
  .game-table .river-3{grid-area:3 / 2}
  .game-table .river{min-width:0}
  .game-table .river>small{font-size:9px}
  .game-table .river-tiles{gap:3px}
  .game-table .tile.small{width:22px;height:32px}
  .game-table .table-center{position:static;transform:none;grid-area:2 / 1 / 3 / -1;place-self:center;width:136px;height:102px;border-width:3px;border-radius:9px}
  .game-table .table-emblem{font-size:21px;margin:0;letter-spacing:4px}
  .game-table .table-center strong{font-size:9px}
  .game-table .table-center>span:not(.table-emblem){font-size:9px}
  .game-table .countdown{font-size:14px;margin-top:2px}
  .game-table .hand-zone{padding-top:13px}
  .game-table .hand-caption{display:block;font-size:12px;margin-bottom:4px}
  .game-table .hand-caption>span{display:block;font-size:9px;margin-top:3px}
  .game-table .hand{min-height:87px}
  .game-table .hand .tile{width:47px;height:71px}
  .game-table .game-actions .button{min-height:44px;font-size:12px;padding:9px 15px}
}