/* Stage1086: Stage1085 base with browse-to-drag lift margin and a PASSED
   overlay fixed to the visible hand viewport centre. Stage1077's raised-hand
   presentation and the two-state hand model remain unchanged. Gameplay, turn
   handling and transport remain owned by TFCore / the existing bridge. */

/* Equal side columns keep both hand rows optically centered even though the
   score and deck controls have different intrinsic widths. */
#main .board > .handRow{
  --trf-hux-side-slot:clamp(58px,6.6vw,62px);
  box-sizing:border-box !important;
  width:100% !important;
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:var(--trf-hux-side-slot) minmax(0,1fr) var(--trf-hux-side-slot) !important;
  align-items:center !important;
  column-gap:0 !important;
  padding-left:max(3px,env(safe-area-inset-left,0px)) !important;
  padding-right:max(3px,env(safe-area-inset-right,0px)) !important;
}

#main .board > .handRow > .handWrap{
  box-sizing:border-box;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  grid-column:2 !important;
  justify-self:stretch !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

#main .board > .handRow > .handWrap > .hand,
#main .trfMeHandWrap,
#main #meHand{
  box-sizing:border-box;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
}

/* One viewport-specific scale owns the whole hand. Card use, pass, opponent
   turns, tutorial replay and selection may change status/position, but must
   never substitute a smaller hand size. */
#main #meHand{
  --trf-hux-card-scale:1.36;
  --trf-hux-pressed-scale:1.36;
}

#main #meHand.trf-hux-hand{
  --trf-hux-step:52px;
  --trf-hux-overlap:0px;
  --trf-hux-selection-spacing:0px;
  --trf-hux-edge:10px;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:0 !important;
  padding-left:var(--trf-hux-edge) !important;
  padding-right:var(--trf-hux-edge) !important;
  padding-top:calc(var(--hcard-w) * .62) !important;
  padding-bottom:calc(var(--hcard-w) * .54) !important;
  min-height:calc(var(--hcard-w) * 2.82) !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  overscroll-behavior-x:none;
  scroll-behavior:auto !important;
  scroll-snap-type:none !important;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:auto;
  touch-action:none !important;
  isolation:isolate;
}

#main #meHand.trf-hux-hand::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

#main #meHand.trf-hux-hand.trf-hux-scroll{
  justify-content:flex-start !important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.34),transparent 18px) left center/28px 100% no-repeat,
    linear-gradient(270deg,rgba(0,0,0,.34),transparent 18px) right center/28px 100% no-repeat !important;
}

/* Stage711/975 adds this class from a late runtime <style> whenever the hand
   has six or more cards. Its old rule forced flex-start and a large visual
   inset even when every card fit, which caused intermittent left/right bias.
   The Stage1077 selector is intentionally more specific: fitted hands remain
   centred, while genuine overflow keeps the normal symmetric scroll model. */
#main #meHand.trfHandFan.trf975-edge-space-only.trf-hux-hand.trf-hux-fit{
  justify-content:center !important;
  padding-left:var(--trf-hux-edge) !important;
  padding-right:var(--trf-hux-edge) !important;
  scroll-padding-left:var(--trf-hux-edge) !important;
  scroll-padding-right:var(--trf-hux-edge) !important;
}

#main #meHand.trfHandFan.trf975-edge-space-only.trf-hux-hand.trf-hux-scroll{
  justify-content:flex-start !important;
  padding-left:var(--trf-hux-edge) !important;
  padding-right:var(--trf-hux-edge) !important;
  scroll-padding-left:var(--trf-hux-edge) !important;
  scroll-padding-right:var(--trf-hux-edge) !important;
}

#main #meHand.trf-hux-hand .card{
  position:relative !important;
  flex:0 0 var(--hcard-w) !important;
  width:var(--hcard-w) !important;
  min-width:var(--hcard-w) !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  margin-left:0 !important;
  margin-right:calc(-1 * var(--trf-hux-overlap)) !important;
  transform:
    translate3d(var(--trf-hux-neighbor-x,0px),var(--trf-hux-y,0px),0)
    rotate(var(--trf-hux-rot,0deg))
    scale(var(--trf-hux-card-scale)) !important;
  transform-origin:50% 92% !important;
  transition:transform 215ms cubic-bezier(.20,.72,.28,1),box-shadow 190ms ease-out,filter 190ms ease-out,opacity 120ms ease-out !important;
  will-change:auto;
  contain:layout style;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

#main #meHand.trf-hux-hand .card:last-child{
  margin-right:0 !important;
}

#main #meHand.trf-hux-hand .card.trf-hux-near-before{
  --trf-hux-neighbor-x:-3px;
}

#main #meHand.trf-hux-hand .card.trf-hux-near-after{
  --trf-hux-neighbor-x:3px;
}

#main #meHand.trf-hux-hand .card.trf-hux-near-before,
#main #meHand.trf-hux-hand .card.trf-hux-near-after,
#main #meHand.trf-hux-hand .card.trf-hux-pressed,
#main #meHand.trf-hux-hand .card.sel,
#main #meHand.trf-hux-hand .card.trf-hux-selected{
  will-change:transform;
}

/* Fail-safe for stale legacy `.sel` paint. The expanded/highlighted form is
   legal only while the canonical operation class is active below. */
body:not(.trf-card-operation-active) #main #meHand.trf-hux-hand .card.sel,
body:not(.trf-card-operation-active) #main #meHand.trf-hux-hand .card.trf-hux-selected{
  --trf-hux-neighbor-x:0px;
  transform:
    translate3d(0,var(--trf-hux-y,0px),0)
    rotate(var(--trf-hux-rot,0deg))
    scale(var(--trf-hux-card-scale)) !important;
  transform-origin:50% 92% !important;
  filter:none !important;
  outline:0 !important;
  box-shadow:none !important;
}

#main #meHand.trf-hux-hand .card.trf-hux-pressed:not(.sel){
  transform:
    translate3d(var(--trf-hux-neighbor-x,0px),calc(var(--trf-hux-y,0px) - 3px),0)
    rotate(var(--trf-hux-rot,0deg))
    scale(var(--trf-hux-pressed-scale)) !important;
  filter:brightness(1.10) saturate(1.06) !important;
}

#main #meHand.trf-hux-hand .card.trf-hux-source{
  opacity:.24 !important;
  filter:saturate(.55) brightness(.72) !important;
}

/* PASSED is a status overlay, not a hand layout. Keep the same card size,
   position, fan rotation and overlap as the normal unselected hand. The
   explicit selector also prevents any legacy passed-state transform from
   reintroducing the old compact horizontal row. The JS layout now applies
   this same fan geometry after card use, cancellation, turn change and pass. */
body:not(.trf-card-operation-active) #main #meHand.trf-hux-hand.trf-hux-layout-fan.is-passed{
  position:relative !important;
  padding-top:calc(var(--hcard-w) * .62) !important;
  padding-bottom:calc(var(--hcard-w) * .54) !important;
  min-height:calc(var(--hcard-w) * 2.82) !important;
}

body:not(.trf-card-operation-active) #main #meHand.trf-hux-hand.trf-hux-layout-fan.is-passed .card{
  flex:0 0 var(--hcard-w) !important;
  width:var(--hcard-w) !important;
  min-width:var(--hcard-w) !important;
  transform:
    translate3d(var(--trf-hux-neighbor-x,0px),var(--trf-hux-y,0px),0)
    rotate(var(--trf-hux-rot,0deg))
    scale(var(--trf-hux-card-scale)) !important;
  transform-origin:50% 92% !important;
}

body:not(.trf-card-operation-active) #main #meHand.trf-hux-hand.trf-hux-layout-fan.is-passed > .passFlag{
  display:flex !important;
  /* Absolute children move with overflow content. Add the live scrollLeft to
     cancel that movement and stay at 50% of the visible hand viewport. */
  left:calc(50% + var(--trf-hux-status-scroll-x,0px)) !important;
  right:auto !important;
  pointer-events:none !important;
  z-index:3000 !important;
}

/* The important top-left value remains inside the guaranteed 30px exposed strip. */
#main #meHand.trf-hux-hand .card .cardTop,
.trf-draw-highlight .card .cardTop{
  left:1px !important;
  right:auto !important;
  top:1px !important;
  z-index:20 !important;
  overflow:visible !important;
}

#main #meHand.trf-hux-hand .card .cardValue,
.trf-draw-highlight .card .cardValue{
  box-sizing:border-box;
  min-width:23px !important;
  max-width:27px;
  height:19px;
  padding:1px 4px !important;
  margin:0 !important;
  justify-content:center !important;
  text-align:center !important;
  white-space:nowrap;
  overflow:visible;
  font-size:13px !important;
  line-height:15px !important;
  background:rgba(3,8,13,.86) !important;
  border-color:rgba(235,248,255,.54) !important;
  box-shadow:0 2px 7px rgba(0,0,0,.70);
  text-shadow:0 1px 3px rgba(0,0,0,1) !important;
}

/* Card-operation composition: board and effect ribbon stay visible, low-priority
   personal score/deck controls leave the flex flow and free the entire hand row. */
body.trf-card-operation-active #main .board > .zones + .handRow{
  position:relative !important;
  z-index:1500 !important;
  isolation:isolate !important;
  overflow:visible !important;
}

body.trf-card-operation-active #main .board > .zones{
  position:relative !important;
  z-index:1 !important;
}

body.trf-card-operation-active #main .board > .zones + .handRow > .trfSideScore--me,
body.trf-card-operation-active #main .board > .zones + .handRow > .meDeckBox{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
  visibility:hidden;
  transition:opacity 90ms ease-out,transform 120ms ease-out !important;
}

body.trf-card-operation-active #main .board > .zones + .handRow > .trfSideScore--me{
  left:0;
  transform:translate3d(-10px,8px,0) scale(.88) !important;
}

body.trf-card-operation-active #main .board > .zones + .handRow > .meDeckBox{
  right:0;
  transform:translate3d(10px,8px,0) scale(.88) !important;
}

body.trf-card-operation-active #main .board > .zones + .handRow > .trfMeHandWrap{
  position:relative !important;
  z-index:1501 !important;
  overflow:visible !important;
  grid-column:1 / -1 !important;
  flex:1 1 100% !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
}

body.trf-card-operation-active #main .board > .handRow:first-of-type > .deckBox,
body.trf-card-operation-active #main .board > .handRow:first-of-type > .trfSideScore--op{
  opacity:.34 !important;
  filter:saturate(.60) brightness(.78);
  transition:opacity 110ms ease-out,filter 110ms ease-out !important;
}

body.trf-card-operation-active #main #meHand.trf-hux-hand{
  position:relative !important;
  z-index:1502 !important;
  padding-left:var(--trf-hux-edge) !important;
  padding-right:var(--trf-hux-edge) !important;
}

/* Selection is the only raised row. Restore Stage1077's compact spacing so a
   finger can browse neighbouring cards without the wide Stage1083 scroll
   jump. The variable may be negative for very large hands by design. */
body.trf-card-operation-active #main #meHand.trf-hux-hand .card{
  --trf-hux-neighbor-x:0px;
  margin-left:0 !important;
  margin-right:var(--trf-hux-selection-spacing) !important;
}

body.trf-card-operation-active #main #meHand.trf-hux-hand .card:last-child{
  margin-right:0 !important;
}

/* A fitted hand has no horizontal scrolling responsibility, so its selected
   cards may safely rise across the battlefield boundary without clipping. */
body.trf-card-operation-active #main #meHand.trf-hux-hand.trf-hux-fit{
  overflow:visible !important;
}

/* Horizontal overflow normally clips transformed children in both axes. Add
   transparent headroom above the scroll viewport and cancel it with an equal
   negative margin: layout below the hand does not move, while raised cards
   can cross the battlefield boundary on the hand's foreground layer. */
body.trf-card-operation-active #main #meHand.trf-hux-hand.trf-hux-scroll{
  padding-top:calc(var(--hcard-w) * 1.67) !important;
  min-height:calc(var(--hcard-w) * 3.87) !important;
  margin-top:calc(var(--hcard-w) * -1.05) !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  overscroll-behavior-x:none !important;
  -webkit-overflow-scrolling:auto !important;
  pointer-events:none !important;
}

body.trf-card-operation-active #main #meHand.trf-hux-hand.trf-hux-scroll .card{
  pointer-events:auto !important;
}

/* Card-operation mode uses one upright row. Every card keeps the
   exact canonical size; selection is communicated by glow, never by another
   scale or vertical offset. */
body.trf-card-operation-active #main #meHand.trf-hux-hand .card{
  transform:
    translate3d(var(--trf-hux-neighbor-x,0px),calc(var(--trf-hux-y,0px) - 15px),0)
    rotate(var(--trf-hux-rot,0deg))
    scale(var(--trf-hux-card-scale)) !important;
}

body.trf-card-operation-active #main #meHand.trf-hux-hand .card.sel,
body.trf-card-operation-active #main #meHand.trf-hux-hand .card.trf-hux-selected{
  --trf-hux-neighbor-x:0px;
  transform:translate3d(0,calc(var(--trf-hux-y,0px) - 15px),0) rotate(var(--trf-hux-rot,0deg)) scale(var(--trf-hux-card-scale)) !important;
  filter:brightness(1.10) saturate(1.08) !important;
  outline:2px solid rgba(144,224,255,.96) !important;
  outline-offset:2px !important;
  box-shadow:
    0 0 0 2px rgba(225,249,255,.48) inset,
    0 0 12px rgba(76,195,255,.92),
    0 0 28px rgba(76,195,255,.46),
    0 13px 26px rgba(0,0,0,.56) !important;
}

body.trf-card-operation-active #main #meHand.trf-hux-hand .card.trf-hux-pressed:not(.sel){
  transform:
    translate3d(var(--trf-hux-neighbor-x,0px),calc(var(--trf-hux-y,0px) - 15px),0)
    rotate(var(--trf-hux-rot,0deg))
    scale(var(--trf-hux-card-scale)) !important;
}

/* A lane tap may recreate the same hand DOM. During that synchronous rebuild,
   keep both legacy fan animation and the new transition disabled; the first
   real card selection still receives the normal smooth motion. */
body.trf-hux-stable-selection-render #main #meHand .card,
body.trf-hux-stable-selection-render #main #meHand .card *{
  transition:none !important;
  animation-duration:1ms !important;
  animation-delay:0ms !important;
}

/* TFCore rebuilds both hand DOM trees after an opponent action. If the
   player's hand signature and selection are unchanged, Stage1083 keeps this
   guard for the first committed frame so legacy/new transform transitions
   cannot produce a small vertical twitch. */
body.trf-hux-stable-own-hand-render #main .trfMeHandWrap,
body.trf-hux-stable-own-hand-render #main #meHand,
body.trf-hux-stable-own-hand-render #main #meHand .card,
body.trf-hux-stable-own-hand-render #main #meHand .card *{
  transition:none !important;
  animation:none !important;
}

/* Lane availability and selection presentation stays exactly on Stage1068:
   .dndLaneBlocked, .dropHover and .zoneBlock remain owned by the base DND. */

body.trf-hux-committing #main #meHand{
  pointer-events:none !important;
}

.trf-drag-ghost.trf-hux-ghost-stage1077{
  transform:translate(-50%,-74%) scale(2.35) !important;
  filter:drop-shadow(0 15px 25px rgba(0,0,0,.64)) !important;
  will-change:left,top;
}

/* Effect ribbon follows the measured battlefield, not the viewport. */
#effPop.trf-hux-field-aligned{
  box-sizing:border-box !important;
  left:var(--trf-hux-field-left) !important;
  right:auto !important;
  width:var(--trf-hux-field-width) !important;
  max-width:var(--trf-hux-field-width) !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Card details and the face-choice UI stay above the raised hand even though
   the hand itself now correctly sits above every battlefield lane. */
body.trf-card-operation-active #effPop,
body.trf-card-operation-active #effPop.trf-hux-field-aligned{
  z-index:2400 !important;
}

#effPopText .effMain,
#effPopText .effTitle,
#effPopText .effDesc,
#effPopText .trf711-desc-body{
  text-align:center !important;
}

/* The badge is visually reserved on both sides, keeping the description body
   on the exact same center axis as the card title. */
#effPopText .trf711-desc-row{
  position:relative !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  align-items:center !important;
  gap:0 !important;
  padding-left:42px !important;
  padding-right:42px !important;
}

#effPopText .trf711-desc-label{
  position:absolute !important;
  left:4px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
}

#dragFacePop{
  max-width:min(92vw,360px);
}

/* Card-target effects use per-card dimming instead of a board-wide composited
   veil. This keeps Scout and similar eligible cards genuinely above the dim
   state on Safari/Chromium as well as preserving their emerald pulse. */
body.trf-effect-choice-card #main .board::before,
#main.trf-effect-choice-card .board::before{
  display:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

body.trf-effect-choice-card #main .rowTop > .card:not(.trf-effPick),
body.trf-effect-choice-card #main .rowBottom > .card:not(.trf-effPick),
#main.trf-effect-choice-card .rowTop > .card:not(.trf-effPick),
#main.trf-effect-choice-card .rowBottom > .card:not(.trf-effPick){
  opacity:.56 !important;
  filter:grayscale(.30) brightness(.46) saturate(.72) !important;
}

body.trf-effect-choice-card #main .zoneCol,
#main.trf-effect-choice-card .zoneCol{
  box-shadow:inset 0 0 0 999px rgba(0,0,0,.20) !important;
}

body.trf-effect-choice-card #main .card.trf-effPick,
body.trf-effect-choice-card #main .card.trf-eff-focus-top,
#main.trf-effect-choice-card .card.trf-effPick,
#main.trf-effect-choice-card .card.trf-eff-focus-top{
  opacity:1 !important;
  filter:none !important;
  isolation:isolate !important;
  animation:trfStage1075EffectTargetPulse .88s ease-in-out infinite !important;
}

@keyframes trfStage1075EffectTargetPulse{
  0%,100%{ filter:brightness(1.12) saturate(1.12); }
  50%{ filter:brightness(1.34) saturate(1.24); }
}

/* Tutorial Practice 2 must keep the pass control reachable even when a stale
   hand selection still owns the ordinary card-operation composition. Restore
   the three normal grid tracks before the tutorial resolves its pass target. */
body.trf-tutorial-practice-pass.trf-card-operation-active #main .board > .zones + .handRow > .trfSideScore--me,
body.trf-tutorial-practice-pass.trf-card-operation-active #main .board > .zones + .handRow > .meDeckBox,
body.trf-tutorial-cpu-replay.trf-card-operation-active #main .board > .zones + .handRow > .trfSideScore--me,
body.trf-tutorial-cpu-replay.trf-card-operation-active #main .board > .zones + .handRow > .meDeckBox{
  position:relative !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
  transition:none !important;
}

body.trf-tutorial-practice-pass.trf-card-operation-active #main .board > .zones + .handRow > .trfSideScore--me,
body.trf-tutorial-cpu-replay.trf-card-operation-active #main .board > .zones + .handRow > .trfSideScore--me{
  grid-column:1 !important;
}

body.trf-tutorial-practice-pass.trf-card-operation-active #main .board > .zones + .handRow > .trfMeHandWrap,
body.trf-tutorial-cpu-replay.trf-card-operation-active #main .board > .zones + .handRow > .trfMeHandWrap{
  grid-column:2 !important;
  width:100% !important;
  max-width:none !important;
}

body.trf-tutorial-practice-pass.trf-card-operation-active #main .board > .zones + .handRow > .meDeckBox,
body.trf-tutorial-cpu-replay.trf-card-operation-active #main .board > .zones + .handRow > .meDeckBox{
  grid-column:3 !important;
}

body.trf-tutorial-practice-pass #main #btnPass,
body.trf-tutorial-practice-pass #main .trfDeckPassBtn{
  display:flex !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

/* CPU-vs-CPU replay is observational. CPU's transient internal selection must
   not look like a human hand selection or repeatedly pull focus from the board. */
body.trf-tutorial-cpu-replay.trf-card-operation-active #main .board > .handRow:first-of-type > .deckBox,
body.trf-tutorial-cpu-replay.trf-card-operation-active #main .board > .handRow:first-of-type > .trfSideScore--op{
  opacity:1 !important;
  filter:none !important;
  transition:none !important;
}

body.trf-tutorial-cpu-replay.trf-card-operation-active #main #meHand.trf-hux-hand .card{
  transform:
    translate3d(var(--trf-hux-neighbor-x,0px),var(--trf-hux-y,0px),0)
    rotate(var(--trf-hux-rot,0deg))
    scale(var(--trf-hux-card-scale)) !important;
  transition:none !important;
}

/* CPU replay is presentation-only. Neutralize the legacy hand animation even
   during the brief interval before the replacement hand receives hux classes. */
body.trf-tutorial-cpu-replay #main #meHand .card,
body.trf-tutorial-cpu-replay #main #meHand .card.sel,
body.trf-tutorial-cpu-replay #main #meHand .card.hl{
  transform:
    translate3d(0,var(--trf-hux-y,0px),0)
    rotate(var(--trf-hux-rot,0deg))
    scale(var(--trf-hux-card-scale)) !important;
  filter:none !important;
  outline:0 !important;
  box-shadow:none !important;
  transition:none !important;
  animation:none !important;
}

body.trf-tutorial-cpu-replay #main #meHand .card *{
  transition:none !important;
  animation:none !important;
}

body.trf-tutorial-cpu-replay #main #meHand.trf-hux-hand .card.sel,
body.trf-tutorial-cpu-replay #main #meHand.trf-hux-hand .card.trf-hux-selected{
  --trf-hux-neighbor-x:0px;
  transform:
    translate3d(0,var(--trf-hux-y,0px),0)
    rotate(var(--trf-hux-rot,0deg))
    scale(var(--trf-hux-card-scale)) !important;
  filter:none !important;
  outline:0 !important;
  box-shadow:none !important;
  transition:none !important;
}

/* Keep the personal deck and pass control inside their reserved grid track at
   every viewport width. This also beats the legacy `.deckBox * {transform:none}`
   rule that made the pass button extend beyond the clipped #play boundary on
   wide/fullscreen layouts. */
#main .board > .zones + .handRow > .meDeckBox{
  box-sizing:border-box !important;
  grid-column:3 !important;
  justify-self:center !important;
  align-self:center !important;
  width:min(var(--hcard-w),50px) !important;
  min-width:min(var(--hcard-w),50px) !important;
  max-width:50px !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

#main .board > .zones + .handRow > .meDeckBox .trfDeckPassBtn,
#main .trfDeckPassBtn{
  box-sizing:border-box !important;
  left:50% !important;
  right:auto !important;
  top:-31px !important;
  width:48px !important;
  min-width:48px !important;
  max-width:48px !important;
  transform:translateX(-50%) !important;
}

@media (max-width:600px){
  #main .board > .handRow{
    --trf-hux-side-slot:58px;
  }
}

/* Wide/tall Web screens previously stopped after the natural 280px field and
   left a large black strip below the hand. Spend that vertical budget on the
   battlefield without changing card size or any game geometry. */
@media (min-width:760px) and (min-height:820px) and (max-height:899px) and (min-aspect-ratio:4/3){
  :root{ --trf-stage1062-field-height:315px; }
}

@media (min-width:760px) and (min-height:900px) and (min-aspect-ratio:4/3){
  :root{ --trf-stage1062-field-height:350px; }
}

@media (max-width:390px), (max-height:720px){
  #main .board > .handRow{
    --trf-hux-side-slot:58px;
  }
  #main #meHand.trf-hux-hand{
    padding-top:calc(var(--hcard-w) * .56) !important;
    padding-bottom:calc(var(--hcard-w) * .48) !important;
    min-height:calc(var(--hcard-w) * 2.72) !important;
  }
  body.trf-card-operation-active #main #meHand.trf-hux-hand.trf-hux-scroll{
    padding-top:calc(var(--hcard-w) * 1.61) !important;
    min-height:calc(var(--hcard-w) * 3.77) !important;
    margin-top:calc(var(--hcard-w) * -1.05) !important;
  }
  #main #meHand{
    --trf-hux-card-scale:1.32;
    --trf-hux-pressed-scale:1.32;
  }
  body.trf-card-operation-active #main #meHand.trf-hux-hand .card{
    transform:
      translate3d(var(--trf-hux-neighbor-x,0px),calc(var(--trf-hux-y,0px) - 12px),0)
      rotate(var(--trf-hux-rot,0deg))
      scale(var(--trf-hux-card-scale)) !important;
  }
  body.trf-card-operation-active #main #meHand.trf-hux-hand .card.sel,
  body.trf-card-operation-active #main #meHand.trf-hux-hand .card.trf-hux-selected,
  body.trf-card-operation-active #main #meHand.trf-hux-hand .card.trf-hux-pressed:not(.sel){
    transform:translate3d(0,calc(var(--trf-hux-y,0px) - 12px),0) rotate(var(--trf-hux-rot,0deg)) scale(var(--trf-hux-card-scale)) !important;
  }
}

@media (min-width:700px){
  #main #meHand{
    --trf-hux-card-scale:1.38;
    --trf-hux-pressed-scale:1.38;
  }
  body.trf-card-operation-active #main #meHand.trf-hux-hand .card{
    transform:
      translate3d(var(--trf-hux-neighbor-x,0px),calc(var(--trf-hux-y,0px) - 16px),0)
      rotate(var(--trf-hux-rot,0deg))
      scale(var(--trf-hux-card-scale)) !important;
  }
  body.trf-card-operation-active #main #meHand.trf-hux-hand .card.sel,
  body.trf-card-operation-active #main #meHand.trf-hux-hand .card.trf-hux-selected,
  body.trf-card-operation-active #main #meHand.trf-hux-hand .card.trf-hux-pressed:not(.sel){
    transform:translate3d(0,calc(var(--trf-hux-y,0px) - 16px),0) rotate(var(--trf-hux-rot,0deg)) scale(var(--trf-hux-card-scale)) !important;
  }
}

/* Final tutorial lock: these selectors come after every responsive operation
   scale, guaranteeing that CPU replay never alternates between focus sizes. */
body.trf-tutorial-cpu-replay #main #meHand.trf-hux-hand .card,
body.trf-tutorial-cpu-replay.trf-card-operation-active #main #meHand.trf-hux-hand .card,
body.trf-tutorial-cpu-replay #main #meHand.trf-hux-hand .card.sel,
body.trf-tutorial-cpu-replay #main #meHand.trf-hux-hand .card.trf-hux-selected{
  --trf-hux-neighbor-x:0px;
  transform:
    translate3d(0,var(--trf-hux-y,0px),0)
    rotate(var(--trf-hux-rot,0deg))
    scale(var(--trf-hux-card-scale)) !important;
  filter:none !important;
  outline:0 !important;
  box-shadow:none !important;
  transition:none !important;
}

/* A stale operation marker must never promote the observational CPU hand above
   the board. This rule follows the player-focus stacking rules deliberately. */
body.trf-tutorial-cpu-replay.trf-card-operation-active #main .board > .zones + .handRow{
  z-index:auto !important;
  isolation:auto !important;
}

@media (prefers-reduced-motion:reduce){
  #main #meHand.trf-hux-hand .card,
  body.trf-card-operation-active #main .deckBox,
  body.trf-card-operation-active #main .trfSideScore{
    transition-duration:1ms !important;
    animation-duration:1ms !important;
  }
}