/* Canvas and canvas layers */
#game-canvas,
#fx-canvas {
  border: 2px solid #4a9eff;
  background: #0a0a0a;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  position: absolute;
  top: 0;
  left: 0;
  width: 800px;
  height: 600px;
  box-shadow: 0 0 20px rgba(74, 158, 255, 0.3), inset 0 0 20px rgba(74, 158, 255, 0.05);
}

#fx-canvas {
  pointer-events: none;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Cards and panels with sci-fi aesthetic */
.reward-card,
.element-card,
.element-details-panel,
.fusion-preview,
.spell-slot,
.fusion-slot {
  background: linear-gradient(135deg, #0f0f1a 0%, #1a0f2e 100%);
  border: 1px solid #4a2a7f;
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.1);
}

/* Element / reward rarity pill — generalized so it can be reused in multiple panels */
.rarity-pill {
  font-size: 11px;
  font-weight: 800;
  text-transform: capitalize;
  padding: 4px 8px;
  border-radius: 12px;
  margin-left: 8px;
  color: #0a0a0f; /* dark text for contrast on bright pills */
  background: rgba(200,200,200,0.12);
  border: 1px solid rgba(255,255,255,0.06);
  align-self: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

/* Positioning helper when used inside panels where absolute placement is desired */
.panel .rarity-pill,
.element-details-panel .rarity-pill {
  position: relative;
}

/* Rarity-specific pill visuals (reusable across reward cards, detail panels, etc.) */
.rarity-pill[data-rarity="mundane"] { background: rgba(80,80,80,0.92); color:#f2f2f2; border-color: rgba(100,100,100,0.95); }
.rarity-pill[data-rarity="common"] { background: linear-gradient(90deg, rgba(160,120,80,0.96), rgba(140,100,60,0.92)); color:#fff6ea; border-color: rgba(160,140,120,0.96); }
.rarity-pill[data-rarity="uncommon"] { background: linear-gradient(90deg, #7ad06a, #4fb24a); color:#052004; border-color: rgba(60,150,60,0.95); box-shadow: 0 6px 14px rgba(80,180,90,0.12); }
.rarity-pill[data-rarity="unusual"] { background: linear-gradient(90deg, #57d1d6, #2aa6b0); color:#041a1a; border-color: rgba(40,160,170,0.95); box-shadow:0 6px 14px rgba(40,160,170,0.12); }
.rarity-pill[data-rarity="rare"] { background: linear-gradient(90deg, #ffd56b, #ffb84a); color:#2a1400; border-color: rgba(255,170,60,0.98); box-shadow: 0 8px 18px rgba(255,150,40,0.18); }
.rarity-pill[data-rarity="prestigious"] { background: linear-gradient(90deg, #b88ef0, #8a63d9); color:#10021b; border-color: rgba(150,110,220,0.98); box-shadow:0 6px 16px rgba(140,100,220,0.14); }
.rarity-pill[data-rarity="exotic"] { background: linear-gradient(90deg, #3fe0c9, #2aa6ff); color:#002025; border-color: rgba(60,180,200,0.96); box-shadow:0 6px 14px rgba(60,170,200,0.12); }
.rarity-pill[data-rarity="outstanding"] { background: linear-gradient(90deg, #7fb7ff, #9f6fff); color:#040922; border-color: rgba(120,140,240,0.96); box-shadow:0 8px 18px rgba(120,110,230,0.16); }
.rarity-pill[data-rarity="exceptional"] { background: linear-gradient(90deg, #5ef1ff, #8ad0ff); color:#021428; border-color: rgba(90,200,255,0.96); box-shadow:0 8px 20px rgba(90,170,230,0.18); }
.rarity-pill[data-rarity="legendary"] { background: linear-gradient(90deg, #6ff0ff, #8fe8ff); color:#041226; border-color: rgba(120,220,255,0.98); box-shadow: 0 8px 22px rgba(120,200,255,0.22); }
.rarity-pill[data-rarity="wondrous"] { background: linear-gradient(90deg, #9ee6ff, #c58bff); color:#08051a; border-color: rgba(160,140,255,0.98); box-shadow: 0 10px 26px rgba(180,140,255,0.2); }
.rarity-pill[data-rarity="supernal"] { background: linear-gradient(90deg, #6ff5d6, #85f0ff); color:#032026; border-color: rgba(100,220,255,0.99); box-shadow: 0 10px 28px rgba(100,220,255,0.22); }
.rarity-pill[data-rarity="mythic"] { background: linear-gradient(90deg, #ff8ad6, #ffd36b); color:#13020f; border-color: rgba(255,200,120,1); box-shadow: 0 12px 36px rgba(255,160,200,0.26); }

.element-card:hover,
.reward-card:hover {
  border-color: #7a5aaf;
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.2);
}

.element-card.selected {
  border-color: #64c8ff;
  box-shadow: 0 0 25px rgba(100, 200, 255, 0.3);
}

.panel {
  background: linear-gradient(135deg, #0a0a0f 0%, #1a0f2e 100%);
  border: 1px solid #4a9eff;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 0 15px rgba(74, 158, 255, 0.15), inset 0 0 10px rgba(74, 158, 255, 0.05);
}

.detail-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
}

/* Buttons with neon accent */
button {
  font-family: inherit;
  touch-action: manipulation;
  transition: all 0.2s ease;
}

button:not(:disabled) {
  border-color: #4a9eff;
  background: rgba(74, 158, 255, 0.08);
  color: #b0d4ff;
}

button:hover:not(:disabled) {
  border-color: #64c8ff;
  background: rgba(100, 200, 255, 0.15);
  box-shadow: 0 0 12px rgba(100, 200, 255, 0.2);
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Touch-friendly button sizes on mobile */
@media (max-width: 768px) {
}

:root{--scroll-thumb:#333;--scroll-track:#0a0a0f;--scroll-thumb-hover:#64c8ff}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:var(--scroll-track)}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--scroll-thumb),#222);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}
/* Firefox native scrollbar theming */
*{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) var(--scroll-track)}
/* Ensure main UI scrollable regions explicitly use the themed colors (for strict UA support) */
#reward-overlay,#fusion-ui,.reward-modal,.elements-library,.intro-screen-overlay,.loadout-choice-card .properties-list,.properties-list{scrollbar-color:var(--scroll-thumb) var(--scroll-track)}