:root{
  --blue: var(--color-purple-1);--blue-dark: #3C5F92;--blue-deep: #000000;
  --ink: #22303F;--ink-soft: #030304;--line: #E3E8EF;--bg: #F5F7FA;
  --green: #28a745;--amber: #C98A2B;--radius: 14px;
}
body{background: var(--bg);}
/* hero */
.hero{position:relative;overflow:hidden;background:#12233C;color:#fff;}
.hero .wrap{position:relative;padding-top:60px;padding-bottom:60px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:30px}
.hero h2{font-size:50px;line-height:1.05;font-weight:700;letter-spacing:-.025em; color:#fff;}
.badge{display: inline-flex; align-items: center; gap: 9px; background: rgb(126 126 126 / 45%); border: 1px solid rgba(255, 255, 255, .20); padding: 7px 16px; border-radius: 100px; font-size: 15px; color: #ffffff; margin-bottom: 18px;}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);position:relative}
.dot:after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;
  animation:dot-pulse 2.4s ease-out infinite}
@keyframes dot-pulse{0%{opacity:.55;transform:scale(1)}70%{opacity:0;transform:scale(3.2)}100%{opacity:0;transform:scale(3.2)}}
@media(prefers-reduced-motion:reduce){.dot:after{animation:none}*{transition:none!important}}

/* sections */
section{padding:48px 0}
.shead{display:flex;align-items:baseline;gap:16px;margin-bottom:20px}
.shead h3{font-size:26px;color:var(--blue-deep)}
.shead .rule{flex:1;height:1px;background:var(--line)}
.shead .note{font-size:14.5px;color:var(--ink-soft)}

/* live quiz */
.live{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 6px 24px rgba(34,48,63,.06);display:grid;grid-template-columns:1.5fr 1fr}
.live .body{padding:34px 36px}
.flag{display:inline-flex;align-items:center;gap:9px;color:#28a745;font-size:12.5px;font-weight:600;margin-bottom:12px}
.flag .dot{background: var(--green)}
.live h3{font-size:29px;line-height:1.2}
.live .desc{color:var(--ink-soft);margin:12px 0 0;max-width:52ch}
.meta{display:flex;margin-top:26px;border-top:1px solid var(--line);padding-top:20px}
.meta div{padding-right:20px;margin-right:20px;border-right:1px solid var(--line);}
.meta div:last-child{border:0;margin:0;padding:0}
.meta b{display:block;font-size:16px;font-weight:600}
.meta small{color:var(--ink-soft);font-size:14px; white-space: nowrap;}
.live .side{background:linear-gradient(160deg,var(--color-purple-1),#3C5F92);color:#fff;padding:34px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;text-align:center}
.trophy {    width: 64px; height: 64px; border-radius: 50%;    background: rgba(255,255,255,0.15);    display: flex; align-items: center; justify-content: center;    margin-bottom: 14px;  }
.played-num { font-size: 24px; font-weight: 700; line-height: 1.2; }
  .played-text { font-size: 13.5px; opacity: 0.92; margin: 6px 0; }
.btn{display:inline-block;text-align:center;border:0;cursor:pointer;font-family:'avenir_lt_std85_heavy';font-size:15px;font-weight:600;
  padding:12px 20px;border-radius:9px;background:#fff;color:var(--blue-deep) !important;text-decoration:none;width:100%;margin-top:14px;
  transition:background .18s ease,transform .12s ease; position:relative;overflow:hidden}
  .btn .gradient_lines_btn{background: linear-gradient(90deg, #3f80bb57 24%, #fff0 26% 53%, #3f80bb57 54%);}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,.act:focus-visible,.chip:focus-visible{outline:2px solid var(--blue-deep);outline-offset:2px}
.btn:hover{background:#EDF2F9}
.btn.blue{background:var(--blue);color:#fff !important}
.btn.blue:hover{background:var(--blue-dark)}
.sidenote{font-size:14.5px;color:#f5f5f5;margin-top:12px;line-height:1.45}

/* archive */
.chip{border:1px solid var(--line);background:#fff;color:var(--ink-soft);padding:7px 16px;border-radius:100px;
  font-size:14.5px;cursor:pointer;}
.chip:hover{border-color:var(--blue);background:var(--blue);color:var(--color-white)}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.qcard .tag, .cat-tag{font-size:11.5px;font-weight:600;color:var(--blue-dark);background:#EDF2FA;padding:4px 10px;
  border-radius:5px;align-self:flex-start;margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.qcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;
  transition:border-color .18s ease,box-shadow .18s ease}
.qcard:hover{border-color:#C6D5E8;box-shadow:0 4px 16px rgba(34,48,63,.07)}
.qcard h4{font-size:18px;line-height:1.3}
.qcard .sub{font-size:14px;color:var(--ink-soft);margin-top:6px}
.qcard .foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px}
.score{font-size:13.5px;font-weight:600}
.score.good{color:var(--green)}
.score.mid{color:var(--amber)}
.score.none{color:var(--ink-soft);font-weight:400}
.act{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--blue-dark);text-decoration:none;
  border:1px solid var(--line);padding:8px 16px;border-radius:8px;background:#fff;cursor:pointer;font-family:'avenir_lt_std65_medium'}
.act.play{background:var(--blue);color:#fff !important;border-color:var(--blue)}
.act{transition:background .18s ease,border-color .18s ease}
.act:hover{border-color:var(--blue);background:#F5F8FC}
.act.play:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.more{text-align:center;margin-top:26px}

/* leaderboard + rules */
.board{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;font-size:12.5px;font-weight:600;color:var(--ink-soft);padding:8px 10px;background:#FAFBFD;border-bottom:1px solid var(--line)}
td{padding:8px 10px;border-bottom:1px solid var(--line)}
tr td:last-child{min-width:130px;overflow:auto;white-space:nowrap}
tr:last-child td{border-bottom:0}
#lb tr:hover td, #lbFull tr:hover td{background:#F1F6FC;font-weight:600}
#lb tr.active td, #lbFull tr.active td{background:#dff0ff;font-weight:600}
#lb .lb-extra { display: none; }
.rank{width:32px;height:32px;border-radius:50%;background:#F1F4F8;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;color:var(--ink-soft)}
.rank.g{background:#F6E9C5;color:#8A6A18}
.rank.s{background:#E9EDF2;color:#5C6B7C}
.rank.b{background:#F1E0D2;color:#8A5A34}
.player{display:flex;align-items:center;gap:12px}
.avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#E7ECF3;flex:none;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--blue)}
.top3 .avatar{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ring-c,#E9EDF2)}
tr.g1{--ring-c:#E3B93F}tr.g2{--ring-c:#B9C2CC}tr.g3{--ring-c:#C9915E}
.flag-img{width: 22px; height: 16px; border-radius: 2px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(34, 48, 63, .12);}
.pname{display:flex;align-items:center;gap:9px;white-space: nowrap;}
.pname span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pq-you { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--blue); color: #fff; flex-shrink: 0; }
.pq-lb-foot { padding: 14px 18px 16px; border-top: 1px solid #eef0f4; text-align: center; }
.pq-lb-foot p { margin: 0 0 10px; font-size: 13px; color: var(--ink-soft); }
.pq-lb-foot .all { display: block; margin-top: 10px; font-size: 13px; color: var(--blue)!important; }
/*.pname span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}*/
.board table{table-layout:fixed}
.board td:last-child{white-space:nowrap}
.rules{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px}
.rules p{margin:0 0 15px;font-size:14.5px;color:var(--ink-soft)}
.rules p:last-child{margin:0}
.rules b{color:var(--ink);font-weight:600}
.rules ul,.rules ol{margin:0 0 15px;padding-left:22px}
.rules ul{list-style:disc}
.rules ol{list-style:decimal}
.rules li{list-style:inherit;font-size:14.5px;color:var(--ink-soft);margin:0 0 10px;line-height:1.55}
.rules li:last-child{margin-bottom:0}
.rules p:empty{display:none}
.rules h1,.rules h2,.rules h3,.rules h4,.rules h5,.rules h6{font-size:17px;font-weight:600;margin:0 0 10px;color:var(--ink)}
.rules a{color:var(--blue-dark);text-decoration:underline}
.rules > :last-child{margin-bottom:0}
.modal-box{max-width:500px;width:95%}
.filters-bar { display:flex; align-items:center; gap:9px; margin-bottom:22px; position:relative; }
.filters { display:flex; flex-wrap:nowrap; gap:9px; align-items:center; flex:1 1 auto; min-width:0; overflow:hidden; }
.filters .chip, .more-menu .chip { flex:0 0 auto; white-space:nowrap; }

.more-wrap { position:relative; flex:0 0 auto; }
.more-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border:1px solid #cccccc; border-radius:999px; background:#fff; cursor:pointer; white-space:nowrap; font:inherit; }
.more-btn.on { background:#3b8fd4; color:#fff; border-color:#3b8fd4; }   /* chip.on ka color */
.more-btn .caret { font-size:12px; transition:transform .2s; }
.more-btn[aria-expanded="true"] .caret { transform:rotate(180deg); }

.more-menu { display:none; position:absolute; right:0; top:calc(100% + 8px); min-width:240px; max-width:90vw; padding:6px; background:#fff; border:1px solid #e3e3e3; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.14); z-index:50; }
.more-menu.open { display:block; }
.more-menu .chip { display:block; width:100%; text-align:left; border:0; border-radius:8px; background:transparent; padding:10px 12px; }
.more-menu .chip:hover { background:#f3f6fa;color:#000; }
.more-menu .chip.on { background:#3b8fd4; color:#fff; }
.more-wrap::after { content:""; position:absolute; left:0; right:0; top:100%; height:10px; }
.more-wrap:focus-within .more-menu { display:block; }
@media (hover: hover) {
  .more-wrap:hover .more-menu { display:block; }
  .more-wrap:hover .more-btn .caret { transform:rotate(180deg); }
}


@media(max-width:1440px){
    .live .body{padding:26px 28px}
    .live .side{padding:28px}
}
@media(max-width:960px){
  .hero .wrap{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .hero h2{font-size:33px}
  .live{grid-template-columns: 1fr;}
  .live .body{padding: 26px 28px;}
  .live .side{padding: 26px 28px;}
}
@media(max-width:620px){
  .grid{grid-template-columns:1fr}
  .meta div{border:0;margin:0 24px 0 0;padding:0}
  .board th:first-child{width:60px !important}
  .board td, .board th{padding:8px !important;font-size:13px}
  .avatar {width:28px;height:28px;}
  .pname{font-size:13px;min-width: 115px;}
  .shead{flex-direction:column;gap:5px}
  tr td:last-child{min-width: 110px;}
  .modal-box{padding:15px;}
}