.draggable-element[draggable="true"] {
  cursor: grab;
}
.draggable-element[draggable="false"] {
  cursor: pointer;
}
.draggable-element:active[draggable="true"] {
  cursor: grabbing;
}
.draggable {
  cursor: grab;
}

/*Main CSS*/
body {
  overflow-y: hidden;
  overflow-x: hidden;
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  user-select: none;
  cursor: pointer;
}
select {
  font-family: "FontAwesome";
}
.navbar-nav {
  width: 100%;
  justify-content: center;
}
.navbar-dark .navbar-nav .nav-item {
  margin-right: 20px;
}
.navbar-dark .navbar-nav .nav-link {
  color: white;
  position: relative;
  transition: color 0.3s;
}
.navbar-dark .navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  display: block;
  margin-top: 5px;
  left: 50%;
  background: #ccffff;
  transition: width 0.3s ease, left 0.3s ease, background-color 0.3s ease;
}
.navbar-dark .navbar-nav .nav-link:hover {
  color: #ccffff;
}
.navbar-dark .navbar-nav .nav-link.active {
  color: #ccffff;
}
.navbar-dark .navbar-nav .nav-link:hover::after,
.navbar-dark .navbar-nav .nav-link.active::after {
  width: 100%;
  left: 0;
  background: #ccffff;
}
@keyframes underline-open {
  0% {
    width: 0;
    left: 50%;
  }
  50% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 100%;
    left: 0;
  }
}
@keyframes underline-close {
  0% {
    width: 100%;
    left: 0;
  }
  50% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 0;
    left: 50%;
  }
}
.containerFrame {
  width: 50%;
  margin-right: auto;
  margin-left: 360px;
  padding-right: auto;
  padding-left: auto;
  padding-top: 15px;
  position: absolute;
  z-index: 1;
}
.containerFrame-virtual {
  width: 50%;
  margin-right: auto;
  margin-left: 360px;
  padding-right: auto;
  padding-left: auto;
  padding-top: 15px;
  position: absolute;
}
.containerFrame-virtual-z-index-low {
  z-index: 2;
}
.containerFrame-virtual-pieces-z-index-high {
  z-index: 3;
}
.btn-block {
  padding: 0;
  margin: 0;
  background-color: rgba(256, 256, 256, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.9);
  color: white;
}
.btn-block:hover {
  color: #ccffff;
  background-color: rgba(256, 256, 256, 0.2);
  border: 1px solid rgba(0, 256, 256, 0.4);
}
.btn-block-red {
  padding: 0;
  margin: 0;
  background-color: rgba(256, 256, 256, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.9);
  color: white;
}
.btn-block-red:hover {
  color: rgba(255, 0, 0, 0.9);
  background-color: rgba(256, 256, 256, 0.2);
  border: 1px solid rgba(241, 29, 29, 0.5);
}
.btn-green {
  padding: 0;
  margin: 0;
  background-color: rgba(256, 256, 256, 0.1);
  color: white;
  border: 1px solid black;
}
.btn-green:hover {
  background-color: rgba(256, 256, 256, 0.2);
  border: 1px solid darkgreen;
  color: rgba(145, 236, 47, 0.7);
}
.btn-import {
  padding: 0;
  margin: 0;
  background-color: rgba(256, 256, 256, 0.1);
  color: white;
  border: 1px solid black;
}
.btn-import:hover {
  background-color: rgba(256, 256, 256, 0.2);
  border: 1px solid darkgreen;
  color: rgba(145, 236, 47, 0.7);
}
.btn-import:disabled {
  padding: 0;
  margin: 0;
  background-color: rgba(256, 256, 256, 0.1);
  color: white;
  border: 1px solid black;
}
.left-bar-block {
  padding: 0;
  margin: 0;
  background-color: rgba(256, 256, 256, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.9);
  color: white;
  border: 1px solid rgba(0, 0, 0, 0.9);
  border-top-left-radius: 1px !important;
  border-bottom-left-radius: 1px !important;
  border-top-right-radius: 2px !important;
  border-bottom-right-radius: 2px !important;
}
.left-bar-block:hover {
  color: #ccffff;
  background-color: rgba(256, 256, 256, 0.2);
  border: 1px solid rgba(0, 256, 256, 0.4);
}
.pgn-block {
  padding: 0;
  margin: 0;
  background-color: rgba(64, 256, 256, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.9);
  color: white;
  border: 1px solid rgba(0, 0, 0, 0.9);
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  font-size: large;
}
.icon-label1 {
  display: flex; /* Use flexbox for layout */
  align-items: top; /* Align items vertically */
}
.icon-label2 {
  display: flex; /* Use flexbox for layout */
  align-items: first baseline; /* Align items vertically */
}
.icon {
  margin-right: 5px; /* Adjust margin between icon and label */
}
.timeLimit {
  justify-content: center;
}
.btn-confirm {
  padding: 0;
  margin: 0;
  background-color: rgba(0, 256, 256, 0.1);
  border: 2px solid black;
  color: #ddffff;
}
.btn-confirm:hover {
  color: rgb(145, 236, 47, 1);
  background-color: rgba(0, 256, 256, 0.2);
  border: 2px solid darkgreen;
}
.cellBox {
  display: flex;
  width: 80px;
  height: 80px;
  /* border: 1px solid rgba(0, 0, 0, 0.5); */
  border: none;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.cellBox img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.containerLeft {
  position: absolute;
  top: 10px;
  left: 1px;
  width: 26%;
  margin-top: 60px;
}
.left-menu-container {
  width: 100%;
  max-height: 404px;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scrollbar-color: rgba(0, 0, 0, 0.9) rgba(0, 0, 0, 0.9);
}
.left-menu-container::-webkit-scrollbar {
  width: 0px;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0.9);
}
.left-menu-container::-webkit-scrollbar-thumb {
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0.9);
}
.containerRight {
  position: absolute;
  top: 10px;
  right: 0px;
  width: 26%;
  margin-top: 60px;
}
.right-bar-th {
  width: 16.6%;
  padding: 0;
  margin: 0;
  background-color: rgba(256, 256, 256, 0.1) !important;
  border: 1px solid rgba(0, 0, 0, 0.9) !important;
  text-align: center;
  border-radius: 0px !important;
}
.right-bar-td {
  width: 41.7%;
  background-color: rgba(0, 0, 0, 0.9);
}
.right-bar-td-lastmove {
  width: 41.7%;
  background-color: rgba(43, 43, 106, 0.9);
}
.right-bar-td-selected {
  width: 41.7%;
  color: rgba(136, 255, 255, 1);
  background-color: rgba(44, 88, 88, 0.9);
}
.right-bar-td:hover,
.right-bar-td-lastmove:hover {
  background-color: rgba(0, 256, 256, 0.1);
}
.right-bar-td-even {
  padding-left: 15%;
}
.right-bar-td-odd {
  padding-left: 11%;
}
.color-line-top {
  display: block; 
  height: 5px;
  border: none;
  background: linear-gradient(
    to right,
    #b3ecf1,
    #83dfe9,
    #53d1df,
    #33c7d8,
    #1fbdd2,
    #1dadc0,
    #1a98a6,
    #18848e,
    #136163,
    #136163,
    #18848e,
    #1a98a6,
    #1dadc0,
    #1fbdd2,
    #33c7d8,
    #53d1df,
    #83dfe9,
    #b3ecf1
  );
  background-size: 200% 100%;
  animation: flow 10s linear infinite;
  width: 100%;
}
.color-line-bottom {
  display: block; 
  height: 5px;
  border: none;
  background: linear-gradient(
    to right,
    #53d1df,
    #53e1ef,
    #33c7d8,
    #33d7e8,
    #1fbdd2,
    #1dadc0,
    #1a98a6,
    #18848e,
    #136163,
    #083808,
    #136163,
    #18848e,
    #1dadc0,
    #1fbdd2,
    #33d7e8,
    #33c7d8,
    #53e1ef,
    #53d1df
  );
  background-size: 200% 100%;
  animation: flow 10s linear infinite;
  width: 100%;
}
@keyframes flow {
  0% {
    background-position: 100% 0%;
  }
  50% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 0%;
  }
}
.table-block {
  padding: 0;
  margin: 0;
  color: white;
  width: 100%;
}
.table-container {
  width: 100%;
  max-height: 292px;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scrollbar-color: rgba(0, 0, 0, 0.9) rgba(0, 0, 0, 0.9);
}
.table-container::-webkit-scrollbar {
  width: 0px;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0.9);
}
.table-container::-webkit-scrollbar-thumb {
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0.9);
}
.btn-right {
  padding: 0;
  margin: 0;
  background-color: rgba(256, 256, 256, 0.1);
  border: none;
  color: white;
}
.btn-right:hover {
  color: #ccffff;
  background-color: rgba(256, 256, 256, 0.2);
  border: none;
  box-shadow: none;
}
.btn-name-right {
  padding: 0;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.9);
  border: none;
  color: white;
  border-radius: 10px;
}
.btn-name-right:hover {
  color: #ccffff;
  border: none;
  box-shadow: none;
}
.btn-name-right:focus {
  color: #aaffff;
  border: none;
  outline: none;
  box-shadow: none !important;
}
.btn-right-block {
  padding: 0;
  margin: 0;
  background-color: rgba(256, 256, 256, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.9);
  color: white;
  border-radius: 3px !important;
}
.btn-right-block:hover {
  color: #ccffff;
  background-color: rgba(256, 256, 256, 0.2);
  border: 1px solid rgba(0, 256, 256, 0.3);
}
.abcd-label {
  align-items: start;
  height: fit-content;
  border: none;
}
.abcd-label-height-adjustment-virtual-black-cover {
  height: 22px;
  border: none;
  width: 89.1%;
  margin-left: 6.8%;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.abcd-label-padding {
  padding-left: 60px;
}
.label-col-box {
  display: flex;
  width: 18px;
  height: 80px;
  justify-content: start;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.cellBorder-top-start {
  border-top-left-radius: 10px;
}
.cellBorder-bottom-start {
  border-bottom-left-radius: 10px;
}
.cellBorder-top-end {
  border-top-right-radius: 10px;
}
.cellBorder-bottom-end {
  border-bottom-right-radius: 10px;
}
.missing-piece-bottom {
  background-color: rgba(0, 256, 256, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.9);
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  width: 100%;
}
.missing-piece-top {
  background-color: rgba(32, 256, 256, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.9);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  width: 100%;
}
.point-diff-font-white {
  display: inline-block;
  align-items: first baseline;
  color: white;
  font-size: 22px;
}
.point-diff-font-black {
  display: inline-block;
  align-items: first baseline;
  color: rgba(10, 10, 10, 1);
  font-weight: bold;
  font-size: 22px;
}
.dd-menu-block {
  background-color: rgba(192, 256, 256, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.9);
  color: white;
  font-size: 17px;
  display: flex;
  align-items: center;
  min-height: 45px;
}
.dd-menu-block:hover {
  color: #ccffff;
  background-color: rgba(192, 256, 256, 0.2);
  border: 1px solid rgba(0, 256, 256, 0.4);
}
.menu-block {
  background-color: rgba(128, 128, 128, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.9);
  color: white;
  font-size: 17px;
  display: flex;
  align-items: center;
  min-height: 45px;
  border-radius: 0px !important;
}
.menu-block-width {
  width: 130px;
}
.menu-block-width-default {
  width: 95px;
}
.menu-block-highlight-width {
  width: 220px;
}
.menu-block-highlight-width-default {
  width: 185px;
}
.menu-block-check-width {
  width: 180px;
}
.menu-block-check-width-default {
  width: 140px;
}
.menu-block-previous-width {
  width: 190px;
}
.menu-block-previous-width-default {
  width: 150px;
}
.input-group-pkr {
  margin-bottom: 0px;
}
.form-control-color-pkr {
  border: 0.5px solid rgba(0, 0, 0, 0.9);
  background-color: rgba(128, 128, 128, 0.1);
  color: #ffffff;
  min-height: 45px;
}
input[type="color"] {
  background-color: rgba(128, 128, 128, 0.1);
  border: none;
  outline: none;
  box-shadow: none;
}
input[type="color"]:focus {
  background-color: rgba(128, 128, 128, 0.2);
  border: none;
  outline: none;
  box-shadow: none;
}
input[type="color"]:disabled {
  background-color: rgba(128, 128, 128, 0.1);
  border: none;
  outline: none;
  box-shadow: none;
}
.radio-img-piece {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-right: 10px;
  border-radius: 5px;
}
.theme-img-piece {
  width: 70%;
  object-fit: contain;
  margin: none;
}
.btn-theme-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  height: 75px;
  width: 100%;
  border: transparent;
  background-color: transparent;
  color: white;
}
.btn-theme-block:hover {
  color: #ccffff;
  border: transparent;
  background-color: transparent;
}

/*Icon in Theme Control*/
.btn-theme-block .scale-sliders-icon {
  width: 40%;
  height: 40%;
  line-height: 1; /* no extra leading */
}

.btn-outline-light {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  height: 100%;
}
.fa-size-increase {
  transform: scale(1.5);
}
.scale-sliders-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  transform: scale(4);
}
.height-break {
  display: block;
  height: 1px;
}
.btn-group-horizontal .btn-check:checked + .btn {
  background-color: rgba(0, 256, 256, 0.2);
  border-color: rgba(0, 256, 256, 0.5);
}
.btn-group-horizontal .btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-group-horizontal .btn:hover {
  background-color: rgba(0, 256, 256, 0.1);
  border-color: rgba(0, 256, 256, 0.2);
}
.possible-move-square {
  position: absolute;
  z-index: 2;
}
.range-label {
  font-weight: 500;
}
.range-block {
  background-color: rgba(128, 128, 128, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: white;
  font-size: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 45px;
  width: 100%;
  box-sizing: border-box;
}
.range-block span {
  display: inline-block;
  width: 100%;
  text-align: center;
}
input[type="range"]::-webkit-slider-thumb {
  background-color: rgba(0, 0, 0, 0.8);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.8);
  cursor: grabbing;
}
.form-switch {
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-switch .form-check-input {
  height: 20px;
  width: 40px;
  margin-left: 30px;
}
.form-switch .form-check-label {
  margin-right: 10px;
}
.form-switch .form-check-input:focus {
  border-color: rgba(0, 150, 150, 0.25);
  outline: 0;
  box-shadow: 0 0 2px 2px rgba(0, 256, 256, 0.2);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='rgba(0,100,100,0.5)'/%3E%3C/svg%3E");
}
.form-switch .form-check-input:checked {
  background-color: #51a1a1;
  border-color: #51a1a1;
  border: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='rgba(255,255,255,1.0)'/%3E%3C/svg%3E");
}
.text-area-block {
  background-color: rgba(128, 128, 128, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.9);
  color: white;
  font-size: 17px;
  text-align: left;
  display: flex;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
  resize: none;
}
.text-area-block:focus {
  color: #ddffff;
  background-color: rgba(256, 256, 256, 0.2);
  border: 1px solid rgba(0, 256, 256, 0.4);
  outline: none;
  text-align: left;
}
.virtualBox {
  display: flex;
  width: 80px;
  height: 80px;
  border: none;
  outline: none;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}
.virtualBorder-top-start {
  border-top-left-radius: 10px;
}
.virtualBorder-bottom-start {
  border-bottom-left-radius: 10px;
}
.virtualBorder-top-end {
  border-top-right-radius: 10px;
}
.virtualBorder-bottom-end {
  border-bottom-right-radius: 10px;
}
.gradient-circle {
  width: 80px;
  height: 80px;
  border: none;
  outline: none;
  clip-path: inset(0%);
  background: rgba(0, 0, 0, 0.6);
  position: relative;
  /*z-index: 2;*/
  transition: all 0.3s ease;
}
.gradient-circle-white {
  box-shadow: 1px #e1e1e1;
  clip-path: circle(50% at center);
  background: radial-gradient(#f6f6f6, #ececec, #e1e1e1, #d0d0d0, #cccccc);
  /*z-index: 3;*/
}
.gradient-circle-black {
  box-shadow: 1px #555555;
  clip-path: circle(50% at center);
  background: radial-gradient(#aaaaaa, #888888, #666666, #444444, #222222);
  z-index: 3;
}
.gradient-circle-white:hover {
  clip-path: inset(0%);
  background: radial-gradient(
    circle,
    #b3ecf1,
    #83dfe9,
    #53d1df,
    #33c7d8,
    #1fbdd2,
    #1dadc0,
    #1a98a6,
    #18848e,
    #136163
  );
}
.gradient-circle-black:hover {
  clip-path: inset(0%);
  background: radial-gradient(
    circle,
    #53d1df,
    #33c7d8,
    #1fbdd2,
    #1dadc0,
    #1a98a6,
    #18848e,
    #136163,
    #083808
  );
}
.gradient-circle-black img {
  transform: scale(1);
  transition: all 0.3s ease;
}
.gradient-circle-white img {
  transform: scale(1);
  transition: all 0.3s ease;
}
.gradient-circle-white:hover img {
  transform: scale(1.25);
  transition: all 0.3s ease;
}
.gradient-circle-black:hover img {
  transform: scale(1.25);
  transition: all 0.3s ease;
}
.custom-alert {
  display: none;
  position: fixed;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.6);
  color: #ccffff;
  padding: 5px;
  border: 1px solid #aaffff;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.5s;
  text-align: center;
  width: 300px;
  max-width: 90vw;
}
.custom-alert p {
  margin: 0;
  padding: 0;
}
/*
.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet);
  --bs-btn-border-color: var(--bd-violet);
  --bs-btn-border-radius: 2.5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}*/
.btn-bd-secondary {
  --bs-btn-border-radius: 0rem;
}
.icon-dd-check-test {
  align-items: center;
}
.align-right-fa-icon {
  padding: 5px;
  float: right;
}
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.popup-overlay.visible {
  display: block;
}
.popup, .game-over-popup {
  display: none;
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.6);
  color: #ccffff;
  padding: 20px;
  border: 1px solid #aaffff;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.5s;
  text-align: center;
  width: 300px;
}
.game-over-popup {
  width : 425px;
}
.popup.visible, .game-over-popup.visible{
  display: block;
  opacity: 1;
}
.popup-buttons {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
.popup-buttons button {
  padding: 10px 20px;
  margin: 5px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.popup-buttons .confirm {
  background-color: rgba(40, 167, 69, 0.7);
  color: white;
}
.popup-buttons .confirm:hover {
  background-color: rgba(40, 167, 69, 0.9);
  color: #fff;
  transform: scale(1.05);
}
.popup-buttons .cancel {
  background-color: rgba(220, 53, 69, 0.7);
  color: white;
}
.popup-buttons .cancel:hover {
  background-color: rgba(220, 53, 69, 0.9);
  color: #fff;
  transform: scale(1.05);
}
.popup-buttons .analyse {
  background-color: rgba(18, 102, 186, 0.645);
  color: white;
}
.popup-buttons .analyse:hover {
  background-color: rgba(51, 122, 192, 0.9);
  color: #fff;
  transform: scale(1.05);
}

/* ─── Computer colour select ─────────────────────────────────────────────── */
/* Slider grid for strength levels */
.slider {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
  margin: 0.5rem 0;
}
.slider div {
  padding: 0.4rem 0;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  color: #ccc;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  font-size: 0.9rem;
}
.slider div:last-child {
  border-right: none;
}
.slider div.selected {
  background: #33b397;
  color: #fff;
}
.slider div:not(.selected):hover {
  background: rgba(38, 133, 124, 0.6);
  color: #fff;
}

/* Buttons inside the strength popup */
.popup-buttons {
  display: flex;
  justify-content: space-around;
  margin-top: 1rem;
}
.popup-buttons button {
  flex: 1;
  margin: 0 0.3rem;
  padding: 0.6rem 0;
  width: 90%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1rem;
  transition: background 0.2s, transform 0.2s, color 0.2s;
}
.popup-buttons button.compPop:hover {
  background: rgba(51, 179, 166, 0.8);
  color: #fff;
  transform: scale(1.05);
}
.popup-buttons button.compPop.selected {
  background: #33b3a6;
  color: #fff;
  transform: scale(1.05);
}

/* Strength popup overlay */
#strengthOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
  pointer-events: none;
}
#strengthOverlay.visible {
  display: block;
  pointer-events: all;
}

/* Strength popup box */
#strengthPopup {
  display: none;
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -30%);
  width: 450px;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #ccffff;
  border: 2px solid #aaffff;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
#strengthPopup.visible {
  display: block;
  opacity: 1;
  pointer-events: all;
}

/* Login/Signup popup overlay */
#loginOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
  pointer-events: none;
}
#loginOverlay.visible {
  display: block;
  pointer-events: all;
}

/* Login/Signup popup box
   The old 450px centred box lived here. It has been removed on purpose: the
   markup moved to the shared .pgauth-overlay design (see the pgauth block near
   the bottom of this file), but an ID selector beats a class selector, so these
   rules kept winning — pinning the modal to width:450px + max-height:90vh +
   overflow-y:auto. The taller pgauth card then scrolled *inside* that box and
   clipped the Login button off the bottom. Show/hide is handled entirely by
   #loginPopup.pgauth-overlay[.visible]; p3.js only toggles `visible`. */

/* Input fields */
.login-fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0;
}
#password-container {
  width: 100%;
}
.login-fields input,
#password-container input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1rem;
  transition: background 0.2s, border-color 0.2s;
}
.login-fields input::placeholder,
#password-container input::placeholder {
  color: #888;
}
.login-fields input:focus,
#password-container input:focus {
  outline: none;
  background: rgba(51, 179, 166, 0.12);
  border-color: #33b3a6;
}

/* Buttons */
.popup-buttons {
  display: flex;
  justify-content: space-around;
  margin-top: 1rem;
}
.popup-buttons button.loginBtn {
  flex: 1;
  margin: 0 0.3rem;
  padding: 0.6rem 0;
  width: 90%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1rem;
  transition: background 0.2s, transform 0.2s, color 0.2s;
}
.popup-buttons button.loginBtn:hover {
  background: rgba(51, 179, 166, 0.8);
  color: #fff;
  transform: scale(1.05);
}

/* Toggle text/link */
.login-links {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #ccc;
  text-align: center;
}
.login-links a {
  color: #33b3a6;
  text-decoration: none;
  margin-left: 0.3rem;
  transition: color 0.2s;
  cursor: pointer;
}
.login-links a:hover {
  color: #66ffe0;
  text-decoration: underline;
}

/* Reuse popup-overlay from loginPopup */
#logoutPopup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #ccffff;
  border: 2px solid #aaffff;
  border-radius: 5px;
  text-align: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
#logoutPopup.visible {
  display: block;
  opacity: 1;
  pointer-events: all;
}

.popup-buttons button.logoutBtn {
  flex: 1;
  margin: 0 0.3rem;
  padding: 0.6rem 0;
  width: 90%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1rem;
  transition: background 0.2s, transform 0.2s, color 0.2s;
}
.popup-buttons button.logoutBtn:hover {
  background: rgba(51, 179, 166, 0.8);
  color: #fff;
  transform: scale(1.05);
}

/* For the games played history */
.games-history {
  width: 50%;
  margin-right: auto;
  margin-left: 360px;
  padding-right: auto;
  padding-left: auto;
  padding-top: 15px;
  position: absolute;
  z-index: 1;
}
.games-history-card {
  background-color: #2c2c2c;
  border-radius: 8px;
  border: 1px solid #444;
}
.pgn-preview code {
  display: block;
  background-color: #1a1a1a;
  padding: 10px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow-x: auto;
  color: #cfcfcf;
}
.btn-games-history {
  background-color: #f8f9fa;
  border: 1px solid #ccc;
}
.btn-games-history:hover {
  background-color: #e2e6ea;
}
.scroll-container {
  max-height: 500px; 
  overflow-y: auto;
  padding-right: 10px;
}
.scroll-container::-webkit-scrollbar {
  width: 8px;
}
.scroll-container::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}
.scroll-container::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}




/* === Responsive Design for Mobile Devices === */
@media (max-width: 850px) {
  .containerFrame,
  .containerFrame-virtual {
    width: 100% !important;
    margin-left: 0 !important;
    position: relative !important;
    padding: 1px !important;
  }

  .containerLeft,
  .containerRight {
    position: static !important;
    width: 100% !important;
    margin-top: 10px !important;
  }

  .left-menu-container,
  .table-container {
    max-height: none !important;
    overflow-y: auto !important;
  }

  .btn,
  .btn-block,
  .btn-green,
  .btn-confirm {
    font-size: 16px !important;
    padding: 10px !important;
  }

  .label-col-box {
    height: 40px !important;
  }

  .abcd-label {
    font-size: 12px !important;
  }

  .navbar-nav {
    flex-direction: column !important;
  }

  .navbar-nav .nav-item {
    margin-right: 0 !important;
    margin-bottom: 10px;
    text-align: center;
  }
}

@media (max-width: 850px) {
  html, body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    display: block !important;
  }

  .containerFrame,
  .containerLeft,
  .containerRight {
    position: static !important;
    width: 100% !important;
    margin: 1px auto !important;
    float: none !important;
    clear: both !important;
  }

  #display,
  #leftbar,
  #rightbar {
    width: 100% !important;
    position: static !important;
    display: block !important;
  }

  #rightbar {
    min-height: 100px;
  }

  .main-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .btn,
  .btn-block,
  .btn-green,
  .btn-confirm {
    font-size: 16px !important;
    padding: 10px !important;
  }

  .cellBox {
    width: 11.5vw !important;  /* 100 / 8 = 12.5 */
    height: 11.5vw !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    box-sizing: content-box !important;
  }

  .label-col-box {
    height: 40px !important;
  }

  .abcd-label {
    font-size: 12px !important;
  }

  .navbar-nav {
    flex-direction: column !important;
  }

  .navbar-nav .nav-item {
    margin-right: 0 !important;
    margin-bottom: 10px;
    text-align: center;
  }

  .cellBox img {
    width: 85% !important;
    height: 85% !important;
    object-fit: contain !important;
    display: block !important;
    margin: auto !important;   
  }

  .draggable-element {
    padding: 0 !important;
    margin: 0 !important;
  }

  #strengthPopup {
    display: none;
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -30%);
    width: 90vw; /* use viewport width */
    max-width: 450px;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #ccffff;
    border: 2px solid #aaffff;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    box-sizing: border-box;
  }

  /* Mobile override for the old popup box — removed with the block above. */
  #logoutPopup {
    display: none;
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90vw;
    width: 450px;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #ccffff;
    border: 2px solid #aaffff;
    border-radius: 5px;
    text-align: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
  }
  .game-over-popup {
    width : 90vw;
  }
  #timerWhite, #timerBlack {
  font-size: 24px !important;
}
}
/*
@media (min-width: 851px) and (max-width: 1024px){
  .containerFrame {
    width: 68%;
    float: left;
    position: static;
    margin-left: 0;
    box-sizing: border-box;
  }

  .containerRight {
    float: right;
    width: 30%;
    position: static;
    box-sizing: border-box;
    padding-left: 2%;
  }

  .containerLeft {
    width: 100%;
    float: left;
    position: static;
  }
  .cellBox {
    width: 60px;
    height: 60px;
  }

  .btn {
    font-size: 18px;
    padding: 12px;
  }

  .btn-group {
    flex-wrap: wrap;
  }

  .btn-group .btn {
    flex: 1 1 45%;
    margin: 4px;
  }
}
@media (min-width: 1025px) and (max-width: 1366px) {
  .containerFrame {
    width: 50%;
    margin-left: 360px;
    position: absolute;
    padding-top: 15px;
    z-index: 1;
  }

  .containerRight {
    position: absolute;
    top: 10px;
    right: 0;
    width: 26%;
    margin-top: 60px;
  }

  .containerLeft {
    position: absolute;
    top: 10px;
    left: 1px;
    width: 26%;
    margin-top: 60px;
  }

  .cellBox {
    width: 80px;
    height: 80px;
  }

  .btn {
    font-size: 16px;
    padding: 10px;
  }

  .btn-group {
    flex-wrap: nowrap;
  }
}
*/
/*
@media (width: 1024px) {
  .containerFrame {
    width: 58%;            
    margin-left: 250px;   
    position: absolute;
    z-index: 1;
  }

  .containerRight {
    width: 34%;
    right: 0;
    position: absolute;
    margin-top: 60px;
  }

  .containerLeft {
    width: 26%;
    left: 1px;
    position: absolute;
    margin-top: 60px;
  }

  .cellBox {
    width: 64px;
    height: 64px;
  }

  .btn {
    font-size: 16px;
    padding: 10px;
  }

  .btn-group .btn {
    flex: 1 1 48%;
    margin: 4px;
  }
}
*/

/* ─── Navbar brand back-arrow animation ───────────────────────────────────── */
.navbar-brand {
  position: relative;
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.navbar-brand::before {
  content: "←";
  position: absolute;
  left: -22px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.7);
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 700;
  font-size: 1rem;
  pointer-events: none;
}
.navbar-brand:hover {
  color: white !important;
  opacity: 1 !important;
}
.navbar-brand:hover::before {
  opacity: 1;
  left: -18px;
}
/* ─── Auth: Google button, divider, OTP ──────────────────────────────────────── */
.google-login-btn {
  width: 100%;
  padding: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.12);
  color: #ccc;
  border: 1px solid rgba(170, 255, 255, 0.3);
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 0.8rem;
  transition: background 0.2s, color 0.2s;
}
.google-login-btn:hover {
  background: rgba(51, 179, 166, 0.25);
  color: #fff;
}
.github-login-btn svg {
  flex-shrink: 0;
}
.auth-brand-mark {
  display: block;
  margin: 0 auto 0.8rem;
  color: #6fe3d8;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0.4rem 0 0.6rem;
  color: #888;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(170, 255, 255, 0.2);
}
.auth-otp-hint {
  font-size: 0.85rem;
  color: #aaa;
  text-align: center;
  margin-bottom: 0.8rem;
  line-height: 1.5;
}
.auth-otp-hint strong {
  color: #fff;
}
.otp-input-field {
  text-align: center;
  letter-spacing: 0.4em;
  font-size: 1.3rem !important;
}

/* ============================================================
   pgauth login modal (shared design, themed for chess)
   #loginPopup carries .pgauth-overlay; chess JS toggles the
   .visible class on it (and on #loginOverlay), so the overlay
   is hidden by default and shown via .visible.
   ============================================================ */
#loginPopup.pgauth-overlay { display: none; }
#loginPopup.pgauth-overlay.visible { display: flex; }

.pgauth-overlay {
  --pgauth-bg: #0b1818;
  --pgauth-surface: rgba(255, 255, 255, 0.06);
  --pgauth-border: rgba(170, 255, 255, 0.25);
  --pgauth-text: #e8e8e8;
  --pgauth-dim: #88aaaa;
  --pgauth-accent: #33b3a6;
  --pgauth-on-accent: #04110f;
  --pgauth-hover: rgba(51, 179, 166, 0.15);
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 4rem 1rem;
  font-family: var(--sans, inherit);
}
.pgauth-close {
  position: fixed;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 9001;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--pgauth-border);
  color: var(--pgauth-dim);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.pgauth-close:hover { color: var(--pgauth-text); border-color: var(--pgauth-text); }
.pgauth-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  width: 100%;
  max-width: 460px;
  margin: auto;
}
.pgauth-brand { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; text-align: center; }
.pgauth-brand-row { display: inline-flex; align-items: center; gap: 0.7rem; }
.pgauth-mark { display: block; flex-shrink: 0; color: var(--pgauth-accent); }
.pgauth-wordmark { font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em; color: #f5f5f5; line-height: 1.05; white-space: nowrap; }
.pgauth-wordmark .accent { color: var(--pgauth-accent); font-weight: 800; }
.pgauth-tagline { font-size: 0.85rem; color: rgba(245, 245, 245, 0.7); max-width: 42ch; line-height: 1.4; }
.pgauth-card {
  width: 100%;
  background: var(--pgauth-bg);
  border: 1px solid var(--pgauth-border);
  border-radius: 16px;
  padding: 2.3rem 2.4rem;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
.pgauth-head { text-align: center; margin-bottom: 1.5rem; }
.pgauth-head h3 { margin: 0 0 0.4rem; color: var(--pgauth-text); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.pgauth-sub { margin: 0; color: var(--pgauth-dim); font-size: 0.88rem; line-height: 1.4; }
.pgauth-form { display: flex; flex-direction: column; gap: 1.05rem; }
.pgauth-field { display: flex; flex-direction: column; gap: 0.4rem; }
.pgauth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.pgauth-field > label { font-size: 0.82rem; font-weight: 600; color: var(--pgauth-text); }
.pgauth-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.8rem 0.9rem;
  background: var(--pgauth-surface);
  border: 1px solid var(--pgauth-border);
  border-radius: 8px;
  color: var(--pgauth-text);
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.pgauth-input::placeholder { color: var(--pgauth-dim); opacity: 0.7; }
.pgauth-input:focus { border-color: var(--pgauth-accent); background: var(--pgauth-bg); }
.pgauth-passwrap { position: relative; }
.pgauth-passwrap .pgauth-input { padding-right: 2.6rem; }
.pgauth-eye {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--pgauth-dim);
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 4px;
  transition: color 0.2s;
}
.pgauth-eye:hover { color: var(--pgauth-text); }
.pgauth-primary {
  width: 100%;
  padding: 0.9rem;
  margin-top: 0.2rem;
  background: var(--pgauth-accent);
  color: var(--pgauth-on-accent);
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
}
.pgauth-primary:hover { opacity: 0.9; }
.pgauth-primary:active { transform: translateY(1px); }
.pgauth-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.pgauth-divider { display: flex; align-items: center; margin: 0.3rem 0 0.2rem; color: var(--pgauth-dim); font-size: 0.72rem; }
.pgauth-divider::before, .pgauth-divider::after { content: ""; flex: 1; height: 1px; background: var(--pgauth-border); }
.pgauth-divider span { padding: 0 0.8rem; }
.pgauth-social { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.pgauth-social-btn {
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  background: var(--pgauth-surface);
  color: var(--pgauth-text);
  border: 1px solid var(--pgauth-border);
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.pgauth-social-btn:hover { background: var(--pgauth-hover); border-color: var(--pgauth-dim); }
.pgauth-social-btn svg, .pgauth-social-btn img { flex-shrink: 0; }
.pgauth-foot { text-align: center; margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--pgauth-dim); }
.pgauth-foot span, .pgauth-link, .pgauth-foot a {
  color: var(--pgauth-accent);
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pgauth-foot span { color: var(--pgauth-dim); text-decoration: none; cursor: default; }
.pgauth-hint { font-size: 0.85rem; color: var(--pgauth-dim); line-height: 1.45; margin: 0; text-align: center; }
.pgauth-hint strong { color: var(--pgauth-text); }
.pgauth-error {
  color: #ef4444;
  font-size: 0.82rem;
  margin: 0 0 0.2rem;
  padding: 0.6rem 0.8rem;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 6px;
  line-height: 1.4;
}
@media (max-width: 520px) { .pgauth-card { padding: 1.8rem 1.5rem; } }