/* Royal Arch avatar lobby — presentation only; existing live controls remain functional. */
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]){height:100dvh!important;overflow:hidden!important;background:url('/Word_Dome_Exact_Hall.png') center/cover no-repeat!important}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) main{position:relative!important;width:100%!important;max-width:none!important;height:100dvh!important;min-height:0!important;margin:0!important;padding:0!important;display:block!important;overflow:hidden!important;zoom:1!important}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) .brand-art{position:absolute!important;top:1.5dvh!important;left:50%!important;transform:translateX(-50%)!important;z-index:5!important;width:min(620px,52vw)!important;height:clamp(110px,25dvh,225px)!important;margin:0!important;overflow:visible!important;pointer-events:none!important}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) .brand-art img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby{position:absolute!important;left:43.5%!important;top:23dvh!important;transform:translateX(-50%)!important;transform-origin:center!important;z-index:3!important;box-sizing:border-box!important;width:clamp(360px,30vw,490px)!important;max-width:calc(100vw - 32px)!important;height:auto!important;max-height:73dvh!important;margin:0!important;padding:clamp(42px,6dvh,66px) 43px 15px!important;overflow:visible!important;border:0!important;border-radius:46% 46% 12px 12px / 10% 10% 12px 12px!important;background:radial-gradient(ellipse at 50% 5%,#133f88 0%,#0a2861 40%,#051735 100%)!important;box-shadow:inset 0 0 0 5px #ffe38c,inset 0 0 0 10px #a85c08,inset 0 0 0 13px #f8bf42,0 12px 28px #000b!important;text-align:center!important}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby:before,body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby:after{content:"";position:absolute;z-index:0;top:5%;bottom:-1%;width:27px;border:2px solid #ffe5a1;border-radius:11px;background:repeating-linear-gradient(90deg,#854005 0px,#ffc451 5px,#fff2aa 9px,#c57c0b 13px,#f9b73b 17px,#7b3a05 22px);box-shadow:inset 0 0 4px #fff9,0 0 8px #0009,0 0 0 3px #9b550a}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby:before{left:-13px}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby:after{right:-13px}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby>*{position:relative;z-index:1}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby #name,
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby #room{display:block!important;width:56%!important;min-width:0!important;max-width:220px!important;margin:0 auto 7px!important;padding:7px 10px!important;text-align:center!important}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby #room{margin:5px auto 7px!important}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby .avatar-section{margin:3px 0 7px!important}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby .avatar-section-title{font-size:14px!important;margin:0 0 5px!important}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby .lobby-avatar-preview{width:60px!important;height:60px!important;flex-basis:60px!important;margin-bottom:5px!important}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby .mode-title{margin:6px 0 2px!important;font-size:12px!important}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby button{padding:7px 10px!important;margin:2px!important}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby .primary,
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby .bottom-rules{display:block!important;width:100%!important;margin:5px auto!important}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby hr{margin:5px 0!important}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby .row{margin:3px 0!important}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby select{padding:5px!important}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #accountBar{position:absolute!important;left:auto!important;right:4vw!important;top:auto!important;bottom:8dvh!important;transform:none!important;z-index:6!important;width:clamp(175px,16vw,260px)!important;max-width:30vw!important;margin:0!important;padding:14px 10px!important;border:6px ridge #ffd76c!important;border-radius:20px 20px 9px 9px!important;background:linear-gradient(155deg,#092c6c,#03152f)!important;box-shadow:0 0 0 2px #9a5005,0 10px 26px #0009!important;text-align:center!important}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #accountBar #accountActions{display:flex!important;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #accountBar button{font-size:12px!important;padding:7px 9px!important}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #accountBar a{font-size:11px!important;margin:3px!important}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #accountDialog:not([hidden]){position:absolute!important;right:3vw!important;bottom:10dvh!important;z-index:12!important;width:min(300px,32vw)!important;margin:0!important;padding:15px!important;border:6px ridge #ffdc73!important;border-radius:18px!important;background:linear-gradient(160deg,#103d83,#061b41)!important;box-shadow:0 15px 35px #000c!important}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) .mini-brand-footer{display:none!important}
@media(max-height:850px) and (min-width:851px){
 body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby{top:22dvh!important;zoom:.85!important;left:43.5%!important;transform:translateX(-58.8%)!important}
 body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) .brand-art{height:23dvh!important}
}
@media(max-width:850px){
 body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]){overflow:auto!important;min-height:100dvh!important;background-attachment:fixed!important}
 body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) main{height:auto!important;min-height:100dvh!important;overflow:visible!important;display:flex!important;flex-direction:column!important;align-items:center!important;padding:8px 12px 55px!important}
 body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) .brand-art{position:relative!important;top:auto!important;left:auto!important;transform:none!important;width:min(540px,94vw)!important;height:clamp(110px,26vw,180px)!important}
 body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby{position:relative!important;left:auto!important;top:auto!important;transform:none!important;zoom:1!important;width:min(440px,92vw)!important;max-height:none!important;margin:-4px auto 18px!important}
 body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #accountBar{position:relative!important;right:auto!important;bottom:auto!important;width:min(260px,80vw)!important;max-width:90vw!important;margin:5px auto!important}
 body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #accountDialog:not([hidden]){position:relative!important;right:auto!important;bottom:auto!important;width:min(340px,90vw)!important;margin:10px auto!important}
}

/* Refined approved mockup: center the entire arched menu directly under trophy. */
@media(min-width:851px){
 body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby{
  left:50%!important;top:24dvh!important;
  transform:translateX(-50%)!important;zoom:1!important;
  width:clamp(390px,31vw,510px)!important;
  padding:clamp(43px,6dvh,65px) 43px 16px!important;
  border-radius:49% 49% 12px 12px / 11% 11% 12px 12px!important;
  box-shadow:inset 0 0 0 4px #ffe9aa,inset 0 0 0 8px #b66c12,inset 0 0 0 12px #f9c454,0 14px 28px #000b!important;
 }
 body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby:before,
 body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby:after{
  top:7%!important;bottom:-2%!important;width:35px!important;
  border:2px solid #fff0b4!important;border-radius:8px!important;
  background:linear-gradient(90deg,#693009 0%,#b96b0c 9%,#fff0a0 23%,#ffd05a 38%,#fff6be 49%,#eaa126 63%,#a55209 86%,#6d3006 100%)!important;
  box-shadow:inset 2px 0 5px #fff9,inset -4px 0 5px #74340a,0 0 0 3px #9c570e,0 7px 15px #0009!important;
 }
 body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby:before{left:-21px!important}
 body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby:after{right:-21px!important}
 body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) .brand-art{
  top:0.5dvh!important;left:50%!important;width:min(620px,52vw)!important;
  height:clamp(120px,25dvh,220px)!important;z-index:7!important;
 }
}
@media(min-width:851px) and (max-height:850px){
 body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby{
  zoom:.85!important;left:50%!important;top:23dvh!important;
  transform:translateX(-58.8235%)!important;
 }
}

/* Ornamental finish only. Preserve all approved positioning, sizes and layout. */
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby{
 box-shadow:
 inset 0 0 0 3px #fff2b9,
 inset 0 0 0 7px #e6a22e,
 inset 0 0 0 10px #753709,
 inset 0 0 0 14px #ffda68,
 inset 0 0 0 16px #a95b0c,
 inset 0 0 0 18px #fff0ac,
 0 14px 28px #000b!important;
}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby:before,
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby:after{
 background:linear-gradient(90deg,
 #542400 0%,#8c4306 7%,#d38b17 14%,#ffe28a 22%,
 #fffbd3 29%,#f6bf42 38%,#c27b11 48%,#ffdc72 56%,
 #fff2a6 63%,#d59020 72%,#9e5109 86%,#582600 100%)!important;
 border-color:#ffe69b!important;
 box-shadow:inset 2px 0 4px #fff9,inset -3px 0 5px #6b2c03,0 0 0 2px #b66a0c,0 0 0 4px #f7c552,0 7px 15px #0009!important;
}

/* Transparent architectural artwork replaces striped CSS pillars.
   Preserve the approved logo, panel and account-card geometry. */
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby{
 border-radius:49% 49% 12px 12px / 11% 11% 12px 12px!important;
 box-shadow:0 14px 28px #000b!important;
}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby:before{
 content:""!important;position:absolute!important;
 top:-10px!important;bottom:-12px!important;
 left:-26px!important;right:-26px!important;
 width:auto!important;height:auto!important;
 z-index:2!important;pointer-events:none!important;
 border:0!important;border-radius:0!important;
 background:url('/Ornate%20Golden%20Starry%20Archway%20Frame2.png?v=3') center center/100% 100% no-repeat!important;
 box-shadow:none!important;
}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby:after{content:none!important;display:none!important}

/* Final arch cleanup: remove the old curved panel and gold inset frame.
   The transparent Frame2 image alone supplies all visible ornament. */
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby{
 border:0!important;
 border-radius:0!important;
 box-shadow:none!important;
 background:linear-gradient(180deg,#0c2e6c 0%,#0a265a 46%,#061a40 100%)!important;
}

/* Remove the rectangular blue panel visible above and outside the ornate arch.
   Put the navy fill on a separate arched layer behind the controls and PNG. */
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby{
 background:transparent!important;
}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby::after{
 content:""!important;
 display:block!important;
 position:absolute!important;
 inset:0!important;
 width:auto!important;
 height:auto!important;
 border:0!important;
 border-radius:50% 50% 0 0 / 14% 14% 0 0!important;
 background:linear-gradient(180deg,#0c2e6c 0%,#0a265a 46%,#061a40 100%)!important;
 box-shadow:none!important;
 z-index:0!important;
 pointer-events:none!important;
}

/* Clip BOTH image and navy backing to the actual arched silhouette.
   The source PNG has a rectangular navy area above the gold curve;
   border-radius alone cannot remove that rectangular top. */
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby::before{
 clip-path:polygon(0 17%,6% 13%,14% 9%,24% 5%,36% 2%,45% 0%,55% 0%,64% 2%,76% 5%,86% 9%,94% 13%,100% 17%,100% 100%,0 100%)!important;
}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby::after{
 clip-path:polygon(0 19%,6% 16%,14% 12%,24% 9%,36% 6%,45% 5%,55% 5%,64% 6%,76% 9%,86% 12%,94% 16%,100% 19%,100% 100%,0 100%)!important;
}

/* Side-edge cleanup: keep navy backing strictly between the gold columns.
   The ornate frame image stays full-size; only the backing is narrowed. */
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby::after{
 left:35px!important;
 right:35px!important;
 inset-inline:35px!important;
 width:auto!important;
 border-radius:48% 48% 0 0 / 13% 13% 0 0!important;
 clip-path:polygon(0 17%,8% 12%,20% 6%,35% 2%,50% 0%,65% 2%,80% 6%,92% 12%,100% 17%,100% 100%,0 100%)!important;
}

/* Avatar selector: center the goal/timer controls as one balanced group. */
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby > .row{
 display:flex!important;
 justify-content:center!important;
 align-items:center!important;
 gap:32px!important;
 flex-wrap:wrap!important;
}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby > .row > label{
 display:inline-flex!important;
 align-items:center!important;
 justify-content:center!important;
 gap:9px!important;
 margin:0!important;
}
/* Match the existing centered room-name field's width. */
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #computer{
 display:block!important;
 width:220px!important;
 max-width:calc(100% - 40px)!important;
 margin-left:auto!important;
 margin-right:auto!important;
 box-sizing:border-box!important;
}

/* Signed-in player account card: use the same ornate sapphire frame as Sign In.
   Keep the existing account card dimensions and floor-level placement. */
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #accountBar{
 position:absolute!important;
 isolation:isolate!important;
 border:0!important;
 border-radius:14px!important;
 background:#081e4b!important;
 box-shadow:0 10px 26px #0009!important;
 padding:20px 24px!important;
}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #accountBar::before{
 content:""!important;
 position:absolute!important;
 inset:0!important;
 display:block!important;
 z-index:-1!important;
 pointer-events:none!important;
 background:url('/Ornate%20Golden%20Sapphire%20Fantasy%20Frame.png?v=1') center/100% 100% no-repeat!important;
}

/* Player account panel: no rectangular navy backing outside the ornate silhouette.
   The transparent frame sits above a rounded navy inset. */
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #accountBar{
 right:11vw!important;
 background:transparent!important;
 box-shadow:none!important;
 border:0!important;
 border-radius:0!important;
 padding:21px 24px!important;
 isolation:isolate!important;
}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #accountBar::after{
 content:""!important;
 position:absolute!important;
 inset:12px 15px!important;
 border-radius:18px!important;
 background:linear-gradient(180deg,#0b2b62,#06183d)!important;
 z-index:-2!important;
 pointer-events:none!important;
}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #accountBar::before{
 z-index:-1!important;
 background:url('/Ornate%20Golden%20Sapphire%20Fantasy%20Frame.png?v=1') center/100% 100% no-repeat!important;
}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lifetimeStatsLink:not([hidden]){
 display:inline-flex!important;
 align-items:center!important;
 justify-content:center!important;
 margin:3px!important;
 padding:7px 9px!important;
 border:1px solid #ad6400!important;
 border-radius:9px!important;
 background:linear-gradient(180deg,#fff2a5,#ffc54d 48%,#ed980e)!important;
 color:#071b43!important;
 text-decoration:none!important;
 font-size:11px!important;
 font-weight:800!important;
 box-shadow:0 2px 0 #9a5600,0 0 9px #ffbf4580!important;
}
@media(max-width:850px){
 body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #accountBar{
  right:auto!important;
 }
}

/* Keep the signed-in account panel immediately beside the avatar arch,
   with both bottom edges aligned (Chrome and other anchor-capable browsers). */
@media(min-width:851px){
 body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby{
  anchor-name:--word-dome-avatar-panel!important;
 }
 body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #accountBar{
  right:auto!important;
  left:calc(43.5% + 260px)!important;
  bottom:14dvh!important;
  top:auto!important;
  margin:0!important;
 }
 @supports (left:anchor(right)){
  body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #accountBar{
   position-anchor:--word-dome-avatar-panel!important;
   left:calc(anchor(right) + 14px)!important;
   bottom:anchor(bottom)!important;
  }
 }
}

/* Match both wide action bars to the player/room entry width. */
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby #computer,
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby .bottom-rules{
 display:block!important;
 width:56%!important;
 max-width:220px!important;
 min-width:0!important;
 box-sizing:border-box!important;
 margin:5px auto!important;
}
/* Triple the horizontal gap from 14px to 42px while retaining bottom alignment. */
@media(min-width:851px){
 body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #accountBar{
  left:calc(43.5% + 288px)!important;
 }
 @supports (left:anchor(right)){
  body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #accountBar{
   left:calc(anchor(right) + 42px)!important;
  }
 }
}

/* Registered player name: gold, navy lettering, sized to avatar heading. */
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby #name{
 width:171px!important;
 max-width:calc(100% - 40px)!important;
 min-width:0!important;
 box-sizing:border-box!important;
 margin:0 auto 7px!important;
 background:linear-gradient(180deg,#fff1a4 0%,#ffcf53 48%,#eaa01c 100%)!important;
 color:#092453!important;
 border:2px solid #f9d879!important;
 border-radius:9px!important;
 font-weight:800!important;
 text-align:center!important;
 box-shadow:0 2px 0 #a66a0b,0 0 10px #ffcf4b66!important;
 opacity:1!important;
 -webkit-text-fill-color:#092453!important;
}
body:not(.wd-gate):has(#lobby:not([hidden])):has(#game[hidden]) #lobby #name[readonly]{
 cursor:default!important;
 user-select:text!important;
}