/* building panel with an avatar: painted organic frame, content dropped into its slots */
.console[data-mode="bld"]:has(.avatar.on){display:block!important;padding:0!important;aspect-ratio:4.0603;height:auto;max-height:none!important;overflow:visible!important;
  background:url(../assets/img/ui/panel-brood.webp) center/100% 100% no-repeat!important;border:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:0!important;container-type:inline-size;
  left:12px!important;right:12px!important;top:auto!important;bottom:8px!important;width:auto!important;margin:0 auto;max-width:640px}
.console[data-mode="bld"]:has(.avatar.on) .units,.console[data-mode="bld"]:has(.avatar.on) .ucard.sel,.console[data-mode="bld"]:has(.avatar.on) .uprow{display:contents!important}
.console[data-mode="bld"]:has(.avatar.on) .avatar{position:absolute!important;left:4.88%;top:24.09%;right:73.31%;bottom:8.83%;height:auto!important;min-height:0!important;border:0!important;border-radius:6px;background:transparent!important}
.console[data-mode="bld"]:has(.avatar.on) .avatar .avglow{opacity:.35}
.console[data-mode="bld"]:has(.avatar.on) .ucard.sel .ub{position:absolute;left:29.11%;top:29.2%;right:4.81%;bottom:52.39%;background:transparent!important;border:0!important;box-shadow:none!important;padding:0 2.2cqw!important;
  flex-direction:row!important;align-items:center;justify-content:space-between;gap:2cqw}
.console[data-mode="bld"]:has(.avatar.on) .ucard.sel .ub .n{font-size:clamp(11px,3.1cqw,22px)!important;padding:0}
.console[data-mode="bld"]:has(.avatar.on) .ucard.sel .ub .k,.console[data-mode="bld"]:has(.avatar.on) .ucard.sel .ub .s,.console[data-mode="bld"]:has(.avatar.on) .ucard.sel .ub .c{display:none!important}
.console[data-mode="bld"]:has(.avatar.on) .ucard.sel .ub .cnt{position:static!important;font-size:clamp(12px,3.3cqw,24px)!important}
.console[data-mode="bld"]:has(.avatar.on) .uprow .mini{position:absolute!important;background:transparent!important;border:0!important;border-radius:1.4cqw;padding:0 2cqw!important;
  flex-direction:row!important;align-items:center!important;justify-content:space-between;gap:1.5cqw;font-size:clamp(10px,2.5cqw,16px)!important}
.console[data-mode="bld"]:has(.avatar.on) .uprow .mini:nth-child(1){left:28.3%;top:53.13%;right:37.29%;bottom:11.28%}
.console[data-mode="bld"]:has(.avatar.on) .uprow .mini:nth-child(2){left:63.61%;top:53.13%;right:2.64%;bottom:11.28%}
.console[data-mode="bld"]:has(.avatar.on) .mini .ml{flex-wrap:nowrap!important}
.console[data-mode="bld"]:has(.avatar.on) .mini .lf{display:inline!important}.console[data-mode="bld"]:has(.avatar.on) .mini .ls{display:none!important}
@container (max-width:520px){ .console[data-mode="bld"]:has(.avatar.on) .uprow .mini .lf{display:none!important} .console[data-mode="bld"]:has(.avatar.on) .uprow .mini .ls{display:inline!important} }
.console[data-mode="bld"]:has(.avatar.on) .mini .pip{width:clamp(9px,2.3cqw,15px)!important;height:clamp(9px,2.3cqw,15px)!important}
.console[data-mode="bld"]:has(.avatar.on) .mini:not(:disabled){box-shadow:inset 0 0 0 1.5px rgba(242,193,78,.55)}
.console[data-mode="bld"]:has(.avatar.on) .panelmsg{position:absolute;left:30%;right:5%;top:-26px;text-align:center;background:rgba(20,17,13,.85);border-radius:6px;padding:3px 8px}

/* organic gold frame (9-slice) for buttons and the minimap */
:root{--lzframe:url(../assets/img/ui/frame-brood.webp);--lzgt:url(../assets/img/ui/frame-brood-gem-top.webp);--lzgb:url(../assets/img/ui/frame-brood-gem-bottom.webp)}
:is(#bRestart,#bVoice,#bVoiceWait,#mpToggle,#bGo,#bHost,#bHost4,#bStart,#bReady,#joinForm button,#race button,#diff button,#bCancel,#bResume,#bRestartGame,#bQuit,#bEndMenu,#bBuildDone,.console .ub,.console .mini){border-style:solid!important;border-color:transparent!important;border-width:7px 15px!important;border-radius:0!important;
  border-image:var(--lzframe) 44 86 44 86 fill / 7px 15px stretch!important;background:transparent!important;color:#f3e3c2!important;box-shadow:none!important;
  text-shadow:0 1px 2px rgba(0,0,0,.7)}
:is(#bRestart,#bVoice,#bVoiceWait,#mpToggle,#bGo,#bHost,#bHost4,#bStart,#bReady,#joinForm button,#race button,#diff button,#bCancel,#bResume,#bRestartGame,#bQuit,#bEndMenu,#bBuildDone,.console .ub,.console .mini):hover:not(:disabled){filter:brightness(1.15)}
:is(#bRestart,#bVoice,#bVoiceWait,#mpToggle,#bGo,#bHost,#bHost4,#bStart,#bReady,#joinForm button,#race button,#diff button,#bCancel,#bResume,#bRestartGame,#bQuit,#bEndMenu,#bBuildDone,.console .ub,.console .mini):active:not(:disabled){filter:brightness(.9)}
#bRestart{padding:3px 6px!important}
.go{padding:6px 18px!important}
.console .ub{padding:2px 2px!important;border-width:5px 10px!important;border-image-width:5px 10px!important}
.console .units .ub .n{padding-right:0!important;font-size:13px!important;letter-spacing:0!important}
.console .units .ub .cnt{bottom:3px!important;right:4px!important;font-size:16px!important}
.console .mini{border-width:4px 8px!important;border-image-width:4px 8px!important}
#race button,#diff button{opacity:.7}
#race button[aria-pressed="true"],#diff button[aria-pressed="true"]{opacity:1;filter:brightness(1.2) drop-shadow(0 0 6px rgba(242,193,78,.55))}
.console .mini{padding:1px 2px!important}
.console .ub.active{filter:brightness(1.25) saturate(1.2)}
.minimap{border-style:solid!important;border-color:transparent!important;border-width:8px 16px!important;border-radius:0!important;
  border-image:var(--lzframe) 44 86 44 86 / 8px 16px stretch!important;background:#0e0b08}
.field.vert .minimap{border-width:9px 10px!important;border-image-width:9px 10px!important}
#console[data-mode="bld"]:has(.avatar.on) .ucard.sel .ub,#console[data-mode="bld"]:has(.avatar.on) .uprow .mini{border-image:none!important;border-width:0!important}

/* HUD: no backdrop, Menü top right with the gold counter in its own framed box underneath */
.hud{background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0!important;
  grid-template-columns:minmax(0,1fr) auto!important;grid-auto-rows:auto;row-gap:6px!important;justify-items:end;align-items:start!important}
.hud #bRestart{grid-column:2;grid-row:1}
.hud .side:not(.r){grid-column:2;grid-row:2;display:block}
.hud .side:not(.r) .stats{display:block;border-style:solid;border-color:transparent;border-width:6px 13px;border-image:var(--lzframe) 44 86 44 86 fill / 6px 13px stretch;
  padding:1px 3px;color:#f3e3c2;text-shadow:0 1px 2px rgba(0,0,0,.8);font-size:13px;white-space:nowrap}
.field.vert .minimap{top:96px!important}
@media (max-width:600px){.minimap{top:96px!important}}

/* the centre ornament of the frame keeps its shape: rails stretch, the gem is laid on top at its natural size */
:is(#bRestart,#bVoice,#bVoiceWait,#mpToggle,#bGo,#bHost,#bHost4,#bStart,#bReady,#joinForm button,#race button,#diff button,#bCancel,#bResume,#bRestartGame,#bQuit,#bEndMenu,#bBuildDone){position:relative;--bt:7px;--bs:15px}
.console .ub{--bt:5px;--bs:10px}
.console .mini{position:relative;--bt:4px;--bs:8px}
.hud .side:not(.r) .stats{position:relative;--bt:6px;--bs:13px}
:is(#bRestart,#bVoice,#bVoiceWait,#mpToggle,#bGo,#bHost,#bHost4,#bStart,#bReady,#joinForm button,#race button,#diff button,#bCancel,#bResume,#bRestartGame,#bQuit,#bEndMenu,#bBuildDone,.console .ub,.console .mini,.hud .side:not(.r) .stats)::before{content:"";position:absolute;pointer-events:none;
  inset:calc(-1 * var(--bt)) calc(-1 * var(--bs));
  background:var(--lzgt) center top/auto var(--bt) no-repeat,var(--lzgb) center bottom/auto var(--bt) no-repeat}
.console[data-mode="bld"]:has(.avatar.on) .ucard.sel .ub::before,.console[data-mode="bld"]:has(.avatar.on) .uprow .mini::before{display:none}
.minimap{border-image-repeat:stretch round!important}