:root {

  --red: #B1443D;
  --orange: #CD8753;
  --yellow: #D9BF69;
  --green: #8E9C61;
  --lblue: #80B0AE;
  --blue: #4D53AF;
  --purple: #9F67A9;
  --lbrown: #F7E6C8;
  --dbrown: #9A754E;

  --px: 100px;


}
html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: Merriweather, serif;
  width: 100%;
}

main {
  background-color: var(--lbrown);

  /* background-color: #D7EAE9; */
}

a {
  color: var(--blue);

}


a:visited {
  color: var(--purple);
}


a.submit {
  font-weight: bold;
  background-color: var(--green);
  text-decoration: none;
  color: var(--lbrown);
  padding: 15px 25px;
  font-size: 1.2em;
  border-radius: 25px;
}

a.submit:hover {
  background-color: var(--blue);
}

h1 {
  color: var(--lbrown);
  text-shadow: 2px 2px var(--red);
  font-size: 2em;
  text-align: center;
}

h1.section {
  font-size: 3em;
}
em {
  font-style: normal;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--blue);
}

section {
  display: flex;
  flex-flow: column;
  width: 100%;
  align-items: center;
  padding: 25px;
  box-sizing: border-box;
}

#hackclub-logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
}

section#open {
  /* height: 100vh; */
  justify-content: center;
  padding: 120px 0;
  padding-bottom: 80px;
  /* padding-top: 100px; */
}

#open-logo {
  width: 80%;
}


section#sample {
  background-color: var(--dbrown);
  padding: 40px;



}

#sample img#reqs {
  width: 80%;
  margin: 45px;
}

section#sample #text {
  /* padding: 45px; */
}

section#sample .interactive {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  align-items: center;
  box-sizing: border-box;

}




section#sample .interactive  {
  position: relative;
  /* width: 100%;
  aspect-ratio: 1.4; */
}

#numbers {
  background-color: var(--lbrown);
  border-radius: 25px;
  width: 100%;
  position: relative;

}


.submitted-scrolling {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding: 24px;
  align-items: stretch;
  gap: 10px;
}

.submitted-game {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 18%;
  box-sizing: border-box;
  background-color: var(--dbrown);
  border-radius: 25px;
  padding: 10px;
  color: var(--lbrown);
}

.submitted-game img {
  width: 80%;
  border-radius: 15px;
}


.submitted-game a {
  display: inline-block;
  text-align: center;
  background-color: var(--green);
  color: var(--lbrown);
  padding: 5px 25px;
  border-radius: 25px;
  text-decoration: none;
}


/* #samples {
  width: 100%;
  aspect-ratio: 1.4;

} */

#sample-examples {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: 10px;

}

#sample-examples div {
  width: 15%;
  aspect-ratio: 1;
  background-color: var(--lbrown);
  border-radius: 25px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  justify-content: center;
  text-align: center;
}

#sample-examples div img {
  width: 80%;
}

#sample-examples div p:has(a) {
  background-color: var(--green);
  color: var(--lbrown);
  padding: 5px 25px;
  border-radius: 25px;
  text-decoration: none;
}

#sample-examples div p:has(a):hover {
  background-color: var(--blue);
}

#sample-examples div p {
  margin: 8px 0;
}

#sample-examples div p a {
  color: var(--lbrown);
  text-decoration: none;
}

section#prize {
  text-align: center;
}

section#prize .hor  {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 25px;
  box-sizing: border-box;

  flex-flow: row;
  justify-content: center;
  gap: 20px;
  padding: 45px;

}

h1.h1-flipped {
  color: var(--dbrown);
  text-shadow: 2px 2px var(--yellow);
}

section#prize .hor div {
  background-color: white;
  aspect-ratio: 0.75;
  width: 100%;
  border-radius: 25px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 25px;
  box-sizing: border-box;



}

section#prize .hor div#prize-1 {
  transform: rotate(3deg);
  background-color: var(--red);
  color: var(--lbrown);
  text-shadow: 2px 2px var(--dbrown);
}

section#prize .hor div#prize-2 {
  transform: rotate(-3deg);
  background-color: var(--yellow);
  color: black;
  text-shadow: 2px 2px var(--lbrown);
}

section#prize .hor div#prize-3 {
  transform: rotate(5deg);
  background-color: var(--green);
  color: var(--lbrown);
  text-shadow: 2px 2px var(--dbrown);
}

section#prize .hor div img {
  width: 100%;
}


section#prize .hor h1 {
  margin-bottom: 8px;
  text-align: center;
}



section#begin {
  background-color: var(--dbrown);
}

section#begin .steps {
  display: flex;
  flex-flow: column;
  gap: 8px;
}

.steps div {
  display: flex;
  background: var(--lbrown);
  border-radius: 25px;
  padding: 25px;
  justify-content: leading;
  gap: 16px;
  align-items: center;
}

.steps > a {
  gap: 16px;
  padding: 25px;
  border-radius: 25px;
  display: flex;
  align-items: center;
}



section#faq {
  text-align: left;
  align-items: start;
  width: 80%;
  margin: 0 auto;
}

section#faq h1 {
  text-align: center;
  width: 100%;
}

section#faq details {
  padding: 10px;

}

footer {
  background-color: var(--dbrown);
  color: var(--lbrown);
  padding: 32px;
  text-align: center;
}














#game {
  /* border: 4px solid var(--dbrown); */
  background-color: var(--yellow);
  width: 80%;
  padding: 15px 25px;
  border-radius: 25px;
  margin: 24px 0;
}


#game summary {
  text-align: center;
  width: 100%;

}



#clear-button {
  width: var(--px);
  height: calc(var(--px) * 0.8);
  background-color: var(--dbrown);
  color: white;
  border: none;
  font-family: inherit;
  border-radius: 4px;
}

#clear-button:hover {
  background-color: var(--yellow);
}
.game-box {
  display: flex;
  flex-flow: row;
  position: relative;
}

/* Restore game CSS now that touch events are fixed */
#game-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--yellow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  pointer-events: auto;
  text-align: center;
  box-sizing: border-box;
}

/* Make game-box the positioning context for the cover */
.game-box {
  position: relative;
}

#game-cover button {
  pointer-events: auto;
  z-index: 2000;
  background-color: var(--dbrown);
  color: var(--lbrown);
  border: none;
  padding: 25px;
  border-radius: 25px;
  font-family: inherit;
  font-size: inherit;
}


.box {
  padding: 10px 10px;
  margin: 20px 0;
  box-sizing: border-box;
}

.game-grid {
  border: 3px solid var(--dbrown);
  margin: 10px auto;
  height: calc(var(--px) * 4);
  width: calc(var(--px) * 4);
  display: flex;
  flex-wrap: wrap;
  aspect-ratio: 1;
}

.single-grid {
  height: var(--px);
  width: var(--px);
  box-sizing: border-box;
  border: 3px solid var(--dbrown);
  user-select: none;
}

#drag-box {
  display: flex;
  flex-wrap: wrap;
  min-height: 10vh;
  width: 100%;
  gap: 10px;
  padding: 10px;
}

.drag {
  pointer-events: auto;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  user-select: none;
  box-sizing: border-box;
  border-radius: 8px;
}

.ghost-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

.drag-box-square {
  box-sizing: border-box;
  height: calc(var(--px) - 6px);
  width: calc(var(--px) - 6px);
  user-select: none;
  position: relative;
  pointer-events: none;
}

.drag-box-square > * {
  pointer-events: none;
}

.drag-box-square p {
  font-size: 24px;
  text-align: center;
  margin: calc(50% - 12px - 2px) 0;
  padding: 0;
}

/* Game interaction rules */
.game-box.game-covered .drag,
.game-box.game-covered .single-grid,
.game-box.game-covered #drag-box,
.game-box.game-covered #game-grid {
  pointer-events: none !important;
}

.game-box:not(.game-covered) .drag,
.game-box:not(.game-covered) .single-grid,
.game-box:not(.game-covered) #drag-box,
.game-box:not(.game-covered) #game-grid {
  pointer-events: auto !important;
}

/* Mobile touch optimizations */
.drag {
  touch-action: manipulation;
}

.single-grid {
  touch-action: manipulation;
}

#drag-box {
  touch-action: manipulation;
}

#game-grid {
  touch-action: manipulation;
}

#end-stats, #game-cover {
  touch-action: manipulation;
}

#clear-button, #start-game-btn, #copy-time-btn {
  touch-action: manipulation;
  min-height: 44px;
}

/* Connector for horizontal pieces (row flex) */
.drag[style*='flex-flow: row'],
.d12, .d13 {
  /* fallback for class-based detection */
}
.d12 .drag-box-square:not(:last-child),
.d13 .drag-box-square:not(:last-child) {
  position: relative;
}
.d12 .drag-box-square:not(:last-child)::after,
.d13 .drag-box-square:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -6px;
  width: 12px;
  height: 36px;
  background: var(--dbrown);
  /* border-radius: 4px; */
  transform: translate(25%, -50%);
  z-index: 1;
}

/* Connector for vertical pieces (column flex) */
.d21 .drag-box-square:not(:last-child),
.d31 .drag-box-square:not(:last-child),
.d11 .drag-box-square:not(:last-child) {
  position: relative;
}
.d21 .drag-box-square:not(:last-child)::after,
.d31 .drag-box-square:not(:last-child)::after,
.d11 .drag-box-square:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 36px;
  height: 12px;
  background: var(--dbrown);
  /* border-radius: 4px; */
  transform: translate(-50%, 45%);
  z-index: 1;
}

.d12 {
  flex-flow: row;
  height: calc(var(--px) - 6px);
  width: calc(2 * var(--px) - 6px);
}

.d21 {
  flex-flow: column;
  height: calc(2 * var(--px) - 6px);
  width: calc(var(--px) - 6px);
}

.d13 {
  flex-flow: row;
  height: calc(var(--px) - 6px);
  width: calc(3 * var(--px) - 6px);
}

.d31 {
  flex-flow: column;
  height: calc(3 * var(--px) - 6px);
  width: calc(var(--px) - 6px);
}

.d11 {
  flex-flow: column;
  height: calc(var(--px) - 6px);
  width: calc(var(--px) - 6px);
}


.drag-box-square {
  box-sizing: border-box;
  height: calc(var(--px) - 6px);
  width: calc(var(--px) - 6px);
  user-select: none;
  /* border: 8px solid white; */
  /* border-radius: 8px; */
  /* background-color: var(--lbrown); */
  position: relative;
  pointer-events: none; /* Prevent blocking drag events */
}

.drag-box-square > * {
  pointer-events: none;
}

.drag-box-square p {
  font-size: 24px;
  text-align: center;
  margin: calc(50% - 12px - 2px) 0;
  padding: 0;
}

.footer {
  clear: both;
}


div[data-val='1'] {
  border-color: var(--red);
}

div[data-val='2'] {
  border-color: var(--orange);
}

div[data-val='3'] {
  border-color: var(--yellow);
}

div[data-val='4'] {
  border-color: var(--green);
}

div[data-val='5'] {
  border-color: var(--lblue);
}

div[data-val='6'] {
  border-color: var(--blue);
}

div[data-val='7'] {
  border-color: var(--purple);
}
/*
div[data-val='8'] {
  background-color: var(--8);
}

div[data-val='9'] {
  background-color: var(--9);
}

div[data-val='0'] {
  background-color: var(--0);
} */



/* confetti! https://discourse.webflow.com/t/add-falling-confetti-with-css/103687 */


#confetti-container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  overflow: hidden;
  left: 0;
  top: 0;
  /* margin: 0; */
  box-sizing: border-box;
  pointer-events: none;
  z-index: 3000;
}
.confetti {
 width: 15px;
 height: 15px;
 background-color: #f2d74e;
 position: absolute;
 left: 50%;
 animation: confetti 5s ease-in-out -2s infinite;
 transform-origin: left top;
 overflow: hidden;
}
.confetti:nth-child(1) {
 background-color: var(--red); left: 10%; animation-delay: 0;
}
.confetti:nth-child(2) {
 background-color: var(--yellow); left: 20%; animation-delay: -5s;
}
.confetti:nth-child(3) {
 background-color: var(--lblue); left: 30%; animation-delay: -3s;
}
.confetti:nth-child(4) {
 background-color: #f2d74e; left: 40%; animation-delay: -2.5s;
}
.confetti:nth-child(5) {
 background-color: var(--red); left: 50%; animation-delay: -4s;
}
.confetti:nth-child(6) {
 background-color: var(--yellow); left: 60%; animation-delay: -6s;
}
.confetti:nth-child(7) {
 background-color: var(--lblue); left: 70%; animation-delay: -1.5s;
}
.confetti:nth-child(8) {
 background-color: var(--red); left: 80%; animation-delay: -2s;
}
.confetti:nth-child(9) {
 background-color: var(--yellow); left: 90%; animation-delay: -3.5s;
}
.confetti:nth-child(10) {
 background-color: var(--lblue); left: 100%; animation-delay: -2.5s;
}

@keyframes confetti {
 0% { transform: rotateZ(15deg) rotateY(0deg) translate(0,0); }
 25% { transform: rotateZ(5deg) rotateY(360deg) translate(-5vw,20vh); }
 50% { transform: rotateZ(15deg) rotateY(720deg) translate(5vw,60vh); }
 75% { transform: rotateZ(5deg) rotateY(1080deg) translate(-10vw,80vh); }
 100% { transform: rotateZ(15deg) rotateY(1440deg) translate(10vw,110vh); }
}



.mobile {
  display: none;
}

@media (max-width: 600px) {
  .mobile {
    display: block;
  }
  .desktop {
    display: none;
  }

  /* Game-specific mobile styles */
  .game-box {
    flex-direction: column;
    padding: 10px;
  }

  .game-grid {
    height: calc(60px * 4);
    width: calc(60px * 4);
    margin: 10px auto;
  }

  .single-grid {
    height: 60px;
    width: 60px;
  }

  .drag {
    border-radius: 6px;
  }

  .drag-box-square {
    height: calc(60px - 6px);
    width: calc(60px - 6px);
  }

  .d12 {
    height: calc(60px - 6px);
    width: calc(2 * 60px - 6px);
  }

  .d21 {
    height: calc(2 * 60px - 6px);
    width: calc(60px - 6px);
  }

  .d13 {
    height: calc(60px - 6px);
    width: calc(3 * 60px - 6px);
  }

  .d31 {
    height: calc(3 * 60px - 6px);
    width: calc(60px - 6px);
  }

  .d11 {
    height: calc(60px - 6px);
    width: calc(60px - 6px);
  }

  #drag-box {
    min-height: 15vh;
    gap: 8px;
    padding: 8px;
  }

  #clear-button {
    width: 80px;
    height: 40px;
    font-size: 0.8em;
    padding: 8px;
  }

  /* Game header mobile layout */
  .game-box > div:first-child > div:first-child {
    flex-direction: column;
    gap: 10px;
    padding: 10px;
  }

  .game-box > div:first-child > div:first-child > span {
    padding: 10px !important;
  }

  #timer {
    font-size: 1.1em;
    font-weight: bold;
  }

  /* Game cover mobile styles */
  #game-cover {
    padding: 20px;
  }

  #game-cover h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
  }

  #game-cover img {
    max-width: 80%;
    height: auto;
  }

  #game-cover p {
    font-size: 0.9em;
    margin: 10px 0;
  }

  #game-cover button {
    padding: 15px 30px;
    font-size: 1.1em;
  }

  /* End stats mobile styles */
  #end-stats {
    padding: 20px;
    font-size: 1em;
    width: auto !important;
  }

  #end-stats button {
    padding: 12px 24px;
    font-size: 0.9em;
  }

  /* Connector adjustments for mobile */
  .d12 .drag-box-square:not(:last-child)::after,
  .d13 .drag-box-square:not(:last-child)::after {
    width: 8px;
    height: 24px;
    right: -4px;
  }

  .d21 .drag-box-square:not(:last-child)::after,
  .d31 .drag-box-square:not(:last-child)::after,
  .d11 .drag-box-square:not(:last-child)::after {
    width: 24px;
    height: 8px;
    bottom: -4px;
  }

  /* Diagonal line adjustment */
  #game-grid::after {
    width: 3px;
    height: 120%;
    top: -110%;
  }

  #sample-examples div {
    width: 48%;
  }

  .submitted-game {
    width: 48%;
  }

  section#prize .hor {
    flex-flow: column;
  }

  .steps div, .steps > a {
    left: 0 !important;
  }
}

.red-cross {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  pointer-events: none;
  color: red;

}


#game-grid::after {
  content: "";
  position: relative;
  width: 4px;
  height: 140%;
  background: repeating-linear-gradient(45deg, var(--yellow), var(--yellow) 16px, transparent 16px, transparent 32px);
  transform: rotate(-45deg);
  left: 50%;
  top: -120%;
  opacity: 0.5;
  pointer-events: none;
}

#end-stats {
  display: none;
  /* padding: 2em; */
  text-align: center;
  /* background: var(--yellow); */
  border-radius: 16px;
  /* margin: 2em auto; */
  font-size: 1.2em;
  z-index: 3000;
  width: 100%;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
#end-stats button {
  background: var(--dbrown);
  color: var(--lbrown);
  border: none;
  border-radius: 25px;
  font-size: 1em;
  padding: 0.5em 1.5em;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
}
#end-stats button:active {
  background: var(--blue);
}

/* Remove or restrict global user-select/touch rules */
/* * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
} */

/* Remove problematic rules that block mobile interactions */
/* .game-box, .game-box * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
} */

/* Only apply touch-action to specific game elements that need it */

.drag {
  touch-action: manipulation;
}

.single-grid {
  touch-action: manipulation;
}

#drag-box {
  touch-action: manipulation;
}

#game-grid {
  touch-action: manipulation;
}

#end-stats, #game-cover {
  touch-action: manipulation;
}

#clear-button, #start-game-btn, #copy-time-btn {
  touch-action: manipulation;
  min-height: 44px;
}

/* Test rule to ensure links are clickable */
a {
  pointer-events: auto !important;
  cursor: pointer !important;
}