.notification {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #ffcc00;
  color: black;
  padding: 1rem 2rem;
  text-align: center;
  font-size: 1.2rem;
  z-index: 2001;
  opacity: 0;
  pointer-events: none;
}

.notification.show {
  animation: fadeSlide 10s ease forwards;
}

@keyframes fadeSlide {
  0% { opacity: 0; transform: translateY(-20px); }
  10%, 90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-20px); }
}
    /* -----------------------GLOW--------------------*/

body.glow-active::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 1px;
  animation: multicolorPulse 2s linear infinite;
}

@keyframes multicolorPulse {
  0% {
    box-shadow:
      0 0 30px 10px rgba(0, 255, 180, 0.8),
      0 0 60px 20px rgba(0, 255, 180, 0.6),
      inset 0 0 20px 5px rgba(0, 255, 180, 0.5);
  }
  25% {
    box-shadow:
      0 0 35px 15px rgba(0, 180, 255, 0.9),
      0 0 70px 30px rgba(0, 180, 255, 0.7),
      inset 0 0 40px 10px rgba(0, 180, 255, 0.5);
  }
  50% {
    box-shadow:
      0 0 40px 18px rgba(180, 0, 255, 0.9),
      0 0 80px 35px rgba(180, 0, 255, 0.6),
      inset 0 0 50px 20px rgba(180, 0, 255, 0.5);
  }
  75% {
    box-shadow:
      0 0 35px 15px rgba(255, 0, 180, 0.9),
      0 0 70px 30px rgba(255, 0, 180, 0.7),
      inset 0 0 40px 10px rgba(255, 0, 180, 0.5);
  }
  100% {
    box-shadow:
      0 0 30px 10px rgba(0, 255, 180, 0.8),
      0 0 60px 20px rgba(0, 255, 180, 0.6),
      inset 0 0 20px 5px rgba(0, 255, 180, 0.5);
  }
}


    /* Score‐change pop animation */
    .score-change {
      position: fixed;
      top: 40%; left: 50%; transform: translate(-50%, -50%);
      font-family: 'Bangers', cursive;
      font-size: 4rem; font-weight: bold;
      color: #28a745; opacity: 0;
      pointer-events: none; z-index: 2002;
      animation: pop 1s ease forwards;
    }
    .score-change.negative { color: #e74c3c; }
    @keyframes pop {
      0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
      50%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
      100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
    }

 
    main {
      padding: 20px;
      padding-bottom: 4rem; /* space for leaderboard + footer */
    }

    /* Header & Footer */
    header, footer {
      /*background: rgba(0,0,0,0.5);; /* base #00008B at 80% opacity */
        /* 50% gray */
    background-color:#2c3e50;
      color: #fff;
      padding: 0.25rem 0.5rem;
      position: sticky;
      width: 100%;
      box-sizing: border-box;
      z-index: 100;
      box-shadow: 0 4px 6px rgba(0,0,0,0.15);

    }
    header { top: 0; display: flex; align-items: center; justify-content: space-between;}
/* When header shrinks */
 header.shrink {
     height: 60px;
     font-size: 0.5em;
}


body {
    /*--old color:#f1f1f1*/
     background: #ff9320  url('') no-repeat center center;
    background-size: auto;
        margin: 0;
      padding: 0;
  display: flex;
  flex-direction: column;
        font-size: 20px;
       font-family: 'Inria Sans';
        font-variation-settings: "slnt" 0, "wght" 300;
        

}
main {
  flex: 1;           /* this takes all the leftover space */
}
footer {
      color: white;
      text-align: left;
    font-family: "ivysoft-variable", sans-serif;
    font-variation-settings: "slnt" 0, "wght" 500;
        font-size: 1rem;
      display: flex;
      padding: 1rem 1rem;


  
      position: relative;
      bottom: 0;
      width: 100%;
      background-color:#2c3e50;
      gap: 2rem;               /* space between columns */
    
      /* existing styles … */
  display: grid;                 /* keep grid (remove the earlier display:flex) */
  grid-template-columns: 1fr;    /* your 1-column layout */
  place-items: center;           /* center child items horizontally & vertically */
  text-align: center;            /* center inline text inside each item */
          

    }

    .footer-column a {
      color: #f0f0f0;
      text-decoration: none;
      font-size: 1rem;
    
    }
    .footer-column ul,
    .footer-column li,
    .footer-column h4 {
      margin-bottom: 0.75rem;
      font-size: 1rem;
      
        
    }   
    footer[hidden] {
      display: none !important;
    }
    
    @media (max-width: 600px) {
      footer {
        grid-template-columns: repeat(1, 1fr);
      }
    }
    ul {
  list-style-type: none;  /* turn off the default bullets */
  margin: 0;              /* reset default indents */
  padding: 0;             /* reset default indents */
}

/* optionally also target li if you need */
ul li {
  list-style: none;       /* ensure no marker on each <li> */
}

    /* Hide Game Code label & roomCode */
    .room-label, #roomCode { display: none; }

    /* QR in header */
    #qrContainer { display: flex; align-items: center;padding: .5rem }
    #qr img{ transition: width 1s ease-in-out, height 1s ease-in-out; }
    #qr img.small { width: 62px !important; height: 62px !important; }


#qr img.shrunk {
  width: 64px;
  height: 64px;
}
/*---in case you need the hover----*/
/*#qr img.shrunk:hover {
  width: 200px;
  height: 200px;
}*/
#qr img {
  width: 150px;
  height: 150px;
  transition: width 0.3s ease, height 0.3s ease;
  cursor: pointer;
}

#qr img.enlarged {
  width: 200px;
  height: 200px;
}
.qr-frame {
    display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: .25rem;                              /* space inside the frame */
  background:#ffcc00;
  /*background: url('') center/cover;*/
  /*border: 12px solid transparent;  */           /* space for the image-border */
  /*border-image: url('') 30 round;*/
  border-radius: 1px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.qr-frame canvas {
  display: flex;
  background: transparent;                    /* so your parent bg shows through */
}
/* full-screen dark backdrop */
#podiumOverlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3001;
}

/* your podium container sits inside the overlay */
#podiumContainer {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1rem;
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}


/* styling for each spot */
.podium {
  flex: 0 0 100px;
  text-align: center;
  border-radius: 4px;
  padding: 0.5rem;
}
.podium-1 {
  order: 2; transform: scale(1.2);
  background: #ffd700;
}
.podium-2 {
  order: 1; margin-top: 20px;
  background: #c0c0c0;
}
.podium-3 {
  order: 3; margin-top: 40px;
  background: #cd7f32;
}
.podium .position { font-size: 1.25rem; font-weight: bold; }
.podium .name     { margin-top: 0.25rem; font-size: 1rem; }
.podium .score    { margin-top: 0.25rem; font-size: 0.875rem; }

/* dismiss button */
#podiumDismiss {
  display: block;
  margin: 1rem auto 0;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  background: #0055a4;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.trophy {
  display: inline-block;
  margin-left: 0.25rem;
}

.medal {
  display: inline-block;
  margin-left: 0.25rem;
}




/* —or, for a fancier look, you can use a border-image:
.qr-frame {
  padding: 0.5rem;
  border: 12px solid transparent;
  border-image: url('/path/to/frame.png') 30 round;
}
*/


    

    /* Jeopardy grid */
    #grid { display: none; margin-top: 20px; }
    .jeopardy-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 1px;
    }
     /* ─── Generate these files first: parody.woff2, parody.woff, parody.ttf
       You can use a tool like Font Squirrel’s Webfont Generator:
         ➔ https://www.fontsquirrel.com/tools/webfont-generator
       Upload your TTF there and download a kit with .woff2/.woff/.ttf
      */

    @font-face {
      font-family: 'gameFont';
      src: 
        /* Modern browsers get super-compressed WOFF2: */
        url('fonts/parody.woff2') format('woff2'),
        /* Older browsers fall back to WOFF: */
        url('fonts/parody.woff')  format('woff'),
        /* Legacy support: TrueType */
        url('fonts/parody.ttf')   format('truetype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    .category-header {
      background: #ffcc00;
      color: #000;
      padding: 25px;
      text-align: center;
      /*font-family: 'gameFont', sans-serif;*/
      font-family: 'Luckiest Guy', cursive;
      text-transform: uppercase;
      font-size: 1.5rem;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    }
/* When the screen is narrower than 600px… */
@media (max-width: 600px) {
  .category-header {
    /* Lower the font size and padding so it never grows too big */
     /* make it never exceed 100px wide, even on large screens */
    width: 100%;
    max-width: 100px;

    /* optional: center it if it's narrower than its container */
    margin: 0 auto;
         font-size: .7rem;    /* cap the text size */
    padding: 5px;        /* adjust padding too, if needed */
  }
}

       
   .point-cell {
  background: rgba(70,130,180,0.85);
  padding: 15px;
  text-align: center;
  cursor: pointer;
  font-family: 'Bangers', cursive;
  font-size: 1.25rem;
  font-weight: bold;
  color: #fff;
  position: relative;
  background: rgba(70,130,180,0.85);
  overflow: hidden;           /* ensure nothing bleeds outside */
}

.point-cell.torn {
  /* unprefixed mask properties */
  mask-image: url('/buzzrs/assets/images/torn.png');
  mask-mode: alpha;           /* interpret alpha channel */
  mask-size: 100% 100%;       /* cover the entire cell */
  mask-repeat: no-repeat;
  mask-position: center;

  /* WebKit-prefixed for Safari/Chrome */
  -webkit-mask-image:url('/buzzrs/assets/images/torn.png');
  -webkit-mask-mode: alpha;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

    .daily-double { border: 3px solid gold; }
    .empty-cell { background: transparent; cursor: default; }

    /* Sticky Leaderboard above footer */
  #stickyLeaderboard {
  position: fixed;
  bottom: 0.5rem;
  left: 0;
  right: 0;
  width: 100%;
  background: #004080;
  bottom: 0px;
  color: #fff;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0px;
  padding: 0rem;
  box-sizing: border-box;
  z-index: 500;
}
      

    #stickyLeaderboard .player { text-align: center; }
    #stickyLeaderboard .rank { font-weight: bold;   font-size: 3.75rem;     /* bump up from 1.25rem */
    text-align: left; padding: .5rem .5rem;      /* align left instead of centered */}
      
    #stickyLeaderboard .name  { font-size: 1.25rem;font-weight: bolder;font-family: "Luckiest Guy" }
    #stickyLeaderboard .score { font-size: 1.5rem; font-weight: bolder; font-family: "Luckiest Guy"}
      
      /* make each player a 2-col / 2-row grid */
#stickyLeaderboard .player {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.5rem;      /* space between rank & details */
  align-items: center;     /* vertically center name/score */
}

/* rank spans both rows in col-1 */
#stickyLeaderboard .player .rank {
  grid-column: 1;
  grid-row: 1 / span 2;
}

/* name sits in row-1, col-2 */
#stickyLeaderboard .player .name {
  grid-column: 2;
  grid-row: 1;
}

/* score sits in row-2, col-2 */
#stickyLeaderboard .player .score {
  grid-column: 2;
  grid-row: 2;
}
/* when it’s “used,” tear it */
.point-cell.torn {
  clip-path: polygon(
    0%   0%,   /* top-left corner */
    100% 0%,   /* top-right */
    100% 80%,  /* just above bottom-right */
    90%  82%,  /* jag */
    85%  78%,  /* jag */
    70%  85%,  /* jag */
    50%  78%,  /* jag */
    30%  88%,  /* jag */
    10%  80%,  /* jag */
    0%   90%   /* bottom-left */
  );
}


      /* 2) Glow on the “first buzzer” player */

      /* new: glow the whole cell */
    #stickyLeaderboard .player.buzzed-first {
     /* animation: glow 1s ease-in-out infinite alternate;*/
        
           background: #ffcc00;
      color: #000;
          }

    @keyframes glow {
      from { text-shadow: 0 0 4px #ffd700; }
      to   { text-shadow: 0 0 12px #ffd700; }
    }

    /* Modal styles */
    .modal {
      display: none;
      position: fixed; top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.7);
      align-items: center; justify-content: center;
      z-index: 2000;
      display: block;
        display: none;
      flex-direction: column;
    }
    .modal-content {
      background: #fff; padding: 1rem 2rem;
      border-radius: 8px; 
      box-sizing: border-box; 
          overflow-y: auto;
    }
    .modal-content img { max-width: 100%; display: none; margin-top: 10px; }
    .modal-content button { margin: 10px 5px 0; }

    /* Buzzer & Leaderboard Panel */
    #buzzerPanel { display: none; margin-top: 20px; }
    #buzzerPanel h3 { margin: 5px 0; }
    #leaderboard { padding-left: 20px; }
      
      /*-------------------IMAGE-----------------*/
      /* in main stylesheet */
#questionImage {
  display: block;            /* you already toggle this in JS */
  max-width: 100vw;          /* never wider than the screen */
  max-height: 70vh;          /* leave some room for header/footer */
  width: auto;               /* preserve aspect ratio */
  height: auto;
  object-fit: contain;       /* scale to fit without cropping */
  margin: 0 auto;            /* center horizontally */
}
#questionText{
    padding-top: .25rem;
    margin-top: auto;
    text-align: center;
}
      
/*------------------OVERLAY------*/
           #loadingOverlay {
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 3000;

}
#loadingOverlay.hidden {
  display: none;
}   
#loadingOverlay .spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid var(--orange);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}
.loadingOverlay.loadingMessage:empty {
  display: none;
}
      /* when .no-backdrop is set, make overlay transparent */
#loadingOverlay.no-backdrop {
  background: transparent !important;
}

/* if your .loading-box has its own bg or shadow, wipe that too */
#loadingOverlay.no-backdrop .loading-box {
  background: transparent !important;
  box-shadow: none !important;
}


@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.hidden {
  display: none;
}
#feedbackOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
#feedbackContainer {
  background: white;
  padding: 2rem;
  border-radius: 0.5rem;
  width: 90%;
  max-width: 400px;
  text-align: center;
}
.stars {
  font-size: 2rem;
  margin: 1rem 0;
  cursor: pointer;
}
.stars .star {
  padding: 0 0.2rem;
}
#feedbackComments {
  width: 100%;
  height: 5rem;
  margin-bottom: 1rem;
}
#feedbackSubmit {
  padding: 0.5rem 1rem;
}

/* Stats Overlay Styles */

#statsOverlay {
  position: fixed;
  inset: 0;                    /* fill the viewport */
  background: rgba(0, 0, 0, 0.6);
  display: none;              /* show via JS */
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

#statsModal {
  position: relative;         /* positioning context for close button */
  background: #fff;
  width: 80vw;
  height: 80vh;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
}

#statsModal h2 {
  margin: 1rem;
  font-size: 1.25rem;
}

/* Overlay-level close button */
#statsClose {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  font-size: 2rem;            /* enlarged */
  cursor: pointer;
  z-index: 10;
}

/* Stats container with scroll */
#statsContainer {
  flex: 1;                    /* fill the modal */
  padding: 0 1rem 1rem;
  overflow-y: auto;
}

/* Table styling */
#statsContainer table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;        /* wrap long text */
}

/* Sticky caption for table-close button */
#statsContainer table caption {
  caption-side: top;
  position: sticky;
  top: 0;
  background: #fff;
  padding: 0.5rem;
  text-align: right;
  z-index: 2;
}

/* Table-close button inside caption */
.table-close {
  background: transparent;
  border: none;
  font-size: 2rem;            /* enlarged */
  cursor: pointer;
}

/* Table headers and cells */
#statsContainer table th,
#statsContainer table td {
  border: 1px solid #ccc;
  padding: 0.5rem;
  word-wrap: break-word;
}

/* Sticky table header: offset below caption */
#statsContainer table th {
  background: #f0f0f0;
  position: sticky;
  top: 2.5rem;                /* height of caption */
  z-index: 1;
}


/*-------------SIGN IN------------_*/
#loginOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
#loginOverlay.hidden { display: none; }

#loginModal {
  position: relative;
  background: white;
  padding: 2rem;
  border-radius: 8px;
  width: 90%;
  max-width: 360px;
  text-align: center;
}
#loginClose {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

#googleSignInContainer {
  display: flex;
  justify-content: center;  /* horizontal centering */
  align-items: center;      /* vertical centering */
  width: 100%;              /* ensure it spans its parent if needed */
}
/*-------------MANUAL EDITOR for questions csv------------_*/



.manual-editor {
  position: relative;
  background: rgba(255,255,255,0.9);
  padding: 1rem;
  border-radius: 8px;
  max-width: 800px;
  margin: 1rem auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.close-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}
/* Default table layout for desktop */
#questionsTable {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: .5rem;
}
#questionsTable th, #questionsTable td {
  border: 1px solid #ccc;
  padding: .5rem;
}
#questionsTable input {
  font-size:16px; /* prevent mobile zoom on focus */
  width: 100%;
  box-sizing: border-box;
}
.add-btn, .delete-btn, .duplicate-btn {
  color: white;
  border: none;
  font-size: 1.25rem;
  padding: 0 .5rem;
  cursor: pointer;
  border-radius: 4px;
  margin-right: .25rem;
}
.add-btn { background: #28a745; }
.delete-btn { background: #dc3545; }
.duplicate-btn { background: #ffc107; }
.save-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: .75rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 4px;
}





/* Responsive: stack fields on narrow screens */
@media (max-width: 600px) {
  /* Turn table into block layout */
  #questionsTable, #questionsTable tbody, #questionsTable tr, #questionsTable td {
    display: block;
    width: 100%;
  }
  /* Show only the add-button header on mobile */
  #questionsTable thead {
    display: block;
  }
  #questionsTable thead tr th:not(:last-child) {
    display: none;
  }
  #questionsTable thead tr th:last-child {
    display: block;
    text-align: right;
  }
  /* Style each row as a card */
  #questionsTable tr {
    margin-bottom: 1rem;
    padding: .5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  /* Stack each cell with its label */
  #questionsTable td {
    padding: .5rem 0;
    position: flex;

    text-align: left;
  }
  /* Add labels before each cell */
  #questionsTable td:nth-child(1)::before { content: "ID: "; }
  #questionsTable td:nth-child(2)::before { content: "Question: "; }
  #questionsTable td:nth-child(3)::before { content: "Answer: "; }
  #questionsTable td:nth-child(4)::before { content: "Category: "; }
  #questionsTable td:nth-child(5)::before { content: "Points: "; }
  #questionsTable td:nth-child(6)::before { content: "Image URL: "; }
  #questionsTable td:nth-child(7)::before { content: "Daily Double: "; }
  #questionsTable td:nth-child(8)::before { content: "Actions: "; }
  /* Make inputs and buttons full-width */
  #questionsTable input,
  #questionsTable .delete-btn,
  #questionsTable .duplicate-btn {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: .5rem;
  }
}
/*-------------- 1) make all rows animatable ---------------*/
#questionsTable tr {
  transition: opacity 0.9s ease, transform 0.9s ease;
  opacity: 1;
  transform: translateY(0);
}

/* 2) starting state for new rows */
 #questionsTable tr.fade-in {
  opacity: 0;
  transform: translateY(-10px);
}

/* 3) exit state when deleting */
#questionsTable tr.fade-out {
  opacity: 0;
  transform: translateY(10px);
}

/*-----------------ACTION BUTTONS------------*/
#actionButtonsContainer {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0;
}

.action-btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-family: formiga;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-a {
  background-color: #2c3e50;    /* same as your Init button */
  color: #fff;
}
.btn-a:hover {
  background-color: #1f2a36;
}

.btn-b {
  background-color: #007bff;    /* mimic your save-btn */
  color: #fff;
}
.btn-b:hover {
  background-color: #0056b3;
}

button:disabled {
  opacity: 0.5;           /* faded appearance */
  cursor: not-allowed;    /* “no-go” cursor */
  background-color: #ccc; /* light grey background */
  color: #666;            /* darker grey text */
}

/*-----------------AVATAR STYLING------------*/
.avatar{position:relative}
.avatar:hover .signout,
.avatar:focus-within .signout{display:flex}
  
.avatar{display:flex;gap:.5rem;cursor:pointer}
.avatar img{width:40px;height:40px;border-radius:50%;}

/* full-screen black backdrop */
.rooms-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  padding: 2rem 2rem; /* or whatever size you want */
}

/* white card */
.rooms-overlay-content{
  position:relative;                      /* ⬅︎ gives an anchor box */
  width:80%;max-height:80vh;
  padding:5rem 2.5rem;
  background:#fff;color:#000;
  border-radius:8px;overflow:auto;
}

/* universal “close” button */
.rooms-overlay-close{
  position:absolute;top:2rem;right:.75rem;   /* always in the corner */
  background:transparent;border:none;
  font-size:2rem;line-height:1;
  color:#444;cursor:pointer;
}
.rooms-overlay-close:hover{color:#000}

.hidden{display:none}

/*-----------------ROOM CARDS STYLING------------*/


.room-card{
  display:flex;justify-content:space-between;align-items:center;
  padding:.75rem 1rem;margin:.5rem 0;border:1px solid #ccc;
  border-radius:6px;cursor:pointer;gap:1rem;
  transition:background .2s,box-shadow .2s;
}
.room-card:hover{background:#fafafa;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.room-card .meta{display:flex;gap:1.25rem;font-size:.875rem}
.room-card .meta span{white-space:nowrap}
.badge{padding:.15rem .5rem;border-radius:12px;font-size:.75rem;color:#fff; text-transform: uppercase;
}
.badge.live{background:#2ecc71}
.badge.done{background:#aaa}

.details{margin:.5rem 0 1rem 0;display:none}
.details table{width:100%;border-collapse:collapse;font-size:.9rem}
.details th,.details td{border:1px solid #ddd;padding:.4rem .5rem}
.details th{background:#f4f4f4;text-align:left}
/* ───────── mobile tweaks ───────── */
@media (max-width: 850px){
  /* card turns into a vertical block */
  .room-card{
    flex-direction:column;align-items:flex-start;
    gap:.5rem;padding:.75rem;
  }
  /* meta line wraps & shrinks font */
  .room-card .meta{
    flex-wrap:wrap;gap:.5rem;font-size:.8rem;
  }
  /* each span takes at most 45 % so two wrap per row */
  .room-card .meta span{flex:0 0 45%}
  /* bigger tap target */
  .room-card{border-width:2px}
  /* overlay body gets side-padding */
    .rooms-overlay-content{width:95%;  padding: 0 1rem 1rem 1rem;} /* ⬅ only horizontal and bottom padding */
}
/* ───────── SIGN OUT ───────── shows the dropdown on avatar hover / focus */
.avatar{position:relative}
.avatar:hover .signout,
.avatar:focus-within .signout{display:flex}

.signout{
  position:absolute;top:100%;right:0;
  margin-top:.25rem;padding:.25rem .75rem;
  font-size:1rem;border:1px solid #ccc;border-radius:4px;
  background:#fff;color:#333;cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.15);white-space:nowrap;
}
.signout:hover{background:#f2f2f2}

/* ───────── BADGES  ───────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-left: 0rem;
  padding: 0.3em 0.7em;
  font-size: 0.9em;
  font-weight: 600;
  color: white;
  background-color: #007bff;
  border-radius: 0.5em;
  vertical-align: middle;     /* ⬅ helps align inline with text */
  line-height: 1;             /* ⬅ flattens any extra height */
  transform: translateY(-1px);/* ⬅ manually nudge up slightly */
}

.badge.Beginner      { background: #6c757d; }
.badge.Curious       { background: #17a2b8; }
.badge.Challenger    { background: #ffc107; color: #000; }
.badge.Professional  { background: #28a745; }
.badge.Veteran       { background: #fd7e14; }
.badge.Elite         { background: #dc3545; }
.badge.Unranked      { background: #343a40; }

.badge i {
  font-size: 1em;
  line-height: 1;
  vertical-align: middle;
  text-align: center;
}
.badge.Elite {
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 0px rgba(255, 215, 0, 0.8);
  }
  50% {
    box-shadow: 0 0 10px 4px rgba(255, 215, 0, 0.8);
  }
  100% {
    box-shadow: 0 0 0px rgba(255, 215, 0, 0.8);
  }
}
.badge {
  animation: slide-in 0.6s ease-out both;
}

@keyframes slide-in {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ───────── Buzzrs Title  ───────── */


.gameset-meta {
  margin-bottom: 1rem;
}

.gameset-meta label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.3rem;
  color: #333;
}

.gameset-meta input[type="text"] {
  padding: 0.5rem;
  width: 100%;
  max-width: 400px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1rem;
}



.rooms-overlay-content {
  max-height: 90vh;
  overflow-y: auto;
  background: white;
  border-radius: 8px;
    padding: 0 1rem 1rem 1rem; /* ⬅ only horizontal and bottom padding */

  position: relative;
}

.rooms-overlay-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
          box-shadow: 0 4px 6px rgba(0,0,0,0.15);
        padding: 0 1rem 1rem 1rem; /* ⬅ only horizontal and bottom padding */


}

/* Optional styling for close/signout buttons */
.rooms-overlay-close,
#signOutBtn {
  padding: 0.5rem 0.75rem;
  font-weight: bold;
  border: none;
  background: #eee;
  cursor: pointer;
}

.rooms-overlay-close:hover,
#signOutBtn:hover {
  background: #ddd;
}

/* generic responsive image */
.img-fluid {
  display: inline-flex;
  width: 50%;
  height: auto;
  max-width: 100%;
  align-content: center;
}

/* primary CTA button (the “Try It Now!”) */
.btn-cta {
  background-color: #2c3e50;
  color: #ffffff;
  padding: 20px 20px;
  border: none;
  border-radius: 4px;
  font-family: formiga;  /* same as before */
  font-size: 25px;
  cursor: pointer;
}

/* Actions */
.actions{ margin-top:4px; display:flex; gap:8px; }
.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  padding:1rem 1rem; border-radius:10px; font-weight:700;
  border:1px solid #111827; color:#111827; background:#fff;
}
.btn.play{ background:#111827; color:#fff; border-color:#111827; }
/* ================= CSS (add to buzzers_main.css) ================= -->*/

  /* Grid + spacing */
  .container{max-width:1100px;margin:0 auto;padding:32px 16px}
  .section{padding:1rem 0}
  .muted{color:#4b5563}

  /* Section 1: split hero */
  .split{display:grid;gap:24px;align-items:center;grid-template-columns:1.05fr .95fr}
  @media (max-width:900px){.split{grid-template-columns:1fr}}
  .title-xl{font-size:clamp(32px,4vw+6px,60px);line-height:1.05;font-weight:900;margin:0}
  .subtitle{font-size:1.5rem;line-height:1.6;margin:.5rem 0 1rem;color:#000}
  .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
  .btn{display:inline-block;padding:.7rem 1rem;border-radius:12px;font-weight:800;text-decoration:none;border:1px solid #111827;color:#111827;background:#fff}
  .btn.primary{background:#111827;color:#fff}
  .media{border-radius:16px;overflow:hidden;border:0px solid #e6e9ef}
  .media img{display:block;width:100%;height:auto}

  /* Section 2: statement + big image */
  .statement{text-align:center;max-width:900px;margin:0 auto 18px}
  .edge{border-radius:18px;overflow:hidden;}
    
.edge img { width: 75%; height: 75%; object-fit: cover; }

  /* Section 3: digestible cards */
  .cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .card{background:#fff;border:1px solid #e6e9ef;border-radius:16px;padding:16px;display:grid;gap:8px}
  .card h3{margin:.2rem 0 0}
  .eyebrow{display:inline-flex;align-items:center;font-weight:800;font-size:.8rem;background:#eef6ff;color:#0b5ed7;border-radius:999px;padding:.25rem .6rem}

  /* Helper */
  .center{display:grid;place-items:center}
    
    /* Cards container (flex, responsive) */
.cards { display:flex; flex-wrap:wrap; gap:16px; margin:18px 0; }
.card  { flex:1 1 260px; max-width:100%; background:#fff; border:1px solid #e6e9ef;
         border-radius:16px; padding:16px; display:grid; gap:10px; }

/* Image thumb (uses CSS variable for the image) */
.thumb {
  --thumb-height: 180px;               /* Adjust height as desired */
  display: block;
  block-size: var(--thumb-height);
  border-radius: 12px;
  border: 1px solid #eef2f7;
}

    /* Card base + lift */
.card{
  position: relative;
  background:#fff;
  border:1px solid #e6e9ef;
  border-radius:16px;
  padding:16px;
  display:grid;
  gap:10px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow: 0 6px 18px rgba(10,20,40,.05);
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(10,20,40,.12);
  border-color:#e2e8f0;
}
.card:focus-within{
  outline: 3px solid #bfdbfe; /* visible keyboard focus */
  outline-offset: 3px;
}

/* Image thumb (no gradient; zoom on hover) */
.thumb{
  --thumb-height: 180px;                /* tweak height */
  display:block;
  block-size: var(--thumb-height);
  border-radius:12px;
  border:1px solid #eef2f7;
  background: var(--thumb) center / cover no-repeat;
  background-color:#f3f6fa;             /* fallback */
  transition: background-size .4s ease, box-shadow .25s ease;
  box-shadow: inset 0 0 0 0 rgba(0,0,0,0);
}
/* Subtle zoom + inner shadow on hover */
.card:hover .thumb{
  background-size: 110% auto;           /* gentle zoom */
  box-shadow: inset 0 0 0 9999px rgba(0,0,0,.02);
}

/* Optional variant: fit entire image (no crop) */
.thumb--contain{ background-size: contain; }

/* Optional: keep a consistent aspect ratio instead of fixed height */
.thumb--ratio{ aspect-ratio: 16 / 9; block-size: auto; }

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .card, .thumb { transition: none !important; }
}





/* Optional: tighter gaps on very small screens */
@media (max-width: 480px) { .cards { gap:12px; } }
    
    /*---hide once games begins---*/
body.game-started #s1-hero,
body.game-started #s2-how,
body.game-started #s3-benefits,
body.game-started #s4-differentiators,
body.game-started #s5-cta, 
body.game-started #avatarimg, {
  display: none !important;
    
}
body.game-started{
    background: #011331;
}