/* Monster profiles modal & single profile scaffolding */
/* Overlay & frame */
.monster-profiles-modal { position:fixed; inset:0; display:flex; justify-content:center; align-items:flex-start; padding:3vh 0 4vh; z-index:30000; /* Maximum z-index to ensure modals are always on top of APB avatar and dice buttons */ color:#111; background:rgba(0,0,0,.86); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); transform:perspective(600px) rotateX(1deg) rotateY(-0.5deg) rotateZ(-0.5deg); transform-style:preserve-3d; }
.monster-profile-single-modal { position:fixed; inset:0; display:flex; justify-content:center; align-items:center; padding:0; z-index:30000; color:#111; background:transparent; transform:perspective(600px) rotateX(1deg) rotateY(-0.5deg) rotateZ(-0.5deg); transform-style:preserve-3d; } /* Transparent overlay for single profile */
.monster-profiles-modal.hidden, .monster-profile-single-modal.hidden { display: none; }
.mp-frame { border:4px solid #000; box-shadow:10px 10px 0 #000; padding:1.75rem 2.1rem 2.4rem; max-width:1480px; width:95%; color:#111; position:relative; font-family:'Bangers',cursive; overflow:visible; background:
  radial-gradient(circle at 4px 4px, rgba(0,0,0,0.08) 1.5px, transparent 0) 0 0/12px 12px,
  linear-gradient(135deg, #FFFEF7 0%, #FFF8DC 30%, #F5F5DC 70%, #FFFACD 100%);
}
.monster-profiles-content { position:relative; background:none; padding:1rem 1.25rem 1.4rem; }

/* Header */
.mp-header { display:flex; justify-content:space-between; align-items:center; gap:1.2rem; margin-bottom:20px; padding-bottom:10px; border-bottom:3px solid #000; }
.mp-header h2 { margin:0; font-family:'Bangers', cursive; font-size:3.1rem; letter-spacing:2px; color:#000; text-shadow:none; }
.mp-emoji { font-size:2.4rem; line-height:1; }
/* Standard close button (generic) retained, but monster profiles uses gradient variant below */
.mp-close-btn { background:#ff4d4d; border:3px solid #000; color:#000; font-weight:900; font-size:1.35rem; width:48px; height:48px; cursor:pointer; box-shadow:4px 4px 0 #000; display:flex; align-items:center; justify-content:center; font-family:'Bangers',cursive; transition:transform .2s ease, box-shadow .2s ease; border-radius:0; }
.mp-close-btn:hover { transform:translateY(-3px); }
.mp-subhead { font-family:'Bangers',cursive; font-size:1.05rem; font-weight:700; letter-spacing:1px; margin:.4rem 0 30px; text-align:center; color:#000; text-transform:uppercase; }
.mp-glyph { font-size:2.1rem; line-height:1; display:inline-block; transform:translateY(4px); }

/* Grid */
.mp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px 30px; align-items:start; position:relative; z-index:1; margin-right:-12px; padding-right:24px; }

/* Editable profile card */
.profile-card { background:#fff; border:4px solid #000; box-shadow:5px 5px 0 #000; padding:1.05rem 1.15rem 1.2rem; position:relative; display:flex; flex-direction:column; gap:.8rem; font-family:'Nunito',sans-serif; z-index:1; cursor:pointer; transform:perspective(400px) rotateX(1deg) rotateZ(-0.5deg); transition:transform .3s ease, box-shadow .3s ease; will-change:transform; }
/* Dedicated monster profile card background: bright white (no gradient) */
.mp-gradient-card { background:#ffffff; }
/* Removed per-card random tilt to prevent twist jump on hover */
.profile-card:hover { z-index:150; transform:perspective(400px) rotateX(1deg) rotateZ(-0.5deg) scale(1.02); }
.profile-card:focus-visible { z-index:50; outline:3px solid #4ad15e; outline-offset:-4px; }
.pc-head { position:relative; padding:.2rem 0 .75rem 0; border-bottom:3px solid #111; display:flex; flex-direction:row; align-items:center; gap:14px; }
.pc-head.horiz { flex-direction:row; }
.pc-avatar { width:92px; height:92px; border:4px solid #000; background:#fff; display:flex; align-items:center; justify-content:center; /* drop shadow removed per request */ box-shadow:none; border-radius:50%; overflow:hidden; flex-shrink:0; margin:0; }
.pc-avatar img { width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
.pc-meta { display:flex; flex-direction:column; gap:4px; }
.pc-name { margin:0; font-size:1.85rem; letter-spacing:1px; font-family:'Bangers',cursive; color:#000; text-shadow:none; }
.pc-desc { margin:0; font-size:.78rem; font-weight:600; line-height:1.15; color:#222; font-style:italic; min-height:22px; }

/* Traits */
.pc-traits { display:flex; flex-direction:column; gap:.85rem; margin-top:.25rem; }
.trait-block { font-size:.7rem; font-weight:700; letter-spacing:.5px; display:flex; flex-direction:column; gap:.28rem; }
.trait-header { display:flex; align-items:center; gap:.5rem; font-family:'Bangers',cursive; font-size:1rem; letter-spacing:.5px; font-weight:900; text-transform:uppercase; }
.trait-icon { font-size:1.3rem; line-height:1; filter: drop-shadow(0 1px 0 #000); }
.trait-label { flex:1; }
.trait-value { font-size:1.05rem; font-weight:900; min-width:26px; text-align:right; font-family:'Bangers',cursive; }
.trait-slider-row { position:relative; }
.trait-slider-row input[type=range] { width:100%; appearance:none; height:16px; background:linear-gradient(90deg,#ff5d35,#ffd54d 35%, #4dd7ff 70%, #43b0ff); border:3px solid #000; border-radius:0; cursor:pointer; box-shadow:none; }
/* Dedicated shadow class so styling is isolated to sliders only */
.trait-slider-row input[type=range].trait-slider-shadow { box-shadow:2px 2px 0 #000, inset 0 2px 4px rgba(0,0,0,0.1); }
.trait-slider-row input[type=range]::-webkit-slider-thumb { appearance:none; width:26px; height:26px; border:4px solid #fff; background:#000; box-shadow:0 0 0 2px #000, 2px 2px 0 #000; border-radius:50%; }
.trait-slider-row input[type=range]::-moz-range-thumb { width:26px; height:26px; border:4px solid #fff; background:#000; box-shadow:0 0 0 2px #000, 2px 2px 0 #000; border-radius:50%; }
/* Removed focus outline & extra ring per request */
.trait-slider-row input[type=range]:focus { outline:none; }
.trait-endpoints { display:flex; justify-content:space-between; font-size:.58rem; font-weight:800; margin-top:-1px; letter-spacing:.5px; font-family:'Nunito',sans-serif; text-transform:uppercase; }
.trait-min, .trait-max { text-transform:uppercase; color:#111; font-family:'Nunito',sans-serif; }

/* Single profile frame adaptations (still used) */
.mps-frame { background:#fffdf8; border:4px solid #111; box-shadow:8px 8px 0 #000; padding:1.2rem 1.4rem 1.6rem; max-width:293px; width:92%; color:#111; position:relative; }
.monster-profile-single-modal .mps-close { position:absolute; top:.75rem; right:.75rem; z-index: 1; }

/* Monster Profile Card (inside single modal) */
.monster-profile-card { 
  background: linear-gradient(135deg, #FFFEF7 0%, #FFF8DC 50%, #F5F5DC 100%);
  border: 4px solid #000;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 6px 6px 0px #000;
  max-width: 293px; /* Match original frame width */
  position: relative; /* For absolute positioned close button */
  display: flex;
  flex-direction: column;
}

/* Monster name at top of card - above everything */
.monster-profile-card > .mpc-name {
  font-family: 'Bangers', cursive;
  font-size: 2rem;
  color: #000;
  text-align: center;
  margin: -0.5rem -0.5rem 1rem -0.5rem; /* Negative margin to extend to edges */
  padding: 0.75rem 0.5rem;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  border-bottom: 4px solid #000;
  line-height: 1.1;
  letter-spacing: 1.5px;
  order: -1; /* Ensure it's first */
}

/* DESKTOP: Vertical centered layout */
.mpc-header { 
  display: flex; 
  flex-direction: column; /* Vertical layout for desktop */
  align-items: center; /* Center everything */
  gap: 0.5rem; /* Reduced gap */
  margin-bottom: 1rem; /* Reduced margin */
  border-bottom: 3px solid #000;
  padding-bottom: 0.75rem; /* Reduced padding */
}
.mpc-text {
  display: flex;
  flex-direction: column; /* Name and desc stacked vertically */
  align-items: center;
  gap: 0.25rem;
}
.mpc-avatar { 
  width: 80px; /* Reduced from 100px */
  height: 80px;
  border-radius: 50%;
  border: 4px solid #000;
  overflow: hidden;
  flex-shrink: 0;
  background: #fff; /* White background */
}
.mpc-avatar img { 
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.mpc-desc { 
  font-size: 0.7rem; /* Reduced from 0.8rem */
  color: #555;
  font-style: italic;
  text-align: center;
  margin: 0;
  line-height: 1.3;
}

/* DESKTOP: Single column for stats (vertical list) */
.mpc-stats { 
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* Reduced from 1rem */
}
.mpc-stat-row { 
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Reduced from 0.75rem */
}
.mpc-stat-label { 
  font-family: 'Bangers', cursive;
  font-size: 0.65rem; /* Reduced from 0.75rem */
  min-width: 110px; /* Reduced from 140px */
  flex-shrink: 0;
}
.mpc-bar { 
  flex: 1;
  height: 18px; /* Reduced from 24px */
  background: #e0e0e0;
  border: 3px solid #000;
  position: relative;
}
.mpc-bar-fill { 
  height: 100%;
  background: linear-gradient(90deg, #ff5d35, #ffd54d 35%, #4dd7ff 70%, #43b0ff);
  transition: width 0.3s ease;
}
.mpc-value { 
  font-family: 'Bangers', cursive;
  font-size: 0.8rem; /* Reduced from 0.9rem */
  min-width: 25px; /* Reduced from 30px */
  text-align: center;
}

/* Traits editor */
.mps-traits { 
  margin-top: 0.75rem; /* Reduced from 1rem */
}
.mps-section-title { 
  font-family: 'Bangers', cursive;
  font-size: 0.85rem; /* Reduced from 1rem */
  margin-bottom: 0.75rem; /* Reduced from 1rem */
  text-align: center;
  border-bottom: 3px solid #000;
  padding-bottom: 0.4rem; /* Reduced from 0.5rem */
  color: #000; /* Black text */
  letter-spacing: 1px;
}
.mps-trait-list { 
  display: flex;
  flex-direction: column;
  gap: 1rem; /* Reduced from 1.5rem */
}
.mps-trait-row { 
  display: flex;
  flex-direction: column;
  gap: 0.4rem; /* Reduced from 0.5rem */
  font-family: 'Bangers', cursive;
  font-size: 0.75rem; /* Reduced from 0.85rem */
}
.mps-slider-wrap { 
  display: flex;
  align-items: center;
  gap: 0.6rem; /* Reduced from 0.75rem */
}
.mps-slider-wrap input[type="range"] { 
  flex: 1;
  height: 16px; /* Reduced from 20px */
  background: linear-gradient(90deg, #ff5d35, #ffd54d 35%, #4dd7ff 70%, #43b0ff);
  border: 3px solid #000;
  appearance: none;
  cursor: pointer;
}
.mps-slider-wrap input[type="range"]::-webkit-slider-thumb { 
  appearance: none;
  width: 20px; /* Reduced from 24px */
  height: 20px;
  border: 3px solid #fff;
  background: #000;
  box-shadow: 0 0 0 2px #000;
  border-radius: 50%;
  cursor: pointer;
}
.mps-slider-wrap input[type="range"]::-moz-range-thumb { 
  width: 20px; /* Reduced from 24px */
  height: 20px;
  border: 3px solid #fff;
  background: #000;
  box-shadow: 0 0 0 2px #000;
  border-radius: 50%;
  cursor: pointer;
}
.mps-value { 
  font-family: 'Bangers', cursive;
  font-size: 0.85rem; /* Reduced from 1rem */
  min-width: 25px; /* Reduced from 30px */
  text-align: center;
}
.mps-actions { 
  display: flex;
  justify-content: center;
  gap: 0.75rem; /* Reduced from 1rem */
  margin-top: 1.5rem; /* Reduced from 2rem */
}
.mps-actions .pill-btn { 
  font-family: 'Bangers', cursive;
  font-size: 0.8rem; /* Reduced from 0.9rem */
  padding: 0.6rem 1.5rem; /* Reduced from 0.75rem 2rem */
  border: 3px solid #000;
  box-shadow: 5px 5px 0 #000;
  cursor: pointer;
  background: linear-gradient(#fafafa, #e3e3e3);
  transition: transform 0.15s ease;
}
.mps-actions .pill-btn.save { 
  background: linear-gradient(135deg, #4ad15e, #3ab84d);
}
.mps-actions .pill-btn.cancel { 
  background: linear-gradient(135deg, #ffd24a, #ffc033);
}
.mps-actions .pill-btn:active { 
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 #000;
}

/* Read-only trait display */
.mps-trait-readonly {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 2px solid rgba(0,0,0,0.1);
}
.mps-trait-label {
  font-family: 'Bangers', cursive;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}
.mps-trait-value {
  font-family: monospace;
  font-size: 0.9rem;
  font-weight: bold;
  color: #ff5d35;
  letter-spacing: 1px;
}



@media (max-width:1024px){
	.mp-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:1180px){
	.mp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:1040px){
	.pc-name { font-size:1.7rem; }
	.profile-card { padding:1rem 1rem 1.25rem; }
	.mp-header h2 { font-size:2.6rem; }
}
@media (max-width:1024px){
  .mp-header h2 { font-size:2.2rem; }
  .mp-frame { padding:1.25rem 1.1rem 1.6rem; }
  .mp-grid { gap:22px 20px; grid-template-columns: 1fr; }
  .pc-avatar { position:static; margin:0 0 .5rem; top:auto; left:auto; }
  .pc-name, .pc-desc { margin-left:0; }
  .pc-head { padding-top:0; }
}

/* Scroll + actions bar */
.mp-scroll { max-height:60vh; overflow-y:auto; overflow-x:visible; padding:8px 26px 0 8px; }
.profile-card { transform-origin:center top; }
.mp-actions { display:flex; justify-content:center; gap:20px; margin-top:18px; }
/* Unified button styles for monster profiles actions */
.mp-actions .mp-btn { font-family:'Bangers',cursive; font-size:1rem; letter-spacing:1px; padding:10px 26px; border:3px solid #000; box-shadow:5px 5px 0 #000; cursor:pointer; background:#fff; font-weight:900; transition:transform .15s ease, box-shadow .15s ease; }
.mp-actions .mp-btn:active { transform:translate(2px,2px); box-shadow:3px 3px 0 #000; }
.mp-actions .mp-btn-primary { background:#4ad15e; }
.mp-actions .mp-btn-secondary { background:#ffd24a; }
.mp-actions.dirty .mp-btn-primary { animation:pulseDirty .9s ease-in-out infinite; }
@keyframes pulseDirty { 0%{ filter:brightness(1);} 50%{ filter:brightness(1.25);} 100%{ filter:brightness(1);} }

/* Gradient variant for monster profiles close button */
.mp-close-btn--gradient { background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%); border:2px solid #000; color:#fff; font-size:24px; font-weight:bold; padding:8px 12px; min-width:40px; box-shadow:2px 2px 0 #000; transform:perspective(200px) rotateX(2deg); line-height:1; }
.mp-close-btn--gradient:hover { background:linear-gradient(135deg,#c0392b 0%, #a93226 100%); transform:perspective(200px) rotateX(1deg) translateY(-1px); box-shadow:3px 3px 0 #000; }

/* Mobile-first adaptations for profiles modal */
@media (max-width: 720px) {
  .monster-profiles-modal { align-items: stretch; padding: 0; }
  .mp-frame { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 12px 10px 10px; box-shadow: 8px 8px 0 #000; }
  .mp-header { position: sticky; top: 0; z-index: 5; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.75) 60%, rgba(255,255,255,0)); margin-bottom: 8px; padding-bottom: 8px; }
  .mp-header h2 { font-size: 1.9rem; }
  .mp-subhead { margin: 0 0 8px; font-size: .95rem; }
  .mp-scroll { max-height: unset; height: auto; overflow: visible; padding: 0 8px; }
  .mp-grid { grid-template-columns: 1fr; gap: 14px; padding-right: 0; margin-right: 0; }
  .profile-card { padding: .85rem .9rem 1rem; }
  .pc-avatar { width: 78px; height: 78px; }
  .pc-name { font-size: 1.5rem; }
  .trait-header { font-size: .95rem; }
  .trait-endpoints { font-size: .6rem; }
  .mp-actions { position: sticky; bottom: 0; z-index: 5; background: linear-gradient(0deg, rgba(255,255,255,.98), rgba(255,255,255,.6) 60%, rgba(255,255,255,0)); padding: 10px 6px 8px; gap: 10px; }
}
@media (max-width: 480px) {
  .mp-header h2 { font-size: 1.6rem; }
}

/* Single Profile Modal Mobile Adaptations */
@media (max-width: 1024px) {
  .monster-profile-single-modal { 
    align-items: flex-start; 
    padding: 0; 
    overflow-y: auto;
    transform: none; /* No tilt on mobile */
  }
  .monster-profile-single-modal .mps-close { 
    position: fixed; /* Fixed to viewport */
    top: 1vh; 
    right: 2vw; 
    font-size: 4vh;
    width: 7vh;
    height: 7vh;
    min-width: 35px;
    min-height: 35px;
    z-index: 2;
  }
  .monster-profile-card {
    width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    margin: 0;
    padding: 2vw; /* Reduced from 3vw */
    box-shadow: none;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: none;
  }
  
  /* Monster name scales down on mobile */
  .monster-profile-card > .mpc-name {
    font-size: 5vw;
    margin: -2vw -2vw 3vw -2vw;
    padding: 2vw 1vw;
    letter-spacing: 1px;
  }
  
  /* MOBILE: Switch to horizontal layout */
  .mpc-header {
    flex-direction: row; /* Horizontal: avatar left, name+desc right */
    align-items: center;
    gap: 2vw; /* Reduced from 3vw */
    margin-bottom: 0.5rem; /* Reduced */
    padding-bottom: 0.5rem; /* Reduced */
    border-bottom: 2px solid #000; /* Reduced from 3px */
  }
  .mpc-text {
    flex: 1; /* Take remaining space */
    align-items: flex-start; /* Left-align text content */
    gap: 0.1rem; /* Reduced */
  }
  .mpc-avatar {
    width: 18vw; /* Reduced from 20vw */
    height: 18vw;
    max-width: 80px; /* Reduced from 100px */
    max-height: 80px;
    flex-shrink: 0;
    border: 3px solid #000; /* Reduced from 4px */
  }
  .mpc-desc {
    font-size: 2.4vw; /* Reduced from 2.7vw */
    text-align: left; /* Left-align for horizontal layout */
  }
  
  /* MOBILE: Switch to 2x2 grid for stats */
  .mpc-stats {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns */
    gap: 1.5vh 2vw; /* Reduced from 2.5vh 3vw */
    flex-direction: initial; /* Override flex-direction from desktop */
  }
  .mpc-stat-row {
    flex-direction: column; /* Stack label, bar, value vertically in each cell */
    align-items: stretch;
    gap: 1vh;
  }
  .mpc-stat-label {
    min-width: auto;
    font-size: 2.5vw; /* Reduced from 2.88vw */
    text-align: center;
  }
  .mpc-bar {
    width: 100%;
    height: 3.6vh; /* Reduced 10% from 4vh */
    min-height: 27px; /* Reduced 10% from 30px */
    flex: none; /* Remove flex: 1 from desktop */
  }
  .mpc-value {
    font-size: 3.2vw; /* Reduced from 3.6vw */
    text-align: center;
    min-width: auto;
  }
  .mps-section-title {
    font-size: 4vw; /* Reduced from 4.5vw */
    margin-bottom: 0.5rem; /* Reduced */
    padding-bottom: 0.3rem; /* Reduced */
  }
  .mps-trait-list {
    gap: 2vh; /* Reduced from 3vh */
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2vw; /* Reduced from 3vw */
    row-gap: 2vh; /* Reduced from 3vh */
  }
  .mps-trait-row {
    font-size: 2.8vw; /* Reduced from 3.15vw */
  }
  .mps-slider-wrap {
    gap: 1.5vw;
  }
  .mps-slider-wrap input[type="range"] {
    height: 2.5vh; /* Reduced from 3.15vh - thinner slider */
    min-height: 20px; /* Reduced from 25px */
    flex: 1;
    max-width: 100%;
  }
  .mps-slider-wrap input[type="range"]::-webkit-slider-thumb {
    width: 3.2vh; /* Reduced from 4.05vh - smaller knob */
    height: 3.2vh;
    min-width: 22px; /* Reduced from 27px */
    min-height: 22px;
  }
  .mps-slider-wrap input[type="range"]::-moz-range-thumb {
    width: 3.2vh; /* Reduced from 4.05vh - smaller knob */
    height: 3.2vh;
    min-width: 22px; /* Reduced from 27px */
    min-height: 22px;
  }
  .mps-value {
    font-size: 2.8vw; /* Reduced from 3.15vw */
    min-width: 32px; /* Reduced 10% from 35px */
  }
  .mps-actions {
    gap: 2vw; /* Reduced from 3vw */
    margin-top: 2vh; /* Reduced from 3vh */
  }
  .mps-actions .pill-btn {
    padding: 1.5vh 5vw; /* Reduced from 2vh 6vw */
    font-size: 3.2vw; /* Reduced from 3.6vw */
    min-height: 40px; /* Reduced from 43px */
  }
}

@media (max-width: 480px) {
  .mps-frame {
    padding: 1.5vh 2vw;
  }
  .mps-close {
    top: 1vh;
    right: 2vw;
  }
  .mpc-name {
    font-size: 4.8vw; /* Reduced from 5.4vw */
  }
  .mpc-stat-label {
    font-size: 2.8vw; /* Reduced from 3.15vw */
  }
  .mps-trait-row {
    font-size: 3vw; /* Reduced from 3.42vw */
  }
}