/* components.mobile-overrides.css
 * Consolidated modern responsive overrides. Uses modern component (.cmp-*) + data-* selectors only.
 * Purpose: Normalize scattered legacy/mobile rules, remove dependence on deprecated structural classes,
 * and provide a single predictable cascade target loaded LAST.
 * NOTE: Avoid editing scattered responsive rules; migrate future tweaks here when possible.
 */

/* Fix #app div blocking clicks - should not have pointer events or high z-index */
#app {
  pointer-events: none !important;
  z-index: auto !important;
  position: relative !important;
}

/* Allow pointer events on actual game elements inside #app */
#app > * {
  pointer-events: auto;
}

/* When splash is visible, hide ALL game elements completely */
body.splash-visible #app,
body.splash-visible .cmp-dice-tray,
body.splash-visible .cmp-action-menu,
body.splash-visible .cmp-toolbar,
body.splash-visible .cmp-arena,
body.splash-visible .cmp-player-profile-cards,
body.splash-visible .cmp-monsters-panel,
body.splash-visible .game-layout-shell,
body.splash-visible #game-container > *:not(.cmp-splash) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
}

/* Ensure splash is always visible and on top when active */
body.splash-visible .cmp-splash {
  visibility: visible !important;
  opacity: 1 !important;
  display: flex !important;
  z-index: 10000 !important;
}

:root {
  /* Scales used for progressive compaction */
  --scale-large: 1;
  --scale-mid: .92;
  --scale-small: .85;
}

/* ===================================================
   Card Detail Modal - Mobile Viewport Fix
   =================================================== */

@media (max-width: 600px) {
  .card-detail-modal {
    padding: 2vh 0 !important;
    box-sizing: border-box !important;
  }
}

/* ===================================================
   Player Power Cards Modal - Universal (Desktop & Mobile)
   =================================================== */

.cmp-player-power-cards-modal-mobile {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  z-index: 999999 !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.6) !important;
}

/* Ensure modal is properly positioned even if inside #app */
#app .cmp-player-power-cards-modal-mobile {
  position: fixed !important;
  inset: 0 !important;
}

.cmp-player-power-cards-modal-mobile.hidden {
  display: none !important;
}

.cmp-player-power-cards-modal-mobile .ppcm-frame {
  position: relative !important;
  width: 90vw !important;
  max-width: 900px !important;
  max-height: 90vh !important;
  background: linear-gradient(180deg, #2e2540, #1d1729) !important;
  border: 2px solid #000 !important;
  border-radius: 10px !important;
  box-shadow: 3px 3px 0 #000, 0 0 0 1px #4a3b63 inset !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0.75rem !important;
  cursor: default !important;
}

/* Mobile - max viewport height */
@media (max-width: 1024px) {
  .cmp-player-power-cards-modal-mobile .ppcm-frame {
    height: 90vh !important;
    max-height: 90vh !important;
  }
  
  /* Show carousel controls on mobile */
  .cmp-player-power-cards-modal-mobile .ppcm-carousel-controls {
    display: flex !important;
  }
  
  /* Show tabs on mobile */
  .cmp-player-power-cards-modal-mobile .ppcm-tabs {
    display: flex !important;
  }
  
  /* Show tab content on mobile */
  .cmp-player-power-cards-modal-mobile .ppcm-tab-content {
    display: block !important;
  }
}

/* Desktop only - constrain height */
@media (min-width: 1025px) and (pointer: fine) {
  .cmp-player-power-cards-modal-mobile .ppcm-frame {
    height: 85vh !important;
    max-height: 800px !important;
  }
}

/* Subtle radial glow overlay */
.cmp-player-power-cards-modal-mobile .ppcm-frame:before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 70% 15%, rgba(255,255,255,0.12), transparent 60%) !important;
  pointer-events: none !important;
}

.cmp-player-power-cards-modal-mobile .ppcm-header {
  background: transparent !important;
  border: none !important;
  color: #ffefa5 !important;
  padding: 0.5rem 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  margin-bottom: 0.75rem !important;
  position: relative !important;
  cursor: move !important;
}

.cmp-player-power-cards-modal-mobile .ppcm-header h2 {
  font-family: 'Bangers', cursive !important;
  font-size: 1.4rem !important;
  margin: 0 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #ffefa5 !important;
  text-shadow: 0 2px 0 #000, 0 0 2px #000 !important;
  font-weight: 800 !important;
}

/* Close button */
.cmp-player-power-cards-modal-mobile .ppcm-frame > button[data-action="close"],
.cmp-player-power-cards-modal-mobile .ppcm-header button[data-action="close"] {
  background: transparent !important;
  color: #ffd700 !important;
  border: none !important;
  width: 32px !important;
  height: 32px !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  z-index: 100 !important;
}

.cmp-player-power-cards-modal-mobile .ppcm-frame > button[data-action="close"]:hover,
.cmp-player-power-cards-modal-mobile .ppcm-header button[data-action="close"]:hover {
  color: #fff !important;
  transform: scale(1.1) !important;
}

.cmp-player-power-cards-modal-mobile .ppcm-body {
  background: transparent !important;
  color: #e9e3f7 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Empty state */
.cmp-player-power-cards-modal-mobile .ppcm-empty {
  text-align: center !important;
  padding: 1.5rem 1rem !important;
  color: #9e92b8 !important;
  font-family: 'Bangers', cursive !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  opacity: 0.8 !important;
  height: 160px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px dashed rgba(255, 215, 0, 0.2) !important;
  border-radius: 8px !important;
  margin-bottom: 0.5rem !important;
  background: rgba(255, 239, 165, 0.05) !important;
}

/* Mobile: Hide grid, show carousel */
.cmp-player-power-cards-modal-mobile .ppcm-cards-grid {
  display: none !important;
}

/* Desktop: Show grid, hide carousel */
@media (min-width: 1025px) {
  .cmp-player-power-cards-modal-mobile .ppcm-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 16px !important;
    padding: 8px !important;
  }
  
  .cmp-player-power-cards-modal-mobile .ppcm-carousel {
    display: none !important;
  }
}

/* Strategy and Combo sections nested inside power cards (desktop only) */
.cmp-player-power-cards-modal-mobile .pc-card .ppcm-card-strategy {
  margin-top: 12px !important;
  padding: 10px 12px !important;
  background: rgba(240, 248, 255, 0.7) !important; /* Frosty misty blue-white */
  border: 1px solid rgba(176, 196, 222, 0.5) !important;
  border-radius: 6px !important;
}

.cmp-player-power-cards-modal-mobile .pc-card .ppcm-card-combos {
  margin-top: 8px !important;
  padding: 10px 12px !important;
  background: rgba(240, 248, 255, 0.7) !important; /* Frosty misty blue-white */
  border: 1px solid rgba(176, 196, 222, 0.5) !important;
  border-radius: 6px !important;
}

.cmp-player-power-cards-modal-mobile .pc-card .ppcm-card-strategy h4,
.cmp-player-power-cards-modal-mobile .pc-card .ppcm-card-combos h4 {
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 13px !important;
  margin: 0 0 6px 0 !important;
  color: #000000 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-weight: 700 !important;
}

.cmp-player-power-cards-modal-mobile .pc-card .ppcm-card-strategy p,
.cmp-player-power-cards-modal-mobile .pc-card .ppcm-card-combos p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  color: #000000 !important;
  font-family: 'Nunito Sans', sans-serif !important;
}

/* Controls for sorting and grouping */
.cmp-player-power-cards-modal-mobile .ppcm-controls {
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cmp-player-power-cards-modal-mobile .ppcm-controls-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cmp-player-power-cards-modal-mobile .ppcm-control-field {
  flex: 1;
  min-width: 150px;
}

.cmp-player-power-cards-modal-mobile .ppcm-control-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #e4e4e4;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cmp-player-power-cards-modal-mobile .ppcm-control-field select {
  width: 100%;
  padding: 8px 12px;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 6px;
  color: #e4e4e4;
  font-size: 13px;
  cursor: pointer;
}

.cmp-player-power-cards-modal-mobile .ppcm-control-field select:hover {
  border-color: #666;
}

.cmp-player-power-cards-modal-mobile .ppcm-control-field select:focus {
  outline: none;
  border-color: #9d4edd;
  box-shadow: 0 0 0 2px rgba(157, 78, 221, 0.2);
}

.cmp-player-power-cards-modal-mobile .ppcm-control-field input[type="text"] {
  width: 100%;
  padding: 8px 12px;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 6px;
  color: #e4e4e4;
  font-size: 13px;
}

.cmp-player-power-cards-modal-mobile .ppcm-control-field input[type="text"]:hover {
  border-color: #666;
}

.cmp-player-power-cards-modal-mobile .ppcm-control-field input[type="text"]:focus {
  outline: none;
  border-color: #9d4edd;
  box-shadow: 0 0 0 2px rgba(157, 78, 221, 0.2);
}

.cmp-player-power-cards-modal-mobile .ppcm-search-field {
  flex: 1.5;
  min-width: 200px;
}

/* Alphabet Navigation - Desktop: horizontal below controls */
.cmp-player-power-cards-modal-mobile .ppcm-alphabet-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

/* Desktop: horizontal wrap layout, normal flow */
@media (min-width: 1025px) {
  .cmp-player-power-cards-modal-mobile .ppcm-alphabet-nav {
    flex-direction: row;
    flex-wrap: wrap;
    order: 4; /* Before body */
  }
  
  .cmp-player-power-cards-modal-mobile .ppcm-body {
    order: 5; /* After nav */
  }
}

/* Mobile: Hide alphabet nav completely */
@media (max-width: 1024px) {
  .cmp-player-power-cards-modal-mobile .ppcm-alphabet-nav {
    display: none !important;
  }
  
  /* Hide controls and bulk toolbar in mobile */
  .cmp-player-power-cards-modal-mobile .ppcm-controls {
    display: none !important;
  }
  
  .cmp-player-power-cards-modal-mobile .ppcm-bulk-toolbar {
    display: none !important;
  }
  
  /* Give carousel and controls proper spacing */
  .cmp-player-power-cards-modal-mobile .ppcm-carousel {
    padding: 12px !important;
  }
  
  .cmp-player-power-cards-modal-mobile .ppcm-carousel-controls {
    padding: 12px !important;
    margin: 0 !important;
  }
  
  .cmp-player-power-cards-modal-mobile .ppcm-tabs {
    padding: 0 12px !important;
    margin: 0 !important;
  }
  
  .cmp-player-power-cards-modal-mobile .ppcm-tab-content {
    padding: 12px !important;
    margin: 0 !important;
  }
}

.cmp-player-power-cards-modal-mobile .ppcm-letter {
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(30, 30, 30, 0.6);
  border: 1px solid rgba(80, 80, 80, 0.4);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.2);
  font-size: 12px;
  font-weight: 600;
  cursor: not-allowed;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito Sans', sans-serif;
}

/* Mobile: smaller letters for vertical layout */
@media (max-width: 1024px) {
  .cmp-player-power-cards-modal-mobile .ppcm-letter {
    width: 26px;
    height: 24px;
    font-size: 11px;
    border-radius: 3px;
  }
}

.cmp-player-power-cards-modal-mobile .ppcm-letter.available {
  background: #ffefa5 !important;
  border: 1px solid rgba(200, 180, 100, 0.6);
  color: #000 !important;
  cursor: pointer;
}

.cmp-player-power-cards-modal-mobile .ppcm-letter.available:hover {
  background: #ffe87f !important;
  transform: scale(1.15);
}

.cmp-player-power-cards-modal-mobile .ppcm-letter.disabled {
  background: rgba(30, 30, 30, 0.6);
  border-color: rgba(80, 80, 80, 0.4);
  color: rgba(255, 255, 255, 0.2);
  cursor: not-allowed;
}

/* Bulk Sell Toolbar - Mobile */
.cmp-player-power-cards-modal-mobile .ppcm-bulk-toolbar {
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
}

.cmp-player-power-cards-modal-mobile .ppcm-bulk-select {
  flex: 1;
  min-width: 150px;
}

.cmp-player-power-cards-modal-mobile .ppcm-select-all-label {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  height: 100%;
}

.cmp-player-power-cards-modal-mobile .ppcm-select-all-text {
  font-size: 11px;
  font-weight: 600;
  color: #e4e4e4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cmp-player-power-cards-modal-mobile .ppcm-bulk-info {
  flex: 1;
  min-width: 200px;
  justify-content: center;
}

.cmp-player-power-cards-modal-mobile .ppcm-selection-info {
  align-items: center;
  gap: 12px;
  height: 100%;
  padding-top: 2px;
}

.cmp-player-power-cards-modal-mobile .ppcm-disabled-reason {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 120, 120, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-style: italic;
  padding: 8px 12px;
  background: rgba(255, 100, 100, 0.1);
  border: 1px solid rgba(255, 100, 100, 0.2);
  border-radius: 4px;
  height: 100%;
  box-sizing: border-box;
}

.cmp-player-power-cards-modal-mobile .ppcm-selected-count {
  font-size: 11px;
  font-weight: 600;
  color: #e4e4e4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cmp-player-power-cards-modal-mobile .ppcm-selected-energy {
  font-size: 11px;
}

.cmp-player-power-cards-modal-mobile .ppcm-bulk-action {
  flex-shrink: 0;
  min-width: 150px;
  display: flex;
  justify-content: flex-end;
}

.cmp-player-power-cards-modal-mobile .k-btn--bulk {
  width: 100%;
}

/* Group Headers */
.cmp-player-power-cards-modal-mobile .ppcm-group-header {
  grid-column: 1 / -1;
  font-size: 18px;
  font-weight: bold;
  color: #9d4edd;
  margin: 16px 0 8px 0;
  padding: 8px 12px;
  border-bottom: 2px solid rgba(157, 78, 221, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Bangers', cursive;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  background: rgba(157, 78, 221, 0.1);
  border-radius: 4px;
  transition: background 0.2s;
}

.cmp-player-power-cards-modal-mobile .ppcm-group-header:hover {
  background: rgba(157, 78, 221, 0.15);
}

.cmp-player-power-cards-modal-mobile .ppcm-group-header::before {
  content: '▼';
  font-size: 12px;
  transition: transform 0.2s;
}

.cmp-player-power-cards-modal-mobile .ppcm-group-header.collapsed::before {
  transform: rotate(-90deg);
}

.cmp-player-power-cards-modal-mobile .ppcm-group-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  grid-column: 1 / -1;
}

.cmp-player-power-cards-modal-mobile .ppcm-group-content.collapsed {
  display: none;
}

.cmp-player-power-cards-modal-mobile .ppcm-group-title {
  flex: 1;
}

.cmp-player-power-cards-modal-mobile .ppcm-group-count {
  font-size: 14px;
  opacity: 0.6;
  font-weight: normal;
  font-family: 'Nunito Sans', sans-serif;
}

.cmp-player-power-cards-modal-mobile .ppcm-carousel {
  display: none !important;
}

/* Carousel container (hidden on desktop, shown on mobile) */
.cmp-player-power-cards-modal-mobile .ppcm-carousel-card {
  width: 100% !important;
}

/* Controls under the card: arrows + counter */
.cmp-player-power-cards-modal-mobile .ppcm-carousel-controls {
  display: none !important; /* Hidden on desktop */
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 8px 0 6px !important;
}

/* Arrow buttons */
.cmp-player-power-cards-modal-mobile .ppcm-carousel-btn {
  background: transparent !important;
  border: 1px solid #ffd700 !important;
  color: #ffd700 !important;
  font-size: 16px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 0 !important;
}

.cmp-player-power-cards-modal-mobile .ppcm-carousel-btn:active {
  background: rgba(255, 215, 0, 0.2) !important;
}

.cmp-player-power-cards-modal-mobile .ppcm-carousel-btn:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}

/* Counter */
.cmp-player-power-cards-modal-mobile .ppcm-card-counter {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #ffd700 !important;
  min-width: 50px !important;
  text-align: center !important;
}

/* Tabs */
.cmp-player-power-cards-modal-mobile .ppcm-tabs {
  display: none !important; /* Hidden on desktop */
  gap: 8px !important;
  margin: 6px 0 8px !important;
  border-bottom: 1px solid rgba(255, 215, 0, 0.3) !important;
}

.cmp-player-power-cards-modal-mobile .ppcm-tab {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  border-bottom: 2px solid transparent !important;
}

.cmp-player-power-cards-modal-mobile .ppcm-tab:active {
  color: rgba(255, 255, 255, 0.8) !important;
}

.cmp-player-power-cards-modal-mobile .ppcm-tab-active {
  color: #ffd700 !important;
  border-bottom-color: #ffd700 !important;
}

.cmp-player-power-cards-modal-mobile .ppcm-tab-content {
  display: none !important; /* Hidden on desktop */
  margin-top: 12px !important;
}

.cmp-player-power-cards-modal-mobile .ppcm-tab-panel {
  display: none !important;
}

.cmp-player-power-cards-modal-mobile .ppcm-tab-panel-active {
  display: block !important;
}

.cmp-player-power-cards-modal-mobile .ppcm-strategy-text,
.cmp-player-power-cards-modal-mobile .ppcm-combo-text {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin: 0 !important;
}

/* Power card styling */
.cmp-player-power-cards-modal-mobile .pc-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background: linear-gradient(135deg, #2d3436 0%, #1b1f20 78%) !important;
  border: 2px solid #000 !important;
  border-radius: 12px !important;
  padding: 12px 14px 14px !important;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) !important;
  font-family: 'Comic Neue', cursive !important;
  letter-spacing: 0.25px !important;
  gap: 8px !important;
  color: #ececec !important;
  isolation: isolate !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 120px !important;
}

/* Cost positioning */
.cmp-player-power-cards-modal-mobile .pc-card-cost--header {
  display: flex !important;
  background: var(--pc-cost-bg) !important;
  color: var(--pc-card-accent) !important;
  padding: 4px 10px 6px !important;
  border-radius: 18px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  box-shadow: 2px 2px 0 #000 !important;
  font-family: 'Bangers', cursive !important;
  letter-spacing: 0.5px !important;
  min-width: 44px !important;
  text-align: center !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

.cmp-player-power-cards-modal-mobile .pc-card-cost--footer {
  display: none !important;
}

/* Card header */
.cmp-player-power-cards-modal-mobile .pc-card-header,
.cmp-player-power-cards-modal-mobile .pc-card__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-family: 'Bangers', cursive !important;
  font-size: 18px !important;
  letter-spacing: 0.75px !important;
  color: var(--pc-card-accent) !important;
  margin: -4px -4px 2px !important;
  padding: 4px 6px 6px !important;
  background: linear-gradient(135deg, #3b4245, #23272a) !important;
  border: 2px solid #000 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  gap: 8px !important;
  text-shadow: none !important;
}

/* Card name */
.cmp-player-power-cards-modal-mobile .pc-card-name {
  margin: 0 !important;
  flex: 1 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  padding-left: 4px !important;
}

/* Card description */
.cmp-player-power-cards-modal-mobile .pc-card-description,
.cmp-player-power-cards-modal-mobile .pc-card__body {
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* Scrollbar styling */
.cmp-player-power-cards-modal-mobile .ppcm-body::-webkit-scrollbar {
  width: 8px !important;
}

.cmp-player-power-cards-modal-mobile .ppcm-body::-webkit-scrollbar-track {
  background: #241b30 !important;
}

.cmp-player-power-cards-modal-mobile .ppcm-body::-webkit-scrollbar-thumb {
  background: #ffd400 !important;
  border-radius: 3px !important;
  border: 1px solid #000 !important;
}

.cmp-player-power-cards-modal-mobile .ppcm-body::-webkit-scrollbar-thumb:hover {
  background: #ffdd33 !important;
}

/* ===================================================
   Mobile Overrides (max-width: 1024px)
   =================================================== */
@media (max-width: 1024px) {
  /* Hide old desktop power cards modal class on mobile (if it exists) */
  .cmp-player-power-cards-modal:not(.cmp-player-power-cards-modal-mobile) {
    display: none !important;
  }

  /* Mobile-specific sizing */
  .cmp-player-power-cards-modal-mobile .ppcm-frame {
    width: 85vw !important;
    max-width: 400px !important;
  }

  .cmp-player-power-cards-modal-mobile .ppcm-header {
    cursor: default !important;
  }

  .cmp-player-power-cards-modal-mobile .ppcm-header h2 {
    font-size: 1.2rem !important;
  }

  /* Hide desktop grid, show carousel */
  .cmp-player-power-cards-modal-mobile .ppcm-cards-grid {
    display: none !important;
  }

  /* Hide strategy/combo sections nested in cards on mobile (use tabs instead) */
  .cmp-player-power-cards-modal-mobile .pc-card .ppcm-card-strategy,
  .cmp-player-power-cards-modal-mobile .pc-card .ppcm-card-combos {
    display: none !important;
  }

  .cmp-player-power-cards-modal-mobile .ppcm-carousel {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  
  /* Show carousel controls on mobile */
  .cmp-player-power-cards-modal-mobile .ppcm-carousel-controls {
    display: flex !important;
  }
  
  /* Show tabs on mobile */
  .cmp-player-power-cards-modal-mobile .ppcm-tabs {
    display: flex !important;
  }
  
  /* Show tab content on mobile */
  .cmp-player-power-cards-modal-mobile .ppcm-tab-content {
    display: block !important;
  }

  .cmp-player-power-cards-modal-mobile .ppcm-body::-webkit-scrollbar {
    width: 6px !important;
  }

  /* Disable dragging on mobile */
  [data-draggable="true"] {
    cursor: default !important;
  }

  .cmp-player-profile-card,
  .cmp-dice-tray,
  .cmp-monsters-panel {
    cursor: default !important;
  }
}

/* Player Power Cards Modal - centered modal on mobile */
@media (max-width: 1024px) {
}
/* === Breakpoint Map (source-of-truth) ===
 * 1200px: Tighten large layout spacing.
 * 1024px (or pointer:coarse): Mobile game interaction model (floating menus, stacked panels).
 * 980px: Begin single-column setup layouts; moderate control scaling.
 * 520px: Ultra-compact; hide secondary chrome.
 * 400px: Emergency compression for very narrow devices.
 */

/* Hide AI thought bubbles on mobile/touch devices */
@media (max-width: 1024px) {
  .thought-bubble-container,
  .thought-bubble-container * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* Hide AI Decision Tree modal and component on mobile */
  .cmp-ai-decision-modal,
  [data-ai-decision-modal],
  .ai-decision-modal,
  .cmp-ai-decision-tree {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* 1) Large screens just below desktop wide */
@media (max-width:1200px) {
  .cmp-arena [data-arena-section="tokyo"] { gap:28px; }
  .cmp-toolbar { --toolbar-btn-size:46px; }
}

/* 2) Tablet / crossover adjustments */
@media (max-width:980px) {
  /* Monster selection frame already handles internal grid via its own file; ensure arena scales */
  .cmp-arena [data-arena-section="tokyo"] { flex-wrap:wrap; }
  .cmp-arena [data-tokyo="city"],
  .cmp-arena [data-tokyo="bay"] { flex:1 1 240px; }
  .cmp-player-profile-cards { left:30px; gap:10px; }
  .cmp-dice-tray .die { font-size:calc(var(--dice-font-size) * .9); }
}

/* 3) Mobile / Touch Devices: Main responsive pivot */
@media (max-width:1024px) {
  /* Make active player bubble larger and more visible on mobile */
  #active-player-bubble,
  .active-player-bubble {
    padding: 8px 14px 8px 8px !important;
    gap: 12px !important;
    top: 12px !important;
    left: 12px !important;
  }
  
  .apb-avatar {
    width: 48px !important; /* Reduced from 56px */
    height: 48px !important; /* Reduced from 56px */
    border-width: 3px !important;
  }
  
  .apb-name,
  [data-apb-name] {
    font-size: 1rem !important; /* Reduced from 1.1rem */
    max-width: 140px !important;
  }
  
  /* Hide active player card dock in mobile - replaced by active-player-bubble */
  #active-player-card-slot,
  #active-player-card-slot[data-active-card-dock],
  .arena-active-player-dock {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* Stacking / repositioning */
  .cmp-player-profile-cards { position:fixed; top:auto; bottom:150px; left:12px; right:12px; flex-direction:row; flex-wrap:wrap; justify-content:center; width:auto; }
  .cmp-player-profile-card { width:190px; font-size:.75rem; }
  .cmp-player-profile-card .ppc-stats { gap:6px; }
  
  /* Tokyo slot cards: simplified layout for mobile */
  .cmp-arena .city-slot .cmp-player-profile-card[data-in-tokyo-slot],
  .cmp-arena .bay-slot .cmp-player-profile-card[data-in-tokyo-slot] {
    /* Just center and scale the card, use default layout */
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) scale(0.72) !important; /* Slightly larger scale for better visibility */
    transform-origin: center center !important;
    margin: 0 !important;
    overflow: hidden !important; /* Prevent children from extending out */
    box-sizing: border-box !important;
  }
  
  /* Ensure all children of Tokyo cards respect boundaries */
  .cmp-arena .city-slot .cmp-player-profile-card[data-in-tokyo-slot] *,
  .cmp-arena .bay-slot .cmp-player-profile-card[data-in-tokyo-slot] * {
    box-sizing: border-box !important;
  }
  
  /* Adjust Tokyo slot dimensions to accommodate scaled card (190px × 0.72 = 137px) */
  .cmp-arena .city-slot,
  .cmp-arena .bay-slot {
    position: relative !important; /* Required for absolute positioning of cards */
    width: 240px !important; /* Accommodate full card width at scale */
    min-width: 240px !important;
    height: 240px !important; /* Accommodate full card height at scale */
    min-height: 240px !important;
    --tokyo-slot-default-width: 240px;
    --tokyo-slot-default-height: 240px;
    padding: 1px !important; /* Minimal padding for yellow dashed border */
    border: 3px dashed rgba(255, 207, 51, 0.4) !important; /* Yellow dashed border for Tokyo slots */
    border-radius: 8px !important;
  }
  
  /* Remove duplicate transform that was overriding the positioning */
  
  /* Arena compaction */
  .cmp-arena [data-arena-section="tokyo"] { 
    position: static; 
    width: 100%; 
    min-height: 0; 
    gap: 12px; 
    padding: 1px;
    border: none !important; /* Remove any border from Tokyo section */
    background: transparent !important;
  }
  
  .cmp-arena [data-tokyo="city"],
  .cmp-arena [data-tokyo="bay"] { 
    padding: 1px;
    border: none !important; /* Remove border from city/bay containers */
    background: transparent !important;
  }
  .cmp-arena .monster-slot { height:120px; }

  /* Hide Tokyo Bay when disabled (< 5 players) and center Tokyo City */
  .cmp-arena [data-arena-section="bay"][data-disabled="true"] {
    display: none !important;
  }
  
  /* Center Tokyo City section when Bay is disabled */
  .cmp-arena [data-arena-section="bay"][data-disabled="true"] ~ [data-arena-section="city"],
  .cmp-arena [data-arena-section="city"]:only-child {
    margin: 0 auto !important;
  }
  
  /* When bay is disabled, center the tokyo section contents */
  .cmp-arena [data-arena-section="tokyo"]:has([data-arena-section="bay"][data-disabled="true"]) {
    justify-content: center !important;
  }

  /* Desktop action menu is hidden in mobile - using horizontal menu instead */
  .cmp-action-menu { display: none !important; }

  /* Mobile: Dice tray and action menu at same position, sliding from opposite sides */
  /* Dice tray: slides from LEFT or RIGHT based on user preference (controlled by JS) */
  .cmp-dice-tray { 
    position: fixed !important;
    /* left and right are set by JavaScript based on corner preference */
    bottom: 10px !important; /* Lowered to align top edge with dice button (which is at bottom: 20px, height: 50px) */
    top: auto !important; 
    /* width is calculated by JavaScript based on toggle button position */
    max-width: calc(100vw - 20px) !important;
    /* transform is controlled by JavaScript for collapse animations */
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    z-index: 6600 !important;
  }
  
  /* When expanded, slide in from left */
  .cmp-dice-tray:not([data-collapsed="left"]):not([data-collapsed="true"]):not([data-collapsed="1"]),
  .cmp-dice-tray.expanded,
  .cmp-dice-tray[data-expanded="true"] { 
    transform: translateX(100px) !important; /* Slide in from left, offset 100px to the right (increased from 60px for better mobile positioning) */
  }
  
  /* Collapsed state - slide out to left (default) */
  .cmp-dice-tray[data-collapsed="left"],
  .cmp-dice-tray[data-collapsed="true"],
  .cmp-dice-tray[data-collapsed="1"] { 
    transform: translateX(-100%) !important; 
  }
  
  /* Adjust dice container padding - extra right padding for dice button clearance */
  .cmp-dice-tray [data-dice] {
    padding-right: 80px !important; /* Extra space on right for dice button */
    padding-left: 10px !important;
  }
  
  /* Hide outer white container (.tray-outer) in mobile - show only inner dark tray */
  .cmp-dice-tray .tray-outer {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    transform: none !important;
  }
  
  /* Shrink dice size and containers for mobile - reduced further to save space */
  .cmp-dice-tray .die {
    width: 30px !important;
    height: 30px !important;
    font-size: 15px !important;
    /* Match screenshot style: flat, square, clean */
    background: #ffffff;
    border: 3px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: 2px 2px 0px #000 !important;
    transform: none !important;
  }
  
  /* Extra dice styling for mobile (orange/peach tint to distinguish from regular dice) */
  .cmp-dice-tray .mini-die.extra-die:not(.empty-compartment) {
    background:
      radial-gradient(circle at 24% 26%, rgba(255, 140, 60, 0.25) 0 10%, transparent 11%) 0 0/12px 12px,
      linear-gradient(135deg, #ffdfb8 0%, #ffe4c4 50%, #ffd4a8 100%) !important;
    background-size: 6px 6px, 100% 100% !important;
    color: #000 !important;
  }
  
  /* Pending extra dice styling for mobile */
  .cmp-dice-tray .mini-die.pending.extra-die:not(.empty-compartment) {
    background:
      radial-gradient(circle at 24% 26%, rgba(255, 140, 60, 0.25) 0 10%, transparent 11%) 0 0/12px 12px,
      linear-gradient(135deg, #ffdfb8 0%, #ffe4c4 50%, #ffd4a8 100%) !important;
    background-size: 6px 6px, 100% 100% !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;
    color: #000 !important;
  }
  
  /* Remove pseudo-elements (shine/glow effects) for cleaner mobile look */
  .cmp-dice-tray .die:before,
  .cmp-dice-tray .die:after {
    display: none !important;
  }
  
  /* Hide outer white border/frame - only show black inner frame with dice */
  .cmp-dice-tray .tray-outer {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  
  .cmp-dice-tray .tray-frame {
    padding: 4px 0 !important;
    width: fit-content !important;
    border-width: 2px !important;
    box-shadow: 3px 3px 0px #000, 5px 5px 12px rgba(0, 0, 0, 0.4) !important;
  }
  
  .cmp-dice-tray [data-dice] {
    gap: 4px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    flex-wrap: nowrap !important; /* Prevent dice from wrapping */
  }
  
  .cmp-dice-tray .tray-label { display: none; }

  /* Toolbar hide (a mobile toggle is expected elsewhere) */
  body.mobile-toolbar-hidden .cmp-toolbar { display: none !important; }
}

/* 4) Ultra-compact phones */
@media (max-width:520px) {
  .cmp-player-profile-card { width:46%; min-width:150px; }
  .cmp-player-profile-card .ppc-owned-cards-strip { display:none; }
  .cmp-dice-tray [data-dice] { gap:4px; }
  .cmp-dice-tray .die { width:calc(var(--dice-size) * .9); height:calc(var(--dice-size) * .9); }
  .cmp-toolbar { --toolbar-btn-size:38px; padding:8px 10px; }
}

/* Cursor pointer for clickable cards stat */
.cmp-player-profile-card [data-cards] {
  cursor: pointer !important;
}

/* 5) Very narrow emergency compression */
@media (max-width:400px) {
  .cmp-player-profile-card { width:100%; }
  .cmp-dice-tray .die { width:calc(var(--dice-size) * .82); height:calc(var(--dice-size) * .82); }
}

/* 6) Touch / reduced motion synergy (prefer composition over duplication) */
@media (pointer:coarse) and (prefers-reduced-motion:reduce) {
  .cmp-toolbar .toolbar-btn,
  .cmp-dice-tray .die { transition:none !important; animation:none !important; }
}

/* 7) High-contrast assist (piggyback if OS requests + narrow) */
@media (prefers-contrast: more) and (max-width:1024px) {
  .cmp-player-profile-card { box-shadow:0 0 0 3px #fff, 0 0 0 5px #000; }
}

/* 8) Data attribute based drag affordance removal (visual) */
[cdata-drag-placeholder] { display:none; }
[cdata-drag-handle] { cursor:move; }
[data-draggable="false"] { 
  cursor: default !important; 
}

/* Remove drag cursors on mobile devices (narrow screens OR touch devices) */
@media (max-width: 1024px), (hover: none) and (max-width: 1920px) {
  [data-draggable="true"],
  [data-draggable="false"],
  .draggable,
  .cmp-player-profile-card,
  .cmp-dice-tray,
  .cmp-monsters-panel,
  .player-power-cards-modal .ppcm-frame,
  .player-power-cards-modal .ppcm-header {
    cursor: default !important;
  }
  
  /* Ensure mobile buttons are visible on narrow screens or touch devices */
  #action-menu-mobile-btn,
  #dice-toggle-btn {
    display: flex !important;
    visibility: visible !important;
  }
  
  /* Ensure mini player cards are visible */
  .mini-player-card-container {
    display: flex !important;
    visibility: visible !important;
  }
}

/* 9) Safe guard: if any legacy class slips in, neutralize (defensive, to remove later) */
[class^="game-board"], [class*=" game-board"], .game-board { /* deprecated sentinel to detect accidental legacy usage */ outline:0 !important; }

/* 10) Splash Screen Mobile Enhancements */
@media (max-width: 1024px) {
  /* Make polaroids larger on mobile for better visibility - portrait 5:6.5 ratio */
  .cmp-splash .polaroid { 
    width: 14vw !important; 
    height: 18.2vw !important; 
    padding: 1.5vh 1.5vh 6vw 1.5vh !important;
  }
  
  .cmp-splash .polaroid img { 
    width: 11vw !important; 
    height: 11vw !important; 
  }
  
  .cmp-splash .polaroid-caption { 
    font-size: 1.6vw !important; 
    bottom: 2.5vw !important; 
  }
  
  /* Adjust polaroid positions for larger cards */
  .cmp-splash .polaroid-1 { top: 8% !important; left: 2vw !important; }
  .cmp-splash .polaroid-2 { top: 35% !important; left: 1vw !important; }
  .cmp-splash .polaroid-3 { top: 60% !important; left: 3vw !important; }
  .cmp-splash .polaroid-4 { top: 6% !important; right: 2vw !important; }
  .cmp-splash .polaroid-5 { top: 38% !important; right: 1vw !important; }
  .cmp-splash .polaroid-6 { top: 62% !important; right: 3vw !important; }
  
  /* Lower the logo on mobile */
  .cmp-splash .splash-logo-image { 
    margin-bottom: 4vh !important;
    margin-top: 8vh !important;
  }
  
  /* Give subtitle more width to reduce wrapping */
  .cmp-splash .splash-center-content { 
    width: 50vw !important; 
    max-width: 90% !important;
  }
  
  .cmp-splash .splash-subtitle { 
    font-size: 4.5vw !important;
    margin-bottom: 6vh !important;
    margin-top: 4vh !important;
  }
}

@media (max-width: 1024px) {
  /* Further adjustments for smaller tablets/phones - maintain portrait ratio */
  .cmp-splash .polaroid { 
    width: 16vw !important; 
    height: 20.8vw !important; 
  }
  
  .cmp-splash .polaroid img { 
    width: 13vw !important; 
    height: 13vw !important; 
  }
  
  .cmp-splash .polaroid-caption { 
    font-size: 1.8vw !important; 
  }
  
  .cmp-splash .splash-center-content { 
    width: 55vw !important;
  }
  
  .cmp-splash .splash-subtitle { 
    font-size: 5vw !important;
  }
}

@media (max-width: 600px) {
  /* Phones: larger polaroids, more centered content - portrait ratio */
  .cmp-splash .polaroid { 
    width: 18vw !important; 
    height: 23.4vw !important; 
    padding: 1.5vh 1.5vh 7vw 1.5vh !important;
  }
  
  .cmp-splash .polaroid img { 
    width: 15vw !important; 
    height: 15vw !important; 
  }
  
  .cmp-splash .polaroid-caption { 
    font-size: 2vw !important; 
    bottom: 3vw !important;
  }
  
  .cmp-splash .splash-center-content { 
    width: 60vw !important;
  }
  
  .cmp-splash .splash-subtitle { 
    font-size: 5.5vw !important;
    line-height: 1.3 !important;
  }
  
  .cmp-splash .splash-logo-image {
    margin-top: 10vh !important;
  }
}

@media (max-width: 480px) {
  /* Very small phones: maximize readability - portrait ratio */
  .cmp-splash .polaroid { 
    width: 20vw !important; 
    height: 26vw !important; 
  }
  
  .cmp-splash .polaroid img { 
    width: 17vw !important; 
    height: 17vw !important; 
  }
  
  .cmp-splash .polaroid-caption { 
    font-size: 2.2vw !important; 
  }
  
  .cmp-splash .splash-center-content { 
    width: 70vw !important;
  }
  
  .cmp-splash .splash-subtitle { 
    font-size: 6vw !important;
    letter-spacing: 0.1vmin !important;
  }
}

/* 11) Roll For First Modal Mobile Enhancements */
@media (max-width: 1024px) {
  /* Make all fonts and elements larger on mobile/tablet */
  .cmp-roll-for-first.rff-modal .rff-title { 
    font-size: 5vh !important; 
  }
  
  .cmp-roll-for-first.rff-modal .rff-broadcast { 
    font-size: 3vh !important;
    min-height: 12vh !important;
    padding: 2vh 2vh 2.5vh !important;
  }
  
  .cmp-roll-for-first.rff-modal .rff-table thead th { 
    font-size: 2vh !important;
    padding: 1.5vh 1vw !important;
  }
  
  .cmp-roll-for-first.rff-modal .rff-table tbody td { 
    font-size: 2.2vh !important;
    padding: 2vh 1vw !important;
  }
  
  .cmp-roll-for-first.rff-modal .rff-table .rff-name { 
    font-size: 2.5vh !important; 
  }
  
  .cmp-roll-for-first.rff-modal .rff-table .rff-avatar { 
    width: 6vh !important; 
    height: 6vh !important; 
  }
  
  .cmp-roll-for-first.rff-modal .rff-table .mini-die { 
    width: 5vh !important; 
    height: 5vh !important; 
    font-size: 2.5vh !important;
  }
  
  .cmp-roll-for-first.rff-modal .rff-table .mini-die.f-heart .rff-face-heart,
  .cmp-roll-for-first.rff-modal .rff-table .mini-die.f-energy .rff-face-energy,
  .cmp-roll-for-first.rff-modal .rff-table .mini-die.f-claw .rff-face-claw { 
    font-size: 2.8vh !important; 
  }
  
  .cmp-roll-for-first.rff-modal .rff-cpu-tag { 
    font-size: 1.5vh !important;
    padding: 0.5vh 0.8vw 0.6vh !important;
  }
  
  .cmp-roll-for-first.rff-modal .rff-btn { 
    font-size: 3vh !important;
    padding: 2vh 3vw 2.5vh !important;
  }
  
  .cmp-roll-for-first.rff-modal .rff-skip { 
    font-size: 2vh !important; 
  }
  
  .cmp-roll-for-first.rff-modal .rff-winner-icon { 
    font-size: 5vh !important; 
  }
  
  .cmp-roll-for-first.rff-modal .rff-winner-text { 
    font-size: 4vh !important; 
  }
  
  .cmp-roll-for-first.rff-modal .rff-winner-sub { 
    font-size: 2vh !important; 
  }
  
  .cmp-roll-for-first.rff-modal .rff-winner-msg { 
    font-size: 2.2vh !important; 
  }
}

@media (max-width: 1024px) {
  /* Tablets: increase further */
  .cmp-roll-for-first.rff-modal .rff-title { 
    font-size: 5.5vh !important; 
  }
  
  .cmp-roll-for-first.rff-modal .rff-broadcast { 
    font-size: 3.5vh !important;
  }
  
  .cmp-roll-for-first.rff-modal .rff-table .rff-name { 
    font-size: 3vh !important; 
  }
  
  .cmp-roll-for-first.rff-modal .rff-btn { 
    font-size: 3.5vh !important;
  }
}

@media (max-width: 600px) {
  /* Phones: maximum readability */
  .cmp-roll-for-first.rff-modal .rff-title { 
    font-size: 6vh !important; 
  }
  
  .cmp-roll-for-first.rff-modal .rff-broadcast { 
    font-size: 4vh !important;
    min-height: 14vh !important;
  }
  
  .cmp-roll-for-first.rff-modal .rff-table thead th { 
    font-size: 2.5vh !important;
  }
  
  .cmp-roll-for-first.rff-modal .rff-table tbody td { 
    font-size: 2.8vh !important;
  }
  
  .cmp-roll-for-first.rff-modal .rff-table .rff-name { 
    font-size: 3.5vh !important; 
  }
  
  .cmp-roll-for-first.rff-modal .rff-table .mini-die { 
    width: 6vh !important; 
    height: 6vh !important; 
    font-size: 3vh !important;
  }
  
  .cmp-roll-for-first.rff-modal .rff-btn { 
    font-size: 4vh !important;
  }
}

@media (max-width: 480px) {
  /* Very small phones */
  .cmp-roll-for-first.rff-modal .rff-broadcast { 
    font-size: 4.5vh !important;
  }
  
  .cmp-roll-for-first.rff-modal .rff-table .rff-name { 
    font-size: 4vh !important; 
  }
}

/* ============================================================================
 * MOBILE FOOTER - Remove blur effect
 * ========================================================================== */
@media (max-width: 1024px) {
  .game-layout-shell .gl-footer {
    background: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ============================================================================
 * MOBILE - Hide monsters panel, power cards panel; show mini components
 * ========================================================================== */
@media (max-width: 1024px) {
  /* Hide desktop panels */
  .cmp-monsters-panel,
  .cmp-power-cards-panel {
    display: none !important;
  }
  
  /* Exception: Show power cards panel inside card detail modal */
  .card-detail-frame .cmp-power-cards-panel {
    display: block !important;
  }
  
  /* Show mini components on mobile */
  .cmp-mini-player-cards {
    display: block !important;
  }
  
  .cmp-mini-power-cards {
    display: flex !important;
  }
  
  /* Hide APB avatar and name on mobile */
  .apb-avatar,
  [data-apb-avatar],
  .ppc-avatar,
  .active-player-bubble,
  #active-player-bubble,
  .round-indicator-container,
  .round-indicator,
  [data-round-indicator],
  #active-player-card-slot,
  .apb-name,
  .arena-active-player-dock,
  [data-active-player-dock],
  .active-player-slot,
  [data-active-player-slot] {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Exception: Show avatars in Tokyo slots */
  .cmp-arena .city-slot .cmp-player-profile-card[data-in-tokyo-slot]:not(.ppc-mobile) .ppc-avatar,
  .cmp-arena .bay-slot .cmp-player-profile-card[data-in-tokyo-slot]:not(.ppc-mobile) .ppc-avatar,
  .cmp-arena [data-arena-section] .cmp-player-profile-card[data-in-tokyo-slot]:not(.ppc-mobile) .ppc-avatar {
    display: block !important;
    visibility: visible !important;
  }
  
  /* Make Tokyo TILES (entire sections) pivoted/rotated like desktop, smaller, and moved toward center */
  [data-arena-section="city"] {
    transform: translate(110px, 42px) scale(0.5) rotate(-8deg);
    transform-origin: center center;
    overflow: visible !important; /* Allow rotated tiles to show fully */
  }
  
  [data-arena-section="bay"] {
    transform: rotate(8deg) scale(0.6) translate(15vw, 8vh);
    transform-origin: center center;
    overflow: visible !important; /* Allow rotated tiles to show fully */
  }
  
  [data-arena-section="city"],
  [data-arena-section="bay"] {
    min-height: 0 !important;
    z-index: 1 !important;
  }
  
  /* Ensure arena itself doesn't block UI and allows overflow */
  .cmp-arena {
    z-index: 1 !important;
    overflow: visible !important;
  }
  
  /* Allow Tokyo section to show overflowing rotated tiles */
  .cmp-arena [data-arena-section="tokyo"] {
    overflow: visible !important;
  }
  
  /* Lower toolbar z-index in mobile */
  .cmp-toolbar {
    z-index: 100 !important;
  }
  
  /* Increase Tokyo title sizes */
  .cmp-arena [data-arena-section="bay"] > h3,
  .cmp-arena [data-arena-section="city"] > h3 {
    font-size: 32px !important;
    line-height: 1.2 !important;
    font-weight: bold !important;
  }
  
  /* Make EMPTY text larger in slots */
  .empty-slot,
  .slot-empty {
    font-size: 1.8em !important;
    font-weight: bold;
  }
  
  /* Add padding to Tokyo tiles and their slots */
  .tokyo-bay,
  .tokyo-city {
    padding: 30px !important;
  }
  
  /* Remove rounded corners from Tokyo slots */
  .cmp-arena .city-slot,
  .cmp-arena .bay-slot {
    border-radius: 0 !important;
  }
  
  /* Add padding between dashed slot inner divs and parent containers */
  .active-player-slot,
  .player-slot {
    padding: 24px !important;
  }
  
  /* Show dice tray always in mobile, positioned at bottom-left */
  .cmp-dice-tray {
    display: flex !important;
    visibility: visible !important;
    position: fixed !important;
    bottom: 8px !important;
    left: calc(120px + 8px + 20px) !important; /* After mini player card (120px) + edge spacing (8px) + gap */
    z-index: 5350 !important;
  }
  
  /* Force ALL mini player cards to 100% opacity */
  .mini-player-card-container,
  .mini-player-card,
  .mini-player-card *,
  .mini-player-card-name,
  .mpc-card-inner,
  .mpc-profile,
  .mpc-stats-bar {
    opacity: 1 !important;
  }
  
  /* Dice toggle button is shown in mobile, positioned by JavaScript */
  /* #dice-toggle-btn styles are controlled by JavaScript */
  
  /* Show action menu button in mobile (aligned with dice tray center) */
  #action-menu-mobile-btn {
    display: flex !important;
    position: fixed !important;
    bottom: 20px !important; /* Adjusted to align with smaller button */
    right: 20px !important;
  width: 34px !important; /* Smaller than dice button */
  height: 34px !important; /* Smaller than dice button */
  font-size: 16px !important; /* Reduced icon size */
  z-index: 10700 !important; /* Above radial menu and all other UI elements */
}  /* Hide action menu button during unleash/setup screen - same logic as action menu */
  .cmp-unleash-screen:not(.hidden) ~ * #action-menu-mobile-btn,
  body:has(.cmp-unleash-screen:not(.hidden)) #action-menu-mobile-btn,
  body:has([data-setup-active="true"]) #action-menu-mobile-btn,
  #action-menu-mobile-btn.am-waiting-for-unleash {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  
  /* Dice tray visibility and transforms are controlled by JavaScript */
  /* No forced overrides - let JS handle collapse/expand states */
  
  /* Position dice tray in mobile - moved to far left with padding */
  .cmp-dice-tray#dice-tray {
    position: fixed !important;
    left: 48px !important; /* Adjusted left position */
    bottom: 8px !important;
    height: 60px !important;
    width: 300px !important;
    padding: 8px !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    max-width: 300px !important;
    min-width: 300px !important;
  }
  
  /* Make dice in mobile much smaller to fit properly */
  .cmp-dice-tray .die {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
    margin: 1px !important;
    padding: 0 !important;
    border-width: 1px !important;
    border-radius: 3px !important;
  }
  
  /* Ensure mini-die class also gets proper sizing */
  .cmp-dice-tray .mini-die {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
    margin: 1px !important;
    padding: 0 !important;
    border-width: 1px !important;
    border-radius: 3px !important;
    /* Override face class colors - keep neutral dice appearance */
    background: linear-gradient(135deg, #e0e0e0 0%, #f0f0f0 50%, #d0d0d0 100%) !important;
    border-color: #333 !important;
    color: #111 !important;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;
    cursor: pointer !important;
  }
  
  /* Extra dice styling for mobile (orange tint, same as desktop) */
  .cmp-dice-tray .mini-die.extra-die:not(.empty-compartment) {
    background:
      radial-gradient(circle at 24% 26%, rgba(255, 140, 60, 0.25) 0 10%, transparent 11%) 0 0/12px 12px,
      linear-gradient(135deg, #ffdfb8 0%, #ffe4c4 50%, #ffd4a8 100%) !important;
    background-size: 6px 6px, 100% 100% !important;
    color: #000 !important;
  }
  
  /* Pending extra dice styling for mobile */
  .cmp-dice-tray .mini-die.pending.extra-die:not(.empty-compartment) {
    background:
      radial-gradient(circle at 24% 26%, rgba(255, 140, 60, 0.25) 0 10%, transparent 11%) 0 0/12px 12px,
      linear-gradient(135deg, #ffdfb8 0%, #ffe4c4 50%, #ffd4a8 100%) !important;
    background-size: 6px 6px, 100% 100% !important;
    border: 2px solid #000 !important;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;
    color: #000 !important;
  }
  
  /* Empty compartment styling for mobile (dashed border, transparent) */
  .cmp-dice-tray .mini-die.empty-compartment {
    opacity: 0.3 !important;
    background: transparent !important;
    border: 2px dashed #666 !important;
    color: transparent !important;
    cursor: default !important;
    pointer-events: none !important;
    box-shadow: none !important;
  }
  
  /* Visual feedback for kept/selected dice on mobile */
  .cmp-dice-tray .mini-die.selected {
    border-width: 2px !important;
    border-color: #0066ff !important;
    box-shadow: 0 0 8px rgba(0, 102, 255, 0.6), 2px 2px 4px rgba(0,0,0,0.3) !important;
    transform: translateY(-2px) scale(1.1) !important;
    background: linear-gradient(135deg, #f0f8ff 0%, #e0f0ff 50%, #d0e8ff 100%) !important;
  }
  
  /* Kept extra dice should maintain orange tint even when selected */
  .cmp-dice-tray .mini-die.selected.extra-die:not(.empty-compartment) {
    background:
      radial-gradient(circle at 24% 26%, rgba(255, 140, 60, 0.25) 0 10%, transparent 11%) 0 0/12px 12px,
      linear-gradient(135deg, #ffe8d0 0%, #fff0e0 50%, #ffdcc0 100%) !important;
    background-size: 6px 6px, 100% 100% !important;
  }
  
  /* Use same rolling animation as regular dice */
  .cmp-dice-tray .mini-die.rolling {
    animation: koShakeSide 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    border-color: #000 !important;
    background: linear-gradient(135deg, #e0e0e0 0%, #f0f0f0 50%, #d0d0d0 100%) !important;
    will-change: transform !important;
    pointer-events: none !important;
    /* Override any face class colors during rolling */
    color: #111 !important;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;
  }
  
  /* Background Dweller: Charging animation for mini dice during long-press */
  .cmp-dice-tray .mini-die.background-dweller-charging {
    animation: backgroundDwellerChargeMini 0.8s linear forwards !important;
    position: relative;
    overflow: visible;
  }
  
  /* Progress bar fill for mini dice */
  .cmp-dice-tray .mini-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: progressBarFillMini 0.8s linear forwards;
    pointer-events: none;
  }
  
  .cmp-dice-tray .mini-die.background-dweller-charging {
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  }
  
  @keyframes progressBarFillMini {
    0% {
      width: 0%;
    }
    100% {
      width: 100%;
    }
  }
  
  @keyframes backgroundDwellerChargeMini {
    0% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(0.95);
    }
  }

  /* Define koShakeSide animation for mini dice (same as regular dice) */
  @keyframes koShakeSide {
    0%   { transform: translateX(0) rotateZ(0deg) }
    10%  { transform: translateX(-7px) rotateZ(-12deg) }
    20%  { transform: translateX(7px) rotateZ(12deg) }
    30%  { transform: translateX(-9px) rotateZ(-14deg) }
    40%  { transform: translateX(9px) rotateZ(14deg) }
    50%  { transform: translateX(-7px) rotateZ(-11deg) }
    60%  { transform: translateX(7px) rotateZ(11deg) }
    70%  { transform: translateX(-6px) rotateZ(-8deg) }
    80%  { transform: translateX(6px) rotateZ(8deg) }
    90%  { transform: translateX(-4px) rotateZ(-5deg) }
    100% { transform: translateX(0) rotateZ(0deg) }
  }
  
  /* Ensure dice tray content doesn't wrap */
  .cmp-dice-tray .dice-container,
  .cmp-dice-tray .dice-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  
  /* Appropriate size for 6 dice only */
  .cmp-dice-tray {
    width: 210px !important; /* Sized for 6 dice */
    max-width: 210px !important;
    min-width: 210px !important;
  }
  
  /* Additional high-specificity rule to combat JavaScript inline styles */
  div.cmp-dice-tray#dice-tray[data-component="dice-tray"] {
    left: 48px !important;
    bottom: 8px !important;
    position: fixed !important;
    transform: none !important;
    right: unset !important;
    top: unset !important;
  }
  
  /* Ensure "No Power Cards" text appears below dice tray */
  .cmp-mini-power-cards .mpc-empty-state {
    z-index: 6400 !important; /* One level below dice tray (6500) */
    position: relative;
  }
  
  /* Move mini power cards tray to bottom - positioned between dice tray and action menu */
  .cmp-mini-power-cards {
    /* Positioned after dice tray - moved further to the right */
    position: fixed !important;
    left: 360px !important; /* Adjusted positioning */
    bottom: 8px !important; 
    height: 48px !important; /* Reduced from 60px */
    min-width: 100px !important;
    max-width: calc(100vw - 360px - 120px) !important; /* Adjusted for new left position */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 0 !important; /* No rounded corners */
    padding: 2px 6px !important; /* Reduced padding */
    z-index: 6400 !important;
    transform: none !important; /* Remove transform */
  }
  
  /* Paging buttons - smaller in mobile */
  .cmp-mini-power-cards .mpc-page-btn {
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
    border-width: 1.5px !important;
    line-height: 1 !important;
  }
  
  /* Container for mini power card items */
  .cmp-mini-power-cards .mpc-cards-container {
    display: flex !important;
    gap: 4px !important; /* Reduced gap */
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 1px 2px !important; /* Reduced padding */
    height: 100% !important;
  }
  
  /* Individual mini power card */
  .cmp-mini-power-cards .mini-power-card {
    flex-shrink: 0 !important;
    height: 42px !important; /* Reduced from 48px */
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }
  
  .cmp-mini-power-cards .mini-power-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
  }
  
  .cmp-mini-power-cards .mini-power-card:active {
    transform: translateY(0) !important;
  }
  
  /* Mini power card inner styling */
  .cmp-mini-power-cards .mpc-card-inner {
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, #4a3b63 0%, #2e2540 100%) !important;
    border: 2px solid #ffefa5 !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: flex-start !important; /* Align text to top */
    justify-content: flex-start !important; /* Align text to top */
    padding: 4px !important;
    box-sizing: border-box !important;
  }
  
  /* Card name text */
  .cmp-mini-power-cards .mpc-card-name {
    font-size: 0.6rem !important;
    font-weight: bold !important;
    color: #ffefa5 !important;
    text-align: center !important;
    line-height: 1.1 !important;
    padding-top: 4px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    word-break: break-word !important;
  }
  
  /* Cost badge - shorter width for mobile */
  .cmp-mini-power-cards .mpc-card-cost {
    min-width: 18px !important;
    height: 16px !important;
    font-size: 9px !important;
    padding: 0 1px 0 4px !important;
    border-radius: 8px !important;
  }
  
  /* Card emoji - circular badge outside card in mobile (bottom-right) */
  .cmp-mini-power-cards .mpc-card-emoji {
    bottom: -6px !important;
    right: -6px !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 9px !important;
    border-width: 2px !important;
    line-height: 1 !important;
    padding: 0 !important;
  }
  
  .cmp-mini-power-cards .mpc-card-emoji svg {
    width: 8px !important;
    height: 8px !important;
    display: block !important;
    margin: auto !important;
  }
  
  /* Light emoji variant - inverted colors for better contrast (mobile) */
  .cmp-mini-power-cards .mpc-card-emoji.mpc-emoji-light {
    background: #000 !important;
    border-color: #fff !important;
  }
  
  /* Empty state styling */
  .cmp-mini-power-cards .mpc-empty-state {
    font-size: 0.9rem !important;
    color: rgba(255, 215, 0, 0.6) !important;
    font-style: italic !important;
    padding: 0 1rem !important;
  }
  
  /* Force mini player cards below unleash screen and other modals */
  .cmp-mini-player-cards,
  .mini-player-card-container,
  .mini-player-card {
    z-index: 5000 !important;
  }
  
  /* Color active indicator based on monster theme - using correct colors from config.json */
  .mini-player-card-container:has(.mini-player-card--active[data-monster="the_king"]) .mpc-active-indicator {
    background: #c49b3a !important;
    border-color: #9a7a2d !important;
  }
  
  .mini-player-card-container:has(.mini-player-card--active[data-monster="alienoid"]) .mpc-active-indicator {
    background: #c7d84a !important;
    border-color: #9fb038 !important;
  }
  
  .mini-player-card-container:has(.mini-player-card--active[data-monster="kraken"]) .mpc-active-indicator {
    background: #2e8cba !important;
    border-color: #236d94 !important;
  }
  
  .mini-player-card-container:has(.mini-player-card--active[data-monster="meka_dragon"]) .mpc-active-indicator {
    background: #d4473a !important;
    border-color: #a9382e !important;
  }
  
  .mini-player-card-container:has(.mini-player-card--active[data-monster="cyber_kitty"]) .mpc-active-indicator {
    background: #ff7ab8 !important;
    border-color: #cc6293 !important;
  }
  
  .mini-player-card-container:has(.mini-player-card--active[data-monster="space_penguin"]) .mpc-active-indicator {
    background: #8ed1f0 !important;
    border-color: #6fb5d1 !important;
  }
  
  .mini-player-card-container:has(.mini-player-card--active[data-monster="gigazaur"]) .mpc-active-indicator {
    background: #5fa047 !important;
    border-color: #4c8038 !important;
  }
  
  /* Fallback for unmatched monsters */
  .mini-player-card-container:has(.mini-player-card--active:not([data-monster])) .mpc-active-indicator {
    background: #ffcf33 !important;
    border-color: #cca729 !important;
  }
  
  /* Additional Tokyo tiles scaling for very small viewports */
  @media (max-height: 600px) {
    [data-arena-section="city"],
    [data-arena-section="bay"] {
      transform-origin: center center;
      overflow: visible !important;
    }
    
    [data-arena-section="city"] {
      transform: rotate(-8deg) scale(0.5) translate(25vw, 8vh) !important;
    }
    
    [data-arena-section="bay"] {
      transform: rotate(8deg) scale(0.5) translate(15vw, 6vh) !important;
    }
  }
  
  /* ========================================
   * MOBILE-FRIENDLY DICE MANIPULATION TABS
   * ======================================== */
  
  /* Hide stacked labels on mobile */
  .cmp-dice-tray .dice-manipulation-labels {
    display: none !important;
  }
  
  /* Show horizontal tabs instead */
  .cmp-dice-tray .dice-manipulation-tabs {
    display: flex !important;
    position: absolute;
    top: -15px; /* Adjusted position */
    right: 10px;
    left: 120px; /* Leave space for player card */
    flex-direction: row-reverse; /* Right to left */
    gap: 4px;
    z-index: 15;
  }
  
  /* Individual tab button */
  .cmp-dice-tray .manipulation-tab {
    position: relative;
    display: flex;
    flex-direction: row; /* Horizontal layout for icon + arrow */
    align-items: center;
    justify-content: center;
    gap: 4px; /* Space between icon and arrow */
    min-width: 60px; /* Wider tabs */
    max-width: 70px;
    flex: 1;
    background: #2c3e50;
    border: 2px solid #000;
    border-radius: 8px 8px 0 0;
    padding: 0px; /* No padding */
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.3);
  }
  
  .cmp-dice-tray .manipulation-tab.expanded {
    box-shadow: 0 -4px 8px rgba(0,0,0,0.4);
    transform: translateY(-2px);
  }
  
  /* Tab icon/label preview */
  .cmp-dice-tray .manipulation-tab .tab-icon {
    font-size: 14px; /* Smaller dice emoji */
    line-height: 1;
    flex-shrink: 0;
    display: none; /* Hide emojis */
  }
  
  /* Arrow indicator */
  .cmp-dice-tray .manipulation-tab .tab-arrow {
    font-size: 10px;
    line-height: 1;
    flex-shrink: 0;
    padding: 6px 2px 4px 32px;
    transition: transform 0.2s;
    display: inline-block;
  }
  
  /* Full label that appears when expanded */
  .cmp-dice-tray .manipulation-tab .tab-label {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: max-content;
    max-width: 250px; /* Increased from 200px */
    padding: 8px 12px;
    font-family: 'Bangers', cursive;
    font-size: 16px;
    line-height: 1.2;
    border: 3px solid #000;
    box-shadow: 3px 3px 0 #000;
    transform-origin: bottom center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    white-space: nowrap;
    text-align: center;
  }
  
  /* First child in row-reverse = RIGHTMOST visually (plot-twist) - align label to RIGHT */
  .cmp-dice-tray .manipulation-tab:first-child .tab-label {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(8px);
    transform-origin: bottom right;
  }
  
  .cmp-dice-tray .manipulation-tab:first-child.expanded .tab-label {
    transform: translateX(0) translateY(-8px);
  }
  
  /* Second child in row-reverse = MIDDLE visually (herd-culler) - keep centered */
  .cmp-dice-tray .manipulation-tab:nth-child(2) .tab-label {
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    transform-origin: bottom center;
  }
  
  .cmp-dice-tray .manipulation-tab:nth-child(2).expanded .tab-label {
    transform: translateX(-50%) translateY(-8px);
  }
  
  /* Third child in row-reverse = LEFTMOST visually (background-dweller) - align label to LEFT */
  .cmp-dice-tray .manipulation-tab:last-child .tab-label {
    left: 0;
    transform: translateX(0) translateY(8px);
    transform-origin: bottom left;
  }
  
  .cmp-dice-tray .manipulation-tab:last-child.expanded .tab-label {
    transform: translateX(0) translateY(-8px);
  }
  
  .cmp-dice-tray .manipulation-tab.expanded .tab-label {
    opacity: 1;
    visibility: visible;
  }
  
  /* Color coding for different cards - Tab backgrounds match label colors */
  .cmp-dice-tray .manipulation-tab.herd-culler {
    background: #27ae60;
  }
  
  .cmp-dice-tray .manipulation-tab.herd-culler .tab-label {
    background: #27ae60;
    color: #fff;
  }
  
  .cmp-dice-tray .manipulation-tab.plot-twist {
    background: #3498db;
  }
  
  .cmp-dice-tray .manipulation-tab.plot-twist .tab-label {
    background: #3498db;
    color: #fff;
  }
  
  .cmp-dice-tray .manipulation-tab.background-dweller {
    background: darkred;
  }
  
  .cmp-dice-tray .manipulation-tab.background-dweller .tab-label {
    background: darkred;
    color: #fff;
  }
  
  /* Tab label text with shadow */
  .cmp-dice-tray .manipulation-tab .tab-label .label-text {
    text-shadow: 
      -1px -1px 0 #000,
      1px -1px 0 #000,
      -1px 1px 0 #000,
      1px 1px 0 #000;
  }
  
  /* Usage/cost info in label */
  .cmp-dice-tray .manipulation-tab .tab-label .label-usage,
  .cmp-dice-tray .manipulation-tab .tab-label .label-cost {
    font-size: 12px;
    margin-left: 4px;
  }
  
  /* Tab slide-up animations */
  .cmp-dice-tray .manipulation-tab {
    opacity: 0;
    transform: translateY(20px);
  }
  
  .cmp-dice-tray .manipulation-tab.slide-up {
    animation: tabSlideUp 0.4s ease-out forwards;
  }
  
  @keyframes tabSlideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}