.hidden {
     display: none;
}
/* Sticky header */
 header {
     position: sticky;
     top: 0;
     display: flex;
     justify-content: space-between;
    /* Space between left and right areas */
     align-items: center;
     text-align: left;
     background: #2c3e50;
     color: #ecf0f1;
     padding: 20px 30px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.2);
     transition: all 0.9s ease;
     z-index: 1000;
}
/* When header shrinks */
 header.shrink {
     height: 40px;
     font-size: 0.5em;
}
/* Left side content */
 .header-left {
     display: flex;
     flex-direction: column;
}
 .header-left h1{
     margin: 0;
     font-family: 'Fascinate', cursive;
     font-size: 2.5em;
     margin-bottom: 0rem;
}
 .header-left p {
     font-size: 1em;
}
/* Right side buttons container */
 .header-right {
     display: flex;
     gap: 10px;
    /* Space between buttons */
     flex-wrap:wrap;
    /* Prevent wrapping */
}
/* Button styling */
 .header-right button {
     flex-shrink: 0;
    /* Prevent buttons from shrinking */
     padding: 10px 20px;
     font-size: 16px;
     font-family: 'Inria Sans';
     border: none;
     border-radius: 4px;
     cursor: pointer;
     background-color: #2c3e50;
     color: #fff;
     transition: background-color 0.9s ease;
}
 .header-right button:hover {
     background-color: #34495e;
}
/* Media query to hide buttons on small screens */
 @media (max-width: 600px) {
     .header-right button {
         display: none;
        /* Hide the buttons */
    }
}
 .room-info-style {
     display: inline-flex;
     font-size: 3em;
     font-weight: bolder;
     padding: 1rem;
     text-align: center;
     white-space: nowrap;
     margin: 0 auto;
     position: relative;
}
 .room-header {
     display: inline-flex;
     align-items: center;
     gap: 0.75rem;
     margin-bottom: 1rem;
    /* space below header */
}
 #game-timer {
     font-family:inherit;
     font-size: 1rem;
}
/* Sidebar for game instructions/info */
 .sidebar {
     flex: 1;
     min-width: 250px;
     margin: 1rem;
     padding: 1rem;
    /*border: 5px solid #2c3e50;
    */
     border-radius: 0px;
}
 .sidebar h2 {
     font-family: 'Indie Flower', cursive;
     color: #2980b9;
     margin-bottom: 1rem;
     font-size: 30px;
}
 .sidebar p {
     font-size: 1rem;
     margin-bottom: 0.5rem;
}
 .sidebar input[type="text"] {
     width: 100%;
     box-sizing: border-box;
}
 titles {
     font-family: 'Indie Flower', cursive;
     text-align: center;
     font-size: 40px;
     font-weight: bold;
     display: block;
     margin: 20px 0;
}
 body {
     font-family: 'Inria Sans';
     text-align: center;
     font-size: 20px;
     margin: 0;
     padding: 0;
     background-color:##ff9320;
}
 .container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: flex-start;
     gap: 40px;
     padding: 20px;
}
 body::before {
     content: "";
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-image: "";
    /* url('...');
     */
     background-size: cover;
     background-position: center;
     opacity: 0.10;
     z-index: -1;
}
 .board-container {
     display: flex;
     flex-direction: column;
     align-items: center;
}
 :root {
     /*--columns: 5;*/
     --cell-size: 100px;
     --grid-gap: 10px;
}
 .special-power-icon {
     display: inline-block;
     font-size: 1.2em;
     position: relative;
     z-index: 10;
}
/* entrance animation */
 .start-animation {
     position: fixed;
     top: 50%;
     left: 50%;
     font-size: 100vmin;
     transform: translate(-50%, -50%) scale(1);
     animation: shrinkToMarker 0.8s ease forwards;
     z-index: 9999;
}
 @keyframes shrinkToMarker {
     0% {
         transform: translate(-50%, -50%) scale(1);
         opacity: 1;
    }
     100% {
         transform: translate(-50%, -50%) scale(0.05);
         opacity: 1;
    }
}
 .exit-animation {
     position: fixed !important;
     top: 50% !important;
     left: 50% !important;
     transform: translate(-50%, -50%) scale(0.05);
     font-size: 100vmin;
     animation: growAndFade 0.8s ease forwards;
     z-index: 100;
}
 @keyframes growAndFade {
     0% {
         transform: translate(-50%, -50%) scale(0.05);
         opacity: 1;
    }
     100% {
         transform: translate(-50%, -50%) scale(1);
         opacity: 0;
    }
}
/* SPECIAL‐POWER MODAL */
 .special-power-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(0, 0, 0, 0.7);
     z-index: 1000;
}
 .special-power-overlay.hidden {
     display: none;
}
 .special-power-overlay__content {
     background: #fff;
     padding: 2rem;
     border-radius: 0.5rem;
     text-align: center;
     max-width: 320px;
     width: 90%;
}
 .special-power-overlay__content h2 {
     margin-bottom: 1rem;
}
 .special-power-overlay__content button {
     display: block;
     width: 100%;
     margin: 0.5rem 0;
     padding: 0.75rem;
     font-size: 1rem;
     border: none;
     border-radius: 0.25rem;
     cursor: pointer;
}
 .special-power-overlay__content button.cancel {
     background: transparent;
     color: #555;
     text-decoration: underline;
     font-size: 0.9rem;
}
/* ===== Confetti effect ===== */
 #confetti-stage {
     position: fixed;
     inset: 0;
     pointer-events: none;
    /* won’t block clicks */
     overflow: hidden;
     z-index: 9999;
    /* above everything else */
}
/* ── Confetti pieces ────────────────────────────────────────────── */
 .confetti-piece{
     position:absolute;
     width:8px;
     height:14px;
     background:var(--c,#f94144);
     transform:translate3d(0,0,0) rotate(0deg);
     pointer-events:none;
     opacity:0;
    /* will fade in on burst */
     animation: confetti-explosion 0.7s cubic-bezier(.08,.72,.58,1) forwards, confetti-gravity 2.5s 0.7s linear forwards;
}
/* ── 1) initial “bang” ──────────────────────────────────────────── */
 @keyframes confetti-explosion{
     to{
         opacity:1;
         transform:translate3d(var(--dx),var(--dy),0) rotate(720deg);
    }
}
/* ── 2) drift + fade out ───────────────────────────────────────── */
 @keyframes confetti-gravity{
     0%{
         opacity:1;
         transform:translate3d(var(--dx),var(--dy),0) rotate(720deg);
    }
     100%{
         opacity:0;
         transform:translate3d( calc(var(--dx) + var(--gx)), calc(var(--dy) + 110vh), 0 ) rotate(1440deg);
    }
}
 .board {
     display: grid;
     grid-template-columns: repeat(var(--columns), var(--cell-size));
     gap: var(--grid-gap);
     margin: 20px auto;
     position: relative;
}
 .cell {
     width: var(--cell-size);
     height: var(--cell-size);
     box-sizing: border-box;
     border: 1px solid #000;
     display: flex;
     align-items: center;
     font-weight: bolder;
     justify-content: center;
     background: #cecece;
     position: relative;
     border-radius: 5px;
     font-size: 1.4rem;
}
 .ladder {
     background: purple;
     color: white
}
 .chute {
     background: darkred;
    color:white
}
 .icon {
     position: absolute;
     bottom: 2px;
     right: 2px;
     font-size: 1.5rem;
}
 #info-container p {
     font-size: 1.25em;
    /* or use a pixel value like 20px */
}
 #info-container h2 {
     color:black
}
 .player {
     width: 25px;
     height: 25px;
     border-radius: 50%;
     position: absolute;
     transition: transform 2.5s ease-in-out;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bolder;
     color: white;
     font-size: 20px;
}
 .players-sidebar {
     width: 250px;
     text-align: left;
     border-left: 2px solid #000;
     padding-left: 20px;
}
/* highlight the current player on the leaderboard */
 .leaderboard-me{
     background: red;
    /* highlight */
     color: white;
    /* font colour */
     border-radius: .25rem;
     font-weight: 700;
}
/* make the badge pop a little */
 #leaderboard li span.badge{
     font-size:1.2em;
}
 .progress-track {
     display: flex;
     flex-direction: column;
     gap: 10px;
     margin-top: 10px;
}
 .progress-bar {
     height: 20px;
     width: 100%;
     background-color: #ddd;
     border-radius: 10px;
     position: relative;
}
 .progress-fill {
     height: 100%;
     border-radius: 10px;
     text-align: right;
     padding-right: 5px;
     font-size: 14px;
     color: white;
     line-height: 20px;
}
 .dice {
     width: 70px;
     height: 70px;
     margin: 0 auto;
     font-size: 50px;
     line-height: 70px;
     border: 2px solid #333;
     border-radius: 10px;
     cursor: pointer;
     background: white;
     transition: transform 0.5s ease;
}
 .dice.rolling {
     animation: rollDice 1s;
}
 @keyframes rollDice {
     0% {
         transform: rotate(0deg);
    }
     25% {
         transform: rotate(90deg);
    }
     50% {
         transform: rotate(180deg);
    }
     75% {
         transform: rotate(270deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 .shake {
     animation: shake 1s ease-in-out;
}
 @keyframes shake {
     0%, 100% {
         transform: translateX(0);
    }
     25% {
         transform: translateX(-5px);
    }
     50% {
         transform: translateX(5px);
    }
     75% {
         transform: translateX(-5px);
    }
}
 svg.overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
}
 .side-by-side-container {
     display: flex;
     gap: 1rem;
     justify-content: center;
     flex-wrap: wrap;
}
 footer {
     text-align: center;
     padding: 1rem;
     background: #2c3e50;
     color: #ecf0f1;
     margin-top: 2rem;
     font-size: .8em;
}
 input[type="text"] {
     width: 100%;
     max-width: 400px;
     padding: 12px 16px;
     margin: 8px 0;
     border: 1px solid #ccc;
     border-radius: 4px;
     font-size: 16px;
     transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
 input[type="text"]::placeholder {
     color: #999;
     opacity: 1;
}
 input[type="text"]:focus {
     border-color: #66afe9;
     box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
     outline: none;
}
 select, button {
     font-size: 16px;
     padding: 10px 15px;
     border-radius: 4px;
     margin: 8px 0;
     transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
 select {
     border: 1px solid #ccc;
     background: #fff;
     color: #333;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     cursor: pointer;
}
 select:focus {
     border-color: #66afe9;
     box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
     outline: none;
}
 button {
     background: #2c3e50;
     color: #fff;
     border: none;
     cursor: pointer;
}
 button:hover {
     background: #0056b3;
}
 #teacherImage {
     max-width: 100%;
     height: auto;
     display: block;
    /* optional, for removing inline spacing */
}
 #studentImage {
     max-width: 100%;
     height: auto;
     display: block;
    /* optional, for removing inline spacing */
}
 button:focus {
     outline: none;
     box-shadow: 0 0 8px rgba(0, 123, 255, 0.6);
}
 .csv-upload-container {
     margin: 1rem 0;
     font-family: 'Roboto', sans-serif;
     text-align: center;
}
 .csv-upload-container label {
     display: block;
     margin-bottom: 0.5rem;
     font-size: 16px;
     color: #333;
}
 .csv-upload-container input[type="file"] {
     display: inline-block;
     text-align: center;
     padding: 0.8rem 1rem;
     border: 1px solid #ccc;
     border-radius: 4px;
     font-size: 16px;
     color: #333;
     cursor: pointer;
     transition: border-color 0.3s ease, box-shadow 0.3s ease;
     background: #fff;
     box-sizing: border-box;
}
 .csv-upload-container input[type="file"]:focus {
     border-color: #66afe9;
     box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
     outline: none;
}
 html {
     scroll-behavior: smooth;
}
 .question-fmt{
     font-size: 1.25em;
}
 .big-btn {
     font-size: 1.5em;
    /* Increase font size */
     padding: .5em .5em;
    /* Increase padding for a larger clickable area */
     margin: 0.1em;
    /* Optional: add some margin between buttons */
     cursor: pointer;
    /* Make the buttons appear clickable */
}
/* Small screens: 600px and below */
@media (max-width: 600px) {
  :root {
    --cell-size: 50px;
    --grid-gap: 3px;
  }
}

/* Medium screens: between 601px and 899px */
@media (min-width: 601px) and (max-width: 899px) {
  :root {
    --cell-size: 85px;
    --grid-gap: 5px;
  }
}

/* Large screens: 900px and up */
@media (min-width: 900px) {
  :root {
    --cell-size: 100px;
    --grid-gap: 10px;
  }
}

 .overlay-balloons {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     pointer-events: none;
    /* So underlying elements are clickable if needed */
     z-index: 8000;
}
 #balloonsCanvas {
     width: 100%;
     height: 100%;
}
 .overlay-fireworks {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: none;
     justify-content: center;
     align-items: center;
     pointer-events: none;
     opacity: 1;
     transition: opacity 1s ease-out;
     z-index: 9000;
}
 .overlay-brokenHearts {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     pointer-events: none;
    /* So underlying elements are clickable if needed */
     z-index: 8000;
}
 canvas {
     width: 100%;
     height: 100%;
}
/* Ensure the jarallax container is positioned */
 .jarallax {
     position: relative;
     overflow: hidden;
     min-height: 400px;
}
/* The jarallax image should be behind everything */
 .jarallax-img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: 0;
}
/* Overlay element for gradient effect;
 placed between image and content */
 .overlay-jarallax {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(rgba(255,140,0,0.95), rgba(255,140,0,0.95));
     z-index: 1;
     pointer-events: none;
    /* Prevents the overlay from interfering with interactions */
}
/* Content positioned above the overlay */
 .content {
     position: relative;
     z-index: 2;
     max-width: 800px;
     margin: 0 auto;
     padding: 10px;
     text-align: center;
     color: #000;
}
/* Container that holds the articles */
 .articles-container {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
    /* Space between articles */
     justify-content: space-between;
     padding: 10px;
     box-sizing:border-box;
}
/* Article styling */
 article {
     flex: 1 1 calc(33% - 20px);
    /* Adjust the width: here, roughly three articles per row */
     min-width: 100px;
    /* Ensures articles don’t get too narrow */
    /*background: #f9f9f9;
     border: 1px solid #ccc;
    */
     padding: 20px;
     box-sizing: border-box;
}
 article img {
     width: 50%;
     height: auto;
     display: block;
    /* Ensures no extra space below the image */
     margin: 0 auto 15px;
    /* Top: 0, Left & Right: auto, Bottom: 15px */
}
/* Responsive image inside article */
 article h2 {
     font-size: 20px;
     text-align: center;
     align-content: center;
     font-weight: bolder;
}
/* Responsive adjustment: two columns on medium screens */
 @media (max-width: 800px) {
     article {
         flex: 1 1 calc(50% - 20px);
    }
}
/* Responsive adjustment: one column on small screens */
 @media (max-width: 500px) {
     article {
         flex: 1 1 100%;
    }
}
 #avatar-options {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
    /* centers horizontally */
     align-items: center;
    /* centers vertically */
     display: none ;
}
 .avatar-icon {
     font-size: 2.5rem;
    /* Adjust to your preferred size */
     cursor: pointer;
     padding: 5px;
     margin: 5px;
     transition: border 0.3s;
     display: inline-block;
}
 .avatar-icon:hover {
     opacity: 0.8;
}
 .avatar-icon.selected {
     border: 2px solid blue;
     border-radius: 50%;
     padding: 3px;
    /* Adjust padding so that the border doesn't push the emoji around */
}
 .bot-chat {
     position: absolute;
     top: -35px;
     left: 0;
     background: rgba(255, 255, 255, 0.85);
     color: #222;
     padding: 4px 8px;
     border-radius: 8px;
     font-size: 14px;
     font-family: 'Inria Sans';
     white-space: nowrap;
     box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
     animation: fadeOut 3s ease forwards;
}
 @keyframes fadeOut {
     0% {
         opacity: 1;
    }
     80% {
         opacity: 1;
    }
     100% {
         opacity: 0;
    }
}
/* GENERIC MESSAGE OVERLAY */
 .message-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(0,0,0,0.7);
     z-index: 3000;
}
 .message-overlay.hidden {
     display: none;
}
 .message-overlay__content {
     background: #fff;
     padding: 1.5rem;
     border-radius: 0.5rem;
     max-width: 320px;
     width: 90%;
     text-align: center;
}
 .message-overlay__title {
     margin: 0 0 0.75rem;
     font-size: 1.25rem;
}
 .message-overlay__body {
     margin-bottom: 1rem;
     font-size: 1rem;
}
 .message-overlay__actions {
     display: flex;
     justify-content: center;
     gap: 0.5rem;
     margin-top: 1rem;
}
 .message-overlay__button {
     padding: 0.5rem 1rem;
     border: none;
     border-radius: 0.25rem;
     background: #2c3e50;
     color: #fff;
     font-size: 1rem;
     cursor: pointer;
}