/*
 VGARZ UgarZ Integration Theme v1
 Source reference: user-provided UgarZ mirror (style.css + ranking/profile snapshots).
 Branding, routes, authentication and game protocol remain VGARZ.
*/
:root{
  --ug-blue:#337ab7;
  --ug-blue-dark:#286090;
  --ug-info:#5bc0de;
  --ug-warn:#f0ad4e;
  --ug-warn-dark:#ec971f;
  --ug-danger:#c90000;
  --ug-text:#333;
  --ug-muted:#777;
  --ug-line:#ccc;
  --ug-soft:#f5f5f5;
  --ug-white:#fff;
}

/* ---------- GAME / INDEX ---------- */
html:has(#canvas),body:has(#canvas){margin:0!important;padding:0!important;overflow:hidden!important;font-family:Ubuntu,"Helvetica Neue",Helvetica,Arial,sans-serif!important}
#canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
#overlays:not(.vgarz-overlay-hidden){position:fixed!important;inset:0!important;display:flex!important;align-items:flex-start!important;justify-content:center!important;padding:54px 10px 72px!important;background:rgba(0,0,0,.50)!important;overflow:auto!important;z-index:200!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.vgarz-game-active #overlays,#overlays.vgarz-overlay-hidden{display:none!important;visibility:hidden!important;pointer-events:none!important;opacity:0!important}
#overlays .vgarz-agarix-layout{display:grid!important;grid-template-columns:260px 380px 380px!important;align-items:start!important;justify-content:center!important;gap:5px!important;width:1030px!important;max-width:calc(100vw - 20px)!important;margin:0 auto!important}

#helloDialog,#helloDialog.white-panel{position:relative!important;display:block!important;width:380px!important;min-width:380px!important;max-width:380px!important;margin:0!important;padding:7px 15px 10px!important;border:0!important;border-radius:15px!important;background:#fff!important;color:#333!important;box-shadow:0 2px 13px rgba(0,0,0,.20)!important;overflow:visible!important;font:14px/1.42857143 "Helvetica Neue",Helvetica,Arial,sans-serif!important}
#helloDialog:before,#helloDialog:after{display:none!important;content:none!important}
#helloDialog>*{position:relative!important;z-index:auto!important}
#helloDialog .vgarz-hello-head{margin:0!important;text-align:center!important}
#helloDialog .vgarz-hello-notice{display:block!important;height:31px!important;line-height:29px!important;margin:0 0 4px!important;padding:0 8px!important;border:1px solid #ddd!important;border-radius:6px!important;background:linear-gradient(#fff,#f7f7f7)!important;color:#666!important;font-size:11px!important;font-weight:400!important;text-decoration:none!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important}
#helloDialog #imgBanner{display:block!important;width:auto!important;height:auto!important;max-width:260px!important;max-height:92px!important;margin:2px auto 7px!important;filter:none!important;opacity:1!important}
#helloDialog #topInfo{display:table!important;margin:0 auto 3px!important;padding:0!important;border:0!important;background:transparent!important;color:#777!important;font-size:10px!important;font-weight:400!important;letter-spacing:0!important}
#helloDialog.auth-logged-in #topInfo{display:none!important}
#helloDialog form,#helloDialog #helloGameForm{display:block!important;margin:0!important;padding:0!important}
#helloDialog .agarix-row{display:flex!important;align-items:center!important;gap:5px!important;margin:0 0 5px!important;padding:0!important}
#helloDialog .form-control-custom,#helloDialog .form-control,#helloDialog input.form-control,#helloDialog select.form-control,#helloDialog button.form-control,#helloDialog a.form-control{height:34px!important;min-height:34px!important;margin:0!important;padding:6px 10px!important;border:1px solid #ccc!important;border-radius:4px!important;background:#fff!important;color:#555!important;box-shadow:inset 0 1px 1px rgba(0,0,0,.075)!important;font:14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif!important;outline:none!important}
#helloDialog input::placeholder{color:#999!important}
#helloDialog .form-control-custom:focus,#helloDialog input.form-control:focus,#helloDialog select.form-control:focus{border-color:#66afe9!important;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)!important}
#helloDialog .room-select{width:112px!important;min-width:112px!important;flex:0 0 112px!important;cursor:pointer!important}
#helloDialog .fav-btn,#helloDialog .slot-button{width:48px!important;min-width:48px!important;flex:0 0 48px!important;height:34px!important;line-height:32px!important;padding:0!important;border:1px solid #ccc!important;border-radius:4px!important;background:#fff!important;color:#333!important;font-weight:500!important;text-align:center!important}
#helloDialog .btn-galeri{display:flex!important;align-items:center!important;justify-content:center!important;width:115px!important;min-width:115px!important;flex:0 0 115px!important;height:34px!important;line-height:32px!important;padding:0 7px!important;border:1px solid #46b8da!important;border-radius:4px!important;background:#5bc0de!important;color:#fff!important;font-size:12px!important;font-weight:400!important;text-decoration:none!important}
#helloDialog .btn-galeri:hover{background:#31b0d5!important;border-color:#269abc!important}
#helloDialog #playBtn,#helloDialog .btn-play{display:block!important;width:100%!important;height:38px!important;min-height:38px!important;margin:6px 0 5px!important;padding:0 12px!important;border:1px solid #2e6da4!important;border-radius:4px!important;background:#337ab7!important;color:#fff!important;box-shadow:none!important;text-shadow:0 -1px 0 rgba(0,0,0,.2)!important;font-size:14px!important;font-weight:400!important;line-height:36px!important}
#helloDialog #playBtn:hover{background:#286090!important;border-color:#204d74!important;transform:none!important;filter:none!important}
#helloDialog .vgarz-action-row,#helloDialog .action-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:5px!important;margin:0 0 7px!important}
#helloDialog #spectateBtn,#helloDialog #replayBtn,#helloDialog .btn-spectate,#helloDialog .btn-replay{display:block!important;width:100%!important;height:35px!important;min-height:35px!important;margin:0!important;padding:0 12px!important;border:1px solid #eea236!important;border-radius:4px!important;background:#f0ad4e!important;color:#fff!important;box-shadow:none!important;text-shadow:0 -1px 0 rgba(0,0,0,.2)!important;font-size:14px!important;font-weight:400!important;line-height:33px!important}
#helloDialog #spectateBtn:hover,#helloDialog #replayBtn:hover{background:#ec971f!important;border-color:#d58512!important;transform:none!important;filter:none!important}
#helloDialog #settings,#helloDialog .hello-options-card{margin:0!important;padding:7px 4px 3px!important;border:0!important;border-top:1px solid #eee!important;border-radius:0!important;background:#fff!important;color:#333!important;box-shadow:none!important}
#helloDialog #yesno_settings,#helloDialog .settings-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:4px 10px!important;margin:0!important;padding:0!important}
#helloDialog #yesno_settings>label,#helloDialog .checkbox-wrapper{display:flex!important;align-items:center!important;gap:6px!important;min-height:25px!important;height:25px!important;margin:0!important;padding:0 2px!important;border:0!important;border-radius:0!important;background:transparent!important;color:#444!important;font-size:12px!important;font-weight:400!important;white-space:nowrap!important;overflow:visible!important}
#helloDialog #yesno_settings input[type=checkbox],#helloDialog .checkbox-wrapper input[type=checkbox]{position:static!important;appearance:auto!important;-webkit-appearance:auto!important;width:14px!important;height:14px!important;min-width:14px!important;margin:0!important;border:initial!important;border-radius:initial!important;background:initial!important;box-shadow:none!important}
#helloDialog #yesno_settings input[type=checkbox]:checked:after{content:none!important;display:none!important}
#helloDialog .vgarz-color-section{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin:4px 0 0!important;padding:7px 2px 2px!important;border-top:1px solid #eee!important}
#helloDialog .vgarz-color-block{font-size:10px!important;color:#555!important}
#helloDialog .vgarz-color-block strong{display:block!important;margin-bottom:4px!important;font-size:10px!important;color:#555!important}
#helloDialog .vgarz-color-block>div{display:flex!important;align-items:center!important;gap:5px!important}
#helloDialog input[type=color]{width:52px!important;height:29px!important;padding:2px!important;border:1px solid #ccc!important;border-radius:4px!important;background:#fff!important}
#helloDialog #agxBgColorReset,#helloDialog #agxBorderColorReset{height:29px!important;padding:0 8px!important;border:1px solid #ccc!important;border-radius:4px!important;background:#fff!important;color:#555!important;font-size:10px!important;font-weight:400!important}
#helloDialog .vgarz-rgb{display:flex!important;align-items:center!important;gap:3px!important;margin:0!important;color:#555!important;font-size:10px!important}
#helloDialog .vgarz-help,#helloDialog #instructions{margin:7px 0 0!important;padding:6px 5px!important;border:0!important;border-top:1px solid #eee!important;border-radius:0!important;background:#fafafa!important;text-align:center!important}
#helloDialog .vgarz-help .text-muted,#helloDialog .otp-instruction-text .text-muted{color:#777!important;font-size:9px!important;line-height:1.55!important}
#helloDialog .vgarz-language-row,#helloDialog .otp-language-row{display:flex!important;justify-content:center!important;align-items:center!important;gap:8px!important;margin:6px 0 3px!important}
#helloDialog .vgarz-language-row img,#helloDialog .otp-language-row img{width:25px!important;height:17px!important;border-radius:0!important;opacity:1!important}
#helloDialog .vgarz-bottom-links,#helloDialog #address{margin:2px 0 0!important;text-align:center!important;color:#777!important;font-size:9.5px!important}
#helloDialog .vgarz-bottom-links a,#helloDialog #address a{color:#337ab7!important;text-decoration:none!important}
#helloDialog #mobilTools{display:none!important}
#helloDialog .otp-hidden-control{display:none!important}
#helloDialog #roomState{margin:0 0 4px!important;padding:4px!important;border-radius:3px!important;font-size:10px!important}

#overlays .vgarz-side-left,#overlays .vgarz-side-right{display:flex!important;flex-direction:column!important;gap:5px!important;width:100%!important;min-width:0!important}
#overlays #idSolMenu,#overlays #idUserContainer,#overlays #idDiscord,#overlays .sag-panel-kutu{position:static!important;display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:7px 10px!important;border:0!important;border-radius:0!important;background:#fff!important;color:#333!important;box-shadow:0 1px 4px rgba(0,0,0,.12)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;font:14px/1.55 "Helvetica Neue",Helvetica,Arial,sans-serif!important;text-align:left!important}
#overlays #idSolMenu{padding:9px 12px!important}
#overlays #idSolMenu a{display:block!important;margin:0!important;padding:1px 0!important;color:#337ab7!important;font-size:14px!important;font-weight:400!important;line-height:1.55!important;text-decoration:none!important}
#overlays #idSolMenu .vgarz-store-link{display:block!important;margin-top:6px!important;padding:8px!important;border-radius:4px!important;background:#c90000!important;color:#fff!important;font-weight:700!important;text-align:center!important;box-shadow:0 5px 13px rgba(201,0,0,.24)!important}
#overlays #idUserContainer a,#overlays #idUserContainer button,#overlays #idDiscord a,#overlays .sag-panel-kutu a{color:#337ab7!important;font-size:14px!important;font-weight:400!important;text-decoration:none!important}
#overlays #idUserContainer button{width:auto!important;padding:0!important;border:0!important;background:none!important;cursor:pointer!important}
#overlays .otp-authenticated-menu,#overlays .otp-user-links{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:5px!important;margin:0!important}
#overlays .otp-login-title{margin:0 0 5px!important;color:#555!important;font-size:14px!important;font-weight:700!important}
#overlays .otp-login-form{display:grid!important;gap:5px!important}
#overlays .otp-auth-input{height:34px!important;border:1px solid #ccc!important;border-radius:4px!important;background:#fff!important;color:#555!important;padding:6px 10px!important}
#overlays .otp-login-button{height:34px!important;border:1px solid #2e6da4!important;border-radius:4px!important;background:#337ab7!important;color:#fff!important}
#overlays .auth-side-message{font-size:10px!important;line-height:1.35!important;color:#c00!important}

/* Nevhost stays modern intentionally, positioned in the UgarZ right column. */
#overlays #idTwitch.vgarz-nevhost-sponsor{position:static!important;display:block!important;width:280px!important;max-width:280px!important;margin:128px 0 0 16px!important;padding:14px!important;border-radius:16px!important;text-decoration:none!important}

/* UgarZ style bottom chat */
#chat_controls.bottomContainer{position:fixed!important;left:35px!important;bottom:0!important;z-index:70!important;display:flex!important;align-items:center!important;gap:7px!important;min-height:48px!important;height:48px!important;max-width:min(860px,calc(100vw - 45px))!important;padding:5px 10px!important;border:0!important;border-radius:0!important;background:rgba(0,0,0,.45)!important;color:#fff!important;box-shadow:none!important;transition:.2s ease!important}
#chat_controls #chat_textbox{width:300px!important;max-width:42vw!important;height:30px!important;margin:0!important;padding:0 10px!important;border:0!important;border-radius:0!important;background:rgba(0,0,0,.25)!important;color:#fff!important;outline:none!important;text-indent:0!important;font-size:13px!important}
#chat_controls #chat_textbox:focus{background:rgba(0,0,0,.62)!important}
#chat_controls .chat-tab{color:#fff!important;font-size:11px!important}
#chat_controls button{font-size:11px!important}
#agxSpectatorHud{display:none!important}

/* ---------- UgarZ MOBILE ---------- */
#vgarzUgarzMobileDock{display:none;position:fixed;z-index:2147481000;right:10px;bottom:58px;gap:7px;align-items:flex-end;pointer-events:none}
#vgarzUgarzMobileDock .ug-dock-col{display:grid;gap:7px;pointer-events:auto}
#vgarzUgarzMobileDock button{width:50px;height:50px;padding:0;border:1px solid rgba(255,255,255,.58);border-radius:50%;background:rgba(0,0,0,.62);color:#fff;font:800 14px/1 Ubuntu,Arial,sans-serif;box-shadow:0 3px 12px rgba(0,0,0,.28);touch-action:none;-webkit-user-select:none;user-select:none}
#vgarzUgarzMobileDock button.ug-wide{width:60px;border-radius:16px;font-size:11px}
#vgarzUgarzMobileDock button:active{background:rgba(51,122,183,.88);transform:scale(.96)}
@media(max-width:1180px) and (min-width:901px){
  #overlays .vgarz-agarix-layout{grid-template-columns:235px 370px 310px!important;width:925px!important}
  #helloDialog,#helloDialog.white-panel{width:370px!important;min-width:370px!important;max-width:370px!important}
  #overlays #idTwitch.vgarz-nevhost-sponsor{width:250px!important;max-width:250px!important;margin-left:10px!important}
}
@media(max-width:900px),(hover:none),(pointer:coarse){
  #overlays:not(.vgarz-overlay-hidden){align-items:flex-start!important;padding:8px 5px 70px!important}
  #overlays .vgarz-agarix-layout{display:block!important;width:min(100%,420px)!important;max-width:420px!important;margin:0 auto!important}
  #overlays .vgarz-side-left,#overlays .vgarz-side-right{display:none!important}
  #helloDialog,#helloDialog.white-panel{width:100%!important;min-width:0!important;max-width:420px!important;max-height:calc(100dvh - 86px)!important;margin:0 auto!important;padding:8px 10px 11px!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}
  #helloDialog #imgBanner{max-width:235px!important;max-height:78px!important}
  #helloDialog .form-control-custom,#helloDialog .form-control,#helloDialog input.form-control,#helloDialog select.form-control{font-size:16px!important}
  #helloDialog .vgarz-help{display:none!important}
  #helloDialog #mobilTools{display:block!important;text-align:center!important;margin:4px 0!important}
  #helloDialog #mobilTools ul{margin:0!important;padding:0!important;list-style:none!important}
  #helloDialog #mobilTools li{display:inline!important;margin:0 6px!important;color:#337ab7!important;font-size:13px!important;font-weight:700!important}
  #chat_controls.bottomContainer{left:0!important;width:100%!important;max-width:100%!important;height:auto!important;min-height:48px!important;padding:5px!important;background:rgba(0,0,0,.78)!important}
  #chat_controls #chat_textbox{flex:1!important;width:auto!important;max-width:none!important;font-size:16px!important}
  body.vgarz-game-active #vgarzUgarzMobileDock,#overlays.vgarz-overlay-hidden~#vgarzUgarzMobileDock{display:flex!important}
}
@media(max-width:430px){
  #helloDialog .room-select{width:98px!important;min-width:98px!important;flex-basis:98px!important}
  #helloDialog .fav-btn{width:43px!important;min-width:43px!important;flex-basis:43px!important}
  #helloDialog .btn-galeri{width:105px!important;min-width:105px!important;flex-basis:105px!important;font-size:11px!important}
  #helloDialog #yesno_settings,#helloDialog .settings-grid{gap:3px 6px!important}
  #helloDialog #yesno_settings>label,#helloDialog .checkbox-wrapper{font-size:11px!important}
  #vgarzUgarzMobileDock button{width:46px;height:46px}
}

/* ---------- SITE PAGES: UgarZ classic visual language ---------- */
body:has(.egz-shell),body:has(.agp-profile-hero),body:has(.agp-hof-hero){background:#f5f5f5!important;color:#222!important;font-family:Ubuntu,Verdana,Arial,sans-serif!important;overflow-y:auto!important}
body:has(.egz-shell):before{display:none!important}
.egz-page-bg{display:none!important}
.egz-top{position:sticky!important;top:0!important;width:100%!important;max-width:none!important;min-height:58px!important;margin:0!important;padding:7px max(14px,calc((100vw - 1120px)/2))!important;border:0!important;border-bottom:1px solid #d7d7d7!important;border-radius:0!important;background:#fff!important;box-shadow:0 2px 8px rgba(0,0,0,.08)!important;backdrop-filter:none!important;color:#333!important}
.egz-logo img{max-width:125px!important;max-height:42px!important;filter:none!important}
.egz-top nav a{padding:7px 9px!important;border:0!important;border-radius:3px!important;color:#337ab7!important;font-size:12px!important;font-weight:400!important}
.egz-top nav a:hover{background:#f0f0f0!important;color:#23527c!important}
.egz-shell{width:min(1120px,calc(100% - 24px))!important;margin:18px auto 40px!important}
.egz-title{margin:0 0 12px!important;padding:4px 0 8px!important;border-bottom:1px solid #ddd!important}
.egz-title h1{margin:0!important;color:#222!important;background:none!important;-webkit-background-clip:initial!important;font-family:Verdana,Arial,sans-serif!important;font-size:32px!important;font-weight:700!important;letter-spacing:0!important}
.egz-back{min-height:32px!important;padding:0 10px!important;border:1px solid #ccc!important;border-radius:4px!important;background:#fff!important;color:#337ab7!important;font-size:11px!important;font-weight:400!important}
.egz-card,.agp-profile-hero,.agp-hof-hero,.agp-profile-panel,.agp-stat-card,.agp-podium-card,.egz-stat{border:1px solid #d7d7d7!important;border-radius:4px!important;background:#fff!important;color:#333!important;box-shadow:0 1px 4px rgba(0,0,0,.08)!important}
.egz-card:before,.agp-profile-hero:before,.agp-hof-hero:before,.agp-podium-card:after{display:none!important}
.profile-name h2,.agp-profile-name,.agp-panel-head h2,.agp-hof-copy h2,.agp-podium-name{color:#222!important;background:none!important}
.profile-name p,.agp-profile-meta,.agp-panel-head span,.agp-hof-copy p,.agp-podium-room,.agp-stat-card span,.agp-stat-card em,.egz-stat small{color:#777!important}
.avatar,.agp-profile-avatar{border:1px solid #bbb!important;border-radius:50%!important;background:#e9eef4!important;color:#337ab7!important;box-shadow:none!important}
.role-badge,.agp-badge{border:1px solid #ccc!important;border-radius:3px!important;background:#f7f7f7!important;color:#555!important}
.agp-badge.gold{border-color:#e6c75a!important;background:#fff8d9!important;color:#856404!important}
.egz-btn{height:34px!important;border:1px solid #2e6da4!important;border-radius:4px!important;background:#337ab7!important;color:#fff!important;box-shadow:none!important;font-weight:400!important}
.egz-table-wrap{margin-top:12px!important;border:1px solid #ccc!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;overflow:auto!important}
.egz-table{font-family:Verdana,Arial,sans-serif!important}
.egz-table th{padding:10px!important;background:#02538c!important;border-bottom:1px solid #02426f!important;color:#fff!important;font-size:10px!important;letter-spacing:0!important}
.egz-table td{padding:10px!important;border-bottom:1px solid #ddd!important;color:#222!important;font-size:12px!important;background:#fff!important}
.egz-table tbody tr:nth-child(even) td{background:#eef2f5!important}
.egz-table tbody tr:hover td{background:#dce8b6!important}
.egz-table td strong,.nick-link{color:#222!important}.nick-link:hover{color:#337ab7!important}
.egz-table .rank{color:#02538c!important}
.egz-empty{border:1px dashed #bbb!important;border-radius:4px!important;background:#fff!important;color:#777!important}
.egz-footer{color:#777!important}
.agp-stat-card b,.agp-podium-score,.agp-hof-count b{color:#02538c!important}
.agp-hof-count{border:1px solid #ccc!important;border-radius:4px!important;background:#fff!important}
.agp-mini-row,.agp-wallet-box{border:1px solid #ddd!important;border-radius:4px!important;background:#f8f8f8!important}
.agp-mini-row span,.agp-wallet-box small{color:#777!important}.agp-mini-row b{color:#222!important}.agp-wallet-box strong{color:#9a7400!important}

/* Store: keep the existing functionality/layout, reskin its dark shell to UgarZ light panels. */
body:has(.app) .topbar{background:#fff!important;border-bottom:1px solid #ddd!important;box-shadow:0 2px 8px rgba(0,0,0,.08)!important;color:#222!important;backdrop-filter:none!important}
body:has(.app){background:#f5f5f5!important;color:#222!important}
body:has(.app) .search input,body:has(.app) .top-btn,body:has(.app) .balance{background:#fff!important;color:#333!important;border-color:#ccc!important;box-shadow:none!important}
body:has(.app) .sidebar,body:has(.app) .rightbar,body:has(.app) .card,body:has(.app) .product-card,body:has(.app) .panel{background:#fff!important;color:#333!important;border-color:#d7d7d7!important;box-shadow:0 1px 4px rgba(0,0,0,.07)!important}
body:has(.app) .top-btn.primary{background:#337ab7!important;color:#fff!important;border-color:#2e6da4!important}

@media(max-width:850px){.egz-top{position:relative!important;align-items:flex-start!important}.egz-shell{width:calc(100% - 14px)!important}.egz-title h1{font-size:28px!important}}