/* Prototype entry screens (own add-on): Login / Register / Select Channel / Select Empire in the Vicalox design, before
   Browser2's character select. Rules follow the Vicalox client (/MT2/web/index.html, #vicalox-direct-auth-channel-v1),
   scoped under #vx-entry; images are copies of /MT2/web/assets/ui/login and /assets/ui/Empire under /vicalox/entry/. */
#vx-entry{
  --vx-gold:#d6b468;--vx-gold2:#8b6a35;--vx-ink:#080b11;--vx-blue:#6fd0ff;--vx-red:#ff4055;
  --vx-safe-top:env(safe-area-inset-top,0px);--vx-safe-right:env(safe-area-inset-right,0px);
  --vx-safe-bottom:env(safe-area-inset-bottom,0px);--vx-safe-left:env(safe-area-inset-left,0px)
}
#vx-entry[hidden]{display:none!important}
#vx-entry .vx-screen{
  position:fixed!important;inset:0!important;z-index:10020!important;display:none!important;
  align-items:center!important;justify-content:center!important;box-sizing:border-box!important;overflow:hidden!important;isolation:isolate!important;
  padding:max(12px,var(--vx-safe-top)) max(16px,var(--vx-safe-right)) max(12px,var(--vx-safe-bottom)) max(16px,var(--vx-safe-left))!important;
  color:#eef2fb!important;font-family:Arial,Helvetica,sans-serif!important;
  background:
    linear-gradient(180deg,rgba(4,6,11,.32),rgba(5,7,13,.74) 61%,rgba(3,4,8,.94)),
    url('/vicalox/entry/main-bg.png') center/cover no-repeat,#05070d!important;
}
#vx-entry .vx-screen.active{display:flex!important}
#vx-entry .vx-screen::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 38%,rgba(22,31,45,.06) 0%,rgba(5,7,13,.18) 45%,rgba(3,4,8,.82) 100%);
}
#vx-entry .vx-screen::after{
  content:'';position:absolute;left:50%;bottom:-31%;width:min(150vw,1500px);aspect-ratio:1/1;transform:translateX(-50%);z-index:0;
  background:url('/vicalox/entry/sp_smog.png') center/contain no-repeat;opacity:.28;mix-blend-mode:screen;pointer-events:none;
  animation:vxAuthSmog 14s ease-in-out infinite alternate
}
@keyframes vxAuthSmog{0%{transform:translateX(-50%) scale(.76);opacity:.12}100%{transform:translateX(-50%) scale(1.02);opacity:.34}}

#vx-entry .vx-auth-shell,#vx-entry .vx-channel-shell{position:relative;z-index:2;padding:2px;box-sizing:border-box;filter:drop-shadow(0 18px 34px rgba(0,0,0,.52))}
#vx-entry .vx-auth-shell{
  width:min(430px,calc(100vw - 34px));
  background:linear-gradient(118deg,#6fd0ff 0%,#244f69 19%,#d5b263 49%,#6c1824 79%,#ff4055 100%);
  clip-path:polygon(0 18px,18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)
}
#vx-entry .vx-auth-card{
  position:relative;padding:25px 28px 22px;box-sizing:border-box;background:rgba(8,11,18,.83);
  clip-path:polygon(0 18px,18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
}
#vx-entry .vx-logo{display:block;width:min(215px,62%);max-height:82px;object-fit:contain;margin:0 auto 9px}
#vx-entry .vx-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.12);margin:0 0 15px}
#vx-entry .vx-tab{position:relative;flex:1;border:0!important;background:none!important;color:#8490aa!important;font:700 11px/1.2 Arial,sans-serif!important;letter-spacing:1.55px;text-transform:uppercase;padding:10px 4px 11px!important;cursor:pointer!important;box-shadow:none!important}
#vx-entry .vx-tab.active{color:#f7f7f4!important;cursor:default!important}
#vx-entry .vx-tab.active::after{content:'';position:absolute;left:15%;right:15%;height:2px;bottom:-1px;background:linear-gradient(90deg,var(--vx-blue),var(--vx-gold),var(--vx-red))}
#vx-entry .vx-field{display:block;margin:0 0 10px}
#vx-entry .vx-field input{
  width:100%!important;height:42px!important;box-sizing:border-box!important;padding:0 12px!important;border:1px solid rgba(121,157,188,.34)!important;border-radius:0!important;
  outline:0!important;background:rgba(10,14,22,.72)!important;color:#f2f4f8!important;font:600 13px Arial,sans-serif!important;letter-spacing:.15px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018)!important
}
#vx-entry .vx-field input:focus{border-color:#6fcdf7!important;box-shadow:0 0 0 1px rgba(111,205,247,.2),inset 0 0 14px rgba(65,135,180,.08)!important}
#vx-entry .vx-field input::placeholder{color:#69758e!important}
#vx-entry .vx-primary{
  width:100%!important;min-height:42px!important;border:0!important;border-radius:0!important;margin:1px 0 0!important;padding:0 15px!important;cursor:pointer!important;
  background:linear-gradient(100deg,#6fd0ff 0%,#d7bf75 52%,#ff4055 100%)!important;color:#17130d!important;
  font:800 11px Arial,sans-serif!important;letter-spacing:1.65px!important;text-transform:uppercase!important;box-shadow:none!important
}
#vx-entry .vx-primary:hover{filter:brightness(1.08)}#vx-entry .vx-primary:active{transform:translateY(1px)}
#vx-entry .vx-primary:disabled{filter:grayscale(.5) brightness(.8);cursor:wait!important}
#vx-entry .vx-status{min-height:16px;margin:7px 0 0;color:#91cf79!important;text-align:center;font:600 10px/1.45 Arial,sans-serif!important}
#vx-entry .vx-status.bad{color:#ff7d82!important}
#vx-entry .vx-link{display:block;margin:10px auto 0;border:0!important;background:none!important;color:#8b91a1!important;font:700 9px Arial,sans-serif!important;letter-spacing:.65px;text-transform:uppercase;cursor:pointer!important}
#vx-entry .vx-link:hover{color:#d9c28a!important}
#vx-entry .vx-footer{position:fixed;z-index:2;left:0;right:0;bottom:max(8px,var(--vx-safe-bottom));text-align:center;color:rgba(210,215,225,.5);font:9px Arial,sans-serif;pointer-events:none}

/* Channel frame */
#vx-entry .vx-channel-shell{
  width:min(720px,calc(100vw - 36px));padding:1px;
  background:linear-gradient(135deg,#4b3820 0%,#c6a45e 28%,#6c512d 52%,#c9aa65 76%,#382817 100%);
  clip-path:polygon(0 12px,12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px))
}
#vx-entry .vx-channel-card{
  position:relative;padding:19px 21px 17px;background:linear-gradient(180deg,rgba(24,18,12,.96),rgba(10,10,9,.94));
  clip-path:polygon(0 12px,12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px));
  box-shadow:inset 0 0 0 1px rgba(255,219,145,.07)
}
#vx-entry .vx-channel-head{display:flex;align-items:center;justify-content:center;margin-bottom:13px;padding-bottom:12px;border-bottom:1px solid rgba(204,171,102,.24)}
#vx-entry .vx-channel-title{margin:0;color:#ead7ad;font:700 18px Georgia,'Times New Roman',serif;letter-spacing:1.5px;text-shadow:0 1px 0 #000;text-align:center}
#vx-entry .vx-channel-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;margin:0!important}
#vx-entry .vx-channel-list .online-choice{
  position:relative!important;display:grid!important;grid-template-columns:1fr auto!important;grid-template-rows:auto auto!important;
  min-height:74px!important;padding:12px 13px!important;border:1px solid #7c6338!important;border-radius:0!important;background:linear-gradient(180deg,rgba(92,69,36,.84),rgba(50,38,24,.88))!important;
  color:#ead9b5!important;text-align:left!important;cursor:pointer!important;box-shadow:inset 0 0 0 1px rgba(255,219,143,.06)!important;transition:transform .12s ease,filter .12s ease,border-color .12s ease!important
}
#vx-entry .vx-channel-list .online-choice::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(#d6b468,#785424)}
#vx-entry .vx-channel-list .online-choice:hover{transform:translateY(-1px);filter:brightness(1.08);border-color:#b38e4c!important}
#vx-entry .vx-channel-list .online-choice:active{transform:translateY(1px)}
#vx-entry .vx-channel-list .online-choice:disabled{filter:grayscale(.65) brightness(.75);cursor:not-allowed!important;transform:none}
#vx-entry .vx-channel-list .online-choice b{grid-column:1;grid-row:1;font:700 20px Georgia,'Times New Roman',serif!important;color:#f1dfb7!important;letter-spacing:.3px}
#vx-entry .vx-channel-list .online-choice span{grid-column:2;grid-row:1;align-self:center;color:#d9c28a!important;font:700 9px Arial,sans-serif!important;letter-spacing:.7px;text-transform:uppercase}
#vx-entry .vx-channel-list .online-choice small{grid-column:1/3;grid-row:2;color:#9f947d!important;font:9px Arial,sans-serif!important;margin-top:7px!important}
#vx-entry .vx-channel-list .online-choice.st-0 span,#vx-entry .vx-channel-list .online-choice.st-3 span{color:#e18b80!important}
#vx-entry .vx-channel-list .online-choice.st-2 span{color:#e4b55d!important}
#vx-entry .vx-card-status{min-height:15px!important;margin:10px 0 0!important;padding-top:9px!important;border-top:1px solid rgba(204,171,102,.16)!important;color:#b6ab8e!important;font:10px Arial,sans-serif!important}
#vx-entry .vx-card-status.bad{color:#ff8585!important}

/* Empire frame */
#vx-entry .vx-empire-shell{
  position:relative;z-index:2;width:min(820px,calc(100vw - 36px));padding:1px;box-sizing:border-box;
  background:linear-gradient(135deg,#4b3820 0%,#c6a45e 28%,#6c512d 52%,#c9aa65 76%,#382817 100%);
  clip-path:polygon(0 12px,12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px));
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.56))
}
#vx-entry .vx-empire-card{
  width:100%;box-sizing:border-box;padding:18px 20px 14px;
  background:linear-gradient(180deg,rgba(24,18,12,.96),rgba(10,10,9,.95));
  clip-path:polygon(0 12px,12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px));
  box-shadow:inset 0 0 0 1px rgba(255,219,145,.07)
}
#vx-entry .vx-empire-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;margin:0!important}
#vx-entry .empire-choice{
  position:relative!important;min-width:0!important;min-height:188px!important;padding:14px 10px 12px!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:8px!important;overflow:hidden!important;
  border:1px solid #725b35!important;border-radius:0!important;background:linear-gradient(180deg,rgba(83,61,33,.82),rgba(39,30,20,.92))!important;cursor:pointer!important;
  color:#ead9b5!important;box-shadow:inset 0 0 0 1px rgba(255,219,143,.05)!important;transition:transform .12s ease,filter .12s ease,border-color .12s ease,box-shadow .12s ease!important
}
#vx-entry .empire-choice::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 40%,rgba(0,0,0,.12))}
#vx-entry .empire-choice::after{content:'';position:absolute;left:12px;right:12px;bottom:0;height:2px;opacity:.9}
#vx-entry .empire-choice i{
  position:relative;z-index:1;display:block;width:112px;height:118px;flex:0 0 auto;
  background-position:center;background-repeat:no-repeat;background-size:contain;filter:drop-shadow(0 7px 9px rgba(0,0,0,.46))
}
#vx-entry .empire-choice b{position:relative;z-index:1;color:#f0dfb9!important;font:700 17px Georgia,'Times New Roman',serif!important;letter-spacing:.2px;text-shadow:0 1px 0 #000}
#vx-entry .empire-1 i{background-image:url('/vicalox/entry/shinsoo.png')}
#vx-entry .empire-2 i{background-image:url('/vicalox/entry/chunjo.png')}
#vx-entry .empire-3 i{background-image:url('/vicalox/entry/jinno.png')}
#vx-entry .empire-1::after{background:linear-gradient(90deg,transparent,#c94f3e,transparent)}
#vx-entry .empire-2::after{background:linear-gradient(90deg,transparent,#d4ad48,transparent)}
#vx-entry .empire-3::after{background:linear-gradient(90deg,transparent,#5f86b9,transparent)}
#vx-entry .empire-1:hover{border-color:#a85b49!important;box-shadow:inset 0 0 18px rgba(161,61,43,.15),0 0 12px rgba(120,44,34,.12)!important}
#vx-entry .empire-2:hover{border-color:#ad8b45!important;box-shadow:inset 0 0 18px rgba(183,144,53,.15),0 0 12px rgba(132,101,32,.12)!important}
#vx-entry .empire-3:hover{border-color:#617fa4!important;box-shadow:inset 0 0 18px rgba(65,103,151,.16),0 0 12px rgba(45,76,117,.12)!important}
#vx-entry .empire-choice:hover{transform:translateY(-2px);filter:brightness(1.07)}
#vx-entry .empire-choice:active{transform:translateY(1px)}
#vx-entry .empire-choice:disabled{cursor:wait!important;filter:brightness(.8);transform:none}
@media (max-width:560px){
  #vx-entry .vx-channel-list{grid-template-columns:1fr!important}
  #vx-entry .vx-empire-list{grid-template-columns:1fr!important;gap:8px!important}
  #vx-entry .empire-choice{min-height:0!important;flex-direction:row!important;justify-content:flex-start!important;padding:8px 12px!important}
  #vx-entry .empire-choice i{width:58px;height:62px}
}

/* sparks */
#vx-entry .vx-sparks{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
#vx-entry .vx-spark{position:absolute;display:block;background-position:center;background-size:contain;background-repeat:no-repeat;opacity:.55;pointer-events:none}
#vx-entry .vx-spark.s1{width:42vw;max-width:620px;height:32vh;right:-8vw;bottom:-18vh;background-image:url('/vicalox/entry/spark_1.png');animation:vxSparkRise 6s linear infinite}
#vx-entry .vx-spark.s2{width:28vw;max-width:420px;height:38vh;left:-7vw;bottom:-22vh;background-image:url('/vicalox/entry/spark_2.png');animation:vxSparkRise 7.5s linear infinite 1.5s}
#vx-entry .vx-spark.s3{width:128px;height:165px;right:17vw;bottom:-140px;background-image:url('/vicalox/entry/spark_3.png');animation:vxSparkRiseShort 5s linear infinite 1.5s}
#vx-entry .vx-spark.s4{width:min(794px,62vw);height:176px;left:0;bottom:-180px;background-image:url('/vicalox/entry/spark_4.png');animation:vxSparkRiseMid 6s linear infinite}
@keyframes vxSparkRise{0%{transform:translateY(35%);opacity:.05}45%{opacity:.6}100%{transform:translateY(-35%);opacity:0}}
@keyframes vxSparkRiseShort{0%{transform:translateY(0) scale(.6);opacity:1}75%{transform:translateY(-180px) scale(.6);opacity:.5}100%{transform:translateY(-240px) scale(.6);opacity:0}}
@keyframes vxSparkRiseMid{0%{transform:translateY(0) scale(.5);opacity:1}75%{transform:translateY(-180px) scale(.5);opacity:.5}100%{transform:translateY(-240px) scale(.5);opacity:0}}
@media (prefers-reduced-motion:reduce){#vx-entry .vx-spark,#vx-entry .vx-screen::after{animation:none}}
/* no page scrollbar behind the entry screens */
html:has(#vx-entry:not([hidden])),html:has(#vx-entry:not([hidden])) body{overflow:hidden!important}
/* Google / Discord row (Vicalox login) */
#vx-entry .vx-divider{display:flex;align-items:center;gap:10px;margin:10px 0 8px;color:#8b91a1;font:9px Arial,sans-serif;text-transform:uppercase;letter-spacing:.65px}
#vx-entry .vx-divider::before,#vx-entry .vx-divider::after{content:'';height:1px;flex:1;background:rgba(255,255,255,.10)}
#vx-entry .vx-social-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#vx-entry .vx-social{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:32px;border:1px solid rgba(255,255,255,.12)!important;border-radius:0!important;background:rgba(255,255,255,.045)!important;color:#e2e5eb!important;font:700 10px Arial,sans-serif!important;padding:0 7px!important;cursor:pointer!important}
#vx-entry .vx-social img{width:15px;height:15px;object-fit:contain;flex:0 0 auto}
#vx-entry .vx-social:hover{background:rgba(255,255,255,.08)!important}
/* Turnstile box of the registration (Cloudflare draws its own frame inside) */
#vx-entry .vx-captcha{display:flex;justify-content:center;margin:0 0 10px}
#vx-entry .vx-captcha:empty{display:none}
#vx-entry .vx-captcha iframe{max-width:100%}
/* phones: tabs raised by 10px; a card taller than a short screen scrolls instead of being cut */
@media (max-width:560px),(pointer:coarse) and (max-height:560px){
  #vx-entry .vx-tabs{margin-top:-10px}
}
#vx-entry .vx-screen[data-screen="login"],#vx-entry .vx-screen[data-screen="register"]{overflow-y:auto!important;align-items:safe center!important}
#vx-entry .vx-screen[data-screen="login"]::after,#vx-entry .vx-screen[data-screen="register"]::after{position:fixed}

/* ===== Character select / create: Vicalox style over Browser2's 3D stage (html.vx-select, set by entry.js) =====
   Browser2 keeps its renderer, actors, idle/selected motions, embers and vignette; only frames, colours and type change. */
html.vx-select{--vx-empire:#d6b468}
/* hidden visually only: Browser2 makes its entry shell inert when the website page's top reaches the header's bottom
   (scrolled into the presentation); with display:none both rects are 0 and the shell would stop taking clicks */
html.vx-select .b2-site-header,html.vx-select .bw-page{visibility:hidden!important;pointer-events:none!important}
/* the empire is chosen on Select Empire (once per account): Browser2's own kingdom picker stays hidden */
html.vx-select .re-empires{display:none!important}
html.vx-select,html.vx-select body{overflow:hidden!important;background:#05070d!important}
/* Vicalox logo in place of the BROWSER2 lockup */
html.vx-select .re-brand{visibility:visible!important}
html.vx-select .re-brand-lockup{width:min(220px,46vw)!important;height:clamp(54px,9vh,86px)!important;margin:0 auto!important;
  background:url('/vicalox/entry/logo.png') center/contain no-repeat!important;filter:drop-shadow(0 6px 18px rgba(0,0,0,.65)) drop-shadow(0 0 22px rgba(214,180,104,.18))}
html.vx-select .re-brand-lockup>*{visibility:hidden!important}
/* atmosphere on top of Browser2's own vignette and embers */
html.vx-select .re-shell>.vx-sparks{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
html.vx-select .re-shell>.vx-sparks .vx-spark{position:absolute;display:block;background-position:center;background-size:contain;background-repeat:no-repeat;opacity:.42;pointer-events:none}
html.vx-select .re-shell>.vx-sparks .s1{width:42vw;max-width:620px;height:32vh;right:-8vw;bottom:-18vh;background-image:url('/vicalox/entry/spark_1.png');animation:vxSparkRise 6s linear infinite}
html.vx-select .re-shell>.vx-sparks .s2{width:28vw;max-width:420px;height:38vh;left:-7vw;bottom:-22vh;background-image:url('/vicalox/entry/spark_2.png');animation:vxSparkRise 7.5s linear infinite 1.5s}
html.vx-select .re-shell>.vx-sparks .s3{width:128px;height:165px;right:17vw;bottom:-140px;background-image:url('/vicalox/entry/spark_3.png');animation:vxSparkRiseShort 5s linear infinite 1.5s}
html.vx-select .re-shell>.vx-sparks .s4{width:min(794px,62vw);height:176px;left:0;bottom:-180px;background-image:url('/vicalox/entry/spark_4.png');animation:vxSparkRiseMid 6s linear infinite}

/* hero name plates under the 3D actors */
html.vx-select .re-hero .re-hero-copy{
  padding:7px 18px 8px!important;min-width:150px;box-sizing:border-box;
  border:1px solid #6f5631!important;background:linear-gradient(180deg,rgba(35,27,17,.92),rgba(9,9,8,.94))!important;
  clip-path:polygon(0 8px,8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px));
  box-shadow:inset 0 0 0 1px rgba(255,219,145,.06)!important;transition:filter .15s ease,border-color .15s ease
}
html.vx-select .re-hero .re-hero-copy::before,html.vx-select .re-hero .re-hero-copy::after{display:none!important}
html.vx-select .re-hero .re-hero-copy b{color:#f0dfb9!important;font:700 15px Georgia,'Times New Roman',serif!important;letter-spacing:.4px!important;text-shadow:0 1px 0 #000!important}
html.vx-select .re-hero .re-hero-copy small{color:#b5a585!important;font:700 9px Arial,sans-serif!important;letter-spacing:.9px!important}
html.vx-select .re-hero:hover .re-hero-copy{filter:brightness(1.12);border-color:#a8864a!important}
html.vx-select .re-hero[data-selected="1"] .re-hero-copy{
  border-color:var(--vx-empire)!important;background:linear-gradient(180deg,rgba(83,61,33,.95),rgba(28,21,13,.96))!important;
  box-shadow:inset 0 0 18px color-mix(in srgb,var(--vx-empire) 22%,transparent),0 0 0 1px rgba(255,221,151,.08)!important;
  animation:vxPlateGlow 2.6s ease-in-out infinite
}
html.vx-select .re-hero[data-selected="1"] .re-hero-copy b{color:#fff1cf!important}
html.vx-select .re-hero[data-selected="1"] .re-hero-copy{border-bottom:2px solid transparent!important;border-image:linear-gradient(90deg,#6fd0ff,var(--vx-empire),#ff4055) 1!important}
@keyframes vxPlateGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.14)}}
html.vx-select .re-hero-medallion{border-radius:50%!important;box-shadow:0 0 0 2px #8b6a35,0 0 14px rgba(214,180,104,.25)!important}
/* empty slot: Vicalox diamond (the frame turns, the + stays upright) */
html.vx-select .re-slot-add{
  isolation:isolate;width:46px!important;height:46px!important;display:grid!important;place-items:center!important;
  border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;
  color:#e7cf95!important;font:400 26px/1 Georgia,serif!important;transition:scale .15s ease,filter .15s ease
}
html.vx-select .re-slot-add::before{content:'';position:absolute;inset:4px;z-index:-1;transform:rotate(45deg);
  border:1px solid #8b6a35;background:linear-gradient(135deg,rgba(72,54,31,.92),rgba(17,14,11,.95));box-shadow:0 0 16px rgba(214,180,104,.16);transition:box-shadow .15s ease,border-color .15s ease}
html.vx-select .re-hero:hover .re-slot-add{scale:1.08;filter:brightness(1.15)}
html.vx-select .re-hero:hover .re-slot-add::before{box-shadow:0 0 22px rgba(214,180,104,.35)}
html.vx-select .re-hero[data-selected="1"] .re-slot-add::before{border-color:var(--vx-empire);box-shadow:0 0 22px color-mix(in srgb,var(--vx-empire) 45%,transparent)}

/* bottom panel: Vicalox frame */
html.vx-select .re-panel{
  border:1px solid #8b6a35!important;border-radius:0!important;
  background:linear-gradient(180deg,rgba(25,18,11,.965),rgba(8,8,7,.965))!important;
  box-shadow:0 18px 38px rgba(0,0,0,.58),inset 0 0 0 1px rgba(255,219,145,.055)!important;
  clip-path:polygon(0 12px,12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px));
  font-family:Arial,Helvetica,sans-serif!important
}
html.vx-select .re-panel::before{content:''!important;position:absolute!important;inset:4px!important;border:1px solid rgba(116,88,47,.55)!important;pointer-events:none!important;
  clip-path:polygon(0 8px,8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px))}
html.vx-select .re-panel b,html.vx-select .re-create-title b{color:#f0dfba!important;font-family:Georgia,'Times New Roman',serif!important}
html.vx-select .re-character-summary-copy span,html.vx-select .re-account-identity b{color:#aaa08d!important;font-family:Arial,sans-serif!important}
html.vx-select .re-link{color:#9f947d!important}
html.vx-select .re-link:hover{color:#e3c27c!important}
/* buttons: Vicalox primary gradient with a sheen, gold secondary, dark danger */
html.vx-select .re-primary{
  position:relative!important;overflow:hidden!important;border:0!important;border-radius:0!important;
  background:linear-gradient(100deg,#6fd0ff 0%,#d7bf75 52%,#ff4055 100%)!important;color:#17130d!important;text-shadow:none!important;
  font:800 11px Arial,sans-serif!important;letter-spacing:1.65px!important;text-transform:uppercase!important;box-shadow:0 6px 18px rgba(0,0,0,.4)!important;
  clip-path:polygon(0 6px,6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%)
}
html.vx-select .re-primary::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-60%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);animation:vxSheen 3.4s ease-in-out infinite}
@keyframes vxSheen{0%,55%{left:-60%}100%{left:130%}}
html.vx-select .re-primary:hover{filter:brightness(1.08)}
html.vx-select .re-ghost{border:1px solid #806539!important;border-radius:0!important;background:linear-gradient(180deg,rgba(92,69,36,.92),rgba(42,32,21,.96))!important;
  color:#ead8b0!important;font:700 10px Arial,sans-serif!important;letter-spacing:.7px!important;text-transform:uppercase!important}
html.vx-select .re-ghost:hover{filter:brightness(1.12);border-color:#b58e4b!important}
html.vx-select .re-danger{border:1px solid #5f543f!important;border-radius:0!important;background:linear-gradient(180deg,#302b23,#171511)!important;color:#d9a79c!important;
  font:700 10px Arial,sans-serif!important;letter-spacing:.7px!important;text-transform:uppercase!important}
html.vx-select .re-panel input{border:1px solid rgba(121,157,188,.34)!important;border-radius:0!important;background:rgba(10,14,22,.72)!important;color:#f2f4f8!important}
html.vx-select .re-panel input:focus{border-color:#6fcdf7!important;box-shadow:0 0 0 1px rgba(111,205,247,.2)!important}
html.vx-select .re-notice{color:#b6ab8e!important;font-family:Arial,sans-serif!important}

/* character board (original select-screen information board) */
.vx-select-board{
  position:fixed;z-index:41;box-sizing:border-box;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr;gap:4px 14px;align-items:center;
  padding:10px 16px 11px;pointer-events:none;color:#eee5d3;font-family:Arial,Helvetica,sans-serif;
  border:1px solid rgba(139,106,53,.85);background:linear-gradient(180deg,rgba(25,18,11,.9),rgba(8,8,7,.92));
  clip-path:polygon(0 10px,10px 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
  box-shadow:inset 0 0 0 1px rgba(255,219,145,.05),inset 0 -1px 0 color-mix(in srgb,var(--vx-empire) 60%,transparent);
  animation:vxBoardIn .35s ease-out
}
.vx-select-board[hidden]{display:none}
@keyframes vxBoardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.vx-select-board .vx-board-title{grid-column:1/-1;color:#ead7ad;font:700 12px Georgia,'Times New Roman',serif;letter-spacing:1.6px;text-transform:uppercase;
  padding-bottom:6px;border-bottom:1px solid rgba(204,171,102,.22)}
.vx-select-board .vx-crest{width:62px;height:66px;display:grid;place-items:center;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--vx-empire) 45%,transparent))}
.vx-select-board .vx-crest i{display:block;width:100%;height:100%;background:center/contain no-repeat}
.vx-select-board .vx-crest.empire-1 i{background-image:url('/vicalox/entry/shinsoo.png')}
.vx-select-board .vx-crest.empire-2 i{background-image:url('/vicalox/entry/chunjo.png')}
.vx-select-board .vx-crest.empire-3 i{background-image:url('/vicalox/entry/jinno.png')}
.vx-select-board .vx-crest.empire-0{display:none}
.vx-select-board .vx-board-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.vx-select-board .vx-board-name{color:#f3e2bd;font:700 20px Georgia,'Times New Roman',serif;text-shadow:0 1px 0 #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vx-select-board .vx-board-line{color:#aaa08d;font-size:10px;letter-spacing:.25px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vx-select-board .vx-board-desc{color:#b9af9c;font-size:10.5px;line-height:1.45;max-width:420px}
.vx-select-board .vx-board-empty{color:#e3d2ae;font:700 16px Georgia,serif}
.vx-select-board .vx-board-hint{color:#9f947d;font-size:10px}
.vx-select-board .vx-gauges{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:5px 12px}
.vx-select-board .vx-gauge{display:grid;grid-template-columns:30px 1fr 28px;align-items:center;gap:6px}
.vx-select-board .vx-gauge b{color:#d4ad61;font:800 9px Arial,sans-serif;letter-spacing:.8px}
.vx-select-board .vx-gauge strong{color:#f3e4c5;font:700 12px Georgia,serif;text-align:right}
.vx-select-board .vx-gauge-track{position:relative;height:6px;background:rgba(0,0,0,.55);border:1px solid rgba(111,86,49,.7);overflow:hidden}
.vx-select-board .vx-gauge-track i{position:absolute;inset:0 auto 0 0;width:calc(var(--share,0) * 100%);transform-origin:left;
  background:linear-gradient(90deg,#8b6a35,#d6b468,color-mix(in srgb,var(--vx-empire) 70%,#fff));animation:vxGauge .6s ease-out}
@keyframes vxGauge{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.vx-select-board.compact{grid-template-rows:auto;padding:7px 12px}
.vx-select-board.compact .vx-board-title,.vx-select-board.compact .vx-board-desc{display:none}
.vx-select-board.compact[data-kind="character"] .vx-board-name{display:none}
.vx-select-board.compact .vx-crest{width:38px;height:40px}
.vx-select-board.compact .vx-board-info{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.vx-select-board.compact .vx-board-name{font-size:16px}
.vx-select-board.compact .vx-gauges{grid-template-columns:repeat(4,minmax(70px,1fr));gap:4px 10px}
.vx-select-board.compact .vx-gauge{grid-template-columns:26px 1fr 20px;gap:4px}
@media (max-width:640px){.vx-select-board .vx-gauges{grid-template-columns:1fr 1fr}.vx-select-board{grid-template-columns:auto 1fr;}.vx-select-board .vx-gauges{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){html.vx-select .re-primary::after,html.vx-select .re-hero[data-selected="1"] .re-hero-copy,html.vx-select .re-shell>.vx-sparks .vx-spark{animation:none}}

/* ===== Loading screen (Browser2 #loading, after Play): Vicalox design; Browser2 still drives texts, bar and phases ===== */
#loading{background:#05070d!important;isolation:isolate}
#loading .l-backdrop{background:linear-gradient(180deg,rgba(4,6,11,.30),rgba(5,7,13,.70) 61%,rgba(3,4,8,.94)),url('/vicalox/entry/main-bg.png') center/cover no-repeat!important;
  animation:vxLoadZoom 24s ease-in-out infinite alternate}
@keyframes vxLoadZoom{from{transform:scale(1)}to{transform:scale(1.06)}}
#loading::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 42%,rgba(22,31,45,.04) 0%,rgba(5,7,13,.2) 45%,rgba(3,4,8,.85) 100%)}
#loading::after{content:'';position:absolute;left:50%;bottom:-31%;width:min(150vw,1500px);aspect-ratio:1/1;transform:translateX(-50%);z-index:0;pointer-events:none;
  background:url('/vicalox/entry/sp_smog.png') center/contain no-repeat;opacity:.28;mix-blend-mode:screen;animation:vxAuthSmog 14s ease-in-out infinite alternate}
#loading>.vx-sparks{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#loading>.vx-sparks .vx-spark{position:absolute;display:block;background-position:center;background-size:contain;background-repeat:no-repeat;opacity:.55}
#loading>.vx-sparks .s1{width:42vw;max-width:620px;height:32vh;right:-8vw;bottom:-18vh;background-image:url('/vicalox/entry/spark_1.png');animation:vxSparkRise 6s linear infinite}
#loading>.vx-sparks .s2{width:28vw;max-width:420px;height:38vh;left:-7vw;bottom:-22vh;background-image:url('/vicalox/entry/spark_2.png');animation:vxSparkRise 7.5s linear infinite 1.5s}
#loading>.vx-sparks .s3{width:128px;height:165px;right:17vw;bottom:-140px;background-image:url('/vicalox/entry/spark_3.png');animation:vxSparkRiseShort 5s linear infinite 1.5s}
#loading>.vx-sparks .s4{width:min(794px,62vw);height:176px;left:0;bottom:-180px;background-image:url('/vicalox/entry/spark_4.png');animation:vxSparkRiseMid 6s linear infinite}
#loading .l-inner{position:relative;z-index:2}
/* Vicalox logo in place of BROWSER2 */
#loading .l-brand{height:clamp(70px,13vh,118px)!important;background:url('/vicalox/entry/logo.png') center/contain no-repeat!important;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(214,180,104,.22));animation:vxLogoBreath 3.2s ease-in-out infinite}
#loading .l-brand>*{visibility:hidden!important}
@keyframes vxLogoBreath{0%,100%{filter:drop-shadow(0 8px 22px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(214,180,104,.16))}50%{filter:drop-shadow(0 8px 22px rgba(0,0,0,.7)) drop-shadow(0 0 32px rgba(214,180,104,.34))}}
#loading .l-sub{color:#ead7ad!important;font:700 13px Georgia,'Times New Roman',serif!important;letter-spacing:2.4px!important;text-transform:uppercase;text-shadow:0 1px 0 #000}
/* hero being loaded (from the select board): crest + name line */
#loading .vx-loading-hero{display:flex;align-items:center;justify-content:center;gap:10px;margin:8px 0 2px;color:#aaa08d;font:11px Arial,sans-serif;letter-spacing:.3px}
#loading .vx-loading-hero b{color:#f3e2bd;font:700 15px Georgia,'Times New Roman',serif;text-shadow:0 1px 0 #000}
#loading .vx-loading-hero .vx-crest{width:30px;height:32px;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--vx-empire,#d6b468) 45%,transparent))}
#loading .vx-loading-hero .vx-crest i{display:block;width:100%;height:100%;background:center/contain no-repeat}
#loading .vx-loading-hero .vx-crest.empire-1 i{background-image:url('/vicalox/entry/shinsoo.png')}
#loading .vx-loading-hero .vx-crest.empire-2 i{background-image:url('/vicalox/entry/chunjo.png')}
#loading .vx-loading-hero .vx-crest.empire-3 i{background-image:url('/vicalox/entry/jinno.png')}
#loading .vx-loading-hero .vx-crest.empire-0{display:none}
/* progress bar: Vicalox frame and gradient */
#loading .l-barwrap{height:14px!important;border:1px solid #8b6a35!important;border-radius:0!important;background:linear-gradient(180deg,rgba(8,8,7,.95),rgba(25,18,11,.95))!important;
  clip-path:polygon(0 4px,4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px));box-shadow:inset 0 0 0 1px rgba(255,219,145,.06)!important}
#loading .l-barwrap::before,#loading .l-barwrap::after{display:none!important}
#loading #l-fill{height:100%!important;border-radius:0!important;background:linear-gradient(90deg,#6fd0ff 0%,#d7bf75 52%,#ff4055 100%)!important;
  box-shadow:0 0 14px rgba(214,180,104,.45)!important}
#loading #l-meta{color:#b6ab8e!important;font:11px Arial,sans-serif!important;letter-spacing:.4px}
/* phases: Vicalox panel */
#loading #l-phases{border:1px solid #8b6a35!important;border-radius:0!important;background:linear-gradient(180deg,rgba(25,18,11,.93),rgba(8,8,7,.95))!important;
  clip-path:polygon(0 10px,10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px));
  box-shadow:inset 0 0 0 1px rgba(255,219,145,.055)!important}
#loading #l-phases li{border-color:rgba(204,171,102,.16)!important}
#loading #l-phases .lp-name{color:#e3d2ae!important;font-family:Georgia,'Times New Roman',serif!important}
#loading #l-phases .lp-files,#loading #l-phases .lp-mb,#loading #l-phases .lp-time{color:#b6ab8e!important;font-family:Arial,sans-serif!important}
#loading #l-phases .lp-cur{color:#8d8370!important;font-family:Arial,sans-serif!important}
#loading #l-retry{border:0!important;border-radius:0!important;background:linear-gradient(100deg,#6fd0ff 0%,#d7bf75 52%,#ff4055 100%)!important;color:#17130d!important;
  font:800 11px Arial,sans-serif!important;letter-spacing:1.4px;text-transform:uppercase;padding:8px 18px!important}
@media (prefers-reduced-motion:reduce){#loading .l-backdrop,#loading .l-brand,#loading::after,#loading>.vx-sparks .vx-spark{animation:none}}

/* select: no name plates under the 3D actors (the bottom panel shows the selected character); kept in the layout, so
   Browser2's stage measurements and the actors' positions stay the same */
html.vx-select .re-hero .re-hero-copy{opacity:0!important;animation:none!important}
/* character deletion request (entry.js deleteRequest, Browser2's confirm dialog look) */
.vx-delete-request .vx-delete-text{margin:10px 0 6px;padding:10px 12px;max-height:40vh;overflow:auto;white-space:pre-wrap;word-break:break-word;
  border:1px solid #6f5631;background:rgba(9,9,8,.7);color:#e9dcc0;font:12px/1.5 ui-monospace,Consolas,monospace;user-select:text}
.vx-delete-request .vx-delete-note{display:block;margin-bottom:12px;color:#b5a585;font:12px/1.4 Arial,sans-serif}
.vx-delete-request .re-confirm-actions{flex-wrap:wrap}
.vx-delete-request .re-confirm-actions a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
/* create: gender switch a little higher (the name plates under the actors are hidden) */
html.vx-select[data-vx-mode="create"] .re-stage-gender[data-positioned="1"]{translate:0 -18px}
/* Vicalox logo in place of the split BROWSER2 wordmark: connection lost / restart card, game guide banner, site header */
#server-connection-blocker .l-brand{height:clamp(60px,11vh,100px)!important;background:url('/vicalox/entry/logo.png') center/contain no-repeat!important;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(214,180,104,.2))}
#server-connection-blocker .l-brand>*{visibility:hidden!important}
.g2-welcome-logo h1,.b2-site-brand{background:url('/vicalox/entry/logo.png') center/contain no-repeat!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:transparent!important}
.g2-welcome-logo h1{min-width:min(260px,60vw);min-height:clamp(48px,8vh,80px)}
.b2-site-brand{min-width:110px;min-height:34px}
.g2-welcome-logo h1>*,.b2-site-brand>*{visibility:hidden!important}
/* in game: no Discord / Dungeons in the system menu (Browser2 SystemDialog, fixed 30px rows from 17px) and no Bugs (forum) /
   Discord launchers under the minimap. The rows after them move up two places and the dialog frame is 60px shorter. */
.ymir-forum-launcher,.ymir-discord-launcher{display:none!important}
[data-ui-name="SystemDialog"] [data-ui-name="discord_button"],[data-ui-name="SystemDialog"] [data-ui-name="dungeons_button"]{display:none!important}
[data-ui-name="SystemDialog"] [data-ui-name="vote_button"]{top:47px!important}
[data-ui-name="SystemDialog"] [data-ui-name="movechannel_button"]{top:77px!important}
[data-ui-name="SystemDialog"] [data-ui-name="game_option_button"]{top:107px!important}
[data-ui-name="SystemDialog"] [data-ui-name="change_button"]{top:137px!important}
[data-ui-name="SystemDialog"] [data-ui-name="logout_button"]{top:167px!important}
[data-ui-name="SystemDialog"] [data-ui-name="cancel_button"]{top:207px!important}
[data-ui-name="SystemDialog"],[data-ui-name="SystemDialog"]>[data-ui-name="board"]{height:248px!important}
[data-ui-name="SystemDialog"]>[data-ui-name="board"]>:is([data-ui-chrome="line.b"],[data-ui-chrome="corner.lb"],[data-ui-chrome="corner.rb"]){top:232px!important}
[data-ui-name="SystemDialog"]>[data-ui-name="board"]>:is([data-ui-chrome="line.l"],[data-ui-chrome="line.r"],[data-ui-chrome="base"]){height:216px!important}

/* Browser2 story companion chip (pet bubble with "▶ 87 m" towards Browser2 story objectives that do not exist on VicaloX) */
[data-story-bubble]{display:none!important}