/* Draft2Play — midnight stadium identity */
:root{--ink:#f4f7fb;--muted:#9aa8ba;--line:rgba(184,205,226,.16);--panel:rgba(14,23,37,.78);--bg:#070b14;--lime:#ff724c;--orange:#58d6ff;--red:#ff4e76}
body{min-height:100vh;background:radial-gradient(ellipse 80% 56% at 100% -10%,#18375a 0%,transparent 57%),radial-gradient(ellipse 55% 48% at -10% 80%,#392039 0%,transparent 59%),#070b14;color:var(--ink);letter-spacing:.01em;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.38;background-image:linear-gradient(115deg,transparent 46%,rgba(88,214,255,.045) 46.2%,transparent 46.5%),radial-gradient(circle at 20% 20%,rgba(255,114,76,.13) 0 1px,transparent 1.8px);background-size:100% 100%,17px 17px;animation:atmosphere 16s ease-in-out infinite alternate}
.shell{max-width:1240px;padding:36px 24px;animation:page-enter .7s cubic-bezier(.2,.8,.2,1) both}
.brand{gap:14px;text-transform:uppercase;font-size:18px;letter-spacing:2px}.ball{width:36px;height:36px;background:conic-gradient(from 110deg,#ff724c,#ffd096,#58d6ff,#ff724c);color:#07101a;box-shadow:0 0 0 3px rgba(255,114,76,.11),0 8px 24px rgba(255,114,76,.28);animation:brand-spin 9s linear infinite}.logo-mark{position:relative;display:block;flex:0 0 76px;width:76px;height:76px;isolation:isolate;background:url('/web/draft2play-logo.png?v=2') center/contain no-repeat;filter:drop-shadow(0 8px 15px rgba(0,0,0,.5));animation:logo-metal-base 8s ease-in-out infinite}.logo-mark:after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 29%,rgba(255,255,255,.14) 39%,rgba(219,247,255,.77) 47%,rgba(255,255,255,.12) 55%,transparent 65%);background-size:260% 100%;mix-blend-mode:screen;opacity:.72;-webkit-mask:url('/web/draft2play-logo.png?v=2') center/contain no-repeat;mask:url('/web/draft2play-logo.png?v=2') center/contain no-repeat;animation:metallic-paint 7.5s ease-in-out infinite}.eyebrow{color:#58d6ff;letter-spacing:1.7px}
.hero{padding:78px 0 40px}.hero h1{font-size:clamp(44px,7vw,78px);letter-spacing:-4px;color:#f5f8ff!important;background:none!important;-webkit-text-fill-color:#f5f8ff;text-shadow:0 5px 28px rgba(3,10,20,.45)}.hero p{max-width:590px;color:#b7c4d4!important}
.card{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(22,35,54,.96),rgba(10,16,27,.94));border-color:rgba(147,184,219,.25);box-shadow:0 18px 45px rgba(0,0,0,.24);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}.card:before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.065),transparent 28%);pointer-events:none}.card h2,.card p,.card label{position:relative;z-index:1}.card h2{color:#f4f7fb!important}.card p{color:#b7c4d4!important}.card:hover{transform:translateY(-3px);border-color:rgba(88,214,255,.36);box-shadow:0 24px 60px rgba(0,0,0,.3)}
input,select{background:rgba(5,11,20,.74);border-color:rgba(148,179,210,.24);transition:border-color .2s,box-shadow .2s}input:focus,select:focus{outline:0;border-color:#58d6ff;box-shadow:0 0 0 3px rgba(88,214,255,.13)}
button{background:linear-gradient(135deg,#ff825f,#ff5d70);color:#150b12;box-shadow:0 7px 20px rgba(255,92,109,.2);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}button:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 11px 25px rgba(255,92,109,.32)}button.secondary{background:rgba(15,27,43,.72);color:#d9e9f6;border-color:rgba(117,184,221,.32);box-shadow:none}button.secondary:hover:not(:disabled){border-color:#58d6ff;box-shadow:0 0 0 3px rgba(88,214,255,.1)}
.topbar{border-color:rgba(147,184,219,.18);position:relative}.topbar:after{content:"";position:absolute;bottom:-1px;left:0;width:88px;height:1px;background:linear-gradient(90deg,#58d6ff,#ff724c);box-shadow:0 0 13px #58d6ff;animation:line-run 4.5s ease-in-out infinite}.room-code{background:rgba(7,14,25,.85);border-color:rgba(88,214,255,.42);color:#81e4ff;box-shadow:inset 0 0 16px rgba(88,214,255,.06),0 0 20px rgba(88,214,255,.08);letter-spacing:1.5px;animation:code-breathe 3s ease-in-out infinite}
.option,.person{background:rgba(7,15,26,.58);border-color:rgba(147,184,219,.16);transition:background .2s,border-color .2s}.option:hover,.person:hover{background:rgba(20,38,57,.66);border-color:rgba(88,214,255,.32)}.avatar{background:linear-gradient(135deg,#203d59,#2f6b85);color:#eaffff}.status{color:#ffad67}.status.ready{color:#6ee7c0}
.player-card{position:relative;overflow:hidden;background:radial-gradient(260px circle at var(--spotlight-x,50%) var(--spotlight-y,50%),rgba(88,214,255,.16),transparent 43%),linear-gradient(145deg,rgba(20,37,53,.9),rgba(9,19,30,.88));border-color:rgba(136,174,205,.17);transition:transform .22s ease,border-color .22s ease,background .22s ease;animation:card-in .38s both}.player-card:nth-child(2n){animation-delay:.04s}.player-card:nth-child(3n){animation-delay:.08s}.player-card:hover{background:radial-gradient(260px circle at var(--spotlight-x,50%) var(--spotlight-y,50%),rgba(88,214,255,.21),transparent 43%),linear-gradient(145deg,rgba(29,55,76,.95),rgba(12,26,39,.93));border-color:#58d6ff;transform:translateY(-3px) scale(1.008)}.player-card.selected{border-color:#ff724c;box-shadow:0 0 0 1px #ff724c,0 9px 28px rgba(255,91,111,.2)}.rating{background:rgba(88,214,255,.13);color:#82e6ff}.team-reveal{min-height:31px;letter-spacing:-.7px}.count-up{display:inline-block;font-variant-numeric:tabular-nums;animation:score-pop .42s cubic-bezier(.2,.8,.2,1)}@keyframes score-pop{0%{opacity:.25;transform:scale(.72)}70%{transform:scale(1.17)}100%{opacity:1;transform:scale(1)}}
.timer{color:#ff8c6f;text-shadow:0 0 22px rgba(255,114,76,.32);animation:timer-pulse 1.4s ease-in-out infinite}.progress{background:rgba(116,151,183,.19)}.progress>i{background:linear-gradient(90deg,#ff5f72,#ffb36b);box-shadow:0 0 12px rgba(255,114,76,.46)}.draft-footer{background:rgba(7,13,23,.88);border-color:rgba(147,184,219,.18)}
#squad>div{border-color:rgba(157,229,181,.7)!important;box-shadow:inset 0 0 75px rgba(3,19,14,.65),0 17px 46px rgba(0,0,0,.25)!important;animation:pitch-in .6s cubic-bezier(.2,.8,.2,1) both}#squad button{box-shadow:0 6px 17px rgba(0,0,0,.38)!important;transition:transform .2s,filter .2s}#squad button:hover{transform:translate(-50%,-50%) scale(1.13)!important;filter:brightness(1.18)}
@keyframes page-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes card-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes atmosphere{to{transform:translate3d(0,-10px,0);opacity:.57}}@keyframes brand-spin{to{rotate:360deg}}@keyframes metallic-paint{0%,15%{background-position:160% 0}52%{background-position:-65% 0}100%{background-position:-65% 0}}@keyframes logo-metal-base{0%,45%,100%{filter:saturate(1) brightness(1)}52%{filter:saturate(1.12) brightness(1.14)}}@keyframes code-breathe{50%{box-shadow:inset 0 0 24px rgba(88,214,255,.1),0 0 28px rgba(88,214,255,.18)}}@keyframes line-run{50%{width:210px;opacity:.68}}@keyframes timer-pulse{50%{scale:1.035;filter:brightness(1.14)}}@keyframes pitch-in{from{opacity:0;transform:perspective(600px) rotateX(4deg) translateY(8px)}to{opacity:1;transform:none}}
@property --electric-angle{syntax:"<angle>";initial-value:0deg;inherits:false}.award-electric{position:relative!important;isolation:isolate;border:1px solid transparent!important;background:linear-gradient(145deg,rgba(17,31,47,.98),rgba(8,17,29,.98)) padding-box,conic-gradient(from var(--electric-angle),#58d6ff,#c5f4ff 9%,#ff714c 18%,#ffce7a 27%,#58d6ff 37%,#0c1e31 48%,#58d6ff 63%,#ff5c78 77%,#c5f4ff 90%,#58d6ff) border-box!important;box-shadow:0 0 10px rgba(88,214,255,.4),0 0 26px rgba(255,92,120,.18)!important;animation:electric-border 2.7s linear infinite,electric-entrance .5s cubic-bezier(.2,.8,.2,1) both}.award-electric:after{content:"MVP";position:absolute;right:10px;top:-10px;padding:3px 7px;border-radius:999px;background:#f5f8ff;color:#142032;font-size:9px;font-weight:1000;letter-spacing:1px;box-shadow:0 0 15px rgba(88,214,255,.75)}@keyframes electric-border{to{--electric-angle:360deg}}@keyframes electric-entrance{0%{opacity:0;transform:scale(.93)}65%{opacity:1;transform:scale(1.025)}100%{transform:scale(1)}}
@media(max-width:760px){.shell{padding:22px 14px}.hero{padding:48px 4px 28px}.hero h1{letter-spacing:-2.7px}.card{border-radius:15px}.topbar{gap:9px}.room-code{font-size:12px;padding:7px 8px}}
@media(max-width:899px){.shell{max-width:680px}.topbar{align-items:flex-start;flex-wrap:wrap}.topbar>div:first-child{min-width:52%}.topbar button{order:3;flex:1}.topbar .room-code{margin-left:auto}.draft-layout{gap:12px!important}.draft-layout>.card:first-child{position:static!important}.draft-layout>.card:first-child #squad>div{height:min(64vh,590px)!important;min-height:430px!important}.draft-layout>.card:nth-child(2){max-height:none!important;overflow:visible!important}.draft-footer{bottom:8px;border:1px solid rgba(147,184,219,.18);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.32)}}
@media(max-width:560px){body{font-size:14px}.shell{padding:18px 10px}.brand{font-size:17px;letter-spacing:1.4px;gap:10px}.ball{width:32px;height:32px}.logo-mark{flex-basis:62px;width:62px;height:62px}.hero{padding:40px 2px 24px}.hero h1{font-size:44px;line-height:1.01}.hero p{font-size:16px}.grid,.setup{gap:10px}.card{padding:16px;border-radius:14px}.card h2{font-size:19px}.options{grid-template-columns:1fr 1fr;gap:7px}.option{padding:10px 8px;font-size:12px}.form-grid{gap:8px}.topbar{margin-bottom:13px;padding-bottom:13px}.topbar button{width:100%;font-size:12px;padding:9px}.room-code{font-size:11px}.draft-layout{padding:0!important}.draft-layout>.card:first-child{padding:13px}.draft-layout>.card:first-child #squad>div{height:58vh!important;min-height:385px!important}.timer{font-size:47px}.round-note{font-size:13px}.team-grid{gap:8px}.player-card{padding:12px}.player-card strong{font-size:15px}.pos{font-size:11px}.draft-footer{left:0;right:0;flex-direction:column;align-items:stretch;gap:8px;padding:10px}.draft-footer span{width:100%;font-size:13px}.draft-footer button{width:100%;min-height:44px}.draft-footer+*{padding-bottom:65px}#ownMatchPanel{padding-bottom:5px}table{font-size:11px!important}th,td{padding:3px 2px}.award-electric:after{right:7px}.person{padding:10px}.rating{padding:3px 5px}}
.mobile-placement{display:none}@media(max-width:560px){body.placing-player .draft-footer{display:none}.mobile-placement{display:block;position:fixed;z-index:30;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));padding:14px;border:1px solid rgba(88,214,255,.52);border-radius:18px;background:linear-gradient(145deg,rgba(11,25,40,.98),rgba(6,12,22,.99));box-shadow:0 -10px 40px rgba(0,0,0,.48),0 0 28px rgba(88,214,255,.12);animation:sheet-up .28s cubic-bezier(.2,.8,.2,1) both}.mobile-placement h3{margin:2px 0 4px;font-size:16px}.mobile-placement p{margin:0 0 11px;color:#9aa8ba;font-size:12px}.placement-slots{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.placement-slots button{min-height:44px;padding:8px;font-size:12px}.placement-slots button.active{background:linear-gradient(135deg,#ff825f,#ff5d70);box-shadow:0 0 0 2px rgba(255,255,255,.16)}.placement-confirm{width:100%;margin-top:9px;min-height:45px}.placement-close{position:absolute;top:9px;right:10px;padding:3px 7px;background:transparent;color:#9aa8ba;box-shadow:none}@keyframes sheet-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media(max-width:560px){.mobile-placement{display:none!important}.draft-footer{position:fixed!important;z-index:25;left:8px!important;right:8px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;margin:0!important;background:rgba(7,13,23,.97)!important;box-shadow:0 -8px 30px rgba(0,0,0,.42)!important}.draft-layout{padding-bottom:96px!important}}
.match-events{display:grid;gap:3px;margin-top:7px;color:#a8b5c6;font-size:12px;line-height:1.35}.match-events b{color:#eaf2ed;font-weight:800}
.kick-button{padding:6px 9px!important;color:#ff9cac!important;border-color:rgba(255,113,139,.4)!important;font-size:11px}.draft-presence{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:0 0 14px;padding:10px 0;border-bottom:1px solid var(--line)}.presence-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid rgba(147,184,219,.23);border-radius:999px;color:#a8b5c6;font-size:12px}.presence-pill i{width:7px;height:7px;border-radius:50%;background:#ffb36b;box-shadow:0 0 9px rgba(255,179,107,.6)}.presence-pill.picked{color:#a5f3c7;border-color:rgba(110,231,192,.5)}.presence-pill.picked i{background:#6ee7c0;box-shadow:0 0 10px rgba(110,231,192,.7)}.presence-muted{color:#8a9aab;font-size:12px}.round-transition .draft-layout{animation:round-arrive .42s cubic-bezier(.2,.8,.2,1)}@keyframes round-arrive{from{opacity:.58;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}.versus-compare{display:grid;gap:3px;margin-top:10px;padding:8px 10px;border-left:2px solid #ff724c;background:rgba(255,114,76,.06);font-size:11px}.versus-compare span{color:#ffb36b;font-weight:900;letter-spacing:.8px}.versus-compare small{color:#b9c7d6}.history-panel{display:grid;grid-template-columns:1fr auto;gap:10px;grid-column:1/-1;margin-top:16px;padding:15px;border-top:1px solid #294638;background:rgba(7,14,24,.42)}.history-panel h3{margin:4px 0 0}.history-panel select{width:auto;align-self:start}.history-results{grid-column:1/-1;display:grid;gap:8px}.history-results b{color:#bef264}
.system-note{margin:-8px 0 16px;padding:9px 11px;border:1px solid rgba(88,214,255,.35);border-radius:10px;background:rgba(88,214,255,.08);color:#bfeeff;font-size:13px}.personal-stats{display:grid;grid-template-columns:1fr;gap:12px;grid-column:1/-1;margin-top:14px;padding:15px;border:1px solid rgba(88,214,255,.3);border-radius:14px;background:linear-gradient(135deg,rgba(19,43,67,.82),rgba(8,17,29,.88))}.personal-stats h3{margin:4px 0 0}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.stat-grid>div{display:grid;gap:4px;padding:10px;border-radius:10px;background:rgba(5,12,21,.35)}.stat-grid small{color:#9dac9f}.stat-grid strong{font-size:13px}.stat-grid b{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:3px;border-radius:50%;font-size:10px}.form-G{background:#183d2d;color:#86efac}.form-B{background:#263754;color:#9acbff}.form-M{background:#45222d;color:#fda4af}
.qr-modal{display:none;position:fixed;z-index:100;inset:0;place-items:center;padding:18px;background:rgba(2,6,13,.74);backdrop-filter:blur(8px)}.qr-modal.open{display:grid}.qr-dialog{position:relative;width:min(360px,100%);padding:26px;border:1px solid rgba(88,214,255,.46);border-radius:20px;background:linear-gradient(145deg,#14273b,#09111e);box-shadow:0 25px 80px rgba(0,0,0,.52);text-align:center}.qr-dialog h2{margin:7px 0}.qr-dialog p{margin:0 0 16px;color:#a8b5c6;font-size:13px;line-height:1.45}.qr-canvas{display:grid;place-items:center;min-height:220px;margin:0 auto 16px;padding:10px;border-radius:14px;background:#f5f8ff;width:max-content;max-width:100%}.qr-canvas img{display:block;max-width:100%;height:auto}.qr-close{position:absolute;right:10px;top:8px;padding:3px 9px;background:transparent!important;box-shadow:none!important;color:#a8b5c6!important;font-size:24px}
@media(max-width:560px){.draft-presence{margin-bottom:9px}.presence-pill{font-size:11px}.history-panel{grid-template-columns:1fr}.history-panel select{width:100%}.stat-grid{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}