/* Draft Duel — colors from draftduel.us :root (see ../../style.md); layout/components original. */
:root{--bg:hsl(211.06 100% 50%);--card:hsl(211.71 92.11% 85.1%);--primary:hsl(228 85% 42%);--primary-fg:hsl(228 85% 98%);--gold:hsl(47.06 100% 50%);
--accent:hsl(186 75% 85%);--accent-fg:hsl(186 85% 18%);--fg:hsl(222 30% 12%);--muted:hsl(220 15% 88%);--muted-fg:hsl(220 12% 38%);--border:hsl(220 20% 85%);
--danger:hsl(0 84% 38%);--orange:#F26B00;--lime:#84CC16;--r:.5rem;--shadow:0 10px 15px -3px hsl(0 0% 0%/.12),0 4px 8px -4px hsl(0 0% 0%/.08)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,sans-serif;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
body{background-image:repeating-linear-gradient(90deg,transparent 0 119px,hsl(0 0% 100%/.07) 119px 121px)}
a{color:var(--primary);font-weight:600}h1,h2,h3{margin:.2em 0 .5em}.display,h1{font-family:"Bebas Neue",sans-serif;letter-spacing:.02em;font-weight:400}
main{flex:1;width:100%;max-width:1150px;margin:0 auto;padding:24px 18px}
footer{text-align:center;color:var(--primary-fg);opacity:.8;font-size:.8rem;padding:20px}
.top{display:flex;justify-content:space-between;align-items:center;padding:12px 22px;background:var(--primary);color:var(--primary-fg);box-shadow:var(--shadow);flex-wrap:wrap;gap:10px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:"Bebas Neue";font-size:2rem;font-weight:400;letter-spacing:.04em}
.brand img{height:42px;width:auto;filter:drop-shadow(0 2px 4px hsl(220 60% 10%/.45))}
.top nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.top nav a{color:#fff;text-decoration:none}.inline{display:inline}
.link{background:none;border:0;color:#fff;cursor:pointer;font:inherit}
.btn{display:inline-block;border:1px solid var(--border);background:#fff;color:var(--primary);border-radius:var(--r);padding:.6em 1.1em;font:700 .95rem Inter;cursor:pointer;text-decoration:none;transition:transform .1s}
.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.gold{background:var(--gold);border-color:hsl(47 100% 42%);color:var(--fg)}.btn.ghost{background:transparent;color:#fff;border-color:#fff}.btn.danger{color:var(--danger)}
.btn.sm{padding:.35em .7em;font-size:.8rem}.btn.lg{padding:.85em 1.5em;font-size:1.05rem}.btn.full{width:100%}
.pill{padding:.2em .7em;border-radius:99px}.pill.gold{background:var(--gold);color:var(--fg)!important}
.card{background:var(--card);border-radius:calc(var(--r)*1.5);padding:20px 22px;box-shadow:var(--shadow);margin-bottom:18px}.narrow{max-width:460px;margin:30px auto}
.muted{color:var(--muted-fg)}.error{background:#fee;color:var(--danger);padding:.6em .9em;border-radius:var(--r)}.ok{background:var(--accent);color:var(--accent-fg);padding:.6em .9em;border-radius:var(--r)}
.kicker{display:inline-block;background:var(--gold);color:var(--fg);font-weight:800;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;padding:.3em .7em;border-radius:4px}
/* hero */
.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center;color:#fff;padding:30px 0 40px}
.hero h1{font-size:clamp(3rem,7vw,5.4rem);line-height:.92;margin:.25em 0}.hero h1 em{color:var(--gold);font-style:normal}.hero p{font-size:1.15rem;max-width:520px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.hero-board{background:var(--primary);border-radius:16px;padding:20px;box-shadow:0 25px 50px -12px hsl(0 0% 0%/.4);transform:rotate(2deg);border:3px solid var(--gold)}
.board-top{display:flex;justify-content:space-between;align-items:center;font-family:"Bebas Neue";font-size:1.5rem}
.draw{background:#fff;color:var(--fg);border-radius:12px;padding:16px;margin:14px 0;text-align:center}.draw small{display:block;color:var(--muted-fg);font-weight:800;letter-spacing:.1em;font-size:.7rem}
.draw b{font-family:"Bebas Neue";font-size:2.6rem;font-weight:400;color:var(--primary)}
.board-row{display:flex;justify-content:space-between;background:hsl(0 0% 100%/.12);border-radius:8px;padding:10px 14px;margin-top:8px;font-weight:700}.board-row i{color:var(--gold)}.board-row.dim{opacity:.6}
.ring{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--gold) var(--p,70%),hsl(0 0% 100%/.2) 0);font:400 1.6rem "Bebas Neue";color:#fff;position:relative}
.ring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--primary)}.ring span,.ring{z-index:0}.ring>*{position:relative;z-index:1}.ring.sm{width:44px;height:44px;font-size:1.2rem}
.ring.sm::before{inset:4px}
.how h2,.cta-band h2{color:#fff;font-size:3rem;text-align:center}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{background:#fff;border-radius:14px;padding:20px;position:relative;box-shadow:var(--shadow)}.step>b{position:absolute;top:-16px;left:18px;background:var(--gold);width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font:400 1.6rem "Bebas Neue"}
.step h3{margin-top:14px}.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.slots{display:flex;flex-wrap:wrap;gap:6px}.slot{display:inline-block;min-width:44px;text-align:center;padding:.25em .5em;border-radius:6px;font:800 .75rem Inter;color:#fff;background:var(--primary)}
.slot.QB{background:#DC2626}.slot.RB{background:#16a34a}.slot.WR{background:#2563EB}.slot.TE{background:#EA580C}.slot.FLEX{background:#7c3aed}.slot.K{background:#475569}.slot.DEF{background:#151B28}.slot.BENCH{background:#9ca3af}
.cta-band{text-align:center;padding:40px 0}
/* auth */
.auth{text-align:center}.auth form{text-align:left}.auth-logo{width:96px;height:auto;filter:drop-shadow(0 6px 12px hsl(220 60% 10%/.35))}
label{display:block;font-weight:700;font-size:.9rem;margin:12px 0}input,select{display:block;width:100%;margin-top:5px;padding:.65em .8em;border:1px solid hsl(220 15% 68%);border-radius:var(--r);font:inherit;background:#fff}
label.check{display:flex;gap:8px;align-items:center}label.check input{width:auto;margin:0}
/* dashboard */
.welcome{display:flex;justify-content:space-between;align-items:end;color:#fff;gap:16px;flex-wrap:wrap}.welcome h1{font-size:3rem;margin:.1em 0}
.deadline{background:var(--primary);padding:12px 18px;border-radius:12px;border-left:6px solid var(--gold)}.deadline small{display:block;opacity:.8}.deadline.closed{border-color:var(--danger)}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0}.mode{background:#fff;border-radius:14px;padding:20px;box-shadow:var(--shadow);border-top:6px solid var(--gold)}
.mode input{margin-bottom:10px}.joinform{display:flex;gap:8px;margin-top:12px}.joinform input{margin:0;text-transform:uppercase}
table{width:100%;border-collapse:collapse}td,th{padding:8px 6px;border-bottom:1px solid hsl(211 60% 78%);text-align:left;font-size:.92rem}
.tag{display:inline-block;padding:.15em .55em;border-radius:5px;background:var(--muted);font-size:.72rem;font-weight:800;text-transform:uppercase}.tag.live{background:var(--lime);color:#14300a}.tag.final{background:var(--fg);color:#fff}.tag.upcoming{background:var(--accent);color:var(--accent-fg)}.tag.bad{background:var(--danger);color:#fff}
.record{background:var(--gold);padding:0 .3em;border-radius:6px}
/* draft room */
.roomhead{display:flex;justify-content:space-between;align-items:center;color:#fff;flex-wrap:wrap;gap:12px}.roomhead h1{font-size:2.6rem;margin:0}
.share{background:#fff;color:var(--fg);border-radius:12px;padding:16px;margin:16px 0;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.share code{font-size:1.6rem;font-weight:800;color:var(--primary);letter-spacing:.15em}
.share input{flex:1;min-width:220px;margin:0}
.arena{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:16px;margin-top:16px}
.clock{background:var(--primary);color:#fff;border-radius:16px;padding:18px;text-align:center;border:3px solid var(--gold);box-shadow:var(--shadow)}
.clock .ring{width:96px;height:96px;font-size:2.4rem;margin:8px auto}.clock .ring::before{inset:8px}.clock .draw{margin:10px 0}
.onclock{font-weight:800;font-size:1.05rem}.onclock.me{color:var(--gold)}
.pool{list-style:none;padding:0;margin:12px 0 0;max-height:420px;overflow:auto;text-align:left}
.pool li{display:flex;align-items:center;gap:10px;background:#fff;color:var(--fg);border-radius:8px;padding:8px 10px;margin-bottom:6px}
.pool li .nm{flex:1}.pool li small{display:block;color:var(--muted-fg)}.pool li .fit{font-size:.7rem;font-weight:800;color:var(--accent-fg);background:var(--accent);padding:.15em .4em;border-radius:4px}.pool li .fit.BENCH{background:var(--muted);color:var(--muted-fg)}
.rosterbox{background:var(--card);border-radius:14px;padding:16px;box-shadow:var(--shadow)}.rosterbox.active{outline:4px solid var(--gold)}
.rosterbox h3{display:flex;justify-content:space-between}.rosterbox ul{list-style:none;padding:0;margin:0}.rosterbox li{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid hsl(211 60% 78%);font-size:.9rem}
.rosterbox li .empty{color:var(--muted-fg);font-style:italic}.bench{font-size:.82rem}
.ticker{background:#fff;border-radius:12px;padding:12px 16px;margin-top:16px;max-height:200px;overflow:auto;font-size:.88rem}.ticker div{padding:3px 0;border-bottom:1px dashed var(--border)}
.pass{position:fixed;inset:0;background:hsl(228 85% 42%/.97);color:#fff;display:grid;place-items:center;text-align:center;z-index:10}.pass h2{font:400 3.5rem "Bebas Neue"}
/* matchup */
.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;background:var(--fg);color:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);border-bottom:6px solid var(--gold)}
.sb-team{padding:22px;text-align:center}.sb-team span{font-weight:800;font-size:1.1rem}.sb-team b{display:block;font:400 4rem "Bebas Neue";line-height:1}.sb-team small,.sb-mid small{display:block;opacity:.7}
.sb-team.lead b{color:var(--gold)}.sb-mid{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:0 20px;background:var(--primary)}
.sides{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.side{background:var(--card);border-radius:14px;padding:16px;box-shadow:var(--shadow)}.side.lead{outline:4px solid var(--gold)}
.lineup td small{display:block;color:var(--muted-fg);font-size:.75rem}.num{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
/* admin */
.subnav{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}.subnav a{background:hsl(0 0% 100%/.2);color:#fff;padding:.45em .9em;border-radius:var(--r);text-decoration:none}.subnav a.on{background:var(--gold);color:var(--fg)}
main>h1.display{color:#fff;font-size:2.8rem}.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.stat{background:#fff;border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.stat b{display:block;font:400 2.6rem "Bebas Neue";color:var(--primary)}.actions{display:flex;gap:6px}.row{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:860px){.hero,.steps,.rules,.modes,.arena,.sides,.statgrid{grid-template-columns:1fr}.hero-board{transform:none}.scoreboard{grid-template-columns:1fr}}
footer a{color:inherit;text-decoration:underline;margin:0 4px}
.legal h3{margin-top:18px}.legal ul{padding-left:20px;line-height:1.6}

.hero-logo{width:clamp(96px,14vw,150px);height:auto;display:block;margin-bottom:6px;filter:drop-shadow(0 10px 20px hsl(220 60% 10%/.45))}