/* =====================================================
   1. IMPORTS
===================================================== */

@import url("/css/base/reset.css");



/* =====================================================
   1. ROOT / PAGE
===================================================== */

:root{
  --trivia-green:#0f3d2a;
  --trivia-green-soft:#245b3f;
  --trivia-gold:#d9ad42;
  --trivia-cream:#fff8e8;
  --trivia-paper:#fffdf7;
  --trivia-ink:#102019;
  --trivia-muted:#5d665f;
  --trivia-border:rgba(15,61,42,.16);
  --trivia-shadow:0 18px 44px rgba(38,23,4,.08);
}

*{
  box-sizing:border-box;
}

.trivia-main{
  overflow:hidden;

  background:
    linear-gradient(
      rgba(22,18,12,.55),
      rgba(22,18,12,.55)
    ),
    url("/media/triviapub.png") center center / cover no-repeat fixed;

  color:var(--trivia-ink);
}

.trivia-section{
  min-height:760px;
  padding:54px 0 72px;
}

.trivia-shell{
  width:min(1320px, calc(100% - 40px));
  margin:0 auto;
}


/* =====================================================
   2. HEADER
===================================================== */

.trivia-header{
  position:relative;
  max-width:760px;
  margin:0 auto 34px;
  padding:34px 48px 32px;
  text-align:center;

  border-radius:34px;
  background:rgba(255,250,238,.88);
  backdrop-filter:blur(12px);
  border:1px solid rgba(217,173,66,.5);

  box-shadow:
    0 30px 80px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.14);
}

.trivia-kicker{
  margin:0 0 12px;
  color:#9b742b;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.trivia-header h1{
  margin:0;
  color:var(--trivia-green);
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(2.5rem, 6vw, 4.8rem);
  line-height:.92;
  text-shadow:0 2px 0 rgba(255,255,255,.35);
}

.trivia-header p{
  max-width:620px;
  margin:16px auto 0;
  color:#27382f;
  font-size:1rem;
  line-height:1.7;
  font-weight:700;
}

.trivia-header-gm-btn{
  position:absolute;
  top:18px;
  right:18px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:0;
  border-radius:999px;
  padding:10px 15px;

  background:#102019;
  color:#fff8e8;

  font-size:.72rem;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;

  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.gm-login-message{
  min-height:20px;
  margin:14px 0 0 !important;
  color:#b3261e !important;
  font-size:.85rem !important;
  font-weight:900;
}



/* =====================================================
   TRIVIA SIDE PANEL MODES
===================================================== */

.trivia-round-panel #soloRoundInfo,
.trivia-round-panel #publicPlayersPanel{
  display:none;
}

.trivia-round-panel.solo-mode #soloRoundInfo{
  display:block;
}

.trivia-round-panel.public-mode #publicPlayersPanel{
  display:block;
}

.trivia-round-panel.public-mode{
  display:flex;
  flex-direction:column;
}

.trivia-round-panel.public-mode .players-mini-panel{
  margin-top:0;
}


/* =====================================================
   SOLO SIDE TABS / LEADERBOARD
===================================================== */

.trivia-side-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:16px;
  padding:6px;
  border-radius:999px;
  background:rgba(22,63,43,.10);
  border:1px solid rgba(155,116,43,.18);
}

.trivia-side-tab{
  min-height:36px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#163f2b;
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
}

.trivia-side-tab.active{
  color:#fff8e8;
  background:#163f2b;
  box-shadow:0 8px 18px rgba(22,63,43,.16);
}

.trivia-side-tab-panel{
  display:none;
}

.trivia-side-tab-panel.active{
  display:block;
}

.solo-leaderboard-list{
  display:grid;
  gap:10px;
}

.solo-leaderboard-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:16px;
  background:rgba(255,250,240,.92);
  border:1px solid rgba(155,116,43,.18);
}

.solo-leaderboard-rank{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  color:#fff8e8;
  background:#9b742b;
  font-size:.78rem;
  font-weight:950;
}

.solo-leaderboard-name{
  min-width:0;
}

.solo-leaderboard-name strong{
  display:block;
  color:#163f2b;
  font-size:.86rem;
  line-height:1.1;
}

.solo-leaderboard-name span{
  display:block;
  margin-top:3px;
  color:#6d552e;
  font-size:.68rem;
  font-weight:900;
}

.solo-leaderboard-score{
  display:grid;
  place-items:center;
  min-width:44px;
  min-height:34px;
  border-radius:12px;
  color:#163f2b;
  background:rgba(216,179,90,.18);
  border:1px solid rgba(155,116,43,.20);
  font-weight:950;
}



/* =====================================================
   3. DASHBOARD LAYOUT
===================================================== */

.trivia-dashboard{
  display:grid;
  grid-template-columns:minmax(220px, 280px) minmax(420px, 680px) minmax(220px, 280px);
  gap:22px;
  align-items:start;
  justify-content:center;
}

.trivia-dashboard-panel,
.trivia-center-panel{
  min-width:0;
}

.trivia-dashboard-panel{
  padding:22px;
  border-radius:26px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(217,173,66,.48);
  box-shadow:var(--trivia-shadow);
}

.panel-kicker{
  margin:0 0 14px;
  color:#9b742b;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-align:center;
}


/* =====================================================
   4. PLAYER SIDE PANEL - EPIC PROFILE CARD
===================================================== */


.trivia-player-panel{
  position:relative;
  overflow:hidden;
  padding:22px;
  border-radius:30px;
  background:
    radial-gradient(circle at 50% 0%, rgba(216,179,90,.20), transparent 36%),
    linear-gradient(180deg, rgba(255,250,240,.86), rgba(238,230,214,.76));
  border:1px solid rgba(216,179,90,.46);
  box-shadow:
    0 26px 70px rgba(0,0,0,.26),
    inset 0 0 0 1px rgba(255,255,255,.28);
}

.trivia-player-panel::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:24px;
  border:1px solid rgba(155,116,43,.18);
  pointer-events:none;
}

.trivia-player-panel::after{
  content:"";
  position:absolute;
  left:-42px;
  bottom:-42px;
  width:180px;
  height:180px;
  opacity:.06;
  pointer-events:none;
  background:url("/media/COSH-Social-Logo.png") center / contain no-repeat;
}

.trivia-player-panel .panel-kicker{
  position:relative;
  z-index:2;
  width:max-content;
  margin:0 auto 16px;
  padding:7px 20px;
  border-radius:999px;
  color:#fff8e8;
  background:linear-gradient(135deg, #0f3d2a, #245b3f);
  border:1px solid rgba(216,179,90,.55);
  box-shadow:0 10px 22px rgba(15,61,42,.16);
}


/* MAIN PLAYER CARD */

.player-side-card{
  position:relative;
  z-index:2;
  text-align:center;
  padding:18px 14px;
  border-radius:24px;
  background:rgba(255,248,232,.86);
  border:1px solid rgba(216,179,90,.38);
  box-shadow:
    0 18px 38px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.7);
}

.player-stat-list div{
  background:
    linear-gradient(180deg, rgba(255,250,240,.96), rgba(255,244,222,.92));
  border:1px solid rgba(216,179,90,.32);
  box-shadow:0 12px 24px rgba(0,0,0,.08);
}

.player-stat-list strong{
  color:#0f3d2a;
  text-shadow:none;
}

.player-stat-list span{
  color:#6d552e;
}

.player-side-card::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:18px;
  border:1px solid rgba(155,116,43,.18);
  pointer-events:none;
}

/* AVATAR - NEW EPIC HTML STRUCTURE */

.player-avatar-epic{
  position:relative;
  display:grid;
  place-items:center;
  width:132px;
  height:132px;
  margin:0 auto 22px;
}

.player-avatar-ring{
  position:relative;
  width:104px;
  height:104px;
  display:grid;
  place-items:center;
  border-radius:50%;
  padding:7px;
  background:
    conic-gradient(from 120deg, #8b6425, #f3d68a, #fff4c7, #b8872e, #8b6425);
  box-shadow:
    0 0 0 7px rgba(216,179,90,.14),
    0 0 34px rgba(216,179,90,.38);
}

.player-avatar-ring::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  background:
    radial-gradient(circle, transparent 62%, rgba(216,179,90,.20) 64%, transparent 73%);
  pointer-events:none;
}

.player-avatar-ring img{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  max-width:90px;
  max-height:90px;
  border-radius:50%;
  object-fit:contain;
  background:#fffaf0;
  border:4px solid #fff8e8;
  padding:9px;
}

.player-level-shield{
  position:absolute;
  left:50%;
  bottom:0;
  z-index:4;
  transform:translateX(-50%);
  min-width:62px;
  padding:5px 9px 7px;
  border-radius:12px 12px 18px 18px;
  color:#fff8e8;
  background:linear-gradient(180deg, #1f6544, #123f2a);
  border:2px solid #d8b35a;
  box-shadow:0 12px 22px rgba(0,0,0,.28);
  text-align:center;
}

.player-level-shield span{
  display:block;
  font-size:.48rem;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.player-level-shield strong{
  display:block;
  font-family:Cinzel, Georgia, serif;
  font-size:1.28rem;
  line-height:1;
}


/* NAME */

.player-side-card h3{
  position:relative;
  z-index:2;
  margin:18px 0 4px;
  color:#163f2b;
  font-family:Cinzel, Georgia, serif;
  font-size:1.05rem;
  line-height:1.15;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.player-side-card p{
  position:relative;
  z-index:2;
  margin:6px 0 0;
  color:#6d552e;
  font-size:.76rem;
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* STAT GRID */

.player-stat-list{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
  margin-top:16px;
}

.player-stat-list div{
  position:relative;
  overflow:hidden;
  min-height:74px;
  display:grid;
  place-items:center;
  padding:12px 8px;
  border-radius:18px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 0%, rgba(216,179,90,.18), transparent 42%),
    linear-gradient(180deg, #123f2a, #082719);
  border:1px solid rgba(216,179,90,.36);
  box-shadow:
    0 14px 26px rgba(0,0,0,.22),
    inset 0 0 20px rgba(216,179,90,.08);
}

.player-stat-list div::before{
  content:"✦";
  position:absolute;
  top:7px;
  right:9px;
  color:rgba(216,179,90,.42);
  font-size:.72rem;
}

.player-stat-list strong{
  display:block;
  color:#f3d68a;
  font-family:Cinzel, Georgia, serif;
  font-size:1.28rem;
  line-height:1;
  text-shadow:0 0 18px rgba(216,179,90,.28);
}

.player-stat-list span{
  display:block;
  margin-top:5px;
  color:#fff8e8;
  font-size:.62rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.09em;
}

/* MOBILE TIGHTEN */

@media(max-width:980px){

  .trivia-player-panel{
    padding:18px;
  }

  .player-avatar-shell{
    width:96px;
    height:96px;
  }

  .player-stat-list div{
    min-height:66px;
  }

}


/* =====================================================
   5. CENTER LOBBY / START CARD
===================================================== */

#triviaLobbyMount{
  width:100%;
  max-width:760px;
  margin:0 auto 22px;
}

#triviaLobbyMount:empty{
  display:none;
}

.trivia-start.hide,
.trivia-card.hide{
  display:none;
}

.trivia-start:not(.hide){
  display:block;
}

.trivia-start-card,
.trivia-card,
.trivia-results{
  width:100%;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(217,173,66,.55);
  border-radius:28px;
  box-shadow:var(--trivia-shadow);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.trivia-start-card{
  padding:34px;
  text-align:center;
}

.trivia-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 0 16px;
  padding:9px 16px;
  border-radius:999px;
  background:var(--trivia-green);
  color:var(--trivia-cream);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.trivia-badge::before{
  content:"?";
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:8px;
  border-radius:50%;
  background:var(--trivia-gold);
  color:var(--trivia-green);
}

.trivia-start-card h2{
  margin:0 0 12px;
  color:var(--trivia-green);
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(2rem, 5vw, 3.2rem);
  line-height:1;
}

.trivia-start-card p{
  max-width:600px;
  margin:0 auto 26px;
  color:var(--trivia-muted);
  font-size:1rem;
  line-height:1.7;
}

.trivia-start-btn,
.trivia-next,
.trivia-results button{
  border:0;
  border-radius:999px;
  padding:15px 28px;
  background:linear-gradient(135deg, var(--trivia-green), var(--trivia-green-soft));
  color:var(--trivia-cream);
  font-size:.95rem;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(15,61,42,.2);
}


/* =====================================================
   CATEGORY PICKER
===================================================== */

.category-picker{
  position:relative;
  display:flex;
  justify-content:center;
  margin:0 auto 18px;
}

.category-picker-btn{
  cursor:pointer;
  user-select:none;
}

.category-dropdown{
  position:absolute;
  top:calc(100% + 12px);
  left:50%;
  transform:translateX(-50%) translateY(-8px);

  width:620px;
  max-width:min(94vw,620px);

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;

  padding:14px;

  border-radius:20px;

  background:#fffdf7;
  border:1px solid rgba(217,173,66,.55);

  box-shadow:
    0 24px 60px rgba(0,0,0,.18),
    0 8px 20px rgba(0,0,0,.08);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:.18s ease;

  max-height:430px;
  overflow-y:auto;
}

.category-dropdown.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.category-option{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:12px 16px;
  min-height:54px;

  border:1px solid rgba(15,61,42,.1);
  border-radius:14px;

  background:#fff8e8;

  color:var(--trivia-green);
  cursor:pointer;
  text-align:left;

  box-shadow:0 8px 18px rgba(15,61,42,.06);
  transition:.18s ease;
}

.category-option:hover{
  transform:translateY(-2px);
  background:#f8efd8;
  border-color:rgba(217,173,66,.55);
  box-shadow:0 14px 26px rgba(15,61,42,.1);
}

.category-option span{
  color:var(--trivia-green);
  font-size:.95rem;
  font-weight:900;
}

.category-option strong{
  color:#a8751a;
  font-size:.74rem;
  font-weight:900;
  white-space:nowrap;
}

@media (max-width:700px){

  .category-dropdown{
    width:min(94vw,380px);
    grid-template-columns:1fr;
    max-height:420px;
    overflow-y:auto;
  }

}


/* =====================================================
   6. GAME CARD - PUB TRIVIA STAGE
===================================================== */

.trivia-card{
  max-width:900px;
  margin:0 auto;
  padding:30px;
  overflow:hidden;
  border-radius:30px;
  background:
    radial-gradient(circle at 50% 0%, rgba(216,179,90,.24), transparent 38%),
    linear-gradient(180deg, rgba(255,250,240,.90), rgba(244,232,206,.86));
  border:1px solid rgba(216,179,90,.55);
  box-shadow:
    0 30px 80px rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(255,255,255,.26);
}

/* TOPBAR */

.trivia-topbar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:14px;
  align-items:center;
  margin-bottom:16px;
  color:#0f3d2a;
  font-size:.82rem;
  font-weight:950;
}

.trivia-topbar > span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  width:max-content;
  max-width:100%;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,250,240,.76);
  border:1px solid rgba(155,116,43,.18);
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}

#categoryCount{
  justify-self:center;
  text-align:center;
}

.trivia-top-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

#scoreCount{
  color:#fff8e8;
  background:linear-gradient(135deg, #123f2a, #1f6544);
  border-color:rgba(216,179,90,.34);
}

.leave-trivia-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  border:0;
  border-radius:999px;
  padding:0 16px;
  background:linear-gradient(135deg, #b3261e, #7f1712);
  color:#fff8e8;
  font-size:.72rem;
  font-weight:950;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(179,38,30,.22);
}

/* HUD CREATED BY JS */

.trivia-hud{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
  margin:0 0 12px;
}

.trivia-hud span{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 10px;
  border-radius:999px;
  color:#163f2b;
  background:rgba(255,250,240,.84);
  border:1px solid rgba(155,116,43,.22);
  font-size:.74rem;
  font-weight:950;
  box-shadow:0 8px 18px rgba(0,0,0,.07);
}

.trivia-hud span::before{
  margin-right:6px;
  font-size:.9rem;
}

#livesCount::before{
  content:"❤️";
}

#streakCount::before{
  content:"🔥";
}

#xpCount::before{
  content:"⭐";
}

#timerCount::before{
  content:"⏱️";
}

#livesCount{
  color:#8f1f18;
  background:rgba(255,232,228,.94);
}

#streakCount{
  color:#8a5f13;
  background:rgba(255,243,204,.94);
}

#xpCount{
  color:#163f2b;
  background:rgba(231,245,236,.94);
}

#timerCount{
  color:#fff8e8;
  background:linear-gradient(135deg, #123f2a, #1f6544);
  border-color:rgba(216,179,90,.38);
}

/* PROGRESS BAR */

.trivia-progress{
  height:14px;
  margin:0 0 30px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(15,61,42,.14);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.10),
    0 8px 20px rgba(0,0,0,.06);
}

.trivia-progress span{
  display:block;
  width:0%;
  height:100%;
  border-radius:999px;
  background:
    linear-gradient(90deg, #0f3d2a, #245b3f 52%, #d9ad42);
  box-shadow:
    0 0 18px rgba(217,173,66,.42),
    inset 0 1px 0 rgba(255,255,255,.32);
  transition:width .35s ease;
}

/* QUESTION */

#questionText{
  margin:0 0 26px;
  color:#0f3d2a;
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(1.85rem, 4vw, 2.65rem);
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.02em;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}

/* ANSWERS */

.answer-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}

.answer-btn{
  position:relative;
  overflow:hidden;
  min-height:76px;
  padding:18px 20px;
  border-radius:20px;
  border:2px solid rgba(15,61,42,.14);
  background:
    linear-gradient(180deg, #fffaf0, #f7ead0);
  color:#0f3d2a;
  font-size:1rem;
  font-weight:950;
  cursor:pointer;
  box-shadow:
    0 12px 26px rgba(15,61,42,.09),
    inset 0 1px 0 rgba(255,255,255,.65);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.answer-btn::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(
    110deg,
    transparent 0%,
    rgba(255,255,255,.35) 42%,
    transparent 70%
  );
  transform:translateX(-100%);
  transition:.35s ease;
}

.answer-btn:hover{
  transform:translateY(-3px);
  border-color:rgba(217,173,66,.72);
  box-shadow:0 18px 34px rgba(15,61,42,.14);
}

.answer-btn:hover::after{
  opacity:1;
  transform:translateX(100%);
}

.answer-btn.correct{
  color:#0f3d2a;
  background:linear-gradient(180deg, #e5faee, #c8efd9);
  border-color:#2d8a55;
  box-shadow:0 14px 32px rgba(45,138,85,.18);
}

.answer-btn.wrong{
  color:#6d130f;
  background:linear-gradient(180deg, #ffe9e6, #ffc9c2);
  border-color:#b3261e;
  box-shadow:0 14px 32px rgba(179,38,30,.18);
}

.answer-btn.selected{
  border-color:#d9ad42;
  box-shadow:0 0 0 4px rgba(217,173,66,.20);
}

.answer-btn:disabled{
  cursor:not-allowed;
}

/* FEEDBACK */

.trivia-feedback{
  min-height:38px;
  margin-top:20px;
  display:grid;
  place-items:center;
  color:#0f3d2a;
  font-size:.95rem;
  font-weight:950;
  text-align:center;
}

.trivia-next{
  display:none;
  margin:22px auto 0;
}

.trivia-next.show{
  display:block;
}

/* MOBILE */

@media(max-width:760px){

  .trivia-card{
    padding:22px 16px;
  }

  .trivia-topbar{
    grid-template-columns:1fr;
  }

  .trivia-topbar > span,
  #categoryCount,
  #scoreCount{
    justify-self:stretch;
    width:100%;
    justify-content:center;
  }

  .trivia-top-actions{
    width:100%;
    justify-content:space-between;
  }

  .trivia-hud{
    grid-template-columns:repeat(2, 1fr);
  }

  .answer-grid{
    grid-template-columns:1fr;
  }

  .answer-btn{
    min-height:62px;
  }

}




/* =====================================================
   GAME HUD ANIMATIONS
===================================================== */

#livesCount.life-lost{
  animation:lifeLost .58s ease both;
}

#streakCount.streak-pop{
  animation:streakPop .58s ease both;
}

#xpCount.xp-gain{
  animation:xpGain .58s ease both;
}

#timerCount.timer-warning{
  background:linear-gradient(135deg, #9b742b, #b3261e);
  box-shadow:0 0 18px rgba(179,38,30,.28);
}

#timerCount.timer-pulse{
  animation:timerPulse .48s ease both;
}

.trivia-card.card-hit{
  animation:cardHit .42s ease both;
}

@keyframes lifeLost{
  0%{ transform:scale(1); }
  35%{ transform:scale(1.12) rotate(-2deg); }
  70%{ transform:scale(.96) rotate(2deg); }
  100%{ transform:scale(1); }
}

@keyframes streakPop{
  0%{ transform:scale(1); }
  45%{ transform:scale(1.14); box-shadow:0 0 22px rgba(217,173,66,.46); }
  100%{ transform:scale(1); }
}

@keyframes xpGain{
  0%{ transform:translateY(0) scale(1); }
  45%{ transform:translateY(-4px) scale(1.12); box-shadow:0 0 22px rgba(217,173,66,.42); }
  100%{ transform:translateY(0) scale(1); }
}

@keyframes timerPulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.1); }
  100%{ transform:scale(1); }
}

@keyframes cardHit{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-7px); }
  40%{ transform:translateX(7px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(4px); }
}

/* =====================================================
   7. RESULTS
===================================================== */

.trivia-results{
  display:none;
  position:relative;
  overflow:hidden;
  max-width:760px;
  margin:0 auto;
  padding:36px 30px;
  text-align:center;

  border-radius:28px;

  background:
    radial-gradient(circle at top,
      rgba(216,179,90,.18),
      transparent 34%),
    linear-gradient(
      180deg,
      rgba(255,250,240,.92),
      rgba(247,239,224,.90)
    );

  border:1px solid rgba(217,173,66,.34);

  box-shadow:
    0 30px 70px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.35);
}

.trivia-results.show{
  display:block;
  animation:resultsAppear .45s ease;
}

.trivia-results h2{
  margin:0 0 14px;
  color:var(--trivia-green);
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(2.4rem,5vw,4rem);
  line-height:.95;
}

.trivia-results p{
  margin:0;
  color:var(--trivia-muted);
  font-size:1rem;
  line-height:1.7;
}

.trivia-result-score{
  width:min(100%,430px);
  margin:28px auto;
  padding:18px;

  border-radius:20px;

  background:#fff8e8;

  border:2px solid rgba(217,173,66,.45);

  color:var(--trivia-green);

  font-size:1.15rem;
  font-weight:900;

  box-shadow:
    0 10px 26px rgba(0,0,0,.08);
}


/* =====================================================
   GAME OVER VERSION
===================================================== */

.trivia-results.game-over-results{

  background:

    radial-gradient(circle at top,
      rgba(179,38,30,.22),
      transparent 34%),

    linear-gradient(
      180deg,
      rgba(255,244,240,.95),
      rgba(245,225,220,.92)
    );

  border-color:rgba(179,38,30,.42);

}

.trivia-results.game-over-results::before{

  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:

    radial-gradient(circle at 15% 20%,
      rgba(179,38,30,.12),
      transparent 24%),

    radial-gradient(circle at 85% 75%,
      rgba(179,38,30,.10),
      transparent 28%);

}

.trivia-results.game-over-results h2{

  color:#8f1f18;

  animation:gameOverTitle .7s ease;

}

.trivia-results.game-over-results .trivia-result-score{

  color:#8f1f18;

  border-color:rgba(179,38,30,.35);

  background:#fff1ef;

}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes resultsAppear{

  from{
    opacity:0;
    transform:translateY(18px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}

@keyframes gameOverTitle{

  0%{
    opacity:0;
    transform:scale(.82);
    letter-spacing:.15em;
  }

  45%{
    transform:scale(1.08);
  }

  100%{
    opacity:1;
    transform:scale(1);
    letter-spacing:0;
  }

}



/* =====================================================
   8. RIGHT ROUND PANEL - PUB BOARD
===================================================== */

.trivia-round-panel{
  position:relative;
  overflow:hidden;
  padding:22px;
  border-radius:30px;
  background:
    radial-gradient(circle at 50% 0%, rgba(216,179,90,.22), transparent 36%),
    linear-gradient(180deg, rgba(255,250,240,.88), rgba(238,230,214,.78));
  border:1px solid rgba(216,179,90,.50);
  box-shadow:
    0 26px 70px rgba(0,0,0,.26),
    inset 0 0 0 1px rgba(255,255,255,.30);
}

.trivia-round-panel::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:24px;
  border:1px solid rgba(155,116,43,.20);
  pointer-events:none;
}

.trivia-round-panel::after{
  content:"";
  position:absolute;
  right:-34px;
  bottom:-34px;
  width:170px;
  height:170px;
  opacity:.07;
  pointer-events:none;
  background:url("/media/COSH-Social-Logo.png") center / contain no-repeat;
}

.trivia-round-panel > *{
  position:relative;
  z-index:2;
}

/* TABS */

.trivia-side-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-bottom:18px;
  padding:6px;
  border-radius:999px;
  background:rgba(15,61,42,.10);
  border:1px solid rgba(155,116,43,.22);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.05);
}

.trivia-side-tab{
  min-height:36px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#0f3d2a;
  font-size:.64rem;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:.18s ease;
}

.trivia-side-tab.active{
  color:#fff8e8;
  background:linear-gradient(135deg, #0f3d2a, #245b3f);
  box-shadow:0 10px 22px rgba(15,61,42,.18);
}

/* ROUND STATS */

.round-stat{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:52px 1fr;
  align-items:center;
  gap:12px;
  min-height:66px;
  padding:12px;
  margin-bottom:12px;
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(255,250,240,.96), rgba(255,244,222,.92));
  border:1px solid rgba(216,179,90,.30);
  box-shadow:
    0 12px 26px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.7);
}

.round-stat::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  background:linear-gradient(110deg, transparent, rgba(255,255,255,.35), transparent);
  transform:translateX(-100%);
  transition:.35s ease;
}

.round-stat:hover::after{
  opacity:1;
  transform:translateX(100%);
}

.round-stat strong{
  display:grid;
  place-items:center;
  width:52px;
  height:46px;
  border-radius:16px;
  background:
    radial-gradient(circle at 35% 20%, rgba(255,255,255,.7), transparent 34%),
    linear-gradient(180deg, rgba(15,61,42,.13), rgba(15,61,42,.08));
  color:#0f3d2a;
  font-family:Georgia, "Times New Roman", serif;
  font-size:1.06rem;
  font-weight:950;
}

.round-stat span{
  color:#0f3d2a;
  font-size:.76rem;
  font-weight:950;
  line-height:1.15;
}

/* PUB PLAY PLAYER LIST */

.players-mini-panel{
  margin-top:0;
  padding-top:0;
  border-top:0;
}

.players-online-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:4px 0 14px;
  padding:0 4px;
}

.players-online-title h3{
  margin:0;
  color:#9b742b;
  font-size:.72rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.16em;
}

.players-online-title #sideOnlineCount{
  display:inline-grid !important;
  place-items:center;
  min-width:34px;
  height:30px;
  padding:0 10px;
  border-radius:999px;
  background:linear-gradient(135deg, #0f3d2a, #245b3f) !important;
  color:#fff8e8 !important;
  font-size:.86rem;
  font-weight:950;
  box-shadow:0 8px 18px rgba(15,61,42,.20);
}

#sidePlayersList{
  display:grid;
  gap:10px;
}

.side-player{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:32px 40px minmax(0, 1fr);
  align-items:center;
  gap:9px;
  min-height:60px;
  padding:9px 10px;
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(255,250,240,.98), rgba(255,244,222,.94));
  border:1px solid rgba(216,179,90,.34);
  box-shadow:
    0 12px 24px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.72);
  transition:.18s ease;
}

.side-player:hover{
  transform:translateY(-2px);
  border-color:rgba(216,179,90,.72);
  box-shadow:0 16px 30px rgba(0,0,0,.12);
}

.side-level-badge{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:linear-gradient(135deg, #9b742b, #d8b35a);
  color:#fff8e8;
  font-size:.78rem;
  font-weight:950;
  box-shadow:0 8px 18px rgba(155,116,43,.24);
}

.side-player img{
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover;
  background:#fffaf0;
  border:2px solid rgba(216,179,90,.45);
}

.side-player strong{
  display:block;
  color:#0f3d2a;
  font-size:.8rem;
  line-height:1.05;
  font-weight:950;
}

.side-player span{
  display:block;
  margin-top:3px;
  color:#6d552e;
  font-size:.66rem;
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* SOLO LEADERBOARD */

.solo-leaderboard-list{
  display:grid;
  gap:10px;
}

.solo-leaderboard-item{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(255,250,240,.98), rgba(255,244,222,.94));
  border:1px solid rgba(216,179,90,.34);
  box-shadow:0 12px 24px rgba(0,0,0,.08);
}

.solo-leaderboard-rank{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  color:#fff8e8;
  background:linear-gradient(135deg, #9b742b, #d8b35a);
  font-size:.82rem;
  font-weight:950;
}

.solo-leaderboard-name strong{
  display:block;
  color:#0f3d2a;
  font-size:.8rem;
  line-height:1.05;
  font-weight:950;
}

.solo-leaderboard-name span{
  display:block;
  margin-top:3px;
  color:#6d552e;
  font-size:.66rem;
  font-weight:850;
}

.solo-leaderboard-score{
  display:grid;
  place-items:center;
  min-width:52px;
  min-height:34px;
  padding:0 8px;
  border-radius:12px;
  color:#0f3d2a;
  background:rgba(216,179,90,.18);
  border:1px solid rgba(155,116,43,.28);
  font-weight:950;
}





/* =====================================================
   PLAYER LEVEL FLAIR
===================================================== */

.side-player{
  position:relative;
  overflow:hidden;
}

.side-player::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.16;
  pointer-events:none;
  background:transparent;
}

.side-player > *{
  position:relative;
  z-index:1;
}

/* LEVELS 1-4 */
.side-player.level-worn-bronze .side-level-badge{
  background:linear-gradient(135deg, #4b2d16, #9a6a35);
}

/* LEVELS 5-9 */
.side-player.level-polished-bronze{
  border-color:rgba(156,92,36,.42);
}

.side-player.level-polished-bronze .side-level-badge{
  background:linear-gradient(135deg, #7a3f18, #d08a3b);
}

/* LEVELS 10-14 */
.side-player.level-bronze-gold{
  border-color:rgba(217,173,66,.55);
}

.side-player.level-bronze-gold .side-level-badge{
  background:linear-gradient(135deg, #8b4f1f, #d9ad42);
}

/* LEVELS 15-19 */
.side-player.level-copper-flame{
  border-color:rgba(194,93,42,.55);
}

.side-player.level-copper-flame::before{
  background:linear-gradient(135deg, rgba(194,93,42,.35), transparent 70%);
}

.side-player.level-copper-flame .side-level-badge{
  background:linear-gradient(135deg, #9e3f20, #ff9b42);
}

/* LEVELS 20-24 */
.side-player.level-dark-bronze{
  border-color:rgba(92,58,31,.58);
}

.side-player.level-dark-bronze .side-level-badge{
  background:linear-gradient(135deg, #2d1b10, #8c5a2f);
}

/* LEVELS 25-29 */
.side-player.level-silver{
  border-color:rgba(170,176,180,.7);
}

.side-player.level-silver .side-level-badge{
  background:linear-gradient(135deg, #71777c, #d7dde1);
  color:#102019;
}

/* LEVELS 30-34 */
.side-player.level-bright-silver{
  border-color:rgba(210,218,222,.9);
  box-shadow:0 10px 24px rgba(150,160,166,.18);
}

.side-player.level-bright-silver .side-level-badge{
  background:linear-gradient(135deg, #9aa3aa, #ffffff);
  color:#102019;
}

/* LEVELS 35-39 */
.side-player.level-silver-sapphire{
  border-color:rgba(78,126,196,.65);
}

.side-player.level-silver-sapphire::before{
  background:linear-gradient(135deg, rgba(78,126,196,.22), transparent 72%);
}

.side-player.level-silver-sapphire .side-level-badge{
  background:linear-gradient(135deg, #69747c, #4e7ec4);
}

/* LEVELS 40-44 */
.side-player.level-silver-diamond{
  border-color:rgba(176,229,255,.85);
}

.side-player.level-silver-diamond .side-level-badge{
  background:linear-gradient(135deg, #b8c7cf, #eaffff);
  color:#102019;
}

/* LEVELS 45-49 */
.side-player.level-platinum{
  border-color:rgba(220,230,230,.95);
  box-shadow:0 12px 28px rgba(180,200,200,.2);
}

.side-player.level-platinum .side-level-badge{
  background:linear-gradient(135deg, #c9d1d1, #ffffff);
  color:#102019;
}

/* LEVELS 50-54 */
.side-player.level-gold{
  border-color:rgba(217,173,66,.85);
  box-shadow:0 12px 28px rgba(217,173,66,.18);
}

.side-player.level-gold .side-level-badge{
  background:linear-gradient(135deg, #a8751a, #f4d36a);
  color:#102019;
}

/* LEVELS 55-59 */
.side-player.level-bright-gold{
  border-color:rgba(255,214,91,.95);
  box-shadow:0 14px 32px rgba(217,173,66,.24);
}

.side-player.level-bright-gold .side-level-badge{
  background:linear-gradient(135deg, #d9ad42, #fff1a8);
  color:#102019;
}

/* LEVELS 60-64 */
.side-player.level-gold-ruby{
  border-color:rgba(190,48,48,.7);
}

.side-player.level-gold-ruby::before{
  background:linear-gradient(135deg, rgba(190,48,48,.2), transparent 72%);
}

.side-player.level-gold-ruby .side-level-badge{
  background:linear-gradient(135deg, #d9ad42, #b3261e);
}

/* LEVELS 65-69 */
.side-player.level-gold-diamond{
  border-color:rgba(255,238,160,.95);
  box-shadow:0 14px 34px rgba(217,173,66,.28);
}

.side-player.level-gold-diamond .side-level-badge{
  background:linear-gradient(135deg, #f0bd38, #ffffff);
  color:#102019;
}

/* LEVELS 70-74 */
.side-player.level-white-gold{
  border-color:rgba(255,250,224,.95);
}

.side-player.level-white-gold .side-level-badge{
  background:linear-gradient(135deg, #ffffff, #d9ad42);
  color:#102019;
}

/* LEVELS 75-79 */
.side-player.level-emerald{
  border-color:rgba(20,135,82,.78);
}

.side-player.level-emerald .side-level-badge{
  background:linear-gradient(135deg, #0f3d2a, #1f9b63);
}

/* LEVELS 80-84 */
.side-player.level-emerald-gold{
  border-color:rgba(31,155,99,.8);
  box-shadow:0 14px 34px rgba(31,155,99,.18);
}

.side-player.level-emerald-gold .side-level-badge{
  background:linear-gradient(135deg, #0f3d2a, #d9ad42);
}

/* LEVELS 85-89 */
.side-player.level-emerald-diamond{
  border-color:rgba(84,220,170,.85);
}

.side-player.level-emerald-diamond .side-level-badge{
  background:linear-gradient(135deg, #0f3d2a, #eaffff);
  color:#102019;
}

/* LEVELS 90-94 */
.side-player.level-emerald-mythic{
  border-color:rgba(64,255,173,.95);
  box-shadow:0 16px 38px rgba(31,155,99,.28);
}

.side-player.level-emerald-mythic::before{
  background:linear-gradient(135deg, rgba(31,155,99,.24), transparent 70%);
}

.side-player.level-emerald-mythic .side-level-badge{
  background:linear-gradient(135deg, #062817, #32ffad);
  color:#102019;
}

/* LEVELS 95-99 */
.side-player.level-emerald-celestial{
  border-color:rgba(255,255,255,.95);
  box-shadow:
    0 16px 40px rgba(31,155,99,.32),
    0 0 0 1px rgba(255,255,255,.75);
}

.side-player.level-emerald-celestial .side-level-badge{
  background:linear-gradient(135deg, #ffffff, #32ffad, #d9ad42);
  color:#102019;
}

/* LEVEL 100 */
.side-player.level-rainbow{
  border-color:rgba(255,255,255,.95);
  box-shadow:0 18px 44px rgba(217,173,66,.32);
}

.side-player.level-rainbow .side-level-badge{
  background:linear-gradient(135deg, #ff4d4d, #ffd84d, #4dff91, #4da6ff, #b84dff);
  color:#fff;
}


/* =====================================================
   9. ANIMATIONS
===================================================== */

.trivia-card:not(.hide),
.trivia-results.show,
.trivia-start:not(.hide) .trivia-start-card{
  animation:triviaCardEnter .42s ease both;
}

@keyframes triviaCardEnter{
  from{
    opacity:0;
    transform:translateY(18px) scale(.985);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.answer-btn{
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.answer-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(15,61,42,.12);
  border-color:rgba(217,173,66,.72);
}

.answer-btn.correct{
  animation:correctPop .42s ease both;
}

.answer-btn.wrong{
  animation:wrongShake .34s ease both;
}

@keyframes correctPop{
  0%{ transform:scale(.98); }
  55%{ transform:scale(1.035); }
  100%{ transform:scale(1); }
}

@keyframes wrongShake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-6px); }
  50%{ transform:translateX(6px); }
  75%{ transform:translateX(-3px); }
}


/* =====================================================
   10. RESPONSIVE
===================================================== */

@media(max-width:1100px){
  .trivia-dashboard{
    grid-template-columns:minmax(0, 680px);
  }

  .trivia-player-panel{
    order:1;
  }

  .trivia-center-panel{
    order:2;
  }

  .trivia-round-panel{
    order:3;
  }

  .trivia-header-gm-btn{
    position:static;
    margin-top:18px;
  }
}

@media(max-width:760px){
  .trivia-section{
    padding:42px 0 58px;
  }

  .trivia-shell{
    width:min(100% - 24px, 520px);
  }

  .trivia-header h1{
    font-size:clamp(2.25rem, 12vw, 3.6rem);
  }

  .trivia-dashboard{
    gap:16px;
  }

  .trivia-dashboard-panel,
  .trivia-start-card,
  .trivia-card,
  .trivia-results{
    padding:20px 16px;
    border-radius:22px;
  }

  .answer-grid{
    grid-template-columns:1fr;
  }

  .answer-btn{
    min-height:58px;
    text-align:left;
  }

  .trivia-topbar{
    grid-template-columns:1fr 1fr;
    gap:8px;
    font-size:.78rem;
  }

  #categoryCount{
    grid-column:1 / -1;
    grid-row:2;
    text-align:left;
  }

  .trivia-top-actions{
    grid-column:1 / -1;
    width:100%;
    justify-content:space-between;
  }

  .trivia-start-btn,
  .trivia-next,
  .trivia-results button{
    width:100%;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    scroll-behavior:auto !important;
  }
}


/* =====================================================
   DASHBOARD HEIGHT MATCH
===================================================== */

.trivia-dashboard{
  align-items:stretch;
}

.trivia-dashboard-panel{
  height:100%;
}

.trivia-center-panel{
  display:flex;
  flex-direction:column;
}

.trivia-start{
  height:100%;
}

.trivia-start-card{
  min-height:100%;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  gap:18px;

  padding:36px 44px 34px;
}

.category-picker{
  margin:0;
}

.trivia-start-card h2{
  margin:0;
}

.trivia-start-card p{
  max-width:640px;
  margin:0;
  line-height:1.75;
  text-align:center;
}

.trivia-start-btn{
  width:100%;
  margin-top:auto;
}




/* Dropdown should not stretch the card */
.category-picker{
  flex:0 0 auto;
}

@media(max-width:1100px){
  .trivia-dashboard{
    align-items:start;
  }

  .trivia-dashboard-panel,
  .trivia-start,
  .trivia-start-card{
    height:auto;
    min-height:0;
  }
}


/* =====================================================
   STABLE GAME STAGE FIX
===================================================== */

.trivia-center-panel{
  width:100%;
  min-width:0;
}

.trivia-stage{
  width:100%;
  min-height:720px;
  display:block;
}

#triviaLobbyMount,
#triviaStart,
#triviaCard,
#triviaResults{
  width:100%;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}

#triviaLobbyMount{
  max-width:760px;
}

.trivia-card{
  width:100%;
}


/* =====================================================
   RANK LEGEND / PLAYER TIER
===================================================== */

.player-rank-legend{
  position:relative;
  z-index:2;
  margin-top:16px;
  padding:16px;
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(255,248,231,.94), rgba(244,226,178,.84));
  border:1px solid rgba(216,179,90,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 12px 30px rgba(20,63,43,.10);
}

.rank-legend-top{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  background:linear-gradient(135deg, #123f2a, #0d3020);
  color:#fff8dc;
  box-shadow:0 10px 22px rgba(0,0,0,.16);
}

#rankTierDot{
  flex:0 0 auto;
  width:16px;
  height:16px;
  border-radius:50%;
  background:linear-gradient(135deg,#7a3f18,#d08a3b);
  border:2px solid rgba(255,248,220,.85);
  box-shadow:0 0 14px rgba(216,179,90,.35);
}

#rankTierName{
  display:block;
  color:#ffe59b;
  font-family:Georgia, "Times New Roman", serif;
  font-size:1.02rem;
  font-weight:950;
  line-height:1.1;
}

#rankTierRange{
  margin:12px 0 0;
  padding:0 2px;
  color:#253726;
  font-size:.9rem;
  font-weight:800;
  line-height:1.45;
}


#rankTierRange{
  margin:12px 0 0;
  color:#253726;
  font-size:.88rem;
  line-height:1.45;
}

#rankTierRange strong{
  font-weight:900;
}

.rank-next-tier{
  display:block;
  margin-top:4px;
  color:#6c5222;
  font-size:.82rem;
  font-weight:700;
}



/* =====================================================
   START SCREEN ACTIONS
===================================================== */

.trivia-start-actions{
  width:100%;
  margin-top:auto;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.trivia-start-actions button{
  width:100%;
  min-height:58px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:.95rem;
  font-weight:950;
  letter-spacing:.05em;
  cursor:pointer;
  border:0;
  transition:.2s ease;
}

#startTriviaBtn.trivia-start-btn{
  order:1;
  background:linear-gradient(135deg, var(--trivia-green), var(--trivia-green-soft));
  color:var(--trivia-cream);
  box-shadow:0 16px 34px rgba(15,61,42,.25);
}

#startTriviaBtn.trivia-start-btn::before{
  content:"▶";
  margin-right:10px;
  font-size:.8rem;
}

#backToCategoryBtn.trivia-back-btn{
  order:2;
  min-height:48px;
  background:linear-gradient(180deg, #fff8e8, #eadfc7);
  color:#163f2b;
  border:1px solid rgba(15,61,42,.18);
  box-shadow:0 10px 22px rgba(15,61,42,.08);
}

#backToCategoryBtn.trivia-back-btn::before{
  content:"←";
  margin-right:9px;
}

.trivia-start-actions button:hover{
  transform:translateY(-2px);
}

#startTriviaBtn.trivia-start-btn:hover{
  filter:brightness(1.06);
}

#backToCategoryBtn.trivia-back-btn:hover{
  background:linear-gradient(180deg, #ffffff, #efe4cd);
  border-color:rgba(217,173,66,.55);
}


/* =====================================================
   TRIVIA BANNED LOCKOUT OVERLAY
===================================================== */

.trivia-banned-screen{
  position:fixed;
  inset:0;
  z-index:999999;

  display:flex;
  align-items:center;
  justify-content:center;

  min-height:100svh;
  width:100vw;
  padding:clamp(18px, 4vw, 44px);

  overflow:hidden;

  background:
    linear-gradient(rgba(0,0,0,.76), rgba(0,0,0,.86)),
    repeating-linear-gradient(
      135deg,
      rgba(255,204,0,.12) 0 18px,
      rgba(0,0,0,.12) 18px 36px
    ),
    #050505;
}

.trivia-banned-screen::before,
.trivia-banned-screen::after{
  content:"CAUTION   CAUTION   CAUTION   CAUTION   CAUTION";
  position:absolute;
  left:-12vw;
  width:124vw;
  height:64px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    repeating-linear-gradient(
      135deg,
      #ffd21f 0 28px,
      #ffd21f 28px 54px,
      #080808 54px 82px,
      #080808 82px 108px
    );

  color:#050505;
  font-size:1.35rem;
  font-weight:1000;
  letter-spacing:.18em;
  text-transform:uppercase;

  box-shadow:0 14px 34px rgba(0,0,0,.45);
  pointer-events:none;
}

.trivia-banned-screen::before{
  top:38px;
  transform:rotate(-13deg);
}

.trivia-banned-screen::after{
  bottom:38px;
  transform:rotate(13deg);
}

.trivia-banned-card{
  position:relative;
  z-index:2;

  width:min(620px, 92vw);
  max-height:calc(100svh - 72px);
  overflow:auto;

  padding:clamp(28px, 5vw, 46px) clamp(22px, 5vw, 42px) 0;

  border-radius:28px;
  text-align:center;

  background:
    linear-gradient(#070707, #020202) padding-box,
    repeating-linear-gradient(
      135deg,
      #ffd21f 0 18px,
      #ffd21f 18px 34px,
      #050505 34px 52px,
      #050505 52px 68px
    ) border-box;

  border:10px solid transparent;

  box-shadow:
    0 0 0 2px rgba(255,210,31,.9),
    0 30px 90px rgba(0,0,0,.75),
    inset 0 0 38px rgba(255,210,31,.08);

  color:#fff8d6;
  animation:triviaBannedPop .22s ease-out;
}

.trivia-banned-card::before{
  content:"!";
  width:92px;
  height:82px;
  margin:0 auto 18px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#090909;
  font-size:3.4rem;
  font-weight:1000;

  background:#ffd21f;
  clip-path:polygon(50% 0%, 100% 100%, 0% 100%);

  transform:translateY(0);
  text-shadow:none;
  filter:drop-shadow(0 0 16px rgba(255,210,31,.55));
}

.trivia-banned-kicker{
  margin:0 0 12px;
  color:#ffd21f;
  font-size:.72rem;
  font-weight:1000;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.trivia-banned-card img{
  display:none;
}

.trivia-banned-card h1{
  margin:0 auto 22px;
  max-width:500px;

  color:#ffffff;
  font-size:clamp(2.15rem, 8vw, 4.8rem);
  line-height:.92;
  font-weight:1000;
  letter-spacing:.03em;
  text-transform:uppercase;

  text-shadow:
    0 3px 0 rgba(0,0,0,.9),
    0 0 18px rgba(255,210,31,.16);
}

.trivia-banned-card h1 span{
  display:block;
  color:#ffd21f;
  font-size:1.22em;
}

.trivia-banned-card p{
  margin:0 auto 22px;
  max-width:460px;

  color:#ffd21f;
  font-size:clamp(1rem, 3.8vw, 1.3rem);
  line-height:1.45;
  font-weight:900;
}

.trivia-banned-card small{
  display:block;
  margin:0 auto 32px;
  max-width:430px;

  color:#fff8d6;
  font-size:clamp(.94rem, 3.3vw, 1.1rem);
  line-height:1.45;
  font-weight:800;
}

.trivia-banned-card::after{
  content:"ACCESS DENIED";
  display:block;

  margin:28px -42px 0;
  padding:18px 16px;

  background:
    repeating-linear-gradient(
      135deg,
      #ffd21f 0 20px,
      #ffd21f 20px 38px,
      #050505 38px 56px,
      #050505 56px 74px
    );

  color:#050505;
  font-size:clamp(1.25rem, 6vw, 2.3rem);
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;

  text-shadow:0 1px 0 rgba(255,255,255,.25);
}

body:has(.trivia-banned-screen){
  overflow:hidden;
  touch-action:none;
}

@keyframes triviaBannedPop{
  from{
    opacity:0;
    transform:scale(.94) translateY(14px);
  }

  to{
    opacity:1;
    transform:scale(1) translateY(0);
  }
}

@media(max-width:520px){
  .trivia-banned-screen{
    align-items:center;
    padding:18px;
  }

  .trivia-banned-screen::before,
  .trivia-banned-screen::after{
    height:48px;
    font-size:.92rem;
  }

  .trivia-banned-screen::before{
    top:24px;
  }

  .trivia-banned-screen::after{
    bottom:24px;
  }

  .trivia-banned-card{
    width:100%;
    border-width:7px;
    border-radius:22px;
    padding:28px 18px 0;
  }

  .trivia-banned-card::before{
    width:72px;
    height:64px;
    margin-bottom:14px;
  }

  .trivia-banned-card::after{
    margin:22px -18px 0;
    padding:14px 10px;
  }
}