/* 下家のツモ位置は奥端に固定し、引くたびに手牌の位置を変えない。 */
.side[data-pos="1"] .opponentDraw { order: 1; padding-left: 8px; padding-right: 0; }
#fx .flightTurn { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform-style: preserve-3d; }
#fx .flightBackFace {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, #38885f, #236344);
  box-shadow: inset 0 0 0 1px #173c2e55, inset 1px 0 0 #91bda033;
}
#hand.laidOpen .tile { transform-origin: 50% 100%; transform: rotateX(64deg); transition: none; }
.callout.finish { animation: finishCallout 2.4s ease-out forwards; }
@keyframes finishCallout {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.65); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  22%, 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1); }
}
.winnerCue {
  position: fixed; transform: translateX(-50%); padding: 5px 12px;
  max-width: 220px; border: 1px solid #e9c77c; border-radius: 20px;
  background: #102f26f2; color: #fff3cf; font-size: 14px; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.winnerHalo {
  position: absolute; pointer-events: none; transform: translateZ(2px); border: 2px solid #f5d98f; border-radius: 16px;
  box-shadow: 0 0 24px #f5d98f66, inset 0 0 20px #f5d98f22;
  animation: winnerHalo 2.7s ease-out forwards;
}
@keyframes winnerHalo { 0% { opacity: 0; } 15%, 75% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .callout.finish, .winnerHalo { animation: none; }
}

/* 本人側の面まで含めて卓内に置く。内縁470pxから2px空ける。 */
.side .orow { top: 468px; }
.side .orow .tile.back { transform: translateY(calc(var(--thickness) * -1)) rotateX(-90deg); }
.side .orow .open {
  margin-top: calc(var(--w) * -1.33);
  transform-origin: 50% 100%;
}
.opponentRevealBack {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, #38885f, #236344);
  box-shadow: inset 0 0 0 1px #173c2e55, inset 1px 0 0 #91bda033;
}
/* 4段の河も、倒した手牌までの空きを残す。 */
.side .river.crowded { --river-w: 20px; }

/* 卓の投影と深度を共有する牌の移動。固定画面のFXより手前に重ねない。 */
.tableFlight { position: absolute; left: 0; top: 0; transform-style: preserve-3d; pointer-events: none; }
.tableFlight > .tile { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 50% 50%; translate: -50% -50%; }
.tableFlight .tile.back .tileFace { background: linear-gradient(135deg, #38885f, #236344); }
.side.arrangingHand .orow { visibility: hidden; }
.handArrangement, .arrangeTile { position: absolute; left: 0; top: 0; transform-style: preserve-3d; pointer-events: none; }
.arrangeTile > .tile { position: absolute; left: 0; top: 0; margin: 0; translate: -50% -50%; transform-origin: 50% 50%; }
.flightBackFace { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, #38885f, #236344); }
#hand { position: relative; }
#hand > .winnerHalo { transform-origin: 50% 100%; transform: rotateX(24deg); }
#hand.laidOpen > .winnerHalo { transform: rotateX(64deg); }
#mine { position: relative; }
#turnClock { position: absolute; left: 12px; right: 12px; top: 23px; height: 4px; border-radius: 4px; background: #102820; overflow: hidden; pointer-events: none; }
#turnClock > span { display: block; width: 100%; height: 100%; background: #54c8ee; transform-origin: left; transform: scaleX(var(--remaining, 1)); transition: transform .1s linear, background-color .3s; }
#turnClock[data-urgency="warning"] > span { background: #f4ce59; }
#turnClock[data-urgency="urgent"] > span { background: #f27365; }

#returnControl { position: absolute; top: 48px; right: 12px; z-index: 25; }
#returnControl .act { height: 38px; padding: 6px 12px; font-size: 14px; border-color: #8cdbd0; background: #154b40; color: #f0fff8; }

/* 手牌と河で厚みが異なっても、移動の途中に形を跳ねさせない。 */
@property --flight-depth { syntax: '<length>'; inherits: true; initial-value: 0px; }

@property --flight-width { syntax: '<length>'; inherits: true; initial-value: 21px; }

#tableContext { margin-left: auto; font-size: 11px; color: #b9d2c6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tableContext.riichiNotice { color: #ffd58b; font-weight: 800; }
.railEyebrow > #turnLabel { flex: none; }
#game #playDock .coachCard { height: 46px; min-height: 46px; flex-direction: column; align-items: stretch; gap: 2px; }
#game #playDock .railEyebrow { width: 100%; min-width: 0; height: 14px; flex: none; }
#game #playDock #coach { height: 18px; min-height: 18px; flex: none; align-self: stretch; }
@media (max-width: 480px) {
  #tableContext { font-size: 9px; }
}
.ownDrawBack { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg,#38885f,#236344); transform: rotateY(180deg); backface-visibility: hidden; box-shadow: inset 0 0 0 1px #173c2e55; }