@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');

body {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: black;
    color: white;
    box-sizing: border-box;
    font-size: 14px;
    padding: 0;
    margin: 0;
}

hr {
    width: 350px;
}

a {
    color: white;
    font-weight: bold;
}

/* CSS link color */
a:hover {
    color: #fff;
}

/* CSS link color */
a {
    text-decoration: none;
}


#title {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-top: 0px;
}

.waviy {
    -webkit-box-reflect: below -10px linear-gradient(transparent, rgba(0, 0, 0, .2));
    font-size: 40px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 2;
    right: 2;
    top: 40px;
    text-align: center;
}


.waviy span {
    font-family: 'Alfa Slab One', cursive;
    position: relative;
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    animation: waviy 1s 1;
    animation-delay: calc(.1s * var(--i));

}

@keyframes waviy {

    0%,
    40%,
    100% {
        transform: translateY(0)
    }

    20% {
        transform: translateY(-20px)
    }
}


.waviy1 {
    position: relative;
}

.waviy1 span {
    font-family: 'Alfa Slab One', cursive;
    position: relative;
    display: inline-block;
    font-size: 10px;
    color: darkgray;
    text-transform: uppercase;
    /* animation: flipmain 2s;
  animation-delay: calc(.075s * var(--i)) */
}

@keyframes flipmain {

    0%,
    80% {
        transform: rotateY(360deg)
    }
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.popup-box {
    background: black;
    padding: 20px 25px;
    border-radius: 10px;
    text-align: center;
    width: 260px;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

.popup-box h2 {
    margin-top: 0;
    margin-bottom: 15px;
}

.popup-box input {
    width: 90%;
    padding: 8px;
    margin-bottom: 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 16px;
}

.popup-box button {
    padding: 8px 16px;
    background: #0078ff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
}

.hidden {
    display: none;
}
.name-error {
    color: red;
    font-size: 14px;
    margin-top: -5px;
    margin-bottom: 10px;
    text-align: left;
}
.hidden {
    display: none;
}

.wa-wrapper {
    position: relative;
    display: inline-block;
}

#leaderboardCollapsible {
    margin-top: 20px;
    border-top: 1px solid #444;
    padding-top: 10px;
		display: none;
}

#leaderboardHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #222;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    color: white;
    font-weight: bold;
    user-select: none;
}

#leaderboardHeader:hover {
    background: #333;
}

#leaderboardContent {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
	
}

#leaderboardTable {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
    color: white;
    font-size: 14px;
}

#leaderboardTable th,
#leaderboardTable td {
    padding: 6px;
    border-bottom: 1px solid #444;
    text-align: center;
}

#leaderboardTable th {
    background: #333;
}

.current-player-row {
    /* background: rgba(255, 255, 255, 0.12); */
    font-weight: bold;
	background: rgba(255, 255, 0, 0.25);
    border-radius: 6px;
}

.current-player-cell {
    color: #6AAA64;
    font-weight: bold;
}


/* .wa-icon { */
/* height: 5px; */
/* cursor: pointer; */
/* } */

.wa-menu {
    position: absolute;
    top: 40px;
    /* left: 30px; */
    background: black;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px 0;
    width: 140px;
    display: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    z-index: 999;
}

.wa-menu a {
    display: block;
    padding: 5px 10px;
    color: white;
    text-decoration: none;
    text-decoration: none;
    font-size: 11px;
}

.wa-menu a:hover {
    background: gray;
}


.buttonrad {
    border-radius: 12px;
    font-weight: bold;
    font-size: 12px;
    color: black;
    border-style: solid;
    background-color: #fff;
    border-color: #fff;
    width: 90px;
}

.buttonmode {
    border-radius: 6px;
    font-weight: bold;
    font-size: 14px;
    color: white;
    border-style: solid;
    background-color: orange;
    border-color: #fff;
    width: 80px;
    margin-bottom: 10px;
    margin-top: 0px;
    height: 28px;
}
.buttonmode1 {
    border-radius: 6px;
    font-weight: bold;
    font-size: 12px;
    color: white;
    border-style: solid;
    background-color: orange;
    border-color: #fff;
    width: 90px;
    margin-bottom: 10px;
    margin-top: 0px;
    height: 28px;
}

.buttonmodetext {

    font-weight: bold;
    font-size: 10px;
    color: white;
    border-style: solid;
    background-color: black;
    border-color: black;
}

.buttonrad1 {
    border-radius: 12px;
    font-weight: bold;
    font-size: 14px;
    color: black;
    border-style: solid;
    background-color: #fff;
    border-color: #fff;
    width: 115px;
    height: 30px;
}

/* .button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
} */


.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.popup.hidden {
    display: none;
}

.popup-content {
    background: #222;
    color: white;
    padding: 20px 30px;
    border-radius: 10px;
    text-align: center;
    width: 80%;
    max-width: 350px;
    border: 1px solid #555;
}

.popup-btn {
    margin-top: 15px;
    padding: 8px 20px;
    background: #444;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.popup-btn:hover {
    background: #555;
}



.button-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

ul {
    margin-left: 0;
    /* Removes browser default margin */
    padding-left: 0;
    /* Removes browser default padding */
    list-style-position: inside;
    /* Optional: bullets inside text block */
}

.buttoncoffee {
    border-radius: 12px;
    font-weight: bold;
    font-size: 11px;
    color: black;
    border-style: solid;
    background-color: #fff;
    border-color: #fff;
    margin-bottom: 10px;
    margin-top: 10px;
}


/* Shared container that defines the space */
.top-stack { 
	position: relative; 
	width: 100%; 
	height: auto; /* grows to fit whichever child is visible */ 
	margin-Bottom : 25px;
}



/* Momentum bar sits in the same spot as .top-row */ 
.momentum-wrapper { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	display: flex; 
	justify-content: center; 
	margin: 0; /* remove spacing so it aligns perfectly */ 
}

#momentum-bar-container {
    width: 100%;
    max-width: 300px;
    /* your max width */
    height: 20px;
    /* your new height */
    background-color: #ddd;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

#momentum-bar {
    height: 100%;
    width: 100%;
    /* will shrink with timer */
    background-color: #4caf50;
    position: relative;
    transition: width 1s linear;
}

#momentum-counter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: bold;
    color: white;
    pointer-events: none;
}


/* Toggle row sits in the exact same spot */
.top-row {
    position: absolute;
    top: 0;
	left: 50%; 
	transform: translateX(-50%);
    width: 100%;
    max-width: 300px;
	margin: 5 auto 5px auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    margin: 0; /* remove invalid margin shorthand */
    padding: 0 5px;
}


.toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Label styling */
.toggle-label {
    font-size: 12px;
    font-weight: 600;
    color: orange;
}

/* Toggle switch styling */
.toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 26px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: #4caf50;
}

input:checked+.slider:before {
    transform: translateX(20px);
}



#FBButton {
    all: unset;
    cursor: pointer;
    margin-left: 10px;
    margin-right: 5px;
}

#TwitterButton {
    all: unset;
    cursor: pointer;
    margin-right: 10px;
    margin-left: 5px;
}



#footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /* margin-right:40px;
  margin-left:50px;   */
}

#pzlhdr,
#pzl {
    font-weight: bold;
    font-size: 11px;
}

#bbhdr {
    font-weight: bold;
    font-size: 11px;
}

#bb {
    font-weight: bold;
    font-size: 14px;
    color: #6AAA64;
}

#downarrow {
    font-size: 175%;
    position: relative;
    top: 25px;
    margin-right: 5px;

}

#downarrowhide {
    font-size: 175%;
    visibility: hidden;
    margin-right: 5px;
}


#board {
    width: 350;
    margin: 0 auto;
    margin-top: 3px;

}

#boardfirst,
#boardsecond,
#boardthird,
#boardforth,
#boardfifth,
#boardsixth {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    padding-bottom: 0;
    justify-content: center;
}


#boardlast {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
	padding-bottom: 0;
    margin-bottom: 10;
    justify-content: center;
}


#archiveboard {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* rows start from the left */
    width: 345px;
    /* pick a width that fits N tiles per row */
    margin: 0 auto;
    /* center the board as a block */
}


.archivetile {
    border: 2px solid lightgray;
    border-radius: 5px;
    width: 45px;
    height: 45px;
    margin: 7px;
    color: white;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* #boardlast1 {

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
} */

/* Main answer container */
/* ANSWER CONTAINER */
#answer {
    width: 330px;
    min-height: 35px;      /* ← keeps keyboard stable */
    margin: 0 auto 0px auto;
	margin
    padding: 4px 6px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    font-family: 'Courier New', monospace;
    font-weight: bolder;
    font-size: 15px;
}


/* BASE FOR ALL BORDER SEGMENTS */
#answer .border-seg {
    position: absolute;
    background: gold;
    opacity: 0;

    animation-duration: 0.8s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

/* TOP BORDER */
#answer .border-top {
    height: 3px;
    top: -3px;
    left: 0;
    width: 0;
    animation-name: borderTop;
    animation-delay: 0s;
}

/* RIGHT BORDER */
#answer .border-right {
    width: 3px;
    right: -3px;
    top: 0;
    height: 0;
    animation-name: borderRight;
    animation-delay: 0.2s;
}

/* BOTTOM BORDER */
#answer .border-bottom {
    height: 3px;
    bottom: -3px;
    right: 0;
    width: 0;
    animation-name: borderBottom;
    animation-delay: 0.4s;
}

/* LEFT BORDER */
#answer .border-left {
    width: 3px;
    left: -3px;
    bottom: 0;
    height: 0;
    animation-name: borderLeft;
    animation-delay: 0.6s;
}

/* WHEN ANIMATION SHOULD RUN */
#answer.run-border .border-seg {
    animation-play-state: running;
}

/* KEYFRAMES */
@keyframes borderTop {
    0%   { width: 0;   opacity: 1; }
    100% { width: 100%; opacity: 1; }
}

@keyframes borderRight {
    0%   { height: 0;   opacity: 1; }
    100% { height: 100%; opacity: 1; }
}

@keyframes borderBottom {
    0%   { width: 0;   opacity: 1; }
    100% { width: 100%; opacity: 1; }
}

@keyframes borderLeft {
    0%   { height: 0;   opacity: 1; }
    100% { height: 100%; opacity: 1; }
}




.animated {
    animation: flip 0.5s ease;
}

@keyframes flip {
    0% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(0);
    }

    100% {
        transform: scaleY(1);
    }
}

.popanswer {
    animation: pop 0.3s linear 1;
}

.animate-charcter {
    text-transform: uppercase;
    background-image: linear-gradient(-225deg,
            #fff800 0%,
            #ff1361 29%,
            #44107a 67%,
            #231557 100%);
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear 3;
    display: inline-block;
    font-size: 16px;
}

@keyframes textclip {
    to {
        background-position: 200% center;
    }
}

.headerimage {
    padding: 0;
    margin-top: 0;
    width: 250px;
}

.email {
    font-size: 30px;
    text-align: center;
}



div.scroll {
    background-color: #fe1ggf;
    /* width: 550px; */
    max-height: 70vh;
    /* limits height to 70% of the viewport */
    overflow-y: auto;
    /* enables vertical scrolling */
    /* padding: 0px 15px 15px 15px; */
    padding: 0px;
    scroll-behavior: smooth;
}

.tile {
    /* Box */
    border: 2px solid lightgray;
    border-radius: 5px;
    width: 25px;
    height: 25px;
    margin: 2.5px;
    /* Text */
    color: white;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
	position: relative;
	/* background: rgba(20, 20, 20, 0.6); */
  /* backdrop-filter: blur(16px); */
  /* overflow: hidden; */

}
/* Bottom fill */
.tile::after , .tilesmall::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 8%; /* small fill */
  background: linear-gradient(
    to top,
    rgba(211, 211, 211, 2.18),
    rgba(211, 211, 211, 1.05)
  );
  /* pointer-events: none; */
}

.tilesmall {
    /* Box */
    border: 2px solid lightgray;
    border-radius: 3px;
    width: 20px;
    height: 20px;
    margin: 1.5px;
    /* Text */
    color: white;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    justify-content: center;
	position: relative;
}



.voweltile {
    /* Box */
    border: 2px solid red;
    border-radius: 5px;
    width: 25px;
    height: 25px;
    margin: 2.5px;
    /* Text */
    color: white;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
	position: relative;
}

.voweltile::after, .voweltilesmall::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 8%; /* small fill */
  background: linear-gradient(
    to top,
    rgba(255, 0, 0, 2.18),
    rgba(255, 0, 0, 1.05)
  );
  /* pointer-events: none; */
}


.voweltilesmall {
    /* Box */
    border: 2px solid red;
    border-radius: 3px;
    width: 20px;
    height: 20px;
    margin: 1.5px;
    /* Text */
    color: white;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
	position: relative;
}


.poptile {
    animation: pop 0.3s linear 1;
    border: 2px solid #4b4b4e;
}

@keyframes pop {
    50% {
        transform: scale(1.2);
    }
}

.shaketile {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.5s;

    /* When the animation is finished, start again */
    animation-iteration-count: 1;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

#stats {
    position: absolute;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    width: 365px;
    margin-left: auto;
    margin-right: auto;
    left: 2;
    right: 2;
    top: 5px;
    text-align: center;
}

#stats-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    text-align: center;
    color: white;
}

.stats-item {
    display: flex;
    align-items: center; /* fixes vertical alignment */
    gap: 16px;           /* spacing between icons 1–2 and 3–4 */
}

.disabled {
    pointer-events: none;
    opacity: 0.5;
}


.correct {
    background-color: #6AAA64;
    color: white;
    border-color: white;
	position: relative;
	
}

/* Bottom fill */
.correct::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 8%; /* small fill */
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 2.18),
    rgba(255, 255, 255, 1.05)
  );
  /* pointer-events: none; */
}

.correctarch {
    background-color: #6AAA64;
    color: white;
    border-color: white;
}

.starting {
    background-color: orange;
    color: white;
    border-color: white;
	position:relative;
}

/* Bottom fill */
.starting::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 8%; /* small fill */
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 2.18),
    rgba(255, 255, 255, 1.05)
  );
  /* pointer-events: none; */
}

.present {
    background-color: #C9B458;
    color: white;
    border-color: white;
}

.absent {
    background-color: #787C7E;
    color: white;
    border-color: white;
}

.failed {
    background-color: #FF0000;
    color: white;
    border-color: white;
	position:relative;
}

.failed::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 8%; /* small fill */
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 2.18),
    rgba(255, 255, 255, 1.05)
  );
  /* pointer-events: none; */
}

.failedarch {
    background-color: #FF0000;
    color: white;
    border-color: white;
}

.easyguess {
    background-color: black;
    color: black;
    border-color: black;
}

#board > div[id^="board"] {
  width: 350px;
  background: #0a0a0a;
  border-radius: 8px;
  /* padding: 2px; */
  /* margin: 5px 0; */
  width: 99%;
  justify-content: center;
  border: 2px solid rgba(255,255,255,0.4);
  box-shadow:
    0 0 10px rgba(255,255,255,0.5),
    0 0 20px rgba(255,255,255,0.3),
    inset 0 0 10px rgba(255,255,255,0.2);
}


.connector.vertical-glow {
  position: relative;
  width: 100%;
  height: 0;          /* takes no vertical space */
  margin-bottom: 10;
}

/* glowing down arrow */
.connector.vertical-glow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;          /* adjust to sit visually between items */
  width: 10px;
  height: 10px;

border-left: 3px solid #ffffff; border-bottom: 3px solid #ffffff;
  border-radius: 2px;
  transform: translateX(-50%) rotate(-45deg);
/* soft directional glow */ box-shadow: 0px 6px 8px rgba(255, 255, 255, 0.45);
}





.keyboard-row {
    width: 400px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.key-tile {
    width: 36px;
    height: 55px;
    margin: 1px;
    border: 1px solid lightgray;
    border-radius: 0%;
    /* Text */
    font-size: 20px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mystery {
    position: relative;
    background: white;
}

.mystery-icon {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 18px;
    pointer-events: none;
}

.key-tile-disabled {
    border: 1px solid rgb(250, 0, 0);
    /* color: #FF0000; */
    opacity: 0.5;
}

.key-tile-enabled {
    border: 1px solid rgb(250, 0, 0);
}

.enter-key-tile {
    width: 56px;
    height: 55px;
    margin: 1px;
    border: 1px solid lightgray;
    border-radius: 15%;
    /* Text */
    font-size: 20px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 200ms ease-in-out;
    border: 1px solid black;
    border-radius: 5%;
    z-index: 5;
    background-color: black;
    width: 400px;
    max-width: 100%;
}

.modal.active {
    transform: translate(-50%, -50%) scale(1);
}

.modal-header {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid white;
    color: white;

}

.modal-header .modal-title {
    font-size: 1.25rem;
    font-weight: bold;
    font-size: 16px;
}

.modal-header .close-button {
    font-size: 1.25rem;
    font-weight: bold;
    cursor: pointer;
    border: none;
    outline: none;
}

.modal-body {
    padding: 0px 15px 10px;
    text-align: left;
    color: lightgrey;
    font-size: 12px;
    scroll-behavior: smooth;
    text-align: justify;
    max-height: 80vh;
    /* limits height to 80% of the viewport */
    overflow-y: auto;
    /* enables vertical scrolling */

}

.summary {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 200ms ease-in-out;
    border: 1px solid black;
    border-radius: 5%;
    z-index: 5;
    background-color: black;
    width: 400px;
    max-width: 100%;
	max-height: 95vh; /* or whatever height you want */ overflow-y: auto; /* enables vertical scrolling */ overflow-x: hidden; /* prevents sideways scrollbars */ scroll-behavior: smooth;	
}

.summary.active {
    transform: translate(-50%, -50%) scale(1);
}

.summary-header {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid white;

}

.summary-header .summary-title {
    font-size: 1.25rem;
    font-weight: bold;
    font-size: 16px;
}

.summary-header .close-button {
    font-size: 1.25rem;
    font-weight: bold;
    cursor: pointer;
    border: none;
    outline: none;
}

.summary-body {
    padding: 10px 15px;
    text-align: left;
    color: white;
    font-size: 12px;
    scroll-behavior: smooth;
}

.summary-item {
    font-size: 1.25rem;
    font-weight: bold;
    font-size: 12px;
}



.addmodal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 200ms ease-in-out;
    border: 1px solid black;
    border-radius: 5%;
    z-index: 5;
    background-color: black;
    width: 400px;
    max-width: 100%;
}

.addmodal.active {
    transform: translate(-50%, -50%) scale(1);
}

.addmodal-header {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid white;

}

.addmodal-header .addmodal-title {
    font-size: 1.25rem;
    font-weight: bold;
    font-size: 16px;
}

.addmodal-header .close-button {
    font-size: 1.25rem;
    font-weight: bold;
    cursor: pointer;
    border: none;
    outline: none;
}

.addmodal-body {
    padding: 10px 15px;
    text-align: justify;
    color: lightgray;
    font-size: 12px;
}

.timemodal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 200ms ease-in-out;
    border: 1px solid black;
    border-radius: 5%;
    z-index: 5;
    background-color: black;
    width: 400px;
    max-width: 100%;
}

.timemodal.active {
    transform: translate(-50%, -50%) scale(1);
}

.timemodal-header {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid white;

}

.timemodal-header .timemodal-title {
    font-size: 1.25rem;
    font-weight: bold;
    font-size: 16px;
}

.timemodal-header .close-button {
    font-size: 1.25rem;
    font-weight: bold;
    cursor: pointer;
    border: none;
    outline: none;
}

.timemodal-body {
    padding: 10px 15px;
    text-align: justify;
    color: lightgray;
    font-size: 12px;
}

.pastmodal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 200ms ease-in-out;
    border: 1px solid black;
    border-radius: 5%;
    z-index: 5;
    background-color: black;
    width: 400px;
    max-width: 100%;
}

.pastmodal.active {
    transform: translate(-50%, -50%) scale(1);
}

.pastmodal-header {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid white;

}

.pastmodal-header .pastmodal-title {
    font-size: 1.25rem;
    font-weight: bold;
    font-size: 16px;
}

.pastmodal-header .close-button {
    font-size: 1.25rem;
    font-weight: bold;
    cursor: pointer;
    border: none;
    outline: none;
}

.pastmodal-body {
    padding: 10px 15px;
    text-align: justify;
    color: lightgray;
    font-size: 12px;
}

.hintmodal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 200ms ease-in-out;
    border: 1px solid black;
    border-radius: 5%;
    z-index: 5;
    background-color: black;
    width: 400px;
    max-width: 100%;
}

.hintmodal.active {
    transform: translate(-50%, -50%) scale(1);
}

.hintmodal-header {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid white;

}

.hintmodal-header .hintmodal-title {
    font-size: 1.25rem;
    font-weight: bold;
    font-size: 16px;
}

.hintmodal-header .close-button {
    font-size: 1.25rem;
    font-weight: bold;
    cursor: pointer;
    border: none;
    outline: none;
}

.hintmodal-body {
    padding: 10px 15px;
    text-align: justify;
    color: lightgray;
    font-size: 12px;
}

.rules-list {
    list-style-position: outside;
    padding-left: 1.4em;
    /* adjust to taste */
}

.collapsible {
    background-color: #222;
    color: white;
    cursor: pointer;
    padding: 6px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 14px;
    border-radius: 6px;
    margin-top: 5px;
    /* text-transform:uppercase;   */
}

.collapsible:hover {
    background-color: #333;
}

.collapsible.active {
    background-color: #444;
}

.collapsible-section ul ul {
    margin-left: 18px;
    /* indent sub‑bullets */
    padding-left: 10px;
    /* optional: adds a bit more spacing */
}


.content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out;
    padding-left: 10px;
}

.error-popup {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(220, 0, 0, 0.9);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9999;
}
.error-popup.show {
  opacity: 1;
}


/* Container */
#timed-bonus {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    pointer-events: none;
    animation: fadeOut 3s ease-out forwards;
}

/* Text */
#timed-bonus .bonus-text {
    background: rgba(0, 0, 0, 0.85);
    padding: 16px 26px;
    border-radius: 12px;
    color: gold;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    opacity: 0;
    transform: scale(0.6);
    animation: popIn 0.8s ease-out forwards;
}

/* Star burst container */
#timed-bonus .burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160px;
    height: 160px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Burst stars */
#timed-bonus .burst::before,
#timed-bonus .burst::after {
    content: "⭐";
    position: absolute;
    font-size: 34px;
    color: gold;
    opacity: 0;
    animation: burstStar 1.6s ease-out forwards;
}

#timed-bonus .burst::before {
    transform: translate(-50%, -50%) rotate(0deg);
}

#timed-bonus .burst::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* Pop-in animation */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }

    40% {
        opacity: 1;
        transform: scale(1.15);
    }

    70% {
        transform: scale(1.0);
    }

    100% {
        opacity: 1;
        transform: scale(1.0);
    }
}

/* Fade-out for whole container */
@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Star burst animation */
@keyframes burstStar {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
    }

    40% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.5);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.0);
    }
}


#life-trade-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.life-trade-box {
    background: #222;
    padding: 24px 32px;
    border-radius: 12px;
    color: white;
    text-align: center;
    font-size: 20px;
    width: 300px;
}

.life-trade-title {
    font-size: 24px;
    margin-bottom: 12px;
    color: gold;
}

.life-trade-buttons button {
    margin: 10px;
    padding: 10px 20px;
    font-size: 18px;
    border-radius: 8px;
    cursor: pointer;
}

#life-restored {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    background: rgba(0, 0, 0, 0.85);
    color: #ff4d4d;
    border-radius: 12px;
    font-size: 28px;
    font-weight: bold;
    z-index: 99999;
    opacity: 0;
    animation: lifePop 2s ease-out forwards;
}

@keyframes lifePop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.6);
    }

    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }

    40% {
        transform: translate(-50%, -50%) scale(1.0);
    }

    80% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.0);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
}

.rules-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 20px; /* space between bullets and image */
}

.rules-list {
    flex: 1; /* list takes available width */
}

.rules-image {
    width: 140px;   /* adjust size as needed */
    height: auto;
	border-radius: 8px;
	transform: translateY(10px); /* move image down */
}
#perfect-solve {
    position: fixed;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
    pointer-events: none;
    animation: perfectFade 3s ease-out forwards;
}

/* Text */
#perfect-solve .perfect-text {
    background: rgba(0, 0, 0, 0.85);
    padding: 18px 30px;
    border-radius: 14px;
    color: gold;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    opacity: 0;
    transform: scale(0.6);
    animation: perfectPop 0.8s ease-out forwards;
}

/* Burst */
#perfect-solve .perfect-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 180px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

#perfect-solve .perfect-burst::before,
#perfect-solve .perfect-burst::after {
    content: "⭐";
    position: absolute;
    font-size: 40px;
    color: gold;
    opacity: 0;
    animation: perfectBurst 1.8s ease-out forwards;
}

#perfect-solve .perfect-burst::before {
    transform: translate(-50%, -50%) rotate(0deg);
}

#perfect-solve .perfect-burst::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* Pop */
@keyframes perfectPop {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }

    40% {
        opacity: 1;
        transform: scale(1.2);
    }

    70% {
        transform: scale(1.0);
    }

    100% {
        opacity: 1;
        transform: scale(1.0);
    }
}

/* Fade */
@keyframes perfectFade {
    0% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Burst */
@keyframes perfectBurst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
    }

    40% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.6);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.2);
    }
}

.email {
    font-weight: bold;
    font-size: 14px;
}

#submitter {
    text-transform: uppercase;
    font-family: 'Courier New', cursive;
    text-align: center;
    color: red;
    font-size: 12px;
    font-weight: bold;
}


#overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: GrayText;
    opacity: 0;
    pointer-events: none;
    transition: 200ms ease-in-out;
}

#overlay.active {
    opacity: 1;
    pointer-events: all;
}

#overlay2 {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: GrayText;
    opacity: 0;
    pointer-events: none;
    transition: 200ms ease-in-out;
}

#overlay2.active {
    opacity: 1;
    pointer-events: all;
}



#overlay3 {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: GrayText;
    opacity: 0;
    pointer-events: none;
    transition: 200ms ease-in-out;
}

#overlay3.active {
    opacity: 1;
    pointer-events: all;
}


#overlay1 {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: GrayText;
    opacity: 0;
    pointer-events: none;
    transition: 200ms ease-in-out;
}

#overlay1.active {
    opacity: 1;
    pointer-events: all;
}

#overlay4 {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: GrayText;
    opacity: 0;
    pointer-events: none;
    transition: 200ms ease-in-out;
}

#overlay5.active {
    opacity: 1;
    pointer-events: all;
}


#overlay5 {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: GrayText;
    opacity: 0;
    pointer-events: none;
    transition: 200ms ease-in-out;
}

#overlay4.active {
    opacity: 1;
    pointer-events: all;
}

/* #top-bar { */
/* display: flex; */
/* justify-content: center; */
/* align-items: center; */
/* gap: 12px; */
/* width: 100%; */
/* } */
#top-resources {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    margin-bottom: 0px;
}


#dynamite-btn {
    background: #222;
    color: gold;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    border: 0.1px solid gold;
	margin-Bottom: 10px;

}

#dynamite-btn.shake {
    animation: shake 0.4s;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    50% {
        transform: translateX(4px);
    }

    75% {
        transform: translateX(-4px);
    }

    100% {
        transform: translateX(0);
    }
}

.removed-by-dynamite {
    opacity: 0.3;
    pointer-events: none;
}

#dynamite-blast {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    font-size: 60px;
    opacity: 0;
    animation: blastPop 1.2s ease-out forwards;
}

@keyframes blastPop {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }

    40% {
        opacity: 1;
        transform: scale(1.4);
    }

    100% {
        opacity: 0;
        transform: scale(1.0);
    }
}


.flash1 {
    color: orange;
}

.flash2 {
    animation: flash 3s ease-in-out 5;
}

@keyframes flash {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }
}

/* #submission { */
/* position: relative; */
/* font-family: sans-serif; */
/* color: red; */
/* text-transform: uppercase; */
/* letter-spacing: 2px; */
/* overflow: hidden; */
/* background: linear-gradient(90deg, #000, #fff, #000); */
/* background-repeat: no-repeat; */
/* background-size: 80%; */
/* animation: animate 6s linear infinite; */
/* -webkit-background-clip: text; */
/* -webkit-text-fill-color: rgba(255, 255, 255, 0); */
/* } */

/* @keyframes animate { */
/* 0% { */
/* background-position: -500%; */
/* } */
/* 100% { */
/* background-position: 500%; */
/* } */
/* } */

#ffhdr,
#sdhdr {
    color: white;
    font-size: 12px;
    margin-bottom: 10px;
    text-align: center;
}

#ffdtl {
    color: darkgray;
    font-size: 11px;
    text-align: justify;
    margin-bottom: 10px;
}

#wins,
#time {
    color: #e6e6e6;
    font-weight: bold;
}

#mode {
    color: #ff9900;
    font-weight: bold;
}


#lives {
    height: 18px;
    font-size: 18px;
    letter-spacing: 10px;
    margin-top: 0;
    margin-bottom: 10;
    color: red;
}

.blink {
    animation: blink-animation 1s steps(5, start) 3;
    -webkit-animation: blink-animation 1s steps(5, start) 3;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@media screen and (min-width: 400px) {
    .keyboard-row {
        width: 400px;
    }

    .key-tile {
        width: 36px;
    }

    .enter-key-tile {
        width: 56px;
    }
}

@media screen and (max-width: 399px) and (min-width: 350px) {

    .keyboard-row,
    #stats {
        width: 350px;
    }

    .key-tile {
        width: 31px;
        height: 50px;
    }

    .enter-key-tile {
        width: 48px;
        height: 50px;
    }
}

@media screen and (max-width: 349px) and (min-width: 310px) {

    .keyboard-row,
    #stats {
        width: 310px;
    }

    .key-tile {
        width: 26px;
        height: 50px;
    }

    .enter-key-tile {
        width: 46px;
        height: 50px;
    }
}