/* components.dice-tray.css
 * Extracted from legacy .dice-area + .draggable + related dice tray rules.
 * Removal Target: Remove .dice-area usage from component once verified.
 */
:root {
  --dice-tray-bg: linear-gradient(135deg,#272b30 0%, #141618 80%);
  --dice-tray-border: 4px solid #333;
  --dice-tray-inner-rim: 0 0 0 3px #222 inset, 0 0 0 6px #111 inset;
  --dice-tray-radius: 10px;
  --dice-size: 54px;
  --dice-font-size: 28px;
  --dice-gap: 10px;
  --dice-tray-padding: 18px 26px 22px;
  --dice-kept-border: #FFD700;
  --dice-kept-glow: 0 0 0 3px rgba(255,215,0,0.65), 0 0 12px rgba(255,215,0,0.55);
  --dice-focus-outline: 0 0 0 3px #fff, 0 0 0 5px #111;
  --dice-focus-outline-hc: 0 0 0 3px #fff, 0 0 0 6px #000;
  --dice-empty-border: 2px dashed #666;
  --dice-kept-pulse-scale: 1.11;
  --dice-extra-bg: linear-gradient(135deg, #ffcc99 0%, #ffb366 50%, #ff9933 100%);
  --dice-extra-halftone: rgba(0,0,0,0.08);
  --dice-new-pulse: 0,255,255;
  --dice-active-glow: rgba(255,215,0,.35);
  --dice-halftone-dot: rgba(0,0,0,0.13);
  --dice-tray-label-bg: var(--accent-monsters,#ffcf33);
  --dice-tray-label-shadow: 3px 3px 0 #000,0 0 0 2px #222 inset;
}

.cmp-dice-tray { 
  position:fixed; 
  left:50%; 
  transform:translateX(15%); /* Moved further right - positioned well right of center */
  z-index:6600;
  max-width: calc(100vw - 400px); /* Leave room for toolbar buttons on the sides */
}

/* Desktop only: align dice tray with sound icon in toolbar (right side) */
/* Note: positioningService.js sets inline styles using 'right' property, so we adjust that */
/* Only applies if user hasn't dragged the tray - drag system will override these */
@media (min-width: 761px) and (pointer: fine) {
  .cmp-dice-tray:not([style*="right"]) {
    /* Position dice tray to end a little past midway of toolbar */
    right: 45vw;
    left: auto;
    transform: none;
  }
}

/* Tray drag grip (shared base styles from util.drag-grip.css) */
.cmp-dice-tray .tray-drag-grip { position:absolute; top:-14px; left:12px; width:38px; }

/* Dice Manipulation Labels Container - Flexbox stack */
.cmp-dice-tray .dice-manipulation-labels {
  position: absolute;
  bottom: 100%; /* Position above the tray */
  margin-bottom: 8px; /* Small gap between labels and tray */
  right: 30px;
  display: flex;
  flex-direction: column-reverse; /* Stack bottom-to-top */
  gap: 6px; /* Gap between visible labels */
  pointer-events: none; /* Allow clicks to pass through container */
  z-index: 10;
}

/* Dice Manipulation Labels (individual positioning for stacking) */
.cmp-dice-tray .manipulation-label {
  position: relative; /* Changed from absolute */
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Bangers', cursive;
  font-size: 18px;
  line-height: 1.2;
  padding: 6px 14px 7px;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000;
  transform: skew(-3deg) translateY(80px); /* Start hidden below */
  letter-spacing: .75px;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.2s;
  opacity: 0; /* Start invisible */
  background-clip: padding-box;
  pointer-events: auto; /* Re-enable for labels themselves */
  z-index: 10;
}

.cmp-dice-tray .manipulation-label:hover {
  filter: brightness(1.1);
}

/* Herd Culler - Green (bottom position - longest text with (1x/turn)) */
.cmp-dice-tray .herd-culler-label {
  background: #27ae60;
  color: #fff;
  order: 1; /* Bottom of stack */
}

/* Plot Twist - Blue (middle position) */
.cmp-dice-tray .plot-twist-label {
  background: #3498db;
  color: #fff;
  order: 2; /* Middle of stack */
}

/* Background Dweller - Red (top position - shortest text) */
.cmp-dice-tray .background-dweller-label {
  background: darkred;
  color: #fff;
  order: 3; /* Top of stack */
}

.cmp-dice-tray .manipulation-label .label-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.cmp-dice-tray .manipulation-label .label-text {
  flex: 1;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    -2px 0 0 #000,
    2px 0 0 #000,
    0 -2px 0 #000,
    0 2px 0 #000;
}

.cmp-dice-tray .manipulation-label .label-usage,
.cmp-dice-tray .manipulation-label .label-cost {
  font-size: 13px;
  font-weight: bold;
  margin-left: 4px;
}

.cmp-dice-tray .manipulation-label .label-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border-radius: 50%;
  background: white !important;
  color: black !important;
  border: 2px solid #000 !important;
  font-size: 10px;
  font-weight: bold;
  font-family: serif;
  font-style: italic;
  padding: 0;
  line-height: 1;
  vertical-align: middle;
  text-shadow: none !important;
  box-shadow: none !important;
  pointer-events: none; /* Visual indicator only, clicks go to parent label */
}

/* Slide-up animation when appearing at start of turn */
.cmp-dice-tray .manipulation-label.slide-up {
  animation: manipulationLabelSlideUp 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Staggered animation delays for each label (bottom to top) */
/* Each label waits for the previous one to complete (1.2s animation duration) */
.cmp-dice-tray .herd-culler-label.slide-up {
  animation: manipulationLabelSlideUp 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0s; /* First (bottom) - starts immediately */
}

.cmp-dice-tray .plot-twist-label.slide-up {
  animation: manipulationLabelSlideUp 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 1.2s; /* Second (middle) - starts after first completes */
}

.cmp-dice-tray .background-dweller-label.slide-up {
  animation: manipulationLabelSlideUp 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 2.4s; /* Third (top) - starts after second completes */
}

/* Slide-down animation when disappearing */
.cmp-dice-tray .manipulation-label.slide-down {
  animation: manipulationLabelSlideDown 0.8s ease-in forwards;
}

/* Staggered animation delays for slide-down (reverse order - top to bottom) */
/* Each label starts partway through the previous animation (0.3s apart for faster exit) */
.cmp-dice-tray .background-dweller-label.slide-down {
  animation-delay: 0s; /* First to disappear (top) - starts immediately */
}

.cmp-dice-tray .plot-twist-label.slide-down {
  animation-delay: 0.3s; /* Second - starts 0.3s after first begins */
}

.cmp-dice-tray .herd-culler-label.slide-down {
  animation-delay: 0.6s; /* Last (bottom) - starts 0.6s after first begins */
}

@keyframes manipulationLabelSlideUp {
  from {
    transform: skew(-3deg) translateY(80px);
    opacity: 0;
  }
  to {
    transform: skew(-3deg) translateY(0);
    opacity: 1;
  }
}

@keyframes manipulationLabelSlideDown {
  from {
    transform: skew(-3deg) translateY(0);
    opacity: 1;
  }
  to {
    transform: skew(-3deg) translateY(80px);
    opacity: 0;
  }
}

/* Legacy Background Dweller indicator styles (for backwards compatibility) */
.cmp-dice-tray .background-dweller-indicator {
  position: absolute;
  top: -32px;
  right: 30px;
  background: darkred; /* Dark red background */
  color: #fff; /* White text */
  font-family: 'Bangers', cursive;
  font-size: 18px;
  line-height: 1.2;
  padding: 6px 14px 7px;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000;
  transform: skew(-3deg) translateY(80px); /* Start hidden below */
  letter-spacing: .75px;
  white-space: nowrap;
  z-index: 10;
  background-clip: padding-box;
  opacity: 0; /* Start invisible */
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: filter 0.2s;
}

.cmp-dice-tray .background-dweller-indicator:hover {
  filter: brightness(1.1);
}

.cmp-dice-tray .background-dweller-indicator .bg-dweller-text {
  display: inline-flex;
  align-items: center;
  /* Black outline on text */
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    -2px 0 0 #000,
    2px 0 0 #000,
    0 -2px 0 #000,
    0 2px 0 #000;
}

.cmp-dice-tray .background-dweller-indicator .bg-dweller-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border-radius: 50%;
  background: white !important;
  color: black !important;
  border: 2px solid #000 !important;
  font-size: 10px;
  font-weight: bold;
  font-family: serif;
  font-style: italic;
  padding: 0;
  line-height: 1;
  vertical-align: middle;
  text-shadow: none !important;
  box-shadow: none !important;
  pointer-events: none; /* Visual indicator only, clicks go to parent label */
}

.cmp-dice-tray .background-dweller-indicator .bg-dweller-info-icon:active {
  transform: scale(0.9);
  background: white !important;
  border: 2px solid black !important;
}

/* Slide-up animation when appearing at start of turn */
.cmp-dice-tray .background-dweller-indicator.slide-up {
  animation: backgroundDwellerSlideUp 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Slide-down animation when disappearing */
.cmp-dice-tray .background-dweller-indicator.slide-down {
  animation: backgroundDwellerSlideDown 0.8s ease-in forwards;
}

@keyframes backgroundDwellerSlideUp {
  from {
    transform: skew(-3deg) translateY(80px);
    opacity: 0;
  }
  to {
    transform: skew(-3deg) translateY(0);
    opacity: 1;
  }
}

@keyframes backgroundDwellerSlideDown {
  from {
    transform: skew(-3deg) translateY(0);
    opacity: 1;
  }
  to {
    transform: skew(-3deg) translateY(80px);
    opacity: 0;
  }
}

/* Background Dweller Tooltip */
.bg-dweller-tooltip {
  position: fixed;
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
  border: 3px solid #000;
  border-radius: 8px;
  box-shadow: 
    0 0 0 2px darkred,
    4px 4px 0 #000,
    6px 6px 20px rgba(0, 0, 0, 0.6);
  padding: 16px;
  max-width: 320px;
  animation: tooltipFadeIn 0.2s ease-out;
}

.bg-dweller-tooltip-content {
  color: #fff;
  font-family: 'Nunito', sans-serif;
}

.bg-dweller-tooltip-content h3 {
  margin: 0 0 12px 0;
  font-family: 'Bangers', cursive;
  font-size: 22px;
  letter-spacing: 1px;
  color: #ffd400;
  text-shadow: 2px 2px 0 #000;
}

.bg-dweller-tooltip-content p {
  margin: 0 0 10px 0;
  font-size: 14px;
  line-height: 1.5;
}

.bg-dweller-tooltip-content strong {
  color: darkred;
  text-shadow: 1px 1px 0 #000;
}

.bg-dweller-tooltip-content ul {
  margin: 8px 0 12px 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.6;
}

.bg-dweller-tooltip-content li {
  margin-bottom: 6px;
}

.bg-dweller-tooltip-close {
  width: 100%;
  padding: 8px 16px;
  background: darkred;
  color: #fff;
  border: 2px solid #000;
  border-radius: 4px;
  font-family: 'Bangers', cursive;
  font-size: 16px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.1s, background 0.2s;
  box-shadow: 2px 2px 0 #000;
}

.bg-dweller-tooltip-close:hover {
  background: #c41e3a;
  transform: translateY(-2px);
  box-shadow: 2px 4px 0 #000;
}

.bg-dweller-tooltip-close:active {
  transform: translateY(0);
  box-shadow: 1px 1px 0 #000;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cmp-dice-tray .tray-outer {
  position: relative;
  background:
    radial-gradient(circle at 3px 3px, rgba(0,0,0,0.10) 1px, transparent 0) 0 0/15px 15px,
    #f8f9fa;
  border: 4px solid #000;
  border-radius: 0;
  padding: 15px 20px; /* legacy outer spacing */
  box-shadow: 6px 6px 0px #000, 8px 8px 20px rgba(0,0,0,0.4);
  transform: perspective(400px) rotateX(2deg) rotateZ(-0.5deg);
  display: inline-flex;
  align-items: center;
  gap: 15px;
  width: fit-content;
}
.cmp-dice-tray .tray-frame {
  position: relative;
  background:
    radial-gradient(circle at 3px 3px, rgba(0,0,0,0.12) 1px, transparent 0) 0 0/15px 15px,
    linear-gradient(135deg, #2a2a2a 0%, #404040 50%, #2a2a2a 100%);
  /* Added vertical padding retained */
  padding: 12px 0; /* was 0 */
  border: 4px solid #000;
  border-radius: 0;
  box-shadow: 6px 6px 0px #000, 10px 10px 25px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transform: perspective(600px) rotateX(-1deg) rotateZ(0.5deg);
}
/* Removed left white arrow handle per mobile simplification */
.cmp-dice-tray .tray-collapse-handle.tray-collapse-handle { display:none; }
/* Subtle internal sheen */
.cmp-dice-tray .tray-frame:before { content:""; position:absolute; inset:3px; border-radius:2px; background:radial-gradient(circle at 30% 25%, rgba(255,255,255,0.08), rgba(255,255,255,0) 60%); pointer-events:none; }
.cmp-dice-tray .tray-label { position:absolute; top:-22px; left:18px; background:var(--dice-tray-label-bg); color:#111; font-family:'Bangers',cursive; letter-spacing:1px; padding:4px 16px 6px; font-size:20px; line-height:1; border:3px solid #333; box-shadow:0 0 0 2px #222 inset; transform:skew(-6deg); }
.cmp-dice-tray[data-draggable="true"] { cursor: move; }

.cmp-dice-tray [data-dice] { display:flex; gap:8px; position:relative; flex-wrap:nowrap; align-items:center; justify-content:flex-start; padding-left:15px; padding-right:15px; }
.cmp-dice-tray [data-dice]:before { content:""; position:absolute; inset:-10px -14px -10px -14px; background:linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0)); pointer-events:none; border-radius:2px; }
/* Legacy enhanced die aesthetic (restored) */
.cmp-dice-tray .die { width:var(--dice-size); height:var(--dice-size); display:flex; align-items:center; justify-content:center; font-size:var(--dice-font-size); font-family:'Nunito', sans-serif; font-weight:900; background:
  radial-gradient(circle at 24% 26%, var(--dice-halftone-dot) 0 10%, transparent 11%) 0 0/12px 12px,
  linear-gradient(135deg, #ffffff 0%, #f8f8f8 50%, #eeeeee 100%);
  color:#000; border:4px solid #000; border-radius:0; cursor:pointer; transition:transform .28s cubic-bezier(.68,-.55,.265,1.55), box-shadow .28s, filter .28s; position:relative;
  box-shadow: 4px 4px 0px #000, 6px 6px 15px rgba(0, 0, 0, 0.4);
  --die-base-transform: perspective(400px) rotateX(5deg) rotateY(-2deg) rotateZ(0deg);
  transform: var(--die-base-transform);
  background-size: 8px 8px, 100% 100%;
}
.cmp-dice-tray .die:before { content:""; position:absolute; top:3px; left:3px; right:3px; bottom:3px; border-radius:8px; background:radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.7) 0%, transparent 60%); pointer-events:none; z-index:1; }
/* Subtle glassy rim behind (mirrors legacy ::after) */
.cmp-dice-tray .die:after { content:""; position:absolute; top:-3px; left:-3px; right:-3px; bottom:-3px; border-radius:15px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%, rgba(0, 0, 0, 0.1) 100%); z-index:-1; opacity:0; transition: opacity .3s ease; }

/* Background Dweller: Glow effect on ALL 3s (infinite rerolls!) - but NOT kept dice */
/* Works for both desktop (.die) and mobile (.mini-die) */
.cmp-dice-tray.has-background-dweller .die[data-face="3"]:not(.is-kept),
.cmp-dice-tray.has-background-dweller .mini-die[data-face="3"]:not(.selected) {
  box-shadow: 
    4px 4px 0px #000, 
    6px 6px 15px rgba(0, 0, 0, 0.4),
    0 0 15px darkred,
    0 0 30px darkred,
    inset 0 0 10px rgba(139, 0, 0, 0.3);
  animation: backgroundDwellerPulse 2s ease-in-out infinite, backgroundDwellerBob 1.5s ease-in-out infinite;
}

@keyframes backgroundDwellerPulse {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.2);
  }
}

@keyframes backgroundDwellerBob {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* Background Dweller: Charging animation during long-press (progress bar fills left to right) */
.cmp-dice-tray .die.background-dweller-charging {
  animation: backgroundDwellerCharge 0.8s linear forwards !important;
  position: relative;
  overflow: visible;
}

/* Override the default ::before shine when charging */
.cmp-dice-tray .die.background-dweller-charging::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: auto;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 68, 68, 0.7) 0%, rgba(204, 0, 0, 0.7) 100%);
  border-radius: 0;
  z-index: 0;
  animation: progressBarFill 0.8s linear forwards;
  pointer-events: none;
}

.cmp-dice-tray .die.background-dweller-charging {
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

@keyframes progressBarFill {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes backgroundDwellerCharge {
  0% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(0.95);
  }
}

.cmp-dice-tray .die:hover:after { opacity:1; }
.cmp-dice-tray .die:hover { transform: perspective(300px) rotateX(15deg) rotateY(-15deg) translateY(-3px) scale(1.05); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4), inset 0 4px 0 rgba(255, 255, 255, 0.9), inset 0 -4px 0 rgba(0, 0, 0, 0.25), inset 4px 0 0 rgba(255, 255, 255, 0.5), inset -4px 0 0 rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.15); border-color:#343a40; }
.cmp-dice-tray .die:active { transform: perspective(300px) rotateX(8deg) rotateY(-8deg) translateY(0) scale(1.01); }
.cmp-dice-tray .die.is-kept { 
  transform: perspective(300px) rotateX(10deg) rotateY(-20deg) translateY(-15px) scale(1.05);
}
/* Remove shine/glow/extra animation for kept dice */
.cmp-dice-tray .die.is-kept:not(.empty-compartment) { box-shadow: 4px 4px 0px #000; }
.cmp-dice-tray .die.is-kept:not(.empty-compartment):after { opacity:0; }
.cmp-dice-tray .die.extra-die:not(.empty-compartment) { 
  background:
    radial-gradient(circle at 24% 26%, var(--dice-extra-halftone) 0 10%, transparent 11%) 0 0/12px 12px,
    var(--dice-extra-bg);
  background-size: 8px 8px, 100% 100%;
  color:#000;
}
.cmp-dice-tray .die.pending.extra-die:not(.empty-compartment) { 
  background:
    radial-gradient(circle at 24% 26%, var(--dice-extra-halftone) 0 10%, transparent 11%) 0 0/12px 12px,
    var(--dice-extra-bg);
  background-size: 8px 8px, 100% 100%;
  border:4px solid #000;
  box-shadow: 4px 4px 0px #000;
  color:#000;
}
.cmp-dice-tray .die.empty-compartment { 
  /* Exact legacy styling from dice.css .die.disabled */
  opacity: 0.3;
  background: transparent !important;
  border: var(--dice-empty-border) !important;
  color: transparent !important;
  cursor: default;
  pointer-events: none;
  box-shadow: none !important;
  transform: perspective(400px) rotateX(5deg) rotateY(-2deg) rotateZ(0deg); /* maintain consistent 3D position */
}
/* Legacy hides pseudo-elements implicitly through transparency, but we'll be explicit */
.cmp-dice-tray .die.empty-compartment:before,
.cmp-dice-tray .die.empty-compartment:after { display:none; }

/* Modified Die Animations - Stretchy & Psychic Probe */
.cmp-dice-tray .die.modified-die {
  animation: dieModifiedPulse 2s ease-in-out;
}

.cmp-dice-tray .die.modified-by-stretchy {
  animation: dieModifiedByStretchy 2s ease-in-out;
}

.cmp-dice-tray .die.modified-by-psychic-probe {
  animation: dieModifiedByPsychicProbe 2s ease-in-out;
}

.cmp-dice-tray .die.modified-by-herd-culler {
  animation: dieModifiedByHerdCuller 2s ease-in-out;
}

.cmp-dice-tray .die.modified-by-plot-twist {
  animation: dieModifiedByPlotTwist 2s ease-in-out;
}

.cmp-dice-tray .die.modified-by-background-dweller {
  animation: dieModifiedByBackgroundDweller 2s ease-in-out;
}

/* Generic modified pulse - no transform for manipulation cards */
@keyframes dieModifiedPulse {
  0%, 100% { 
    box-shadow: 4px 4px 0px #000, 6px 6px 15px rgba(0, 0, 0, 0.4);
  }
  25%, 75% { 
    box-shadow: 4px 4px 0px #000, 0 0 20px rgba(0, 184, 148, 0.8), 0 0 40px rgba(0, 184, 148, 0.5);
  }
  50% {
    box-shadow: 4px 4px 0px #000, 0 0 30px rgba(0, 184, 148, 1), 0 0 60px rgba(0, 184, 148, 0.7);
  }
}

@keyframes dieModifiedByStretchy {
  0%, 100% { 
    box-shadow: 4px 4px 0px #000, 6px 6px 15px rgba(0, 0, 0, 0.4);
  }
  25%, 75% { 
    box-shadow: 4px 4px 0px #000, 0 0 20px rgba(0, 184, 148, 0.8), 0 0 40px rgba(0, 184, 148, 0.5);
    transform: perspective(400px) rotateX(5deg) rotateY(-2deg) scale(1.1);
  }
  50% {
    box-shadow: 4px 4px 0px #000, 0 0 30px rgba(0, 184, 148, 1), 0 0 60px rgba(0, 184, 148, 0.7);
    transform: perspective(400px) rotateX(5deg) rotateY(-2deg) scale(1.15);
  }
}

@keyframes dieModifiedByPsychicProbe {
  0%, 100% { 
    box-shadow: 4px 4px 0px #000, 6px 6px 15px rgba(0, 0, 0, 0.4);
  }
  25%, 75% { 
    box-shadow: 4px 4px 0px #000, 0 0 20px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 215, 0, 0.6);
    transform: perspective(400px) rotateX(5deg) rotateY(-2deg) scale(1.1);
  }
  50% {
    box-shadow: 4px 4px 0px #000, 0 0 30px rgba(255, 215, 0, 1), 0 0 60px rgba(255, 215, 0, 0.8);
    transform: perspective(400px) rotateX(5deg) rotateY(-2deg) scale(1.15);
  }
}

@keyframes dieModifiedByHerdCuller {
  0%, 100% { 
    box-shadow: 4px 4px 0px #000, 6px 6px 15px rgba(0, 0, 0, 0.4);
  }
  25%, 75% { 
    box-shadow: 4px 4px 0px #000, 0 0 20px rgba(46, 204, 113, 0.9), 0 0 40px rgba(46, 204, 113, 0.6);
  }
  50% {
    box-shadow: 4px 4px 0px #000, 0 0 30px rgba(46, 204, 113, 1), 0 0 60px rgba(46, 204, 113, 0.8);
  }
}

@keyframes dieModifiedByPlotTwist {
  0%, 100% { 
    box-shadow: 4px 4px 0px #000, 6px 6px 15px rgba(0, 0, 0, 0.4);
  }
  25%, 75% { 
    box-shadow: 4px 4px 0px #000, 0 0 20px rgba(52, 152, 219, 0.9), 0 0 40px rgba(52, 152, 219, 0.6);
  }
  50% {
    box-shadow: 4px 4px 0px #000, 0 0 30px rgba(52, 152, 219, 1), 0 0 60px rgba(52, 152, 219, 0.8);
  }
}

@keyframes dieModifiedByBackgroundDweller {
  0%, 100% { 
    box-shadow: 4px 4px 0px #000, 6px 6px 15px rgba(0, 0, 0, 0.4);
  }
  25%, 75% { 
    box-shadow: 4px 4px 0px #000, 0 0 20px rgba(231, 76, 60, 0.9), 0 0 40px rgba(231, 76, 60, 0.6);
  }
  50% {
    box-shadow: 4px 4px 0px #000, 0 0 30px rgba(231, 76, 60, 1), 0 0 60px rgba(231, 76, 60, 0.8);
  }
}

/* Ensure pending dice remain fully opaque (design request: always 100% opacity) */
.cmp-dice-tray .die.pending { opacity:1; }
.cmp-dice-tray .die.rolling { animation: koShakeSide 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); border-color:#000; background: linear-gradient(135deg, #e0e0e0 0%, #f0f0f0 50%, #d0d0d0 100%); will-change: transform; pointer-events: none; }
@keyframes koShakeSide {
  0%   { transform: var(--die-base-transform) rotateZ(0deg) translateX(0) }
  10%  { transform: var(--die-base-transform) rotateZ(-12deg) translateX(-7px) }
  20%  { transform: var(--die-base-transform) rotateZ(12deg) translateX(7px) }
  30%  { transform: var(--die-base-transform) rotateZ(-14deg) translateX(-9px) }
  40%  { transform: var(--die-base-transform) rotateZ(14deg) translateX(9px) }
  50%  { transform: var(--die-base-transform) rotateZ(-11deg) translateX(-7px) }
  60%  { transform: var(--die-base-transform) rotateZ(11deg) translateX(7px) }
  70%  { transform: var(--die-base-transform) rotateZ(-8deg) translateX(-6px) }
  80%  { transform: var(--die-base-transform) rotateZ(8deg) translateX(6px) }
  90%  { transform: var(--die-base-transform) rotateZ(-5deg) translateX(-4px) }
  100% { transform: var(--die-base-transform) rotateZ(0deg) translateX(0) }
}
.cmp-dice-tray .die.new-die { animation:newDiePulse 1.1s ease; }
@keyframes newDiePulse { 0%{box-shadow:0 0 0 rgba(var(--dice-new-pulse),0);} 50%{box-shadow:0 0 14px rgba(var(--dice-new-pulse),.8);} 100%{box-shadow:0 0 0 rgba(var(--dice-new-pulse),0);} }

/* keptPulse animation removed per request (no shiny kept highlight) */

/* Keyboard accessibility */
.cmp-dice-tray .die:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #111, 4px 4px 0 #000; }
@media (prefers-contrast: more) {
  .cmp-dice-tray .die:focus-visible { box-shadow: var(--dice-focus-outline-hc), 4px 4px 0 #000 !important; }
  .cmp-dice-tray .die.empty-compartment { opacity:.45; }
}

/* Reduced motion adjustments */
@media (prefers-reduced-motion: reduce) {
  .cmp-dice-tray .die:hover { transform: var(--die-base-transform); box-shadow:4px 4px 0 #000; }
  .cmp-dice-tray .die.is-kept { animation:none; }
  .cmp-dice-tray .die.new-die { animation:none; }
}

body.splash-visible .cmp-dice-tray { visibility:hidden; opacity:0; transition:opacity .35s ease; }
body:not(.splash-visible) .cmp-dice-tray { visibility:visible; opacity:1; }

/* Responsive downscale for narrower viewports */
@media (max-width:980px) {
  :root { --dice-size:28px; --dice-font-size:14px; --dice-gap:3px; --dice-tray-padding:6px 8px 8px; }
  .cmp-dice-tray .tray-outer { padding:8px 10px; gap:8px; }
  .cmp-dice-tray .tray-frame { padding:6px 0; }
  .cmp-dice-tray [data-dice] { padding-left:8px; padding-right:8px; gap:4px; }
  
  /* Scale down Background Dweller indicator on smaller screens */
  .cmp-dice-tray .background-dweller-indicator {
    font-size: 12px;
    padding: 4px 10px 5px;
    top: -24px;
    right: 5px;
  }
  
  /* Scale down manipulation labels on smaller screens */
  .cmp-dice-tray .manipulation-label {
    font-size: 12px;
    padding: 4px 10px 5px;
    right: 5px;
    border: 2px solid #000;
    box-shadow: 2px 2px 0 #000;
  }
  
  .cmp-dice-tray .herd-culler-label {
    top: -24px;
  }
  
  .cmp-dice-tray .plot-twist-label {
    top: -50px;
  }
  
  .cmp-dice-tray .background-dweller-label {
    top: -76px;
  }
  
  .cmp-dice-tray .manipulation-label .label-icon {
    font-size: 12px;
  }
  
  .cmp-dice-tray .manipulation-label .label-info-icon {
    width: 12px;
    height: 12px;
    font-size: 9px;
    margin-left: 4px;
  }
  
  .cmp-dice-tray .manipulation-label .label-usage,
  .cmp-dice-tray .manipulation-label .label-cost {
    font-size: 11px;
  }
  :root { --dice-size:32px; --dice-font-size:16px; --dice-gap:4px; --dice-tray-padding:8px 10px 10px; }
  .cmp-dice-tray .tray-outer { padding:10px 12px; gap:10px; }
  .cmp-dice-tray .tray-frame { padding:8px 0; }
  .cmp-dice-tray [data-dice] { padding-left:10px; padding-right:10px; gap:6px; }
  .cmp-dice-tray .die:after { display:none; }
  /* Hide the DICE label on mobile for a cleaner compact UI */
  .cmp-dice-tray .tray-label { display:none; }
  /* Position tray docked to bottom full-width; actual transform controlled via JS */
  .cmp-dice-tray { left:0; right:0; top:auto; bottom:70px; transform:translateX(0); }
  .cmp-dice-tray[data-draggable="true"] { cursor: default; }
  /* Collapsed (off-canvas to left) */
  .cmp-dice-tray[data-collapsed="left"] { transform:translateX(-100%); }
  /* Slight visual compression when collapsed */
  .cmp-dice-tray[data-collapsed="left"] .tray-frame { opacity:.85; filter:brightness(.9) contrast(.95); }
}

/* Claw icon styling */
.dice-claw-icon {
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.mini-die .dice-claw-icon {
  width: 1em;
  height: 1em;
}