/* Word Dome gameplay: approved independent logo and clean hall artwork.
   No gameplay board, rack, scorecard or control dimensions are modified. */
body:not(.wd-gate):has(#game:not([hidden])){
 background-color:#071c46!important;
 background-image:linear-gradient(180deg,rgba(2,12,38,.08),rgba(2,12,38,.22) 60%,rgba(2,12,38,.42)),url('/word-dome-clean-hall.png')!important;
 background-size:100% 100%,cover!important;
 background-position:center top,center top!important;
 background-repeat:no-repeat!important;
 background-attachment:scroll!important;
}
body:not(.wd-gate):has(#game:not([hidden])) .brand-art{
 display:block!important;
 box-sizing:border-box!important;
 width:min(700px,94vw)!important;
 height:clamp(145px,20vw,220px)!important;
 margin:0 auto 12px!important;
 padding:0!important;
 border:0!important;
 box-shadow:none!important;
 overflow:visible!important;
 background:transparent!important;
 position:relative!important;
 -webkit-mask-image:none!important;
 mask-image:none!important;
 pointer-events:none;
}
/* Offset only the transparent artwork, not the header or gameplay controls. */
body:not(.wd-gate):has(#game:not([hidden])) .brand-art::after{
 content:'';position:absolute;inset:0;top:12px;transform:translateY(16px);
 background:url('/Word_Dome_Official_Transparent_Corrected.png') center center/contain no-repeat;
 pointer-events:none;
}
body:not(.wd-gate):has(#game:not([hidden])) .brand-art img{display:none!important}
body:not(.wd-gate):has(#game:not([hidden])) #gameTopInfo{position:relative!important;z-index:1}
/* Maintain readability of all existing functional panels against the ornate backdrop. */
body:not(.wd-gate):has(#game:not([hidden])) .game-grid{position:relative;isolation:isolate}
body:not(.wd-gate):has(#game:not([hidden])) .game-grid::before{
 content:'';position:absolute;inset:-10px;z-index:-1;pointer-events:none;
 background:linear-gradient(90deg,rgba(0,18,54,.22),rgba(0,19,61,.35),rgba(0,18,54,.22));
 border-radius:18px;
}
@media(max-width:600px){
 body:not(.wd-gate):has(#game:not([hidden])) .brand-art{
   width:94vw!important;
   height:clamp(105px,27vw,155px)!important;
 }
 body:not(.wd-gate):has(#game:not([hidden])) .brand-art::after{top:7px;transform:translateY(8px)}
 body:not(.wd-gate):has(#game:not([hidden])){
   background-size:100% 100%,auto 100%!important;
 }
}

/* Account controls live below the player's existing action controls, not above the board. */
body:not(.wd-gate):has(#game:not([hidden])) #accountBar{
 width:100%!important;box-sizing:border-box!important;margin:10px 0 0!important;
 padding:9px 6px!important;font-size:12px!important;
}
body:not(.wd-gate):has(#game:not([hidden])) #accountBar #accountStatus{font-size:12px!important}
body:not(.wd-gate):has(#game:not([hidden])) #accountBar #accountActions{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;align-items:center}
body:not(.wd-gate):has(#game:not([hidden])) #accountBar #lifetimeStatsLink{margin:3px!important}

/* Avatar-selection lobby: fill the browser with the same dome hall as the start page. */
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]){
 background-color:#071d51!important;
 background-image:url('/Word_Dome_Exact_Hall.png')!important;
 background-position:center center!important;
 background-size:cover!important;
 background-repeat:no-repeat!important;
 background-attachment:scroll!important;
 min-height:100dvh;
}
/* Keep the avatar page and its dome scenery in one viewport. If controls
   exceed the available height, scroll only the controls, never the scenery. */
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]){
 height:100dvh!important;overflow:hidden!important;
 background-size:cover!important;
}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) main{
 height:100dvh;overflow:hidden!important;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 padding:4px 12px!important;
}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) .brand-art{
 flex:0 0 auto;height:clamp(90px,17dvh,145px)!important;
 width:min(620px,90vw);margin:0 auto 2px!important;
}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby{
 flex:0 0 auto;margin:4px auto!important;padding:12px 20px!important;
}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby .mode-title{margin-top:7px}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby button,
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby input,
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby select{
 padding-top:7px;padding-bottom:7px;margin-top:3px;margin-bottom:3px;
}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #accountBar{
 flex:0 0 auto;margin:3px auto!important;padding:6px 12px!important;
}
@media(max-height:850px){
 body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) main{
  zoom:.82;height:121.951dvh;
 }
}
@media(max-height:700px){
 body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) main{
  zoom:.68;height:147.059dvh;
 }
}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) .brand-art img{
 max-width:100%;max-height:100%;object-fit:contain;
}

/* Avatar selection only: remove legacy Word Duel trademark/footer and
   lower the avatar and account panels without moving the trophy logo. */
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) .mini-brand-footer{
 display:none!important;
}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby{
 transform:translateY(22px) scale(.9);
 transform-origin:center center;
}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #accountBar{
 transform:translateY(22px);
}

/* Mirror the sign-in page's copyright exactly on avatar selection. */
.wd-avatar-copyright{display:none}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) .wd-avatar-copyright{
 display:block;position:fixed;bottom:2%;left:2%;width:auto;max-width:96%;
 text-align:left;color:#ffe29a;font-weight:800;
 font-size:clamp(6.75px,.9375vw,12.75px);
 text-shadow:0 2px 4px #00122b;
 z-index:5;pointer-events:none;
}

/* Gameplay: remove the obsolete Word Duel footer and reuse the identical
   lower-left Word Dome copyright treatment from avatar selection. */
body:not(.wd-gate):has(#game:not([hidden])) .mini-brand-footer{
 display:none!important;
}
body:not(.wd-gate):has(#game:not([hidden])) .wd-avatar-copyright{
 display:block!important;
 position:fixed!important;
 bottom:2%!important;
 left:2%!important;
 width:auto!important;
 max-width:96%!important;
 text-align:left!important;
 color:#ffe29a!important;
 font-weight:800!important;
 font-size:clamp(6.75px,.9375vw,12.75px)!important;
 text-shadow:0 2px 4px #00122b!important;
 z-index:5!important;
 pointer-events:none!important;
}

/* Gameplay footer correction: preserve the old footer's layout height below
   the tile rack, while keeping its obsolete Word Duel text invisible. */
body:not(.wd-gate):has(#game:not([hidden])) #game > .game-brand-footer{
 display:flex!important;
 visibility:hidden!important;
 pointer-events:none!important;
}
/* Anchor copyright to the game page/background, not the scrolling viewport. */
body:not(.wd-gate):has(#game:not([hidden])) main{
 position:relative!important;
}
body:not(.wd-gate):has(#game:not([hidden])) .wd-avatar-copyright{
 position:absolute!important;
 top:auto!important;
 bottom:8px!important;
 left:2%!important;
}

/* Align gameplay copyright with the true bottom-left corner of the page. */
body:not(.wd-gate):has(#game:not([hidden])) .wd-avatar-copyright{
 left:0!important;
 bottom:0!important;
 margin:0!important;
 padding:0!important;
}

/* The main container is centered; offset its left edge to the page edge. */
body:not(.wd-gate):has(#game:not([hidden])) main > .wd-avatar-copyright{
 left:calc((100% - 100vw) / 2)!important;
}