/* TriPanic: Typhoon v0.10.3 – multiplayer-first SPACE VOYAGE presentation.
   Visual-only: no card, attack, turn, targeting or PANIC rules changed.
   Keep the gameplay in open space, not on a floating table or ship interior. */
.game-stage .voyage-scene {
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:#080d20;
}
.game-stage .voyage-scene__region {
  position:absolute;inset:-2%;opacity:0;
  background-position:center;background-repeat:no-repeat;background-size:cover;
  transition:opacity 1.55s ease;
  animation:none;
}
.game-stage .voyage-scene__region--open {background-image:url('/typhoon-scenes/open-space.svg')}
.game-stage .voyage-scene__region--orbit {background-image:url('/typhoon-scenes/planetary-orbit.svg')}
.game-stage .voyage-scene__region--nebula {background-image:url('/typhoon-scenes/nebula-crossing.svg')}
/* Voyage destinations introduced in v0.10.3. They remain behind the game board. */
.game-stage .voyage-scene__region--asteroids {background-image:url('/typhoon-scenes/asteroid-passage.svg')}
.game-stage .voyage-scene__region--ringed {background-image:url('/typhoon-scenes/ringed-world.svg')}
.game-stage .voyage-scene__region--outpost {background-image:url('/typhoon-scenes/abandoned-outpost.svg')}
.game-stage:not([data-voyage-region]) .voyage-scene__region--open,
.game-stage[data-voyage-region="open"] .voyage-scene__region--open,
.game-stage[data-voyage-region="orbit"] .voyage-scene__region--orbit,
.game-stage[data-voyage-region="nebula"] .voyage-scene__region--nebula,
.game-stage[data-voyage-region="asteroids"] .voyage-scene__region--asteroids,
.game-stage[data-voyage-region="ringed"] .voyage-scene__region--ringed,
.game-stage[data-voyage-region="outpost"] .voyage-scene__region--outpost {opacity:1; animation:tt-voyage-drift 140s ease-in-out infinite alternate}
/* A slow parallax star glint, very faint so card highlights retain priority. */
.game-stage .voyage-scene__glints {
  position:absolute;inset:-2%;opacity:.23;pointer-events:none;
  background-image:radial-gradient(circle at 8% 24%,#d5f4ff 0 1px,transparent 1.4px),
     radial-gradient(circle at 38% 69%,#b6cdff 0 1px,transparent 1.4px),
     radial-gradient(circle at 71% 21%,#e7e2ff 0 1px,transparent 1.4px),
     radial-gradient(circle at 94% 86%,#cde8ff 0 1px,transparent 1.4px);
  background-size:470px 340px,600px 460px,750px 520px,510px 610px;
  animation:tt-voyage-glints 90s linear infinite alternate;
}
@keyframes tt-voyage-glints {from {transform:translate3d(0,0,0)} to {transform:translate3d(-1.2%,.7%,0)}}
.game-stage .voyage-scene__shade {
  position:absolute;inset:0;
  background:linear-gradient(90deg,#060c20a3 0%,transparent 25%,transparent 75%,#090b20a1 100%),
             radial-gradient(ellipse at 50% 54%,#0a102026 0%,#070a1880 90%);
}
@keyframes tt-voyage-drift {from{transform:scale(1.005) translateX(-.3%)}to{transform:scale(1.065) translateX(.4%)}}

/* A discreet destination marker replaces generic, unrelated board ornaments.
   It uses information already available to every client (rematch round). */
.game-stage .voyage-marker {
  position:absolute;z-index:1;top:10px;right:clamp(9px,2.1vw,32px);
  display:flex;flex-direction:row-reverse;align-items:center;gap:8px;min-width:0;text-align:right;
  color:#c2d0ed;user-select:none;pointer-events:none;
  text-transform:uppercase;letter-spacing:1.55px;
  filter:drop-shadow(0 2px 6px #0008);
}
.game-stage .voyage-marker__icon{width:19px;height:19px;border:1px solid #63bcda67;border-radius:50%;display:grid;place-items:center;color:#80e8f0;font-size:11px}
.game-stage .voyage-marker__copy{display:flex;flex-direction:column;gap:1px}
.game-stage .voyage-marker__overline{font-weight:850;font-size:8px;color:#80c9d6;letter-spacing:2.2px}
.game-stage .voyage-marker__location{font-weight:850;font-size:10px;color:#e4effb}
.game-stage .voyage-marker__round{font-size:8px;color:#91a9cf;letter-spacing:1px}

/* Card arena: ground the two stacks in a faint optical focus without a tabletop. */
.game-stage .table-center{isolation:isolate}
.game-stage .table-center::before {
  content:"";position:absolute;z-index:-1;left:-17%;right:-17%;top:8%;height:110%;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse at center,#184c7869 0%,#24418b27 33%,transparent 72%);
  filter:blur(12px);
}
.game-stage .table-center .pile-label {color:#becfe7;text-shadow:0 2px 4px #060b1b;letter-spacing:.7px}
.game-stage .table-center .active-color{font-weight:900;letter-spacing:.65px}

/* Gameplay status is a compact command cue, not a permanent giant billboard. */
.game-stage .battle-message {
  border:1px solid #58bac6a8;
  background:linear-gradient(105deg,#091a2be8,#0a182de8 62%,#13132de8);
  box-shadow:0 5px 25px #0008,inset 0 1px 0 #c6ffff20;
  border-radius:14px;
  backdrop-filter:blur(7px);
}
.game-stage .battle-message h2{letter-spacing:.055em;text-shadow:0 0 9px #52dae34b}
.game-stage.is-choosing-target .battle-message{border-color:#ffb09e;box-shadow:0 0 12px #ff7a6f51}
.game-stage.is-human-turn:not(.is-choosing-target) .battle-message{border-color:#49e9ddc4}

/* Seats communicate turn ownership and incoming threats with different colors. */
.game-stage .opponent.crew-seat {
  background:linear-gradient(110deg,#0d172fe9,#0d1329ed)!important;
  border-color:#5d769288;
  box-shadow:inset 0 1px 0 #ffffff14,0 7px 21px #0206158a;
  backdrop-filter:blur(5px);
}
.game-stage .opponent.crew-seat.turn {
  border-color:#65e4e3!important;
  box-shadow:0 0 0 1px #57e8dc70,0 0 18px #25e8e153,0 9px 22px #0009!important;
}
.game-stage .opponent.crew-seat.target-locked,
.game-stage .opponent.crew-seat.target-selectable:hover {
  border-color:#ff8ea9!important;
  box-shadow:0 0 0 1px #ff729575,0 0 23px #ff447c54!important;
}
.game-stage .player-panel {
  background:linear-gradient(100deg,#0d2039ed,#11172fef);
  border-color:#598aa5a6;
  box-shadow:inset 0 1px 0 #ccffff14,0 7px 21px #0006;
  backdrop-filter:blur(6px);
}
.game-stage .player-panel.active {border-color:#76f9ec;box-shadow:0 0 0 1px #55eddf7d,0 0 19px #38e9d863,0 8px 23px #0009}
.game-stage .player-panel.incoming {border-color:#ff8cb0!important;box-shadow:0 0 0 1px #ff8a9a7a,0 0 19px #ff63987a!important}

/* Cards still use the approved v0.9.7.2 color system and icon/logo assets.
   Raise ONLY legal cards while waiting cards stay legible and subdued. */
.game-stage.is-human-turn #hand .hand-card-cell.is-playable .game-card{
  box-shadow:0 0 0 1px var(--tt-light,#b5fcff),0 0 17px var(--tt-glow,#55f5eb91),0 8px 22px #000a!important;
}
.game-stage #hand .hand-card-cell.is-playable:focus-within .game-card{
  outline:2px solid #dcfffd;outline-offset:2px;
}
.game-stage #hand .hand-card-cell:not(.is-playable) .game-card{opacity:.87}

/* Control buttons: cleaner construction without swapping their intended colors. */
.game-stage .action-panel .action-btn{border-radius:12px;box-shadow:inset 0 1px 0 #ffffff3f,0 7px 16px #03091b85;letter-spacing:.025em}
.game-stage .action-panel .action-btn:focus-visible{outline:2px solid #efffff;outline-offset:3px}
.game-stage .action-panel #draw:not(:disabled){background:linear-gradient(98deg,#53e6ea,#b3a2ed);color:#071b31}

/* Smaller screens already have tuned gameplay geometry. Preserve it. */
@media (pointer:coarse) and (orientation:landscape) and (max-height:760px){
 .game-stage .voyage-marker{top:3px;right:6px;gap:4px;opacity:.68}
 .game-stage .voyage-marker__icon{display:none}
 .game-stage .voyage-marker__overline,.game-stage .voyage-marker__round{display:none}
 .game-stage .voyage-marker__location{font-size:7px;letter-spacing:.8px}
 .game-stage .voyage-scene__shade{background:linear-gradient(90deg,#061021a8,transparent 23%,transparent 78%,#061021a8)}
 .game-stage .battle-message{border-radius:9px;backdrop-filter:none}
 .game-stage .opponent.crew-seat,.game-stage .player-panel{backdrop-filter:none}
}
@media (max-width:850px){.game-stage .voyage-marker{display:none}}
@media (prefers-reduced-motion:reduce){
 .game-stage .voyage-scene__region{animation:none!important;transition:none;will-change:auto}
 .game-stage .voyage-scene__glints{animation:none!important}
 .game-stage .battle-message,.game-stage .opponent.crew-seat{backdrop-filter:none}
}