:root{
  --green:#5ad865;
  --green-2:#4ba287;
  --green-dark:#16301f;
  --green-deep:#0c1c10;
  --ink:#32482d;
  --muted:#60755c;
  --line:#e2e8f0;
  --danger:#d94a4a;
  --shadow:0 8px 24px rgba(0,0,0,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
  font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
  min-height:100vh;
  color:#222;
  padding:28px 24px 40px;
  background:
    radial-gradient(circle at 18% 12%,rgba(77,178,100,.3),transparent 30rem),
    radial-gradient(circle at 82% 18%,rgba(75,162,135,.24),transparent 28rem),
    linear-gradient(145deg,#0b1b10,#173b22 52%,#0f2818);
  background-attachment:fixed;
}
button,input,select{font:inherit}
button{cursor:pointer}
.container{max-width:1100px;margin:0 auto}
.hidden{display:none!important}
.header{text-align:center;color:#fff;margin:22px 0 18px}
.header h1{font-size:clamp(1.8rem,5vw,2.55rem);text-shadow:2px 2px 5px rgba(0,0,0,.32);margin-bottom:6px}
.header p{color:rgba(255,255,255,.82)}
.account-bar{position:fixed;top:0;right:0;z-index:1000;display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.96);padding:8px 14px;border-radius:0 0 0 12px;box-shadow:0 2px 10px rgba(0,0,0,.16);font-size:.9rem}
.account-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(90,216,101,.18)}
.status-pill{width:max-content;max-width:100%;margin:0 auto 18px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.9);color:var(--ink);font-size:.82rem;font-weight:700;box-shadow:0 3px 12px rgba(0,0,0,.12)}
.player-name-container{text-align:center;margin-bottom:16px;color:#fff;font-weight:700}
.player-name-container label{margin-right:8px;text-shadow:1px 1px 2px rgba(0,0,0,.25)}
.player-name-container input{width:250px}
.home-menu-groups{display:grid;gap:22px;margin-bottom:16px}
.home-menu-section{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:15px;backdrop-filter:blur(4px)}
.home-menu-section-title{color:#fff;margin:0 0 12px 2px;font-size:1.05rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-shadow:1px 2px 5px rgba(0,0,0,.35)}
.home-menu-section-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:14px}
.card{position:relative;background:rgba(255,255,255,.96);padding:18px;border-radius:12px;box-shadow:var(--shadow);cursor:pointer;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;min-height:220px;overflow:hidden}
.card:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-42px;top:-42px;background:linear-gradient(135deg,var(--green),var(--green-2));opacity:.1}
.card:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.18)}
.card h3{color:var(--green-2);margin-bottom:8px;font-size:1.17rem}
.card p{margin-bottom:12px;line-height:1.45}
.card>div:last-child,.card>.switch-line{margin-top:auto;padding-top:10px}
.card-icon{font-size:1.55rem;margin-bottom:8px;width:max-content}
.button-wrap{display:flex;gap:7px;flex-wrap:wrap}
.btn{background:linear-gradient(135deg,#66ea67,var(--green-2));color:#fff;border:none;padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:700;transition:all .2s ease;font-size:.9rem;box-shadow:0 2px 8px rgba(102,234,103,.3)}
.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px rgba(102,234,103,.4)}
.btn:disabled{opacity:.52;cursor:not-allowed}
.btn.secondary{background:linear-gradient(135deg,#6c757d,#5a6268);box-shadow:0 2px 8px rgba(108,117,125,.25)}
.btn.outline{background:transparent;color:var(--green-2);border:2px solid var(--green);box-shadow:none}
.btn.success{background:linear-gradient(135deg,#28a745,#20c997)}
.btn.danger{background:linear-gradient(135deg,#e35a5a,#ba3434);box-shadow:0 2px 8px rgba(220,53,69,.3)}
.btn.compact{padding:6px 11px;font-size:.8rem}
.small{font-size:.85rem}.muted{color:var(--muted);font-size:.92rem}.white-muted{color:rgba(255,255,255,.75)}
input,select{padding:10px 13px;border-radius:9px;border:2px solid var(--line);background:#fff;color:#222;transition:.2s}
input:focus,select:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 3px rgba(90,216,101,.12)}
.switch-line,.check-line{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
.switch-line input,.check-line input{width:18px;height:18px;accent-color:var(--green-2)}
footer{margin-top:24px;color:#fff;text-align:center;font-size:.9rem;text-shadow:1px 1px 2px rgba(0,0,0,.2)}

.flag-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #e4ece6;
}
.flag-row > div:first-child { flex: 1 1 auto; min-width: 0; }
.flag-row .button-wrap { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }

.game-area{margin-bottom:18px}
.game-heading-row{display:flex;justify-content:space-between;align-items:end;color:#fff;margin-bottom:12px}
.game-heading-row h2{font-size:1.65rem;text-shadow:1px 2px 4px rgba(0,0,0,.3)}
.scoreboard{display:flex;gap:10px;align-items:stretch;background:rgba(255,255,255,.95);padding:14px;border-radius:12px;margin-bottom:12px;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.team-score{flex:1;text-align:center;padding:11px;background:linear-gradient(135deg,#f5f8f5,#fff);border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.06);border:2px solid transparent;transition:.2s}
.team-score.active{border-color:var(--green);box-shadow:0 4px 14px rgba(90,216,101,.22)}
.team-name{font-weight:800;color:var(--green-2);margin-bottom:4px;font-size:.9rem}
.score{font-size:1.65rem;font-weight:800;color:var(--ink)}
.small-score{font-size:1.2rem}
.center-score{max-width:130px}.stat-score{max-width:150px}
.timer-card{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.94);padding:10px 16px;border-radius:10px;margin-bottom:12px;color:var(--ink);box-shadow:0 3px 12px rgba(0,0,0,.1)}
.timer-card strong{font-size:1.3rem;font-variant-numeric:tabular-nums;color:var(--green-2)}
.question-area{background:rgba(255,255,255,.96);padding:22px;border-left:6px solid var(--green);border-radius:12px;min-height:280px;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.question-tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.question-tags span{background:#eef8ef;color:#39754a;border:1px solid #cbe9d0;border-radius:999px;padding:5px 9px;font-size:.76rem;font-weight:700}
.question-text{font-size:1.1rem;color:var(--ink);min-height:74px;line-height:1.62;font-weight:600}
.answer-block{display:flex;gap:10px;align-items:center;margin-top:15px}
.answer-input{width:100%;max-width:660px;padding:12px 15px;font-size:1rem}
.feedback{margin-top:12px;padding:12px 16px;border-radius:10px;font-weight:700;display:none;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.feedback.show{display:block}
.feedback.correct{background:linear-gradient(135deg,#c6f6d5,#9ae6b4);color:#22543d;border:1px solid #9ae6b4}
.feedback.incorrect{background:linear-gradient(135deg,#fed7d7,#fda0a0);color:#742a2a;border:1px solid #fc8181}
.feedback.info{background:linear-gradient(135deg,#e7f7ef,#ccebd9);color:#285d3e;border:1px solid #b7dec5}
.controls{display:flex;gap:10px;align-items:center;margin-top:16px;flex-wrap:wrap}

.admin-panel{background:rgba(255,255,255,.96);padding:20px;border-radius:16px;margin-top:16px;box-shadow:var(--shadow)}
.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.panel-heading h2{color:var(--green-2)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.tab-btn{background:#f3f6f3;color:var(--green-2);border:none;border-radius:8px 8px 0 0;padding:9px 14px;cursor:pointer;font-weight:700;box-shadow:0 2px 4px rgba(0,0,0,.08)}
.tab-btn.active{background:linear-gradient(135deg,var(--green),var(--green-2));color:#fff}
.leaderboard{background:#fff;padding:14px;border-radius:0 10px 10px 10px;max-height:480px;overflow:auto;border:1px solid var(--line)}
.leader-row{display:grid;grid-template-columns:54px 1fr auto auto;gap:12px;align-items:center;padding:12px;border-bottom:1px solid #edf1ed}
.leader-row:last-child{border-bottom:0}.leader-rank{font-size:1.1rem;font-weight:800;color:var(--green-2)}.leader-score{font-weight:800;color:var(--ink)}.leader-meta{font-size:.78rem;color:var(--muted);text-align:right}

.modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(5px)}
.modal.open{display:flex}
.modal-card{background:#fff;padding:26px;border-radius:18px;max-width:650px;width:94vw;max-height:90vh;overflow:auto;box-shadow:0 20px 65px rgba(0,0,0,.32)}
.modal-card.narrow{max-width:430px}.modal-card.wide{max-width:900px}.modal-card.extra-wide{max-width:1050px}
.modal-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}.modal-heading h2{color:var(--green-2)}
.modal-close{border:0;background:transparent;color:#728074;font-size:1.7rem;line-height:1;padding:0 4px}
.modal-close.dark{color:#9cc4a7}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;flex-wrap:wrap}
.centered{text-align:center}.centered-actions{justify-content:center}
.field{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:800;color:var(--muted);margin-top:12px}
.form-error{color:#c53030;font-weight:700;margin-top:10px;min-height:22px}
.setup-grid{display:grid;gap:13px}.setup-note{background:#eef8ef;border-left:4px solid var(--green);padding:11px 12px;border-radius:8px;color:var(--ink);font-size:.9rem;margin-top:12px}
.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}.level-btn{border:2px solid var(--line);background:#fff;border-radius:9px;padding:9px 5px;color:var(--ink);font-weight:800}.level-btn small{display:block;font-weight:600;color:var(--muted);font-size:.7rem}.level-btn.selected{border-color:var(--green);background:#eaf9ed;color:#2c7641}
.dark-modal{background:rgba(8,20,12,.76)}
.dark-modal .modal-card{padding:0;background:var(--green-dark);border:1.5px solid rgba(99,255,138,.28);color:#d8f5df;overflow:hidden}
.stats-header{padding:19px 24px;background:linear-gradient(135deg,#206039,var(--green-dark));border-bottom:1px solid rgba(99,255,138,.2);display:flex;justify-content:space-between;align-items:center}.stats-header h2{font-size:1.25rem;color:#b8ffd2}
.stats-filters{padding:14px 22px;background:#183824;border-bottom:1px solid rgba(99,255,138,.14);display:flex;gap:14px;flex-wrap:wrap}.stats-filters label{color:#a3c9ad;font-size:.75rem;font-weight:800;text-transform:uppercase;display:flex;flex-direction:column;gap:5px}.stats-filters select{min-width:180px;background:#224831;border:1px solid rgba(99,255,138,.28);color:#d8f5df;padding:8px 10px}
.stats-body{padding:20px 22px;overflow-y:auto;max-height:72vh}.stats-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:11px;margin-bottom:18px}.stats-tile{background:#193d29;border:1px solid rgba(79,216,116,.18);border-radius:12px;padding:14px;text-align:center}.stats-tile .val{font-size:1.55rem;font-weight:800;color:#b8ffd2}.stats-tile .lbl{font-size:.75rem;color:#92b79c;margin-top:3px}
.chart-wrap,.mastery-group{background:#193d29;border:1px solid rgba(79,216,116,.18);border-radius:14px;padding:16px;margin-bottom:14px}.chart-title{color:#b8ffd2;font-weight:700;margin-bottom:12px}.bar-chart{height:210px;display:flex;align-items:flex-end;gap:7px;border-bottom:1px solid rgba(255,255,255,.1);padding:10px 4px 0}.day-column{flex:1;min-width:14px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:5px}.day-bar{width:100%;max-width:28px;background:linear-gradient(#63f097,#4ba287);border-radius:6px 6px 0 0;min-height:2px}.day-label{font-size:.62rem;color:#7da488;white-space:nowrap}.empty-state{text-align:center;color:#91b69b;padding:30px 15px}.mastery-row{display:grid;grid-template-columns:minmax(190px,1fr) 2fr 70px;gap:12px;align-items:center;margin-top:10px}.mastery-track{height:9px;border-radius:999px;background:#10291a;overflow:hidden}.mastery-fill{height:100%;background:linear-gradient(90deg,var(--green),#a2f3ae)}

.filter-grid{display:grid;grid-template-columns:1.25fr repeat(3,1fr);gap:10px}.compendium-toolbar{display:flex;justify-content:space-between;align-items:center;margin:15px 0 9px;color:var(--muted);font-weight:700}.compendium-list{display:grid;gap:9px;max-height:55vh;overflow:auto;padding-right:4px}.compendium-item{border:1px solid var(--line);border-radius:10px;padding:13px 14px;background:#fbfdfb}.compendium-item summary{cursor:pointer;color:var(--ink);font-weight:700;line-height:1.4}.compendium-item p{margin-top:9px;color:var(--green-2);font-weight:800}.compendium-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px}.compendium-tags span{background:#eaf7ec;color:#4b7756;padding:3px 7px;border-radius:999px;font-size:.68rem;font-weight:700}
.scroll-box{max-height:68vh;overflow:auto;padding-right:8px}.guide-content h3{color:var(--green-2);margin:17px 0 7px}.guide-content p,.guide-content li{line-height:1.55;color:var(--ink)}.guide-content ol,.guide-content ul{padding-left:23px}.guide-content li+li{margin-top:6px}
.print-packet{display:none}

@media(max-width:850px){
  .scoreboard{display:grid;grid-template-columns:repeat(2,1fr)}
  .team-score{max-width:none}.center-score{grid-column:1}.stat-score{max-width:none}.filter-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
  body{padding:38px 10px 28px}.account-bar{font-size:.78rem;padding:6px 9px}.header{margin-top:18px}.player-name-container label{display:block;margin-bottom:6px}.player-name-container input{width:100%}
  .home-menu-section-grid{grid-template-columns:1fr}.card{min-height:190px}.game-heading-row{align-items:flex-start}.scoreboard{grid-template-columns:1fr 1fr}.stat-score{display:none}.answer-block{flex-direction:column;align-items:stretch}.answer-input{max-width:none}.controls{align-items:stretch}.controls .btn{flex:1}.filter-grid{grid-template-columns:1fr}.compendium-toolbar{align-items:flex-start;gap:10px;flex-direction:column}.level-grid{grid-template-columns:repeat(2,1fr)}.leader-row{grid-template-columns:40px 1fr auto}.leader-meta{grid-column:2/-1;text-align:left}.mastery-row{grid-template-columns:1fr}.day-label{display:none}
}
@media print{
  body>*{display:none!important}
  #printPacket{display:block!important;color:#000;background:#fff;font-family:Georgia,"Times New Roman",serif;padding:18mm}
  #printPacket h1{text-align:center;margin-bottom:6px}#printPacket .print-meta{text-align:center;margin-bottom:22px;color:#444}#printPacket ol{padding-left:24px}#printPacket li{margin-bottom:18px;line-height:1.45;break-inside:avoid}#printPacket .answer-key{break-before:page}#printPacket .answer-key li{margin-bottom:10px}
}