/* Hall of War Tournament premium Arena + Control layer · UI 2026.08.27.7 */
:root{--how-premium-hero:url('/tournament/v2/assets/how-arena-premium-1ab156e464ba.jpg')}

/* Shared usability, iconography and motion language. */
body[data-how-layout] :where(button,.btn,a.btn,input:not([type="checkbox"]):not([type="radio"]),select){min-height:44px!important}
body[data-how-layout] :where(.meta,.badge,.tag,.status,.time,.grp,.sec,.dsec,.mlabel,th){font-size:max(11px,.6875rem)!important}
body[data-how-layout] :where(.card,.panel,.ev,.stat,.box,.sheet){transition:transform .28s var(--how-ease),border-color .28s ease,background-color .28s ease,box-shadow .28s ease}
.how-icon{width:18px;height:18px;flex:0 0 18px;display:inline-block;vertical-align:-4px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
:where(button,.btn,a.btn,.tab,.subtab,.nv,.tabbar>a)[data-how-icon]{display:inline-flex!important;align-items:center;justify-content:center;gap:9px}
.rail button[data-how-icon]{justify-content:flex-start!important}
.rail button[data-how-icon]::before{display:none!important}
.how-reveal{opacity:0;transform:translateY(18px)}
.how-reveal.how-in{opacity:1;transform:none;transition:opacity .7s var(--how-ease),transform .7s var(--how-ease)}

/* Arena mode: one cinematic visual language across public, event and player entry pages. */
body[data-how-surface="public"]{--how-hero:var(--how-premium-hero)}
body[data-how-surface="public"] .top{position:sticky!important;top:0;z-index:40;background:rgba(3,5,6,.82)!important;box-shadow:0 12px 42px rgba(0,0,0,.24)!important}
body[data-how-surface="public"] .hero{
  position:relative;overflow:hidden;background:
    linear-gradient(90deg,rgba(2,4,5,.98) 0%,rgba(2,4,5,.9) 31%,rgba(2,4,5,.42) 58%,rgba(2,4,5,.08)),
    linear-gradient(180deg,rgba(2,4,5,.05) 48%,var(--how-ink) 100%),
    var(--how-premium-hero) 64% center/cover no-repeat!important
}
body[data-how-surface="public"] .hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.28;
  background:linear-gradient(rgba(103,229,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(103,229,255,.035) 1px,transparent 1px);
  background-size:100% 72px,72px 100%;mask-image:linear-gradient(90deg,#000,transparent 72%)
}
body[data-how-surface="public"] .hero>.wrap{position:relative;z-index:2}
body[data-how-layout="public-arena"] .hero{min-height:min(860px,92svh)!important}
body[data-how-layout="public-arena"] .hero h1{max-width:1050px!important;font-size:clamp(58px,7.2vw,112px)!important;line-height:.84!important}
body[data-how-layout="public-arena"] .hero .lead,body[data-how-layout="public-arena"] .hero .acts{margin-left:clamp(0px,28vw,390px)!important}
body[data-how-layout="public-arena"] main>section:not(.hero) h2{max-width:920px!important;font-size:clamp(46px,6vw,88px)!important;line-height:.87!important}
body[data-how-layout="public-arena"] .evs>.ev{min-height:360px!important}
body[data-how-layout="public-arena"] .evs>.ev:first-child{min-height:540px!important;background:
  linear-gradient(180deg,rgba(3,5,6,.08),rgba(3,5,6,.96) 82%),var(--how-premium-hero) 68% center/cover no-repeat!important}
body[data-how-layout="event-arena"] .hero{min-height:min(760px,84svh)!important}
body[data-how-layout="event-arena"] .hero h1{max-width:940px!important;font-size:clamp(52px,7.4vw,106px)!important;line-height:.85!important}
body[data-how-surface="public"] .how-context-hero,body[data-how-surface="ops"] .how-context-hero{background:
  linear-gradient(90deg,rgba(3,5,6,.98),rgba(3,5,6,.78) 50%,rgba(3,5,6,.12)),var(--how-premium-hero) 66% center/cover no-repeat!important}
body[data-how-surface="public"] :is(.ev,.panel,.card):hover{border-color:rgba(103,229,255,.34)!important;box-shadow:0 24px 70px rgba(0,0,0,.38),inset 2px 0 var(--how-cyan)!important}

body[data-how-surface="player"]:has(.wrap.hascta)::before{background:
  linear-gradient(90deg,rgba(3,5,6,.98),rgba(3,5,6,.72) 52%,rgba(3,5,6,.12)),
  linear-gradient(180deg,transparent 55%,var(--how-ink)),var(--how-premium-hero) 66% center/cover no-repeat!important}
body[data-how-layout="player-discovery"] .wrap.hascta{min-height:min(790px,88svh)!important;padding-top:clamp(100px,14vh,164px)!important}
body[data-how-layout="player-discovery"] .wrap.hascta>h1{max-width:960px!important;font-size:clamp(58px,8.2vw,118px)!important;line-height:.83!important}
body[data-how-surface="player"] article.ev::after{background:linear-gradient(180deg,rgba(3,5,6,.12),rgba(3,5,6,.97) 78%),var(--how-premium-hero) 68% center/cover no-repeat!important}
body[data-how-surface="player"] .home-next .card{background:linear-gradient(110deg,rgba(4,7,9,.97),rgba(4,7,9,.52)),var(--how-premium-hero) 70% center/cover no-repeat!important}
@media(min-width:780px){body[data-how-surface="player"] .wrap.auth>.authhead{background:linear-gradient(90deg,rgba(3,5,6,.9),rgba(3,5,6,.2)),var(--how-premium-hero) 66% center/cover no-repeat!important}}

/* Control mode: dense, calm and operational rather than oversized. */
body[data-how-surface="ops"]{background:
  radial-gradient(circle at 84% -10%,rgba(43,181,214,.12),transparent 27rem),
  linear-gradient(rgba(103,229,255,.014) 1px,transparent 1px),linear-gradient(90deg,rgba(103,229,255,.014) 1px,transparent 1px),#030506!important;background-size:auto,48px 48px,48px 48px,auto!important}
.how-ops-brand{z-index:60!important}
body[data-how-surface="ops"] .top,body[data-how-surface="ops"] header,body[data-how-surface="ops"] .tbar{backdrop-filter:blur(22px) saturate(120%)}
body[data-how-layout="control-center"]{--how-admin-rail:232px}
body[data-how-layout="control-center"] .shell>.rail{padding:18px 12px!important;background:linear-gradient(180deg,#060a0d,#030506)!important}
body[data-how-layout="control-center"] .rail .grp{margin:20px 10px 7px!important;font-size:9px!important;color:#6f7d86!important}
body[data-how-layout="control-center"] .rail button{min-height:46px!important;padding:11px 12px!important;font-size:11px!important;letter-spacing:.07em!important}
body[data-how-layout="control-center"] .main{padding:clamp(28px,3.4vw,54px)!important}
body[data-how-layout="control-center"] .pane>.title{max-width:760px!important;font-size:clamp(38px,4.4vw,66px)!important;line-height:.9!important;letter-spacing:-.03em!important}
body[data-how-layout="control-center"] .pane>.lead{margin:12px 0 34px!important;font-size:14px!important}
body[data-how-layout="control-center"] .pane>.sec{margin-top:38px!important;padding-top:13px!important}
body[data-how-layout="control-center"] .stats>.stat{min-height:116px!important;padding:18px!important}
body[data-how-layout="control-center"] .stats>.stat:first-child{grid-column:span 3}
body[data-how-layout="control-center"] .stats>.stat b{font-size:clamp(24px,2.6vw,38px)!important}
body[data-how-layout="control-center"] .top{position:sticky!important;top:0;z-index:45;min-height:64px!important}
body[data-how-layout="control-center"] .top .searchwrap{min-width:min(420px,32vw)}
body[data-how-surface="ops"] :is(.card,.panel,.box,.sheet,.evrow,.linkcard,.stat){border-color:rgba(186,226,236,.13)!important;background:linear-gradient(145deg,rgba(13,20,25,.98),rgba(5,8,10,.98))!important}
body[data-how-surface="ops"] :is(.card,.panel,.box,.sheet,.evrow,.linkcard,.stat):hover{border-color:rgba(103,229,255,.28)!important}
body[data-how-layout="event-workspace"] .pane>h2:first-child{font-size:clamp(38px,4.6vw,68px)!important;line-height:.88!important}
body[data-how-layout="event-workspace"] :is(.rstats,.stats)>*{min-height:108px!important}
body[data-how-layout="tournament-builder"] :is(.steps,.wizard,.cards)>*{min-height:180px!important}
body[data-how-layout="organizer-access"] :is(.box,.card){box-shadow:0 30px 100px rgba(0,0,0,.46)!important}

/* Mobile control menu replaces the clipped horizontal rail. */
.how-control-menu-toggle{display:none!important}
@media(max-width:760px){
  body[data-how-layout] :where(.meta,.badge,.tag,.status,.time,.grp,.sec,.dsec,.mlabel,th){font-size:11px!important}
  body[data-how-layout="public-arena"] .hero{min-height:720px!important;background-position:69% center!important}
  body[data-how-layout="public-arena"] .hero h1,body[data-how-layout="event-arena"] .hero h1{font-size:clamp(48px,13vw,72px)!important;line-height:.88!important}
  body[data-how-layout="public-arena"] .hero .lead,body[data-how-layout="public-arena"] .hero .acts{margin-left:0!important}
  body[data-how-layout="player-discovery"] .wrap.hascta>h1{font-size:clamp(48px,13vw,72px)!important;line-height:.88!important}
  .how-control-menu-toggle{display:inline-flex!important;order:-1;min-width:46px;padding-inline:12px!important}
  body[data-how-layout="control-center"] .top{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;padding:8px 10px 8px 62px!important}
  body[data-how-layout="control-center"] .top>h1{font-size:17px!important;white-space:nowrap}
  body[data-how-layout="control-center"] .top>.who{display:none!important}
  body[data-how-layout="control-center"] .top .searchwrap{grid-column:1/-1;grid-row:2;min-width:0;width:100%}
  body[data-how-layout="control-center"] .top>.btn:not(.how-control-menu-toggle),body[data-how-layout="control-center"] .top>.act:not(.how-control-menu-toggle){display:none!important}
  body[data-how-layout="control-center"] .shell>.rail{position:fixed!important;left:0!important;top:0!important;bottom:0!important;z-index:90!important;width:min(86vw,320px)!important;height:100svh!important;display:block!important;overflow-y:auto!important;padding:78px 14px 24px!important;transform:translateX(-102%);transition:transform .32s var(--how-ease)!important;box-shadow:24px 0 90px rgba(0,0,0,.6)!important}
  body[data-how-layout="control-center"].how-control-menu-open .shell>.rail{transform:none}
  body[data-how-layout="control-center"].how-control-menu-open::before{content:"";position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}
  body[data-how-layout="control-center"] .rail .grp{display:block!important}
  body[data-how-layout="control-center"] .rail button{width:100%!important;min-width:0!important}
  body[data-how-layout="control-center"] .main{padding:24px 14px!important}
  body[data-how-layout="control-center"] .pane>.title{font-size:clamp(36px,11vw,50px)!important}
  body[data-how-layout="control-center"] .stats>.stat,body[data-how-layout="control-center"] .stats>.stat:first-child{grid-column:span 12!important;min-height:96px!important}
  body[data-how-layout="public-arena"]>.ownerstrip{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px!important;padding:1px!important}
  body[data-how-layout="public-arena"]>.ownerstrip>span{min-width:0;padding:10px 8px;background:rgba(255,255,255,.94)}
  body[data-how-layout="public-arena"]>.ownerstrip>span:first-child,body[data-how-layout="public-arena"]>.ownerstrip>.sp{display:none!important}
  body[data-how-layout="public-arena"]>.ownerstrip .lab{font-size:8px!important;letter-spacing:.1em!important;line-height:1.25}
  body[data-how-layout="public-arena"]>.ownerstrip b{font-size:13px!important;overflow-wrap:anywhere}
  body[data-how-layout="public-arena"]>.ownerstrip>a{grid-column:1/-1;display:flex!important;align-items:center;justify-content:center;min-height:44px!important;margin:0!important}
  body[data-how-layout="public-arena"]>.ownerstrip+.top{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;padding:12px 14px!important}
  body[data-how-layout="public-arena"]>.ownerstrip+.top>h1{grid-column:1/-1;font-size:18px!important}
  body[data-how-layout="public-arena"]>.ownerstrip+.top>.url,body[data-how-layout="public-arena"]>.ownerstrip+.top>.sp{display:none!important}
  body[data-how-layout="public-arena"]>.ownerstrip+.top>:is(a,button){width:100%;min-width:0!important;padding-inline:8px!important;font-size:10px!important}
  body[data-how-layout="reception-desk"]>.top{display:grid!important;grid-template-columns:minmax(72px,1fr) auto!important;gap:6px!important;padding:9px 10px 9px 62px!important}
  body[data-how-layout="reception-desk"]>.top>.tag,body[data-how-layout="reception-desk"]>.top>.sp{display:none!important}
  body[data-how-layout="reception-desk"]>.top>h1{min-width:0;font-size:16px!important;overflow:hidden}
  body[data-how-layout="reception-desk"]>.top>.nav{grid-column:2;grid-row:1;width:auto!important;max-width:100%!important;min-width:0!important;margin-left:0!important;gap:4px!important;justify-self:end!important}
  body[data-how-layout="reception-desk"]>.top>.nav .how-icon{display:none!important}
  body[data-how-layout="reception-desk"]>.top>.nav button{min-width:0!important;max-width:100%!important;padding-inline:7px!important;white-space:nowrap;font-size:9px!important;letter-spacing:.08em!important}
  body[data-how-layout="control-center"] .logline{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;gap:5px 9px!important;align-items:start!important;max-width:100%;overflow:hidden}
  body[data-how-layout="control-center"] .logline .t{grid-column:1;min-width:0!important}
  body[data-how-layout="control-center"] .logline .k{grid-column:2;min-width:0!important}
  body[data-how-layout="control-center"] .logline .o{display:none!important}
  body[data-how-layout="control-center"] .logline .d{grid-column:1/-1;min-width:0!important;width:auto!important;white-space:normal!important;overflow-wrap:anywhere}
  body[data-how-layout="control-center"] .logline .n{grid-column:3}
  body[data-how-layout="event-workspace"] .tacts{width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
  body[data-how-layout="event-workspace"] .tacts>select{grid-column:1/-1;width:100%!important;min-width:0!important}
  body[data-how-layout="event-workspace"] .tacts>:not(select){width:100%!important;min-width:0!important;max-width:100%!important;padding-inline:7px!important;font-size:10px!important}
  body[data-how-layout="event-workspace"]>.top>.tabs{max-width:100%!important;overflow-x:auto!important;overscroll-behavior-inline:contain}
  body[data-how-layout="event-workspace"] #pubwrap [style*="display:flex"]{max-width:100%!important;min-width:0!important;flex-wrap:wrap!important}
  body[data-how-layout="event-workspace"] #pubwrap [style*="display:flex"]>span:last-of-type{min-width:0!important;overflow-wrap:anywhere}
  body[data-how-layout="event-workspace"] #pubwrap .sbtn{flex:1 0 calc(100% - 28px)!important;width:calc(100% - 28px)!important;max-width:calc(100% - 28px)!important;margin-left:28px!important}
}

@media(prefers-reduced-motion:reduce){.how-reveal,.how-reveal.how-in{opacity:1!important;transform:none!important;transition:none!important}.how-control-menu-toggle,.shell>.rail{transition:none!important}}