@font-face {
  font-family: 'videogamebig';
  src: url('https://hhroses.neocities.org/font/CelticBitRegular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
} 
@font-face {
  font-family: 'videogame';
  src: url('https://hhroses.neocities.org/font/PixelatedEleganceRegular-ovyAA.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'tinyfont';
  src: url('https://hhroses.neocities.org/font/Pixel-Tiny5-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}
*,*::before,*::after {box-sizing: border-box;margin: 0;}
* { margin: 0; padding: 0; box-sizing: border-box; }
body,html {width:100%;height:100%;margin:0;padding:0;overflow:hidden;}
body {
  padding-top: 80px;
  padding-bottom: 200px;
  overflow: hidden !important;
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: url('https://hhroses.neocities.org/programs/Match-Em-Up/moon-with-stars.jpg') center/cover fixed;
  color: black; 
  font-family: 'videogame';
  user-select: none; touch-action: none; 
  cursor: url('https://hhroses.neocities.org/cursors/medivalhand.png') 5 2, default;
  box-shadow: inset 0 0 5px black, 0 0 10px black;
}
:root {
  --crt-red: rgb(218, 49, 49);
  --crt-green: rgb(112, 159, 115);
  --crt-blue: rgb(40, 129, 206);
  --ActiveTitle: #000080;
  --GradientActiveTitle: #1084d0;
  --InactiveTitle: #808080;
  --GradientInactiveTitle: #b5b5b5;
  --TitleText: #ffffff;
  --InactiveTitleText: #c0c0c0;
  --Background: #008080;
  --Window: #ffffff;
  --WindowText: #000000;
  --ButtonFace: #c0c0c0;
  --ButtonHilight: #ffffff;
  --ButtonShadow: #808080;
  --ButtonDkShadow: #000000;
  --ButtonText: #000000;
  --Hilight: #000080;
  --HilightText: #ffffff;
  --GrayText: #808080;  
  --cell-size: 50px;
  --cell-font: 30px;
  --ghost-size: 50px;
}
.sparkles, .emoji {      
  text-shadow: 
     1px  0   0 black, /* Right */
    -1px  0   0 black, /* Left */
     0    1px 0 black, /* Bottom */
     0   -1px 0 black; /* Top */
}
.emojithick {      
  text-shadow: 
     2px  0   0 black, /* Right */
    -2px  0   0 black, /* Left */
     0    2px 0 black, /* Bottom */
     0   -2px 0 black; /* Top */
}
#restartBtn, .Btn, .skipintro, .next, .Btn, #levelcomplete .Btn, .btn-play {
  cursor: url('https://hhroses.neocities.org/cursors/medievalhanddselect.png') 5 2, pointer !important;
}
.coolcode {
  position: fixed !important;
  background-image: url('https://hhroses.neocities.org/images/frutiger-aero/clouds_25.png');
  width: 100%;
  background-size: 100vw auto;
  z-index: 1;
  bottom: -160px;
  top: 0px;
  pointer-events: none;
} 
.grass {
  position: fixed !important;
  background-image: url('https://hhroses.neocities.org/images/frutiger-aero/foregrounds_13.png');
  width: 100%;
  height: 248px;
  position: absolute;
  pointer-events: none;
  z-index: 2;
  bottom: -60px;
  left: 0px;
}
.game-ui-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
.game-ui-visible {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.8s ease;
}    
@keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}}
@keyframes fadeOut {from {opacity: 1;}to {opacity: 0;}}
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); } }
@keyframes comboIn { 0% { transform: scale(0) rotate(-10deg); opacity: 0; } 60% { transform: scale(1.3) rotate(3deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes boardPopJiggle {
  0%   { transform: scale(0)    rotate(-4deg);   }
  55%  { transform: scale(1.12) rotate(2deg);    }
  70%  { transform: scale(0.94) rotate(-2deg);   }
  82%  { transform: scale(1.05) rotate(1deg);    }
  91%  { transform: scale(0.98) rotate(-0.5deg); }
  100% { transform: scale(1)    rotate(0);       }
}
.titlebar {
  background: rgba(255,255,255,0.25); 
  backdrop-filter: blur(5px) invert(20%);
  border-radius: 20px 20px 0px 0px; 
  margin-bottom: -7px;
  width: min(315px, 100vw - 24px);
  padding-top: 7px;
  text-align: center;
  border: 2px solid black;
  box-shadow: 0 2px 3px rgba(5,5,5,0.5),             /* Outer bottom shadow */
  inset 2px 2px 2px rgba(255,255,255,.5), /* Top-left inner highlight */
  inset 0 -8px 8px -4px rgba(0,0,0,0.75);  /* <--- Bottom inner shadow */
  z-index: 10;
}
h1 {
  font-size: 20px;
  font-family: "videogamebig", monospace;
  padding: 1px;
  z-index: 99;
  margin:0;padding:0;
}
#scorebar::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  background-image: url('https://hhroses.neocities.org/programs/Match-Em-Up/new-art/rainbow2.gif') !important;
  background-size: 100% 40px !important;
  opacity: 0.1; 
  z-index: -1;
}
#scorebar { 
  display: flex; gap: 24px; 
  margin-bottom: 12px; 
  font-size: 20px; 
  font-family: 'videogame';
  color: black; 
  text-shadow: 0 1px 3px rgba(5,5,5, 1);
  backdrop-filter: blur(10px) invert(25%);
  padding: 5px 25px 9px 22px;
  border-radius: 50px; 
  border: 2px solid black;
  box-shadow: 0 2px 3px rgba(5,5,5,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.1); 
  z-index: 10 !important;
}
#scorebar span {
  text-shadow: 
     1px  0   0 #000, /* Right */
    -1px  0   0 #000, /* Left */
     0    1px 0 #000, /* Bottom */
     0   -1px 0 #000; /* Top */
}
#board {
  pointer-events: auto;
  overflow: hidden;
  position: relative;
  display: grid; gap: 5px;
  background: rgba(255,255,255,0.08); 
  backdrop-filter: blur(5px) invert(20%);
  border-radius: 35px; 
  border: 6px double black;
  box-shadow: 0 2px 3px rgba(5,5,5,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
  z-index: 10 !important;
  transition: margin 1s ease, position 1s ease;
  padding: 10px 12px 12px 10px !important;
  cursor: url('https://hhroses.neocities.org/cursors/medievalhand-grab.png') 16 16, grab;
  touch-action: none;
}
#board.game-ui-visible {
  animation: boardPopJiggle 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#board::before, #restartBtn::before, #settingsBtn::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 30px; 
  background: linear-gradient(
    to right, 
    rgba(255, 0, 0, 0.5),    /* Red */
    rgba(255, 255, 0, 0.5),  /* Yellow */
    rgba(0, 255, 0, 0.5),    /* Green */
    rgba(0, 255, 255, 0.5),  /* Cyan */
    rgba(0, 0, 255, 0.5),    /* Blue */
    rgba(255, 0, 255, 0.5),  /* Magenta */
    rgba(255, 0, 0, 0.5)     /* Back to Red */
  );
  background-size: 200% auto;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: move-rainbow 6s linear infinite;
  pointer-events: none;
}

@keyframes move-rainbow {from { background-position: 0% center; }to { background-position: 200% center; }}  
.cell {
  backdrop-filter: blur(10px) invert(25%);
  width: var(--cell-size); 
  height: var(--cell-size); 
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: var(--cell-font); 
  border-radius: 20px; 
  background: rgba(255,255,255,0.1);
  border-top: 2px solid white; 
  border-left: 2px solid white; 
  border-bottom: 1px dotted white;
  transition: transform 0.12s ease, 
              opacity 0.1s,
              top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              left 0.2s;
  box-shadow: 1px 2px 2px 1px rgba(5,5,5,.5), inset 2px 2px 2px rgba(255,255,255,.3);
  text-shadow: 
     1px  0   0 #000, /* Right */
    -1px  0   0 #000, /* Left */
     0    1px 0 #000, /* Bottom */
     0   -1px 0 #000; /* Top */
  cursor: url('https://hhroses.neocities.org/cursors/medievalhand-grab.png') 16 16, grab;
  touch-action: none;
}
.cell:hover { background: rgba(255,255,255,0.5) !important; scale:1.1;}
@media (hover: hover) {
  .cell:hover { background: rgba(255,255,255,0.5) !important; scale:1.1;}
}
.cell:active { scale:.95;}
.cell.matched { animation: pop 0.3s ease forwards; }
.cell.dragged { opacity: 0.1 !important; animation: none !important;}
body.is-dragging,
body.is-dragging * {
  cursor: url('https://hhroses.neocities.org/cursors/medievalhand-grabbing.png') 16 16, grabbing !important;
}
@keyframes glowGoldAndPop { /* for when a cell match is made */
  0% { 
    box-shadow: 0 0 5px gold, inset 0 0 5px gold; 
    background-color: rgba(255, 215, 0, 0.4) !important; 
  }
  70% { 
    box-shadow: 0 0 20px gold, inset 0 0 15px gold; 
    background-color: rgba(255, 215, 0, 0.8) !important; 
    transform: scale(1.1); 
    opacity: 1;
  }
  100% { 
    transform: scale(0); 
    opacity: 0; 
  }
}
.spawning {
  transition: none !important;
  transform: translateY(-300px); 
}
@keyframes newCellPop {
  0%   { transform: scale(0); opacity: 0; }
  50%  { transform: scale(1.15); opacity: 1; }
  70%  { transform: scale(0.9); }
  85%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}
.cell.new-cell { animation: newCellPop 0.35s ease-out forwards;}
.cell.matched-gold {animation: glowGoldAndPop 0.5s ease-in-out forwards; pointer-events: none; /* Prevent clicking during animation */}
.cell.falling {transition: transform 0.4s cubic-bezier(0.3, 1, 0.4, 1);}
#ghost {
  position: absolute; 
  width: var(--ghost-size); 
  height: var(--ghost-size);
  font-size: 32px;
  display: none; 
  align-items: center; 
  justify-content: center;
  pointer-events: none; 
  z-index: 99999999; 
  border-radius: 20px;
  box-shadow: 0 3px 3px rgba(5,5,5,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
  border: 2px solid black; 
  background: rgb(255,255,255,1);
  text-shadow: 0 0px 2px rgba(5,5,5, 1);
}
.cell.dragged, .cell:active, #ghost, .cell.matched-gold, .cell.matched, #ghost:hover, #ghost:active, .dragged 
{ cursor: url('https://hhroses.neocities.org/cursors/medievalhand-grabbing.png') 16 16, grabbing !important; }
#combo {
  position: absolute; inset: 0; 
  display: none; align-items: center; 
  justify-content: center; 
  pointer-events: none;
  z-index: 99;
}
#combo span {
  border: 2px solid black !important;
  font-size: 36px; 
  font-weight: 900; 
  color: black;
  background: rgba(255,255,255,0.5); 
  backdrop-filter: blur(4px) invert(50%);
  padding: 10px 28px; 
  border-radius: 50px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3), inset 3px 3px 3px white;
  animation: comboIn 0.5s ease-out;
}
.btn-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.Btn, #levelcomplete .Btn, .btn-play, .next, .settingsBtn {
  padding: 8px 20px; 
  font-size: 20px !important; 
  height: 45px !important;
  font-family: inherit; 
  color: black;
  background: rgba(255,255,255,0.1); 
  border: 2px solid black;
  border-radius: 30px; 
  box-shadow: 0 2px 3px rgba(5,5,5,0.5), inset 4px 4px 2px rgba(255,255,255,.25);
  text-shadow: 0 1px 3px rgba(5,5,5, 1);
  backdrop-filter: blur(10px);
}
#gameover {
  display: none; 
  position: fixed;
  inset: 0; /* Forces it to cover the entire viewport */
  width: 100vw;
  height: 100vh;
  z-index: 9999; /* Ensure it stays above the CRT effects */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75); /* Dark spooky red */
  backdrop-filter: blur(10px) invert(100%);
  color: white;
  text-align: center;
  font-family: 'videogame', sans-serif;
  text-shadow: 
     2px  0   0 #000, /* Right */
    -2px  0   0 #000, /* Left */
     0    2px 0 #000, /* Bottom */
     0   -2px 0 #000; /* Top */
}
#gameover .gameoverstuff {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#gameover .Btn, #gameover .btn-play { background: rgba(255,255,255,.5) !important; }
#gameover .final { font-size: 28px; margin-bottom: 8px; }
#gameover .finalscore { font-size: 20px; margin-bottom: 16px; color: #ffd93d; }
/*shuffle button*/ #restartBtn, #settingsBtn { 
  margin-top: 10px; 
  padding-top: 10px; 
  z-index: 10 !important;  
  font-size: 16px; 
  backdrop-filter: invert(25%);
  transition: opacity 0.3s ease;
  height: 50px !important;
  background-color: rgba(255,255,255,.3);
}
#settingsBtn {
  width: 50px !important;
  display:flex; gap:10px; 
  z-index:10; 
  align-items:center;
  text-shadow: 
     1px  0   0 #000, /* Right */
    -1px  0   0 #000, /* Left */
     0    1px 0 #000, /* Bottom */
     0   -1px 0 #000; /* Top */
}
.Btn:hover 
{ scale: 1.02 !important; background: rgba(255,255,255,.75) !important; }
.Btn:active
{scale:.9; background: rgba(255,255,255,0.3); } 
#gameover .btn-play:hover, .btn-play:hover 
{ scale: 1.03 !important; background: rgba(255,255,255,.75) !important; }
#gameover .btn-play:active, .btn-play:active, #restartBtn:active, #settingsBtn:active, .Btn:active 
{ scale: .95 !important; background: rgba(255,255,255,.25) !important;}
#levelcomplete .Btn 
{ backdrop-filter: invert(20px); background: rgba(255,255,255,0.45); }
@keyframes jiggle {
  0% { transform: rotate(0deg) scale(1); }
  10% { transform: rotate(1deg) scale(1.05); }
  25% { transform: rotate(3deg) scale(1); }
  35% {transform: rotate(-5deg) scale(1.05); }
  50% { transform: rotate(3deg) scale(.95); }
  60% {transform: rotate(-3deg) scale(1.05); }
  75% { transform: rotate(3deg) scale(1.01); }
  85% {transform: rotate(-3deg) scale(1.05); }
  100% { transform: rotate(0deg) scale(1); }
}
.knight {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 200px;
  z-index: 7;
  animation: jiggle 1.5s ease-in-out;
}
.knight:hover {scale:1.01;}
.knight:active {scale:.9;}
.knight.above-board { 
  z-index: 150; 
  scale:1.5;
  bottom: 0px;
}
.knight.above-board.center { 
  z-index: 7; 
  scale:2.5;
  bottom: 80px;
  left: calc(50vw - 180px);
} 
@keyframes knightAboveBoardCenterToBottomLeft {
  0% {
    scale:2.5;
    bottom: 80px;
    left: calc(50vw - 180px);
  }
  1% {
    transform: scaleX(-1);
  }
  99% {
    transform: scaleX(-1);
  }
  100% {
    bottom: 20px;
    left: 20px;
    scale: 1;
    transform: scaleX(1);
  }
}
#levelcomplete {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(5px) invert(100%);
}
.levelcompletetitle {
  text-shadow: 3px  3px  3px black !important;
  font-size: 30px;
}
.score {text-shadow: 0 2px 3px rgba(5,5,5,1);}
@keyframes sparkleIn {0% { opacity: 0; }100% { opacity: 1; }}
@keyframes sparkle {0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }50% { opacity: 1; transform: scale(1) rotate(180deg); }}
#levelcomplete {animation: sparkleIn 0.6s ease-out forwards;}
#levelcomplete .sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  text-shadow: 
     1px  0   0 #000, /* Right */
    -1px  0   0 #000, /* Left */
     0    1px 0 #000, /* Bottom */
     0   -1px 0 #000; /* Top */
}
#levelcomplete .sparkles span {
  position: absolute;
  font-size: 24px;
  animation: sparkle 1.5s ease-in-out infinite;
}
#levelcompletescore { font-size: 20px !important; color: gold !important; }
@keyframes bubblePop {0% {opacity: 0;transform: scale(0.5) translateY(20px);}50% {opacity: 1;transform: scale(1.05) translateY(-5px);}100% {opacity: 1;transform: scale(1) translateY(0);}}
.tutorial-retry-btn { /* for tutorial */ margin-left: 5px; font-size: 16px !important; }
.talkbubble {
  pointer-events: auto !important;
  padding-top: 20px !important; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 19px; 
  font-family: 'videogame'; 
  color: rgba(6,6,6,.9);
  background: rgba(255,255,255,0.1); 
  border-radius: 30px; 
  border:2px solid black;
  box-shadow: 0 1px 10px rgba(5,5,5,0.3), inset 5px 5px 20px 1px rgba(255,255,255,.75);
  text-shadow: 0 1px 3px rgba(5,5,5, 1);
  backdrop-filter: blur(10px) invert(5%);
  height: auto;
  min-height: 100px;
  min-width: 50px;
  /* width: 340px; */
  max-width: 350px;
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 25px;
  position: absolute;
  bottom: 255px;
  left: 110px;
  z-index: 100 !important;
  animation: slide-in-bottom-left 0.6s ease-out forwards;
} 
.talkbubble.center {
  bottom: 390px;
  left: calc(50vw + 0px);
}
/* THE OUTER BLACK SHAPE for talk bubble angle */
.talkbubble:before {
  content: '';
  position: absolute;
  bottom: -25px;
  left: 40px; 
  width: 0;
  height: 0;
  border-right: 25px solid transparent; 
  border-top: 25px solid black; 
  z-index: 1;
}
.talkbubble:after {
  content: '';
  position: absolute;
  bottom: -18px;
  left: 43px;
  width: 0;
  height: 0;
  border-right: 18px solid transparent;
  border-top: 18px solid #cbc2c6; 
  z-index: 2;
}
.talkbubble::before,
.talkbubble::after {
  pointer-events: none;
}
.talkbubble-tutorial { animation: none !important; }
.next { /*button */
  position: relative;
  z-index: 999 !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
  min-width: 120px;
  min-height: 40px;
  padding: 8px 20px;
  position: relative;
  font-size: 19px; 
  font-family: inherit; 
  color: black;
  background: rgba(255,255,255,0.1); 
  border-radius: 20px; 
  box-shadow: 0 1px 3px rgba(5,5,5,1), inset 2px 2px 2px rgba(255,255,255,1);
  text-shadow: 0 1px 3px rgba(5,5,5, 1);
  backdrop-filter: blur(10px) invert(50%);  
  border:2px solid black;
  border-radius: 50px;
  margin-top: 10px;
  pointer-events: auto;
}
.next:hover{scale:1.02;}
.skipintro {
	font-size: 12px !important;
  position: absolute;
  top: 5px;
  left: 10px !important;
  width: 20px;
  max-width: 20px !important;
  height: 20px;
  padding: 0px !important;
  font-family: 'tinyfont'; 
  color: black;
  border-radius: 20px; 
  border: none;
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  font-weight: 900;
  text-shadow: 
     1px  0   0 white, /* Right */
    -1px  0   0 white, /* Left */
     0    1px 0 white, /* Bottom */
     0   -1px 0 white; /* Top */
  opacity: .25;
} 
.skipintro:hover{color: maroon !important; opacity: 1;}
.skipintro:active{color:black !important; opacity: 1;}
.page {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-left:6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-text {
  visibility: hidden;
  width:100%;
  pointer-events: none;
}
.talkbubble, .talkbubble2, .talkbubble-tutorial, .page, .page-text, .talkbubble3, .talkbubble4, .talkbubble4b {
  overflow-wrap: break-word !important; 
  word-wrap: break-word !important;
  word-break: keep-all !important; 
}
.page-text.animating { visibility: visible; pointer-events: none; }
.hidden-page {display: none !important;}
.active-page {display: flex !important; flex-direction: column; align-items: center;}
@keyframes slide-in-bottom-left {from {transform: translate(-100%, 100%);opacity: 0;}to {transform: translate(0, 0);opacity: 1;}}  
@keyframes letterIn {from { opacity: 0; transform: translateX(-5px); }to { opacity: 1; transform: translateX(0); }}
.talkbubble .page span.letter {opacity: 0;display: inline-block;animation: letterIn 0.05s ease forwards;}
.talkbubble .page span.letter.space { width: 0.3em; display: inline; }  
.level-container {
  display: none;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2 !important;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  pointer-events: none;
}
.level-active {
  display: block !important;
  opacity: 1 !important;
}
#exBubble { /* for when the knight talks about his ex lol */
  pointer-events: none !important; user-select: none; z-index: 200;
  background: rgba(255,255,255,0.1); 
}
/* --- Level 1 complete knight gallop animation but can be used for other stuff --- */
@keyframes gallopRight {
  0%   { transform: translateX(0) rotate(0deg); z-index: 20;}
  5%   { transform: translateX(10px) rotate(3deg); }
  10%  { transform: translateX(20px) rotate(-3deg); }
  15%  { transform: translateX(40px) rotate(3deg); }
  20%  { transform: translateX(70px) rotate(-3deg); }
  30%  { transform: translateX(130px) rotate(3deg); }
  40%  { transform: translateX(220px) rotate(-3deg); }
  50%  { transform: translateX(350px) rotate(3deg); }
  60%  { transform: translateX(500px) rotate(-3deg); }
  70%  { transform: translateX(700px) rotate(3deg); }
  80%  { transform: translateX(950px) rotate(-2deg); }
  90%  { transform: translateX(1200px) rotate(2deg); }
  100% { transform: translateX(1600px) rotate(0deg); }
}
@keyframes gallopLeftReturn {
  0%   { transform: translateX(-1600px) rotate(0deg); z-index: 20;}
  10%  { transform: translateX(-1200px) rotate(-3deg); }
  20%  { transform: translateX(-900px) rotate(3deg); }
  30%  { transform: translateX(-650px) rotate(-3deg); }
  40%  { transform: translateX(-450px) rotate(3deg); }
  50%  { transform: translateX(-300px) rotate(-3deg); }
  60%  { transform: translateX(-180px) rotate(3deg); }
  70%  { transform: translateX(-100px) rotate(-3deg); }
  80%  { transform: translateX(-50px) rotate(2deg); }
  90%  { transform: translateX(-15px) rotate(-1deg); }
  100% { transform: translateX(0) rotate(0deg); }
}
.knight.gallop-right { animation: gallopRight 1.4s ease-in forwards; z-index: 20; }
.knight.gallop-return { animation: gallopLeftReturn 1.4s ease-out forwards; z-index: 20; }

#bottomButtons { /* for shuffle and settings */
  display: flex;
  gap: 10px;
  align-items: center;
}
#settingsPanel {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9998;
  width: 280px;
  padding: 20px;
  border-radius: 30px;
  border: 2px solid black;
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(10px) invert(50%);
  box-shadow: 0 2px 3px rgba(5,5,5,0.5), inset 4px 4px 2px rgba(255,255,255,.25);
  font-family: 'videogame';
  color: black;
  text-align: center;
  cursor: url('https://hhroses.neocities.org/cursors/medivalhand.png') 5 2, default;
}
#settingsPanel h2 {
  font-family: 'videogamebig';
  font-size: 16px;
  margin-bottom: 14px;
  text-align: center;
  cursor: url('https://hhroses.neocities.org/cursors/medivalhand.png') 5 2, default;
}
#settingsPanel label {
  font-size: 16px;
  display: block;
  margin-bottom: 6px;
  cursor: url('https://hhroses.neocities.org/cursors/medivalhand.png') 5 2, default;
}
#settingsPanel .settings-row {
  display: flex;
  align-items: center;
  gap: 0px;
  margin-bottom: 14px;
}
#settingsPanel input[type="range"] {
  flex: 1;
  accent-color: #000;
}
#settingsPanel .mute-btn {
  font-size: 30px;
  background: none;
  border: none;
  line-height: 1;
  align-items: center;
  position: relative;
  z-index: 2;
  margin-right: -7px;
  cursor: url('https://hhroses.neocities.org/cursors/medievalhanddselect.png') 5 2, pointer;
}
#volumeSlider, #volumeSlider:hover {
  cursor: url('https://hhroses.neocities.org/cursors/medievalhand-grab.png') 5 2, grab;
}
#volumeSlider:active {
  cursor: url('https://hhroses.neocities.org/cursors/medievalhand-grabbing.png') 5 2, grabbing;
}
#settingsPanel input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 8px;
  border-radius: 10px;
  border: 2px solid black;
  box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
  outline: none;
  background: linear-gradient(to right, black 100%, rgba(255,255,255,0.3) 100%);
}
#settingsPanel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3e3e40;
  border: 2px solid black;
  box-shadow: 0 1px 3px rgba(5,5,5,0.5), inset 2px 2px 2px rgba(255,255,255,0.5);
}
#settingsPanel input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  border: 2px solid black;
  box-shadow: 0 1px 3px rgba(5,5,5,0.5), inset 2px 2px 2px rgba(255,255,255,0.5);
}
#settingsPanel input[type="range"]::-moz-range-progress {
  background: black;
  border-radius: 10px;
  height: 8px;
}
#settingsPanel input[type="range"]::-moz-range-track {
  background: rgba(255,255,255,0.3);
  border-radius: 10px;
  height: 8px;
  border: 2px solid black;
}
#cheatInput, textarea, #settingsPanel input[type="text"] {
  cursor: url('https://hhroses.neocities.org/cursors/medievalhand-writing.png') 2 18, text;
}
#settingsPanel input[type="text"] {
  width: 100%;
  padding: 7px 20px 5px 20px;
  font-family: 'videogame';
  font-size: 16px;
  border: 2px solid black;
  border-radius: 15px;
  background: rgba(255,255,255,0.3);
  backdrop-filter: blur(5px);
  box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
  outline: none;
}
#settingsPanel input[type="text"]:focus {
  background: rgba(255,255,255,0.5);
}
#settingsOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(1px) invert(10%);
  z-index: 9997;
}
#settingsPanel .close-btn {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 25px;
  background: none;
  border: none;
  align-items: center !important;justify-content: center !important;
  text-shadow: 
     1px  0   0 white, /* Right */
    -1px  0   0 white, /* Left */
     0    1px 0 white, /* Bottom */
     0   -1px 0 white; /* Top */
  font-family: 'tinyfont';
  cursor: url('https://hhroses.neocities.org/cursors/medievalhanddselect.png') 5 2, pointer;
}
#settingsPanel .close-btn:hover { color: maroon; }
/* =============== MOBILE VERSION ===================== */
@media (max-width: 500px), (max-width: 615px) and (max-height: 485px) {
  .talkbubble button { font-size: 16px; }
  :root {
    --cell-size: 38px;
    --cell-font: 22px;
    --ghost-size: 38px;
  }
  body {
    padding-top: 40px;
    padding-bottom: 100px;
  }
  #board {
    border-radius: 25px;
    border-width: 6px;
    padding: 7px 9px 9px 7px !important;
    margin:-3px;
  }
  #board::before { border-radius: 19px; }
  .cell { border-radius: 14px; }
  #ghost {border-radius: 14px;}
  .titlebar { width: min(245px, 100vw - 24px); font-size: 12px; }
  h1 { font-size: 16px; }
  #scorebar {
    font-size: 16px;
    gap: 12px;
    padding: 4px 14px 6px 14px;
    min-width: 275px;
  }
  #restartBtn, #settingsBtn {
    height: 38px !important;
    font-size: 16px;
    padding-top:5px;
  }
  h1 { font-size: 16px;}
  #scorebar {padding-top:5px;}
  .talkbubble {
    width: fit-content;
    max-width: min(260px, 100vw - 24px);
    height: auto;
    min-height: 100px;
    font-size: 16px;
    left: 70px;
    bottom: 200px;
    padding-left:5px;
    padding-right:5px;
  }
  .talkbubble.center {
    bottom: 255px;
    left: 110px;
  }
  .skipintro { left: 10px !important;top:7px; }
  .next { font-size: 15px; }
  .knight { width: 140px; }
  .knight.above-board.center {
    scale:1.5;
    bottom: 0px;
    left: 20px;
  }
  #ghost { font-size: 24px; }
  #combo span { font-size: 24px; padding: 8px 18px; }
}