:root{
  --blue:#2563EB; --blue-dark:#1D4ED8; --blue-pale:#EFF4FF;
  --red:#EF4444; --red-dark:#DC2626; --red-pale:#FEF1F1;
  --green:#16A34A; --amber:#F59E0B; --purple:#8B5CF6; --cyan:#06B6D4;
  --ink:#0F1B2D; --ink-soft:#5B6B84; --line:#E4E9F1; --paper:#FFFFFF; --canvas:#F3F6FB;
  --navy:#101B33; --navy-2:#16234A;
  --shadow: 0 10px 30px -12px rgba(16,27,51,.18);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;background:var(--canvas);color:var(--ink);-webkit-font-smoothing:antialiased;}
button{font-family:inherit;cursor:pointer;}
a{color:inherit;}

.admin-link-btn{
  background:rgba(16,27,51,.92); color:#fff; font-weight:800; font-size:13px; padding:11px 18px;
  border-radius:999px; text-decoration:none; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.admin-link-btn:hover{background:#0c1730;}

/* ================= GAME SCREEN ================= */
.game-wrap{min-height:100vh; display:flex; flex-direction:column;}
.game-header{background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:14px 28px; gap:20px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:12px;}
.brand .mark{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--blue),var(--cyan)); font-size:22px;}
.brand h1{font-size:19px; margin:0; letter-spacing:.2px;}
.brand h1 span.g{color:var(--green);} .brand h1 span.a{color:var(--amber);} .brand h1 span.m{color:var(--red);}
.brand p{margin:0; font-size:12px; color:var(--ink-soft); font-weight:700; letter-spacing:.4px;}
.game-nav{display:flex; gap:6px;}
.game-nav a{border:none; background:transparent; color:var(--ink-soft); font-weight:800; font-size:14px; padding:10px 16px; border-radius:12px; display:flex; align-items:center; gap:8px; text-decoration:none;}
.game-nav a.active{background:var(--blue-pale); color:var(--blue-dark);}
.header-actions{display:flex; align-items:center; gap:10px;}
.icon-btn{width:40px; height:40px; border-radius:999px; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; font-size:16px;}
.exit-btn{background:linear-gradient(135deg,var(--red),#f97066); color:#fff; border:none; font-weight:800; padding:11px 20px; border-radius:999px; font-size:14px; text-decoration:none; display:inline-flex; align-items:center;}
.reset-btn{background:#fff; color:var(--ink-soft); border:1.5px solid var(--line); font-weight:800; padding:10px 18px; border-radius:999px; font-size:14px; text-decoration:none; display:inline-flex; align-items:center; gap:4px;}
.reset-btn:hover{border-color:#c7d5f5; color:var(--blue-dark);}

.game-body{flex:1; background:
    radial-gradient(1200px 400px at 10% -10%, #dff0ff 0%, transparent 60%),
    radial-gradient(1000px 400px at 100% 0%, #ffe9d6 0%, transparent 55%),
    linear-gradient(180deg,#eaf4ff, #f6f0e2 60%, #f3e6c8 100%);
  padding:26px 28px 90px;}
.board{display:grid; grid-template-columns:300px 1fr 300px; gap:22px; max-width:1300px; margin:0 auto; align-items:start;}
@media(max-width:1000px){.board{grid-template-columns:1fr;}}

.team-card{background:#fff; border-radius:20px; box-shadow:var(--shadow); padding:0 20px 20px; position:relative; overflow:hidden; text-align:center;}
.team-card .team-flag{margin:0 -20px 14px; padding:46px 0 34px; color:#fff; font-weight:900; font-size:20px; letter-spacing:.5px; clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);}
.team-card.blue .team-flag{background:linear-gradient(160deg,var(--blue),var(--blue-dark));}
.team-card.red .team-flag{background:linear-gradient(160deg,var(--red),var(--red-dark));}
.team-avatar{position:absolute; top:8px; left:50%; transform:translateX(-50%); width:64px; height:64px; border-radius:999px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:26px; box-shadow:0 4px 10px rgba(0,0,0,.12);}
.team-card.blue .team-avatar{color:var(--blue);} .team-card.red .team-avatar{color:var(--red);}
.team-score-label{font-size:12px; letter-spacing:1.5px; color:var(--ink-soft); font-weight:800; margin-top:2px;}
.team-score{font-size:46px; font-weight:900; margin:2px 0 14px;}
.team-card.blue .team-score{color:var(--blue);} .team-card.red .team-score{color:var(--red);}
.stat-row{display:flex; gap:10px; margin-bottom:16px;}
.stat-pill{flex:1; border-radius:12px; padding:10px 6px; font-weight:800; font-size:14px; display:flex; flex-direction:column; align-items:center; gap:4px;}
.stat-pill.ok{background:#EAFBF0; color:var(--green);} .stat-pill.bad{background:#FDEEEE; color:var(--red-dark);}
.stat-pill small{font-weight:700; font-size:10.5px; letter-spacing:.4px; opacity:.85;}
.members-title{font-size:11px; letter-spacing:1.4px; color:var(--ink-soft); font-weight:800; margin:6px 0 10px;}
.member-row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px; font-weight:700; font-size:14px;}
.member-row .dot{width:8px;height:8px;border-radius:99px;}
.team-card.blue .member-row .dot{background:var(--blue);} .team-card.red .member-row .dot{background:var(--red);}

.center-col{display:flex; flex-direction:column; gap:18px;}
.meta-bar{background:var(--navy); border-radius:20px; padding:16px 22px; display:flex; align-items:center; justify-content:space-between; color:#fff; box-shadow:var(--shadow); flex-wrap:wrap; gap:14px;}
.meta-item{display:flex; flex-direction:column; gap:3px; min-width:70px;}
.meta-item .lbl{display:flex; align-items:center; gap:6px; font-size:11px; letter-spacing:.6px; color:#93A2C4; font-weight:800;}
.meta-item .val{font-size:17px; font-weight:900;}
.timer-ring{width:74px; height:74px; border-radius:999px; border:5px solid #24345c; display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative;}
.timer-ring.tick{border-color:var(--green);} .timer-ring.low{border-color:var(--red);}
.timer-ring .num{font-size:22px; font-weight:900;} .timer-ring .u{font-size:9px; color:var(--amber); font-weight:800; letter-spacing:1px;}

.question-card{background:#fff; border-radius:24px; box-shadow:var(--shadow); padding:34px 34px 26px; text-align:center; min-height:330px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px;}
.q-prompt{font-weight:800; color:#1E3A8A; font-size:16px; margin:0;}
.q-word-row{display:flex; align-items:center; gap:16px; margin:6px 0 20px;}
.q-word{font-size:42px; font-weight:900; color:var(--blue-dark);}
.options{display:grid; grid-template-columns:1fr 1fr; gap:14px; width:100%; max-width:640px;}
@media(max-width:640px){.options{grid-template-columns:1fr;}}
.opt{display:flex; align-items:center; gap:14px; text-align:left; border:1.5px solid var(--line); background:#fff; border-radius:14px; padding:13px 16px; font-weight:800; font-size:15px; color:var(--ink); transition:.15s; width:100%;}
.opt:hover{border-color:#c7d5f5; background:#f8faff;}
.opt .badge{width:30px; height:30px; min-width:30px; border-radius:999px; background:var(--blue); color:#fff; font-weight:900; display:flex; align-items:center; justify-content:center; font-size:14px;}
.opt.correct{border-color:var(--green); background:#EFFBF3;} .opt.correct .badge{background:var(--green);}
.opt.correct::after{content:"✓"; margin-left:auto; color:var(--green); font-weight:900; font-size:18px;}
.opt.wrong{border-color:var(--red); background:#FEF1F1;} .opt.wrong .badge{background:var(--red);}
.opt.wrong::after{content:"✕"; margin-left:auto; color:var(--red); font-weight:900; font-size:18px;}
.opt[disabled]{cursor:default;}

.award-row{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; justify-content:center;}
.award-row button{border:none; border-radius:999px; padding:10px 18px; font-weight:800; font-size:13px; color:#fff;}
.award-row .aw-blue{background:var(--blue);} .award-row .aw-red{background:var(--red);} .award-row .aw-none{background:#94a3b8;}

.controls-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.ctrl-btn{border:none; border-radius:14px; padding:14px 24px; font-weight:800; font-size:14.5px; color:#fff; display:flex; align-items:center; gap:8px; box-shadow:0 8px 18px -8px rgba(0,0,0,.35);}
.ctrl-btn.next{background:linear-gradient(135deg,var(--blue),#3B82F6);}
.ctrl-btn.bonus{background:linear-gradient(135deg,var(--amber),#fbbf24); color:#5b3d00;}
.ctrl-btn.pass{background:linear-gradient(135deg,var(--purple),#a78bfa);}
.ctrl-btn.finish{background:linear-gradient(135deg,#334155,#0f172a);}
.ctrl-btn:disabled{opacity:.5; cursor:not-allowed;}

.progress-bar{position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--line); padding:14px 28px; display:flex; align-items:center; gap:22px; z-index:40;}
.progress-tag{background:#FFF8E8; border:1px solid #FBE7B4; border-radius:12px; padding:8px 14px; display:flex; align-items:center; gap:10px; font-weight:800; font-size:12px; color:#8a6b12; white-space:nowrap;}
.progress-tag .cup{font-size:20px;}
.progress-steps{flex:1; display:flex; align-items:center; gap:0; overflow-x:auto;}
.p-step{width:34px; height:34px; border-radius:999px; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:var(--ink-soft); background:#fff; flex:none;}
.p-step.done{background:var(--green); border-color:var(--green); color:#fff;}
.p-step.now{border-color:var(--blue); color:var(--blue); box-shadow:0 0 0 4px var(--blue-pale);}
.p-line{flex:1; height:3px; background:var(--line); min-width:14px;}
.p-line.done{background:var(--green);}
.tip-tag{background:#FFF3D6; border:1px solid #FBE7B4; border-radius:12px; padding:8px 14px; font-weight:800; font-size:12px; color:#8a6b12; display:flex; align-items:center; gap:8px; white-space:nowrap;}

.panel-view{max-width:900px; margin:20px auto; background:#fff; border-radius:20px; box-shadow:var(--shadow); padding:28px;}
.lb-row{display:flex; align-items:center; gap:14px; padding:14px 10px; border-bottom:1px solid var(--line);}
.lb-rank{width:30px; height:30px; border-radius:999px; background:var(--blue-pale); color:var(--blue-dark); font-weight:900; display:flex; align-items:center; justify-content:center; font-size:13px;}
.lb-name{flex:1; font-weight:800;}
.lb-score{font-weight:900; color:var(--blue-dark);}
.notice{background:#FFF8E8; border:1px solid #FBE7B4; color:#8a6b12; padding:14px 18px; border-radius:12px; font-weight:700; margin-bottom:16px;}
.notice.error{background:var(--red-pale); border-color:#f6b8b8; color:var(--red-dark);}

/* ================= ADMIN PANEL ================= */
.admin-wrap{min-height:100vh; display:flex;}
.sidebar{width:264px; background:linear-gradient(180deg,var(--navy),var(--navy-2)); color:#dfe6f5; flex:none; display:flex; flex-direction:column; padding:20px 14px; gap:2px; position:sticky; top:0; height:100vh; overflow-y:auto;}
.sb-brand{display:flex; align-items:center; gap:10px; padding:6px 10px 18px;}
.sb-brand .mark{font-size:24px;}
.sb-brand h1{font-size:17px; margin:0;} .sb-brand h1 .e1{color:#60a5fa;}
.sb-brand p{margin:0; font-size:10.5px; color:#8a96b8; font-weight:700;}
.sb-group-label{font-size:10.5px; letter-spacing:1.2px; color:#7382a8; font-weight:800; margin:16px 12px 6px;}
.sb-item{display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:10px; font-weight:700; font-size:13.6px; color:#c3cde3; border:none; background:transparent; text-align:left; width:100%; text-decoration:none;}
.sb-item:hover{background:rgba(255,255,255,.06);}
.sb-item.active{background:#2563EB; color:#fff;}
.sb-item .ic{width:18px; text-align:center;}

.admin-main{flex:1; min-width:0; background:var(--canvas);}
.admin-top{background:#fff; border-bottom:1px solid var(--line); padding:16px 30px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.admin-user{display:flex; align-items:center; gap:10px;}
.admin-user .av{width:38px; height:38px; border-radius:999px; background:var(--blue-pale); color:var(--blue-dark); display:flex; align-items:center; justify-content:center; font-weight:900;}
.admin-user .name{font-weight:800; font-size:13.5px; line-height:1.2;}
.admin-user .role{font-size:11px; color:var(--ink-soft); font-weight:700;}
.admin-user a{font-size:12px; color:var(--red-dark); font-weight:800; text-decoration:none; margin-left:14px;}

.admin-content{padding:26px 30px 60px;}
.admin-content h2{margin:0 0 4px; font-size:22px;}
.admin-content .sub{color:var(--ink-soft); margin:0 0 22px; font-size:14px;}

.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:22px;}
@media(max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
.stat-card{background:#fff; border-radius:16px; padding:20px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px;}
.stat-card .ic{width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px;}
.stat-card .num{font-size:26px; font-weight:900;}
.stat-card .lbl{font-size:13px; color:var(--ink-soft); font-weight:700;}
.stat-card a{font-size:12.5px; font-weight:800; color:var(--blue); text-decoration:none;}

.grid-2{display:grid; grid-template-columns:1.4fr 1fr; gap:18px; margin-bottom:18px;}
@media(max-width:960px){.grid-2{grid-template-columns:1fr;}}
.card{background:#fff; border-radius:16px; padding:20px; box-shadow:var(--shadow);}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.card-head h3{margin:0; font-size:15.5px;}
.link-btn{border:1px solid var(--line); background:#fff; border-radius:10px; padding:7px 12px; font-size:12.5px; font-weight:800; color:var(--ink-soft); text-decoration:none;}

table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{text-align:left; color:var(--ink-soft); font-weight:800; font-size:11.5px; letter-spacing:.3px; padding:8px 10px; border-bottom:1px solid var(--line);}
td{padding:11px 10px; border-bottom:1px solid var(--line); font-weight:700;}
tr:last-child td{border-bottom:none;}
.tag{padding:4px 10px; border-radius:999px; font-size:12px; font-weight:800;}
.tag.blue{background:var(--blue-pale); color:var(--blue-dark);} .tag.red{background:var(--red-pale); color:var(--red-dark);} .tag.grey{background:#eef1f6; color:var(--ink-soft);}
.row-actions{display:flex; gap:6px;}
.icon-mini{border:1px solid var(--line); background:#fff; border-radius:8px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--ink-soft); text-decoration:none;}
.icon-mini.danger:hover{border-color:#f6b8b8; color:var(--red-dark);}
.icon-mini:hover{border-color:#c7d5f5;}

.legend-row{display:flex; align-items:center; justify-content:space-between; padding:7px 0; font-size:13px; font-weight:700;}
.legend-row .sw{width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:8px;}
.rank-row{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line);}
.rank-row:last-child{border-bottom:none;}
.rank-badge{width:26px; height:26px; border-radius:8px; color:#fff; font-weight:900; font-size:12px; display:flex; align-items:center; justify-content:center;}
.quick-item{display:flex; align-items:center; justify-content:space-between; padding:11px 4px; border-bottom:1px solid var(--line); font-weight:800; font-size:13.5px; color:var(--ink); text-decoration:none;}
.quick-item:last-child{border-bottom:none;}
.quick-item .qi-ic{margin-right:10px;}

.toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:12px; flex-wrap:wrap;}
.btn-primary{background:var(--blue); color:#fff; border:none; border-radius:10px; padding:10px 18px; font-weight:800; font-size:13.5px; text-decoration:none; display:inline-block;}
select, input[type=text], input[type=number], input[type=color], input[type=password], textarea{
  border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-size:13.5px; font-family:inherit; width:100%;
}
label{font-size:12.5px; font-weight:800; color:var(--ink-soft); display:block; margin-bottom:5px;}
.field{margin-bottom:14px;}
.form-card{background:#fff; border-radius:16px; padding:22px; box-shadow:var(--shadow); margin-bottom:20px;}
.form-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:6px;}
.btn-ghost{background:#fff; border:1px solid var(--line); border-radius:10px; padding:9px 16px; font-weight:800; font-size:13.5px; color:var(--ink-soft); text-decoration:none; display:inline-block;}
.opt-edit-row{display:flex; gap:8px; align-items:center; margin-bottom:8px;}
.opt-edit-row input[type=radio]{width:18px; height:18px;}
.empty-note{color:var(--ink-soft); font-size:13.5px; padding:30px 0; text-align:center;}
.members-tags{display:flex; gap:6px; flex-wrap:wrap;}
.members-tags span{background:var(--canvas); border-radius:999px; padding:3px 10px; font-size:11.5px; font-weight:800;}
.color-dot{width:14px; height:14px; border-radius:4px; display:inline-block;}

.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,var(--navy),var(--navy-2));}
.login-card{background:#fff; border-radius:20px; padding:36px; width:100%; max-width:380px; box-shadow:var(--shadow);}
.login-card .mark{width:54px; height:54px; border-radius:14px; background:linear-gradient(135deg,var(--blue),var(--cyan)); display:flex; align-items:center; justify-content:center; font-size:26px; margin:0 auto 14px;}
.login-card h2{text-align:center; margin:0 0 4px;}
.login-card p.sub{text-align:center; color:var(--ink-soft); margin:0 0 22px; font-size:13.5px; font-weight:700;}
.login-card button{width:100%; margin-top:6px;}