/* Look and feel modelled on adb.org. ADB's own typeface (Ideal Sans) is licensed to ADB,
   so Source Sans 3 stands in for it; the logo is ADB's header mark, used at the event's request. */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,600;0,700;0,800;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root{
  --navy:#002569; --blue:#004888; --blue-50:#0077b8; --sky:#0090c4; --blue-soft:#e5f1f8; --blue-line:#b9d7ea;
  --magenta:#962774; --magenta-soft:#f6e9f2;
  --orange:#d9531e; --orange-soft:#fcede6;
  --red:#c8102e; --red-soft:#fbe8eb; --red-line:#f0b9c2;
  --gold:#b88a00; --gold-soft:#fff6dc;
  --paper:#ffffff; --bg:#eef0f3; --bg2:#f6f7f9; --panel:#ffffff;
  --line:#d9dde3; --line2:#e8ebef;
  --ink:#333333; --head:#1f2a37; --mute:#5f6670; --mute2:#8c939c;
  --warmup:#2e7d32; --intermediate:#b25e00; --advanced:#c8102e;
  --sans:"Source Sans 3", "Ideal Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0; color:var(--ink); font-family:var(--sans); font-size:16px; background:var(--bg); min-height:100vh; -webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--head)}
a{color:var(--blue)} a:hover{color:var(--sky)}
button{font-family:inherit; cursor:pointer}
input,select{font-family:var(--sans)}
code{font-family:var(--mono); font-size:.86em; background:var(--blue-soft); color:var(--blue); border:1px solid var(--blue-line); border-radius:5px; padding:1px 6px; word-break:break-word}
[hidden]{display:none !important}

/* ---------- ADB brand block (logo + slogan) ---------- */
.adb-brand{display:flex; align-items:center; gap:12px; flex-shrink:0}
.adb-logo{width:44px; height:44px; display:block}
.adb-slogan{border-left:1px solid var(--line); padding-left:12px; color:var(--blue-50); font-weight:700; font-size:13px; line-height:1.2}
.site-head{background:#fff; padding:14px 32px; border-bottom:4px solid var(--line2); position:sticky; top:0; z-index:20}

/* ---------- join ---------- */
.join{min-height:100vh; display:flex; flex-direction:column}
.hero{flex:1; background:linear-gradient(120deg, var(--navy) 0%, var(--blue) 58%, var(--blue-50) 100%); display:flex; align-items:center; padding:48px 32px}
.hero-in{width:min(1140px,100%); margin:0 auto; display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center}
.hero-in.solo{grid-template-columns:minmax(0,460px); justify-content:center}
.hero-copy{color:#fff}
.hero-copy .eyebrow{color:#ffd166}
.eyebrow{font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--magenta); margin-bottom:10px; text-transform:uppercase}
.join-title{font-size:46px; line-height:1.08; margin:0 0 16px; font-weight:700; color:#fff}
.join-desc{color:rgba(255,255,255,.88); font-size:18px; line-height:1.55; margin:0}
.join-card{background:var(--panel); border-radius:var(--radius); padding:32px; box-shadow:0 18px 48px rgba(0,24,72,.28)}
.join-card-title{margin:0 0 18px; font-size:24px; font-weight:700}
.fld{display:block; margin-bottom:16px}
.fld span{display:block; font-size:14px; color:var(--head); font-weight:600; margin-bottom:6px}
.fld input,.fld select{width:100%; padding:12px 16px; font-size:16px; background:#fff; border:1px solid #c3c9d1; border-radius:24px; color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s}
.fld input:focus,.fld select:focus{border-color:var(--blue-50); box-shadow:0 0 0 3px var(--blue-soft)}
.fine{font-size:13px; color:var(--mute); line-height:1.5; margin:14px 0 0}
.linkbtn{background:none; border:none; color:var(--blue); font-size:13px; font-weight:600; padding:0; text-decoration:underline}
.linkbtn:hover{color:var(--sky)}
.msg{font-size:14px; color:var(--mute); min-height:18px; margin-top:10px}
.msg.err{color:var(--red)} .msg.ok{color:var(--warmup)}

/* ---------- buttons (adb.org uses pill buttons with uppercase labels) ---------- */
.btn{border:1px solid #c3c9d1; background:#fff; color:var(--head); padding:10px 20px; border-radius:999px; font-size:14px; font-weight:700; letter-spacing:.02em; text-decoration:none; display:inline-block; transition:background .15s, border-color .15s, color .15s}
.btn:hover{border-color:var(--blue); color:var(--blue)}
.btn-primary{width:100%; background:var(--blue); border-color:var(--blue); color:#fff; font-size:15px; text-transform:uppercase; letter-spacing:.06em; padding:14px 22px}
.btn-primary:hover{background:var(--navy); border-color:var(--navy); color:#fff}
.btn-blue{background:var(--blue); border-color:var(--blue); color:#fff}
.btn-blue:hover{background:var(--navy); border-color:var(--navy); color:#fff}
.btn-danger{background:var(--red-soft); border-color:var(--red-line); color:var(--red)}
.btn-danger:hover{border-color:var(--red); color:var(--red)}
.btn-sm{padding:6px 12px; font-size:12px}
.btn[disabled]{opacity:.45; cursor:default}
.btn[disabled]:hover{border-color:#c3c9d1; color:var(--head)}
.btn-blue[disabled]:hover{border-color:var(--blue); color:#fff}

/* ---------- app shell ---------- */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 28px; border-bottom:4px solid var(--line2); background:#fff; position:sticky; top:0; z-index:20; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:18px; min-width:0}
.brand-who{min-width:0; border-left:1px solid var(--line); padding-left:18px}
.brand-title{font-weight:700; font-size:16px; color:var(--head); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand-sub{font-size:13px; color:var(--mute)}
.top-right{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.stat{text-align:right}
.stat-num{font-size:24px; font-weight:700; color:var(--blue); line-height:1}
.stat-lbl{font-size:11px; color:var(--mute); text-transform:uppercase; letter-spacing:.06em; font-weight:600}
.timer{font-family:var(--mono); font-size:18px; font-weight:600; padding:6px 12px; border-radius:999px; background:var(--bg2); border:1px solid var(--line); color:var(--head)}
.timer.low{color:var(--red); border-color:var(--red-line); background:var(--red-soft)}
.tabs{display:flex; gap:4px}
.tab{border:none; background:transparent; color:var(--head); padding:8px 12px; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; border-bottom:3px solid transparent}
.tab:hover{color:var(--blue)}
.tab.on{color:var(--blue); border-bottom-color:var(--blue)}

.banner{margin:16px auto 0; max-width:1140px; padding:12px 18px; border-radius:var(--radius); font-size:15px; border:1px solid var(--line); background:var(--panel); display:flex; gap:10px; align-items:center}
.banner.wait{background:var(--blue-soft); border-color:var(--blue-line); color:var(--blue)}
.banner.pause{background:var(--gold-soft); border-color:#ecd48a; color:#6d5300}
.banner.end{background:var(--orange-soft); border-color:#f2c2ab; color:#9a3a12}
.banner.freeze{background:var(--magenta-soft); border-color:#e2bfd6; color:var(--magenta)}

.body{display:flex; align-items:flex-start; max-width:1280px; margin:0 auto}
.rail{width:270px; flex:0 0 270px; padding:22px 14px; position:sticky; top:72px; max-height:calc(100vh - 72px); overflow:auto}
.rail-head{font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--magenta); text-transform:uppercase; margin:8px 8px 10px}
.rail-help{font-size:13px; color:var(--mute); line-height:1.4; margin:-4px 8px 10px}
.rail-item{display:block; width:100%; text-align:left; background:#fff; border:1px solid var(--line); border-left:4px solid transparent; border-radius:var(--radius); padding:12px 14px; margin-bottom:8px}
.rail-item:hover{border-color:var(--blue-line)}
.rail-item.active{border-color:var(--blue-line); border-left-color:var(--blue); background:var(--blue-soft)}
.rail-name{font-size:16px; font-weight:700; color:var(--head)}
.rail-count{font-size:13px; color:var(--mute)}
.track{height:6px; background:var(--line2); border-radius:4px; overflow:hidden; margin-top:8px}
.track span{display:block; height:100%; background:var(--blue-50); transition:width .5s}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:0 8px 8px}
.chip{border:1px solid #c3c9d1; background:#fff; color:var(--head); font-size:13px; font-weight:600; padding:5px 12px; border-radius:999px}
.chip:hover{border-color:var(--blue); color:var(--blue)}
.chip.on{background:var(--blue); color:#fff; border-color:var(--blue)}

.main{flex:1; padding:26px 28px 60px; min-width:0}
.sec-head{margin-bottom:16px}
.sec-eyebrow{font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--magenta); margin-bottom:4px; text-transform:uppercase}
.sec-title{font-size:32px; margin:0 0 6px; font-weight:700}
.sec-blurb{color:var(--mute); font-size:15px; line-height:1.5; margin:0}
.tier-head{display:flex; align-items:center; gap:12px; margin:24px 0 12px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--head)}
.tier-head::after{content:""; flex:1; height:1px; background:var(--line)}

/* ---------- question cards ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; position:relative; overflow:hidden; box-shadow:0 2px 8px rgba(0,37,105,.05); display:flex; flex-direction:column}
.card::before{content:""; position:absolute; left:0; top:0; right:0; height:4px; background:var(--line2)}
.card.solved{border-color:#b9dcbc}
.card.solved::before{background:var(--warmup)}
.card-top{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap}
.badges{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.badge{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:3px 9px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--mute)}
.badge.warmup{color:var(--warmup); border-color:#b9dcbc}
.badge.intermediate{color:var(--intermediate); border-color:#efcf9f}
.badge.advanced{color:var(--advanced); border-color:var(--red-line)}
.badge.bits{color:var(--magenta); border-color:#e2bfd6; background:var(--magenta-soft)}
.qid{font-family:var(--mono); font-size:11px; color:var(--mute2)}
.pts{font-size:15px; font-weight:700; color:var(--blue); white-space:nowrap}
.card h3{margin:0 0 8px; font-size:20px; font-weight:700}
.prompt{font-size:16px; line-height:1.5; margin:0 0 10px}
.fmt{font-size:14px; color:var(--mute); margin:0 0 14px}
.fmt b{color:var(--head); font-weight:700}
.tf{display:flex; gap:8px; margin-top:auto}
.tf input{flex:1; min-width:0; padding:10px 16px; font-family:var(--mono); font-size:15px; background:#fff; border:1px solid #c3c9d1; border-radius:999px; color:var(--ink); outline:none}
.tf input:focus{border-color:var(--blue-50); box-shadow:0 0 0 3px var(--blue-soft)}
.tf input:disabled{background:var(--bg2)}
.hints{display:flex; flex-direction:column; gap:6px; margin-top:10px}
.hint-btn{align-self:flex-start; background:none; border:none; color:var(--blue); font-size:14px; font-weight:600; padding:0; text-decoration:underline}
.hint-btn:hover{color:var(--sky)}
.hint{margin:0; padding:10px 14px; background:var(--blue-soft); border-left:3px solid var(--blue-50); border-radius:6px; color:#22405e; font-size:14px; line-height:1.5}
.feedback{margin-top:10px; font-size:14px; font-weight:600; min-height:18px}
.feedback.ok{color:var(--warmup)} .feedback.no{color:var(--red)} .feedback.wait{color:var(--intermediate)}
.meta{display:flex; justify-content:space-between; margin-top:8px; font-size:12px; color:var(--mute2)}
.spark{position:absolute; bottom:20px; font-size:18px; color:var(--blue-50); pointer-events:none; animation:fly .9s ease-out forwards}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)); opacity:0}}
.shake{animation:shk .38s}
@keyframes shk{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ---------- leaderboard rows (player + projector) ---------- */
.board{display:flex; flex-direction:column; gap:8px}
.brow{display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:14px; padding:12px 18px; background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--line); border-radius:var(--radius)}
.brow.me{border-left-color:var(--magenta); background:linear-gradient(90deg, var(--magenta-soft), var(--panel) 60%)}
.brow.r1{border-left-color:var(--gold)}
.rank{font-size:20px; font-weight:700; color:var(--mute); text-align:center}
.brow.r1 .rank{color:var(--gold)}
.bname{min-width:0}
.bname .nm{font-weight:700; font-size:17px; color:var(--head); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block}
.bname .tm{font-size:13px; color:var(--mute)}
.bscore{font-size:18px; font-weight:700; color:var(--blue); text-align:right; white-space:nowrap}
.bscore small{display:block; color:var(--mute); font-size:12px; font-weight:400}
.empty{padding:36px; text-align:center; color:var(--mute); border:1px dashed #c3c9d1; border-radius:var(--radius); background:var(--panel)}

/* ---------- projector ---------- */
.proj{padding:0 0 28px}
.proj-head{display:flex; justify-content:space-between; align-items:center; gap:20px; margin:0 0 26px; padding:20px max(40px, calc((100% - 1500px) / 2 + 40px)); background:#fff; border-bottom:4px solid var(--line2); flex-wrap:wrap}
.proj-brand{display:flex; align-items:center; gap:24px; min-width:0}
.proj-brand .adb-logo{width:64px; height:64px}
.proj-brand .adb-slogan{font-size:16px}
.proj-title{font-size:40px; font-weight:700; margin:0; line-height:1.1}
.proj-sub{color:var(--mute); font-size:17px; margin-top:6px}
.live{display:inline-block; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:2px 10px; border-radius:999px; background:var(--bg2); border:1px solid var(--line); color:var(--head); margin-right:6px}
.live.running{background:var(--orange); border-color:var(--orange); color:#fff}
.proj-timer{font-family:var(--mono); font-size:60px; font-weight:600; color:var(--blue); line-height:1}
.proj-timer.low{color:var(--red)}
.proj-grid{display:grid; grid-template-columns:2fr 1fr; gap:24px; max-width:1500px; margin:0 auto; padding:0 40px}
.proj .brow{padding:16px 22px; grid-template-columns:64px 1fr auto}
.proj .rank{font-size:30px}
.proj .bname .nm{font-size:26px}
.proj .bname .tm{font-size:15px}
.proj .bscore{font-size:28px}
.proj .bscore small{font-size:15px}
.blood{background:var(--panel); border:1px solid var(--line); border-top:4px solid var(--magenta); border-radius:var(--radius); padding:18px}
.blood h3{margin:0 0 10px; font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--magenta)}
.blood-row{padding:10px 0; border-top:1px solid var(--line2); font-size:18px; font-weight:600; color:var(--head)}
.blood-row:first-of-type{border-top:none}
.blood-row .q{font-size:14px; font-weight:400; color:var(--mute)}
.joinbox{margin-top:16px; background:linear-gradient(120deg, var(--navy), var(--blue)); color:#fff; border-radius:var(--radius); padding:18px; font-size:16px}
.joinbox b{font-family:var(--mono); font-size:30px; letter-spacing:.08em; display:block; margin-top:4px}

/* ---------- admin ---------- */
.admin{max-width:1280px; margin:0 auto; padding:24px}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:16px}
.panel h2{margin:0 0 12px; font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--magenta)}
.row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.kv{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; margin-bottom:14px}
.kv div{background:var(--bg2); border:1px solid var(--line2); border-radius:8px; padding:10px 12px}
.kv b{display:block; font-size:20px; color:var(--head)}
.kv span{font-size:12px; font-weight:600; color:var(--mute); text-transform:uppercase; letter-spacing:.04em}
.settings{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; align-items:end}
.settings .fld{margin:0}
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{text-align:left; padding:8px; border-bottom:1px solid var(--line2); vertical-align:middle}
th{font-size:12px; font-weight:700; color:var(--mute); text-transform:uppercase; letter-spacing:.04em}
td.num{font-variant-numeric:tabular-nums; text-align:right}
tr.off td{opacity:.5}
.fix{display:flex; gap:6px; flex-wrap:wrap}
.fix input{width:170px; padding:6px 10px; border:1px solid #c3c9d1; border-radius:999px; font-size:13px; font-family:var(--mono)}
.scroll{overflow:auto}

/* ---------- modal ---------- */
.overlay{position:fixed; inset:0; background:rgba(0,24,72,.45); z-index:100; display:flex; align-items:center; justify-content:center; padding:20px}
.confirm{background:var(--panel); border-radius:var(--radius); padding:24px; width:min(440px,100%); box-shadow:0 30px 80px rgba(0,24,72,.3)}
.confirm p{margin:0 0 18px; font-size:17px; line-height:1.5}
.confirm .row{justify-content:flex-end}

@media(max-width:900px){
  .site-head{padding:10px 16px}
  .hero{padding:24px 16px; align-items:flex-start}
  .hero-in{grid-template-columns:1fr; gap:22px}
  .join-title{font-size:32px}
  .join-desc{font-size:16px}
  .join-card{padding:22px}
  .body{flex-direction:column}
  .rail{width:100%; flex:none; position:static; max-height:none; display:flex; gap:6px; overflow-x:auto; padding:12px}
  .rail-head,.rail-help{display:none}
  .rail-item{flex:0 0 auto; width:auto; margin:0; padding:9px 12px}
  .rail .track{display:none}
  .chips{display:none}
  .chips.mobile{display:flex; margin:0 0 10px}
  .main{padding:16px 14px 60px}
  .cards{grid-template-columns:1fr}
  .topbar{padding:8px 12px; gap:10px}
  .brand-who{display:none}
  .adb-slogan{font-size:12px}
  .proj-grid{grid-template-columns:1fr}
}
@media(min-width:901px){ .chips.mobile{display:none} }
@media(prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }