/* Independent end caps, centre ornament and extensible body.
   End caps and crest scale only with the skin height, never with button width. */
:is(.btn:not(.quiet),.approved-home .art-button,.ui-match .ui-player time){
 --button-h:48px;
 --button-left:url('assets/v7/buttons/secondary-left.webp');
 --button-right:url('assets/v7/buttons/secondary-right.webp');
 --button-body:url('assets/v7/buttons/secondary-body.webp');
 --button-crest:url('assets/v7/buttons/secondary-crest.webp');
 --button-cap:calc(var(--button-h)*.74627);
 --button-jewel:calc(var(--button-h)*.82090);
 box-sizing:border-box;
 height:var(--button-h)!important;
 min-height:var(--button-h)!important;
 background-color:transparent;
 background-image:var(--button-crest),var(--button-left),var(--button-right),var(--button-body);
 background-position:center,left center,right center,center;
 background-size:var(--button-jewel) 100%,var(--button-cap) 100%,var(--button-cap) 100%,calc(100% - var(--button-cap)*2 + 2px) 100%;
 background-repeat:no-repeat;
 padding-block:8px!important;
 padding-inline:calc(var(--button-cap) - 7px)!important;
 border:0;
 border-radius:0;
 line-height:1.2;
 white-space:normal;
 text-align:center;
 flex-shrink:0;
}
:is(.btn.primary,.approved-home .art-button.gold){
 --button-left:url('assets/v7/buttons/normal-left.webp');
 --button-right:url('assets/v7/buttons/normal-right.webp');
 --button-body:url('assets/v7/buttons/normal-body.webp');
 --button-crest:url('assets/v7/buttons/normal-crest.webp');
}
:is(.btn.primary:hover,.btn.primary:focus-visible,.approved-home .art-button.gold:hover,.approved-home .art-button.gold:focus-visible){
 --button-left:url('assets/v7/buttons/hover-left.webp');
 --button-right:url('assets/v7/buttons/hover-right.webp');
 --button-body:url('assets/v7/buttons/hover-body.webp');
 --button-crest:url('assets/v7/buttons/hover-crest.webp');
}
.btn.small:not(.quiet){--button-h:42px;font-size:14px}
.btn.large:not(.quiet){--button-h:58px}
.approved-home .art-button.small{--button-h:44px}
.approved-home .art-button.enter{--button-h:60px}
.approved-home .art-button.trial{--button-h:50px}
.ui-match .ui-player time{--button-h:54px;display:flex;align-items:center;justify-content:center}
.ui-match :is(.ui-match-summary,.ui-match-controls)>.btn:not(.quiet){--button-h:42px;font-size:14px}
.ui-match-controls>.btn:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:max-content;max-width:100%;min-width:140px}
.ui-center .button-row>.btn:not(.quiet){--button-h:48px}
.ui-product .btn:not(.quiet){--button-h:44px;font-size:14px;min-width:128px}
.ui-back-nav .ui-back{--button-h:42px}
@media(max-width:700px){
 :is(.btn:not(.quiet),.approved-home .art-button){--button-h:48px}
 .btn.small:not(.quiet){--button-h:44px}
 .approved-home .art-button.enter{--button-h:58px}
 .approved-home .art-button.trial{--button-h:48px}
 .ui-match :is(.ui-match-summary,.ui-match-controls)>.btn:not(.quiet){--button-h:46px;font-size:14px}
 .ui-match .ui-player time{--button-h:46px}
 .ui-lobby-config>.button-row>.btn.primary{--button-h:52px}
}
/* Blend joins on separate CSS layers; preserve the centre gems without
   stretching or exposing the rectangular centre patch over the gold fill. */
:is(.btn:not(.quiet),.approved-home .art-button,.ui-match .ui-player time){
 position:relative;isolation:isolate;
 background-image:var(--button-body);
 background-size:calc(100% - var(--button-cap)*2 + 20px) 100%;
 background-position:center;
}
:is(.btn:not(.quiet),.approved-home .art-button,.ui-match .ui-player time)::before,
:is(.btn:not(.quiet),.approved-home .art-button,.ui-match .ui-player time)::after{
 content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background-repeat:no-repeat;
}
:is(.btn:not(.quiet),.approved-home .art-button,.ui-match .ui-player time)::before{
 background-image:var(--button-left),var(--button-right);
 background-position:left center,right center;
 background-size:var(--button-cap) 100%,var(--button-cap) 100%;
 -webkit-mask-image:linear-gradient(to right,#000 calc(var(--button-cap) - 10px),transparent var(--button-cap),transparent calc(100% - var(--button-cap)),#000 calc(100% - var(--button-cap) + 10px));
 mask-image:linear-gradient(to right,#000 calc(var(--button-cap) - 10px),transparent var(--button-cap),transparent calc(100% - var(--button-cap)),#000 calc(100% - var(--button-cap) + 10px));
}
:is(.btn:not(.quiet),.approved-home .art-button,.ui-match .ui-player time)::after{
 background-image:var(--button-crest);background-position:center;background-size:var(--button-jewel) 100%;
 -webkit-mask-image:linear-gradient(#000 20%,transparent 34%,transparent 66%,#000 80%);
 mask-image:linear-gradient(#000 20%,transparent 34%,transparent 66%,#000 80%);
}

/* Complete end ornaments: never split through their middle. */
:is(.ui-footer,.approved-home .footer){
 --rail-h:58px;--rail-cap:calc(var(--rail-h)*2.02703);
 position:relative;isolation:isolate;height:var(--rail-h);min-height:var(--rail-h);
 background:#041e27!important;border:0!important;
}
.approved-home .footer{--rail-h:104px}
:is(.ui-footer,.approved-home .footer)::before,
:is(.ui-footer,.approved-home .footer)::after{
 content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-repeat:no-repeat;border:0;
}
:is(.ui-footer,.approved-home .footer)::before{
 background-image:url('assets/v7/footer/left-whole.webp'),url('assets/v7/footer/right-whole.webp');
 background-position:left center,right center;background-size:auto 100%;
}
:is(.ui-footer,.approved-home .footer)::after{
 background-image:url('assets/v7/footer/crest-whole.webp'),url('assets/v7/footer/body-whole.webp');
 background-position:center;background-size:auto 100%,calc(100% - var(--rail-cap)*2 + 2px) 100%;
}
.ui-footer nav{width:min(1200px,calc(100% - 80px));position:relative;z-index:1}
@media(max-width:700px){
 .ui-footer{--rail-h:80px;padding:15px 28px}
 .approved-home .footer{--rail-h:84px}
 .ui-footer nav{width:100%;gap:8px 12px}
}

@media(min-width:701px) and (max-width:1000px){.ui-footer{--rail-h:52px}}
/* Keep the footer row and its skin in the same bounds at each breakpoint. */
.approved-home{grid-template-rows:80px minmax(0,1fr) 104px}
@media(max-width:1000px){
 .approved-home{grid-template-rows:66px minmax(0,1fr) 86px}
 .approved-home .footer{--rail-h:86px}
}
@media(max-width:700px){
 .approved-home{grid-template-rows:60px minmax(0,1fr) 84px}
 .approved-home .footer{--rail-h:84px}
 :is(.ui-footer,.approved-home .footer)::after{background-image:url('assets/v7/footer/body-whole.webp');background-size:calc(100% - var(--rail-cap)*2 + 2px) 100%}
}
/* Mobile has its own shallow frame: desktop end ornaments never cover labels. */
@media(max-width:700px){
 :is(.ui-footer,.approved-home .footer){
  box-sizing:border-box;width:100%;max-width:100%;margin:0;
  border:8px solid transparent!important;
  border-image:url('assets/v7/panel-border-mobile.webp') 50 / 8px / 0 stretch!important;
  background:#041e27!important;background-clip:padding-box!important;
  padding:8px 4px;overflow:hidden;
 }
 :is(.ui-footer,.approved-home .footer)::before,
 :is(.ui-footer,.approved-home .footer)::after{content:none;display:none}
 .approved-home .footer .games{width:100%;max-width:none;margin:0;height:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;align-items:center}
 .approved-home .footer .game{position:relative;min-width:0;width:100%;height:50px;display:grid;grid-template-rows:28px 18px;gap:4px;align-content:center;justify-items:center;padding:0 2px}
 .approved-home .footer .game img{width:auto;height:28px;max-width:38px;max-height:28px;object-fit:contain;margin:0}
 .approved-home .footer .game span{display:block;max-width:100%;font-size:clamp(11px,3.15vw,14px);line-height:18px;white-space:nowrap;letter-spacing:0;text-shadow:0 1px 3px #000}
 .approved-home .footer .game~.game:before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:1px;background:linear-gradient(transparent,#c5a76899,transparent);pointer-events:none}
 .ui-footer nav{width:100%;margin:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 4px;align-items:center}
 .ui-footer a{min-width:0;white-space:nowrap;font-size:12px;line-height:18px;text-align:center}
}