@font-face {
  font-family: 'Sysfont';
  src: url('fonts/sysfont.woff2') format('woff2'),
  url('fonts/sysfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Arial Narrow';
  src: url('fonts/arial-narrow.woff2') format('woff2'),
       url('fonts/arial-narrow.woff') format('woff');
}

/*Basic Settings */
body, select{
  font-family: "Arial", sans-serif;
  font-size: 16px;
  
  align-items: center;
  justify-content: center;
  background-color: #2A2C30;
  color: #FFFFFF;
  
}

:root {
  --bubbleTiming: cubic-bezier(0.5, 0.15, 0.25, 1.75);
  --shadow-base-offset: .5rem;          /* matches v2 ::after top/left offset */
  --shadow-hover-shift: 0.35rem;       /* matches v2 ::after hover translate */
  --shadow-active-shift-x: 0.4rem;     /* matches v2 ::after active translate X */
  --shadow-active-shift-y: 0.45rem;    /* matches v2 ::after active translate Y */
  --text-shadow-blur: 0.05rem;         /* text shadow blur radius */
  --bubble-hover-scale: 1.06;
  --bubble-active-scale: 1.02;
  --shadow-hover-counterscale: calc(1 / var(--bubble-hover-scale));
  --shadow-active-counterscale: calc(1 / var(--bubble-active-scale));
  --text-hover-scale: 1.015;
  --text-active-scale: 1.02;
  --text-hover-counterscale: calc(1 / var(--text-hover-scale));
  --text-active-counterscale: calc(1 / var(--text-active-scale));
  --reflect-inset: 0.rem;      /* how far inside from the pill edge */
  --reflect-thickness: 0.15rem;  /* thickness of the glossy stroke */
  --reflect-arc-start: 312deg; /* where the arc begins around the circle */
  --reflect-arc-sweep: 40deg;  /* how wide the arc is (reduce to make span smaller) */
}
.bubble-wrapper {
  padding: 15px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  min-width: auto;
  height: 1.25rem;
  padding: 0 .85rem;
  border-radius: 1.5rem;
  transform-style: preserve-3d;
  transition: transform 0.2s var(--bubbleTiming), box-shadow 0.2s var(--bubbleTiming), width 0.2s var(--bubbleTiming), height 0.2s var(--bubbleTiming);
  will-change: transform;
  z-index: 0;
  animation: float 4s ease-in-out infinite;
 /* clip reflection to the pill shape */
  /* stronger outer drop-shadow + darker insets */

  box-shadow: 0.14rem 0.14rem 0.6rem rgba(0,0,0,0.55),
    0 -0.06rem 0.1rem rgba(255,255,255,0.92) inset,
    0 -0.15rem 0.4rem rgba(177, 222, 248, 0.95) inset,
    0 0.05rem 0.05rem rgba(177, 222, 248, 0.95) inset,
    0.05rem 0 0.1rem rgba(255,255,255,0.95) inset,
    -0.05rem 0 0.1rem rgba(255,255,255,0.95) inset,
    0 0.1rem 0.4rem rgba(177, 222, 248, 0.95) inset; 
}

.bubble-text {
  color: white;
  font-size: 0.5rem;
  user-select: none;
  pointer-events: none;
  transition: transform 0.1s var(--bubbleTiming);
  position: relative; /* ensure text is above the reflection */
  z-index: 1;
  /* bubble handles scaling; we'll move shadow to ::before */
}

/* Replace text-shadow animation with a transform-driven shadow layer so it matches bubble/::after exactly */
.bubble .bubble-text::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,0.3);
  filter: blur(var(--text-shadow-blur));
  transform: scale(1) translate(var(--shadow-base-offset), var(--shadow-base-offset));
  transition: transform 0.1s var(--bubbleTiming);
  z-index: 0; /* sits under the real text (z-index:1) */
  pointer-events: none;
}

.bubble .bubble-text { text-shadow: none; }
.bubble:hover .bubble-text { text-shadow: none; transform: scale(var(--text-hover-scale)); }
.bubble:active .bubble-text { text-shadow: none; transform: scale(var(--text-active-scale)); }

/* shadow movement */
.bubble:hover .bubble-text::before {
  transform: scale(var(--shadow-hover-counterscale)) scale(var(--text-hover-counterscale)) translate(
    calc(var(--shadow-base-offset) + var(--shadow-hover-shift)),
    calc(var(--shadow-base-offset) + var(--shadow-hover-shift))
  );
}
.bubble:active .bubble-text::before {
  transform: scale(var(--shadow-active-counterscale)) scale(var(--text-active-counterscale)) translate(
    calc(var(--shadow-base-offset) + var(--shadow-active-shift-x)),
    calc(var(--shadow-base-offset) + var(--shadow-active-shift-y))
  );
}

/* Shared reflection highlight */
/* Reflection placement override: center on left cap, robust to padding/width */
.bubble:before {
  content: "";
  position: absolute;
  height: 100%;           /* match bubble height */
  aspect-ratio: 1 / 1;    /* keep it a perfect circle */
  left: 0;                /* anchor at the left padding edge */
  top: 0;                 /* anchor at top */
  transform: translate(10%, 10%); /* center on cap and lift slightly */
  border-radius: 50%;
  /* arc in the upper-left quadrant */
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0 calc(var(--reflect-arc-start)),
    rgba(255,255,255,0.95) var(--reflect-arc-start) calc(var(--reflect-arc-start) + var(--reflect-arc-sweep)),
    transparent calc(var(--reflect-arc-start) + var(--reflect-arc-sweep)) 360deg
  );
  /* thin ring mask */
  -webkit-mask: radial-gradient(circle closest-side,
    transparent calc(100% - var(--reflect-thickness, 0.2rem)),
    #000 calc(100% - var(--reflect-thickness, 0.2rem))
  );
  mask: radial-gradient(circle closest-side,
    transparent calc(100% - var(--reflect-thickness, 0.2rem)),
    #000 calc(100% - var(--reflect-thickness, 0.2rem))
  );
  z-index: 0;
  pointer-events: none;
}

/* v2 only */
.bubble.v2 { 
  background-image: inherit;
  transition: transform 0.1s var(--bubbleTiming), box-shadow 0.2s var(--bubbleTiming), width 0.2s var(--bubbleTiming), height 0.2s var(--bubbleTiming);
}
.bubble.v2:after {
  content: "";
  position: absolute;
  top: var(--shadow-base-offset);
  left: var(--shadow-base-offset);
  right: calc(var(--shadow-base-offset) * -1);
  bottom: calc(var(--shadow-base-offset) * -1);
  border-radius: 1.35rem;
  background: transparent;
  box-shadow: 0 0 0 0.0525rem rgba(0,0,0,0.6);
  filter: blur(4px);
  transform: translate3d(0,0,-1px);
  z-index: -2;
  transition: transform 0.1s var(--bubbleTiming);
}
.bubble.v2:hover { animation: none; transform: scale(var(--bubble-hover-scale)); }
.bubble.v2:hover:after { transform: scale(var(--shadow-hover-counterscale)) translate3d(var(--shadow-hover-shift), var(--shadow-hover-shift), -1px); }
.bubble.v2:active { animation: none; transform: scale(var(--bubble-active-scale)) scaleY(0.9); }
.bubble.v2:active:after { transform: scale(var(--shadow-active-counterscale)) translate3d(var(--shadow-active-shift-x), var(--shadow-active-shift-y), -1px); }

/* Float animation (used by .bubble) */
@keyframes float {
  from, to { transform: translate(0, 1%); }
  25% { transform: translate(-1%, 0); }
  50% { transform: translate(0, -1%); }
  75% { transform: translate(1%, 0); }
}

/*-----------------------------------------
  bubble input overlay for accessibility and click handling
-----------------------------------------*/
.bubble {
  position: relative; /* ensure absolute children position correctly */
}
.bubble .bubble-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  opacity: 0; /* keep visuals from the .bubble and .bubble-text */
}
/* Mirror the active animation when the input is pressed */
.bubble.v2:has(.bubble-input:active) { animation: none; transform: scale(var(--bubble-active-scale)) scaleY(0.9); }
.bubble.v2:has(.bubble-input:active):after { transform: scale(var(--shadow-active-counterscale)) translate3d(var(--shadow-active-shift-x), var(--shadow-active-shift-y), -1px); }
/* Optional focus ring for keyboard users */
.bubble:has(.bubble-input:focus-visible) { outline: 2px solid rgba(177, 222, 248, 0.8); outline-offset: 2px; }


/* #list_sections input{
  font-family: "Arial", sans-serif;
  font-size: 12px;
  height: 24px;
  line-height: normal;

  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;

  flex-flow: column;
  margin: 0 auto;
  padding: 2px 10px;
  border-radius: 18px;
  text-align: center;
  color:#B0B0B1;
  outline: 3px solid #18191B;
  background-color: #2B2D31;
  box-shadow:none;
  border: none;
  margin-bottom: -7px;
  transition: background-color 0.15s ease, color 0.15s ease, outline 0.15s ease;
  box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.2);
}
#list_sections input:hover{
  background-color: #3C3E44;
  color: #C4C4C5;
  outline: 3.5px solid #5F646D;
  box-shadow: 2px 2px 5px rgba(100, 100, 100, 0.05);
} */
.section-btn-cleared {
    box-shadow: 0.14rem 0.14rem 0.6rem rgba(0,0,0,0.55),
    0 -0.06rem 0.1rem rgba(255,255,255,0.92) inset,
    0 -0.15rem 0.4rem rgba(33, 192, 81, 0.95) inset,
    0 0.05rem 0.05rem rgba(33, 192, 81, 0.95) inset,
    0.05rem 0 0.1rem rgba(255,255,255,0.95) inset,
    -0.05rem 0 0.1rem rgba(255,255,255,0.95) inset,
    0 0.1rem 0.4rem rgba(33, 192, 81, 0.95) inset;
}


textarea{
  font-family: "Arial", sans-serif;
  font-size: 14px;
}

/*Layer */
.layer{
  visibility: hidden;
  position: fixed;
  left: 50%; top: 15px;
  transform: translateX(-50%);
  width: 780px; height: 780px;
  border-radius: 20px;
  padding: 8px 12px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
  z-index: 999;
}
/*Centered */
.center{
text-align: center;
}
/*Small letters */
.small{
  font-size: 12px;
}

#title{
  font-size: 42px;
  font-weight: thinner;
  font-family: "Sysfont", Arial, sans-serif;
  margin-bottom: 0px;
  margin-top: 20px;
  color: #FFFFFF;
  text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.2);
}
.subtitle{
  font-family: "Arial Narrow", sans-serif;
  font-size: 16px;
  color: #B0B0B1;
  justify-content: center;
  margin-top: 0;
  font-style: italic;
  font-weight: lighter;
  text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.2);
  margin-bottom: -30px;
}

/* main menu headers */
.section-group{ 
  font-size: 22px;
  font-family: "Sysfont", Arial, sans-serif;
  margin-bottom: 5px;
  color: #F2F2F2;
  font-weight: lighter;
  text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.4);
}
.header-all-cleared {
  color: #3ABB5D;
  transition: color 0.3s ease
}

#header{
  font-size: 22px;
  font-family: "Sysfont", Arial, sans-serif;
  margin-bottom: 5px;
  color: #F2F2F2;
  font-weight: lighter;
  text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.4);
}
#header2{
  font-size: 16px;
  font-family: Arial, sans-serif;
  margin-bottom: 5px;
  color: #F2F2F2;
  font-weight: normal;
  text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.4);
}
#subheader{
  font-family: "Arial", sans-serif;
  font-size: 14px;
  color: #B0B0B1;
  justify-content: center;
  margin-top: -2px;
  text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.2);
}


#list_sections{
  background-color: #26272c44;
  backdrop-filter: blur(10px);
  outline: 5px solid #b4b4b441;
  height: fit-content;
  text-align: center;
  
}
#list_problems{
  background-color: #363941;
  text-align: center;
}
#perform{
  background-color: #26272c44;
  backdrop-filter: blur(20px);
  outline: 5px solid #b4b4b441;
  text-align: center;
  
}
#preferences{
  background-color: #26272c44;
  backdrop-filter: blur(10px);
  outline: 5px solid #b4b4b441;
  text-align: center;
  align-items: center;
}


.prefs-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 40px;
  row-gap: 0px;
  height: 100%;
}
.prefs-container button {
  border: none;
  /* border-bottom: 1px solid #444; */
  background: #2b2d3141;
  color: #fff;
  width: 180px;
  margin-bottom: 5px;
  padding: 3px 0;
  font-size: 16px;
  cursor: pointer;
  justify-content: right;
  margin-right: 15px;
}


.key-setting-row:first-of-type {
  border-top: 1px solid #585858;
  /* padding-top: 5px; */
}

.key-setting-row {
  border: none;
  border-bottom: 1px solid #585858;
  /* background: #222; */
  /* color: #fff; */

  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 710px; 
  margin-bottom: 6px;
  cursor: pointer;
  padding-top: 5px;

  position: relative; 
  overflow: hidden;   

}

.key-setting-row::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    0deg, 
    transparent, 
    transparent 30%, 
    #56565656
  );
  transform: rotate(-45deg);
  transition: all 0.5s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.key-setting-row:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}
.key-setting-row:hover {
  transform: scale(1.03);
  transition: all 0.2s ease;
  /* box-shadow: 0 0 20px rgba(0,255,255,0.25); */
  z-index: 2;
}



/* .key-setting-row:hover {
  background: #3d3f42;
  color: #fff;
  transition: background-color 0.1s ease;
} */

.key-setting-row span {
  text-align: left;
  padding-left: 15px;
}

.key-setting-row button {
  text-align: center;
  min-width: 100px; 
  transition: outline 0.2s ease;
}
.key-setting-row button:hover {
  outline: 1px solid #5F646D;
  box-shadow: 2px 2px 5px rgba(100, 100, 100, 0.05);
}



/* .prefs-container button:last-of-type {
  border-bottom: none;
} */

.prefs-title {
  font-size: 28px;
  font-weight: thinner;
  font-family: "Sysfont", Arial, sans-serif;
  margin-bottom: 15px;
  color: #FFFFFF;
  text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.2);
}


.prefs-appcan {
  font-family: "Arial", sans-serif;
  font-size: 12px;
  height: 24px;
  line-height: normal;


  cursor: pointer;

  flex-flow: column;
  margin: 0 auto;
  margin-right:5px;
  margin-left:5px;
  padding: 2px 10px;
  border-radius: 18px;
  text-align: center;
  color:#B0B0B1;
  outline: 3px solid #18191B;
  background-color: #2B2D31;
  box-shadow:none;
  border: none;
  margin-bottom: -7px;
  transition: background-color 0.15s ease, color 0.15s ease, outline 0.15s ease;
  box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.2);
}
.prefs-appcan:hover{
  background-color: #3C3E44;
  color: #C4C4C5;
  outline: 3px solid #5F646D;
  box-shadow: 2px 2px 5px rgba(100, 100, 100, 0.05);
}

/* .slider-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 640px; 
  margin-bottom: 6px;
} */
.slider-setting-row {
  display: flex;
  align-items: center;
  width: 700px; 
  margin-bottom: 15px;
  gap: 10px;
  justify-content: space-between;
  background: #2b2d3141;
  min-height: 30px;
}
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 600px;
  margin: 0;
  height: 8px;
  background: #7a7a7a;
  fill: black;
  cursor: pointer;
  border-radius: 5px;
}
.slider-label {
  font-size: 14px;
  color: #FFFFFF;
  margin-left: 0;      
  margin-right: 20px;  
  display: inline-block;
  min-width: 60px;     
}


.slider-value {
  font-size: 14px;
  color: #FFFFFF;
  margin-left: 4px;
  margin-right: 0;
  display: inline-block;
  min-width: 0;
  width: 36px;
  white-space: nowrap;
}
.slider-value-edit-input {
  font-size: 14px;
  width: 36px !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  /* color: #fff;
  background: #222; */
  border: 0;
  border-radius: 0;
  text-align: right;
  padding-right: 8px;
}

.slider-value-edit-input:focus {
  /* outline: .5px solid #888; */
  outline: none;
  border-bottom: .5px solid #888;
  /* border-radius: 4px; */
  box-shadow: 2px 2px 5px rgba(100, 100, 100, 0.05);
  padding-bottom: 0;
}
.slider-value-edit-input::-webkit-inner-spin-button,
.slider-value-edit-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin:0;
  outline:none;
}
.slider-value-label {
  font-size: 14px;
  color: #B0B0B1;
  white-space: nowrap;
  display: inline-block;
  margin-left: 0;
  margin-right: 20px;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 18px;
  background: #b4b4b4;
  border-radius: 40%;
  cursor: pointer;
}

#slider:hover {
  opacity: 1;
  cursor: pointer;
}
.clear{
  display:none;
  width:17px;
  height:17px;
}
a {
  color:#C7C7C7;
  text-decoration: underline;
}
a:hover {
  color:#A8F2FF;
  text-decoration: underline;
}


/* grid */
/* grid */
/* grid */

:root {
    --block-size: 32px; /* Default block size */
}
html {
    font-size: var(--block-size); 
}

/* hide scrollbar */
html, body {
  -ms-overflow-style: none; /* internet explorer + edge */
  scrollbar-width: none; /* firefox */
}

body::-webkit-scrollbar { /* chrome, safari, opera */
  width: 0;
  height: 0;
}



#pip-grid {
  display: flex;
  width: 10.25rem;
  padding: 0.25rem 0 0.125rem 0;
  justify-content: space-between;
  align-items: center;
}

.manip-pip {
  width: calc((5/12) * 1rem);
  height: calc((5/12) * 1rem);

  background: #888;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}



#gb-wrapper {
    display: flex;
    margin: 0;
    padding: 0;
    width: auto;
    box-sizing: border-box;
}

#gb {
  outline: .125rem solid #888;
  outline-offset: 0px;
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 10rem; /* 10 blocks w */
  height: 20rem; /* 20 blocks t */
  overflow: hidden;
  box-sizing: border-box;
  display: block;

}

#gb::before {
  content: '';
  position: absolute;
  top: -.125rem; 
  left: -.125rem;
  right: -.125rem;
  height: .125rem;

  background: #363941; /* Same as your perform background */
  z-index: 1;
}

/* svg optimization*/
img[src$=".svg"] {
    image-rendering: optimizeSpeed;
    image-rendering: --webkit-optimize-contrast;
    image-rendering: --moz-crisp-edges;
    image-rendering: crisp-edges;
    shape-rendering: optimizeSpeed;
    will-change: transform; 
}

#gameboard-canvas {
  display: block;
  padding: 0;
  border: none;
  margin: 0 auto;
  width: 10rem !important;
  height: 20rem !important;
  max-width: 10rem;
  max-height: 20rem;
  image-rendering: --moz-crisp-edges;
  image-rendering: --webkit-crisp-edges;
  image-rendering: auto;
  image-rendering: auto;
  line-height: 0;
  font-size: 0;
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  background: #000;
  will-change: contents;
  image-rendering: pixelated;
}
#next-container img, #hold img {
    will-change: src;
    image-rendering: optimizeSpeed;
}

#next-container {
  outline: .125rem solid #888;
  background: #111;

  width: calc((10/3) * 1rem);
  height: 12.5rem;
  
  display: flex;
  flex-direction: column;
  align-items: center;
}

#next_display_0, #next_display_1, #next_display_2, #next_display_3, #next_display_4, #hold img {
  width: calc((10/3) * 1rem);
  height: 2.5rem;
}

#fps {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  text-overflow: wrap;
  margin-top: .375rem; 
  color: #666; 
  font-size: .375rem; 
  text-align: center;
}


#gb_total {
  display: flex;
  align-items: left;
}

#gb_right {
  display: flex;
  width: 4rem;
  padding: 0.3125rem 0.3125rem 0 0.125rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3125rem;
  height: 20rem;
}

#gb_center {
  vertical-align: top; 
  width: 10rem; 
  text-align: center;
}

#gb_left {
  display: flex;
  width: 4rem;
  height: 20rem;
  padding: 0.3125rem 0 0 0.25rem !important;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  align-self: stretch;
  position: relative;
  top: 0;
}



#hold {
  outline: .125rem solid #888;
  background: #111;
  width: calc((10/3) * 1rem);
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 0 0.3125rem 0;
}

#perform_caption {
  padding: 5px 5px; 
  border-radius: 18px; 
  text-align: center; 
  color: #B0B0B1; 
  outline: none; 
  border: 2px solid #232425; 
  background-color: #2B2D31; 
  width: 560px; 
  box-sizing: border-box; 
}

#main_menu_btn {
  cursor: pointer;

  flex-flow: column;
  margin: 0 auto;
  padding: 2px 10px;
  border-radius: 18px;
  text-align: center;
  color:#B0B0B1;
  outline: 3px solid #18191B;
  background-color: #2B2D31;
  box-shadow:none;
  border: none;
  margin-bottom: -7px;
  transition: background-color 0.15s ease, color 0.15s ease, outline 0.15s ease;
  /* box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.2);*/
} 
#main_menu_btn:hover{
  background-color: #3C3E44;
  color: #C4C4C5;
  outline: 3.5px solid #5F646D;
  /* box-shadow: 2px 2px 5px rgba(100, 100, 100, 0.05); */
}


/* ------------------------------------------------------
stats
------------------------------------------------------ */
.Stats {
  display: flex;
  padding: 0.3125rem 0.25rem 0 0.25rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  flex: 1 0 0;
  align-self: stretch;
  margin-top: 0;
}

/* group divs */
.sgInformation {
  display: flex;
  width: 4rem;
  flex-direction: column;
  justify-content: flex-start !important;
  align-items: flex-end;
  flex: 1 0 0;
}

.sgStatistics {
  display: flex;
  width: 4rem;
  /* align-self: stretch; */
  flex-direction: column;
  justify-content: flex-end !important;
  align-items: flex-end;
  flex: 1 0 0;
}

/* sec styles */
.sQuestions, .sPattern, .sPPS, .sInputs, .sTime, .sPb {
  align-self: stretch;
  /* padding: .25rem calc((5/12) * 1rem); */
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  display: flex;
}

/* section spec. padding */
.sQuestions {
  padding: calc((1/3) * 1rem) 0.1875rem 0.125rem 0.25rem;
}
.sPattern {
  padding: 0.25rem 0.1875rem 0.25rem 0;
}
.sPPS {
  padding: 0 0 0.25rem calc((5/12) * 1rem);
}
.sInputs, .sTime {
  padding: 0.25rem 0 0.25rem calc((5/12) * 1rem);
}
.sPb {
  padding: 0.125rem 0 0.25rem calc((5/12) * 1rem);
}


/* titles */
[data-layer^="st"], .Inputs, .Stquestions, .Stpattern, .Stpps {
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  font-family: Arial;
  font-weight: 400;
  word-wrap: break-word;
}

.Stquestions, .Stpattern, .stPb {
  font-size: 0.417rem;
  color: #aaaaaa;
}
.Stpps, .Inputs, .stTime {
  font-size: 0.5rem;
  color: #DCDADA;
}
.stTime {
  color: white;
}
.stPb {
  color: #929292;
}

/* inner wrappers */
.sInputsInner, .sPPSInner, .sPbInner {
  justify-content: flex-end;
  align-items: last baseline;
  display: inline-flex;
}

/* main values */
.svQuestions, .svPatterns, .svPPS, .svInputs, .svTime, .svPb {
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  font-family: Arial;
  font-weight: 400;
  word-wrap: break-word;
}

.svQuestions {
  font-size: calc((4/3) * 1rem);
  color: #aaaaaa;
}
.svPatterns {
  font-size: 0.75rem;
  color: #aaaaaa;
}
.svPPS, .svInputs {
  font-size: 0.75rem;
  color: #DCDADA;
}
.svTime {
  font-size: calc((14/24) * 1rem);
  color: white;
}
.svPb {
  font-size: calc((14/24) * 1rem);
  color: #929292;
}

/* unit + decimals */
.suPPS, .suInputs, .saInputs, .smTime, .smPb {
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  font-family: Arial;
  font-weight: 400;
  word-wrap: break-word;
  font-size: 0.5rem;
}
.saInputs {
  font-size: calc((14/24) * 1rem);
}
.suPPS, .suInputs, .saInputs {
  color: #DCDADA;
}
.smTime {
  color: white;
}
.smPb {
  color: #929292;
}



#lock_timer_container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3125rem;
  background-color: #444;
  width: 10.25rem;
  height: 0.0625rem;
}

#lock_timer_bar {
  width: 10.25rem;
  height: 0.0625rem;
  background-color: #888;
}

/* Table layout for the game interface */
#perform table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 auto;
  padding: 0;
  table-layout: fixed;
  width: 26.25rem;
  position: relative;
}

#perform tr {
  margin: 0;
  padding: 0;
  vertical-align: top;
}

#perform td {
  margin: 0;
  padding: 0.3125rem 0 0 0rem;
  vertical-align: top;
  box-sizing: border-box;
}

/* hold + stats */
#perform td:nth-child(1) {
  width: 4rem;
  text-align: center;
  padding: 0;
}

/* gameboard */
#perform td:nth-child(2) {
  width: 10rem;
  text-align: center;
}

/* queue */  
#perform td:nth-child(3) {
  width: 4rem;
  text-align: center;
}

/* main menu button */
#perform td:nth-child(4) {
  width: 7.5rem;
  text-align: center;
}

td[style*="width: 240px"] {
  width: 10rem !important;
  min-width: 10rem;
  max-width: 10rem;
  vertical-align: top;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}



#gb-wrapper {
  position: relative; /* establish positioning context */
  width: 10rem;
  height: 20rem;
  display: block;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

#gb-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

#gb-overlaysub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 30px;
  display: none;
  z-index: 10;
  pointer-events: none;
  color: #fff;
  font-size: 16px;
  font-weight: normal;
  font-style: italic;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  white-space: nowrap; 
}




.explode {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
}
/* harddrop particles */
.hd-particle {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  transform-origin: center;
  z-index: 999; 
  transition: opacity 200ms linear;
  width: 6px;
  height: 6px;
  background: #fff;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}
#gb_total, #perform {
  will-change: transform;
}

.pixellate-lock img {
  visibility: visible !important;
}
.pixellate-lock .pixellate-pixel {
  transform: none !important;
  opacity: 1 !important;
}


.absolute-center {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
}




/* ------------------------------------------------------
checkbox styling
------------------------------------------------------ */
.prefs-container input[type="checkbox"] {
  position: relative;
  width: 48px;
  height: 24px;
  -webkit-appearance: none;
  appearance: none;
  background: #636363;
  border-radius: 12px;
  outline: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-right: 190px;
  margin-bottom: 5px;
}

.prefs-container input[type="checkbox"]:checked {
  background: #4CAF50;
}

.prefs-container input[type="checkbox"]:before {
  content: '0';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.prefs-container input[type="checkbox"]:checked:before {
  transform: translateX(26px);
  content: '1';
}

.prefs-container input[type="checkbox"]:hover {
  background: #555;
}

.prefs-container input[type="checkbox"]:checked:hover {
  background: #45a049;
}

.display-row span {
  text-align: left;
  padding-left: 190px;
}
.display-row {
  border: none;
  border-bottom: 1px solid #585858;
  /* background: #222; */
  /* color: #fff; */

  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 710px; 
  margin-bottom: 6px;
  cursor: pointer;
  padding-top: 5px;

  position: relative; 
  overflow: hidden;   

}
.display-row:first-of-type {
  border-top: 1px solid #585858;
  /* padding-top: 5px; */
}
.display-row::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    0deg, 
    transparent, 
    transparent 30%, 
    #56565656
  );
  transform: rotate(-45deg);
  transition: all 0.5s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.display-row:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}
.display-row:hover {
  transform: scale(1.01);
  transition: all 0.2s ease;
  /* box-shadow: 0 0 20px rgba(0,255,255,0.25); */
  z-index: 2;
}







/* bg anim */
body {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  background-image: linear-gradient(0deg, #022244, #58c8da);
  background-repeat: no-repeat;  
  background-size: cover;        
  background-attachment: fixed;  
  margin: 0;
}

.ocean {
  position: relative;
  width: 100%;
  min-height: 100vh;
  height: auto;
}



.ocean::after, 
.ocean::before {
  background-color: white;
  width: 120%;
  height: 120px;
  position: absolute;
  content: '';
  top: -80px;
  left: -10%;
  border-radius: 100%;
  animation: waves 10s ease infinite;
  opacity: 0.2;
}

.ocean::before {
  top: -60px;
  animation-delay: 5s;
  opacity: 0.1;
  left: -5%;
}

    @keyframes waves {
      0%, 100% {transform: rotate(-2deg);}
      50% {transform: rotate(2deg);}
    }

.bubbles {
  width: 100%;
  min-height: 100vh;
  height: auto;
  animation: bubbles 10s linear infinite;
}

    @keyframes bubbles {
      0%, 100% {transform: rotate(-5deg);}
      50% {transform: rotate(5deg);}
    }

.bubbles span {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  position: absolute;
  background-color: white;
  bottom: -10%;
  animation: bubble 10s ease-in-out infinite;
}

    @keyframes bubble {
      0% {bottom: -10%; opacity: 0;}
      100% {bottom: 100%;}
    }

.bubbles span:nth-child(1) {
  width: 50px;
  height: 50px;
  opacity: 0.5;
  left: 10%;
  animation-delay: 3s;
  animation-duration: 10s;
  opacity: 0.2;
}

.bubbles span:nth-child(2) {
  width: 30px;
  height: 30px;
  opacity: 0.5;
  left: 40%;
  animation-delay: 1s;
  animation-duration: 5s;
  opacity: 0.1;
}

.bubbles span:nth-child(3) {
  width: 10px;
  height: 10px;
  opacity: 0.5;
  left: 30%;
  animation-delay: 5s;
  animation-duration: 20s;
  opacity: 0.3;
}

.bubbles span:nth-child(4) {
  width: 35px;
  height: 35px;
  opacity: 0.5;
  left: 40%;
  animation-delay: 8s;
  animation-duration: 8s;
  opacity: 0.2;
}

.bubbles span:nth-child(5) {
  width: 45px;
  height: 45px;
  opacity: 0.5;
  left: 60%;
  animation-delay: 10s;
  animation-duration: 15s;
  opacity: 0.1;
}

.bubbles span:nth-child(6) {
  width: 40px;
  height: 40px;
  opacity: 0.5;
  left: 80%;
  animation-delay: 3s;
  animation-duration: 30s;
  opacity: 0.4;
}

.bubbles span:nth-child(7) {
  width: 15px;
  height: 15px;
  opacity: 0.5;
  left: 90%;
  animation-duration: 25s;
  opacity: 0.3;
}

.bubbles span:nth-child(8) {
  width: 20px;
  height: 20px;
  opacity: 0.5;
  left: 50%;
  animation-duration: 10s;
  opacity: 0.2;
}
.bubbles span:nth-child(9) {
  width: 10px;
  height: 10px;
  opacity: 0.5;
  left: 30%;
  animation-delay: 5s;
  animation-duration: 20s;
  opacity: 0.3;
}

.bubbles span:nth-child(10) {
  width: 35px;
  height: 35px;
  opacity: 0.5;
  left: 40%;
  animation-delay: 8s;
  animation-duration: 8s;
  opacity: 0.2;
}

.bubbles span:nth-child(11) {
  width: 45px;
  height: 45px;
  opacity: 0.5;
  left: 60%;
  animation-delay: 10s;
  animation-duration: 15s;
  opacity: 0.1;
}
.bubbles span:nth-child(12) {
  width: 10px;
  height: 10px;
  opacity: 0.5;
  left: 30%;
  animation-delay: 5s;
  animation-duration: 20s;
  opacity: 0.3;
}

.bubbles span:nth-child(13) {
  width: 35px;
  height: 35px;
  opacity: 0.5;
  left: 40%;
  animation-delay: 8s;
  animation-duration: 8s;
  opacity: 0.2;
}

.bubbles span:nth-child(14) {
  width: 45px;
  height: 45px;
  opacity: 0.5;
  left: 60%;
  animation-delay: 10s;
  animation-duration: 15s;
  opacity: 0.1;
}






/* ------------------------------------------------------
idk if im gonna use this
------------------------------------------------------ */