:root { --navy:#0b2a5b; --navy2:#123c7c; --gold:#ffc72c; --sky:#e8f2fd; --line:#d3e0ef; }
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&display=swap');
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, sans-serif; background: linear-gradient(135deg,#082048,#0b2a5b 55%,#123c7c); color:#fff; min-height:100vh; }
h1,h2 { font-family: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif; text-transform: uppercase; margin:0; }
.wrap { max-width: 860px; margin: 0 auto; padding: 24px; }
.banner { background: var(--gold); color: var(--navy); padding: 12px 24px; clip-path: polygon(0 0,100% 0,calc(100% - 40px) 100%,0 100%); display:inline-block; margin-bottom: 20px; }
.banner h1 { font-size: 40px; line-height: 1; }
.banner small { display:block; font-size: 20px; }
.card { background:#fff; color:var(--navy); border-radius:12px; padding:20px; box-shadow:0 0 0 3px var(--gold); }
input, select, button { font: inherit; }
input[type=text], input[type=email], select { width:100%; padding:12px; border:2px solid var(--line); border-radius:8px; font-size:18px; }
.btn { background: var(--gold); color: var(--navy); border:0; padding:12px 20px; border-radius:8px; font-weight:800; font-size:18px; text-transform:uppercase; cursor:pointer; }
.btn.alt { background: var(--navy); color:#fff; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.row { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.row > input { flex:1; min-width: 180px; }
.hide { display:none !important; }
.tabs { display:flex; gap:8px; margin-bottom:12px; }
.tab { flex:1; padding:10px; border-radius:8px; border:2px solid var(--gold); background:transparent; color:#fff; font-weight:700; cursor:pointer; }
.tab.active { background: var(--gold); color: var(--navy); }
.tab.done::after { content:" ✓"; }
.tab:disabled { opacity:.4; cursor:not-allowed; }
#log { height: 320px; overflow-y:auto; background: var(--sky); border-radius:8px; padding:12px; margin-bottom:12px; }
.msg { margin:8px 0; padding:8px 12px; border-radius:10px; max-width:85%; white-space:pre-wrap; }
.msg.user { background: var(--navy); color:#fff; margin-left:auto; }
.msg.ai { background:#fff; border:1px solid var(--line); }
.hint { color:#5a6f8c; font-size:14px; }
.good { color:#0a7d33; font-weight:700; } .bad { color:#b3261e; font-weight:700; }
/* leaderboard */
.lb { padding: 32px 48px; }
.lb h1 { font-size: 72px; color: var(--gold); }
.lb .sub { font-size: 28px; color:#d3e2f5; margin: 6px 0 24px; }
.lb table { width:100%; border-collapse: collapse; font-size: 38px; }
.lb td { padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.15); }
.lb td.rank { color: var(--gold); width: 80px; font-weight:800; }
.lb td.score { text-align:right; font-weight:800; }
.lb td.lv { text-align:right; color:#d3e2f5; font-size:28px; }
.lb .foot { margin-top: 20px; font-size: 24px; color:#d3e2f5; }

.brand { display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.brand img { height:84px; background:#fff; border-radius:10px; padding:5px 7px; box-shadow:0 0 0 3px var(--gold), 0 8px 24px rgba(0,0,0,.3); }
.brand .dept { font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif; font-weight:800; text-transform:uppercase; line-height:1.02; font-size:26px; }
.brand .dept span { color:var(--gold); }
.lb .brand img { height:110px; } .lb .brand .dept { font-size:38px; }
.msg.hint { background:#fff6d6; border:1px solid var(--gold); max-width:100%; }