/*
 * Friends Table Game — Mahjong v10.10 proportional table skin
 * The illustration is a clean backdrop. Tiles, rivers, players and controls
 * are live vector/CSS layers so the Mahjong module can be updated alone.
 */

:root{
  --ftg-vw:100dvw;
  --ftg-vh:100dvh;
  --ftg-table-w:1664px;
  --ftg-table-h:936px;
  --ftg-render-w:100dvw;
  --ftg-render-h:56.25dvw;
  --ftg-scale:1;
}

#game{
  position:fixed!important;
  inset:0!important;
  z-index:50!important;
  width:var(--ftg-vw)!important;
  height:var(--ftg-vh)!important;
  min-height:0!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  background:#f7e2dc!important;
  -webkit-text-size-adjust:100%!important;
  text-size-adjust:100%!important;
}
#game .game-wrap{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  background:#f7e2dc!important;
}
#result{z-index:300!important}

#table.table-shell{
  --hand-tile-w:62px!important;
  --river-tile-w:40px!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  container-type:size!important;
  width:var(--ftg-table-w)!important;
  height:var(--ftg-table-h)!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:16/9!important;
  transform:translate(-50%,-50%) scale(var(--ftg-scale))!important;
  transform-origin:center center!important;
  zoom:1!important;
  filter:none!important;
  opacity:1!important;
  pointer-events:auto!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background-image:url('./assets/table-bg-clean-v3.png')!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  touch-action:manipulation!important;
}

#table.table-shell::before,
#table .table-mascot,
#table .clean-mask,
#table .live-mask{display:none!important}

/* Table controls stay in design coordinates, including on notched phones. */
#table #gameHomeBtn{
  position:absolute!important;
  left:1.25%!important;
  top:1.7%!important;
  z-index:80!important;
  width:9.8%!important;
  height:5.9%!important;
  min-width:0!important;
  min-height:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.45cqw!important;
  padding:0!important;
  border:clamp(1px,.13cqw,2px) solid #c65f72!important;
  border-radius:999px!important;
  color:#fff!important;
  font-size:clamp(10px,1.55cqw,27px)!important;
  font-weight:1000!important;
  background:linear-gradient(180deg,#ff9eb2,#ed6f89)!important;
  box-shadow:inset 0 0 0 clamp(1px,.2cqw,3px) rgba(255,255,255,.42),0 clamp(2px,.32cqh,5px) 0 #bd566a,0 clamp(3px,.55cqh,8px) clamp(5px,.9cqw,14px) rgba(109,63,72,.2)!important;
}
#table #gameHomeBtn:active{transform:translateY(2px)!important}

#game .rotate-hint{
  position:absolute!important;
  inset:auto!important;
  left:13.4%!important;
  top:1.7%!important;
  z-index:75!important;
  display:none!important;
  width:22%!important;
  padding:0!important;
  transform:none!important;
  text-align:left!important;
  pointer-events:none!important;
}
#game .rotate-hint>div{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:.7cqw!important;
  min-height:5.9cqh!important;
  padding:.38cqh .75cqw!important;
  border:1px solid rgba(236,205,199,.95)!important;
  border-radius:clamp(8px,1cqw,16px)!important;
  background:rgba(255,250,247,.95)!important;
  box-shadow:0 .5cqh 1cqw rgba(105,69,75,.12)!important;
  pointer-events:auto!important;
}
#game .rotate-hint b{
  grid-column:1/-1!important;
  margin:0!important;
  color:#60484e!important;
  font-size:clamp(8px,.9cqw,15px)!important;
  line-height:1.15!important;
}
#game .rotate-hint span{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  overflow:hidden!important;
  color:#846970!important;
  font-size:clamp(7px,.67cqw,12px)!important;
  line-height:1.15!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#game .rotate-hint .btn{
  min-width:0!important;
  min-height:0!important;
  padding:.25cqh .45cqw!important;
  border-radius:999px!important;
  font-size:clamp(7px,.65cqw,11px)!important;
  line-height:1.1!important;
  box-shadow:none!important;
}

/* Player identity is compact and uses the role selected before entering. */
#table #playersLayer{position:absolute!important;inset:0!important;z-index:45!important;pointer-events:none!important}
#table .player{
  position:absolute!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  padding:clamp(2px,.42cqh,7px) clamp(4px,.58cqw,10px)!important;
  border:clamp(1px,.13cqw,2px) solid rgba(231,190,181,.96)!important;
  border-radius:999px!important;
  background:rgba(255,250,247,.95)!important;
  box-shadow:0 .5cqh 1cqw rgba(101,66,71,.13)!important;
  pointer-events:none!important;
}
#table .player .seatline{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:clamp(2px,.4cqw,6px)!important}
#table .player .seatline{font-size:12px!important}
#table .player .seatline>span:first-child{display:flex!important;align-items:center!important;min-width:0!important}
#table .player .seatline b{overflow:hidden!important;color:#5e474d!important;font-size:clamp(8px,.8cqw,14px)!important;text-overflow:ellipsis!important;white-space:nowrap!important}
#table .player .chips{color:#6c5159!important;font-size:clamp(8px,.78cqw,14px)!important;white-space:nowrap!important}
#table .player .mini-avatar{width:clamp(20px,2.5cqw,42px)!important;height:clamp(20px,2.5cqw,42px)!important;flex:0 0 auto!important;margin-right:clamp(2px,.3cqw,5px)!important;border:clamp(1px,.12cqw,2px) solid #fff!important;border-radius:50%!important;object-fit:cover!important}
#table .player .say,
#table .player .backs,
#table .player small,
#table .player .melds,
#table .player .flowers{display:none!important}
#table .player .flower-badge{position:absolute!important;right:-5px!important;top:-8px!important;padding:1px 5px!important;border:1px solid #ecb6b7!important;border-radius:999px!important;background:#fff4ed!important;color:#b95362!important;font-size:clamp(7px,.62cqw,11px)!important;font-weight:1000!important;line-height:1.2!important;box-shadow:0 3px 7px rgba(105,66,72,.12)!important}
#table .player.me{outline:0!important;box-shadow:0 0 0 clamp(2px,.2cqw,3px) rgba(255,226,133,.9),0 .55cqh 1.1cqw rgba(101,66,71,.14)!important}
#table .player.p0{left:2.3%!important;bottom:14.4%!important;width:17.7%!important;transform:none!important}
#table .player.p1{right:5.3%!important;top:39.1%!important;width:12.8%!important;transform:none!important}
#table .player.p2{left:41%!important;top:1.8%!important;width:15.8%!important;transform:none!important}
#table .player.p3{left:2.8%!important;top:39.1%!important;width:12.8%!important;transform:none!important}
#table .dealer{padding:1px 4px!important;font-size:.72em!important}

/* Round information stays in the top-right; the center belongs to one shared discard pool. */
#table .center{
  position:absolute!important;
  left:auto!important;
  right:2.3%!important;
  top:2.1%!important;
  z-index:35!important;
  width:13.8%!important;
  height:10.3%!important;
  min-width:0!important;
  min-height:0!important;
  transform:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  padding:.7%!important;
  border:clamp(2px,.2cqw,3px) solid #e29399!important;
  border-radius:clamp(10px,1.4cqw,22px)!important;
  background:linear-gradient(145deg,rgba(93,70,77,.96),rgba(61,50,57,.96))!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 clamp(1px,.2cqw,3px) rgba(255,255,255,.12),0 .7cqh 1cqw rgba(81,54,61,.2)!important;
}
#table .center .wall{font-size:clamp(11px,1.45cqw,25px)!important;line-height:1.05!important}
#table #centerInfo{margin-top:.35cqh!important;font-size:clamp(7px,.72cqw,13px)!important;line-height:1.15!important}

#table #centerDiscards{
  --pool-tile-w:var(--river-tile-w);
  --pool-tile-h:calc(var(--pool-tile-w) / .69);
  position:absolute!important;
  left:50%!important;
  top:46%!important;
  z-index:41!important;
  width:23.3%!important;
  height:29%!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  display:grid!important;
  grid-template-columns:repeat(var(--pool-columns,8),var(--pool-tile-w))!important;
  grid-auto-rows:var(--pool-tile-h)!important;
  grid-auto-flow:row!important;
  align-content:start!important;
  justify-content:start!important;
  align-items:start!important;
  justify-items:start!important;
  gap:3px!important;
  padding:4px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
#table .pool-caption{
  position:absolute!important;
  left:50%!important;
  top:31.5%!important;
  z-index:41!important;
  transform:translate(-50%,calc(-100% - 5px))!important;
  height:auto!important;
  min-height:clamp(12px,1.7cqh,24px)!important;
  align-self:end!important;
  justify-self:center!important;
  padding:clamp(1px,.18cqh,3px) clamp(5px,.55cqw,9px)!important;
  border-radius:999px!important;
  background:rgba(255,248,243,.9)!important;
  color:#82555e!important;
  font-size:clamp(7px,.65cqw,11px)!important;
  font-weight:950!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  box-shadow:0 .25cqh .45cqw rgba(92,58,65,.1)!important;
}
#table .pooled-discard{position:relative!important;display:block!important;width:var(--pool-tile-w)!important;height:var(--pool-tile-h)!important}
#table .pooled-discard .tile.mj-tile.small{width:100%!important;height:100%!important}
#table .pooled-discard.latest .tile.mj-tile.small{box-shadow:0 0 0 clamp(2px,.2cqw,3px) #ff6f8c,0 clamp(2px,.3cqh,4px) 0 #397d61,0 clamp(3px,.45cqh,6px) clamp(3px,.45cqw,7px) rgba(83,60,59,.14)!important}

#table #discardSpotlight{position:absolute!important;left:50%!important;top:43%!important;z-index:120!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:.6cqh!important;transform:translate(-50%,-50%) scale(.7)!important;opacity:0!important;pointer-events:none!important;filter:drop-shadow(0 1.2cqh 1.1cqw rgba(78,46,54,.28))!important}
#table #discardSpotlight.show{animation:discard-pop .9s cubic-bezier(.2,.8,.2,1) both!important}
#table #discardSpotlight .spotlight-label{padding:.35cqh .75cqw!important;border:2px solid #f0a5ae!important;border-radius:999px!important;background:rgba(255,249,244,.98)!important;color:#80515b!important;font-size:clamp(10px,1.05cqw,18px)!important;font-weight:1000!important;white-space:nowrap!important}
#table #discardSpotlight .tile.mj-tile{width:clamp(58px,6.2cqw,104px)!important;height:clamp(81px,8.62cqw,145px)!important;padding:clamp(3px,.35cqw,6px) clamp(3px,.35cqw,6px) clamp(7px,.7cqw,12px)!important;border-radius:clamp(8px,.8cqw,14px)!important;box-shadow:0 clamp(5px,.7cqh,10px) 0 #397d61,0 1.1cqh 1.5cqw rgba(83,60,59,.28),0 0 0 clamp(3px,.28cqw,5px) #ff91a6!important}
@keyframes discard-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-5deg)}18%,70%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(.72) translateY(20%)}}

/* Exposed melds and flowers sit near their owner without extra information cards. */
#table .opponent-sets{position:absolute!important;z-index:42!important;display:flex!important;gap:clamp(1px,.24cqw,4px)!important;align-items:flex-start!important;pointer-events:none!important}
#table .opponent-sets:empty{display:none!important}
#table .opponent-sets .set-group{display:flex!important;gap:1px!important;padding:2px!important;border-radius:6px!important;background:rgba(255,248,242,.7)!important}
#table .opponent-sets .flower-group{box-shadow:inset 0 0 0 1px rgba(211,121,126,.28)!important}
#table .opponent-sets .tile.mj-tile.small{width:var(--river-tile-w)!important;height:calc(var(--river-tile-w) / .69)!important}
#table .opponent-sets .meld-back{display:block!important;width:var(--river-tile-w)!important;height:calc(var(--river-tile-w) / .69)!important;border:1px solid #e7fff0!important;border-radius:5px!important;background:linear-gradient(135deg,#2e825e,#5aab7d 52%,#287655)!important;box-shadow:0 3px 0 #e7eee7,0 4px 6px rgba(83,60,59,.14)!important}
#table .sets-top{left:38.3%!important;top:22.5%!important;width:23.6%!important;max-width:23.6%!important;justify-content:center!important}
#table .sets-left{left:29.4%!important;top:45.5%!important;width:3.1%!important;max-width:3.1%!important;flex-direction:column!important}
#table .sets-right{right:30.2%!important;top:45.5%!important;width:3.1%!important;max-width:3.1%!important;flex-direction:column!important}
#table .sets-left .set-group,#table .sets-right .set-group{max-width:100%!important;flex-wrap:wrap!important}

/* Ivory tile body with a soft green base, matching the generated reference. */
#table .tile.mj-tile{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  width:43px!important;
  height:60px!important;
  aspect-ratio:.72!important;
  padding:2px 2px 6px!important;
  overflow:hidden!important;
  border:clamp(1px,.12cqw,2px) solid #d9d0c8!important;
  border-radius:clamp(5px,.5cqw,8px)!important;
  outline:0!important;
  background:linear-gradient(180deg,#fffefa 0%,#fff8ef 100%)!important;
  color:#20282a!important;
  font-family:"DFKai-SB","BiauKai","Kaiti TC","Noto Sans TC","Microsoft JhengHei",sans-serif!important;
  line-height:1!important;
  box-shadow:0 clamp(3px,.42cqh,5px) 0 #397d61,0 clamp(4px,.7cqh,8px) clamp(5px,.7cqw,10px) rgba(83,60,59,.18),inset 0 2px 2px #fff!important;
}
#table .tile.mj-tile:focus-visible{box-shadow:0 0 0 3px #ff7f98,0 5px 0 #397d61,0 8px 12px rgba(83,60,59,.22)!important}
#table button.tile.mj-tile:not(:disabled):active{transform:translateY(-5px) scale(1.025)!important}
#table .tile.mj-tile.small{width:var(--river-tile-w)!important;height:calc(var(--river-tile-w) / .69)!important;padding:1px 1px 4px!important;border-width:1px!important;border-radius:clamp(3px,.35cqw,6px)!important;box-shadow:0 clamp(2px,.3cqh,4px) 0 #397d61,0 clamp(3px,.45cqh,6px) clamp(3px,.45cqw,7px) rgba(83,60,59,.14)!important}
#table .discard-zone .tile.mj-tile.small{width:var(--zone-tile-w)!important;height:var(--zone-tile-h)!important;aspect-ratio:.69!important}

/* Cute, high-contrast vector tile faces. They remain crisp at every size. */
.tile-face.tile-svg{display:block;width:100%;height:100%;overflow:visible}
.tile-svg text{text-anchor:middle;font-family:"DFKai-SB","BiauKai","Kaiti TC","PingFang TC","Songti TC","Noto Serif TC","Noto Sans TC","Microsoft JhengHei",sans-serif;paint-order:stroke fill;stroke:#fffaf1;stroke-linejoin:round;stroke-width:1.15px}
.tile-svg .wan-number{fill:#24292b;font-size:43px;font-weight:1000;letter-spacing:-2px}
.tile-svg .wan-suit{fill:#d53b48;font-size:25px;font-weight:1000}
.tile-svg .honor-glyph{font-size:52px;font-weight:1000;letter-spacing:-2px}
.tile-svg.honor.black .honor-glyph{fill:#252c2d}.tile-svg.honor.red .honor-glyph{fill:#d33747}.tile-svg.honor.green .honor-glyph{fill:#087c50}
.tile-svg .white-frame{fill:#f7fcfb;stroke:#277492;stroke-width:5px}.tile-svg .white-frame-inner{fill:none;stroke:#8bb8c5;stroke-width:1.5px}.tile-svg .white-label{fill:#277492;font-size:15px;font-weight:1000;opacity:.72;stroke-width:.7px}
.pip-mark .pip-outer{stroke:#fff4e9;stroke-width:1px}.pip-mark.green .pip-outer{fill:#16845a}.pip-mark.green .pip-core{fill:#0d6846}.pip-mark.blue .pip-outer{fill:#34748e}.pip-mark.blue .pip-core{fill:#20576f}.pip-mark.red .pip-outer{fill:#dc4250}.pip-mark.red .pip-core{fill:#b92739}
.pip-mark .pip-paper{fill:#fff9ef}.pip-mark .pip-shine{fill:rgba(255,255,255,.9)}
.pip-special circle:nth-child(1){fill:#118457;stroke:#fff4e9;stroke-width:1}.pip-special circle:nth-child(2){fill:#fff9ef}.pip-special circle:nth-child(3){fill:#dc4250}.pip-special circle:nth-child(4){fill:#fff9ef}.pip-special circle:nth-child(5){fill:#34748e}
.bamboo-mark.green .bamboo-segment,.bamboo-mark.green .bamboo-joint{fill:#118258}.bamboo-mark.blue .bamboo-segment,.bamboo-mark.blue .bamboo-joint{fill:#2b718d}.bamboo-mark.red .bamboo-segment,.bamboo-mark.red .bamboo-joint{fill:#d9434f}.bamboo-mark .bamboo-segment{stroke:#fff9ed;stroke-width:.65px}.bamboo-mark .bamboo-joint{stroke:#fff9ed;stroke-width:.5px}.bamboo-mark .bamboo-shine{fill:none;stroke:rgba(255,255,255,.72);stroke-width:1.25px;stroke-linecap:round}
.bamboo-bird .bird-tail.green{fill:#3c9c68}.bamboo-bird .bird-tail.red{fill:#e36772}.bamboo-bird .bird-tail.blue{fill:#4e8da3}.bamboo-bird .bird-body{fill:#18805a;stroke:#fff9ef;stroke-width:1.5px}.bamboo-bird .bird-head{fill:#72b78a;stroke:#fff9ef;stroke-width:1.5px}.bamboo-bird .bird-wing{fill:#f4c756}.bamboo-bird .bird-cheek{fill:#f48a97}.bamboo-bird .bird-eye{fill:#23332e}.bamboo-bird .bird-beak{fill:#e99c38}.bamboo-bird .bird-feet{fill:none;stroke:#b84d50;stroke-width:2.2px;stroke-linecap:round}
.tile-svg .flower-mark>circle{stroke:#fff9ef;stroke-width:1px}.tile-svg.flower.red .flower-mark>circle{fill:#df6677}.tile-svg.flower.green .flower-mark>circle{fill:#299266}.tile-svg.flower.amber .flower-mark>circle{fill:#d59734}.tile-svg.flower.blue .flower-mark>circle{fill:#4d86a3}.tile-svg .flower-mark .flower-heart{fill:#ffd56d!important;stroke-width:1.5px}.tile-svg .flower-mark .flower-shine{fill:#fff!important;stroke:0}.tile-svg .flower-char{font-size:26px;font-weight:1000}.tile-svg.flower.red .flower-char{fill:#df6677}.tile-svg.flower.green .flower-char{fill:#299266}.tile-svg.flower.amber .flower-char{fill:#d59734}.tile-svg.flower.blue .flower-char{fill:#4d86a3}
.tile-svg .flower-number circle{fill:#fff2d1;stroke:#da9b5b;stroke-width:1.5px}.tile-svg .flower-number text{fill:#8b5a34;font-family:"Arial Rounded MT Bold","Noto Sans TC",sans-serif;font-size:12px;font-weight:1000;stroke:none;paint-order:normal}

/* One live remaining-wall line in front of the local hand. */
#table .player-wall{position:absolute!important;left:24.4%!important;bottom:14.2%!important;width:48%!important;height:2.8%!important;z-index:30!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;gap:clamp(1px,.14cqw,2px)!important;pointer-events:none!important}
#table .wall-back{width:3.1%!important;height:92%!important;min-width:5px!important;border:1px solid #e8fff2!important;border-radius:clamp(2px,.25cqw,4px)!important;background:linear-gradient(90deg,#277d59,#56a779 48%,#267553)!important;box-shadow:0 .22cqh 0 #ecf4e9,0 .35cqh .35cqw rgba(67,66,58,.16)!important}

/* The full 16-tile hand and the separated drawn tile always fit one row. */
#table .hand-wrap{position:absolute!important;left:18%!important;right:10.5%!important;bottom:4.4%!important;z-index:55!important}
#table .hand-row{display:flex!important;align-items:flex-end!important;gap:clamp(10px,1.25cqw,22px)!important;min-width:0!important}
#table .hand{display:flex!important;flex:1 1 auto!important;min-width:0!important;justify-content:flex-start!important;align-items:flex-end!important;gap:clamp(1px,.18cqw,3px)!important;padding:.45cqh .22cqw max(.7cqh,4px)!important;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-inline:contain!important;scrollbar-width:none!important;background:transparent!important}
#table .hand::-webkit-scrollbar{display:none}
#table .hand .tile.mj-tile{flex:0 0 var(--hand-tile-w)!important;width:var(--hand-tile-w)!important;min-width:0!important;height:calc(var(--hand-tile-w) / .72)!important;aspect-ratio:.72!important}
#table .drawn-area{position:relative!important;flex:0 0 calc(var(--hand-tile-w) * 1.06)!important;min-width:0!important;width:calc(var(--hand-tile-w) * 1.06)!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;text-align:center!important;transform:translateX(clamp(4px,.55cqw,10px))!important}
#table .drawn-area.empty{opacity:.5!important}
#table .drawn-area .tile.mj-tile{width:var(--hand-tile-w)!important;height:calc(var(--hand-tile-w) / .72)!important;aspect-ratio:.72!important;box-shadow:0 0 0 clamp(2px,.23cqw,4px) #ff8797,0 clamp(3px,.42cqh,5px) 0 #397d61,0 clamp(5px,.7cqh,8px) clamp(5px,.7cqw,10px) rgba(83,60,59,.18)!important}
#table .drawn-label{position:absolute!important;right:0!important;bottom:106%!important;padding:clamp(1px,.2cqh,3px) clamp(3px,.42cqw,7px)!important;border:1px solid #f3c6c0!important;border-radius:999px!important;background:#fff5f1!important;color:#c65766!important;font-size:clamp(7px,.72cqw,12px)!important;font-weight:900!important;line-height:1.1!important;white-space:nowrap!important}

#table #myExtras{position:absolute!important;left:37.4%!important;bottom:10.8%!important;z-index:54!important;width:24.2%!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;gap:clamp(3px,.45cqw,7px)!important;pointer-events:none!important}
#table #myMelds,#table #myFlowers{position:relative!important;inset:auto!important;display:flex!important;align-items:center!important;flex:0 1 auto!important;gap:2px!important;min-width:0!important;min-height:0!important;max-width:none!important;padding:2px 4px!important;overflow:hidden!important;border-radius:8px!important;background:rgba(255,248,242,.82)!important;box-shadow:0 3px 8px rgba(93,62,66,.1)!important}
#table #myMelds:empty,#table #myFlowers:empty{display:none!important}
#table #myMelds:not(:empty)::before,#table #myFlowers:not(:empty)::before{align-self:center!important;margin-right:2px!important;color:#855b64!important;font-size:clamp(7px,.62cqw,11px)!important;font-weight:1000!important;white-space:nowrap!important}
#table #myMelds:not(:empty)::before{content:'副露'!important}
#table #myFlowers:not(:empty)::before{content:'花牌'!important}
#table #myMelds .tile.mj-tile.small,#table #myFlowers .tile.mj-tile.small{width:var(--river-tile-w)!important;height:calc(var(--river-tile-w) / .69)!important}

/* Five large functional action buttons, aligned above the hand. */
#table .actionbar{position:absolute!important;left:47.2%!important;right:auto!important;bottom:17.8%!important;z-index:60!important;width:42.2%!important;max-width:none!important;transform:none!important;display:flex!important;justify-content:flex-start!important;gap:1.8%!important;flex-wrap:nowrap!important}
#table .actionbar .btn{width:18%!important;min-width:0!important;min-height:0!important;aspect-ratio:1.75!important;padding:0!important;border-radius:999px!important;color:#fff!important;font-size:clamp(13px,1.9cqw,32px)!important;font-weight:1000!important;line-height:1!important;box-shadow:inset 0 0 0 clamp(1px,.2cqw,3px) rgba(255,255,255,.45),0 .48cqh 0 rgba(104,70,75,.25),0 .75cqh .8cqw rgba(104,70,75,.16)!important}
#table .actionbar .btn.claim-chi{background:linear-gradient(#f7b7c3,#ee8195)!important}.actionbar .btn.claim-pong{background:linear-gradient(#b8e4c5,#72c495)!important}.actionbar .btn.claim-kong{background:linear-gradient(#f4d493,#e3b04d)!important}.actionbar .btn.claim-hu,.actionbar .btn.self-hu-btn{background:linear-gradient(#f5a6b6,#e87c95)!important}.actionbar .btn.secondary{background:linear-gradient(#aaa5aa,#858086)!important}
#table .actionbar .btn:disabled{opacity:.62!important;filter:saturate(.66)!important;box-shadow:inset 0 0 0 clamp(1px,.2cqw,3px) rgba(255,255,255,.3),0 .35cqh 0 rgba(104,70,75,.15)!important}
#table .tile:disabled{opacity:1!important;filter:none!important;cursor:default!important}

#table .choice-panel{position:absolute!important;left:47.2%!important;bottom:25.8%!important;z-index:90!important;width:42.2%!important;padding:clamp(5px,.7cqw,10px)!important;border:2px solid #e5aaa5!important;border-radius:clamp(10px,1.2cqw,18px)!important;background:rgba(255,249,244,.98)!important;box-shadow:0 .8cqh 1.4cqw rgba(91,57,63,.2)!important}
#table .choice-title{margin-bottom:4px!important;text-align:center!important;color:#765158!important;font-size:clamp(9px,.9cqw,16px)!important;font-weight:1000!important}
#table .choice-list{display:flex!important;align-items:center!important;justify-content:center!important;gap:clamp(3px,.5cqw,8px)!important;flex-wrap:wrap!important}
#table .choice-option{display:flex!important;gap:2px!important;padding:4px!important;border:2px solid #efc4bd!important;border-radius:10px!important;background:#fff!important;box-shadow:0 3px 7px rgba(99,68,70,.1)!important}
#table .choice-option:hover{border-color:#e97f91!important;transform:translateY(-1px)!important}
#table .choice-cancel{display:block!important;margin:5px auto 0!important;padding:3px 14px!important;border:0!important;border-radius:999px!important;background:#91898e!important;color:#fff!important;font-size:clamp(8px,.7cqw,12px)!important;font-weight:900!important}

#table #status{position:absolute!important;left:18.8%!important;top:auto!important;bottom:18.1%!important;z-index:61!important;width:auto!important;min-width:9%!important;transform:none!important;padding:clamp(2px,.45cqh,6px) clamp(5px,.7cqw,12px)!important;border:2px solid #e3b55c!important;border-radius:999px!important;background:#ffe7a7!important;color:#6a4a2b!important;font-size:clamp(8px,.85cqw,15px)!important;font-weight:1000!important;line-height:1.1!important;text-align:center!important;white-space:nowrap!important;box-shadow:0 .35cqh .55cqw rgba(102,70,61,.13)!important}

/* Working chat and auto-sort controls. */
#table #chatBar{position:absolute!important;left:1.2%!important;bottom:1.8%!important;z-index:65!important;width:17.2%!important;height:5.8%!important;display:flex!important;align-items:center!important;gap:3px!important;padding:.35%!important;border-radius:999px!important;background:rgba(75,65,69,.82)!important;box-shadow:0 .45cqh .7cqw rgba(60,43,48,.14)!important}
#table #musicToggle,#table #chatSend{flex:0 0 auto!important;width:18%!important;height:100%!important;min-width:0!important;min-height:0!important;padding:0!important;border:0!important;border-radius:999px!important;background:rgba(255,255,255,.16)!important;color:#fff!important;font-size:clamp(10px,1.15cqw,19px)!important;font-weight:1000!important}
#table #musicToggle[aria-pressed="true"]{background:#f08aa1!important;color:#fff7d2!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.42)!important}
#table #musicPanel{position:absolute!important;left:1.2%!important;bottom:8.4%!important;z-index:100!important;width:17.2%!important;min-width:0!important;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:clamp(3px,.35cqw,6px)!important;padding:clamp(4px,.55cqh,8px) clamp(6px,.65cqw,11px)!important;border:1px solid rgba(255,255,255,.45)!important;border-radius:999px!important;background:rgba(75,65,69,.9)!important;color:#fff!important;box-shadow:0 .55cqh .9cqw rgba(60,43,48,.18)!important}
#table #musicPanel.hidden{display:none!important}
#table #musicPanel label,#table #musicPanel output{font-size:clamp(7px,.65cqw,11px)!important;font-weight:950!important;white-space:nowrap!important}
#table #musicVolume{width:100%!important;min-width:0!important;height:clamp(12px,1.8cqh,24px)!important;margin:0!important;padding:0!important;accent-color:#f08aa1!important}
#table #chatInput{min-width:0!important;flex:1!important;height:100%!important;padding:0 2%!important;border:0!important;outline:0!important;color:#fff!important;background:transparent!important;font-size:clamp(7px,.7cqw,12px)!important}
#table #chatInput::placeholder{color:rgba(255,255,255,.7)!important}
#table #chatBubble{position:absolute!important;left:2.3%!important;bottom:8.6%!important;z-index:66!important;max-width:25%!important;padding:clamp(3px,.5cqh,7px) clamp(5px,.65cqw,11px)!important;border-radius:14px 14px 14px 4px!important;background:#fff9f4!important;color:#6f5057!important;font-size:clamp(7px,.72cqw,13px)!important;font-weight:800!important;box-shadow:0 .45cqh .7cqw rgba(95,62,68,.13)!important}
#table #sortHandBtn{position:absolute!important;right:1.8%!important;bottom:11.6%!important;z-index:65!important;width:10.2%!important;height:4.9%!important;min-width:0!important;min-height:0!important;padding:0!important;border:0!important;border-radius:999px!important;background:rgba(76,64,69,.87)!important;color:#fff!important;font-size:clamp(7px,.8cqw,14px)!important;font-weight:950!important;box-shadow:0 .4cqh .6cqw rgba(66,47,52,.16)!important}

#table #claimCountdown{position:absolute!important;left:59.8%!important;bottom:29.2%!important;z-index:62!important;display:none;width:23.3%!important;height:1.6%!important;overflow:hidden!important;border-radius:999px!important;background:rgba(90,72,76,.45)!important}
#table #claimCountdown.show{display:block!important}
#table #claimCountdown>i{display:block!important;width:100%!important;height:100%!important;background:linear-gradient(90deg,#ff6382,#ee4770)!important;transform-origin:left center!important}
#table #claimCountdownLabel{position:absolute!important;left:60.5%!important;bottom:31.3%!important;z-index:63!important;display:none;padding:2px 6px!important;border-radius:8px!important;background:rgba(255,246,242,.92)!important;color:#7b4f57!important;font-size:clamp(8px,.95cqw,17px)!important;font-weight:1000!important;line-height:1.1!important}
#table #claimCountdownLabel.show{display:block!important}

/* Only the viewport-level helper responds to orientation. Never resize or
 * reposition a table child in a viewport media query. */
@media (orientation:portrait){
  #game .rotate-hint{display:block!important;position:absolute!important;left:50%!important;right:auto!important;top:auto!important;bottom:max(14px,calc(env(safe-area-inset-bottom) + 8px))!important;width:min(340px,calc(100% - 24px))!important;transform:translateX(-50%)!important;z-index:75!important}
  #game .rotate-hint>div{min-height:0!important;max-width:none!important;column-gap:8px!important;padding:10px 12px!important;border-radius:18px!important}
  #game .rotate-hint b{font-size:16px!important}
  #game .rotate-hint span{font-size:12px!important}
  #game .rotate-hint .btn{padding:7px 11px!important;font-size:12px!important;margin:0!important}
}

@media (prefers-reduced-motion:reduce){
  #table button,#table .tile{transition:none!important}
}