/* Container and Layout */
.overlay_overlayContainer__MCe6w {
  position: fixed;
  inset: 0;
  z-index: 70; /* Use explicit z-index to match the inline style */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 95vw;
  height: 95vh;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  background-color: var(--background);
  border: 2px solid var(--border-color);
  border-radius: 12px;
}

.overlay_overlayContent__8l8gB {
  position: absolute;
  inset: 0;
  display: flex;
  overflow: hidden;
  /* padding: 1rem; */
  margin: 1rem;
  border: none;
  width: 100%;
  /* height: 90%; */
}

/* Panel Layouts */
.overlay_leftPanel__aAg3_, .overlay_rightPanel__HHm1d, .overlay_centerPanel__AvAdz, .overlay_overlayLeftPanel__LEtIQ, .overlay_overlayRightPanel__HCZwf {
  /* flex: 0 0 20%;
  min-width: 25%;
  max-width: 25%; */
  background-color: var(--background);
  width:16rem;
  mix-blend-mode: var(--background-blend-mode);
}

.overlay_centerPanel__AvAdz {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 2px;
  background-color: var(--background);
  -o-object-fit: fill;
     object-fit: fill;
  width: 100%;
  justify-content: flex-start;
  padding-top: 0.5rem; /* Reduced padding to save space */
  height: 100%; /* Ensure full height utilization */
}

.overlay_overlayCenterPanel__PQu3z {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Add dividers instead of borders */
.overlay_leftPanel__aAg3_::after,
.overlay_centerPanel__AvAdz::after,
.overlay_rightPanel__HHm1d::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--border-color);
  mix-blend-mode: var(--background-blend-mode);
  -o-object-fit: scale-down;
     object-fit: scale-down;
}

/* Close Button */
.overlay_closeButton__ZZMYd {
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
  z-index: 10;
  transition: all 200ms;
  font-size: 24px;
}

.overlay_closeButton__ZZMYd:hover {
  transform: scale(1.1);
}

.overlay_closeButton__ZZMYd:active {
  transform: scale(0.95);
}

/* Pokebox Styles */
.overlay_pokeboxContainer__P9pHt {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* height: calc(100% - 60px); */
  padding: 2px;
  background-color: rgba(var(--theme-background-rgb), 0.1);
  -o-object-fit: fill;
     object-fit: fill;
  justify-self: center;
  align-self: center;
  justify-content: center;
  align-items: center;
}

.overlay_pokeboxGrid__Q34n5 {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr)); */
  /* gap: 0.5rem; */
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  /* padding: 0.5rem; */
  -o-object-fit: fill;
     object-fit: fill;
  justify-self: center;
  align-self: center;
  justify-content: center;
  align-items: center;
}

/* Theme and Common Styles */
.overlay_themed__wlmfD {
  background-color: var(--theme-background);
  border-color: var(--theme-border);
  color: var(--theme-text);
  /* border-width: 2px;
  border-radius: 10px; */
}

/* Loading States */
.overlay_loadingContainer__1We6o {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.overlay_loadingMessage__aL1_n {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 0 1rem;
}

/* Responsive Design */
@media (max-width: 1280px) {
  .overlay_pokeboxGrid__Q34n5 {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  }
}

@media (max-width: 1024px) {
  .overlay_pokeboxGrid__Q34n5 {
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  }
}

/* Animations */
@keyframes overlay_overlayFade__a6q0l {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes overlay_contentScale__wfGd8 {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.overlay_overlayContainer__MCe6w .overlay-panel-container{
  animation: overlay_overlayFade__a6q0l 0.2s ease-in-out;
  mix-blend-mode: var(--background-blend-mode);
}

.overlay_overlayContent__8l8gB {
  animation: overlay_contentScale__wfGd8 0.2s ease-in-out;
}

.overlay_containerFull__M3c32 {
  width: 16rem;
  /* height: 100%; */
  border: 2px solid var(--border-color);
  background-color: var(--background);
  border-radius: 10px;
}

.overlay_overlayRightPanel__HCZwf {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-left: 2px solid var(--border-color);
  color: var(--text-main);
  position: relative;
  overflow: hidden;
  background-color: var(--background);
}
/*
.overlayRightPanel :global(.custom-scrollbar) {
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) var(--card-bg);
} */

.overlay_overlayRightPanel__HCZwf .overlay-panel-container {
  background-color: var(--background);
  border-top: 2px solid var(--border-color);
  padding: 1rem;
}

/* Game Completion Tracker Styles */
.overlay_gameCompletionTracker__MunYY {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.overlay_gameCompletionHeader__J7sAW {
  padding: 1rem;
  background-color: var(--background);
  border-bottom: 1px solid var(--border-color);
}

.overlay_gameCompletionContent__e56Bg {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  min-height: 400px; /* Ensure minimum height for content rendering */
  padding: 0.5rem; /* Reduced padding to save space */
}

.overlay_taskDetails__Nyp13 {
  padding: 1rem;
  background-color: var(--background);
  border-top: 1px solid var(--border-color);
}
.flexStyles_flexContainer__8zg8E {
  display: flex;
  align-items: center; /* Center items vertically */
}

.flexStyles_flexColumn__xj8mf {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  justify-content: center; /* Center items vertically */
  margin-left: 1rem; /* Add left margin for spacing */
} 
.PokeballSelect_container__1oeRd {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.25rem;
  padding: 0.25rem;
}

.PokeballSelect_revertButton__3VnyP {
  margin-bottom: 0.5rem;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--radius) - 2px);
  padding: 0.5rem;
  background-color: var(--theme-danger-color);
  color: var(--theme-text-color-inverse);
}

.PokeballSelect_revertButton__3VnyP:hover {
  background-color: var(--theme-danger-color-hover);
}

.PokeballSelect_revertIcon__a3wng {
  margin-right: 0.5rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.PokeballSelect_revertText__zOPfu {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}

.PokeballSelect_pokeballButton__Xml47 {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  padding: 0.25rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  animation-duration: 200ms;
  background-color: var(--theme-card-color);
  border: 1px solid var(--theme-border-color);
}

.PokeballSelect_pokeballButton__Xml47:hover {
  background-color: var(--theme-hover-color);
}

.PokeballSelect_pokeballButton__Xml47.PokeballSelect_selected__S6UZj {
  background-color: var(--theme-active-color);
}

.PokeballSelect_pokeballIcon__bcXP_ {
  height: 1.5rem;
  width: 1.5rem;
} 
.AddCaughtButton_container__bKDAd {
    position: relative;
}

.AddCaughtButton_button__qwPYH {
    padding: 0.5rem;
    border-radius: 0.25rem;
}

.AddCaughtButton_button__qwPYH:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.AddCaughtButton_dropdown__PdXFG {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 0.25rem;
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    min-width: 10%;
    mix-blend-mode: normal;
    z-index: 11;
}

.AddCaughtButton_pokeball_icon__qQkdg {
    width: 1.5rem;
    height: 1.5rem;
} 
.adminEditPanel_adminEditPanel__VC0Rs {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--background);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.adminEditPanel_header__Qc27w {
  padding: 16px;
  background: var(--background-secondary);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.adminEditPanel_header__Qc27w h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--foreground);
}

.adminEditPanel_status__kTLGv {
  display: flex;
  align-items: center;
  gap: 8px;
}

.adminEditPanel_unsavedIndicator__jRuYi {
  background: #f59e0b;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.adminEditPanel_saveControls__qYwHO {
  padding: 12px 16px;
  background: var(--background);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  gap: 8px;
}

.adminEditPanel_saveButton__d2wBg {
  flex: 1;
  padding: 8px 12px;
  background: #10b981;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background-color 0.2s;
}

.adminEditPanel_saveButton__d2wBg:hover:not(:disabled) {
  background: #059669;
}

.adminEditPanel_saveButton__d2wBg:disabled {
  background: #6b7280;
  cursor: not-allowed;
}

.adminEditPanel_loadButton__GvPh_ {
  padding: 8px 12px;
  background: var(--background-secondary);
  color: var(--foreground);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s;
}

.adminEditPanel_loadButton__GvPh_:hover {
  background: var(--background-tertiary);
}

.adminEditPanel_tabs__1jrXo {
  display: flex;
  background: var(--background-secondary);
  border-bottom: 1px solid var(--border-color);
}

.adminEditPanel_tab__hxf0U {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: none;
  color: var(--foreground-secondary);
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
}

.adminEditPanel_tab__hxf0U:hover {
  background: var(--background-tertiary);
  color: var(--foreground);
}

.adminEditPanel_tab__hxf0U.adminEditPanel_active__o1W8t {
  background: var(--background);
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.adminEditPanel_content__gppGt {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.adminEditPanel_sectionHeader__cJznQ {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.adminEditPanel_sectionHeader__cJznQ h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
}

.adminEditPanel_taskCount__2rExO,
.adminEditPanel_regionCount__kd0Xs {
  font-size: 0.75rem;
  color: var(--foreground-secondary);
  background: var(--background-secondary);
  padding: 2px 6px;
  border-radius: 4px;
}

.adminEditPanel_addTaskForm__vgxdI,
.adminEditPanel_editTaskForm__m9c7n {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--background-secondary);
  border-radius: 6px;
}

.adminEditPanel_editTaskForm__m9c7n {
  border: 2px solid var(--primary);
  background: var(--background-tertiary);
}

.adminEditPanel_editTaskForm__m9c7n h4 {
  margin: 0 0 8px 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
}

.adminEditPanel_coordinateInputs__2Uw_l {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.adminEditPanel_editActions__rJvq1 {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.adminEditPanel_cancelButton__r6hGb {
  padding: 8px 12px;
  background: var(--background-secondary);
  color: var(--foreground);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background-color 0.2s;
}

.adminEditPanel_cancelButton__r6hGb:hover {
  background: var(--background-tertiary);
}

.adminEditPanel_taskCoordinates__xgkJ_ {
  font-size: 0.7rem;
  color: var(--foreground-secondary);
  font-family: monospace;
}

.adminEditPanel_input__6T993,
.adminEditPanel_select__69hO7 {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--background);
  color: var(--foreground);
  font-size: 0.875rem;
}

.adminEditPanel_input__6T993:focus,
.adminEditPanel_select__69hO7:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.adminEditPanel_addButton__Eeg9M {
  padding: 8px 12px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background-color 0.2s;
}

.adminEditPanel_addButton__Eeg9M:hover {
  background: var(--primary-dark);
}

.adminEditPanel_taskItems__GxPwM,
.adminEditPanel_regionItems___emnw {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.adminEditPanel_taskItem__r0AOH,
.adminEditPanel_regionItem__OE9US {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--background-secondary);
  border-radius: 6px;
  border: 1px solid var(--border-color);
  transition: all 0.2s;
}

.adminEditPanel_taskItem__r0AOH:hover,
.adminEditPanel_regionItem__OE9US:hover {
  background: var(--background-tertiary);
  border-color: var(--primary);
}

.adminEditPanel_taskInfo__6Vnot,
.adminEditPanel_regionInfo__QB4NA {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.adminEditPanel_taskName__PkbTQ,
.adminEditPanel_regionName___jjrB {
  font-weight: 500;
  color: var(--foreground);
  font-size: 0.875rem;
}

.adminEditPanel_taskCategory__BJUZM,
.adminEditPanel_regionType__auC_g {
  font-size: 0.75rem;
  color: var(--foreground-secondary);
  text-transform: capitalize;
}

.adminEditPanel_taskActions__GxeTB,
.adminEditPanel_regionActions__3dOD_ {
  display: flex;
  gap: 4px;
}

.adminEditPanel_editButton__i0J5B,
.adminEditPanel_deleteButton__SqpJ3 {
  padding: 6px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.adminEditPanel_editButton__i0J5B {
  background: #3b82f6;
  color: white;
}

.adminEditPanel_editButton__i0J5B:hover {
  background: #2563eb;
}

.adminEditPanel_deleteButton__SqpJ3 {
  background: #ef4444;
  color: white;
}

.adminEditPanel_deleteButton__SqpJ3:hover {
  background: #dc2626;
}

.adminEditPanel_instructions__rLQzj {
  padding: 16px;
  background: var(--background-secondary);
  border-top: 1px solid var(--border-color);
  margin-top: auto;
}

.adminEditPanel_instructions__rLQzj h4 {
  margin: 0 0 8px 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
}

.adminEditPanel_instructions__rLQzj ul {
  margin: 0;
  padding-left: 16px;
  font-size: 0.75rem;
  color: var(--foreground-secondary);
  line-height: 1.4;
}

.adminEditPanel_instructions__rLQzj li {
  margin-bottom: 4px;
}

/* Map Config Tab Styles */
.adminEditPanel_mapConfigTab__2YMqL {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.adminEditPanel_backgroundSelection__No0JI {
  margin-top: 8px;
}

.adminEditPanel_formLabel__Y1157 {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--foreground);
}

.adminEditPanel_backgroundGrid__Ow7Yy {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.adminEditPanel_backgroundOption__qpreN {
  position: relative;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid var(--border-color);
  transition: all 0.2s;
}

.adminEditPanel_backgroundOption__qpreN:hover {
  transform: scale(1.03);
  border-color: var(--primary-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.adminEditPanel_backgroundOption__qpreN.adminEditPanel_selected__dDjXJ {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
  transform: scale(1.05);
}

.adminEditPanel_backgroundLabel__9Z7Jb {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 0.7rem;
  padding: 4px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.2s;
}

.adminEditPanel_backgroundOption__qpreN.adminEditPanel_selected__dDjXJ .adminEditPanel_backgroundLabel__9Z7Jb {
  background: rgba(var(--primary-rgb), 0.9);
  font-weight: 500;
}

.adminEditPanel_selectedIndicator__MNzFS {
  position: absolute;
  top: 5px;
  right: 5px;
  background: var(--primary);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: adminEditPanel_selectedPulse__zsbFn 0.3s ease-out;
}

@keyframes adminEditPanel_selectedPulse__zsbFn {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.adminEditPanel_configForm__qNn8B {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.adminEditPanel_saveActions__oZFCx {
  margin-top: 16px;
}

.adminEditPanel_mapConfigContainer__rLCPb .adminEditPanel_instructions__rLQzj {
  margin-top: 16px;
  background: var(--background-secondary);
  padding: 12px;
  border-radius: 6px;
}

.adminEditPanel_loading__Ggu0t {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: var(--foreground-secondary);
  font-style: italic;
}

/* Region Management Panel Styles */
.regionManagement_regionManagementPanel__s2Sfr {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--background);
  border-radius: 8px;
  overflow: hidden;
}

.regionManagement_header__qazY1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--background-secondary);
  border-bottom: 1px solid var(--border-color);
}

.regionManagement_title__Tc_Xd {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
  margin: 0;
}

.regionManagement_icon__egK8t {
  color: var(--primary-color);
}

.regionManagement_addButton__XHe2W {
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 12px;
}

.regionManagement_addButton__XHe2W:hover {
  background: var(--primary-color-dark, #1d4ed8);
}

/* Region Form */
.regionManagement_regionForm__Ia3HK {
  padding: 16px;
  background: var(--background-tertiary);
  border-bottom: 1px solid var(--border-color);
}

.regionManagement_formHeader__oQ6zR {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.regionManagement_formHeader__oQ6zR h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--foreground);
}

.regionManagement_cancelButton__miuAn {
  background: none;
  border: none;
  color: var(--foreground-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
}

.regionManagement_cancelButton__miuAn:hover {
  color: var(--foreground);
  background: var(--background-secondary);
}

.regionManagement_formGroup__xAWbW {
  margin-bottom: 12px;
}

.regionManagement_formGroup__xAWbW label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--foreground);
  margin-bottom: 4px;
}

.regionManagement_formRow__6kPvo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.regionManagement_input__lRrbq {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--background);
  color: var(--foreground);
  font-size: 0.8rem;
  transition: border-color 0.2s;
}

.regionManagement_input__lRrbq:focus {
  outline: none;
  border-color: var(--primary-color);
}

.regionManagement_saveButton__LnjXt {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  transition: background-color 0.2s;
  width: 100%;
  justify-content: center;
}

.regionManagement_saveButton__LnjXt:hover {
  background: var(--primary-color-dark, #1d4ed8);
}

/* Region List */
.regionManagement_regionList__4DrBL {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.regionManagement_regionItem__TeoK8 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--background-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.regionManagement_regionItem__TeoK8:hover {
  background: var(--background-tertiary);
  border-color: var(--primary-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.regionManagement_regionItem__TeoK8.regionManagement_selected__gy3Hf {
  background: var(--primary-color-light, #dbeafe);
  border-color: var(--primary-color);
}

.regionManagement_regionInfo__pBYMd {
  flex: 1;
  min-width: 0;
}

.regionManagement_regionName__aOAPL {
  font-weight: 600;
  color: var(--foreground);
  font-size: 0.9rem;
  margin-bottom: 4px;
  line-height: 1.2;
}

.regionManagement_regionStats__4XVfJ {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.regionManagement_position__RkJ9E,
.regionManagement_size__mWuTe {
  font-size: 0.75rem;
  color: var(--foreground-secondary);
  background: var(--background-tertiary);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
}

.regionManagement_taskProgress__5FrwM {
  margin-top: 6px;
}

.regionManagement_progressText__f4lFI {
  font-size: 0.75rem;
  color: var(--foreground-secondary);
  margin-bottom: 4px;
  display: block;
}

.regionManagement_progressBar__Oz_LS {
  width: 100%;
  height: 4px;
  background: var(--background-tertiary);
  border-radius: 2px;
  overflow: hidden;
}

.regionManagement_progressFill__sp05q {
  height: 100%;
  background: var(--primary-color);
  transition: width 0.3s ease;
  border-radius: 2px;
}

.regionManagement_regionActions___78TR {
  display: flex;
  gap: 4px;
  margin-left: 8px;
}

.regionManagement_editButton__4QEzp,
.regionManagement_deleteButton__s6_Eh {
  background: none;
  border: none;
  color: var(--foreground-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: all 0.2s;
  font-size: 0.8rem;
}

.regionManagement_editButton__4QEzp:hover {
  color: var(--primary-color);
  background: var(--primary-color-light, #dbeafe);
}

.regionManagement_deleteButton__s6_Eh:hover {
  color: var(--error, #dc2626);
  background: var(--error-bg, #fef2f2);
}

/* Empty State */
.regionManagement_emptyState__PtWiJ {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
  color: var(--foreground-secondary);
}

.regionManagement_emptyIcon__gsOB_ {
  font-size: 2rem;
  margin-bottom: 12px;
  opacity: 0.5;
}

.regionManagement_emptyState__PtWiJ p {
  margin: 0 0 16px 0;
  font-size: 0.9rem;
}

.regionManagement_addFirstButton__BkkbN {
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  transition: background-color 0.2s;
}

.regionManagement_addFirstButton__BkkbN:hover {
  background: var(--primary-color-dark, #1d4ed8);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .regionManagement_formRow__6kPvo {
    grid-template-columns: 1fr;
  }
  
  .regionManagement_regionStats__4XVfJ {
    flex-direction: column;
    gap: 4px;
  }
  
  .regionManagement_regionActions___78TR {
    flex-direction: column;
  }
}

/* Dark theme support */
[data-theme="dark"] .regionManagement_regionManagementPanel__s2Sfr {
  background: var(--background-dark, #1f2937);
}

[data-theme="dark"] .regionManagement_regionItem__TeoK8 {
  background: var(--background-secondary-dark, #111827);
  border-color: var(--border-dark, #374151);
}

[data-theme="dark"] .regionManagement_regionItem__TeoK8:hover {
  background: var(--background-tertiary-dark, #0f172a);
}

.AddInstanceForm_select__XAsR_ .AddInstanceForm_formContainer__qU6Du {
  padding: 1.5rem;
  background-color: var(--background);
  color: var(--text-main);
}

.AddInstanceForm_label__lvQc_ {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
  font-weight: 500;
}

.AddInstanceForm_input__2xcLQ {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 0.25rem;
  background-color: var(--input-bg);
  color: var(--text-main);
}

.AddInstanceForm_input__2xcLQ:focus {
  border-color: var(--primary-color);
  outline: none;
}

.AddInstanceForm_buttonContainer__F2DMz {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

.AddInstanceForm_button__TD3ZD {
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  font-weight: 500;
  transition: background-color 0.2s;
}

.AddInstanceForm_cancelButton__MCNcF {
  background-color: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

.AddInstanceForm_cancelButton__MCNcF:hover {
  background-color: var(--hover-bg);
}

.AddInstanceForm_submitButton__FFtYE {
  background-color: var(--primary-color);
  color: white;
}

.AddInstanceForm_submitButton__FFtYE:hover {
  background-color: var(--primary-dark);
} 
.gameInstance_selectedInstance__beFBQ {
  z-index: 10;
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  animation-duration: 150ms;
  border: 2px solid var(--accent)
}

.gameInstance_instanceCard__MPwpt {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--bg-color);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  animation-duration: 150ms;
  border: 2px solid transparent
}

.gameInstance_instanceCard__MPwpt:hover:not(.gameInstance_selectedInstance__beFBQ) {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border: 2px solid var(--border-color)
} 
/* Root Variables */
:root {
    --mx: 50%;
    --my: 50%;
    --posx: 50%;
    --posy: 50%;
    --hyp: 0;
    --grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+CjxmaWx0ZXIgaWQ9Im4iPgo8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjciIG51bU9jdGF2ZXM9IjEwIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIj48L2ZlVHVyYnVsZW5jZT4KPC9maWx0ZXI+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjMDAwIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWx0ZXI9InVybCgjbikiIG9wYWNpdHk9IjAuMyI+PC9yZWN0Pgo8L3N2Zz4=");
}

/* Base Card Structure */
.shader {
    border-radius: var(--radius);
    transform-style: preserve-3d;
    will-change: transform;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    perspective: 1000;
}

/* Base Specular Layer */
.shader .specular {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-blend-mode: color-dodge, color-burn, saturation, screen;
    background-size: 200% 200%, 300% 300%, 200% 200%, 200% 200%;
    pointer-events: none;
    mix-blend-mode: color-dodge;
    opacity: 0.8;
    animation: continuousHolo 18s linear infinite;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity, filter, background-position;
}

/* Base Animation */
@keyframes continuousHolo {
    0%, 100% {
        opacity: 0.8;
        background-position: 45% 45%;
        filter: brightness(0.85) contrast(1.1);
    }
    50% {
        opacity: 0.85;
        background-position: 55% 55%;
        filter: brightness(0.9) contrast(1.2);
    }
}

/* Base Animation Properties */
.shader .specular,
.shader .specular:before,
.shader .specular:after {
    animation: continuousHolo 18s linear infinite;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-play-state: running;
    animation-direction: normal;
    will-change: transform, opacity, filter, background-position;
} 
/* Galaxy Effect - Enhanced with Immersive Animations */
.holo-galaxy .specular {
    --space: 64px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: 
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/galaxy.png"),
        repeating-linear-gradient(
            82deg,
            rgb(218, 56, 50) calc(var(--space) * 1),
            rgb(219, 204, 86) calc(var(--space) * 2),
            rgb(121, 199, 58) calc(var(--space) * 3),
            rgb(58, 192, 183) calc(var(--space) * 4),
            rgb(71, 98, 207) calc(var(--space) * 5),
            rgb(170, 69, 209) calc(var(--space) * 6),
            rgb(218, 56, 50) calc(var(--space) * 10)
        );
    background-size: 50% 50%, 1000% 1000%;
    background-position: center, 0% 0%;
    opacity: 0.6;
    mix-blend-mode: color-dodge;
    filter: brightness(0.75) contrast(1.2) saturate(1.5);
    animation: galaxySweep 6s linear infinite, galaxyGlow 8s ease-in-out infinite, galaxySparkle 10s ease-in-out infinite;
}

@keyframes galaxySweep {
    0%, 100% {
        background-position: center, 0% 0%;
    }
    50% {
        background-position: 1000% 1000%, 500% 500%;
    }
}

@keyframes galaxyGlow {
    0%, 100% {
        opacity: 0.8;
        filter: brightness(1) saturate(1);
    }
    50% {
        opacity: 0.6;
        filter: brightness(1.2) saturate(1.5);
    }
}

@keyframes galaxySparkle {
    0% {
        background-position: 0% 0%;
        opacity: 0.5;
    }
    50% {
        background-position: 100% 100%;
        opacity: 0.7;
    }
    100% {
        background-position: 0% 0%;
        opacity: 0.5;
    }
}

/* Cosmos Effect - Enhanced */
.holo-cosmos .specular {
    --space: 200px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: 
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/rainbow2.jpg"),
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion2.webp"),
        repeating-linear-gradient(
            45deg,
            rgb(15, 32, 89) calc(var(--space) * 1),
            rgb(44, 77, 147) calc(var(--space) * 2),
            rgb(131, 180, 247) calc(var(--space) * 3),
            rgb(166, 209, 255) calc(var(--space) * 4),
            rgb(82, 122, 219) calc(var(--space) * 5),
            rgb(15, 32, 89) calc(var(--space) * 6)
        );
    background-size: 40% 40%, 50% 50%, 200% 400%;
    background-position: center, center, center;
    background-blend-mode: soft-light, overlay, normal;
    opacity: 0.6;
    filter: brightness(0.85) contrast(1.4) saturate(1.8);
    animation: cosmosFloat 8s ease-in-out infinite;
}

/* Cosmos Sparkle Effect */
.holo-cosmos .specular:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 25% 25%,
        rgba(255, 255, 255, 0.8) 5%,
        rgba(255, 255, 255, 0.4) 15%,
        rgba(0, 0, 0, 0.6) 80%
    );
    mix-blend-mode: screen;
    opacity: 0.7;
    animation: cosmosSpark 15s ease-in-out infinite;
}

/* Cosmos Stars Layer */
.holo-cosmos .specular:after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 75% 75%,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.5) 15%,
        rgba(0, 0, 0, 0.5) 60%
    );
    mix-blend-mode: screen;
    opacity: 0.8;
    filter: brightness(1.1) contrast(1.2);
    animation: cosmosSpark 45s ease-in-out infinite alternate;
}

/* Cosmos animations */
@keyframes cosmosFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-1%) scale(1.01);
    }
}

@keyframes cosmosSpark {
    0% {
        transform: translate(-5%, -5%) scale(1);
    }
    25% {
        transform: translate(5%, -5%) scale(1.1);
    }
    50% {
        transform: translate(5%, 5%) scale(1);
    }
    75% {
        transform: translate(-5%, 5%) scale(1.1);
    }
    100% {
        transform: translate(-5%, -5%) scale(1);
    }
} 
/* Common Effect - Subtle foil */
.holo-common .specular {
    --space: 150px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: 
        repeating-linear-gradient(
            125deg,
            rgba(255, 255, 255, 0.5) calc(var(--space) * 1),
            rgba(220, 220, 220, 0.3) calc(var(--space) * 2),
            rgba(240, 240, 240, 0.4) calc(var(--space) * 3),
            rgba(200, 200, 200, 0.3) calc(var(--space) * 4)
        );
    background-size: 200% 400%;
    opacity: 0.4;
    mix-blend-mode: overlay;
    filter: brightness(1.1) contrast(1.1);
    animation: commonSweep 8s ease-in-out infinite;
}

/* Common Foil Pattern */
.holo-common .specular:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 75% 75%,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.2) 30%,
        rgba(0, 0, 0, 0.1) 80%
    );
    mix-blend-mode: soft-light;
    opacity: 0.5;
    animation: commonGlow 6s ease-in-out infinite;
}

@keyframes commonSweep {
    0% {
        background-position: 0% 0%;
        opacity: 0.4;
    }
    25% {
        background-position: 50% 50%;
        opacity: 0.5;
    }
    50% {
        background-position: 100% 100%;
        opacity: 0.6;
    }
    75% {
        background-position: 50% 50%;
        opacity: 0.5;
    }
    100% {
        background-position: 0% 0%;
        opacity: 0.4;
    }
}

@keyframes commonGlow {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
} 
/* Reverse Holo Effect - Horizontal lines */
.holo-reverse .specular {
    --space: 40px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: 
        repeating-linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.1) 0px,
            rgba(255, 255, 255, 0.2) 1px,
            rgba(255, 255, 255, 0.1) 2px,
            transparent 3px
        ),
        linear-gradient(
            90deg,
            rgba(255, 120, 120, 0.3),
            rgba(120, 255, 120, 0.3),
            rgba(120, 120, 255, 0.3)
        );
    background-size: 100% var(--space), 200% 200%;
    opacity: 0.5;
    mix-blend-mode: color-dodge;
    filter: brightness(1.2) contrast(1.3);
    animation: reverseSweep 3s ease-in-out infinite;
}

/* Reverse Holo Shine */
.holo-reverse .specular:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 75% 75%,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.3) 20%,
        transparent 60%
    );
    mix-blend-mode: overlay;
    opacity: 0.6;
    animation: reverseGlow 4s ease-in-out infinite;
}

/* Reverse Holo Pattern */
.holo-reverse .specular:after {
    content: "";
    position: absolute;
    inset: 0;
    background: 
        repeating-linear-gradient(
            45deg,
            transparent 0%,
            rgba(255, 255, 255, 0.1) 1%,
            transparent 2%
        );
    background-size: 10px 10px;
    mix-blend-mode: overlay;
    opacity: 0.4;
    animation: reversePattern 20s linear infinite;
}

@keyframes reverseSweep {
    0%, 100% {
        opacity: 0.5;
        background-position: 0% 0%, 0% 50%;
    }
    50% {
        opacity: 0.7;
        background-position: 0% 100%, 100% 50%;
    }
}

@keyframes reverseGlow {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1) translateY(0);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05) translateY(-2%);
    }
}

@keyframes reversePattern {
    0% {
        background-position: 0% 0%;
        opacity: 0.4;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        background-position: 100% 100%;
        opacity: 0.4;
    }
} 
/* Radiant Effect - Enhanced with Continuous Animations */
.holo-radiant .specular {
    --barwidth: 1.2%;
    --space: 200px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: calc(((var(--hyp) * 0.7) + 0.2));
    clip-path: inset(2.8% 4% round 2.55% / 1.5%);
    background: 
        repeating-linear-gradient(
            55deg,
            rgb(255, 161, 158) calc(var(--space) * 1),
            rgb(85, 178, 255) calc(var(--space) * 2),
            rgb(255, 199, 146) calc(var(--space) * 3),
            rgb(130, 255, 213) calc(var(--space) * 4),
            rgb(253, 170, 240) calc(var(--space) * 5),
            rgb(148, 241, 255) calc(var(--space) * 6),
            rgb(255, 161, 158) calc(var(--space) * 7)
        ),
        repeating-linear-gradient(
            45deg,
            hsl(0, 0%, 10%) 0%,
            hsl(0, 0%, 10%) 1%,
            hsl(0, 0%, 10%) var(--barwidth),
            hsl(0, 0%, 20%) calc(var(--barwidth) + 0.01%),
            hsl(0, 0%, 20%) calc(var(--barwidth) * 2),
            hsl(0, 0%, 35%) calc(var(--barwidth) * 2 + 0.01%),
            hsl(0, 0%, 35%) calc(var(--barwidth) * 3),
            hsl(0, 0%, 42.5%) calc(var(--barwidth) * 3 + 0.01%),
            hsl(0, 0%, 42.5%) calc(var(--barwidth) * 4),
            hsl(0, 0%, 50%) calc(var(--barwidth) * 4 + 0.01%),
            hsl(0, 0%, 50%) calc(var(--barwidth) * 5),
            hsl(0, 0%, 42.5%) calc(var(--barwidth) * 5 + 0.01%),
            hsl(0, 0%, 42.5%) calc(var(--barwidth) * 6),
            hsl(0, 0%, 35%) calc(var(--barwidth) * 6 + 0.01%),
            hsl(0, 0%, 35%) calc(var(--barwidth) * 7),
            hsl(0, 0%, 20%) calc(var(--barwidth) * 7 + 0.01%),
            hsl(0, 0%, 20%) calc(var(--barwidth) * 8),
            hsl(0, 0%, 10%) calc(var(--barwidth) * 8 + 0.01%),
            hsl(0, 0%, 10%) calc(var(--barwidth) * 9),
            hsl(0, 0%, 0%) calc(var(--barwidth) * 9 + 0.01%),
            hsl(0, 0%, 0%) calc(var(--barwidth) * 10)
        ),
        repeating-linear-gradient(
            -45deg,
            hsl(0, 0%, 10%) 0%,
            hsl(0, 0%, 10%) 1%,
            hsl(0, 0%, 10%) var(--barwidth),
            hsl(0, 0%, 20%) calc(var(--barwidth) + 0.01%),
            hsl(0, 0%, 20%) calc(var(--barwidth) * 2),
            hsl(0, 0%, 35%) calc(var(--barwidth) * 2 + 0.01%),
            hsl(0, 0%, 35%) calc(var(--barwidth) * 3),
            hsl(0, 0%, 42.5%) calc(var(--barwidth) * 3 + 0.01%),
            hsl(0, 0%, 42.5%) calc(var(--barwidth) * 4),
            hsl(0, 0%, 50%) calc(var(--barwidth) * 4 + 0.01%),
            hsl(0, 0%, 50%) calc(var(--barwidth) * 5),
            hsl(0, 0%, 42.5%) calc(var(--barwidth) * 5 + 0.01%),
            hsl(0, 0%, 42.5%) calc(var(--barwidth) * 6),
            hsl(0, 0%, 35%) calc(var(--barwidth) * 6 + 0.01%),
            hsl(0, 0%, 35%) calc(var(--barwidth) * 7),
            hsl(0, 0%, 20%) calc(var(--barwidth) * 7 + 0.01%),
            hsl(0, 0%, 20%) calc(var(--barwidth) * 8),
            hsl(0, 0%, 10%) calc(var(--barwidth) * 8 + 0.01%),
            hsl(0, 0%, 10%) calc(var(--barwidth) * 9),
            hsl(0, 0%, 0%) calc(var(--barwidth) * 9 + 0.01%),
            hsl(0, 0%, 0%) calc(var(--barwidth) * 10)
        );
    background-size: 400% 400%, 210% 210%;
    background-blend-mode: exclusion, darken;
    filter: brightness(0.95) contrast(4) saturate(0.75);
    mix-blend-mode: color-dodge;
    animation: radiantFlow 12s linear infinite, radiantTexture 12s ease-in-out infinite;
}

.holo-radiant .specular:after {
    content: "";
    position: absolute;
    inset: 0;
    background: 
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/rainbow2.jpg"),
        repeating-linear-gradient(
            55deg,
            rgb(255, 161, 158) calc(var(--space) * 1),
            rgb(85, 178, 255) calc(var(--space) * 2),
            rgb(255, 199, 146) calc(var(--space) * 3),
            rgb(130, 255, 213) calc(var(--space) * 4),
            rgb(253, 170, 240) calc(var(--space) * 5),
            rgb(148, 241, 255) calc(var(--space) * 6),
            rgb(255, 161, 158) calc(var(--space) * 7)
        );
    background-size: 40%, 400%;
    background-position: center, calc(((var(--posx) - 50%) * -2.5) + 50%) calc(((var(--posy) - 50%) * -2.5) + 50%);
    filter: brightness(1) contrast(1) saturate(0);
    mix-blend-mode: soft-light;
    background-blend-mode: multiply;
    animation: radiantTexture 12s ease-in-out infinite;
}

@keyframes radiantFlow {
    0%, 100% {
        background-position: 0% 0%, 0% 0%;
    }
    50% {
        background-position: 400% 400%, 210% 210%;
    }
}

@keyframes radiantTexture {
    0%, 100% {
        background-position: center, 0% 0%;
        opacity: 0.8;
    }
    50% {
        background-position: center, 400% 400%;
        opacity: 1;
    }
} 
/* Ancient Effect - Weathered gold */
.holo-ancient .specular {
    --space: 180px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    background: 
        repeating-linear-gradient(
            45deg,
            rgb(184, 134, 11) calc(var(--space) * 1),
            rgb(218, 165, 32) calc(var(--space) * 2),
            rgb(207, 181, 59) calc(var(--space) * 3),
            rgb(156, 145, 54) calc(var(--space) * 4),
            rgb(184, 134, 11) calc(var(--space) * 5)
        );
    background-size: 200% 400%;
    opacity: 0.5;
    mix-blend-mode: color-dodge;
    filter: brightness(0.9) contrast(1.3) saturate(0.8);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Ancient Texture Layer */
.holo-ancient .specular:before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: 
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/ancient.png"),
        radial-gradient(
            circle at var(--mx) var(--my),
            rgba(255, 215, 0, 0.6) 0%,
            rgba(184, 134, 11, 0.4) 30%,
            transparent 70%
        );
    background-blend-mode: multiply;
    mix-blend-mode: overlay;
    opacity: 0.4;
    animation: ancientSweep 6s ease infinite;
}

/* Ancient Shine Layer */
.holo-ancient .specular:after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(
        circle at var(--mx) var(--my),
        rgba(255, 223, 0, 0.8) 0%,
        rgba(255, 215, 0, 0.4) 20%,
        transparent 60%
    );
    mix-blend-mode: soft-light;
    opacity: 0.5;
    filter: brightness(1.1) contrast(1.2);
    animation: ancientGlow 4s ease infinite;
}

@keyframes ancientSweep {
    0%, 100% {
        background-position: 0% 0%;
        opacity: 0.4;
    }
    50% {
        background-position: 100% 100%;
        opacity: 0.6;
    }
}

@keyframes ancientGlow {
    0%, 100% {
        opacity: 0.5;
        filter: brightness(1.1) contrast(1.2);
    }
    50% {
        opacity: 0.7;
        filter: brightness(1.2) contrast(1.3);
    }
} 
/* Classic Effect - Original foil pattern */
.holo-classic .specular {
    --space: 160px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: 
        repeating-linear-gradient(
            -45deg,
            rgb(255, 222, 89) calc(var(--space) * 1),
            rgb(255, 185, 100) calc(var(--space) * 2),
            rgb(255, 200, 200) calc(var(--space) * 3),
            rgb(200, 255, 200) calc(var(--space) * 4),
            rgb(200, 200, 255) calc(var(--space) * 5),
            rgb(255, 222, 89) calc(var(--space) * 6)
        );
    background-size: 200% 400%;
    opacity: 0.5;
    mix-blend-mode: color-dodge;
    filter: brightness(1.1) contrast(1.2) saturate(1.1);
    animation: classicSweep 8s ease-in-out infinite;
}

/* Classic Pattern Layer */
.holo-classic .specular:before {
    content: "";
    position: absolute;
    inset: 0;
    background: 
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.1) 0px,
            rgba(255, 255, 255, 0.2) 2px,
            rgba(255, 255, 255, 0.1) 4px,
            transparent 6px
        ),
        radial-gradient(
            circle at 75% 75%,
            rgba(255, 255, 255, 0.7) 0%,
            rgba(255, 255, 255, 0.4) 20%,
            transparent 60%
        );
    background-size: 10px 10px, 200% 200%;
    background-blend-mode: soft-light;
    mix-blend-mode: overlay;
    opacity: 0.6;
    animation: classicPattern 12s linear infinite;
}

/* Classic Shine Layer */
.holo-classic .specular:after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 25% 25%,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.5) 15%,
        transparent 60%
    );
    mix-blend-mode: soft-light;
    opacity: 0.5;
    animation: classicShine 6s ease-in-out infinite;
}

@keyframes classicSweep {
    0%, 100% {
        background-position: 0% 0%;
        opacity: 0.5;
    }
    50% {
        background-position: 100% 100%;
        opacity: 0.7;
    }
}

@keyframes classicPattern {
    0% {
        background-position: 0% 0%, 0% 0%;
        opacity: 0.6;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        background-position: 100% 100%, 100% 100%;
        opacity: 0.6;
    }
}

@keyframes classicShine {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1) translateY(0);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05) translateY(-2%);
    }
} 
/* Amazing Rare Effect */
.holo-amazing .specular {
    --space: 5%;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: 
        repeating-linear-gradient(
            0deg,
            rgb(255, 119, 115) calc(var(--space) * 1),
            rgba(255, 237, 95, 1) calc(var(--space) * 2),
            rgba(168, 255, 95, 1) calc(var(--space) * 3),
            rgba(131, 255, 247, 1) calc(var(--space) * 4),
            rgba(120, 148, 255, 1) calc(var(--space) * 5),
            rgb(216, 117, 255) calc(var(--space) * 6),
            rgb(255, 119, 115) calc(var(--space) * 7)
        ),
        repeating-linear-gradient(
            133deg,
            #0e152e 0%,
            hsl(180, 10%, 60%) 3.8%,
            hsl(180, 29%, 66%) 4.5%,
            hsl(180, 10%, 60%) 5.2%,
            #0e152e 10%,
            #0e152e 12%
        );
    background-size: 200% 700%, 300%;
    background-blend-mode: hue, hard-light;
    opacity: 0.8;
    filter: brightness(1.2) contrast(1.4) saturate(1.3);
    animation: amazingFlow 12s linear infinite;
}

/* Amazing Shine Layer */
.holo-amazing .specular:before {
    content: "";
    position: absolute;
    inset: 0;
    background: 
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.2) 3.8%,
            rgba(255, 255, 255, 0.1) 4.5%,
            transparent 10%
        ),
        radial-gradient(
            farthest-corner circle at 75% 75%,
            rgba(255, 255, 255, 0.8) 0%,
            rgba(255, 255, 255, 0.5) 15%,
            transparent 60%
        );
    background-size: 150% 150%, 200% 200%;
    mix-blend-mode: overlay;
    opacity: 0.7;
    animation: amazingSweep 8s ease-in-out infinite;
}

/* Amazing Pattern Layer */
.holo-amazing .specular:after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        farthest-corner circle at 25% 25%,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.4) 15%,
        rgba(0, 0, 0, 0.2) 60%
    );
    mix-blend-mode: soft-light;
    opacity: 0.6;
    animation: amazingGlow 15s ease-in-out infinite;
}

@keyframes amazingFlow {
    0% {
        background-position: 0% 0%, 0% 0%;
    }
    50% {
        background-position: 0% 100%, 100% 100%;
    }
    100% {
        background-position: 0% 0%, 0% 0%;
    }
}

@keyframes amazingSweep {
    0%, 100% {
        background-position: 0% 0%, 75% 75%;
        opacity: 0.7;
    }
    50% {
        background-position: 100% 100%, 75% 75%;
        opacity: 0.9;
    }
}

@keyframes amazingGlow {
    0%, 100% {
        opacity: 0.6;
        transform: translate(-2%, -2%) scale(1);
    }
    25% {
        opacity: 0.7;
        transform: translate(2%, -2%) scale(1.02);
    }
    50% {
        opacity: 0.8;
        transform: translate(2%, 2%) scale(1.05);
    }
    75% {
        opacity: 0.7;
        transform: translate(-2%, 2%) scale(1.02);
    }
} 
/* V Card Effect */
.holo-v .specular {
    --angle: 133deg;
    --space: 5%;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: 
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion.webp"),
        repeating-linear-gradient(
            90deg,
            rgb(255, 119, 115) calc(var(--space) * 1),
            rgba(255, 237, 95, 1) calc(var(--space) * 2),
            rgba(168, 255, 95, 1) calc(var(--space) * 3),
            rgba(131, 255, 247, 1) calc(var(--space) * 4),
            rgba(120, 148, 255, 1) calc(var(--space) * 5),
            rgb(216, 117, 255) calc(var(--space) * 6),
            rgb(255, 119, 115) calc(var(--space) * 7)
        ),
        repeating-linear-gradient(
            var(--angle),
            rgba(14, 21, 46, 0.2) 0%,
            hsla(180, 10%, 60%, 0.3) 3.8%,
            hsla(180, 29%, 66%, 0.3) 4.5%,
            hsla(180, 10%, 60%, 0.3) 5.2%,
            rgba(14, 21, 46, 0.2) 10%,
            rgba(14, 21, 46, 0.2) 12%
        );
    background-blend-mode: color-burn, soft-light, normal;
    background-size: 50% 50%, 100% 700%, 200%;
    background-position: center, 0% 0%, 0% 0%;
    filter: brightness(1.75) contrast(1.8) saturate(0.8);
    animation: vCardFlow 8s ease-in-out infinite;
}

.holo-v .specular:before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: 50% 50%, 100% 400%, 195%;
    filter: brightness(1.2) contrast(1.5) saturate(1.2);
    mix-blend-mode: color-dodge;
    opacity: 0.7;
    animation: vCardSweep 6s ease-in-out infinite;
}

@keyframes vCardFlow {
    0%, 100% {
        background-position: center, 0% 0%, 0% 0%;
    }
    50% {
        background-position: center, 0% 100%, 100% 100%;
    }
}

@keyframes vCardSweep {
    0%, 100% {
        opacity: 0.7;
        transform: translateY(0%);
    }
    50% {
        opacity: 0.9;
        transform: translateY(-1%);
    }
} 
/* VMAX Effect */
.holo-vmax .specular {
    --angle: 133deg;
    --imgsize: 60% 30%;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: 
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/vmaxbg.webp"),
        repeating-linear-gradient(
            -33deg,
            rgb(206, 42, 36) 6%,
            rgb(157, 170, 223) 12%,
            rgb(45, 153, 146) 18%,
            rgb(29, 151, 36) 24%,
            rgb(181, 64, 228) 30%,
            rgb(206, 42, 36) 36%
        ),
        repeating-linear-gradient(
            var(--angle),
            rgba(14, 21, 46, 0.5) 0%,
            hsl(180, 10%, 50%) 2.5%,
            hsl(83, 50%, 35%) 5%,
            hsl(180, 10%, 50%) 7.5%,
            rgba(14, 21, 46, 0.5) 10%,
            rgba(14, 21, 46, 0.5) 15%
        );
    background-blend-mode:overlay, screen, soft-light;
    background-size: var(--imgsize), 1100% 1100%, 600% 600%;
    background-position: center, 0% 0%, 0% 0%;
    filter: brightness(0.8) contrast(2.5) saturate(0.6);
    animation: vmaxFlow 12s linear infinite;
}

/* VMAX Pattern Layer */
.holo-vmax .specular:before {
    content: "";
    position: absolute;
    inset: 0;
    background: 
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/vmaxbg.webp"),
        radial-gradient(
            circle at 75% 75%,
            rgba(6, 218, 255, 0.6) 0%,
            rgba(38, 235, 127, 0.6) 25%,
            rgba(155, 78, 228, 0.6) 50%,
            rgba(228, 78, 90, 0.6) 75%
        );
    background-size: 60% 30%, 200% 200%;
    background-position: center, 75% 75%;
    background-blend-mode: color-burn;
    mix-blend-mode: soft-light;
    opacity: 0.8;
    animation: vmaxSweep 6s ease-in-out infinite;
}

@keyframes vmaxFlow {
    0%, 100% {
        background-position: center, 0% 0%, 0% 0%;
        opacity: 0.9;
    }
    50% {
        background-position: center, 100% 100%, -50% -50%;
        opacity: 1;
    }
}

@keyframes vmaxSweep {
    0%, 100% {
        opacity: 0.8;
        filter: brightness(0.8) saturate(0.6);
        transform: scale(1) translateY(0);
    }
    50% {
        opacity: 1;
        filter: brightness(1) saturate(0.8);
        transform: scale(1.02) translateY(-0.5%);
    }
} 
/* VSTAR Effect */
.holo-vstar .specular {
    --angle: 133deg;
    --imgsize: 50%;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: 
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/ancient.webp"),
        repeating-linear-gradient(
            -45deg,
            rgb(255, 119, 115) 5%,
            rgba(255, 237, 95, 1) 10%,
            rgba(168, 255, 95, 1) 15%,
            rgba(131, 255, 247, 1) 20%,
            rgba(120, 148, 255, 1) 25%,
            rgb(216, 117, 255) 30%,
            rgb(255, 119, 115) 35%
        ),
        repeating-linear-gradient(
            var(--angle),
            #0e152e 0%,
            hsl(45, 40%, 60%) 3.8%,
            hsl(45, 60%, 66%) 4.5%,
            hsl(45, 40%, 60%) 5.2%,
            #0e152e 10%,
            #0e152e 12%
        ),
        radial-gradient(
            farthest-corner circle at 75% 75%,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0.2) 25%,
            rgba(0, 0, 0, 0.3) 100%
        );
    background-size: var(--imgsize), 200% 700%, 300%, 200%;
    background-position: center, 0% 0%, 0% 0%, 75% 75%;
    background-blend-mode: soft-light, color, hard-light;
    filter: brightness(1.2) contrast(1.8) saturate(0.8);
    animation: vstarFlow 8s ease-in-out infinite;
}

.holo-vstar .specular:before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: var(--imgsize), 200% 400%, 195%, 200%;
    background-position: center, 0% 0%, 0% 0%, 75% 75%;
    filter: brightness(1.4) contrast(1.5) saturate(1.5);
    mix-blend-mode: exclusion;
    animation: vstarSweep 6s ease-in-out infinite;
}

@keyframes vstarFlow {
    0%, 100% {
        background-position: center, 0% 0%, 0% 0%, 75% 75%;
        filter: brightness(1.2) contrast(1.8) saturate(0.8);
    }
    50% {
        background-position: center, 100% 100%, 100% 100%, 75% 75%;
        filter: brightness(1.3) contrast(2) saturate(0.9);
    }
}

@keyframes vstarSweep {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1) translateY(0);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.02) translateY(-1%);
    }
} 
/* Rainbow Rare Effect - Enhanced with Dynamic Animations */
.card.holo-rainbow {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Base Silhouette and Rainbow Border - Enhanced */
.holo-rainbow .specular {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Edge detection mask */
    -webkit-mask: linear-gradient(white, rgb(255, 255, 255));
    mask: linear-gradient(rgb(255, 255, 255), rgb(0, 0, 0));
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 150%;
    background: 
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion2.webp"),
        linear-gradient(
            135deg,
            rgba(255, 0, 85, 1) 0%,
            rgba(255, 140, 0, 1) 15%,
            rgba(255, 230, 0, 1) 30%,
            rgba(0, 255, 85, 1) 45%,
            rgba(0, 195, 255, 1) 60%,
            rgba(155, 0, 255, 1) 75%,
            rgba(255, 0, 255, 1) 90%,
            rgba(255, 0, 128, 1) 100%
        );
    background-blend-mode: soft-light, soft-light, screen, overlay;
    filter: brightness(1.5) contrast(1.5) saturate(1.5);
    transform: scale(1.02);
    opacity: 0.7;
    animation: rainbowShine 12s ease-in-out infinite, rainbowTexture 12s ease-in-out infinite;
    z-index: -1;
}

/* Edge enhancement layer with texture */
.card.holo-rainbow:before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: 
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/rainbow2.jpg"),
        radial-gradient(
            circle at center,
            rgba(255, 255, 255, 0.8) 0%,
            rgba(255, 255, 255, 0.4) 45%,
            transparent 80%
        );
    background-size: 200% 200%, 150% 150%;
    background-position: center;
    filter: 
        brightness(200%)
        contrast(150%)
        saturate(150%)
        blur(0.5px);
    mix-blend-mode: soft-light;
    transform: translateY(0px) scale(1.02);
    opacity: 0.7;
    z-index: -1;
    animation: rainbowTexture 12s ease-in-out infinite;
}

@keyframes rainbowShine {
    0%, 100% { 
        background-position: 0% 0%, center;
    }
    50% { 
        background-position: 100% 100%, center;
    }
}

@keyframes rainbowTexture {
    0%, 100% { 
        background-position: 0% 0%, center;
        opacity: 0.7;
    }
    50% { 
        background-position: 100% 100%, center;
        opacity: 0.9;
    }
} 
/* Gold Secret Effect */
.holo-secret .specular {
    --angle: 110deg;
    --imgsize: 250px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    padding: 8px;
    background: 
        linear-gradient(45deg, 
            rgb(255, 215, 0) 0%,
            rgb(255, 230, 150) 20%,
            rgb(255, 215, 0) 40%,
            rgb(255, 230, 150) 60%,
            rgb(255, 215, 0) 80%,
            rgb(255, 230, 150) 100%
        ) padding-box,
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/metal.webp"),
        repeating-linear-gradient(
            var(--angle),
            rgba(89, 46, 80, 0.5) 0%,
            hsl(39, 37%, 60%) 2.5%,
            rgb(216, 183, 92) 5%,
            hsl(39, 37%, 60%) 7.5%,
            rgba(14, 21, 46, 0.5) 10%,
            rgba(14, 21, 46, 0.5) 15%
        ),
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/metal.webp");
    background-size: 200% 200%, 50% 50%, 600% 600%, var(--imgsize);
    background-position: center, center, var(--posx) var(--posy), center;
    background-blend-mode: normal, color-burn, darken;
    filter: brightness(calc((var(--hyp) * 0.4) + 0.7)) contrast(3) saturate(0.66);
    border: 8px solid transparent;
}

.holo-secret .specular:before {
    content: "";
    position: absolute;
    inset: 0;
    background: 
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/rainbow2.jpg"),
        repeating-linear-gradient(
            var(--angle),
            rgba(89, 46, 80, 0.5) 0%,
            hsl(39, 37%, 60%) 2.5%,
            rgb(216, 183, 92) 5%,
            hsl(39, 37%, 60%) 7.5%,
            rgba(14, 21, 46, 0.5) 10%,
            rgba(14, 21, 46, 0.5) 15%
        );
    background-position: center, calc(var(--posx) * -1) calc(var(--posy) * -1),
        center;
    filter: brightness(calc((var(--hyp) * 0.3) + 0.7)) contrast(2.5) saturate(0.66);
    mix-blend-mode: multiply;
} 
/* Trainer Gallery Effect */
.holo-trainer .specular {
    --space: 160px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    background: 
        repeating-linear-gradient(
            135deg,
            rgba(255, 182, 193, 0.6) calc(var(--space) * 1),
            rgba(255, 218, 185, 0.6) calc(var(--space) * 2),
            rgba(255, 255, 224, 0.6) calc(var(--space) * 3),
            rgba(176, 224, 230, 0.6) calc(var(--space) * 4),
            rgba(221, 160, 221, 0.6) calc(var(--space) * 5)
        );
    background-size: 250% 250%;
    opacity: 0.6;
    mix-blend-mode: color-dodge;
    filter: brightness(1.2) contrast(1.3) saturate(1.3);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    animation: trainerFlow 8s linear infinite;
}

/* Trainer Pattern Layer */
.holo-trainer .specular:before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: 
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/trainer.png"),
        radial-gradient(
            circle at var(--mx) var(--my),
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0.5) 20%,
            transparent 60%
        );
    background-blend-mode: soft-light;
    mix-blend-mode: overlay;
    opacity: 0.7;
    animation: trainerSweep 5s ease infinite;
}

@keyframes trainerFlow {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 250% 250%;
    }
}

@keyframes trainerSweep {
    0%, 100% {
        opacity: 0.7;
        filter: brightness(1.1) saturate(1.1);
    }
    50% {
        opacity: 0.9;
        filter: brightness(1.3) saturate(1.3);
    }
} 
/* Shiny Vault Effect - Enhanced with Dynamic Animations */
.holo-shiny .specular {
    --space: 150px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: 
        radial-gradient(
            circle at 30% 30%,
            rgba(255, 255, 255, 0.8) 0%,
            transparent 20%
        ),
        radial-gradient(
            circle at 70% 60%,
            rgba(255, 255, 255, 0.8) 0%,
            transparent 20%
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(255, 215, 0, 0.5) calc(var(--space) * 1),
            rgba(255, 255, 255, 0.8) calc(var(--space) * 1.5),
            rgba(255, 223, 0, 0.5) calc(var(--space) * 2)
        ),
        /* Base Texture */
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.2) 20%,
            transparent 60%
        );
    background-size: 200% 200%, 4px 4px, 100% 100%;
    background-blend-mode: screen;
    mix-blend-mode: overlay;
    opacity: 0.9;
    animation: shinyVaultFlow 10s linear infinite, shinyVaultStars 8s ease infinite;
}

@keyframes shinyVaultFlow {
    0% {
        background-position: center, 0% 0%, 0% 0%;
    }
    100% {
        background-position: 200% 200%, -200% 200%, 200% 200%;
    }
}

@keyframes shinyVaultStars {
    0%, 100% {
        opacity: 0.8;
        filter: brightness(1) saturate(1);
    }
    50% {
        opacity: 1;
        filter: brightness(1.4) saturate(1.2);
    }
} 
/* V Alternate Art Effect */
.holo-v-alt .specular {
    --angle: 133deg;
    --imgsize: 50%;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: 
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion.webp"),
        repeating-linear-gradient(
            0deg,
            rgb(255, 119, 115) 5%,
            rgba(255, 237, 95, 1) 10%,
            rgba(168, 255, 95, 1) 15%,
            rgba(131, 255, 247, 1) 20%,
            rgba(120, 148, 255, 1) 25%,
            rgb(216, 117, 255) 30%,
            rgb(255, 119, 115) 35%
        ),
        repeating-linear-gradient(
            var(--angle),
            #0e152e 0%,
            hsl(180, 10%, 60%) 3.8%,
            hsl(180, 29%, 66%) 4.5%,
            hsl(180, 10%, 60%) 5.2%,
            #0e152e 10%,
            #0e152e 12%
        ),
        radial-gradient(
            farthest-corner circle at var(--mx) var(--my),
            rgba(0, 0, 0, 0.1) 12%,
            rgba(0, 0, 0, 0.15) 20%,
            rgba(0, 0, 0, 0.25) 120%
        );
    background-blend-mode: exclusion, hue, hard-light;
    background-size: var(--imgsize), 200% 700%, 300%, 200%;
    background-position: center, 0% var(--posy), var(--posx) var(--posy),
        var(--posx) var(--posy);
    filter: brightness(calc((var(--hyp) * 0.3) + 0.5)) contrast(2) saturate(1.5);
}

.holo-v-alt .specular:before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: var(--imgsize), 200% 400%, 195%, 200%;
    background-position: center, 0% var(--posy),
        calc(var(--posx) * -1) calc(var(--posy) * -1), var(--posx) var(--posy);
    filter: brightness(calc((var(--hyp) * 0.5) + 0.8)) contrast(1.6) saturate(1.4);
    mix-blend-mode: exclusion;
} 
/* VMAX Alternate Art Effect - Enhanced with Seamless Animations */
.holo-vmax-alt .specular {
    --space: 200px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: 
        repeating-linear-gradient(
            -45deg,
            rgba(60, 180, 255, 0.2) calc(var(--space) * 1),
            rgba(255, 90, 200, 0.2) calc(var(--space) * 2),
            rgba(140, 220, 255, 0.2) calc(var(--space) * 3),
            rgba(192, 192, 192, 0.1) calc(var(--space) * 4)
        ),
        linear-gradient(
            135deg,
            rgba(255, 90, 200, 0.2) 0%,
            rgba(140, 50, 255, 0.2) 50%,
            rgba(60, 180, 255, 0.2) 100%
        );
    background-size: 350% 350%, 100% 100%;
    opacity: 0.4;
    mix-blend-mode: overlay;
    filter: brightness(0.9) contrast(1.5) saturate(1.1);
    animation: vmaxAltFlow 12s linear infinite, vmaxAltGlow 10s ease-in-out infinite;
}

/* VMAX Alt Pattern Layer - inspired by Espeon's energy waves */
.holo-vmax-alt .specular:before {
    content: "";
    position: absolute;
    inset: 0;
    background: 
        /* Energy wave pattern */
        repeating-conic-gradient(
            from 0deg at 50% 50%,
            rgba(255, 100, 200, 0.2) 0deg,
            rgba(100, 200, 255, 0.2) 90deg,
            rgba(200, 100, 255, 0.2) 180deg,
            rgba(255, 100, 200, 0.2) 360deg
        ),
        /* Color shift layer */
        linear-gradient(
            45deg,
            rgba(255, 100, 200, 0.2) 0%,
            rgba(100, 200, 255, 0.2) 50%,
            rgba(200, 100, 255, 0.2) 100%
        );
    background-size: 200% 200%, 200% 200%;
    background-blend-mode: soft-light;
    mix-blend-mode: overlay;
    opacity: 0.5;
    animation: vmaxAltSweep 5s ease infinite;
}

/* VMAX Alt Glow Layer - inspired by the cards' energy effects */
.holo-vmax-alt .specular:after {
    content: "";
    position: absolute;
    inset: 0;
    background: 
        /* Central glow */
        radial-gradient(
            circle at 50% 50%,
            rgba(255, 255, 255, 0.3) 0%,
            rgba(255, 100, 200, 0.2) 30%,
            rgba(100, 200, 255, 0.1) 50%,
            transparent 70%
        );
    mix-blend-mode: soft-light;
    opacity: 0.3;
    filter: brightness(0.9) contrast(1.2);
    animation: vmaxAltGlow 6s ease-in-out infinite;
}

@keyframes vmaxAltFlow {
    0% {
        background-position: 0% 0%, 0% 0%;
    }
    100% {
        background-position: 350% 350%, 100% 100%;
    }
}

@keyframes vmaxAltSweep {
    0%, 100% {
        opacity: 0.5;
        filter: brightness(0.9) saturate(1.1);
        transform: rotate(0deg);
    }
    50% {
        opacity: 0.6;
        filter: brightness(1.1) saturate(1.2);
        transform: rotate(180deg);
    }
}

@keyframes vmaxAltGlow {
    0%, 100% {
        opacity: 0.5;
        filter: brightness(0.9) saturate(1.1);
        transform: rotate(0deg);
    }
    50% {
        opacity: 0.6;
        filter: brightness(1.1) saturate(1.2);
        transform: rotate(180deg);
    }
} 
/* Rainbow VMAX Effect - Enhanced with Continuous Animations */
.holo-vmax-rainbow .specular {
    --space: 50px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: 
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion2.webp"),
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            rgba(255, 255, 255, 0.03) 1px,
            transparent 2px
        ),
        repeating-linear-gradient(
            135deg,
            rgba(255, 100, 100, 0.4) calc(var(--space) * 1),
            rgba(255, 200, 100, 0.4) calc(var(--space) * 2),
            rgba(100, 255, 100, 0.4) calc(var(--space) * 3),
            rgba(100, 200, 255, 0.4) calc(var(--space) * 4),
            rgba(200, 100, 255, 0.4) calc(var(--space) * 5)
        );
    background-size: 100% 100%, 2px 2px, 200% 200%;
    opacity: 0.5;
    mix-blend-mode: color-dodge;
    filter: brightness(1.2) contrast(1.3) saturate(1.4);
    animation: rainbowVmaxFlow 6s linear infinite, rainbowVmaxSweep 6s ease infinite;
}

/* Rainbow VMAX Pattern */
.holo-vmax-rainbow .specular:before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: 
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/rainbow2.jpg"),
        /* Crosshatch pattern visible in the cards */
        repeating-linear-gradient(
            -45deg,
            transparent 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 50% 50%,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0.5) 15%,
            transparent 60%
        );
    background-size: 200% 200%, 4px 4px, 100% 100%;
    background-blend-mode: screen;
    mix-blend-mode: overlay;
    opacity: 0.9;
    animation: rainbowVmaxSweep 6s ease infinite;
}

@keyframes rainbowVmaxFlow {
    0% {
        background-position: center, 0% 0%, 0% 0%;
    }
    100% {
        background-position: center, 0% 0%, 400% 400%;
    }
}

@keyframes rainbowVmaxSweep {
    0%, 100% {
        opacity: 0.5;
        filter: brightness(1.3) saturate(1.4);
    }
    50% {
        opacity: 1;
        filter: brightness(1.5) saturate(1.5);
    }
} 

/* Rainbow Secret Alt Effect */
.holo-rainbow-alt .specular {
    --angle: -20deg;
    --angle2: 130deg;
    --imgsize: 540px 700px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: 
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/rainbow2.jpg"),
        repeating-linear-gradient(
            var(--angle),
            rgb(253, 71, 65) 7%,
            rgb(255, 243, 151) 14%,
            rgba(168, 255, 95, 1) 21%,
            rgba(131, 255, 247, 1) 28%,
            rgb(75, 198, 255) 35%,
            rgb(255, 73, 246) 42%,
            rgb(255, 56, 49) 49%
        ),
        repeating-linear-gradient(
            var(--angle2),
            rgba(89, 46, 80, 0.5) 0%,
            hsl(118, 43%, 76%) 2.5%,
            rgb(223, 96, 202) 5%,
            hsl(180, 57%, 56%) 7.5%,
            rgba(14, 21, 46, 0.5) 10%,
            rgba(14, 21, 46, 0.5) 15%
        ),
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion2.webp");
    background-size: 50% 50%, 500% 500%, 1000% 1000%, var(--imgsize);
    background-position: center, 0% calc(var(--posy) * 2),
        var(--posx) var(--posy), center;
    background-blend-mode: color-burn, soft-light, normal;
    /* Different filter values from base rainbow */
    filter: brightness(calc((var(--hyp) * 0.25) + 0.66)) contrast(3) saturate(0.7);
}

.holo-rainbow-alt .specular:before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    background-position: center, 0% calc(var(--posy) * -2),
        calc(var(--posx) * -1) calc(var(--posy) * -1), center;
    mix-blend-mode: exclusion;
} 
/* Trainer Gallery Holo Effect */
.holo-gallery .specular {
    --angle: -22deg;
    --imgsize: 200% 400%;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    clip-path: inset(2.8% 4% round 2.55% / 1.5%);
    background: repeating-linear-gradient(
        var(--angle),
        rgba(174, 102, 202, 0.75) 5%,
        rgba(228, 77, 72, 0.75) 10%,
        rgba(216, 197, 55, 0.75) 15%,
        rgba(124, 201, 62, 0.75) 20%,
        rgba(80, 177, 170, 0.75) 25%,
        rgba(136, 160, 255, 0.75) 30%,
        rgba(176, 105, 204, 0.75) 35%
    );
    background-blend-mode: color-dodge;
    background-size: var(--imgsize), 300%, 200%;
    background-position: 0% calc(var(--posy) * 1), var(--posx) var(--posy);
    filter: brightness(calc((var(--hyp) * 0.3) + 0.6)) contrast(2.3) saturate(1.1);
}

.holo-gallery .specular:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        farthest-corner ellipse at 75% 75%,
        rgb(255, 255, 255) 5%,
        rgba(55, 0, 55, 0.6) 25%,
        rgb(55, 55, 55) 90%
    );
    background-position: var(--posx) var(--posy);
    background-size: 200% 200%;
    filter: brightness(calc((var(--hyp) * 0.2) + 0.4)) contrast(0.85) saturate(1.1);
    mix-blend-mode: hard-light;
} 
/* Trainer Gallery V Effect */
.holo-gallery-v .specular {
    --angle: 133deg;
    --img: url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion.webp");
    --imgsize: 60%;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: 
        var(--img),
        repeating-linear-gradient(
            0deg,
            rgb(255, 119, 115) 5%,
            rgba(255, 237, 95, 1) 10%,
            rgba(168, 255, 95, 1) 15%,
            rgba(131, 255, 247, 1) 20%,
            rgba(120, 148, 255, 1) 25%,
            rgb(216, 117, 255) 30%,
            rgb(255, 119, 115) 35%
        ),
        repeating-linear-gradient(
            var(--angle),
            #0e152e 0%,
            hsl(180, 10%, 60%) 3.8%,
            hsl(180, 29%, 66%) 4.5%,
            hsl(180, 10%, 60%) 5.2%,
            #0e152e 10%,
            #0e152e 12%
        ),
        radial-gradient(
            farthest-corner circle at 75% 75%,  /* Fixed position instead of mouse-based */
            rgba(0, 0, 0, 0.1) 12%,
            rgba(0, 0, 0, 0.15) 20%,
            rgba(0, 0, 0, 0.25) 120%
        );
    background-blend-mode: exclusion, hue, hard-light;
    background-size: var(--imgsize), 200% 700%, 300%, 200%;
    background-position: center, 0% var(--posy), var(--posx) var(--posy),
        var(--posx) var(--posy);
    filter: brightness(calc((var(--hyp) * 0.4) + 0.5)) contrast(2.5) saturate(1);
}

.holo-gallery-v .specular:before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: var(--imgsize), 200% 400%, 195%, 200%;
    background-position: center, 0% var(--posy),
        calc(var(--posx) * -1) calc(var(--posy) * -1), var(--posx) var(--posy);
    filter: brightness(calc((var(--hyp) * 0.5) + 0.7)) contrast(2) saturate(1);
    mix-blend-mode: exclusion;
}

/* VMAX variant */
.holo-gallery-v[data-subtype="vmax"] .specular,
.holo-gallery-v[data-subtype="vmax"] .specular:before {
    --img: url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/stylish.webp");
    --imgsize: 48%;
} 
/* Trainer Full Art Effect */
.holo-trainer-full .specular {
    --angle: 133deg;
    --imgsize: 50%;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: 
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/trainerbg.jpg"),
        repeating-linear-gradient(
            0deg,
            rgb(255, 119, 115) 5%,
            rgba(255, 237, 95, 1) 10%,
            rgba(168, 255, 95, 1) 15%,
            rgba(131, 255, 247, 1) 20%,
            rgba(120, 148, 255, 1) 25%,
            rgb(216, 117, 255) 30%,
            rgb(255, 119, 115) 35%
        ),
        repeating-linear-gradient(
            var(--angle),
            #0e152e 0%,
            hsl(180, 10%, 60%) 3.8%,
            hsl(180, 29%, 66%) 4.5%,
            hsl(180, 10%, 60%) 5.2%,
            #0e152e 10%,
            #0e152e 12%
        ),
        radial-gradient(
            farthest-corner circle at var(--mx) var(--my),
            rgba(0, 0, 0, 0.1) 12%,
            rgba(0, 0, 0, 0.15) 20%,
            rgba(0, 0, 0, 0.25) 120%
        );
    background-blend-mode: difference, hue, hard-light;
    background-size: var(--imgsize), 200% 700%, 300%, 200%;
    background-position: center, 0% var(--posy), var(--posx) var(--posy),
        var(--posx) var(--posy);
    filter: brightness(0.75) contrast(2.5) saturate(0.75);
}

.holo-trainer-full .specular:before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: var(--imgsize), 200% 400%, 195%, 200%;
    background-position: center, 0% var(--posy),
        calc(var(--posx) * -1) calc(var(--posy) * -1), var(--posx) var(--posy);
    filter: brightness(1.2) contrast(1) saturate(1.75);
    mix-blend-mode: exclusion;
} 
/* Special Shiny Effect - Enhanced with Smooth Animations */
.holo-shiny-special .specular {
    --space: 50px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: 
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion2.webp"),
        repeating-linear-gradient(
            45deg,
            rgba(255, 215, 0, 0.4) calc(var(--space) * 1),
            rgba(255, 255, 255, 0.4) calc(var(--space) * 2),
            rgba(0, 191, 255, 0.4) calc(var(--space) * 3),
            rgba(255, 223, 0, 0.4) calc(var(--space) * 4)
        );
    background-size: 100% 100%, 200% 200%;
    opacity: 0.4;
    mix-blend-mode: color-dodge;
    filter: brightness(1.2) contrast(1.3) saturate(1.4);
    animation: shinySpecialFlow 10s linear infinite, shinySpecialSweep 6s ease infinite;
}

/* Shiny Sweep Overlay */
.holo-shiny-special .specular:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(255, 255, 255, 0.4) 0%,
        transparent 60%
    );
    background-blend-mode: screen;
    mix-blend-mode: overlay;
    opacity: 0.5;
    animation: shinySpecialSweep 6s ease infinite;
}

@keyframes shinySpecialFlow {
    0% {
        background-position: center, 0% 0%;
    }
    100% {
        background-position: center, 200% 200%;
    }
}

@keyframes shinySpecialSweep {
    0%, 100% {
        opacity: 0.5;
        filter: brightness(1.1) saturate(1.1);
    }
    50% {
        opacity: 0.6;
        filter: brightness(1.2) saturate(1.2);
    }
} 
/* Basic Glare Effect - Enhanced with Smooth Animations */
.holo-basic-glare .specular {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.3) 20%,
        transparent 60%
    );
    opacity: 0.4;
    mix-blend-mode: overlay;
    filter: brightness(1.1);
    animation: basicGlareMove 6s ease-in-out infinite;
}

/* Glare Overlay with Smooth Pulse */
.holo-basic-glare .specular:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(255, 255, 255, 0.3) 0%,
        transparent 60%
    );
    mix-blend-mode: soft-light;
    opacity: 0.5;
    animation: basicGlarePulse 3s ease infinite;
}

@keyframes basicGlareMove {
    0%, 100% {
        background-position: center;
        transform: scale(1);
    }
    50% {
        background-position: 50% 50%;
        transform: scale(1.05);
    }
}

@keyframes basicGlarePulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.7;
    }
} 
/* Basic 3D Effect */
.holo-basic-3d .specular {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0.3) 45%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.3) 55%,
        rgba(255, 255, 255, 0.2)
    );
    opacity: 0.4;
    mix-blend-mode: overlay;
    filter: brightness(1.1);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: perspective(1000px) 
               rotateY(calc((var(--mx) - 50) * 0.1deg))
               rotateX(calc((var(--my) - 50) * -0.1deg));
}

/* Basic 3D Shine */
.holo-basic-3d .specular:before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(
        circle at var(--mx) var(--my),
        rgba(255, 255, 255, 0.5) 0%,
        transparent 60%
    );
    mix-blend-mode: soft-light;
    opacity: 0.4;
    animation: basic3dPulse 4s ease infinite;
}

@keyframes basic3dPulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.6;
    }
} 
/* Reverse Holo Trainer Effect - Enhanced with Parallax Animations */
.holo-reverse-trainer .specular {
    --space: 40px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: 
        repeating-linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.1) 0px,
            rgba(255, 255, 255, 0.2) 1px,
            rgba(255, 255, 255, 0.1) 2px,
            transparent 3px
        ),
        linear-gradient(
            90deg,
            rgba(255, 192, 203, 0.3),
            rgba(255, 218, 185, 0.3),
            rgba(255, 228, 196, 0.3)
        );
    background-size: 100% var(--space), 200% 200%;
    opacity: 0.5;
    mix-blend-mode: color-dodge;
    filter: brightness(1.2) contrast(1.2);
    animation: reverseTrainerFlow 8s linear infinite, reverseTrainerSweep 4s ease infinite;
}

/* Combined Animations for Flow and Sweep */
@keyframes reverseTrainerFlow {
    0% {
        background-position: 0 0, 0% 0%;
    }
    50% {
        background-position: calc(var(--space) * 5) 0, 100% 0%;
    }
    100% {
        background-position: 0 calc(var(--space) * 10), 200% 0%;
    }
}

@keyframes reverseTrainerSweep {
    0%, 100% {
        opacity: 0.5;
        filter: brightness(1.2) contrast(1.2);
    }
    50% {
        opacity: 0.7;
        filter: brightness(1.4) contrast(1.4);
    }
} 
/* Reverse Holo Stage 1 Effect - Enhanced with Parallax Animations */
.holo-reverse-stage1 .specular {
    --space: 40px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: 
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.1) 0px,
            rgba(255, 255, 255, 0.15) 1px,
            rgba(255, 255, 255, 0.1) 2px,
            transparent 3px
        ),
        linear-gradient(
            135deg,
            rgba(135, 206, 235, 0.2),
            rgba(176, 224, 230, 0.2),
            rgba(173, 216, 230, 0.2)
        );
    background-size: 100% var(--space), 200% 200%;
    opacity: 0.4;
    mix-blend-mode: color-dodge;
    filter: brightness(1.1) contrast(1.2);
    animation: reverseStage1Flow 8s linear infinite, reverseStage1Sweep 5s ease infinite;
}

/* Combined Animations for Flow and Sweep */
@keyframes reverseStage1Flow {
    0% {
        background-position: 0 0, 0% 0%;
    }
    50% {
        background-position: calc(var(--space) * 5) calc(var(--space) * 5), 150% 150%;
    }
    100% {
        background-position: calc(var(--space) * 10) calc(var(--space) * 10), 200% 200%;
    }
}

@keyframes reverseStage1Sweep {
    0%, 100% {
        opacity: 0.4;
        filter: brightness(1.1) contrast(1.2);
    }
    50% {
        opacity: 0.6;
        filter: brightness(1.3) contrast(1.4);
    }
} 
/* Reverse Holo Stage 2 Effect */
.holo-reverse-stage2 .specular {
    --space: 40px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: 
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.1) 0px,
            rgba(255, 255, 255, 0.15) 1px,
            rgba(255, 255, 255, 0.1) 2px,
            transparent 3px
        ),
        linear-gradient(
            135deg,
            rgba(255, 215, 0, 0.2),
            rgba(255, 223, 0, 0.2),
            rgba(255, 200, 0, 0.2)
        );
    background-size: 100% var(--space), 200% 200%;
    opacity: 0.4;
    mix-blend-mode: color-dodge;
    filter: brightness(1.1) contrast(1.2);
    animation: reverseStage2Flow 8s linear infinite;
}

/* Stage 2 evolution pattern */
.holo-reverse-stage2 .specular:before {
    content: "";
    position: absolute;
    inset: 0;
    background: 
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion2.webp"),
        radial-gradient(
            circle at 50% 50%,
            rgba(255, 255, 255, 0.6) 0%,
            rgba(255, 255, 255, 0.2) 20%,
            transparent 60%
        );
    background-blend-mode: overlay;
    mix-blend-mode: soft-light;
    opacity: 0.5;
    animation: reverseStage2Sweep 5s ease infinite;
}

@keyframes reverseStage2Flow {
    0% {
        background-position: 0 0, 0% 0%;
    }
    100% {
        background-position: calc(var(--space) * -10) calc(var(--space) * 10), 200% 200%;
    }
}

@keyframes reverseStage2Sweep {
    0%, 100% {
        opacity: 0.5;
        filter: brightness(1) saturate(1);
    }
    50% {
        opacity: 0.7;
        filter: brightness(1.2) saturate(1.2);
    }
} 
Shiny Pokemon container styles
.shiny-container {
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
}

/* Base holographic background */
.shiny-container::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.5;
  mix-blend-mode: normal;
  z-index: 0;
}

/* Inherit the selected holographic pattern */
.shiny-container.holo-galaxy::before {
  background: var(--galaxy-gradient);
}

/* Make sure content stays above the effect */
.shiny-container > * {
  position: relative;
  z-index: 1;
}



/* Theme Variables - Base */
:root {
    --primary-color: #E3350D;
    --background: #FFFFFF;
    --foreground: #000000;
    --border-color: #000000;
    --card-bg: #FFFFFF;
    --card-border: #E3350D;
    --holo-effect: basic-glare;
}

/* Pokéball Theme */
[data-theme="pokeball"] {
    --primary-color: #E3350D;
    --background: #FFFFFF;
    --foreground: #000000;
    --border-color: #000000;
    --card-bg: #F0F0F0;
    --card-border: #E3350D;
    --holo-effect: basic-glare;
}

/* Great Ball Theme */
[data-theme="great-ball"] {
    --primary-color: #0051B5;
    --background: #1A1A1A;
    --foreground: #FFFFFF;
    --border-color: #3994F6;
    --card-bg: rgba(0, 81, 181, 0.5);
    --card-border: #3994F6;
    --holo-effect: basic-3d;
}

/* Ultra Ball Theme */
[data-theme="ultra-ball"] {
    --primary-color: #000000;
    --background: #1A1A1A;
    --foreground: #FFD700;
    --border-color: #FFD700;
    --card-bg: rgba(42, 42, 42, 0.8);
    --card-border: #FFD700;
    --holo-effect: classic;
}

/* Master Ball Theme */
[data-theme="master-ball"] {
    --primary-color: #7B2682;
    --background: #2A0934;
    --foreground: #FFFFFF;
    --border-color: #FF69B4;
    --card-bg: rgba(123, 38, 130, 0.6);
    --card-border: #FF69B4;
    --holo-effect: galaxy;
}

/* Safari Ball Theme */
[data-theme="safari-ball"] {
    --primary-color: #4A7B3B;
    --background: #2D4A24;
    --foreground: #D2B48C;
    --border-color: #8B4513;
    --card-bg: rgba(74, 123, 59, 0.5);
    --card-border: #8B4513;
    --holo-effect: common;
}

/* Quick Ball Theme */
[data-theme="quick-ball"] {
    --primary-color: #FFD700;
    --background: #2A2A2A;
    --foreground: #FFFFFF;
    --border-color: #4169E1;
    --card-bg: rgba(255, 215, 0, 0.3);
    --card-border: #4169E1;
    --holo-effect: reverse;
}

/* Timer Ball Theme */
[data-theme="timer-ball"] {
    --primary-color: #CC0000;
    --background: #1A1A1A;
    --foreground: #FFFFFF;
    --border-color: #FFD700;
    --card-bg: rgba(204, 0, 0, 0.4);
    --card-border: #FFD700;
    --holo-effect: cosmos;
}

/* Cherish Ball Theme */
[data-theme="cherish-ball"] {
    --primary-color: #FF0000;
    --background: #800000;
    --foreground: #FFD700;
    --border-color: #FFD700;
    --card-bg: rgba(255, 0, 0, 0.3);
    --card-border: #FFD700;
    --holo-effect: amazing;
}

/* Rayquaza Theme */
[data-theme="rayquaza-burst"] {
    --primary-color: #2E8B57;
    --background: #1A472A;
    --foreground: #FFFFFF;
    --border-color: #FFD700;
    --card-bg: rgba(46, 139, 87, 0.4);
    --card-border: #98FB98;
    --holo-effect: v;
}

/* Eternatus Theme */
[data-theme="eternatus-void"] {
    --primary-color: #800080;
    --background: #000000;
    --foreground: #FF69B4;
    --border-color: #FF1493;
    --card-bg: rgba(128, 0, 128, 0.3);
    --card-border: #FF1493;
    --holo-effect: vmax;
}

/* Arceus Theme */
[data-theme="arceus-divine"] {
    --primary-color: #FFD700;
    --background: #FFFFFF;
    --foreground: #4A4A4A;
    --border-color: #DAA520;
    --card-bg: rgba(255, 215, 0, 0.2);
    --card-border: #DAA520;
    --holo-effect: vstar;
}

/* Ho-Oh Theme */
[data-theme="ho-oh-spectrum"] {
    --primary-color: #FF4500;
    --background: #FDF5E6;
    --foreground: #8B0000;
    --border-color: #FF69B4;
    --card-bg: rgba(255, 69, 0, 0.3);
    --card-border: #FF69B4;
    --holo-effect: rainbow;
}

/* Holographic Theme Modifiers */
.shader {
    --holo-primary: var(--primary-color);
    --holo-secondary: var(--card-border);
    --holo-shine: var(--foreground);
}

/* Holographic Preview */
.holo-preview {
    width: 150px;
    height: 150px;
    margin: 1rem;
    padding: 0;
}

/* Component Styles */
.card,
.profile-preview,
.nav-profile-icon,
.profile-page-icon,
.pokebox {
    background-color: var(--card-bg);
    color: var(--foreground);
    border-color: var(--border-color);
}

.specular {
    background-color: var(--holo-primary);
    mix-blend-mode: color-dodge;
}

/* Additional Theme Components */
.theme-header {
    background-color: var(--primary-color);
    color: var(--foreground);
}

.theme-content {
    background-color: var(--background);
}

.theme-card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

.nav-bar {
    background-color: var(--primary-color);
    color: var(--foreground);
}

/* Holographic Effects */
.holo-overlay {
    background: linear-gradient(
        to bottom right,
        var(--holo-primary),
        var(--holo-secondary)
    );
    opacity: 0.5;
    mix-blend-mode: overlay;
}

.pokemon-silhouette {
    position: relative;
    width: 96px;
    height: 96px;
}

.pokemon-silhouette img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.pokemon-silhouette svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
/* Theme Variables - These will be set by the theme system */
:root {
    --primary-color: var(--theme-primary-color); /* References theme's primary color */
    --secondary-color: var(--theme-secondary-color); /* References theme's secondary color */
    --parallax-background-image: var(--theme-background-image); /* References theme's background image */
}

/* Parallax Container - Reusable for Multiple Components */
.parallax-container {
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
    perspective: 1000px;
}

.parallax-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    transform: translateZ(-1px) scale(2);
    animation: parallaxMove 40s linear infinite;
}

@keyframes parallaxMove {
    0% {
        transform: translateZ(-1px) scale(2) translateX(0) translateY(0);
    }
    50% {
        transform: translateZ(-1px) scale(2) translateX(-10%) translateY(-10%);
    }
    100% {
        transform: translateZ(-1px) scale(2) translateX(0) translateY(0);
    }
}

/* Example Component Styling */
.navigation {
    background-color: var(--primary-color);
    /* Other styles */
}

.profile-preview,
.nav-profile-icon,
.profile-page-icon,
.pokebox {
    border: 2px solid var(--secondary-color);
    /* Other styles */
}