:root{
  --bg0:#0a0f18;
  --bg1:#111b2b;
  --panel:#16243a;
  --panel-edge:#2a466e;
  --line:#33507a;
  --ow-orange:#f99e1a;
  --ow-orange-dim:#c77c12;
  --ow-blue:#48b0f7;
  --ink:#eaf2ff;
  --ink-dim:#8fa6c4;
  --tank:#e5473d;
  --dps:#f2c94c;
  --support:#4fbf7a;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(1200px 700px at 50% -8%, #1b2c46 0%, transparent 60%),
    radial-gradient(900px 600px at 50% 120%, #16243a 0%, transparent 55%),
    linear-gradient(180deg,var(--bg1),var(--bg0));
  color:var(--ink);
  font-family:"Oswald",system-ui,sans-serif;
  min-height:100%;
  display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
body::before{
  /* faint tech-grid texture */
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.06;
  background-image:linear-gradient(#7fb2ff 1px,transparent 1px),linear-gradient(90deg,#7fb2ff 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 50% 40%,#000,transparent 80%);
}

.topbar{text-align:center;padding:34px 16px 8px}
.topbar-line{width:min(760px,86%);height:2px;margin:0 auto 16px;
  background:linear-gradient(90deg,transparent,var(--ow-orange),transparent);opacity:.8}
.topbar h1{
  font-family:"Bebas Neue","Oswald",sans-serif;font-style:italic;
  font-size:clamp(30px,5vw,58px);letter-spacing:6px;margin:0;
  color:var(--ink);text-transform:uppercase;
  text-shadow:0 0 24px rgba(72,176,247,.35);
}
.topbar .sub{margin:6px 0 0;color:var(--ink-dim);letter-spacing:3px;
  text-transform:uppercase;font-size:13px;font-weight:300}

main{flex:1;display:flex;flex-direction:column;align-items:center;
  padding:20px 16px 60px;width:100%}

.roster{
  display:flex;gap:clamp(10px,1.4vw,20px);justify-content:center;
  flex-wrap:wrap;max-width:1500px;width:100%;
}

.player{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  width:clamp(150px,15vw,196px);
}
.player-top{display:flex;gap:9px;align-items:stretch;width:100%}

/* role buttons */
.roles{display:flex;flex-direction:column;gap:7px;justify-content:center}
.role-btn{
  width:38px;height:38px;border-radius:8px;padding:7px;cursor:pointer;
  background:linear-gradient(180deg,#1a2b44,#111c2e);
  border:1px solid #2c466e;
  color:var(--ink-dim);display:grid;place-items:center;
  transition:transform .12s,box-shadow .18s,color .18s,border-color .18s,background .18s;
}
.role-btn svg{width:100%;height:100%;display:block}
.role-btn:hover{transform:translateY(-1px);border-color:#3f6aa0;color:var(--ink)}
.role-btn.on[data-role="tank"]{color:var(--tank);border-color:var(--tank);box-shadow:0 0 12px -2px var(--tank),inset 0 0 14px -8px var(--tank)}
.role-btn.on[data-role="dps"]{color:var(--dps);border-color:var(--dps);box-shadow:0 0 12px -2px var(--dps),inset 0 0 14px -8px var(--dps)}
.role-btn.on[data-role="support"]{color:var(--support);border-color:var(--support);box-shadow:0 0 12px -2px var(--support),inset 0 0 14px -8px var(--support)}
.role-btn.on{background:linear-gradient(180deg,#21344f,#16233a)}

/* portrait frame */
.frame{
  position:relative;flex:1;aspect-ratio:1/1;overflow:hidden;cursor:pointer;
  background:linear-gradient(180deg,#182740,#0e1524);
  border:2px solid var(--line);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
  box-shadow:inset 0 0 30px -12px #000,0 6px 18px -10px #000;
  transition:border-color .2s,box-shadow .2s;
}
.frame::after{ /* corner accent */
  content:"";position:absolute;left:0;top:0;width:26px;height:3px;background:var(--ow-orange);opacity:.85}
.frame .placeholder{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:"Bebas Neue",sans-serif;font-size:54px;color:#33507a;
  letter-spacing:2px;user-select:none;
}
.frame .reel{position:absolute;left:0;top:0;width:100%;will-change:transform}
.frame .reel .tile{width:100%;aspect-ratio:1/1}
.frame .reel .tile img{width:100%;height:100%;object-fit:cover;display:block}
.frame .reel.spinning{filter:blur(2px) saturate(1.1)}
.frame.landed{border-color:var(--ow-orange);box-shadow:0 0 26px -6px var(--ow-orange),inset 0 0 30px -14px #000}
.frame .hero-name{
  position:absolute;left:0;right:0;bottom:0;padding:5px 8px;
  background:linear-gradient(0deg,rgba(6,10,18,.92),transparent);
  font-size:13px;letter-spacing:1px;text-transform:uppercase;text-align:center;
  color:var(--ink);opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;
  font-weight:600;pointer-events:none;
}
.frame.landed .hero-name{opacity:1;transform:none}
@keyframes flash{0%{opacity:.9}100%{opacity:0}}
.frame .flash{position:absolute;inset:0;background:var(--ow-orange);opacity:0;pointer-events:none;mix-blend-mode:screen}
.frame.pop .flash{animation:flash .5s ease-out}

/* nickname */
.nick{
  width:100%;text-align:center;background:#0e1726;border:1px solid #26405f;
  color:var(--ink);font-family:"Bebas Neue","Oswald",sans-serif;
  font-style:italic;font-size:24px;letter-spacing:2px;padding:6px 8px;border-radius:6px;
  text-transform:uppercase;
}
.nick:focus{outline:none;border-color:var(--ow-orange);box-shadow:0 0 0 2px rgba(249,158,26,.2)}

/* GO */
.go-wrap{margin:44px 0 6px;display:flex;justify-content:center}
.go-btn{
  position:relative;cursor:pointer;border:none;background:none;
  width:clamp(150px,18vw,220px);height:70px;
}
.go-label{
  position:relative;z-index:2;display:grid;place-items:center;height:100%;
  font-family:"Bebas Neue","Oswald",sans-serif;font-style:italic;
  font-size:clamp(34px,4.4vw,50px);letter-spacing:6px;color:#10161f;
  background:linear-gradient(180deg,#ffc65a,var(--ow-orange) 55%,var(--ow-orange-dim));
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  box-shadow:0 8px 26px -8px rgba(249,158,26,.7);
  transition:transform .1s,filter .15s;
}
.go-btn:hover .go-label{filter:brightness(1.08)}
.go-btn:active .go-label{transform:translateY(2px)}
.go-btn:disabled{cursor:wait;filter:grayscale(.4) brightness(.8)}
.go-glow{position:absolute;inset:-8px;z-index:1;filter:blur(18px);opacity:.55;
  background:var(--ow-orange);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.go-btn:disabled .go-glow{opacity:.15}

/* mode toggle (5v5 / 6v6) */
.mode{
  display:flex;justify-content:center;margin:20px auto 0;width:max-content;
  border:1px solid #2c466e;border-radius:10px;overflow:hidden;
  background:#0e1726;box-shadow:0 4px 14px -8px #000;
}
.mode-opt{
  cursor:pointer;border:none;background:transparent;color:var(--ink-dim);
  font-family:"Bebas Neue","Oswald",sans-serif;font-size:26px;letter-spacing:3px;
  padding:9px 28px;line-height:1;transition:background .18s,color .18s;
}
.mode-opt span{opacity:.45;font-size:.7em;padding:0 2px}
.mode-opt:hover{color:var(--ink)}
.mode-opt+.mode-opt{border-left:1px solid #2c466e}
.mode-opt.on{background:linear-gradient(180deg,#ffc65a,var(--ow-orange));color:#10161f}
.mode-opt.on span{opacity:.85}

.tip{color:var(--ink-dim);font-size:12px;letter-spacing:1px;margin-top:16px;opacity:.7}

/* hero pool / exclusion grid */
.pool-wrap{width:100%;max-width:1600px;margin:46px auto 0}
.pool-title{display:flex;align-items:baseline;gap:12px;justify-content:center;
  margin-bottom:18px}
.pool-title span{font-family:"Bebas Neue","Oswald",sans-serif;font-style:italic;
  font-size:26px;letter-spacing:5px;text-transform:uppercase;color:var(--ink)}
.pool-title small{color:var(--ink-dim);font-size:12px;letter-spacing:2px;
  text-transform:uppercase}
.pool-title::before,.pool-title::after{content:"";height:1px;flex:1;max-width:180px;
  background:linear-gradient(90deg,transparent,#33507a,transparent)}
.pool{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:flex-start}
.pool-group{flex:1 1 300px;min-width:280px;background:rgba(11,18,30,.55);
  border:1px solid #24406a;border-radius:12px;padding:12px}
.pool-head{display:flex;align-items:center;gap:9px;margin:2px 4px 12px;
  font-family:"Bebas Neue","Oswald",sans-serif;font-size:24px;letter-spacing:3px;
  text-transform:uppercase;color:var(--ink)}
.pool-ic{width:22px;height:22px;color:var(--ink)}
.pool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:6px}
.hx{position:relative;padding:0;aspect-ratio:1/1;cursor:pointer;overflow:hidden;
  border:1px solid #2a466e;border-radius:8px;background:#0e1726;
  transition:transform .1s,border-color .15s,box-shadow .15s}
.hx img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .15s}
.hx:hover{transform:translateY(-2px);border-color:var(--ow-orange);
  box-shadow:0 4px 12px -6px var(--ow-orange)}
.hx.excluded{border-color:#5a2b2b}
.hx.excluded img{filter:grayscale(1) brightness(.42)}
.hx .x{display:none;position:absolute;inset:0;pointer-events:none}
.hx.excluded .x{display:block}
.hx .x::before,.hx .x::after{content:"";position:absolute;top:50%;left:8%;right:8%;
  height:13%;background:#e5473d;border-radius:3px;
  box-shadow:0 0 6px rgba(0,0,0,.7)}
.hx .x::before{transform:translateY(-50%) rotate(45deg)}
.hx .x::after{transform:translateY(-50%) rotate(-45deg)}

@media (max-width:560px){
  .roster{gap:14px}
  .player{width:44%}
}