/* v0.10.7 — one safe table for Duel, Trio, Clash, Crew, Typhoon.
   Reservations, not independent percentage coordinates, govern the HUD. */
.game-shell .game-stage{--ty-rail-width:clamp(165px,16vw,245px);--ty-rail-footer:var(--footer-h,44px)}
.game-shell .game-stage .ty-control-rail{
  position:absolute;top:49%;right:var(--stage-edge,2%);
  bottom:calc(var(--ty-rail-footer) + 10px);
  width:var(--ty-rail-width);min-width:0;box-sizing:border-box;z-index:10;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  gap:8px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#536986 transparent;
  padding:1px 2px 1px 1px;pointer-events:auto;
}
.game-shell.ty-party-table .game-stage .ty-control-rail{top:56%;}
/* Children are genuinely in flow now, so PANIC appearing does not collide
   with effects or waiting buttons. Override legacy absolute rules. */
.game-shell .game-stage .ty-control-rail > .effects-panel,
.game-shell .game-stage .ty-control-rail > .action-panel,
.game-shell .game-stage .ty-control-rail > .action-panel.panic-visible{
  position:relative!important;inset:auto!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
  flex:0 0 auto;order:initial;display:flex;box-sizing:border-box;
  width:100%!important;max-width:100%!important;min-width:0;margin:0!important;
  max-height:none!important;overflow:visible!important;z-index:auto;
}
.game-shell .game-stage .ty-control-rail > .effects-panel{
  display:block;padding:8px 10px;border-radius:11px;
}
.game-shell .game-stage .ty-control-rail > .effects-panel[hidden]{display:none!important}
.game-shell .game-stage .ty-control-rail > .action-panel{
  flex-direction:column;align-items:stretch;gap:7px;
}
.game-shell .game-stage .ty-control-rail > .action-panel .action-btn{
  display:block;flex:0 0 auto;box-sizing:border-box;
  min-height:clamp(38px,4.5vh,51px);height:auto;
  padding:7px 10px;white-space:normal;overflow-wrap:anywhere;
  text-overflow:clip;line-height:1.12;
}
/* Hidden control states remain hidden even with the shared display rule. */
.game-shell .game-stage .ty-control-rail > .action-panel .action-btn[style*="display: none"],
.game-shell .game-stage .ty-control-rail > .action-panel .action-btn[style*="display:none"]{display:none!important}
.game-shell .game-stage .ty-control-rail > .action-panel .action-footnote{
  flex:0 0 auto;min-height:0;line-height:1.25;white-space:normal;overflow-wrap:anywhere;
  padding:0 3px 2px;
}
/* The ship is scenery. Deck cards, card choices, HUD and seats always paint
   above it even in a tight travel animation. */
.game-shell .game-stage .foxy-orbit-marker{z-index:2}
.game-shell .game-stage .table-center{z-index:6}
.game-shell .game-stage .battle-message{z-index:7}
.game-shell .game-stage .hand-zone{z-index:9}
.game-shell .game-stage .opponents{z-index:8}
.game-shell .game-stage .player-panel{z-index:9}
.game-shell .game-stage .match-footer{z-index:11}
/* Reserve a clearer bottom center for the entire fan, including raised cards. */
.game-shell .game-stage .hand-zone{isolation:isolate}
@media (orientation:landscape){
 /* Give the hand its own rail; no card fan can occupy the action column. */
 .game-shell .game-stage .hand-zone{max-width:calc(100% - 2 * var(--ty-rail-width) - 42px)}
}
/* Party table can safely keep six panels. The bottom pair stays above the
   action rail, leaving a visible gutter. */
.game-shell.ty-party-table .game-stage .opponent.party-left-lower,
.game-shell.ty-party-table .game-stage .opponent.party-right-lower{top:37%}
@media (max-height:820px) and (orientation:landscape){
 .game-shell .game-stage .ty-control-rail{right:clamp(4px,1vw,16px);gap:6px}
 .game-shell .game-stage .ty-control-rail > .effects-panel{padding:6px 8px}
 .game-shell .game-stage .ty-control-rail > .action-panel{gap:6px}
 .game-shell .game-stage .ty-control-rail > .action-panel .action-footnote{font-size:9px}
}
/* The same lane calculation applies whether a tablet has a mouse or touch. */
@media (orientation:landscape) and (max-width:1100px){
 .game-shell .game-stage{--ty-rail-width:clamp(105px,15.5vw,160px)}
 .game-shell .game-stage .ty-control-rail{top:47%;bottom:calc(var(--footer-h,26px) + 6px);gap:4px}
 .game-shell.ty-party-table .game-stage .ty-control-rail{top:55%}
 .game-shell .game-stage .ty-control-rail > .effects-panel{padding:4px 5px;border-radius:8px}
 .game-shell .game-stage .ty-control-rail > .effects-panel .effects-title{font-size:clamp(7px,1vw,9px);line-height:1.1;margin-bottom:3px}
 .game-shell .game-stage .ty-control-rail > .effects-panel .effect-tag{font-size:clamp(7px,.85vw,9px);padding:2px 4px}
 .game-shell .game-stage .ty-control-rail > .action-panel{gap:4px}
 .game-shell .game-stage .ty-control-rail > .action-panel .action-btn{
   min-height:clamp(30px,9.2dvh,41px)!important;
   padding:4px 5px!important;font-size:clamp(9px,1.35vw,12px)!important;
   border-radius:8px;line-height:1.1;
 }
 .game-shell .game-stage .ty-control-rail > .action-panel .panic-btn{font-size:clamp(10px,1.5vw,13px)!important}
 .game-shell .game-stage .ty-control-rail > .action-panel .action-footnote{display:none}
 .game-shell.ty-party-table .game-stage .opponent.party-left-lower,
 .game-shell.ty-party-table .game-stage .opponent.party-right-lower{top:34%}
}
@media (orientation:landscape) and (max-height:430px){
 .game-shell .game-stage .ty-control-rail > .effects-panel .effects-title{letter-spacing:.1px}
 .game-shell .game-stage .ty-control-rail > .action-panel .action-btn{min-height:clamp(28px,8.7dvh,36px)!important}
 .game-shell.ty-party-table .game-stage .ty-control-rail{top:54%}
 .game-shell.ty-party-table .game-stage .opponent.party-left-lower,
 .game-shell.ty-party-table .game-stage .opponent.party-right-lower{top:33%}
}
/* Portrait is the existing stacked view, not a squashed landscape overlay.
   A wrapper is one flex item, so its children remain in document flow. */
@media (orientation:portrait) and (max-width:900px){
 .game-shell .game-stage .ty-control-rail,
 .game-shell.ty-party-table .game-stage .ty-control-rail{
   order:7;position:relative;inset:auto;top:auto;right:auto;bottom:auto;
   width:100%;max-width:100%;overflow:visible;padding:0;gap:9px;
 }
 .game-shell .game-stage .ty-control-rail > .action-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .game-shell .game-stage .ty-control-rail > .action-panel .panic-btn{grid-column:1/-1}
 .game-shell .game-stage .ty-control-rail > .action-panel .action-footnote{grid-column:1/-1;display:block}
 .game-shell .game-stage .ty-control-rail > .action-panel #quick-rules{display:block!important}
 .game-shell .game-stage .ty-control-rail > .action-panel .action-btn{min-height:44px!important}
}