/* components.arena.css — scoped arena layout and active player dock */

/* Root arena layout & local tokens */
 .cmp-arena {
  --arena-gap: 20px;
  --slot-min-w: 240px;
  --slot-min-h: 180px;
  --slot-border: 3px dashed rgba(255, 255, 255, 0.30);
  --slot-bg: rgba(255, 255, 255, 0.03);
  --slot-radius: 12px;
  --active-scale: 0.82;
  position: relative;
  display: flex; /* revert to flex column for stable stacking */
  flex-direction: column;
  align-items: stretch;
  gap: var(--arena-gap);
  z-index: 1;
  padding: 12px 16px 48px;
  box-sizing: border-box;
 }

/* Removed legacy fixed positioning of active player card.
   Card now lives inside .arena-active-player-dock (absolute top-right) or in Tokyo slots. */

.cmp-player-profile-card[data-active-player="true"].active-glow {
  box-shadow: 0 0 20px rgba(255, 212, 0, 0.8), 0 0 40px rgba(255, 212, 0, 0.4) !important;
  animation: activePlayerGlow 2s ease-out forwards !important;
}

@keyframes activePlayerGlow {
  0% { box-shadow: 0 0 20px rgba(255, 212, 0, 0.8), 0 0 40px rgba(255, 212, 0, 0.4); }
  100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
}

.cmp-arena [data-arena-section] > h3 {
  margin: 0 0 8px;
  font-family: 'Bangers', cursive;
  letter-spacing: 1px;
  font-size: 32px;
  color: #ffcf33;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
  position: relative;
  z-index: 10;
}

/* Tokyo grid: City + Bay */
 .cmp-arena [data-tokyo] {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: flex-start;
   gap: 32px;
   position: relative;
   padding: 8px 12px 16px;
   margin: 0 auto;
   max-width: 920px;
   width: 100%;
 }

 .cmp-arena .city-slot,
 .cmp-arena .bay-slot {
   position: relative;
   display: flex;
   align-items: stretch;
   justify-content: center;
   /* Card scales to .85 inside, so slot needs to accommodate: 260 * .85 = 221 + small padding */
   width: var(--tokyo-slot-default-width, 240px);
   min-width: 240px;
   min-height: 300px;
   padding: 14px;
   border: 3px dashed rgba(255, 255, 255, 0.35);
   border-radius: 0;
   background: rgba(0,0,0,0.28);
   box-shadow: 0 0 0 1px rgba(0,0,0,0.35) inset, 0 6px 14px rgba(0,0,0,0.25) inset;
   overflow: visible;
   box-sizing: border-box;
 }
/* Allow card to extend beyond slot boundaries (don't clip) */
.cmp-arena [data-arena-section="city"],
.cmp-arena [data-arena-section="bay"] { overflow: visible; }

/* Active Player area (right) */
/* Active player slot infrastructure removed - card animates directly from monsters panel */

/* When a card is docked, hide the dashed guide to avoid yellow peeking at edges */
.cmp-arena .active-player-slot[data-occupied="true"] { border-color: transparent; }

/* Dock element injected by JS for the active player card */
#active-player-card-slot[data-active-card-dock] {
  /* Centering is handled inline by JS for precision during animation; keep container permissive. */
  position: absolute;
  transform-origin: center center;
  /* Above dice tray (6600) to avoid being visually hidden during rolls */
  z-index: 6700;
}

/* Prevent stretching: never size the card by width/height here; the SLOT is scaled instead. */
#active-player-card-slot[data-active-card-dock] .cmp-player-profile-card[data-in-active-dock="true"] {
  transform: translate(-50%, -50%);
  transform-origin: center center;
  margin: 0;
  --tokyo-bay-rot: 0deg;
  overflow: hidden; /* ensure interior content doesn't bleed out */
  box-sizing: border-box;
  /* Removed max-width and max-height constraints to allow free scaling */
}

/* Subtle glow when docking (triggered by JS by toggling .dock-glow) – white glow per request */
.cmp-player-profile-card.dock-glow { box-shadow: 0 0 0 2px rgba(255,255,255,0.95), 0 10px 24px rgba(0,0,0,0.4); }

/* Occupant label fallback inside city/bay slots */
.cmp-arena .slot-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Nunito', sans-serif;
  color: rgba(255,255,255,0.6);
}

/* City/Bay active highlighting (optional attribute-based styles) */
.cmp-arena [data-arena-section][data-active="true"] .city-slot,
.cmp-arena [data-arena-section][data-active="true"] .bay-slot {
  border-color: rgba(255, 207, 51, 0.6);
}

/* Disabled Bay when <5 players (visual dim) */
.cmp-arena [data-arena-section="bay"][data-disabled="true"] .bay-slot {
  opacity: 0.6;
  filter: saturate(0.85);
}

/* Round indicator */
.cmp-arena [data-round-indicator] {
  grid-column: 1 / -1;
  margin-bottom: -6px;
}
.cmp-arena .round-indicator-label { display:inline-block; padding:4px 10px; font-family:'Bangers', cursive; background:transparent; border:0; border-radius:8px; color:#ffcf33; }

/* Responsive: mobile/touch — keep nothing stretched; reduce minimums slightly */
@media (max-width: 1024px), (pointer: coarse) {
  .cmp-arena {
    grid-template-columns: 1fr; /* stack sections */
    gap: 12px;
  }
  .cmp-arena [data-tokyo] {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .cmp-arena { --slot-min-w: 220px; --slot-min-h: 170px; --active-scale: 0.66; }
  /* Ensure active area remains a fixed dotted box with centered scaled card */
  /* Active slot keeps fixed footprint; scaling is applied to dock element only */
  /* Slot centering handled by JS; avoid CSS transforms here to prevent 1px drift */
  #active-player-card-slot[data-active-card-dock] { transform: none; }
}
/* components.arena.css
 * New arena component styles (attribute-driven) replacing legacy .game-board and tokyo-* classes.
 * This file now owns arena layout & visuals.
 */


/* Arena surface background wrapper adjustments */
.cmp-arena {
  min-height: 60vh;
  border: var(--arena-border);
  background: var(--arena-bg);
  box-shadow: 0 0 20px rgba(0,0,0,.6) inset;
}
/* (Re)defined Tokyo container above; remove duplicate variant */
/* Remove prior forced tile width; allow content to define size. Provide custom properties for JS-driven sizing. */
.cmp-arena { --tokyo-tile-width:auto; --tokyo-tile-height:auto; }
/* Let sections shrink-to-fit content with safe max constraints; no fixed 260px */
.cmp-arena [data-arena-section="city"],
.cmp-arena [data-arena-section="bay"] { 
  /* Provide an initial footprint matching a player card ratio until a clone sets intrinsic size */
  --tokyo-slot-default-width: var(--player-card-width, 260px);
  --tokyo-slot-default-height: var(--player-card-height, 200px);
  width: var(--tokyo-tile-width, var(--tokyo-slot-default-width)); 
  max-width: 100%; 
  flex: 0 0 auto;
  min-height: 200px; /* Ensure tiles always have height even when transitioning from mobile */
}
/* Responsive variables (final block) */
:root {
  --arena-bg: rgba(0,0,0,0.4);
  --arena-border: 2px solid #222;
  --arena-radius: 12px;
  --arena-slot-border: 2px dashed #555;
  --arena-panel-bg: rgba(0,0,0,0.55);
  --arena-gap: clamp(20px,4vw,60px);
  --arena-slot-height: 140px; /* slightly larger for bigger tiles */
  --arena-round-size: 60px;
  --arena-round-color: var(--accent-monsters,#ffcf33);
  --tokyo-city-rot: -4deg;
  --tokyo-bay-rot: 5deg;
  --tokyo-tile-scale: 1; /* base scale 1; responsive adjustments below */
  --tokyo-tile-width: clamp(220px, 18vw, 320px);
}
 .cmp-arena [data-arena-section="bay"],
 .cmp-arena [data-arena-section="city"] {
   background: var(--arena-panel-bg);
   border: 2px solid #333;
   padding: 14px;
   border-radius: 0;
   text-align: center;
   position: relative;
   flex: 0 0 auto;
   transform-origin: center center;
 }
/* Active section container removed - card positioned directly */
/* Removed previous fixed miniature slot size; new flexible slot above */

.cmp-arena [data-round-indicator] { position:absolute; top:6px; left:6px; display:flex; flex-direction:row; align-items:center; gap:8px; padding:4px 12px 6px; background:var(--arena-round-color); border:3px solid #000; border-radius:40px; box-shadow:3px 3px 0 #000,0 0 0 2px #222 inset; z-index:10; }
.cmp-arena [data-round-indicator] .round-indicator-label { font-family:'Bangers',cursive; font-size:1.05rem; letter-spacing:1px; color:#000; white-space:nowrap; display:flex; gap:6px; }
.cmp-arena [data-round-indicator] [data-round-counter] { font-weight:700; font-size:1.15rem; }
.cmp-arena .tokyo-occupant { display:flex; flex-direction:column; gap:2px; font-size:.75rem; background:transparent; border:0; padding:0; border-radius:4px; color:#eee; }
.cmp-arena .slot-empty { font-size:.7rem; color:#777; font-style:italic; }
.cmp-arena [data-arena-section="city"],
.cmp-arena [data-arena-section="bay"] { /* Remove container rotation; rotate the card itself for stable geometry */
  transform:scale(var(--tokyo-tile-scale));
}
.cmp-arena [data-arena-section="active"] { transform:rotate(0deg) scale(var(--tokyo-tile-scale)); opacity:1; }
/* Active tile gets a neutral rotation var and a touch more width */
.cmp-arena [data-arena-section="active"] { --tokyo-bay-rot: 0deg; flex:0 1 calc(var(--tokyo-tile-width) + 40px); max-width: calc(var(--tokyo-tile-width) + 40px); }

/* Float the active player tile in the arena’s top-right corner with a bit of padding */
.cmp-arena [data-arena-section="active"] { position:absolute; top:12px; right:12px; left:auto; bottom:auto; width:auto; }
/* Active player slot now uses fixed dimensions from CSS custom properties - no min-width/min-height */
@media (max-width:1024px), (pointer:coarse) {
  /* Removed min-width/min-height overrides - slot uses fixed CSS custom property dimensions */
}

/* Make the docked card a bit smaller specifically when inside the active dock */
/* Scale is applied via JS in the transform, don't override it here */

/* Attribute-based highlight states */
.cmp-arena [data-arena-section][data-active="true"] { box-shadow:0 0 0 2px var(--accent-glow, rgba(0,200,255,0.4)); }
.cmp-arena [data-arena-section="bay"] { opacity:.75; }
.cmp-arena [data-arena-section="bay"][data-active="true"] { opacity:1; }

/* Disabled Bay (fewer than 5 players) */
.cmp-arena [data-arena-section="bay"][data-disabled="true"] {
  opacity:.35;
  filter:grayscale(.6) brightness(.8);
  position:relative;
}
/* Removed ::after overlay that was creating vertical rectangle */

/* Occupant emphasis */
.cmp-arena .city-slot > *,
.cmp-arena .bay-slot > * { transition:transform .3s ease, filter .3s ease; }
.cmp-arena .city-slot > *[data-active="true"],
.cmp-arena .bay-slot > *[data-active="true"] { transform:scale(1.05); filter:drop-shadow(0 0 6px rgba(0,200,255,0.6)); }

/* Real card in Tokyo: optionally scale via attribute for spatial fit */
/* Generic in-Tokyo baseline (overridden by specific city/bay rotation rules) */
/* Center cards horizontally and vertically inside Tokyo slots while retaining scale */
.cmp-arena .city-slot,
.cmp-arena .bay-slot { 
  display: flex; 
  justify-content: center; 
  align-items: center; /* Changed from flex-start to center for vertical centering */
}
.cmp-arena .city-slot .cmp-player-profile-card[data-in-tokyo-slot],
.cmp-arena .bay-slot .cmp-player-profile-card[data-in-tokyo-slot] {
  transform: scale(.85);
  transform-origin: center center; /* Changed from top center to center center */
  margin: 0;
}
/* Specific orientation per tile */
/* Card inside Tokyo scales only; rotation supplied by parent tile transform to avoid double rotation */
.cmp-arena .city-slot .cmp-player-profile-card[data-in-tokyo-slot="city"],
.cmp-arena .bay-slot  .cmp-player-profile-card[data-in-tokyo-slot="bay"]  { transform: scale(.85); }
/* FLIP animation class (inline styles set start transform; we only ensure easing fairness here if fallback) */
.cmp-player-profile-card.tokyo-flip-anim { will-change: transform; }

/* Disable all animations during portal animation to prevent conflicts with transform */
.cmp-player-profile-card.tokyo-portal-animating {
  animation: none !important;
}

/* Disable all child transitions during portal animation to prevent children from moving separately */
.cmp-player-profile-card.tokyo-portal-animating *,
.cmp-player-profile-card.tokyo-portal-animating *::before,
.cmp-player-profile-card.tokyo-portal-animating *::after {
  transition: none !important;
  animation: none !important;
}

/* Portal travel clone */
.tokyo-travel-clone { box-shadow:4px 4px 0 #000,0 0 0 2px #ff6b35 inset,0 0 18px rgba(255,107,53,.6); border:3px solid #000; border-radius:4px; }
.tokyo-travel-glow { animation:tokyoTravelGlow 0.6s ease-in-out alternate infinite; }
@keyframes tokyoTravelGlow { 0%{ filter:brightness(1) drop-shadow(0 0 0 rgba(255,107,53,0.4)); } 100% { filter:brightness(1.15) drop-shadow(0 0 12px rgba(255,107,53,0.85)); } }
/* Arrival pulse */
.cmp-player-profile-card.tokyo-arrival-glow { animation:tokyoArrival 0.9s ease; }
@keyframes tokyoArrival { 0%{ box-shadow:0 0 0 0 rgba(255,107,53,0.0),4px 4px 0 #000,0 0 0 2px #ff6b35 inset; } 40%{ box-shadow:0 0 0 6px rgba(255,107,53,0.65),4px 4px 0 #000,0 0 0 2px #ff6b35 inset,0 0 18px rgba(255,107,53,.8); } 100%{ box-shadow:4px 4px 0 #000,0 0 0 2px #ff6b35 inset,0 0 10px rgba(255,107,53,.5); } }
/* Allow interaction with card contents inside Tokyo (remove global pointer-events none) */

/* Prevent legacy CSS from overriding slot/card sizing */
.cmp-arena .city-slot,
.cmp-arena .bay-slot,
/* Reset layer override removed for active-player-slot to keep intended base sizing */
.cmp-arena .city-slot,
.cmp-arena .bay-slot { position: relative; }
/* Entry flourish when card docks into Tokyo */
/* Remove CSS-based settle animation; JS handles arrival glow and settle */
.cmp-arena [data-active-card-dock] .cmp-player-profile-card.in-place { animation:none; }

/* Desktop / default: apply vertical offset AND rotation to tiles (cards inherit visual rotation) */
.cmp-arena [data-arena-section="city"] { transform: translate(-20px, 30px) rotate(-4deg); transform-origin: top left; }
.cmp-arena [data-arena-section="bay"]  { transform: translateY(35px) rotate(5deg);  transform-origin: top left; }

/* Mobile: keep City and Bay side-by-side, remove rotation */
@media (max-width: 1024px), (pointer: coarse) {
  /* Bring Tokyo tiles closer to top while retaining a small breathing space */
  .cmp-arena { padding-top:12px; padding-bottom: 80px; }
  .cmp-arena [data-round-indicator] { top:4px; }
  .cmp-arena [data-tokyo] { position:relative; top:auto; left:auto; transform:none; width:100%; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:flex-start; gap:14px; padding:2px 0 6px; margin-top:4px; }
  .cmp-arena [data-arena-section="city"] { transform: rotate(-8deg) scale(0.5) translate(24vw, 10vh) !important; }
  .cmp-arena [data-arena-section="bay"] { transform: rotate(8deg) scale(0.5) translate(15vw, -3vh) !important; }
  .cmp-arena [data-arena-section="active"] { transform:rotate(0deg) scale(1); }
  /* Removed min-width override - slot uses fixed CSS custom property dimensions */
  /* Remove any CSS transform targeting the dock on mobile; JS sets precise centering */
  #active-player-card-slot[data-active-card-dock] { transform: none; }

  /* Avatar Bubble Mode: hide the docked active card & slot; replaced by fixed bubble (in JS) */
  /* Mobile only hide of active player slot/card */
  .cmp-arena [data-arena-section="active"] .active-player-slot { opacity:0 !important; pointer-events:none !important; width:0 !important; height:0 !important; overflow:hidden !important; margin:0 !important; padding:0 !important; border:0 !important; }
  /* Removed mobile hide rules - cards now position directly with CSS */
}

/* Active player dock inside arena (ensures card visible at game start) */
/* Active player dock: restore absolute top-right positioning (regressed when set to relative) */
.cmp-arena { position:relative; }
.arena-active-player-dock { position:absolute; top:14px; right:14px; width:auto; max-width:40%; min-height: var(--player-card-height, 240px); display:flex; justify-content:flex-end; align-items:flex-start; padding:0; box-sizing:border-box; pointer-events:none; z-index:6601; }
.arena-active-player-dock .cmp-player-profile-card[data-active-player="true"] { position:relative !important; top:auto !important; right:auto !important; left:auto !important; bottom:auto !important; transform:none !important; height:auto !important; margin:0 !important; pointer-events:auto; }

/* When in Tokyo, existing override keeps static positioning; ensure higher specificity than base fixed rule */
/* Scale down to 0.75 (75%) to ensure player name doesn't get cut off */
.arena-active-player-dock .cmp-player-profile-card[data-in-tokyo-slot][data-active-player="true"] { transform:scale(.75); }

/* Slot sizing adjustments: ensure slots have a stable height derived from card size.
  We intentionally DO NOT force inline heights via JS (removed) to avoid stale measurements.
  The card itself scales down inside, leaving some breathing room for glow/border effects. */
.cmp-arena .city-slot,
.cmp-arena .bay-slot { min-height: 240px; }