/* These decorations only occupy the spare space in a wide page heading.
   Card faces and backs keep the same cosmetics and layout as the games. */
.header-art{display:none}

@media(min-width:1100px){
 .page-heading:has(>.header-art)>div:first-child{min-width:0;flex:1 1 auto}
 .header-art{
  display:block;
  position:relative;
  flex:0 0 260px;
  width:260px;
  height:148px;
  pointer-events:none;
  user-select:none;
 }
 .header-art-scene{
  position:absolute;
  top:50%;
  left:0;
  width:260px;
  height:176px;
  transform:translateY(-50%);
  isolation:isolate;
 }
 .header-art-scene::before{
  content:"";
  position:absolute;
  left:42px;
  top:149px;
  width:176px;
  height:15px;
  border-radius:50%;
  background:radial-gradient(ellipse,#17392a1f,transparent 70%);
  z-index:0;
 }
 .header-art-card{
  position:absolute;
  width:78px;
  min-width:78px;
  height:114px;
  flex-basis:78px;
  transform-origin:50% 80%;
  box-shadow:0 8px 13px #15302425,0 2px 3px #15302415;
 }
 .header-art[data-header-art="games"] .header-art-card--back{
  left:95px;
  top:13px;
  transform:none;
  z-index:1;
 }
 .header-art[data-header-art="games"] .header-art-card--left{
  left:35px;
  top:27px;
  transform:rotate(-15deg);
  z-index:2;
 }
 .header-art[data-header-art="games"] .header-art-card--right{
  left:154px;
  top:27px;
  transform:rotate(15deg);
  z-index:3;
 }
 .header-art[data-header-art="results"] .header-art-card--left{
  left:34px;
  top:22px;
  transform:rotate(-15deg);
  z-index:1;
 }
 .header-art[data-header-art="results"] .header-art-card--right{
  left:148px;
  top:22px;
  transform:rotate(14deg);
  z-index:1;
 }
 .header-art-trophy{
  position:absolute;
  left:45px;
  top:-7px;
  width:170px;
  height:187px;
  z-index:2;
  filter:drop-shadow(0 6px 5px #17392a20);
 }
 .header-art[data-header-art="profile"] .header-art-scene::before{display:none}
 .header-art-table{
  position:absolute;
  left:0;
  top:39px;
  width:260px;
  height:146px;
  z-index:1;
 }
 .header-art[data-header-art="profile"] .header-art-card{
  width:70px;
  min-width:70px;
  height:102px;
  flex-basis:70px;
  transform-origin:center;
  box-shadow:0 3px 3px #061d1a38;
  z-index:2;
 }
 .header-art-profile-hand{
  position:absolute;
  left:53px;
  top:55px;
  width:154px;
  height:105px;
  transform:perspective(550px) rotateX(44deg);
  transform-origin:50% 100%;
  z-index:2;
 }
 .header-art[data-header-art="profile"] .header-art-card--left{
  left:0;
  top:3px;
  transform:rotate(-13deg);
 }
 .header-art[data-header-art="profile"] .header-art-card--right{
  left:81px;
  top:5px;
  transform:rotate(12deg);
  z-index:3;
 }
 .header-art-avatar{
  position:absolute;
  left:98px;
  top:27px;
  width:64px;
  height:75px;
  z-index:4;
  filter:drop-shadow(0 3px 2px #17392a1f);
 }
 .header-art[data-header-art="shop"] .header-art-card--left{
  left:42px;
  top:33px;
  transform:rotate(-15deg);
  z-index:1;
 }
 .header-art[data-header-art="shop"] .header-art-card--middle{
  left:92px;
  top:17px;
  z-index:3;
 }
 .header-art[data-header-art="shop"] .header-art-card--right{
  left:146px;
  top:33px;
  transform:rotate(15deg);
  z-index:2;
 }
}