/* v1.9.6 — contained AI turn light and persistent used-card cycle. */

/* Disable the rotating conic pseudo-element entirely. Some mobile Chromium builds
   render the mask as a full triangle outside the seat when overflow is visible. */
.opponent-seat.thinking::after{
  content:none!important;
  display:none!important;
  animation:none!important;
  background:none!important;
  -webkit-mask:none!important;
  mask:none!important;
}
.opponent-seat.thinking{isolation:isolate;overflow:visible!important}
.opponent-seat .ai-turn-frame{
  position:absolute;
  z-index:6;
  inset:2px;
  display:block;
  overflow:hidden;
  border:1px solid rgba(255,214,126,.95);
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,240,195,.16),inset 0 0 12px rgba(226,164,73,.22),0 0 5px rgba(236,181,76,.38);
  animation:aiFramePulse 1.15s ease-in-out infinite alternate;
}
.opponent-seat .ai-turn-frame::before,
.opponent-seat .ai-turn-frame::after{
  content:"";
  position:absolute;
  left:-32%;
  width:32%;
  height:2px;
  border-radius:99px;
  background:linear-gradient(90deg,transparent,rgba(255,242,200,.98),transparent);
  filter:drop-shadow(0 0 3px rgba(255,205,105,.85));
  animation:aiFrameSweep 1.65s linear infinite;
}
.opponent-seat .ai-turn-frame::before{top:0}
.opponent-seat .ai-turn-frame::after{bottom:0;animation-direction:reverse}
@keyframes aiFramePulse{from{opacity:.62}to{opacity:1}}
@keyframes aiFrameSweep{to{left:100%}}

/* Opponent counts show only cards currently available in hand. Used cards are
   public, face-up information and remain as dim miniature cards until Rest. */
.opponent-used-row{
  width:100%;
  min-width:0;
  min-height:14px;
  margin-top:3px;
  padding:1px 2px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(104,82,61,.45);
  border-radius:4px;
  background:rgba(5,5,4,.52);
}
.opponent-used-card{
  position:relative;
  flex:0 0 15px;
  width:15px;
  height:20px;
  margin-right:-3px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid #68523e;
  border-radius:2px;
  background:linear-gradient(160deg,#b9a17e,#765f46);
  opacity:.42;
  filter:grayscale(.8) brightness(.66);
  box-shadow:0 1px 2px #000b;
  pointer-events:none;
}
.opponent-used-card .effect{min-height:0!important;height:100%!important;margin:0!important;gap:1px!important;transform:scale(.48)}
.opponent-used-card .cube{width:6px!important;height:6px!important;min-width:6px!important;border-radius:1px!important}
.opponent-used-card .cube-group{gap:1px!important;max-width:20px!important}
.opponent-used-card .trade-effect{display:grid!important;grid-template-rows:1fr 4px 1fr!important}
.opponent-used-card .trade-arrow{font-size:6px!important;line-height:4px!important}
.opponent-used-card .upgrade-icon{font-size:10px!important}
.opponent-used-card strong{font-size:6px!important}
.seat-footer .merchant-back b{color:#f2d791}

/* The player's card cycle stays in one row: available cards on the left,
   used cards on the right. A used card never disappears from view. */
.personal-zone-right{
  grid-template-columns:minmax(0,1fr) clamp(50px,5.7vw,70px)!important;
}
.personal-zone-right.has-orders{
  grid-template-columns:minmax(0,1fr) clamp(54px,7vw,88px) clamp(50px,5.7vw,70px)!important;
}
.card-cycle-row{align-items:center!important;scroll-padding-inline:5px}
.available-hand-card{
  opacity:1!important;
  filter:none!important;
}
.available-hand-card.locked{
  cursor:default!important;
  opacity:1!important;
  filter:none!important;
}
.available-hand-card.locked:hover{transform:none!important;border-color:#86603f!important}
.hand-cycle-divider{
  position:sticky;
  right:auto;
  flex:0 0 26px;
  align-self:stretch;
  min-height:72%;
  margin:0 2px 0 5px;
  display:grid;
  place-items:center;
  border-left:1px solid rgba(222,178,103,.56);
  border-right:1px solid rgba(222,178,103,.22);
  color:#c49b64;
  background:linear-gradient(90deg,transparent,rgba(190,140,76,.08),transparent);
  pointer-events:none;
}
.hand-cycle-divider span{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:7px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.played-hand-card{
  position:relative!important;
  flex:0 0 clamp(50px,5.7vw,70px)!important;
  width:clamp(50px,5.7vw,70px)!important;
  height:calc(clamp(50px,5.7vw,70px)*1.5)!important;
  min-height:0!important;
  opacity:.38!important;
  filter:grayscale(.78) saturate(.38) brightness(.64)!important;
  cursor:not-allowed!important;
  transform:scale(.96)!important;
  border-style:dashed!important;
  box-shadow:inset 0 0 0 1px rgba(20,16,12,.55),0 3px 8px rgba(0,0,0,.48)!important;
  animation:usedCardArrive .36s cubic-bezier(.2,.85,.25,1) both;
}
.played-hand-card:hover{transform:scale(.96)!important;border-color:#675340!important}
.played-hand-card::after{
  content:"USED";
  position:absolute;
  z-index:5;
  right:3px;
  bottom:3px;
  padding:2px 3px;
  border:1px solid rgba(239,205,151,.35);
  border-radius:3px;
  color:#e5c79b;
  background:rgba(24,19,15,.82);
  font-size:5px;
  font-weight:900;
  letter-spacing:.08em;
}
html[lang="zh-Hans"] .played-hand-card::after{content:"已用"}
.no-available-cards{
  flex:0 0 auto;
  max-width:125px;
  padding:7px 9px;
  border:1px dashed #604b37;
  border-radius:6px;
  color:#b99b76;
  font-size:8px;
  line-height:1.3;
}
.personal-mini-status{overflow:visible!important}
.personal-mini-status .own-points{height:auto;max-height:100%;overflow:hidden}
.played-area{display:none!important}
@keyframes usedCardArrive{from{opacity:0;transform:translateX(-14px) scale(.86)}to{opacity:.38;transform:translateX(0) scale(.96)}}

/* The replay flight now lands on the actual dim used card rather than the old
   cramped Played counter. */
.played-hand-card.receive-glow,.opponent-used-card.receive-glow{
  animation:usedReceiveGlow .9s ease both!important;
}
@keyframes usedReceiveGlow{0%,100%{box-shadow:0 3px 8px rgba(0,0,0,.48)}45%{box-shadow:0 0 0 2px rgba(246,202,116,.72),0 0 18px rgba(237,178,76,.75)}}

@media (orientation:landscape) and (max-height:560px){
  .opponent-used-row{min-height:11px;margin-top:1px;padding:0 1px}
  .opponent-used-card{flex-basis:11px;width:11px;height:14px;margin-right:-2px}
  .hand-cycle-divider{flex-basis:18px;margin-left:3px}
  .hand-cycle-divider span{font-size:5px}
  .played-hand-card{flex-basis:clamp(46px,5.4vw,58px)!important;width:clamp(46px,5.4vw,58px)!important;height:calc(clamp(46px,5.4vw,58px)*1.5)!important}
  .played-hand-card::after{right:2px;bottom:2px;padding:1px 2px;font-size:4px}
}
@media (prefers-reduced-motion:reduce){
  .opponent-seat .ai-turn-frame,.opponent-seat .ai-turn-frame::before,.opponent-seat .ai-turn-frame::after,.played-hand-card{animation:none!important}
}