/* Champions League sweepstake organiser hub: the World Cup hub's layout in the UCL prism look. */
.screen{display:none}
.hub-wrap{max-width:720px}
label.check{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800;color:#fff;cursor:pointer;margin-top:4px}
label.check input{width:18px;height:18px;flex:none;margin:0}
select{width:100%}

.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:16px}
.feat{padding:16px;border-radius:18px;background:var(--lms-panel);border:1px solid var(--lms-line);text-align:center}
.feat span{font-size:28px;display:block;margin-bottom:6px}
.feat b{display:block;font-size:14px;margin-bottom:4px}
.feat p{margin:0;font-size:12.5px;color:var(--lms-dim);line-height:1.5}

.stats4{grid-template-columns:repeat(4,1fr)}
.hub-tabs{margin-bottom:14px}
.hub-tabs .ti{display:block;font-size:16px;margin-bottom:2px}
.tabc{display:none}

.mini{font:900 11px 'Manrope',Arial,sans-serif;padding:6px 10px;border-radius:20px;border:1px solid var(--lms-line);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;white-space:nowrap;flex:none}
.mini.paid{background:color-mix(in srgb,var(--lms-good) 22%,transparent);color:var(--lms-good);border-color:transparent}
.mini.x{color:var(--lms-hot);padding:6px 9px}

.live-box{padding:12px;border-radius:14px;background:color-mix(in srgb,var(--lms-good) 8%,transparent);border:1px solid color-mix(in srgb,var(--lms-good) 30%,transparent);margin-bottom:12px}
.live-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;font-weight:900;letter-spacing:.06em;color:var(--lms-good);margin-bottom:6px}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lms-good);margin-right:7px;animation:uclPulse 1.6s ease-in-out infinite}

.entry{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.22);border:1px solid var(--lms-line);margin-bottom:6px}
.entry.out{opacity:.55}
.e-main{flex:1;min-width:0}
.e-main b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.e-main span{display:block;font-size:11px;color:var(--lms-dim);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.e-club{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--lms-soft);max-width:40%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.e-club img{width:20px;height:20px;object-fit:contain}
.add-row{display:flex;gap:8px;flex-wrap:wrap}
.add-row input{flex:1 1 140px;margin:0}
.add-row .btn{flex:0 0 90px;margin:0;padding:12px}

.countdown{text-align:center;padding:14px;border-radius:16px;background:rgba(0,0,0,.28);border:1px solid var(--lms-line);margin-bottom:12px}
.countdown b{display:block;font-family:'Bebas Neue','Manrope',sans-serif;font-weight:400;font-size:40px;line-height:1;color:var(--lms-accent)}
.countdown span{font-size:11px;font-weight:800;color:var(--lms-dim);letter-spacing:.08em;text-transform:uppercase}

.done-banner{text-align:center;padding:12px;border-radius:14px;background:color-mix(in srgb,var(--lms-good) 12%,transparent);border:1px solid color-mix(in srgb,var(--lms-good) 35%,transparent);margin-bottom:12px;font-size:20px}
.done-banner b{display:block;font-size:15px;color:var(--lms-good)}
.done-banner span{display:block;font-size:12px;color:var(--lms-soft)}
.draw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.dcard{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--lms-line)}
.dcard img,.dcard i{width:30px;height:30px;object-fit:contain;flex:none;font-style:normal;font-size:22px;text-align:center}
.dcard b{display:block;font-size:13.5px}
.dcard span{display:block;font-size:11.5px;color:var(--lms-dim);font-weight:700}
.dcard.out{opacity:.5}
.plink{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;background:rgba(0,0,0,.22);border:1px solid var(--lms-line);margin-bottom:6px}
.plink div{flex:1;min-width:0}
.plink b{display:block;font-size:13px}
.plink span{display:block;font-size:11px;color:var(--lms-dim);font-weight:700}
.btn.danger{color:var(--lms-hot)}

.club-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.ctile{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--lms-line)}
.ctile img{width:26px;height:26px;object-fit:contain;flex:none}
.ctile div{flex:1;min-width:0}
.ctile b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctile span{display:block;font-size:10.5px;color:var(--lms-dim);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctile em{font-style:normal;font-size:10px;font-weight:900;color:var(--lms-hot)}
.ctile.out{opacity:.55;border-color:color-mix(in srgb,var(--lms-hot) 40%,transparent)}
.ctile.out b{text-decoration:line-through}

.pot{text-align:center;padding:20px 16px;border-radius:22px;margin-bottom:16px}
.pot span{font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--lms-soft)}
.pot b{display:block;font-family:'Bebas Neue','Manrope',sans-serif;font-weight:400;font-size:56px;line-height:1.05;color:var(--lms-accent)}
.pot small{font-size:12px;color:var(--lms-soft);font-weight:700}

#draw-modal{position:fixed;inset:0;z-index:60;display:none;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:#03061c}
.dm-title{font-family:'Bebas Neue','Manrope',sans-serif;font-size:34px;letter-spacing:.06em;background:var(--ucl-prism);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px}
#dm-card{min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:12px;text-align:center}
#dm-name{font-size:14px;color:var(--lms-dim);font-weight:800}
#dm-name.big{font-size:24px;color:#fff;font-weight:900}
#dm-club{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:19px;font-weight:900;color:var(--lms-accent)}
#dm-club img{width:38px;height:38px;object-fit:contain}
/* Fully articulated character footage; club/player labels remain real DOM text. */
#dm-stage{position:relative;width:760px;max-width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  border:1px solid rgba(245,197,66,.3);background:#03061c;box-shadow:0 24px 75px rgba(0,0,0,.5)}
#dm-video{display:block;width:100%;height:100%;object-fit:contain;background:#03061c}
#dm-stage.revealed{border-color:#f5c542;box-shadow:0 0 38px rgba(245,197,66,.17)}
#draw-modal{overflow-y:auto}
#dm-card{position:absolute;inset:0 3% 0 auto;width:44%;min-height:0;margin:0;padding:12px;overflow-wrap:anywhere}
#dm-name.big{font-size:clamp(17px,3vw,30px)}
#dm-club{justify-content:center;font-size:clamp(13px,2.5vw,23px);flex-wrap:wrap;line-height:1.3}
#dm-club img{width:clamp(24px,5vw,44px);height:clamp(24px,5vw,44px)}
#dm-stage.revealed #dm-card{animation:dmPop .4s ease}
#dm-stage{flex-shrink:0}
@media(max-height:650px){#dm-stage{width:min(600px,65vh)}.dm-title{font-size:26px}#dm-card{min-height:0}}
@media(prefers-reduced-motion:reduce){#dm-stage{transition:none}}
.dm-left-label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--lms-dim);margin-top:12px}
#dm-left{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;max-width:520px;margin-top:6px}
.dm-mini{width:22px;height:22px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;font:900 7px Manrope,Arial,sans-serif;color:#0b1533;transition:opacity .4s,transform .4s}
.dm-mini img{width:74%;height:74%;object-fit:contain}
.dm-mini.gone{opacity:.12;transform:scale(.7)}
#dm-progress{font-size:12px;font-weight:800;color:var(--lms-dim);margin-top:10px;letter-spacing:.08em}
.dm-controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%;max-width:520px}
.dm-controls .btn{flex:1 1 200px}
@keyframes dmPop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}

@media(max-width:600px){
  .stats4{grid-template-columns:repeat(2,1fr)}
  .e-club{display:none}
  .dm-ball{width:52px;height:52px;margin-left:-26px}
}


/* The actual saved club emerges from the hat; names/crests are never generated. */
.dm-team-ticket{position:absolute;z-index:4;left:74%;top:20%;width:18%;aspect-ratio:1.25;background:linear-gradient(135deg,#fff1b2,#eebd43 65%,#c68c22);border:2px solid #ffdf81;border-radius:9px;box-shadow:0 4px 22px #eabb4055;color:#13203c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px;transform:translate(-50%,-50%);animation:dmTeamFromHat .85s cubic-bezier(.2,.85,.25,1) both;pointer-events:none}
.dm-team-ticket img{width:46%;height:55%;object-fit:contain;filter:drop-shadow(0 1px 2px #0003)}
.dm-team-ticket b{font-size:clamp(15px,3vw,28px)}
.dm-team-ticket span{font-size:clamp(8px,1.6vw,13px);font-weight:900;text-align:center;line-height:1.05;max-width:100%;overflow-wrap:anywhere}
@keyframes dmTeamFromHat{0%{left:var(--hat-x);top:var(--hat-y);opacity:0;transform:translate(-50%,0) scale(.12) rotate(-16deg)}18%{opacity:1}55%{left:var(--hat-x);top:22%;transform:translate(-50%,-50%) scale(.75) rotate(6deg)}100%{left:74%;top:20%;opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}}
@media(prefers-reduced-motion:reduce){.dm-team-ticket{animation:none}}

/* Star burst for the classic move (the flourish clip has its own stars). */
.dm-team-stars{position:absolute;z-index:3;left:var(--hat-x);top:var(--hat-y);width:15%;transform:translate(-50%,-105%) scale(.2);opacity:0;pointer-events:none;animation:dmStarsHat 1.5s ease-out both}
.dm-team-stars-ticket{left:74%;top:20%;width:24%;transform:translate(-50%,-50%) scale(.2);animation:dmStarsTicket 1.6s .55s ease-out both}
@keyframes dmStarsHat{0%{opacity:0;transform:translate(-50%,-105%) scale(.2) rotate(-30deg)}20%{opacity:1;transform:translate(-50%,-105%) scale(1.1) rotate(6deg)}60%{opacity:1;transform:translate(-50%,-105%) scale(1) rotate(0)}100%{opacity:0;transform:translate(-50%,-115%) scale(1.15)}}
@keyframes dmStarsTicket{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-30deg)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.05) rotate(6deg)}60%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}
@media(prefers-reduced-motion:reduce){.dm-team-stars{animation:none;opacity:0}}