/* ===== Cubs Play theme override for Crorepati Quiz ===== */
:root{
  --color-bg-dark:#fff9ee; --color-bg-light:#ffffff;
  --color-primary:#b8860b; --color-secondary:#f5b921; --color-accent:#d2691e;
  --color-success:#3bb273; --color-danger:#e15554; --color-warning:#e89a1c;
  --color-text:#4a3a16; --color-text-muted:#6b5a30;
}
body{
  font-family:'Baloo 2','Segoe UI',sans-serif !important;
  background-color:#fff9ee !important;
  background-image:radial-gradient(#ffe1a6 2px,transparent 2px),radial-gradient(#ffd6e6 2px,transparent 2px) !important;
  background-size:38px 38px,38px 38px !important; background-position:0 0,19px 19px !important;
  color:#4a3a16 !important;
}
h1,h2,h3,h4{ font-family:'Baloo 2','Segoe UI',sans-serif !important; }
/* kill neon gradient text */
.logo h1,.setup-info-panel h2{ background:none !important; -webkit-text-fill-color:#4a3a16 !important; color:#4a3a16 !important; }

/* Standard Cubs Play header */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 28px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.12);position:sticky;top:0;z-index:100}
.site-header .sh-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.site-header .sh-brand img{height:52px;width:auto;transition:transform .3s ease}
.site-header .sh-brand:hover img{transform:scale(1.1)}
.site-header .sh-brand span{font-weight:800;font-size:24px;color:#b8860b;letter-spacing:.5px}
.site-header .sh-title{flex:1;text-align:center;font-weight:800;font-size:18px;color:#4a3a16;min-width:160px}
.site-header .sh-right{display:inline-flex;align-items:center;gap:10px}
.site-header .sh-back{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:15px;color:#4a3a16;background:#f5b921;text-decoration:none;padding:10px 20px;border-radius:30px;box-shadow:0 4px 10px rgba(245,185,33,.4);transition:transform .2s ease;white-space:nowrap}
.site-header .sh-back:hover{transform:translateY(-2px) scale(1.03)}
@media (max-width:600px){.site-header{padding:12px 16px}.site-header .sh-brand img{height:44px}.site-header .sh-brand span{font-size:20px}.site-header .sh-title{font-size:15px;flex-basis:100%;order:3}}

/* Surfaces → light cards */
.glass-panel{background:#fff !important;border:2px solid #ffe9b8 !important;box-shadow:0 8px 22px rgba(180,120,60,.12) !important;backdrop-filter:none !important;color:#4a3a16 !important}
.glow-cyan,.glow-purple{box-shadow:0 8px 22px rgba(180,120,60,.14) !important}
.score-badge{background:#fff4d6 !important;color:#8a6d10 !important;border:1px solid #f5b921 !important}
.mute-btn{background:#fff4d6 !important;border:1px solid #f5b921 !important}

/* Buttons */
.btn-cyan{background:linear-gradient(135deg,#f5b921,#e89a1c) !important;color:#4a3a16 !important;border:none !important;box-shadow:0 4px 10px rgba(245,185,33,.4) !important}
.btn-outline{background:#fff !important;border:2px solid #f5b921 !important;color:#8a6d10 !important}

/* ===== Computer-monitor frame around the quiz ===== */
.game-layout{
  position:relative;
  padding:26px !important;
  margin:8px auto 46px !important;
  border-radius:22px;
  background:linear-gradient(180deg,#fffef9,#fff6e2) !important;
  border:15px solid #2c2742;
  box-shadow:0 24px 50px rgba(40,30,10,.30), inset 0 0 0 2px rgba(255,255,255,.55), inset 0 8px 50px rgba(245,185,33,.05);
}
/* webcam dot on the top bezel */
.game-layout::before{
  content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  width:7px;height:7px;border-radius:50%;background:#76d3ff;box-shadow:0 0 7px #76d3ff;z-index:2;
}
/* monitor stand/base */
.game-layout::after{
  content:"";position:absolute;left:50%;bottom:-36px;transform:translateX(-50%);
  width:170px;height:16px;background:#2c2742;border-radius:0 0 16px 16px;
  box-shadow:0 10px 16px rgba(0,0,0,.18), 0 -16px 0 -6px #2c2742;
}
@media(max-width:760px){
  .game-layout{border-width:9px;padding:16px !important;margin-bottom:38px !important}
  .game-layout::after{width:120px}
}

/* ===== KBC-style hexagon answer tiles ===== */
.options-grid{gap:16px 26px !important}
.option-card{
  --hx:polygon(0 50%,20px 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,20px 100%);
  display:flex !important;align-items:center;gap:14px !important;
  padding:16px 30px !important;
  background:transparent !important;border:none !important;border-radius:0 !important;box-shadow:none !important;
  position:relative;cursor:pointer;clip-path:var(--hx);
  transition:transform .15s ease,filter .15s ease !important;
}
/* gold gradient border layer */
.option-card::before{content:"";position:absolute;inset:0;z-index:0;clip-path:var(--hx);
  background:linear-gradient(180deg,#ffe79c,#cf971c);}
/* inner fill */
.option-card::after{content:"";position:absolute;inset:3px;z-index:0;clip-path:var(--hx);
  background:#fffdf6;transition:background .2s ease;}
.option-card .option-prefix{
  position:relative;z-index:1;flex:0 0 auto !important;width:40px;height:40px;border-radius:50%;
  background:linear-gradient(180deg,#f5b921,#dd9a16) !important;color:#4a3a16 !important;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;
  box-shadow:0 2px 5px rgba(180,120,60,.3);
}
.option-card .option-text{position:relative;z-index:1;font-size:17px;font-weight:700;color:#4a3a16 !important}
.option-card:hover:not(.dimmed):not(.correct):not(.wrong){transform:translateY(-2px) scale(1.015) !important}
.option-card:hover:not(.dimmed):not(.correct):not(.wrong)::after{background:#fff3d6;}
.option-card.selected::before{background:linear-gradient(180deg,#ffd34d,#e58a00);}
.option-card.selected::after{background:#fff1cf;}
.option-card.correct::before{background:linear-gradient(180deg,#7bd66a,#2f9e4f);}
.option-card.correct::after{background:#e8f6dd;}
.option-card.correct .option-prefix{background:linear-gradient(180deg,#3bb273,#2f9e4f) !important;color:#fff !important}
.option-card.wrong::before{background:linear-gradient(180deg,#f08a7a,#cf3b2c);}
.option-card.wrong::after{background:#fde4e0;}
.option-card.wrong .option-prefix{background:linear-gradient(180deg,#e15554,#c33) !important;color:#fff !important}
.option-card.dimmed{opacity:.3 !important;filter:grayscale(.5);pointer-events:none}
@media(max-width:560px){.option-card{padding:13px 24px !important}.option-card .option-prefix{width:34px;height:34px;font-size:15px}}

/* Question panel polish */
.question-panel{border-width:2px !important}
.level-indicator{color:#d2691e !important;font-weight:800 !important}
.question-text-box h3{font-size:clamp(20px,2.3vw,26px) !important;line-height:1.5 !important;color:#4a3a16 !important;font-weight:700 !important}

/* Host + lifelines + timer */
.host-panel{background:#fff !important;border:2px solid #ffe9b8 !important}
.host-dialogue-bubble{background:#fff8e8 !important;color:#4a3a16 !important;border:1px solid #ffe2a6 !important}
.host-dialogue-bubble p{color:#4a3a16 !important}
/* Lifelines / hints — compact labelled cards */
.lifelines-heading{width:100%;text-align:center;font-weight:700;font-size:12.5px;color:#6b5a30;margin:0 0 5px}
.lifelines-toolbar{display:flex !important;gap:8px !important;flex-wrap:wrap;justify-content:center}
.lifeline-btn{
  width:auto !important;height:auto !important;border-radius:12px !important;
  flex-direction:row !important;align-items:center;gap:6px !important;padding:6px 12px !important;
  background:#fff8e8 !important;border:2px solid #ffe2a6 !important;color:#4a3a16 !important;
  box-shadow:0 3px 7px rgba(180,120,60,.12) !important;
}
.lifeline-btn .ll-ico{font-size:18px;line-height:1}
.lifeline-btn .ll-lbl{font-size:12px;font-weight:800;letter-spacing:.2px;white-space:nowrap}
.lifeline-btn:hover:not(:disabled){background:#fff1cf !important;border-color:#f5b921 !important;transform:translateY(-2px)}
.lifeline-btn.used{opacity:.4 !important;background:#f1ece0 !important;border-color:#e6dcc4 !important;box-shadow:none !important;transform:none !important}
.timer-box,.timer-text{color:#4a3a16 !important}

/* Prize ladder — current level must stand out clearly */
.prize-node{color:#8a7a50 !important}
.prize-node .node-amount,.prize-node .node-number{color:inherit !important}
.safe-zone-node{color:#7768ae !important}
.prize-node.cleared{color:#3bb273 !important;opacity:.75 !important}
.prize-node.active{background:#f5b921 !important;border:1px solid #b8860b !important;color:#4a3a16 !important;font-weight:800 !important;box-shadow:0 4px 12px rgba(245,185,33,.5) !important}
.prize-node.active .node-amount,.prize-node.active .node-number{color:#4a3a16 !important}
.prize-node.active .node-arrow{color:#4a3a16 !important;opacity:1 !important}

/* Modals, inputs, tables */
.modal-content{background:#fff !important;border:2px solid #ffe9b8 !important;color:#4a3a16 !important}
input,select,textarea{background:#fff !important;border:2px solid #ffd9a0 !important;color:#4a3a16 !important}
.input-group label{color:#6b5a30 !important}
table,th,td{color:#4a3a16 !important}
th{color:#b8860b !important}
.font-muted{color:#6b5a30 !important}
.avatar-item{background:#fff8e8 !important;border:2px solid #ffe2a6 !important}
.avatar-item.selected{background:#f5b921 !important;border-color:#f5b921 !important}

/* Focus mode: hide the About/SEO block while the quiz is being played */
body.quiz-active .about-app{ display:none !important; }
/* Give the game screen room so it reads as a focused KBC-style screen */
#game-screen{ min-height:calc(100vh - 90px); }
/* Clear separation between the page and the About block on the landing screen */
.about-app{ border-top:2px dashed #ffd9a0; padding-top:26px !important; margin-top:24px !important; }

/* Answer explanation / Did you know */
.answer-explain{margin-top:14px;background:#fff8e8;border:2px solid #ffe2a6;border-radius:16px;padding:14px 18px;text-align:center;animation:aeIn .3s ease}
.answer-explain.hidden{display:none}
.answer-explain .ae-text{font-size:15px;color:#4a3a16;line-height:1.6;margin-bottom:10px}
.answer-explain .ae-fact-line{display:inline-block;margin-top:4px;color:#8a6d10;font-weight:700}
.answer-explain #answer-next{font-size:15px;padding:9px 26px}
@keyframes aeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1}}

/* End screen stats */
.end-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px auto;max-width:430px}
.end-stat{background:#fff8e8;border:2px solid #ffe2a6;border-radius:14px;padding:10px 6px;display:flex;flex-direction:column;gap:2px}
.end-stat .es-num{font-size:20px;font-weight:800;color:#b8860b}
.end-stat .es-lbl{font-size:11px;font-weight:700;color:#6b5a30}
.end-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media(max-width:520px){.end-stats{grid-template-columns:repeat(2,1fr)}}