/* Mobile: collapsed list of names that slide out on tap to reveal full card */
@media (max-width: 1024px), (pointer: coarse) {
  .cmp-monsters-panel { padding:8px 10px 12px; position:relative; z-index:6200; }
  .cmp-monsters-panel .mp-header { position:sticky; top:0; z-index:2; background:rgba(15,15,22,0.9); padding-bottom:6px; }
  .cmp-monsters-panel .mp-player-cards { gap:4px; align-items:flex-start; flex-direction:column; flex-wrap:nowrap; position:relative; }
  
  /* Collapsed row: profile pic + name with monster theme color */
  .cmp-monsters-panel .cmp-player-profile-card.cmp-player-profile-card {
    width: 100%; min-width:200px; max-width:100%; padding:8px 12px; margin:0;
    overflow:hidden; transform:none; transition:all .3s ease;
    background: linear-gradient(135deg, var(--ppc-accent, #2d3436) 0%, rgba(27,31,32,0.9) 100%);
    border: 2px solid var(--ppc-accent, #2d3436);
    border-radius: 6px;
  }
  
  .cmp-monsters-panel .cmp-player-profile-card .ppc-header { 
    margin:0; align-items:center; gap:12px; 
    display: flex;
    justify-content: flex-start;
  }
  
  /* Show avatar in collapsed mode */
  .cmp-monsters-panel .cmp-player-profile-card .ppc-avatar.ppc-avatar { 
    display:block; 
    width: 40px; 
    height: 40px;
    flex-shrink: 0;
  }
  
  .cmp-monsters-panel .cmp-player-profile-card .ppc-name { 
    font-size:16px; line-height:1.15; white-space:nowrap; overflow:hidden; 
    text-overflow:ellipsis; margin:0; flex: 1;
  }
  
  .cmp-monsters-panel .cmp-player-profile-card .ppc-status-line.ppc-status-line { display:none; }
  .cmp-monsters-panel .cmp-player-profile-card .ppc-stats,
  .cmp-monsters-panel .cmp-player-profile-card .ppc-owned-cards,
  .cmp-monsters-panel .cmp-player-profile-card .ppc-health-block { display:none; }
  
  /* Hover/touch highlight */
  .cmp-monsters-panel .cmp-player-profile-card:hover,
  .cmp-monsters-panel .cmp-player-profile-card.is-highlighted { 
    filter:brightness(1.1); 
    transform: translateX(4px);
    box-shadow:4px 4px 0 #000,0 0 0 2px rgba(255,255,255,0.1) inset; 
  }

  /* Expanded state: show full card, expand vertically in place */
  .cmp-monsters-panel .cmp-player-profile-card[data-expanded="true"] {
    width: 100%; max-width: 100%; padding:10px 12px;
    transform: none;
    z-index: 6600;
    box-shadow: 0 3px 14px rgba(0,0,0,0.55), 0 0 0 2px var(--ppc-accent, #2d3436);
  }
  
  .cmp-monsters-panel .cmp-player-profile-card[data-expanded="true"] .ppc-avatar { 
    width: 50px; 
    height: 50px;
  }
  
  .cmp-monsters-panel .cmp-player-profile-card[data-expanded="true"] .ppc-header {
    margin: 0 0 10px;
    gap: 8px;
  }
  /* Further shrink stats blocks & owned cards text */
  .cmp-monsters-panel .cmp-player-profile-card[data-expanded="true"] .ppc-stats { font-size:12px; }
  .cmp-monsters-panel .cmp-player-profile-card[data-expanded="true"] .ppc-owned-cards { font-size:12px; }
  
  .cmp-monsters-panel .cmp-player-profile-card[data-expanded="true"] .ppc-status-line { display:flex; }
  .cmp-monsters-panel .cmp-player-profile-card[data-expanded="true"] .ppc-stats,
  .cmp-monsters-panel .cmp-player-profile-card[data-expanded="true"] .ppc-owned-cards,
  .cmp-monsters-panel .cmp-player-profile-card[data-expanded="true"] .ppc-health-block { display:block; }
  /* Keep stats horizontal and prevent wrapping when expanded */
  .cmp-monsters-panel .cmp-player-profile-card[data-expanded="true"] .ppc-stats { 
    display:flex !important; 
    flex-direction:row !important; 
    flex-wrap:nowrap !important; 
    width:100%; 
  }
  .cmp-monsters-panel .cmp-player-profile-card[data-expanded="true"] .ppc-stats .ppc-stat { flex:1 1 0; min-width:0; }
}
/* components.monsters-panel.css */
.cmp-monsters-panel { 
  background:linear-gradient(180deg,#30353a,#1d1f21); 
  border:3px solid #000; /* Match power cards panel border */
  border-radius:0; /* Sharp 90 degree corners */
  padding:10px 14px 16px; 
  display:flex; 
  flex-direction:column; 
  gap:12px; 
  box-shadow:4px 4px 0 #000; /* Simple drop shadow like power cards */
  height: 90%; /* Set to 90% height */
}

/* Maintain 90% height when collapsed */
.cmp-monsters-panel[data-collapsed="true"] {
  height: 90% !important;
}

.cmp-monsters-panel .mp-header { display:flex; align-items:center; justify-content:space-between; }
.cmp-monsters-panel .mp-title { font-family:'Bangers',cursive; font-size:32px; letter-spacing:1px; color:#ffd400; text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000, 3px 3px 0 #000; margin:0; --accent-monsters:#ffd400; background:transparent; }

/* View Toggle Button */
.cmp-monsters-panel .mp-view-toggle {
  background: linear-gradient(135deg, #2d3436, #1b1f20);
  border: 2px solid #000;
  border-radius: 4px;
  padding: 6px 8px;
  color: #ffcf33;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 0 #000;
}

.cmp-monsters-panel .mp-view-toggle:hover {
  background: linear-gradient(135deg, #3a3d3f, #22262a);
  transform: translateY(-1px);
  box-shadow: 3px 3px 0 #000;
}

/* Hide view toggle when panel is collapsed */
.cmp-side-panel[data-collapsed="true"] .mp-view-toggle {
  display: none;
}

.cmp-monsters-panel .mp-view-toggle .view-icon {
  position: absolute;
  transition: opacity 0.2s ease;
}

/* Default state (list view): show tiled icon */
.cmp-monsters-panel .mp-view-toggle .tiled-icon {
  opacity: 1;
}

.cmp-monsters-panel .mp-view-toggle .list-icon,
.cmp-monsters-panel .mp-view-toggle .stack-icon {
  opacity: 0;
}

/* Tiled state: show stack icon */
.cmp-monsters-panel[data-view="tiled"] .mp-view-toggle .stack-icon {
  opacity: 1;
}

.cmp-monsters-panel[data-view="tiled"] .mp-view-toggle .tiled-icon,
.cmp-monsters-panel[data-view="tiled"] .mp-view-toggle .list-icon {
  opacity: 0;
}

/* Stacked state: show list icon */
.cmp-monsters-panel[data-view="stacked"] .mp-view-toggle .list-icon {
  opacity: 1;
}

.cmp-monsters-panel[data-view="stacked"] .mp-view-toggle .tiled-icon,
.cmp-monsters-panel[data-view="stacked"] .mp-view-toggle .stack-icon {
  opacity: 0;
}

.cmp-monsters-panel .mp-body { display:flex; flex-direction:column; gap:14px; }
.cmp-monsters-panel .mp-player-cards { display:flex; flex-direction:column; gap:12px; }
@media (min-width: 1025px) and (pointer: fine) {
  .cmp-monsters-panel .cmp-player-profile-card { width:100%; }
}

/* Tiled layout: full cards with no overlap, clean vertical stacking */
.cmp-monsters-panel.is-tiled .mp-player-cards { 
  gap: 16px; 
}

.cmp-monsters-panel.is-tiled .cmp-player-profile-card {
  position: relative;
  transform: none !important;
  z-index: auto;
  margin: 0 !important;
}

.cmp-monsters-panel.is-tiled .cmp-player-profile-card:hover {
  transform: translateY(-4px) !important;
  z-index: 10;
}

/* Stacked layout improvements: keep the last card at least slightly exposed and easy to hover */
.cmp-monsters-panel.is-stacked .mp-player-cards { position:relative; }
.cmp-monsters-panel.is-stacked .mp-player-cards::after { content:""; display:block; height:110px; } /* spacer so the last overlapped card is reachable */
.cmp-monsters-panel.is-stacked .mp-player-cards .cmp-player-profile-card:last-child:not(.is-active) { margin-bottom:22px; }
/* Stronger pivot for the last card to lift further into view and shift left to show full stats */
.cmp-monsters-panel.is-stacked .mp-player-cards .cmp-player-profile-card:last-child:not(.is-active):hover {
  transform:perspective(1000px) rotateX(-12deg) rotateY(0deg) rotateZ(0deg) translateY(-40px) translateX(-30px) scale(1.06);
  margin-bottom:40px;
  z-index:3060;
}
/* Empty state button style (matches power cards hint tone but ensures light gray color) */
.cmp-monsters-panel .mp-no-players { background:transparent; border:0; padding:10px 6px 14px; text-align:center; width:100%; cursor:pointer; font-family:'Bangers',cursive; letter-spacing:1px; font-size:14px; color:#bbb; opacity:.88; text-shadow:none; }
.cmp-monsters-panel .mp-no-players:hover { filter:brightness(1.15); }
.cmp-monsters-panel .mp-no-players:focus { outline:2px solid #bbb; outline-offset:2px; }
/* Accent highlight for the clickable word 'here' */
.cmp-monsters-panel .mp-no-players .mp-link-accent { color:#ffcf33; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
.cmp-monsters-panel .mp-no-players:hover .mp-link-accent { filter:brightness(1.1); }

@media (max-width:1024px) and (min-width: 1025px) {
  .cmp-monsters-panel .mp-player-cards { flex-direction:row; flex-wrap:wrap; }
  .cmp-monsters-panel .cmp-player-profile-card { flex:1 1 220px; }
}

/* OVERRIDE: ensure no artificial max-height is imposed on the monsters panel.
 * If a global panel system rule (e.g., .cmp-panel-root .panel-content { max-height:800px; }) leaks in via shared class names
 * this guarantees the monsters panel can grow naturally and manage its own scrolling as needed.
 */
/* Use higher-specificity to win over generic panel constraints without !important */
.cmp-monsters-panel.cmp-monsters-panel { max-height:none; }
.cmp-monsters-panel .mp-body.mp-body,
.cmp-monsters-panel .mp-player-cards.mp-player-cards { max-height:none; overflow:visible; }

/* Backdrop for mobile expanded card – taps close when clicking outside */
.mp-mobile-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.25); z-index:6500; opacity:0; pointer-events:none; transition:opacity .2s ease; }
.mp-mobile-backdrop.visible { opacity:1; pointer-events:auto; }

/* Hide backdrop when arena/game is active (splash is not visible) */
body:not(.splash-visible) .mp-mobile-backdrop {
  display: none !important;
}