body {
    background-color: var(--theme-black);
    margin: 0px 0px 0px 0px;

    max-width:100%;
    overflow-x:hidden;

    width: 100%;
}

.centerBlock {
  display:block;

  width: 50%;

  margin: 0px auto 0px auto;
}

.container {
  display: block;

  background: var(--theme-primary-2-base);
  color: var(--theme-black);
  border-radius: 10px;
  box-shadow: 8px 8px 8px var(--theme-black);
  
  font-size: 18px;
  word-wrap: break-word;

  margin: 8px auto 8px auto;
  padding:10px 10px 10px 10px;

  overflow:hidden;

  &.green {
    background-color:var(--theme-primary-1-base);
  }
}

.container-button {
  display:block;

  background: var(--theme-primary-2-base);
  color: var(--theme-black);
  border-radius: 10px;

  font-size: 18px;
  font-style: italic;
  text-decoration: none;

  margin: 16px auto 16px auto;
  padding:10px 20px 10px 15px;

  overflow:hidden;

  &:hover {
    background: var(--theme-primary-2-light)
  }

  &.green {
    background-color:var(--theme-primary-1-base);

    &:hover {
      background-color: var(--theme-primary-1-light);
    }  
  }
}

.header-container {
  display: block;
  position: relative;

  min-width: fit-content;

  background-color: var(--theme-accent-1-base);
  border-color: var(--theme-white);
  border-style: solid;
  border-radius: 12px;

  color: var(--theme-white);
  text-align: center;

  line-height: 0px;
  padding: 8px 0px 8px 0px;
  margin: 32px auto 32px auto;

  mask-image: linear-gradient(#FFFFFF, #FFFFFF);
  overflow:hidden;
}


.container-block {
  & .container-button {
    display:flex;
  
    margin: 0px auto 16px auto;
  
    flex-grow: 1;
  }

  & h3 {
    color: var(--theme-white);
    font-style: italic;
    margin-bottom: 0px;
  }
}


.discord {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto;

  width: fit-content;
  margin: auto;

  background-color: rgb(86, 98, 246);
  border-radius:10px;

  margin: 16px auto 16px auto;
  padding:10px 20px 10px 15px;

  color:var(--theme-white);
  font-size: 24px;

  &:hover {
    background-color: rgba(122, 130, 252);
  }

  & img {
    height:32px;
    width:32px;
    transform:translate(0px, 4px);

    border-radius: 5px;

    margin-right: 16px;
    padding:2px;
  }
}

& .scan-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  width: 80%;
  row-gap: 16px;
  column-gap: 16px;

  border: 3px solid rgb(var(--theme-accent-2-base-rgb) / 80%);
  background: linear-gradient(
    rgb(var(--theme-accent-2-base-rgb) / 0.3),
    rgb(var(--theme-accent-2-base-rgb) / 0.3) 3px,
    rgb(var(--theme-accent-2-base-rgb) / 15%) 3px,
    rgb(var(--theme-accent-2-base-rgb) / 15%) 9px
  );
  background-size: 100% 9px;
  border-radius: 8px;

  color:var(--theme-white); 
  justify-content: center;

  margin: 8px 8px 8px 8px;
  padding:16px;
}

& .database-container {
  position: relative;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  width: 80%;

  background-color: var(--theme-black);
  border: outset 3px var(--theme-accent-2-light);
  background-image: var(--theme-background-container);
  animation: pan-1 4s linear infinite;

  padding-top: 32px;
  padding-bottom: 8px;
  margin: 8px auto 32px auto;

  overflow-y: scroll;


  justify-content: center;
  
  & .database-search {
    position: sticky;
    top: 0px;
    left: 0;

    width: calc(100%);
    height: 32px;

    background-color: var(--theme-gray-dark);
    border-color: var(--theme-accent-2-dark);
    border-width: 0px 0px 2px 0px;

    font-family: "BW";
    font-size: 24px;
    color: var(--theme-white);

    padding-left: 8px;
    padding-right: 8px;

    z-index: 5;

    &:focus {
      border-color: var(--theme-accent-2-base);
      outline-style: none;
    }
  }

  & .database-load-cover {
    position: absolute;
    top: 0;
    left: 0;

    width: calc(100% - 32px);
    height: calc(100% + 8px);

    padding: 16px;
    font-size: 32px;
    color: var(--theme-white);
    background-color: var(--theme-black);

    opacity: 1;
    transition: opacity 2s;
    z-index: 6;
  }

}


& .database-header {
  
  width:calc(80% - 13px);
  display:flex;
  padding:0px;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:stretch;
  justify-content:center;

  background: linear-gradient(0deg, var(--theme-gray-dark) 0%, var(--theme-gray-base) 100%);

  border: outset 2px var(--theme-gray-dark);

  margin: 8px auto 0px auto;
  padding: 8px;

  & .filter {
    color: var(--theme-white);

    padding: 4px;
    margin: 0px;

    text-align: right;
  }
}


.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  column-gap: 16px;

  justify-content: center;
  align-items: center;
}

.column {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;

  row-gap: 16px;

  justify-content: center;
  align-items: center;
}

a {
  text-decoration: none;
}

#particles-js {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -100;
  overflow: hidden;
  pointer-events: none;
}

.scrolling-background-1, .scrolling-background-2 {
  position: fixed;
  top: 0px;
  height: 100vh;
  width: 100vw;

  will-change: background-position;
}

.scrolling-background-1 {
  background-image: var(--theme-background-main);
  animation: pan-1 4s linear infinite;
  z-index: -2;
  opacity: 0.2;
}

.scrolling-background-2 {
  background-image: url('/image/background/bg_lines_2.png');
  animation: pan-2 4s linear infinite;
  z-index: -1;
  opacity: 0.4;
}

@keyframes pan-1 {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 132px 132px;
  }
}

@keyframes pan-2 {
  0% {
    background-position: 264px 264px;
  }
  100% {
    background-position: 0% 0%;
  }
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--theme-accent-2-dark);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: transparent;
  border: var(--theme-accent-2-light) 2px solid;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  border-color: var(--theme-accent-2-base) 2px solid;
}


h2 {
  display: block;
  
  font-family: "BW";
  font-weight: 600;
  color: var(--theme-white);
  text-align: center;

  font-size: 48px;
}

h1 {
  display: block;
  
  font-family: "BW";
  font-weight: 600;
  color: var(--theme-white);
  text-justify: center;

  font-size: 64px;
}

.arrow {
  border: solid var(--theme-accent-2-dark);
  border-width: 0 6px 6px 0;
  display: inline-block;

}

.right-arrow {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left-arrow {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}


button {
  background-color: var(--theme-accent-2-light);
  border: outset 2px var(--theme-accent-2-dark);

  font-family: "BW";
  font-size: 32px;

  padding: 8px;

  &:active {
    border: inset 4px var(--theme-gray-dark);
    background-color: var(--theme-accent-2-dark);
  }

  &.pink {
    border-color:var(--theme-accent-1-base);
    background-color:var(--theme-accent-1-light);
  }

  &:disabled {
    border: inset 4px var(--theme-gray-base);
    background-color: var(--theme-gray-light);
  }
}

#screenOverlay {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  justify-content: center;

  background-color: rgb(0, 0, 0, 0.8);
  transition: opacity 0.2s;

  z-index: 997;
}

/* Base row style */
#pullResults tr {
  opacity: 0;
  transform: scale(0.9);
}

.history-container {
  max-height: 400px;   /* adjust ~10–20 rows depending on row height */
  overflow-y: auto;    /* vertical scroll */
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-top: 10px;
}

/* Optional: sticky header */
.history-container thead th {
  position: sticky;
  top: 0;
  background: #222;
  color: #fff;
  z-index: 2;
}

/* Common: quick fade */
tr.common {
  animation: fadeIn 0.3s ease-out forwards;
}

/* Rare: glowing blue */
tr.rare {
  animation: glowBlue 0.6s ease-out forwards;
}

tr.legendary {
  position: relative;
  animation: glowGold 1s ease-out forwards;
  overflow: hidden; /* keep the sparkle inside the row */
}

tr.legendary::after {
  content: "";
  position: absolute;
  top: 0; left: -50%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,200,0.8), transparent);
  transform: skewX(-20deg);
  animation: sparkle 5s ease-in-out infinite;
}

@keyframes sparkle {
  0%   { left: -50%; }
  50%  { left: 110%; }
  100% { left: 110%; }
}

/* error: glitchy flicker with RGB channel split */
tr.error {
  background-color: rgba(20, 0, 30, 0.9);
  color: #eee;
  position: relative;
  animation: glitchIn 1.5s steps(2, end) forwards, glitchFlicker 1s infinite;
  overflow: hidden;
}

tr.error td {
  position: relative;
  animation: glitchIn 1.5s steps(2, end) forwards, glitchFlicker 1s infinite;
  background-color: rgba(20,0,30,0.9);
  color: #eee;
  overflow: hidden;
}

/* RGB channel clones for each cell */
tr.error td::before,
tr.error td::after {
  content: attr(data-glitch);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0.6;
  pointer-events: none;
}

tr.error td::before {
  color: red;
  transform: translate(-1px, 0);
  mix-blend-mode: screen;
  animation: glitchRGB 0.5s infinite;
}

tr.error td::after {
  color: cyan;
  transform: translate(1px, 0);
  mix-blend-mode: screen;
  animation: glitchRGB 0.7s infinite reverse;
}

/* --- Animations --- */

/* entrance glitch */
@keyframes glitchIn {
  0%   { opacity: 0; transform: scale(0.6) skewX(-15deg); }
  20%  { opacity: 1; transform: scale(1.2) skewX(10deg); }
  40%  { opacity: 0.4; transform: scale(0.9) skewX(-5deg); }
  60%  { opacity: 1; transform: scale(1) skewX(0); }
  80%  { opacity: 0.6; transform: scale(1.05) skewX(3deg); }
  100% { opacity: 1; transform: scale(1) skewX(0); }
}

/* constant flicker */
@keyframes glitchFlicker {
  0%, 100% { opacity: 1; transform: none; }
  10% { opacity: 0.9; transform: translateX(-1px); }
  20% { opacity: 1; }
  30% { opacity: 0.95; transform: translateX(1px); }
  55% { opacity: 0.85; transform: translateY(-1px); }
  85% { opacity: 0.9; transform: translateY(1px); }
}

/* RGB channel jitter */
@keyframes glitchRGB {
  0% { transform: translate(0,0); opacity:0.6; }
  20% { transform: translate(-3px,-1px); opacity:0.4; }
  40% { transform: translate(2px,2px); opacity:0.7; }
  60% { transform: translate(-2px,1px); opacity:0.5; }
  80% { transform: translate(1px,-2px); opacity:0.6; }
  100% { transform: translate(0,0); opacity:0.6; }
}

/* --- Animations --- */

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

@keyframes glowBlue {
  0% { opacity: 0; transform: scale(0.8); box-shadow: 0 0 0px blue; }
  100% { opacity: 1; transform: scale(1); box-shadow: 0 0 15px blue; }
}

@keyframes glowGold {
  0% { opacity: 0; transform: scale(0.6); box-shadow: 0 0 0px gold; }
  100% { opacity: 1; transform: scale(1); box-shadow: 0 0 25px gold; }
}

@keyframes glowPurple {
  0% { opacity: 0; transform: rotate(-10deg) scale(0.5); box-shadow: 0 0 0px purple; }
  100% { opacity: 1; transform: rotate(0) scale(1); box-shadow: 0 0 35px purple; }
}

@keyframes pulseDark {
  from { box-shadow: 0 0 10px purple, inset 0 0 5px black; }
  to   { box-shadow: 0 0 30px magenta, inset 0 0 20px black; }
}