/* === assets/style.css === */ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:"";--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}@layer theme{:root,:host{--font-sans:"Nunito", "Segoe UI", system-ui, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-500:oklch(63.7% .237 25.331);--color-zinc-50:oklch(98.5% 0 none);--color-zinc-400:oklch(70.5% .015 286.067);--color-zinc-500:oklch(55.2% .016 285.938);--color-zinc-900:oklch(21% .006 285.885);--color-zinc-950:oklch(14.1% .005 285.823);--color-neutral-100:oklch(97% 0 none);--color-neutral-300:oklch(87% 0 none);--color-neutral-500:oklch(55.6% 0 none);--color-neutral-700:oklch(37.1% 0 none);--color-neutral-900:oklch(20.5% 0 none);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-3xl:48rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-8xl:6rem;--text-8xl--line-height:1;--text-9xl:8rem;--text-9xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--tracking-wide:.025em;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--radius-xs:.125rem;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:1rem;--ease-out:cubic-bezier(0, 0, .2, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-ink:#0c0a08;--color-panel:#14110d;--color-elevated:#1e1a14;--color-cream:#e8dcc8;--color-muted:#9a8f7c;--color-brass:#c4a574;--color-line:#3a3228;--color-blood:#8b2e2e;--color-hp:#3cb85a;--color-mp:#4a90c4;--font-display:"Nunito", "Segoe UI", system-ui, sans-serif;--font-brush:"Nunito", "Segoe UI", system-ui, sans-serif}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}button:not(:disabled),[role=button]:not(:disabled){cursor:pointer}html,body,#app{background:var(--color-ink);min-height:100dvh;color:var(--color-cream)}body{font-family:var(--font-sans);line-height:1.5}*{-webkit-tap-highlight-color:transparent}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.inset-1{inset:var(--spacing)}.inset-x-0{inset-inline:0}.inset-y-0{inset-block:0}.-top-1{top:calc(var(--spacing) * -1)}.top-0{top:0}.top-1\/3{top:33.3333%}.top-12{top:calc(var(--spacing) * 12)}.top-24{top:calc(var(--spacing) * 24)}.-right-0\.5{right:calc(var(--spacing) * -.5)}.right-0{right:0}.right-1{right:var(--spacing)}.right-2{right:calc(var(--spacing) * 2)}.right-3{right:calc(var(--spacing) * 3)}.right-4{right:calc(var(--spacing) * 4)}.-bottom-0\.5{bottom:calc(var(--spacing) * -.5)}.-bottom-1{bottom:calc(var(--spacing) * -1)}.bottom-0{bottom:0}.bottom-3{bottom:calc(var(--spacing) * 3)}.bottom-20{bottom:calc(var(--spacing) * 20)}.bottom-24{bottom:calc(var(--spacing) * 24)}.bottom-40{bottom:calc(var(--spacing) * 40)}.-left-1{left:calc(var(--spacing) * -1)}.left-0{left:0}.left-1{left:var(--spacing)}.left-1\/2{left:50%}.left-2{left:calc(var(--spacing) * 2)}.left-3{left:calc(var(--spacing) * 3)}.left-4{left:calc(var(--spacing) * 4)}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.m-2{margin:calc(var(--spacing) * 2)}.mx-auto{margin-inline:auto}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mb-1{margin-bottom:var(--spacing)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-5{margin-bottom:calc(var(--spacing) * 5)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.ml-px{margin-left:1px}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.size-11{width:calc(var(--spacing) * 11);height:calc(var(--spacing) * 11)}.size-12{width:calc(var(--spacing) * 12);height:calc(var(--spacing) * 12)}.size-14{width:calc(var(--spacing) * 14);height:calc(var(--spacing) * 14)}.size-16{width:calc(var(--spacing) * 16);height:calc(var(--spacing) * 16)}.size-20{width:calc(var(--spacing) * 20);height:calc(var(--spacing) * 20)}.size-28{width:calc(var(--spacing) * 28);height:calc(var(--spacing) * 28)}.h-2{height:calc(var(--spacing) * 2)}.h-3{height:calc(var(--spacing) * 3)}.h-5{height:calc(var(--spacing) * 5)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-11{height:calc(var(--spacing) * 11)}.h-16{height:calc(var(--spacing) * 16)}.h-28{height:calc(var(--spacing) * 28)}.h-40{height:calc(var(--spacing) * 40)}.h-72{height:calc(var(--spacing) * 72)}.h-dvh{height:100dvh}.h-full{height:100%}.h-px{height:1px}.max-h-\[420px\]{max-height:420px}.max-h-\[min\(640px\,calc\(92dvh-64px\)\)\]{max-height:min(640px,92dvh - 64px)}.max-h-\[min\(720px\,92dvh\)\]{max-height:min(720px,92dvh)}.min-h-0{min-height:0}.min-h-11{min-height:calc(var(--spacing) * 11)}.min-h-screen{min-height:100vh}.w-8{width:calc(var(--spacing) * 8)}.w-16{width:calc(var(--spacing) * 16)}.w-24{width:calc(var(--spacing) * 24)}.w-28{width:calc(var(--spacing) * 28)}.w-44{width:calc(var(--spacing) * 44)}.w-\[min\(100\%-12px\,420px\)\]{width:min(100% - 12px,420px)}.w-\[min\(100\%-12px\,860px\)\]{width:min(100% - 12px,860px)}.w-\[min\(100\%-16px\,250px\)\]{width:min(100% - 16px,250px)}.w-full{width:100%}.max-w-3xl{max-width:var(--container-3xl)}.max-w-\[220px\]{max-width:220px}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.max-w-none{max-width:none}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.min-w-0{min-width:0}.min-w-10{min-width:calc(var(--spacing) * 10)}.min-w-14{min-width:calc(var(--spacing) * 14)}.flex-1{flex:1}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.scale-\[0\.25\]{scale:.25}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-\[18px_1fr_28px_28px_28px\]{grid-template-columns:18px 1fr 28px 28px 28px}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}:where(.space-y-0\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-1{column-gap:var(--spacing)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:2147483647px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-blood\/50{border-color:#8b2e2e80}@supports (color:color-mix(in lab, red, red)){.border-blood\/50{border-color:color-mix(in oklab, var(--color-blood) 50%, transparent)}}.border-brass{border-color:var(--color-brass)}.border-brass\/20{border-color:#c4a57433}@supports (color:color-mix(in lab, red, red)){.border-brass\/20{border-color:color-mix(in oklab, var(--color-brass) 20%, transparent)}}.border-brass\/25{border-color:#c4a57440}@supports (color:color-mix(in lab, red, red)){.border-brass\/25{border-color:color-mix(in oklab, var(--color-brass) 25%, transparent)}}.border-brass\/30{border-color:#c4a5744d}@supports (color:color-mix(in lab, red, red)){.border-brass\/30{border-color:color-mix(in oklab, var(--color-brass) 30%, transparent)}}.border-brass\/35{border-color:#c4a57459}@supports (color:color-mix(in lab, red, red)){.border-brass\/35{border-color:color-mix(in oklab, var(--color-brass) 35%, transparent)}}.border-brass\/40{border-color:#c4a57466}@supports (color:color-mix(in lab, red, red)){.border-brass\/40{border-color:color-mix(in oklab, var(--color-brass) 40%, transparent)}}.border-brass\/45{border-color:#c4a57473}@supports (color:color-mix(in lab, red, red)){.border-brass\/45{border-color:color-mix(in oklab, var(--color-brass) 45%, transparent)}}.border-brass\/50{border-color:#c4a57480}@supports (color:color-mix(in lab, red, red)){.border-brass\/50{border-color:color-mix(in oklab, var(--color-brass) 50%, transparent)}}.border-ink{border-color:var(--color-ink)}.border-line{border-color:var(--color-line)}.border-neutral-300{border-color:var(--color-neutral-300)}.bg-black{background-color:var(--color-black)}.bg-black\/10{background-color:#0000001a}@supports (color:color-mix(in lab, red, red)){.bg-black\/10{background-color:color-mix(in oklab, var(--color-black) 10%, transparent)}}.bg-brass{background-color:var(--color-brass)}.bg-brass\/15{background-color:#c4a57426}@supports (color:color-mix(in lab, red, red)){.bg-brass\/15{background-color:color-mix(in oklab, var(--color-brass) 15%, transparent)}}.bg-brass\/50{background-color:#c4a57480}@supports (color:color-mix(in lab, red, red)){.bg-brass\/50{background-color:color-mix(in oklab, var(--color-brass) 50%, transparent)}}.bg-elevated{background-color:var(--color-elevated)}.bg-ink{background-color:var(--color-ink)}.bg-ink\/40{background-color:#0c0a0866}@supports (color:color-mix(in lab, red, red)){.bg-ink\/40{background-color:color-mix(in oklab, var(--color-ink) 40%, transparent)}}.bg-ink\/50{background-color:#0c0a0880}@supports (color:color-mix(in lab, red, red)){.bg-ink\/50{background-color:color-mix(in oklab, var(--color-ink) 50%, transparent)}}.bg-ink\/55{background-color:#0c0a088c}@supports (color:color-mix(in lab, red, red)){.bg-ink\/55{background-color:color-mix(in oklab, var(--color-ink) 55%, transparent)}}.bg-ink\/70{background-color:#0c0a08b3}@supports (color:color-mix(in lab, red, red)){.bg-ink\/70{background-color:color-mix(in oklab, var(--color-ink) 70%, transparent)}}.bg-ink\/80{background-color:#0c0a08cc}@supports (color:color-mix(in lab, red, red)){.bg-ink\/80{background-color:color-mix(in oklab, var(--color-ink) 80%, transparent)}}.bg-ink\/85{background-color:#0c0a08d9}@supports (color:color-mix(in lab, red, red)){.bg-ink\/85{background-color:color-mix(in oklab, var(--color-ink) 85%, transparent)}}.bg-ink\/88{background-color:#0c0a08e0}@supports (color:color-mix(in lab, red, red)){.bg-ink\/88{background-color:color-mix(in oklab, var(--color-ink) 88%, transparent)}}.bg-ink\/90{background-color:#0c0a08e6}@supports (color:color-mix(in lab, red, red)){.bg-ink\/90{background-color:color-mix(in oklab, var(--color-ink) 90%, transparent)}}.bg-ink\/95{background-color:#0c0a08f2}@supports (color:color-mix(in lab, red, red)){.bg-ink\/95{background-color:color-mix(in oklab, var(--color-ink) 95%, transparent)}}.bg-panel{background-color:var(--color-panel)}.bg-zinc-50{background-color:var(--color-zinc-50)}.bg-gradient-to-t{--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-ink{--tw-gradient-from:var(--color-ink);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-ink\/50{--tw-gradient-via:#0c0a0880}@supports (color:color-mix(in lab, red, red)){.via-ink\/50{--tw-gradient-via:color-mix(in oklab, var(--color-ink) 50%, transparent)}}.via-ink\/50{--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-ink\/25{--tw-gradient-to:#0c0a0840}@supports (color:color-mix(in lab, red, red)){.to-ink\/25{--tw-gradient-to:color-mix(in oklab, var(--color-ink) 25%, transparent)}}.to-ink\/25{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.object-\[center_18\%\]{object-position:center 18%}.object-bottom{object-position:bottom}.object-top{object-position:top}.p-1{padding:var(--spacing)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.p-\[16px\]{padding:16px}.px-1{padding-inline:var(--spacing)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-px{padding-block:1px}.pt-1{padding-top:var(--spacing)}.pr-3\.5{padding-right:calc(var(--spacing) * 3.5)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.pb-\[max\(4px\,env\(safe-area-inset-bottom\)\)\]{padding-bottom:max(4px, env(safe-area-inset-bottom))}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-4{padding-left:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-brush{font-family:var(--font-brush)}.font-display{font-family:var(--font-display)}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-8xl{font-size:var(--text-8xl);line-height:var(--tw-leading,var(--text-8xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[13px\]{font-size:13px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.2em\]{--tw-tracking:.2em;letter-spacing:.2em}.tracking-\[0\.18em\]{--tw-tracking:.18em;letter-spacing:.18em}.tracking-\[0\.25em\]{--tw-tracking:.25em;letter-spacing:.25em}.tracking-\[0\.32em\]{--tw-tracking:.32em;letter-spacing:.32em}.tracking-\[0\.48em\]{--tw-tracking:.48em;letter-spacing:.48em}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.text-balance{text-wrap:balance}.text-wrap{text-wrap:wrap}.break-words{overflow-wrap:break-word}.text-\[\#e08a7a\]{color:#e08a7a}.text-blood{color:var(--color-blood)}.text-brass{color:var(--color-brass)}.text-cream{color:var(--color-cream)}.text-ink{color:var(--color-ink)}.text-muted{color:var(--color-muted)}.text-neutral-500{color:var(--color-neutral-500)}.text-red-500{color:var(--color-red-500)}.text-white{color:var(--color-white)}.text-zinc-500{color:var(--color-zinc-500)}.text-zinc-900{color:var(--color-zinc-900)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-70{opacity:.7}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_-8px_28px_rgba\(0\,0\,0\,0\.4\)\]{--tw-shadow:0 -8px 28px var(--tw-shadow-color,#0006);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_0_0_1px_var\(--color-brass\)\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,var(--color-brass));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_24px_60px_rgba\(0\,0\,0\,0\.55\)\]{--tw-shadow:0 24px 60px var(--tw-shadow-color,#0000008c);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-brass\/30{--tw-ring-color:#c4a5744d}@supports (color:color-mix(in lab, red, red)){.ring-brass\/30{--tw-ring-color:color-mix(in oklab, var(--color-brass) 30%, transparent)}}.ring-brass\/40{--tw-ring-color:#c4a57466}@supports (color:color-mix(in lab, red, red)){.ring-brass\/40{--tw-ring-color:color-mix(in oklab, var(--color-brass) 40%, transparent)}}.outline,.outline-1{outline-style:var(--tw-outline-style);outline-width:1px}.-outline-offset-1{outline-offset:calc(1px * -1)}.outline-black\/10{outline-color:#0000001a}@supports (color:color-mix(in lab, red, red)){.outline-black\/10{outline-color:color-mix(in oklab, var(--color-black) 10%, transparent)}}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.blur-\[4px\]{--tw-blur:blur(4px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.blur-none{--tw-blur: ;filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.sepia{--tw-sepia:sepia(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-\[2px\]{--tw-backdrop-blur:blur(2px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[box-shadow\]{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[opacity\,filter\,scale\]{transition-property:opacity,filter,scale;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[scale\,background-color\]{transition-property:scale,background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[scale\,opacity\,filter\]{transition-property:scale,opacity,filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-\[cubic-bezier\(0\.2\,0\,0\,1\)\]{--tw-ease:cubic-bezier(.2,0,0,1);transition-timing-function:cubic-bezier(.2,0,0,1)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style:none;outline-style:none}.paused{animation-play-state:paused}.running{animation-play-state:running}.zoom-in{--tw-enter-scale:0}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:top-1\/2:after{content:var(--tw-content);top:50%}.after\:left-1\/2:after{content:var(--tw-content);left:50%}.after\:size-10:after{content:var(--tw-content);width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.after\:-translate-1\/2:after{content:var(--tw-content);--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}@media (hover:hover){.hover\:border-brass:hover{border-color:var(--color-brass)}.hover\:bg-blood\/10:hover{background-color:#8b2e2e1a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-blood\/10:hover{background-color:color-mix(in oklab, var(--color-blood) 10%, transparent)}}.hover\:bg-brass\/25:hover{background-color:#c4a57440}@supports (color:color-mix(in lab, red, red)){.hover\:bg-brass\/25:hover{background-color:color-mix(in oklab, var(--color-brass) 25%, transparent)}}.hover\:bg-elevated:hover{background-color:var(--color-elevated)}.hover\:bg-neutral-100:hover{background-color:var(--color-neutral-100)}.hover\:text-cream:hover{color:var(--color-cream)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-90:hover{opacity:.9}}.focus\:border-brass:focus{border-color:var(--color-brass)}.active\:scale-\[0\.96\]:active,.active\:not-disabled\:scale-\[0\.96\]:active:not(:disabled){scale:.96}.disabled\:cursor-wait:disabled{cursor:wait}.disabled\:no-underline:disabled{text-decoration-line:none}.disabled\:opacity-40:disabled{opacity:.4}@media (width>=40rem){.sm\:top-12{top:calc(var(--spacing) * 12)}.sm\:top-14{top:calc(var(--spacing) * 14)}.sm\:right-auto{right:auto}.sm\:bottom-24{bottom:calc(var(--spacing) * 24)}.sm\:bottom-28{bottom:calc(var(--spacing) * 28)}.sm\:left-1\/2{left:50%}.sm\:col-span-2{grid-column:span 2/span 2}.sm\:flex{display:flex}.sm\:inline{display:inline}.sm\:size-12{width:calc(var(--spacing) * 12);height:calc(var(--spacing) * 12)}.sm\:size-16{width:calc(var(--spacing) * 16);height:calc(var(--spacing) * 16)}.sm\:size-20{width:calc(var(--spacing) * 20);height:calc(var(--spacing) * 20)}.sm\:size-24{width:calc(var(--spacing) * 24);height:calc(var(--spacing) * 24)}.sm\:h-80{height:calc(var(--spacing) * 80)}.sm\:w-52{width:calc(var(--spacing) * 52)}.sm\:w-\[min\(100\%-16px\,460px\)\]{width:min(100% - 16px,460px)}.sm\:-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}}@media (width>=48rem){.md\:block{display:block}.md\:size-\[5\.5rem\]{width:5.5rem;height:5.5rem}.md\:max-w-4xl{max-width:var(--container-4xl)}.md\:max-w-xl{max-width:var(--container-xl)}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:grid-cols-\[1fr_240px\]{grid-template-columns:1fr 240px}.md\:gap-3{gap:calc(var(--spacing) * 3)}.md\:gap-4{gap:calc(var(--spacing) * 4)}.md\:px-8{padding-inline:calc(var(--spacing) * 8)}.md\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.md\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.md\:text-9xl{font-size:var(--text-9xl);line-height:var(--tw-leading,var(--text-9xl--line-height))}}@media (width>=64rem){.lg\:grid-cols-\[1fr_200px\]{grid-template-columns:1fr 200px}.lg\:grid-cols-\[1fr_280px\]{grid-template-columns:1fr 280px}}@media (prefers-color-scheme:dark){.dark\:border-neutral-700{border-color:var(--color-neutral-700)}.dark\:bg-white\/20{background-color:#fff3}@supports (color:color-mix(in lab, red, red)){.dark\:bg-white\/20{background-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.dark\:bg-zinc-950{background-color:var(--color-zinc-950)}.dark\:text-zinc-50{color:var(--color-zinc-50)}.dark\:text-zinc-400{color:var(--color-zinc-400)}.dark\:outline-white\/10{outline-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.dark\:outline-white\/10{outline-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}@media (hover:hover){.dark\:hover\:bg-neutral-900:hover{background-color:var(--color-neutral-900)}}}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}.title-ink{text-shadow:0 1px #c4a57466,0 10px 32px #0c0a08b3}@supports (color:color-mix(in lab, red, red)){.title-ink{text-shadow:0 1px 0 color-mix(in oklab, var(--color-brass) 40%, transparent), 0 10px 32px color-mix(in oklab, var(--color-ink) 70%, transparent)}}.gold-ring{box-shadow:0 0 0 2px var(--color-brass), 0 0 10px #c4a5748c}@supports (color:color-mix(in lab, red, red)){.gold-ring{box-shadow:0 0 0 2px var(--color-brass), 0 0 10px color-mix(in oklab, var(--color-brass) 55%, transparent)}}.gold-led{animation:1.6s ease-in-out infinite gold-led;box-shadow:0 0 0 2px #d4b15a,0 0 10px #d4b15a,0 0 18px oklab(86.6404% .0000541806 .113499/.7)}.rainbow-led{animation:2.4s linear infinite rainbow-led}@keyframes gold-led{0%,to{box-shadow:0 0 0 2px #d4b15a,0 0 8px #d4b15a}50%{box-shadow:0 0 0 2px #f4e2a0,0 0 16px #ffd76a,0 0 28px #d4b15a}}@keyframes rainbow-led{0%{box-shadow:0 0 0 2px #e07038,0 0 12px #e07038}20%{box-shadow:0 0 0 2px #d4b15a,0 0 12px #d4b15a}40%{box-shadow:0 0 0 2px #6fbf74,0 0 12px #6fbf74}60%{box-shadow:0 0 0 2px #5aa6e8,0 0 12px #5aa6e8}80%{box-shadow:0 0 0 2px #c978c0,0 0 12px #c978c0}to{box-shadow:0 0 0 2px #e07038,0 0 12px #e07038}}.jx-joystick{display:none}@media (pointer:coarse){.jx-joystick{display:block}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes pulse{50%{opacity:.5}} /*$vite$:1*/ /* Modern MMORPG HUD - inspired by the supplied reference UI */ @media (max-width:900px){} @media (max-width:640px){} @media (max-width:900px){} /* === Responsive reference-layout HUD patch === */ .jx-topbar{height:clamp(46px,4.1vh,62px)!important;padding-left:clamp(14px,3vw,28px)!important;padding-right:clamp(14px,3vw,28px)!important;gap:clamp(8px,1.8vw,18px)!important;border-bottom:1px solid rgba(196,165,116,.42)!important;} .jx-player-hud{margin:clamp(7px,1vh,12px) clamp(12px,2.4vw,24px)!important;width:calc(100% - clamp(24px,4.8vw,48px))!important;max-width:none!important;gap:clamp(10px,2vw,18px)!important;} .jx-player-hud>button{width:clamp(62px,11vw,86px)!important;height:clamp(62px,11vw,86px)!important;} .jx-player-hud .font-display.text-xl{font-size:clamp(18px,3vw,28px)!important;} .jx-player-hud .text-xs{font-size:clamp(10px,1.5vw,13px)!important;} .jx-player-hud .mt-1{margin-top:2px!important;} .jx-player-hud [role="progressbar"],.jx-player-hud>div>div>div{max-height:10px;} .jx-minimap{top:clamp(8px,1.2vh,16px)!important;right:clamp(8px,1.4vw,18px)!important;width:clamp(198px,29vw,260px)!important;z-index:40!important;} .jx-minimap-image{height:clamp(138px,18vw,178px)!important;} @media (max-width:640px){ .jx-topbar{height:44px!important;} .jx-player-hud>button{width:62px!important;height:62px!important;} .jx-minimap{width:196px!important;} .jx-minimap-image{height:132px!important;} } @media (min-width:641px) and (max-width:1100px){ } @media (max-width:640px){} /* === Final device-aware HUD / minimap / modal layout === */ :root{--jx-safe-top:env(safe-area-inset-top,0px);--jx-safe-bottom:env(safe-area-inset-bottom,0px)} html,body,#app{width:100%;height:100%;overflow:hidden} /* Top HUD: reserve a clean zone for the character information and keep the minimap out of it. */ .jx-topbar{position:relative!important;z-index:4!important} .jx-player-hud{position:relative!important;z-index:3!important;width:min(calc(100% - 24px),520px)!important;max-width:calc(100% - 24px)!important;margin-top:clamp(6px,1vh,12px)!important} .jx-player-hud>div{min-width:0!important} .jx-player-hud [role="progressbar"],.jx-player-hud>div>div>div{max-width:100%!important;height:clamp(6px,1.05vw,10px)!important;max-height:10px!important} /* Minimap is intentionally lower than the header/player bars. */ .jx-minimap{top:clamp(58px,7.5vh,88px)!important;right:clamp(8px,1.6vw,20px)!important;width:clamp(170px,24vw,238px)!important;z-index:41!important} .jx-minimap-image{height:clamp(112px,15vw,158px)!important} /* Bottom menu: seven primary buttons always stay visible; settings remains separate. */ /* Potions sit above the chat and below the seven-button row without covering it. */ /* Modal windows scale with the viewport instead of keeping desktop dimensions on phones. */ .z-30.flex.items-center.justify-center.bg-ink\/55{z-index:80!important;padding:clamp(8px,2vw,24px)!important} .z-30.flex.items-center.justify-center.bg-ink\/55>div{width:min(100%,900px)!important;max-width:min(900px,94vw)!important;max-height:min(88dvh,820px)!important;border-radius:clamp(14px,2vw,20px)!important} .z-30.flex.items-center.justify-center.bg-ink\/55>div>header{min-height:clamp(48px,6vh,62px)!important;padding:clamp(9px,1.7vw,14px) clamp(12px,2.2vw,20px)!important} .z-30.flex.items-center.justify-center.bg-ink\/55>div>header h2{font-size:clamp(18px,3vw,28px)!important} .z-30.flex.items-center.justify-center.bg-ink\/55>div>header button{height:clamp(36px,5vw,44px)!important;min-width:clamp(64px,11vw,88px)!important;font-size:clamp(12px,1.8vw,15px)!important} .z-30.flex.items-center.justify-center.bg-ink\/55>div>div{max-height:calc(88dvh - 62px)!important;padding:clamp(12px,2vw,24px)!important} @media (max-width:640px){ .jx-topbar{height:42px!important;padding-left:10px!important;padding-right:10px!important;gap:6px!important} .jx-player-hud{width:calc(100% - 16px)!important;max-width:calc(100% - 16px)!important;margin:5px 8px 0!important;gap:7px!important} .jx-player-hud>button{width:54px!important;height:54px!important} .jx-player-hud .font-display.text-xl{font-size:18px!important} .jx-player-hud .text-xs{font-size:9px!important} .jx-player-hud [role="progressbar"],.jx-player-hud>div>div>div{height:7px!important} .jx-minimap{top:48px!important;right:6px!important;width:176px!important} .jx-minimap-image{height:108px!important} .z-30.flex.items-center.justify-center.bg-ink\/55{padding:8px!important;align-items:center!important} .z-30.flex.items-center.justify-center.bg-ink\/55>div{width:100%!important;max-width:100%!important;max-height:84dvh!important;border-radius:15px!important} .z-30.flex.items-center.justify-center.bg-ink\/55>div>header{min-height:48px!important;padding:9px 12px!important} .z-30.flex.items-center.justify-center.bg-ink\/55>div>header h2{font-size:21px!important} .z-30.flex.items-center.justify-center.bg-ink\/55>div>header button{height:36px!important;min-width:66px!important;padding:0 10px!important;font-size:12px!important} .z-30.flex.items-center.justify-center.bg-ink\/55>div>div{max-height:calc(84dvh - 48px)!important;padding:12px!important} } @media (min-width:641px) and (max-width:1100px){ .jx-minimap{top:62px!important;width:210px!important} .jx-minimap-image{height:138px!important} } @media (min-width:1101px){ .jx-minimap{top:64px!important;width:238px!important} } /* === HUD REFERENCE v3 — exact mobile portrait composition === Reference: 707x1536 portrait screenshot supplied by the player. Coordinate system: viewport anchors, not world/canvas coordinates. */ :root{ --hud-safe-top: max(6px, env(safe-area-inset-top, 0px)); --hud-safe-bottom: max(8px, env(safe-area-inset-bottom, 0px)); --hud-map-w: clamp(206px, 32.5vw, 320px); --hud-gutter: clamp(8px, 1.7vw, 24px); } /* CENTER / game viewport: HUD must never change the playable world transform. */ /* TOP-LEFT: compact VIP/combat strip + character information. The right edge is reserved for the minimap, preventing HP/MP overlap. */ .jx-topbar{ height: clamp(46px, 4.2dvh, 62px) !important; padding-inline: var(--hud-gutter) !important; padding-top: var(--hud-safe-top) !important; box-sizing: content-box !important; z-index: 51 !important; } .jx-player-hud{ width: min(calc(100% - var(--hud-map-w) - var(--hud-gutter) - 8px), 520px) !important; max-width: none !important; margin: clamp(7px, .9dvh, 12px) var(--hud-gutter) 0 !important; gap: clamp(7px, 1.2vw, 18px) !important; z-index: 50 !important; pointer-events: none !important; } .jx-player-hud > button{ width: clamp(58px, 8.4vw, 86px) !important; height: clamp(58px, 8.4vw, 86px) !important; flex: 0 0 auto !important; } .jx-player-hud .font-display.text-xl{font-size: clamp(18px, 2.7vw, 28px) !important; line-height: 1.02 !important;} .jx-player-hud .text-xs{font-size: clamp(9px, 1.35vw, 13px) !important; line-height: 1.05 !important;} .jx-player-hud [role="progressbar"], .jx-player-hud > div > div > div{ height: clamp(6px, .72vw, 9px) !important; max-height: 9px !important; margin-top: 2px !important; } /* TOP-RIGHT: minimap shares the header row, never the player-stat column. */ .jx-minimap{ position: absolute !important; top: calc(var(--hud-safe-top) + 2px) !important; right: var(--hud-gutter) !important; width: var(--hud-map-w) !important; z-index: 60 !important; transform: none !important; transform-origin: top right !important; } .jx-minimap-image{ height: clamp(122px, 18vw, 205px) !important; aspect-ratio: 1.32 / 1 !important; object-fit: cover !important; } /* BOTTOM-CENTER: seven primary buttons are one stable row. They stay above potions/chat and are never wrapped away. */ /* BOTTOM-LEFT: potion belt sits in its own lane, never behind the menu. */ /* BOTTOM-RIGHT: settings is aligned to the potion/chat boundary. */ /* BOTTOM: chat is the final dock and always remains below all controls. */ /* PHONE PORTRAIT: reproduce the supplied composition without losing any button. */ @media (max-width: 760px) and (orientation: portrait){ :root{--hud-map-w: clamp(190px, 31vw, 224px); --hud-gutter: 8px;} .jx-topbar{height: 43px !important; padding-inline: 10px !important;} .jx-player-hud{ width: calc(100% - var(--hud-map-w) - 18px) !important; margin: 6px 8px 0 !important; gap: 7px !important; } .jx-player-hud > button{width: 58px !important; height: 58px !important;} .jx-player-hud .font-display.text-xl{font-size: 19px !important;} .jx-player-hud .text-xs{font-size: 9px !important;} .jx-player-hud [role="progressbar"], .jx-player-hud > div > div > div{height: 7px !important;} .jx-minimap{top: 6px !important; right: 6px !important; width: var(--hud-map-w) !important;} .jx-minimap-image{height: clamp(104px, 16vw, 132px) !important;} } /* PHONE LANDSCAPE: keep the same anchors but use less vertical reserve. */ @media (max-width: 900px) and (orientation: landscape){ .jx-minimap{top: 6px !important; width: 180px !important;} .jx-minimap-image{height: 110px !important;} } /* TABLET / iPad: enlarge controls while preserving the reference anchors. */ @media (min-width: 761px) and (max-width: 1100px){ } /* DESKTOP: generous spacing, larger map and buttons, same five-zone layout. */ @media (min-width: 1101px){ } /* === HUD REFERENCE V4 — lock to supplied 707x1536 reference === The supplied reference is treated as the canonical portrait composition. HUD elements are viewport-anchored overlays; the world/camera canvas is untouched. */ :root{ --ref-gutter: 14px; --ref-map-w: 238px; --ref-map-h: 219px; --ref-actions-bottom: 286px; --ref-potions-bottom: 208px; --ref-settings-bottom: 204px; } /* The reference shows the map world behind the top HUD; do not paint a black block. */ /* TOP-LEFT: VIP row + character block. */ .jx-topbar{ height: 58px !important; padding: 8px 14px 0 !important; box-sizing: border-box !important; } .jx-player-hud{ position: absolute !important; left: 14px !important; top: 66px !important; margin: 0 !important; width: calc(100% - var(--ref-map-w) - 30px) !important; max-width: 430px !important; gap: 10px !important; z-index: 52 !important; } .jx-player-hud > button{ width: 106px !important; height: 106px !important; flex: 0 0 106px !important; } .jx-player-hud .font-display.text-xl{font-size: 30px !important; line-height: 1 !important;} .jx-player-hud .text-xs{font-size: 13px !important; line-height: 1.05 !important;} .jx-player-hud [role="progressbar"], .jx-player-hud > div > div > div{ height: 8px !important; max-height: 8px !important; margin-top: 2px !important; } /* TOP-RIGHT: exact reference minimap footprint. */ .jx-minimap{ top: 0 !important; right: 10px !important; width: var(--ref-map-w) !important; z-index: 60 !important; transform: none !important; } .jx-minimap-image{ height: 174px !important; aspect-ratio: auto !important; object-fit: cover !important; } /* BOTTOM-CENTER: seven controls, evenly distributed across the full viewport. */ /* BOTTOM-LEFT: potion row has its own lane. */ /* BOTTOM-RIGHT: settings is independent from the seven primary controls. */ /* BOTTOM: chat dock remains the lowest interactive layer. */ /* PHONE PORTRAIT: canonical reference geometry, scaled down only when needed. */ @media (max-width: 760px) and (orientation: portrait){ :root{ --ref-gutter: clamp(8px, 2vw, 14px); --ref-map-w: clamp(190px, 33.7vw, 238px); --ref-actions-bottom: clamp(220px, 18.6dvh, 286px); --ref-potions-bottom: clamp(170px, 13.6dvh, 208px); --ref-settings-bottom: clamp(166px, 13.3dvh, 204px); } .jx-topbar{height: 58px !important; padding: 8px var(--ref-gutter) 0 !important;} .jx-player-hud{ left: var(--ref-gutter) !important; top: 66px !important; width: calc(100% - var(--ref-map-w) - 22px) !important; max-width: none !important; gap: 8px !important; } .jx-player-hud > button{ width: 106px !important; height: 106px !important; flex-basis: 106px !important; } .jx-player-hud .font-display.text-xl{font-size: clamp(20px, 4.25vw, 30px) !important;} .jx-player-hud .text-xs{font-size: clamp(9px, 1.85vw, 13px) !important;} .jx-player-hud [role="progressbar"], .jx-player-hud > div > div > div{height: 7px !important; max-height: 7px !important;} .jx-minimap{ top: 0 !important; right: var(--ref-gutter) !important; width: var(--ref-map-w) !important; } .jx-minimap-image{height: clamp(142px, 24.6vw, 174px) !important;} } /* TABLET / iPAD: same anchors, larger controls with viewport-safe margins. */ @media (min-width: 761px) and (max-width: 1100px){ .jx-player-hud{left: 18px !important; top: 72px !important; width: calc(100% - 290px) !important; max-width: 560px !important;} .jx-minimap{top: 8px !important; right: 14px !important; width: 260px !important;} .jx-minimap-image{height: 190px !important;} } /* DESKTOP: preserve the same five-zone composition with more breathing room. */ @media (min-width: 1101px){ .jx-player-hud{left: 24px !important; top: 76px !important; width: min(calc(100% - 360px), 620px) !important; max-width: 620px !important;} .jx-minimap{top: 10px !important; right: 20px !important; width: 300px !important;} .jx-minimap-image{height: 220px !important;} } /* === HUD V5 — mobile chat / top-status collision hotfix === Based on the latest 707x1536 reference supplied on 2026-09-18. Goals: compact the HP/MP/EXP strip, reduce and lower the minimap, and give the chat a short fixed footprint so it never occupies the potion/control lane. Existing seven-button bottom layout is preserved. */ :root{ --v5-map-w: clamp(176px, 29vw, 214px); --v5-chat-bottom: max(8px, env(safe-area-inset-bottom, 8px)); } /* TOP STATUS: reserve a dedicated column for player stats. */ .jx-player-hud{ width: min(calc(100% - var(--v5-map-w) - 30px), 500px) !important; max-width: none !important; min-width: 0 !important; gap: 8px !important; } .jx-player-hud > button{ flex: 0 0 clamp(72px, 13vw, 100px) !important; width: clamp(72px, 13vw, 100px) !important; height: clamp(72px, 13vw, 100px) !important; } .jx-player-hud > div{ min-width: 0 !important; overflow: hidden !important; } .jx-player-hud [role="progressbar"], .jx-player-hud > div > div > div{ width: 100% !important; max-width: 100% !important; height: 6px !important; max-height: 6px !important; margin-top: 2px !important; } .jx-player-hud .font-display.text-xl{ font-size: clamp(17px, 3.6vw, 26px) !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .jx-player-hud .text-xs{ font-size: clamp(8px, 1.7vw, 12px) !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* MINIMAP: smaller, slightly lower, and fully inside the top-right safe column. */ .jx-minimap{ top: clamp(8px, 1.2vh, 14px) !important; right: clamp(6px, 1.4vw, 16px) !important; width: var(--v5-map-w) !important; max-width: calc(100vw - 18px) !important; z-index: 60 !important; } .jx-minimap-image{ height: clamp(112px, 19vw, 152px) !important; max-height: 152px !important; } /* CHAT: compact log to two visible lines and a short input row. This creates a hard vertical lane below the potion/control area. */ @media (max-width:760px) and (orientation:portrait){ :root{ --v5-map-w: clamp(166px, 27vw, 198px); } .jx-topbar{ height: 46px !important; padding: 6px 9px 0 !important; } .jx-player-hud{ left: 9px !important; top: 58px !important; width: calc(100% - var(--v5-map-w) - 24px) !important; margin: 0 !important; gap: 6px !important; } .jx-player-hud > button{ flex-basis: 68px !important; width: 68px !important; height: 68px !important; } .jx-player-hud [role="progressbar"], .jx-player-hud > div > div > div{ height: 5px !important; max-height: 5px !important; } .jx-player-hud .font-display.text-xl{font-size: clamp(16px, 3.5vw, 21px) !important;} .jx-player-hud .text-xs{font-size: 8px !important;} .jx-minimap{ top: 7px !important; right: 6px !important; width: var(--v5-map-w) !important; } .jx-minimap-image{height: clamp(96px, 15.5vw, 116px) !important;} /* Keep all seven buttons exactly as-is in their existing bottom lane. */ } @media (min-width:761px) and (max-width:1100px){ :root{--v5-map-w: 214px;} .jx-minimap{top: 12px !important;width:214px !important;} .jx-minimap-image{height:146px !important;} } @media (min-width:1101px){ :root{--v5-map-w: 238px;} .jx-minimap{top:14px !important;width:238px !important;} .jx-minimap-image{height:160px !important;} } /* === HUD V6 — minimap target-position + compact status refresh === Latest device reference: move the minimap down into the marked gameplay area, while keeping the player status column compact and completely separate. */ :root{ --v6-map-w: clamp(184px, 28vw, 238px); --v6-map-top: clamp(180px, 34dvh, 360px); --v6-side: clamp(8px, 1.5vw, 18px); } /* TOP STATUS: compact card with a hard right boundary before the minimap. */ .jx-player-hud{ box-sizing: border-box !important; width: min(calc(100% - var(--v6-map-w) - 34px), 560px) !important; max-width: 560px !important; min-width: 0 !important; gap: 7px !important; padding-right: 6px !important; } .jx-player-hud > button{ flex: 0 0 clamp(64px, 8vw, 94px) !important; width: clamp(64px, 8vw, 94px) !important; height: clamp(64px, 8vw, 94px) !important; } .jx-player-hud > div{ min-width: 0 !important; overflow: hidden !important; } .jx-player-hud .font-display.text-xl{ font-size: clamp(18px, 2.2vw, 28px) !important; line-height: 1.02 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .jx-player-hud .text-xs{ font-size: clamp(9px, 1.05vw, 13px) !important; line-height: 1.05 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .jx-player-hud [role="progressbar"], .jx-player-hud > div > div > div{ width: 100% !important; max-width: 100% !important; height: 6px !important; max-height: 6px !important; margin-top: 2px !important; } /* MINIMAP: anchored lower, matching the red-X target area in the latest reference. It no longer occupies the same vertical band as the player information. */ .jx-minimap{ top: var(--v6-map-top) !important; right: var(--v6-side) !important; width: var(--v6-map-w) !important; max-width: calc(100vw - 2 * var(--v6-side)) !important; z-index: 60 !important; transform: none !important; } .jx-minimap-image{ height: clamp(116px, 18.5vw, 158px) !important; max-height: 158px !important; } /* Extra safety: the map never becomes wider than the free top-right column. */ @media (min-width:761px){ .jx-minimap{left:auto !important;} } @media (max-width:760px) and (orientation:portrait){ :root{ --v6-map-w: clamp(166px, 27vw, 198px); --v6-map-top: clamp(150px, 25dvh, 235px); --v6-side: 7px; } .jx-player-hud{ left: 9px !important; top: 58px !important; width: calc(100% - var(--v6-map-w) - 22px) !important; max-width: none !important; gap: 5px !important; } .jx-player-hud > button{ flex-basis: 62px !important; width: 62px !important; height: 62px !important; } .jx-player-hud .font-display.text-xl{font-size: 16px !important;} .jx-player-hud .text-xs{font-size: 8px !important;} .jx-player-hud [role="progressbar"], .jx-player-hud > div > div > div{height: 5px !important;max-height:5px !important;} .jx-minimap{top:var(--v6-map-top) !important;right:7px !important;width:var(--v6-map-w) !important;} .jx-minimap-image{height:clamp(96px,15.5vw,116px) !important;} } @media (min-width:761px) and (max-width:1100px){ :root{ --v6-map-w: 214px; --v6-map-top: clamp(165px, 30dvh, 260px); } .jx-minimap{top:var(--v6-map-top) !important;width:214px !important;} .jx-minimap-image{height:142px !important;} } @media (min-width:1101px){ :root{ --v6-map-w: 238px; --v6-map-top: clamp(220px, 42dvh, 430px); } .jx-minimap{top:var(--v6-map-top) !important;width:238px !important;} .jx-minimap-image{height:158px !important;} } /* === HUD V7 — reference-match top layout / settings replaces guild === Target: portrait reference 707x1500 and responsive desktop/iPad. Minimap sits below the top currency/status row, in the right-side target box, while the character status column is constrained to the remaining left width. The lower HUD/chat geometry is intentionally preserved from V6. */ :root{ --v7-map-w: clamp(220px, 27vw, 292px); --v7-map-top: clamp(78px, 7vh, 96px); --v7-gutter: clamp(8px, 1.5vw, 18px); } /* Keep the top information compact and reserve the right column for the map. */ .jx-player-hud{ box-sizing: border-box !important; width: min(calc(100% - var(--v7-map-w) - 30px), 560px) !important; max-width: 560px !important; min-width: 0 !important; gap: 7px !important; padding-right: 4px !important; } .jx-player-hud > button{ flex: 0 0 clamp(68px, 8vw, 92px) !important; width: clamp(68px, 8vw, 92px) !important; height: clamp(68px, 8vw, 92px) !important; } .jx-player-hud > div{min-width:0 !important; overflow:hidden !important;} .jx-player-hud .font-display.text-xl{ font-size: clamp(18px, 2.25vw, 28px) !important; line-height:1.02 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } .jx-player-hud .text-xs{ font-size: clamp(9px, 1.05vw, 13px) !important; line-height:1.05 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } .jx-player-hud [role="progressbar"], .jx-player-hud > div > div > div{ width:100% !important; max-width:100% !important; height:6px !important; max-height:6px !important; margin-top:2px !important; } /* Minimap: directly below the top currency/status row, right aligned. */ .jx-minimap{ top: var(--v7-map-top) !important; right: var(--v7-gutter) !important; left: auto !important; width: var(--v7-map-w) !important; max-width: calc(100vw - 2 * var(--v7-gutter)) !important; z-index: 61 !important; transform:none !important; } .jx-minimap-image{ height: clamp(150px, 19vw, 204px) !important; max-height:204px !important; } /* The seven bottom slots remain; slot 7 is now Cài đặt instead of Bang hội. */ /* Do not render the old floating settings button; settings is in the 7th slot. */ /* Phone portrait: keep the target map visible without touching the lower layout. */ @media (max-width:760px) and (orientation:portrait){ :root{ --v7-map-w: clamp(214px, 38vw, 270px); --v7-map-top: 78px; --v7-gutter: 7px; } .jx-player-hud{ left:9px !important; top:58px !important; width:calc(100% - var(--v7-map-w) - 20px) !important; max-width:none !important; gap:5px !important; } .jx-player-hud > button{ flex-basis:76px !important; width:76px !important; height:76px !important; } .jx-player-hud .font-display.text-xl{font-size:16px !important;} .jx-player-hud .text-xs{font-size:8px !important;} .jx-player-hud [role="progressbar"], .jx-player-hud > div > div > div{height:5px !important;max-height:5px !important;} .jx-minimap{top:var(--v7-map-top) !important;right:7px !important;width:var(--v7-map-w) !important;} .jx-minimap-image{height:clamp(146px, 27vw, 190px) !important;} } /* iPad/tablet and desktop: map remains under the currency row and beside the player card. */ @media (min-width:761px) and (max-width:1100px){ :root{--v7-map-w:270px;--v7-map-top:82px;--v7-gutter:12px;} .jx-minimap{width:270px !important;} .jx-minimap-image{height:190px !important;} } @media (min-width:1101px){ :root{--v7-map-w:292px;--v7-map-top:86px;--v7-gutter:18px;} .jx-minimap{width:292px !important;} .jx-minimap-image{height:204px !important;} } /* ================================================================ HUD V8 — Clean Responsive / Mobile-first final pass Design goals: - One stable five-zone HUD: top-left player, top-right minimap, center gameplay, bottom actions, bottom chat/potions. - No overlay collisions between minimap, player bars, chat and modals. - Safe-area aware for iPhone/iPad and scalable for desktop. - The existing lower layout is preserved when no modal is open. ================================================================ */ :root{ --hud-safe-top: max(8px, env(safe-area-inset-top, 8px)); --hud-safe-right: max(8px, env(safe-area-inset-right, 8px)); --hud-safe-bottom: max(8px, env(safe-area-inset-bottom, 8px)); --hud-gutter: clamp(8px, 1.6vw, 20px); --hud-topbar-h: clamp(48px, 6.2vw, 64px); --hud-map-w: clamp(174px, 26vw, 292px); --hud-map-img-h: clamp(118px, 18vw, 204px); --hud-action-size: clamp(58px, 7vw, 78px); --hud-chat-max: 210px; } /* Root / touch behavior. */ html, body, #app{ width:100%; min-width:0; min-height:100dvh; overflow:hidden; } body{overscroll-behavior:none;} button, [role="button"]{touch-action:manipulation;} /* ---------- TOP ZONE ---------- */ .jx-topbar{ height:var(--hud-topbar-h) !important; min-height:var(--hud-topbar-h) !important; padding-top:var(--hud-safe-top) !important; padding-left:var(--hud-gutter) !important; padding-right:var(--hud-gutter) !important; display:flex !important; align-items:center !important; gap:clamp(6px, 1vw, 14px) !important; white-space:nowrap !important; overflow:hidden !important; } .jx-topbar > div{ min-width:0 !important; overflow:hidden !important; } .jx-topbar > div > span{ overflow:hidden !important; text-overflow:ellipsis !important; } .jx-player-hud{ position:absolute !important; left:var(--hud-gutter) !important; top:calc(var(--hud-topbar-h) + 8px) !important; width:min(calc(100vw - var(--hud-map-w) - var(--hud-gutter) * 2 - 12px), 600px) !important; max-width:600px !important; margin:0 !important; padding:0 !important; gap:clamp(6px, 1vw, 12px) !important; align-items:center !important; pointer-events:auto !important; } .jx-player-hud > button{ flex:0 0 clamp(58px, 7.5vw, 88px) !important; width:clamp(58px, 7.5vw, 88px) !important; height:clamp(58px, 7.5vw, 88px) !important; } .jx-player-hud > div{ min-width:0 !important; width:100% !important; overflow:hidden !important; } .jx-player-hud .font-display.text-xl{ display:block !important; max-width:100% !important; font-size:clamp(17px, 2.1vw, 28px) !important; line-height:1 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } .jx-player-hud .text-xs{ max-width:100% !important; font-size:clamp(8px, 1vw, 13px) !important; line-height:1.05 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } .jx-player-hud [role="progressbar"], .jx-player-hud > div > div > div{ width:100% !important; max-width:100% !important; height:clamp(5px, .55vw, 8px) !important; min-height:5px !important; max-height:8px !important; margin-top:2px !important; overflow:hidden !important; } /* ---------- MINI MAP ---------- */ .jx-minimap{ position:absolute !important; top:calc(var(--hud-topbar-h) + 6px) !important; right:var(--hud-gutter) !important; left:auto !important; width:var(--hud-map-w) !important; max-width:calc(100vw - var(--hud-gutter) * 2) !important; max-height:calc(100dvh - var(--hud-topbar-h) - var(--hud-gutter)) !important; z-index:55 !important; transform:none !important; overflow:hidden !important; border-radius:clamp(8px, 1vw, 14px) !important; box-shadow:0 10px 28px rgba(0,0,0,.42), inset 0 0 0 1px rgba(196,165,116,.16) !important; backdrop-filter:blur(2px); } .jx-minimap-image{ width:100% !important; height:var(--hud-map-img-h) !important; min-height:0 !important; max-height:none !important; aspect-ratio:1.36 / 1 !important; object-fit:cover !important; } /* ---------- BOTTOM ACTION ZONE ---------- */ /* Slot 7 remains Settings; old floating settings is disabled. */ /* ---------- POTIONS ---------- */ /* ---------- CHAT ---------- */ /* ---------- POPUPS / MODALS ---------- Modal is deliberately above every gameplay HUD layer. */ body:has(.absolute.inset-0.z-30.flex.items-center.justify-center){ --modal-open:1; } /* The actual modal wrapper used by pn(). */ .absolute.inset-0.z-30.flex.items-center.justify-center.bg-ink\/55{ z-index:100 !important; padding:clamp(8px, 2vw, 24px) !important; padding-top:max(clamp(8px, 2vw, 24px), env(safe-area-inset-top, 8px)) !important; padding-bottom:max(clamp(8px, 2vw, 24px), env(safe-area-inset-bottom, 8px)) !important; } .absolute.inset-0.z-30.flex.items-center.justify-center.bg-ink\/55 > div{ width:min(100%, 860px) !important; max-width:min(100%, 860px) !important; max-height:min(88dvh, 820px) !important; border-radius:clamp(12px, 2vw, 20px) !important; display:flex !important; flex-direction:column !important; overflow:hidden !important; } .absolute.inset-0.z-30.flex.items-center.justify-center.bg-ink\/55 > div > header{ flex:0 0 auto !important; min-height:54px !important; padding:10px clamp(12px, 2vw, 20px) !important; } .absolute.inset-0.z-30.flex.items-center.justify-center.bg-ink\/55 > div > header h2{ min-width:0 !important; font-size:clamp(18px, 2.4vw, 26px) !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } .absolute.inset-0.z-30.flex.items-center.justify-center.bg-ink\/55 > div > header button{ flex:0 0 auto !important; min-height:40px !important; } .absolute.inset-0.z-30.flex.items-center.justify-center.bg-ink\/55 > div > div{ flex:1 1 auto !important; min-height:0 !important; max-height:none !important; overflow-y:auto !important; overscroll-behavior:contain !important; -webkit-overflow-scrolling:touch !important; padding:clamp(10px, 2vw, 20px) !important; } /* ---------- PHONE PORTRAIT ---------- */ @media (max-width:760px) and (orientation:portrait){ :root{ --hud-gutter:7px; --hud-topbar-h:50px; --hud-map-w:clamp(156px, 37vw, 205px); --hud-map-img-h:clamp(104px, 24vw, 140px); --hud-action-size:clamp(50px, 15vw, 64px); --hud-chat-max:154px; } .jx-topbar{ padding-left:var(--hud-gutter) !important; padding-right:var(--hud-gutter) !important; gap:5px !important; } .jx-topbar .text-xs{font-size:10px !important;} .jx-topbar .font-display.text-xl{font-size:17px !important;} .jx-topbar > div{gap:6px !important;} .jx-player-hud{ top:calc(var(--hud-topbar-h) + 8px) !important; left:var(--hud-gutter) !important; width:calc(100vw - var(--hud-map-w) - 20px) !important; max-width:none !important; gap:5px !important; } .jx-player-hud > button{ flex-basis:58px !important; width:58px !important; height:58px !important; } .jx-player-hud .font-display.text-xl{font-size:15px !important;} .jx-player-hud .text-xs{font-size:8px !important;} .jx-player-hud [role="progressbar"], .jx-player-hud > div > div > div{height:5px !important;max-height:5px !important;} .jx-minimap{ top:calc(var(--hud-topbar-h) + 4px) !important; right:var(--hud-gutter) !important; } .absolute.inset-0.z-30.flex.items-center.justify-center.bg-ink\/55{ padding-left:max(8px, env(safe-area-inset-left, 8px)) !important; padding-right:max(8px, env(safe-area-inset-right, 8px)) !important; } .absolute.inset-0.z-30.flex.items-center.justify-center.bg-ink\/55 > div{ width:100% !important; max-width:100% !important; max-height:calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important; } .absolute.inset-0.z-30.flex.items-center.justify-center.bg-ink\/55 > div > header{min-height:50px !important;} .absolute.inset-0.z-30.flex.items-center.justify-center.bg-ink\/55 > div > div{padding:12px !important;} } /* ---------- LANDSCAPE PHONE ---------- */ @media (max-width:900px) and (orientation:landscape){ :root{ --hud-topbar-h:46px; --hud-map-w:clamp(176px, 25vw, 240px); --hud-map-img-h:clamp(100px, 17vw, 150px); --hud-action-size:clamp(50px, 9vh, 62px); } .jx-player-hud{top:calc(var(--hud-topbar-h) + 5px) !important;} } /* ---------- TABLET / IPAD ---------- */ @media (min-width:761px) and (max-width:1100px){ :root{ --hud-topbar-h:58px; --hud-map-w:270px; --hud-map-img-h:190px; --hud-action-size:68px; } } /* ---------- DESKTOP ---------- */ @media (min-width:1101px){ :root{ --hud-topbar-h:64px; --hud-map-w:292px; --hud-map-img-h:204px; --hud-action-size:76px; } } /* Reduced motion: keep combat/UI readable and stable. */ @media (prefers-reduced-motion:reduce){ } /* ================================================================ HUD V9 — iPhone Documents/WebView collision repair Canonical target: 707x1536 portrait screenshot supplied 2026-09-18. Goals: 1) HUD is an overlay; it MUST NOT reserve a black layout band above the world. 2) Top status / player stats / minimap use independent viewport anchors. 3) Bottom actions, potions and chat occupy non-overlapping lanes. 4) Work with iOS Safari, Documents WebView, iPad and desktop without JS. ================================================================ */ :root{ --v9-safe-top: max(6px, env(safe-area-inset-top, 0px)); --v9-safe-bottom: max(8px, env(safe-area-inset-bottom, 0px)); --v9-gutter: clamp(8px, 2vw, 18px); --v9-map-w: clamp(176px, 27vw, 220px); --v9-action-size: clamp(54px, 9.5vw, 68px); } /* ---------- TOP: pure overlay, never a layout spacer ---------- */ .jx-topbar{ position:absolute !important; top:0 !important; left:0 !important; right:0 !important; height:48px !important; min-height:48px !important; box-sizing:border-box !important; padding:var(--v9-safe-top) var(--v9-gutter) 0 !important; background:linear-gradient(180deg,rgba(10,8,6,.92),rgba(10,8,6,.72)) !important; border-bottom:1px solid rgba(196,165,116,.34) !important; z-index:81 !important; pointer-events:none !important; overflow:hidden !important; } .jx-topbar > span, .jx-topbar > div{min-width:0 !important;} /* Player card: below the top strip, with the map column reserved. */ .jx-player-hud{ position:absolute !important; top:54px !important; left:var(--v9-gutter) !important; margin:0 !important; width:min(calc(100vw - var(--v9-map-w) - 30px), 500px) !important; max-width:none !important; min-width:0 !important; gap:7px !important; z-index:82 !important; pointer-events:auto !important; } .jx-player-hud > button{ width:68px !important; height:68px !important; flex:0 0 68px !important; } .jx-player-hud > div{min-width:0 !important;overflow:hidden !important;} .jx-player-hud .font-display.text-xl{ font-size:clamp(17px,3.7vw,25px) !important; line-height:1 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } .jx-player-hud .text-xs{ font-size:clamp(8px,1.65vw,11px) !important; line-height:1 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } .jx-player-hud [role="progressbar"], .jx-player-hud > div > div > div{ height:5px !important; max-height:5px !important; margin-top:2px !important; } /* ---------- MINIMAP: independent top-right card ---------- */ .jx-minimap{ position:absolute !important; top:6px !important; right:var(--v9-gutter) !important; left:auto !important; width:var(--v9-map-w) !important; max-width:calc(100vw - var(--v9-gutter) * 2) !important; z-index:90 !important; transform:none !important; margin:0 !important; overflow:hidden !important; pointer-events:auto !important; } .jx-minimap-image{ height:clamp(104px,15.5vw,124px) !important; max-height:124px !important; aspect-ratio:1.32/1 !important; object-fit:cover !important; } /* ---------- BOTTOM: fixed vertical lanes ---------- */ /* The 7th button is Settings. Do not render a second floating settings control. */ /* Potion lane: above chat, below action labels. */ /* Chat dock: compact enough to leave the action/potion lanes clear. */ /* Prevent the hidden legacy menu from ever competing with the new HUD. */ /* ---------- iPhone / Documents portrait ---------- */ @media (max-width:760px) and (orientation:portrait){ :root{ --v9-gutter:8px; --v9-map-w:clamp(166px,26vw,188px); --v9-action-size:clamp(54px,9.4vw,66px); } .jx-topbar{ height:46px !important; min-height:46px !important; padding-left:8px !important; padding-right:8px !important; } .jx-topbar > span:nth-child(2){font-size:10px !important;} .jx-topbar .font-display.text-xl{font-size:17px !important;} .jx-topbar > div{gap:6px !important;} .jx-topbar > div > span:nth-child(2), .jx-topbar > div > span:nth-child(3){display:none !important;} .jx-player-hud{ top:53px !important; left:8px !important; width:calc(100vw - var(--v9-map-w) - 20px) !important; gap:6px !important; } .jx-player-hud > button{width:64px !important;height:64px !important;flex-basis:64px !important;} .jx-player-hud .font-display.text-xl{font-size:17px !important;} .jx-player-hud .text-xs{font-size:8px !important;} .jx-player-hud [role="progressbar"], .jx-player-hud > div > div > div{height:5px !important;max-height:5px !important;} .jx-minimap{ top:5px !important; right:8px !important; width:var(--v9-map-w) !important; } .jx-minimap-image{height:clamp(96px,14.2vw,110px) !important;max-height:110px !important;} } /* ---------- very short iPhone landscape ---------- */ @media (max-width:900px) and (orientation:landscape){ :root{ --v9-map-w:190px; --v9-action-size:50px; } .jx-topbar{height:40px !important;min-height:40px !important;} .jx-player-hud{top:45px !important;left:8px !important;width:calc(100vw - 214px) !important;} .jx-player-hud > button{width:54px !important;height:54px !important;flex-basis:54px !important;} .jx-minimap{top:4px !important;right:8px !important;width:190px !important;} .jx-minimap-image{height:72px !important;} } /* ---------- iPad / tablet ---------- */ @media (min-width:761px) and (max-width:1100px){ :root{ --v9-gutter:14px; --v9-map-w:250px; --v9-action-size:68px; } .jx-topbar{height:58px !important;min-height:58px !important;} .jx-player-hud{top:66px !important;left:14px !important;width:calc(100vw - 284px) !important;max-width:560px !important;} .jx-player-hud > button{width:76px !important;height:76px !important;flex-basis:76px !important;} .jx-minimap{top:8px !important;right:14px !important;width:250px !important;} .jx-minimap-image{height:176px !important;} } /* ---------- desktop ---------- */ @media (min-width:1101px){ :root{ --v9-gutter:22px; --v9-map-w:300px; --v9-action-size:76px; } .jx-topbar{height:64px !important;min-height:64px !important;padding-inline:22px !important;} .jx-player-hud{top:74px !important;left:22px !important;width:min(calc(100vw - 344px),620px) !important;} .jx-player-hud > button{width:88px !important;height:88px !important;flex-basis:88px !important;} .jx-minimap{top:10px !important;right:22px !important;width:300px !important;} .jx-minimap-image{height:216px !important;} } /* Modal remains above every HUD layer and respects iOS safe areas. */ .absolute.inset-0.z-30.flex.items-center.justify-center.bg-ink\/55{ z-index:200 !important; padding:max(8px,env(safe-area-inset-top,8px)) max(8px,env(safe-area-inset-right,8px)) max(8px,env(safe-area-inset-bottom,8px)) max(8px,env(safe-area-inset-left,8px)) !important; } .absolute.inset-0.z-30.flex.items-center.justify-center.bg-ink\/55 > div{ width:min(100%,860px) !important; max-width:min(100%,860px) !important; max-height:calc(100dvh - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) !important; overflow:hidden !important; } /* ================================================================ HUD V10 — top status / minimap collision fix Target from latest player screenshot (2026-09-18): - Keep VIP / Lực Chiến / currency strip fully visible at the top. - Put the minimap immediately UNDER the currency strip, never over it. - Put player name + HP/MP/EXP immediately UNDER the Lực Chiến strip. - Reserve the minimap column so player bars never run beneath the map. - Scale cleanly for iPhone Documents/WebView, iPad and desktop. ================================================================ */ :root{ --v10-safe-top: max(6px, env(safe-area-inset-top, 0px)); --v10-safe-bottom: max(8px, env(safe-area-inset-bottom, 0px)); --v10-gutter: clamp(8px, 1.6vw, 22px); --v10-map-w: clamp(190px, 23vw, 300px); --v10-topbar-h: clamp(46px, 5.2vw, 64px); --v10-player-top: calc(var(--v10-safe-top) + var(--v10-topbar-h) + 5px); } /* The top HUD remains a true overlay: it must not push the game world down. */ /* 1) TOP STRIP — VIP, combat power and currencies occupy one clean row. */ .jx-topbar{ position:absolute !important; top:0 !important; left:0 !important; right:0 !important; height:var(--v10-topbar-h) !important; min-height:var(--v10-topbar-h) !important; box-sizing:border-box !important; padding:var(--v10-safe-top) var(--v10-gutter) 0 !important; overflow:hidden !important; z-index:81 !important; } .jx-topbar > span, .jx-topbar > div{min-width:0 !important;} .jx-topbar > div.ml-auto{ flex:0 1 auto !important; max-width:52% !important; overflow:hidden !important; white-space:nowrap !important; } /* 2) PLAYER INFO — directly below Lực Chiến, with the map column reserved. */ .jx-player-hud{ position:absolute !important; top:var(--v10-player-top) !important; left:var(--v10-gutter) !important; margin:0 !important; width:min(calc(100vw - var(--v10-map-w) - var(--v10-gutter) * 2 - 8px), 620px) !important; max-width:620px !important; min-width:0 !important; gap:clamp(6px, .9vw, 12px) !important; z-index:82 !important; } .jx-player-hud > button{ width:clamp(64px, 6.2vw, 88px) !important; height:clamp(64px, 6.2vw, 88px) !important; flex:0 0 clamp(64px, 6.2vw, 88px) !important; } .jx-player-hud > div{min-width:0 !important;overflow:hidden !important;} .jx-player-hud .font-display.text-xl{ font-size:clamp(17px, 2.1vw, 25px) !important; line-height:1 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } .jx-player-hud .text-xs{ font-size:clamp(8px, 1.05vw, 11px) !important; line-height:1 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } .jx-player-hud [role="progressbar"], .jx-player-hud > div > div > div{ height:6px !important; max-height:6px !important; margin-top:2px !important; } /* 3) MINIMAP — starts immediately after the top currency strip. */ .jx-minimap{ position:absolute !important; top:calc(var(--v10-safe-top) + var(--v10-topbar-h) + 4px) !important; right:var(--v10-gutter) !important; left:auto !important; width:var(--v10-map-w) !important; max-width:calc(100vw - var(--v10-gutter) * 2) !important; margin:0 !important; transform:none !important; transform-origin:top right !important; overflow:hidden !important; z-index:90 !important; } .jx-minimap-image{ height:clamp(112px, 15vw, 174px) !important; max-height:174px !important; aspect-ratio:1.32 / 1 !important; object-fit:cover !important; } /* Keep the lower controls independent from the top HUD. */ /* ---------- iPhone portrait / Documents WebView ---------- */ @media (max-width:760px) and (orientation:portrait){ :root{ --v10-gutter:8px; --v10-map-w:clamp(168px, 29vw, 198px); --v10-topbar-h:46px; } .jx-topbar{ padding-left:8px !important; padding-right:8px !important; } .jx-topbar > div.ml-auto{max-width:47% !important;gap:5px !important;} .jx-topbar > div.ml-auto > span:nth-child(2), .jx-topbar > div.ml-auto > span:nth-child(3){display:none !important;} .jx-topbar > span:nth-child(2){font-size:10px !important;} .jx-topbar .font-display.text-xl{font-size:17px !important;} .jx-player-hud{ width:calc(100vw - var(--v10-map-w) - 22px) !important; max-width:none !important; gap:6px !important; } .jx-player-hud > button{ width:58px !important;height:58px !important;flex-basis:58px !important; } .jx-player-hud .font-display.text-xl{font-size:17px !important;} .jx-player-hud .text-xs{font-size:8px !important;} .jx-player-hud [role="progressbar"], .jx-player-hud > div > div > div{height:5px !important;max-height:5px !important;} .jx-minimap{ top:calc(var(--v10-safe-top) + var(--v10-topbar-h) + 3px) !important; right:8px !important; width:var(--v10-map-w) !important; } .jx-minimap-image{height:clamp(94px, 15vw, 108px) !important;max-height:108px !important;} } /* ---------- iPhone landscape ---------- */ @media (max-width:900px) and (orientation:landscape){ :root{ --v10-gutter:8px; --v10-map-w:190px; --v10-topbar-h:40px; } .jx-topbar{padding-left:8px !important;padding-right:8px !important;} .jx-player-hud{width:calc(100vw - 214px) !important;max-width:520px !important;} .jx-player-hud > button{width:54px !important;height:54px !important;flex-basis:54px !important;} .jx-player-hud .font-display.text-xl{font-size:16px !important;} .jx-player-hud .text-xs{font-size:8px !important;} .jx-minimap-image{height:106px !important;} } /* ---------- iPad / tablet ---------- */ @media (min-width:761px) and (max-width:1100px){ :root{ --v10-gutter:14px; --v10-map-w:250px; --v10-topbar-h:58px; } .jx-player-hud{max-width:560px !important;} .jx-player-hud > button{width:76px !important;height:76px !important;flex-basis:76px !important;} .jx-minimap-image{height:168px !important;} } /* ---------- desktop / large tablet ---------- */ @media (min-width:1101px){ :root{ --v10-gutter:22px; --v10-map-w:300px; --v10-topbar-h:64px; } .jx-player-hud{max-width:620px !important;} .jx-player-hud > button{width:82px !important;height:82px !important;flex-basis:82px !important;} .jx-minimap-image{height:174px !important;} } /* Any opened game window stays above HUD and inside the current viewport. */ .absolute.inset-0.z-30.flex.items-center.justify-center.bg-ink\/55{ z-index:200 !important; padding:max(8px,var(--v10-safe-top)) max(8px,env(safe-area-inset-right,0px)) max(8px,var(--v10-safe-bottom)) max(8px,env(safe-area-inset-left,0px)) !important; } .absolute.inset-0.z-30.flex.items-center.justify-center.bg-ink\/55 > div{ width:min(100%,860px) !important; max-width:min(100%,860px) !important; max-height:calc(100dvh - 16px - var(--v10-safe-top) - var(--v10-safe-bottom)) !important; overflow:auto !important; } /* === V11 FINAL FIX — reveal VIP / Lực Chiến / Vạn Lượng, then place HUD below === */ .jx-topbar{ position: relative !important; z-index: 90 !important; box-sizing: border-box !important; min-height: clamp(46px, 4.2dvh, 62px) !important; padding-top: max(6px, env(safe-area-inset-top, 0px)) !important; padding-bottom: 6px !important; background: rgba(12,10,8,.94) !important; } .jx-player-hud{ position: relative !important; z-index: 80 !important; margin-top: 6px !important; } .jx-minimap{ z-index: 85 !important; top: calc(max(46px, 4.2dvh) + max(6px, env(safe-area-inset-top, 0px)) + 6px) !important; } @media (max-width:760px) and (orientation:portrait){ .jx-topbar{ min-height: 46px !important; padding-top: max(6px, env(safe-area-inset-top, 0px)) !important; padding-bottom: 5px !important; } .jx-player-hud{margin-top: 7px !important;} .jx-minimap{ top: calc(46px + max(6px, env(safe-area-inset-top, 0px)) + 6px) !important; right: 6px !important; width: clamp(176px, 28vw, 206px) !important; } .jx-minimap-image{height: clamp(106px, 15vw, 128px) !important;} } @media (max-width:900px) and (orientation:landscape){ .jx-topbar{min-height: 44px !important;} .jx-minimap{top: calc(44px + max(4px, env(safe-area-inset-top, 0px)) + 5px) !important;} } /* ================================================================ HUD V12 — iPhone Documents final top-stack correction Layout requested: 1. VIP / Lực Chiến / Vạn Lượng always visible in the first row. 2. Character information sits directly below that row, inside the reserved left panel area (no giant blank block). 3. Minimap sits at the right, immediately below the currency row. 4. Both blocks are absolute overlays so normal document flow cannot push the player HUD downward. ================================================================ */ :root{ --v12-top-h: 54px; --v12-hud-top: 62px; --v12-map-w: 198px; } /* Never let the top HUD create a large layout spacer. */ /* Status/currency row. */ .jx-topbar{ position:absolute !important; top:0 !important; left:0 !important; right:0 !important; height:var(--v12-top-h) !important; min-height:var(--v12-top-h) !important; padding-top:max(6px, env(safe-area-inset-top, 0px)) !important; padding-bottom:4px !important; padding-left:8px !important; padding-right:8px !important; box-sizing:border-box !important; overflow:hidden !important; background:rgba(12,10,8,.94) !important; z-index:110 !important; } /* Character block: absolutely positioned so it can never be pushed down by the topbar's DOM flow. */ .jx-player-hud{ position:absolute !important; top:var(--v12-hud-top) !important; left:8px !important; margin:0 !important; width:calc(100vw - var(--v12-map-w) - 22px) !important; max-width:none !important; min-width:0 !important; gap:6px !important; box-sizing:border-box !important; z-index:105 !important; } .jx-player-hud > button{ width:58px !important; height:58px !important; flex:0 0 58px !important; } .jx-player-hud > div{ min-width:0 !important; overflow:hidden !important; } .jx-player-hud .font-display.text-xl{ font-size:17px !important; line-height:1 !important; white-space:nowrap !important; } .jx-player-hud .text-xs{ font-size:8px !important; line-height:1 !important; white-space:nowrap !important; } .jx-player-hud [role="progressbar"], .jx-player-hud > div > div > div{ height:5px !important; max-height:5px !important; margin-top:2px !important; } /* Minimap: same vertical stack as the player block, but in the right column and below the currency/status row. */ .jx-minimap{ position:absolute !important; top:var(--v12-hud-top) !important; right:6px !important; left:auto !important; width:var(--v12-map-w) !important; max-width:calc(100vw - 12px) !important; margin:0 !important; transform:none !important; z-index:115 !important; box-sizing:border-box !important; } .jx-minimap-image{ height:118px !important; max-height:118px !important; aspect-ratio:1.32 / 1 !important; object-fit:cover !important; } /* Keep lower HUD independent from the corrected top stack. */ /* Small portrait phones. */ @media (max-width:560px) and (orientation:portrait){ :root{ --v12-top-h:52px; --v12-hud-top:59px; --v12-map-w:184px; } .jx-topbar{padding-left:7px !important;padding-right:7px !important;} .jx-topbar > div.ml-auto{max-width:48% !important;gap:4px !important;} .jx-topbar > div.ml-auto > span:nth-child(2), .jx-topbar > div.ml-auto > span:nth-child(3){display:none !important;} .jx-player-hud{width:calc(100vw - var(--v12-map-w) - 20px) !important;} .jx-player-hud > button{width:54px !important;height:54px !important;flex-basis:54px !important;} .jx-minimap{right:5px !important;} .jx-minimap-image{height:108px !important;max-height:108px !important;} } /* iPhone landscape. */ @media (max-width:900px) and (orientation:landscape){ :root{--v12-top-h:44px;--v12-hud-top:50px;--v12-map-w:190px;} .jx-player-hud{width:calc(100vw - 214px) !important;} .jx-player-hud > button{width:54px !important;height:54px !important;flex-basis:54px !important;} .jx-minimap{right:8px !important;} .jx-minimap-image{height:106px !important;max-height:106px !important;} } /* Tablet/desktop retain the same hierarchy, with proportional sizing. */ @media (min-width:761px){ :root{--v12-top-h:62px;--v12-hud-top:70px;--v12-map-w:250px;} .jx-player-hud{left:14px !important;width:calc(100vw - var(--v12-map-w) - 36px) !important;max-width:560px !important;gap:10px !important;} .jx-player-hud > button{width:76px !important;height:76px !important;flex-basis:76px !important;} .jx-player-hud .font-display.text-xl{font-size:21px !important;} .jx-player-hud .text-xs{font-size:10px !important;} .jx-minimap{right:14px !important;} .jx-minimap-image{height:168px !important;max-height:168px !important;} } @media (min-width:1101px){ :root{--v12-top-h:68px;--v12-hud-top:76px;--v12-map-w:300px;} .jx-player-hud{left:22px !important;width:min(calc(100vw - var(--v12-map-w) - 52px),620px) !important;max-width:620px !important;} .jx-player-hud > button{width:82px !important;height:82px !important;flex-basis:82px !important;} .jx-minimap{right:22px !important;} .jx-minimap-image{height:174px !important;max-height:174px !important;} } /* ================================================================ HUD V13 — iPhone Documents chat cleanup Fixes the lower HUD collision seen in portrait WebView screenshots. - Removes the large chat input row entirely. - Keeps chat messages compact (max 4 visible lines). - Keeps the chat dock below potions/action controls. - Prevents the chat panel from consuming an unnecessary vertical lane. ================================================================ */ /* The input was the source of the oversized bottom strip. */ /* If the chat component wraps the input in a dedicated row, collapse it. */ /* Portrait iPhone / Documents: slightly tighter dock and safe spacing. */ @media (max-width: 760px) and (orientation: portrait){ } /* Very narrow portrait screens: leave an extra 4px gutter for rounded edges. */ @media (max-width: 390px) and (orientation: portrait){ } /* === HUD V14 — TOP INFORMATION CLEARANCE FIX (iPhone portrait) === Goal: expose VIP / Lực Chiến / Vạn Lượng first, then place minimap and character status immediately below the top information row. Viewport-anchored only; world/camera rendering is untouched. */ @media (max-width:760px) and (orientation:portrait){ /* Keep the resource strip visible above all secondary HUD elements. */ .jx-topbar{ position:relative!important; z-index:120!important; height:70px!important; padding-top:8px!important; } /* Character block: drop gently below VIP / Lực Chiến / Vạn Lượng. */ .jx-player-hud{ top:88px!important; left:10px!important; margin:0!important; width:calc(100% - var(--ref-map-w) - 24px)!important; max-width:none!important; z-index:75!important; } /* Minimap: directly below the top currency row, not over it. */ .jx-minimap{ top:82px!important; right:8px!important; width:var(--ref-map-w)!important; z-index:80!important; } /* Slightly reduce map footprint so the top row has breathing room. */ .jx-minimap-image{height:clamp(132px,22vw,156px)!important;} /* Make the character name/status read as one compact block under combat power. */ .jx-player-hud .font-display.text-xl{font-size:clamp(19px,3.9vw,27px)!important;line-height:1!important;} .jx-player-hud .text-xs{font-size:clamp(9px,1.7vw,12px)!important;line-height:1.05!important;} .jx-player-hud [role="progressbar"], .jx-player-hud>div>div>div{height:7px!important;max-height:7px!important;margin-top:2px!important;} } /* Very narrow iPhone portrait: preserve a guaranteed gap below the top row. */ @media (max-width:390px) and (orientation:portrait){ .jx-topbar{height:68px!important;} .jx-player-hud{top:86px!important;width:calc(100% - var(--ref-map-w) - 20px)!important;} .jx-minimap{top:78px!important;right:6px!important;} } /* === V23 UI REFRESH — based on supplied UI references === The supplied screenshots are used as layout/style references only. No screenshot is used as a button image. Mobile HUD geometry remains intact. */ .jx-panel-shell{ background: radial-gradient(circle at 12% 8%, rgba(56,104,145,.22), transparent 28%), radial-gradient(circle at 88% 92%, rgba(42,74,103,.20), transparent 30%), linear-gradient(145deg,#081522 0%,#0b1826 52%,#07111d 100%) !important; border-color:rgba(212,177,108,.72) !important; box-shadow:0 22px 70px rgba(0,0,0,.72), inset 0 0 0 1px rgba(120,170,210,.12) !important; } .jx-panel-shell>header{ min-height:58px; background:linear-gradient(180deg,rgba(20,38,56,.96),rgba(7,18,29,.94)); border-bottom-color:rgba(212,177,108,.35) !important; box-shadow:0 8px 22px rgba(0,0,0,.22); } .jx-panel-shell>header h2{font-size:clamp(20px,2.2vw,30px);text-shadow:0 2px 10px rgba(0,0,0,.7);} .jx-panel-shell>header button{ border-color:rgba(212,177,108,.55) !important; color:#f1dfb7 !important; background:rgba(6,17,27,.62); } .jx-panel-shell>div{background:linear-gradient(180deg,rgba(5,14,23,.18),rgba(5,14,23,.42));} .jx-panel-shell button:not([disabled]){border-color:rgba(212,177,108,.45);} .jx-panel-shell .border-line{border-color:rgba(111,151,184,.30) !important;} .jx-panel-shell .bg-panel{background:rgba(8,22,35,.72) !important;} .jx-panel-shell .bg-ink{background:rgba(3,12,20,.76) !important;} .jx-panel-shell input{background:rgba(3,12,20,.82) !important;border-color:rgba(111,151,184,.38) !important;} .jx-save-slot{ background:linear-gradient(145deg,rgba(14,34,51,.94),rgba(5,16,27,.94)); border-color:rgba(212,177,108,.48) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); } /* Screenshot-inspired bottom navigation: icon-first, gold/blue framed, no image assets. */ .jx-nav-icon{ width:34px !important;height:34px !important;padding:6px; border:1px solid rgba(212,177,108,.48); border-radius:50%; background:radial-gradient(circle,rgba(86,111,133,.52),rgba(9,22,34,.95)); color:#f0dfbb; filter:drop-shadow(0 2px 5px rgba(0,0,0,.5)); } @media (min-width:761px){ .jx-player-hud{margin:14px !important;} .jx-topbar{height:54px !important;background:linear-gradient(180deg,rgba(7,14,22,.97),rgba(7,14,22,.86)) !important;} } /* Mobile keeps the established HUD positions; only panel skin is refreshed. */ @media (max-width:760px){ .jx-panel-shell{border-radius:18px !important;} .jx-panel-shell>header{min-height:54px;padding-top:9px !important;padding-bottom:9px !important;} .jx-panel-shell>header h2{font-size:21px;} .jx-nav-icon{width:31px !important;height:31px !important;} } .platinum-led{animation:1.8s ease-in-out infinite platinum-led;box-shadow:0 0 0 2px #e9edf2,0 0 10px #d8dee8,0 0 22px rgba(255,255,255,.72);will-change:box-shadow} @keyframes platinum-led{0%,100%{box-shadow:0 0 0 2px #d9dee6,0 0 8px #aeb7c4,0 0 16px rgba(255,255,255,.55)}50%{box-shadow:0 0 0 2px #fff,0 0 15px #f2f5fa,0 0 28px rgba(220,230,245,.9)}} .rainbow-led,.gold-led{will-change:box-shadow} .jx-joystick{touch-action:none} /* EXP rewards stay in the bottom chat feed instead of using a separate notification panel. */ /* Phi Phong title badge V7.1: LED highlight sweeps from the first glyph to the last. */ .cloak-badge { --cloak-led:#ffffff; --cloak-shine:#fff7c8; display:inline-block; margin-right:.38rem; font-family:inherit; font-size:.72em; font-weight:800; line-height:1; letter-spacing:.01em; white-space:nowrap; color:transparent!important; background:linear-gradient(90deg,var(--cloak-led) 0%,var(--cloak-led) 37%,var(--cloak-shine) 50%,var(--cloak-led) 63%,var(--cloak-led) 100%); background-size:240% 100%; background-position:120% 0; -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 0 3px var(--cloak-led)) drop-shadow(0 0 7px var(--cloak-led)); animation:cloak-led-sweep 1.25s linear infinite; will-change:background-position,filter; } .cloak-badge-tinhluyen{--cloak-led:#ffffff;--cloak-shine:#fff1a8} .cloak-badge-hoangkim{--cloak-led:#f1d06b;--cloak-shine:#ffffff} .cloak-badge-ngusac{--cloak-led:#b56cff;--cloak-shine:#ffffff} .cloak-badge-thatsac{--cloak-led:#43e66b;--cloak-shine:#ffffff} .cloak-badge-cuusac{--cloak-led:#ff4d4d;--cloak-shine:#ffffff} @keyframes cloak-led-sweep{0%{background-position:120% 0}100%{background-position:-120% 0}} @media(prefers-reduced-motion:reduce){.cloak-badge{animation:none;background-position:50% 0}} /* BAG POPUP V6: darker, more opaque equipment info modal for readability */ .bag-item-popup{background:rgba(4,12,19,.97)!important;backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);} .bag-item-popup *{text-shadow:0 1px 1px rgba(0,0,0,.18);} /* BAG ITEM POPUP V7 — true viewport modal + compact content for mobile */ .bag-item-popup{max-height:calc(100dvh - 16px)!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;touch-action:auto!important;scrollbar-width:thin!important;} .bag-item-popup button{min-height:38px!important;height:auto!important;padding-top:7px!important;padding-bottom:7px!important;font-size:12px!important;line-height:1.15!important;} .bag-item-popup img{max-width:100%;} .mount-led{border:1px solid rgba(255,55,45,.78);box-shadow:0 0 6px rgba(255,35,25,.9),0 0 16px rgba(255,35,25,.55);animation:jx69MountRedLed 1.65s ease-in-out infinite alternate;border-radius:14px;background:transparent} @keyframes jx69MountRedLed{from{filter:drop-shadow(0 0 3px rgba(255,40,30,.7))}to{filter:drop-shadow(0 0 12px rgba(255,30,20,1))}} /* === JX69 AUTO DEVICE ADAPTIVE V1 === Device class comes from jx69-device-runtime.js, not viewport width alone. */ html.jx-device-mobile, html.jx-device-tablet{ overscroll-behavior:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; } html.jx-device-mobile body, html.jx-device-tablet body{ overscroll-behavior:none; min-height:100dvh; } /* Desktop web: mouse/keyboard/click-to-move; joystick is unnecessary. */ html.jx-device-desktop .jx-joystick{display:none!important;} /* Keep touch targets comfortable even when a phone is in landscape and exceeds 760px. */ html.jx-device-mobile .jx-nav-icon{width:31px!important;height:31px!important;} html.jx-device-mobile .jx-panel-shell{border-radius:18px!important;} html.jx-device-mobile .jx-panel-shell>header{min-height:54px;padding-top:9px!important;padding-bottom:9px!important;} /* Tablet: slightly larger controls without forcing the phone layout. */ html.jx-device-tablet .jx-nav-icon{width:33px!important;height:33px!important;} /* Portrait phone safe-area protection. */ /* Landscape phone: preserve more world view by compacting the chat dock. */ /* Avoid browser gestures stealing movement on the actual game canvas. */ html.jx-input-touch canvas{touch-action:none!important;} /* Low-power touch devices: expensive blur effects cost FPS for little gameplay value. */ html.jx-low-power .jx-panel-shell, html.jx-low-power .bag-item-popup{ -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } /* === JX69 WEB CORE V5 — clean desktop stage === */ html.jx-device-desktop, html.jx-device-desktop body, html.jx-device-desktop #app{ width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important; margin:0!important;padding:0!important;overflow:hidden!important;background:#0c0a08!important; } /* The gameplay canvas owns the entire viewport. HUD is overlay-only. */ html.jx-device-desktop #app>div.relative.h-dvh.w-full{ position:relative!important;width:100vw!important;height:100dvh!important;max-width:none!important; margin:0!important;padding:0!important;overflow:hidden!important; } html.jx-device-desktop #app>div.relative.h-dvh.w-full>div.relative.h-full.w-full{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important; max-width:none!important;margin:0!important;padding:0!important; } html.jx-device-desktop .jx-joystick{display:none!important;} @media (min-width:1000px){ html.jx-device-desktop .jx-topbar{height:46px!important;min-height:46px!important;padding:0 14px!important;pointer-events:auto!important;} html.jx-device-desktop .jx-player-hud{position:absolute!important;top:54px!important;left:14px!important;width:390px!important;max-width:390px!important;margin:0!important;pointer-events:auto!important;} html.jx-device-desktop .jx-player-hud>button{width:60px!important;height:60px!important;flex-basis:60px!important;} html.jx-device-desktop .jx-minimap{position:absolute!important;top:52px!important;right:14px!important;width:226px!important;pointer-events:auto!important;} html.jx-device-desktop .jx-minimap-image{height:134px!important;} } /* === JX69 WEB V7 — DESKTOP BOTTOM HUD CLEANUP === Goal: remove the oversized dark bar on website desktop and keep more map visible. */ /* === JX69 WEB V8 — DESKTOP SKILL + NOTICE REPOSITION === User request: 1) Move skill bar higher. 2) Move notice/chat panel to the center for a more stable desktop layout. */ /* Keep potion lane compact on the left and out of the centered dock. */ /* Keep settings button clear of the centered notice panel. */ /* Slightly relax for narrower desktop windows. */ @media (max-width: 1200px){ } /* === JX69 WEB V8.3 — REAL SKILL BAR FIX === Legacy combat-pad layout note removed by V30 input-core rebuild. */ @media (max-width:1200px){ } /* === JX69 WEB V8.4 — CENTER THE REAL SKILL BAR === Force the 5-slot combat skill bar into the centered zone above the chat panel. */ @media (min-width: 768px){ } @media (min-width: 768px) and (max-width: 1200px){ } /* === JX69 WEB V8.5 — TRUE VIEWPORT CENTER FOR REAL SKILL BAR === Previous versions centered against the gameplay child (~896px), not the browser viewport. Use fixed + 50vw so the 5 combat skills sit in the user's marked center box. */ @media (min-width:768px){ } @media (min-width:768px) and (max-width:1200px){ } /* JXWEB V5 ROOTSYNC — mobile/web viewport + skill manager */ @media(max-width:480px){body{overscroll-behavior:none}.jx-world-canvas,.world-canvas,canvas{touch-action:none}} /* JX69 V9 chat visibility rootfix */ /* JX69 V34.8 Nunito global typography contract */ html,body,#app,#app *,#JX69PlayerUIRoot,#JX69PlayerUIRoot *,#JX69PopupHost,#JX69PopupHost *,button,input,select,textarea{font-family:"Nunito","Segoe UI",sans-serif!important} /* JX69 V35.9 LOGIN ART + REAL BUTTONS ROOTFIX */ .jx69-title-v359-root{position:relative;width:100vw;height:100dvh;min-height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#050708;isolation:isolate} .jx69-title-v359-ambient{display:none!important;filter:none!important;transform:none!important} .jx69-title-v359-stage{position:relative;z-index:2;width:min(100vw,56.25dvh);height:min(100dvh,177.777778vw);aspect-ratio:9/16;overflow:hidden;box-shadow:0 0 40px rgba(0,0,0,.72);background:#071015} .jx69-title-v359-master{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none;-webkit-user-drag:none} .jx69-title-v359-button{position:absolute;z-index:5;display:block;margin:0;padding:0;border:0;outline:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;overflow:hidden;box-sizing:border-box;transition:filter .12s ease,transform .09s ease,opacity .12s ease} .jx69-title-v359-button>img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none;-webkit-user-drag:none} .jx69-title-v359-button:hover:not(:disabled){filter:brightness(1.10) saturate(1.06)} .jx69-title-v359-button:active:not(:disabled){filter:brightness(.92);transform:scale(.985)} .jx69-title-v359-button:focus-visible{outline:2px solid rgba(231,205,113,.95);outline-offset:-3px;filter:brightness(1.08)} .jx69-title-v359-button:disabled{cursor:default;filter:grayscale(.42) brightness(.62);opacity:.62} @media (prefers-reduced-motion:reduce){.jx69-title-v359-button{transition:none}} /* JX69 V35.9 PERFORMANCE + LAYER DEDUP ROOTFIX */ .jx30-bag-cell,.jx30-skill-cell,.jx33-storage-item,.jx33-dis-item{contain:layout style} .jx30-bag-grid,.jx30-skill-grid,.jx33-storage-grid,.jx33-dismantle-list{overscroll-behavior:contain} .jx69-title-v359-master{backface-visibility:hidden} /* JX69 V35.11 PLATINUM LED + DETAIL ROOTFIX */ .jx30-detail-v3 .jx30-detail-base{font-size:15px;line-height:1.45;color:#f4efe4} .jx30-detail-v3 .jx30-detail-base li{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45;margin:0 0 6px;padding:0;list-style:none} .jx30-detail-v3 .jx30-detail-base li span{flex:1;min-width:0} .jx30-detail-v3 .jx30-detail-base li b{font-size:15px;white-space:nowrap;color:#f7e6b6} .jx30-bag-cell.jx69-legacy-r-BACH_KIM-disabled,.jx30-eq-slot.jx69-legacy-r-BACH_KIM-disabled,.jx39-slot.jx69-legacy-r-BACH_KIM-disabled{position:relative;box-shadow:0 0 0 1px rgba(216,242,255,.86),0 0 10px rgba(132,212,255,.72),0 0 18px rgba(210,240,255,.52),inset 0 0 12px rgba(216,242,255,.18);animation:jx69-platinum-led 1.9s ease-in-out infinite alternate} .jx30-bag-cell.jx69-legacy-r-BACH_KIM-disabled::after,.jx30-eq-slot.jx69-legacy-r-BACH_KIM-disabled::after,.jx39-slot.jx69-legacy-r-BACH_KIM-disabled::after{content:'';position:absolute;inset:1px;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(245,252,255,.62),inset 0 0 12px rgba(165,222,255,.34)} @keyframes jx69-platinum-led{0%{box-shadow:0 0 0 1px rgba(216,242,255,.78),0 0 8px rgba(116,201,255,.58),0 0 14px rgba(210,240,255,.42),inset 0 0 9px rgba(216,242,255,.14)}100%{box-shadow:0 0 0 1px rgba(232,247,255,.95),0 0 14px rgba(150,222,255,.82),0 0 24px rgba(225,246,255,.62),inset 0 0 14px rgba(232,247,255,.22)}} /* JX69 V35.12 OFFLINE DELEGATE + PLATINUM RGB BORDER ROOTFIX */ .jx30-detail-v3 .jx30-detail-section:first-of-type>h4{font-size:17px;line-height:1.2} .jx30-detail-v3 .jx30-detail-base{font-size:14px;line-height:1.38;color:#f0eee8} .jx30-detail-v3 .jx30-detail-base li{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;font-size:14px;line-height:1.38;margin:0 0 4px;padding:0;list-style:none} .jx30-detail-v3 .jx30-detail-base li b{font-size:14px;white-space:nowrap;color:#f1deb0} .jx30-detail-v3 .jx30-detail-section:nth-of-type(2)>h4{font-size:19px;line-height:1.22;color:#f3dd9b;text-shadow:0 0 8px rgba(243,221,155,.25)} .jx30-detail-v3 .jx30-detail-section:nth-of-type(2) .jx30-detail-options{font-size:16px;line-height:1.48} .jx30-detail-v3 .jx30-detail-section:nth-of-type(2) .jx30-detail-options li{font-size:16px;line-height:1.48} .jx30-bag-cell.jx69-legacy-r-BACH_KIM-disabled,.jx30-eq-slot.jx69-legacy-r-BACH_KIM-disabled,.jx39-slot.jx69-legacy-r-BACH_KIM-disabled{position:relative;isolation:isolate;box-shadow:0 0 0 1px rgba(232,246,255,.85),0 0 12px rgba(124,210,255,.75),0 0 22px rgba(219,241,255,.50),inset 0 0 12px rgba(224,245,255,.16);overflow:visible} .jx30-bag-cell.jx69-legacy-r-BACH_KIM-disabled::before,.jx30-eq-slot.jx69-legacy-r-BACH_KIM-disabled::before,.jx39-slot.jx69-legacy-r-BACH_KIM-disabled::before{content:'';position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:conic-gradient(from 0deg,#eaf8ff 0deg,#8fd5ff 42deg,#ffffff 84deg,#bac6ff 126deg,#d9eeff 168deg,#9ce6ff 210deg,#ffffff 252deg,#b7c2ff 300deg,#eaf8ff 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:jx69-bachkim-rgb-run 1.8s linear infinite, jx69-bachkim-rgb-pulse 1.4s ease-in-out infinite alternate;z-index:2} .jx30-bag-cell.jx69-legacy-r-BACH_KIM-disabled::after,.jx30-eq-slot.jx69-legacy-r-BACH_KIM-disabled::after,.jx39-slot.jx69-legacy-r-BACH_KIM-disabled::after{content:'';position:absolute;inset:1px;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(245,252,255,.72),inset 0 0 13px rgba(165,222,255,.34),0 0 10px rgba(195,236,255,.28);z-index:1} @keyframes jx69-bachkim-rgb-run{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}} @keyframes jx69-bachkim-rgb-pulse{0%{filter:drop-shadow(0 0 3px rgba(143,213,255,.45)) brightness(.98)}100%{filter:drop-shadow(0 0 9px rgba(255,255,255,.72)) brightness(1.12)}} /* JX69 V35.13 BACH KIM HOANG KIM STYLE LED ROOTFIX */ /* Bạch Kim uses the exact Hoàng Kim video motion pattern: static rarity border + one bright tracer running clockwise. */ .jx30-bag-cell.jx69-legacy-r-BACH_KIM-disabled,.jx30-eq-slot.jx69-legacy-r-BACH_KIM-disabled,.jx39-slot.jx69-legacy-r-BACH_KIM-disabled{ position:relative;isolation:isolate;overflow:visible; border-color:rgba(192,211,226,.88)!important; box-shadow:0 0 0 1px rgba(171,193,210,.82),0 0 8px rgba(184,225,255,.38),inset 0 0 8px rgba(221,242,255,.10)!important; animation:jx69-bachkim-hoangkim-pulse 1.6s ease-in-out infinite!important; } .jx30-bag-cell.jx69-legacy-r-BACH_KIM-disabled::before,.jx30-eq-slot.jx69-legacy-r-BACH_KIM-disabled::before,.jx39-slot.jx69-legacy-r-BACH_KIM-disabled::before{ content:'';position:absolute;inset:-2px;border-radius:inherit;padding:2px;pointer-events:none;z-index:3; background:conic-gradient(from 0deg, rgba(175,198,216,.35) 0deg, rgba(175,198,216,.35) 316deg, rgba(222,242,255,.62) 326deg, #ffffff 338deg, #d8f1ff 348deg, rgba(175,198,216,.35) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; transform-origin:center; animation:jx69-bachkim-hoangkim-run 1.6s linear infinite!important; filter:drop-shadow(0 0 4px rgba(230,248,255,.72)); } .jx30-bag-cell.jx69-legacy-r-BACH_KIM-disabled::after,.jx30-eq-slot.jx69-legacy-r-BACH_KIM-disabled::after,.jx39-slot.jx69-legacy-r-BACH_KIM-disabled::after{ content:'';position:absolute;inset:1px;border-radius:inherit;pointer-events:none;z-index:2; box-shadow:inset 0 0 0 1px rgba(235,247,255,.42),inset 0 0 10px rgba(185,226,255,.16)!important; } @keyframes jx69-bachkim-hoangkim-run{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}} @keyframes jx69-bachkim-hoangkim-pulse{0%,100%{box-shadow:0 0 0 1px rgba(171,193,210,.78),0 0 6px rgba(184,225,255,.28),inset 0 0 7px rgba(221,242,255,.08)}50%{box-shadow:0 0 0 1px rgba(218,235,247,.95),0 0 12px rgba(212,239,255,.58),inset 0 0 11px rgba(232,249,255,.15)}} /* Legacy image renderer: same 1.6s Hoàng Kim cadence, platinum palette. */ .platinum-led{ border:2px solid rgba(205,224,238,.9)!important; border-radius:8px; animation:jx69-platinum-image-like-gold 1.6s ease-in-out infinite!important; box-shadow:0 0 0 1px rgba(170,195,214,.9),0 0 8px rgba(191,228,255,.38)!important; } @keyframes jx69-platinum-image-like-gold{0%,100%{box-shadow:0 0 0 1px rgba(170,195,214,.86),0 0 7px rgba(191,228,255,.30)}50%{box-shadow:0 0 0 2px rgba(244,251,255,.98),0 0 15px rgba(222,243,255,.75),0 0 24px rgba(174,217,248,.55)}} /* JX69 V35.14 BACH KIM NON-ROTATING GOLD-STYLE LED ABSOLUTE ROOTFIX */ /* Root cause: V35.12/V35.13 rotated a conic-gradient pseudo-element, so the whole frame visibly spun. Bạch Kim now copies Hoàng Kim's actual mechanism: the frame never transforms; only box-shadow intensity pulses. */ .jx30-bag-cell.jx69-legacy-r-BACH_KIM-disabled,.jx30-eq-slot.jx69-legacy-r-BACH_KIM-disabled,.jx39-slot.jx69-legacy-r-BACH_KIM-disabled{ position:relative;isolation:isolate;overflow:hidden; border-color:#d9e4ec!important; animation:jx69-bachkim-goldstyle-led 1.6s ease-in-out infinite!important; transform:none!important; } .jx30-bag-cell.jx69-legacy-r-BACH_KIM-disabled::before,.jx30-eq-slot.jx69-legacy-r-BACH_KIM-disabled::before,.jx39-slot.jx69-legacy-r-BACH_KIM-disabled::before{ content:none!important;display:none!important;animation:none!important;transform:none!important;background:none!important;filter:none!important; } .jx30-bag-cell.jx69-legacy-r-BACH_KIM-disabled::after,.jx30-eq-slot.jx69-legacy-r-BACH_KIM-disabled::after,.jx39-slot.jx69-legacy-r-BACH_KIM-disabled::after{ content:'';position:absolute;inset:1px;border-radius:inherit;pointer-events:none; animation:none!important;transform:none!important;background:none!important; box-shadow:inset 0 0 0 1px rgba(245,251,255,.56)!important; } @keyframes jx69-bachkim-goldstyle-led{ 0%,100%{box-shadow:0 0 0 2px #c7d3dc,0 0 8px #aebdca} 50%{box-shadow:0 0 0 2px #f7fbff,0 0 16px #dcecf7,0 0 28px #a9c8dd} } .platinum-led{ animation:jx69-bachkim-goldstyle-led 1.6s ease-in-out infinite!important; transform:none!important; border-color:#d9e4ec!important; } /* JX69 V35.16 BACH KIM DOUBLE CHASER LED ABSOLUTE AUTHORITY */ @property --jx69-bk-angle{syntax:"";inherits:false;initial-value:0deg} .jx30-bag-cell.jx69-legacy-r-BACH_KIM-disabled,.jx30-eq-slot.jx69-legacy-r-BACH_KIM-disabled,.jx39-slot.jx69-legacy-r-BACH_KIM-disabled{ position:relative!important;isolation:isolate!important;overflow:hidden!important; border:1px solid rgba(181,204,221,.96)!important; box-shadow:0 0 0 1px rgba(121,165,194,.72),0 0 8px rgba(152,219,255,.28),inset 0 0 8px rgba(232,248,255,.09)!important; animation:jx69-bachkim-base-pulse 1.35s ease-in-out infinite!important; transform:none!important; } .jx30-bag-cell.jx69-legacy-r-BACH_KIM-disabled::before,.jx30-eq-slot.jx69-legacy-r-BACH_KIM-disabled::before,.jx39-slot.jx69-legacy-r-BACH_KIM-disabled::before{ content:''!important;display:block!important;position:absolute!important;inset:-1px!important;border-radius:inherit!important; padding:2px!important;pointer-events:none!important;z-index:4!important; background:conic-gradient(from var(--jx69-bk-angle), transparent 0deg 12deg, #7ddcff 18deg, #f9fdff 27deg, #c9bfff 36deg, transparent 48deg 180deg, #a8edff 188deg, #ffffff 198deg, #bfc8ff 207deg, transparent 220deg 360deg)!important; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important; -webkit-mask-composite:xor!important;mask-composite:exclude!important; animation:jx69-bachkim-double-chaser 1.55s linear infinite!important; transform:none!important;filter:drop-shadow(0 0 3px rgba(220,246,255,.95))!important; } .jx30-bag-cell.jx69-legacy-r-BACH_KIM-disabled::after,.jx30-eq-slot.jx69-legacy-r-BACH_KIM-disabled::after,.jx39-slot.jx69-legacy-r-BACH_KIM-disabled::after{ content:''!important;display:block!important;position:absolute!important;inset:1px!important;border-radius:inherit!important; pointer-events:none!important;z-index:3!important;background:none!important;transform:none!important;animation:none!important; box-shadow:inset 0 0 0 1px rgba(244,252,255,.55),inset 0 0 9px rgba(159,220,255,.16)!important; } @keyframes jx69-bachkim-double-chaser{from{--jx69-bk-angle:0deg}to{--jx69-bk-angle:360deg}} @keyframes jx69-bachkim-base-pulse{0%,100%{box-shadow:0 0 0 1px rgba(121,165,194,.65),0 0 6px rgba(152,219,255,.22),inset 0 0 6px rgba(232,248,255,.07)}50%{box-shadow:0 0 0 1px rgba(207,235,250,.92),0 0 12px rgba(190,232,255,.50),inset 0 0 10px rgba(241,251,255,.13)}} .platinum-led{position:relative!important;animation:jx69-bachkim-base-pulse 1.35s ease-in-out infinite!important;transform:none!important;border-color:#c7d8e4!important;box-shadow:0 0 0 1px rgba(121,165,194,.72),0 0 8px rgba(152,219,255,.28)!important} /* === assets/jx69-v30-master.css === */ /* JX69 V13 CONSOLIDATED CLASSIC UI — one production stylesheet */ :root{ --jx69-z-world:0; --jx69-z-world-label:20; --jx69-z-hud:100; --jx69-z-tooltip:200; --jx69-z-window:300; --jx69-z-modal:400; --jx69-z-critical:500; --jx69-v9-ink:#050806; --jx69-v9-deep:#0a0e0b; --jx69-v9-jade:#26382d; --jx69-v9-jade2:#66705d; --jx69-v9-gold:#d8bd55; --jx69-v9-text:#e6e0bd; --jx69-v9-muted:#a9a27d; --jx69-v9-line:#77725c; --jx69-v9-cell:#0a0d0b; } /* ------------------------------------------------------------------ COMMON CLASSIC MATERIALS ------------------------------------------------------------------- */ .v9-ornate{ background: linear-gradient(rgba(21,29,22,.97),rgba(10,14,11,.98)), url("./jxweb/ui/panel.png") center/100% 100% no-repeat; border:1px solid #6f745d; box-shadow:inset 0 0 0 1px #0b0e0b,inset 0 0 12px #000b,0 2px 4px #0009; } .v9-frame-title{ height:31px;display:flex;align-items:center;justify-content:center;position:relative; color:#f5d95c;font:700 16px/1 Georgia,"Times New Roman",serif; background:linear-gradient(#9a9b7b 0,#7f826a 15%,#6f7460 50%,#858a72 84%,#9b9a7a 100%); border:1px solid #262d24;box-shadow:inset 0 0 0 1px #b7b99c,inset 0 -1px 0 #363d32; text-shadow:1px 1px 0 #1a1c14,-1px -1px 0 #6c6740; } .v9-frame-title::before,.v9-frame-title::after{content:"✥";position:absolute;top:6px;color:#3e483a;font-size:13px;text-shadow:none} .v9-frame-title::before{left:8px}.v9-frame-title::after{right:8px} .v9-close{ position:absolute!important;right:2px!important;top:3px!important;width:24px!important;height:24px!important; border:1px solid #454b3d!important;background:#171d17!important;color:#d9c76a!important;box-shadow:inset 0 0 0 1px #090c09!important; cursor:pointer!important;pointer-events:auto!important; } .v9-small-btn,.v9-footer button,.v9-system-menu button{ border:1px solid #5e6451;background:linear-gradient(#2b342a,#111712);box-shadow:inset 0 0 0 1px #090c09; color:#d9d1a7;cursor:pointer;pointer-events:auto;min-height:21px;padding:2px 7px; } .v9-small-btn:active,.v9-footer button:active,.v9-system-menu button:active{transform:translateY(1px);filter:brightness(1.14)} /* ------------------------------------------------------------------ TOP STATUS — master geometry 543 × 35 ------------------------------------------------------------------- */ .v9-level{font-weight:700;color:#f2e06c;text-align:center} .v9-statusbar{position:relative;height:13px;border:1px solid #020302;background:#090b09;box-shadow:inset 0 0 0 1px #555b4c;overflow:hidden} .v9-statusbar>i{position:absolute;inset:0 auto 0 0;width:0;background:#2fb25f} .v9-statusbar.hp>i{background:linear-gradient(#46e272,#1e9c49)} .v9-statusbar.mp>i{background:linear-gradient(#59a2f5,#2a63b7)} .v9-statusbar.xp>i{background:linear-gradient(#d0b349,#846d22)} .v9-statusbar>span{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:700 8px/1 Tahoma,Arial;text-shadow:1px 1px #000} .v9-rank{text-align:right;color:#e6d57a;font-weight:700;overflow:hidden;text-overflow:ellipsis} /* ------------------------------------------------------------------ MINIMAP ------------------------------------------------------------------- */ #MinimapMount{ position:absolute;right:5px;top:3px;width:160px;height:119px;pointer-events:auto; border:3px ridge #7e806b;background:#111713;box-shadow:0 2px 7px #000b;overflow:hidden; } .v9-minimap-map{position:absolute;inset:17px 0 17px;background:radial-gradient(circle at 55% 45%,#74856f 0,#576554 35%,#3a4638 65%,#263027 100%);opacity:.92} .v9-minimap-map::after{content:"◆";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#ffe569;font-size:11px;text-shadow:0 0 4px #000} .v9-minimap-title{position:absolute;left:0;right:0;top:0;height:17px;padding:2px 5px;color:#9df765;font-weight:700;background:#0a0e0bdd;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .v9-minimap-coords{position:absolute;left:0;right:0;bottom:0;height:17px;padding:2px 5px;color:#56ff62;background:#050805e6;text-align:right;font-size:9px} /* ------------------------------------------------------------------ CHAT — no permanent giant box ------------------------------------------------------------------- */ /* ------------------------------------------------------------------ BOTTOM COMPOSITION — 354×48 + 99×81 + 337×39 ------------------------------------------------------------------- */ .v9-quick-slot{position:relative;min-width:0;border:1px solid #344137!important;background:#07100b!important;padding:1px!important;cursor:pointer!important} .v9-quick-slot::before{content:attr(data-key);position:absolute;left:4px;top:3px;color:#53816e;font-size:10px;z-index:2} .v9-quick-slot img{width:100%;height:100%;object-fit:contain}.v9-quick-slot b{position:absolute;right:2px;bottom:1px;color:#d6e54a;font-size:9px}.v9-quick-slot.empty{cursor:default!important} .v9-primary-skill{position:relative;border:1px solid #3a493d!important;background:#07100b!important;padding:2px!important;cursor:pointer!important}.v9-primary-skill img{width:100%;height:100%;object-fit:cover}.v9-primary-skill span{position:absolute;right:1px;bottom:0;background:#000a;color:#fff;font-size:8px;padding:1px 2px} .v9-utility-label{display:grid;place-items:center;border:1px solid #222d25;background:#0a0e0b;color:#ded49d;font-weight:700;font-size:11px} .v9-auto{height:30px;border:1px solid #4c5a4b!important;background:#07100b!important;color:#50d8df!important;cursor:pointer!important;font-weight:700!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v9-auto.on{color:#f3dd67!important;border-color:#9c8944!important;box-shadow:inset 0 0 8px #ad7c1d55} .v9-settings{height:30px;border:1px solid #4b554a!important;background:#07100b!important;color:#d4c66f!important;cursor:pointer!important;font-size:15px!important;padding:0!important} /* ------------------------------------------------------------------ WORLD OVERLAY ANNOUNCEMENTS ------------------------------------------------------------------- */ /* ------------------------------------------------------------------ WINDOW LAYER ------------------------------------------------------------------- */ #WindowLayer{position:absolute;inset:0;z-index:var(--jx69-z-window);pointer-events:none} .v9-window{pointer-events:auto;position:absolute;background:linear-gradient(#68715e,#20261f 7%,#141914 93%,#626956);border:3px ridge #7b806a;box-shadow:0 5px 18px #000d;color:#e7dfb7;overflow:hidden} .v9-footer{height:28px;display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:3px 4px;background:linear-gradient(#6c725f,#515747);border-top:1px solid #252c24} /* ------------------------------------------------------------------ CHARACTER / EQUIPMENT — 422 × 408 ------------------------------------------------------------------- */ .v9-exp-line{height:13px;margin-top:2px;position:relative;border:1px solid #313a30;background:#050805}.v9-exp-line i{display:block;height:100%;background:#7c6320}.v9-exp-line span{position:absolute;inset:0;display:grid;place-items:center;font-size:8px;color:#e9e2c4} .v9-plus{width:14px!important;height:14px!important;min-height:0!important;padding:0!important;border:1px solid #6c6f55!important;background:#191f18!important;color:#ffd450!important;font:700 11px/12px Arial!important;cursor:pointer!important} /* ------------------------------------------------------------------ INVENTORY — companion classic window ------------------------------------------------------------------- */ /* ------------------------------------------------------------------ SYSTEM MENU ------------------------------------------------------------------- */ .v9-system-menu{right:10px;bottom:48px;width:248px;max-height:390px;padding:7px;display:grid;grid-template-columns:repeat(2,1fr);gap:4px;background:#0a0f0beF;border:2px ridge #777b64;box-shadow:0 5px 18px #000d}.v9-system-menu h3{grid-column:1/-1;margin:0 0 2px;color:#e5d66e;font:700 14px Georgia}.v9-system-menu button{min-height:28px;text-align:left} .v9-aura-menu{width:330px}.v9-aura-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr);gap:3px;max-height:250px;overflow:auto}.v9-aura-grid button.on{color:#ffe36b;border-color:#aa934b;box-shadow:inset 0 0 7px #9a752d55} /* ------------------------------------------------------------------ MOBILE / TABLET — one root, reflow not global scale ------------------------------------------------------------------- */ @media (max-width:900px){ .v9-rank{display:none} #MinimapMount{width:116px;height:88px}.v9-minimap-map{inset:16px 0 15px} } @media (max-width:520px){ .v9-statusbar{height:12px} #MinimapMount{top:35px;right:4px;width:104px;height:75px} .v9-quick-slot::before{font-size:8px;left:2px;top:2px} .v9-utility-label{font-size:9px} .v9-auto{font-size:8px}.v9-settings{font-size:12px} } /* ===== V12/V13 FINAL OVERRIDES ===== */ /* JX69 MASTER ULTRA FINAL — user supplied classic assets are visual authority */ .v9-level{font-size:9px;color:#fff;font-weight:400;text-align:left;padding-left:3px} .v9-statusbar{height:11px;border:0;background:#001813;box-shadow:none;margin-top:1px} .v9-statusbar.hp>i{background:url("./jxweb/ui/bar_hp.png") left center/106px 11px repeat-x} .v9-statusbar.mp>i{background:url("./jxweb/ui/bar_mp.png") left center/106px 11px repeat-x} .v9-statusbar.xp>i{background:linear-gradient(#35b29b,#1b6c62)} .v9-statusbar>span{font-size:7px} .v9-rank{font-size:9px;color:#eee;text-align:left} .v10-glyph{display:grid;place-items:center;width:100%;height:100%;color:#71d8f1;font:700 17px serif;text-shadow:0 0 3px #123} /* one click = one action visual feedback */ @media (max-width:900px){ } @media (max-width:620px){ } /* ========================================================================== */ /* JX69 V12 — HUD / POPUP / MINIMAP / SURVIVAL ROOTFIX */ /* ========================================================================== */ :root{ --jx69-v12-top-h:24px; --jx69-v12-popup-max-h:82dvh; } /* ONE TOP STATUS OWNER / ONE GRID */ /* REAL MAP-RELATIVE MINIMAP */ .v12-minimap-title{position:absolute;z-index:2;left:0;right:0;top:0;height:17px;padding:2px 5px;color:#a6f36f;font-weight:700;background:#071008e8;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .v12-minimap-map{position:absolute;left:0;right:0;top:17px;bottom:17px;background:#172019 center/cover no-repeat;overflow:hidden;filter:saturate(.82) brightness(.82)} .v12-minimap-map::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 17px #000b;pointer-events:none} .v12-player-marker{position:absolute;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);background:#ffe96c;border:1px solid #130f04;box-shadow:0 0 0 1px #f9f4bd,0 0 6px #ffd94f;z-index:3} .v12-minimap-coords{position:absolute;left:0;right:0;bottom:0;height:17px;padding:2px 5px;color:#66f174;background:#050805e8;text-align:right;font-size:9px} /* LOWER-LEFT NOTIFICATION, 3 lines by default */ /* ONE CENTERED POPUP HOST */ #JX69PopupHost{ position:fixed;inset:0;z-index:var(--jx69-z-window);display:grid;place-items:center; pointer-events:none;padding:clamp(8px,2vh,22px) clamp(6px,2vw,24px); } #JX69PopupHost:empty{display:none} #JX69PopupHost .v12-popup-group{ pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:8px; width:min(96vw,1000px);max-height:min(var(--jx69-vv-height,100dvh),100dvh);position:relative; } #JX69PopupHost .v12-popup-group>.v9-window{ position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important; transform:none!important;flex:0 0 auto;max-height:var(--jx69-v12-popup-max-h);margin:0; } #JX69PopupHost .v12-popup-group.dual{align-items:center} body.jx69-popup-open #JX69PopupHost{pointer-events:auto} /* Center legacy modal shells that may still be used by non-V12 systems. */ /* CHARACTER: 57/43, no dead right-side panel */ /* INVENTORY centered by PopupHost */ /* SURVIVAL HUD */ .v12-surv-exp{height:9px;border:1px solid #303c31;background:#030604;overflow:hidden}.v12-surv-exp i{display:block;height:100%;background:linear-gradient(90deg,#4caf74,#9fe16f)} .v12-upgrade-win{width:min(560px,92vw);height:auto!important;max-height:80dvh;padding-bottom:8px}.v12-upgrade-win>p{padding:8px 10px;margin:0;color:#bdb58f}.v12-upgrade-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:6px 10px 10px}.v12-upgrade-grid button{min-height:92px;padding:8px;border:2px ridge #6e715b;background:linear-gradient(#253127,#0d120e);color:#f0dda0;cursor:pointer}.v12-upgrade-grid b,.v12-upgrade-grid small{display:block}.v12-upgrade-grid small{margin-top:5px;color:#91d8b3;font-size:9px} .v12-reward-win{width:min(420px,92vw);height:auto!important}.v12-reward-body{display:grid;gap:6px;padding:14px}.v12-reward-body b{color:#f1d765;font-size:14px}.v12-reward-body span{color:#dcd4aa} /* Mobile visualViewport-aware reflow, never a global scale hack. */ @media (max-width:900px){ .v12-minimap-map{top:16px;bottom:15px}.v12-minimap-title{height:16px}.v12-minimap-coords{height:15px} #JX69PopupHost{padding:8px 4vw} #JX69PopupHost .v12-popup-group{width:92vw;max-height:min(var(--jx69-vv-height,100dvh),100dvh);flex-wrap:nowrap} #JX69PopupHost .v12-popup-group.dual{align-items:center;overflow:auto;justify-content:flex-start} } @media (max-width:620px){ :root{--jx69-v12-popup-max-h:80dvh} #JX69PopupHost{padding:calc(env(safe-area-inset-top,0px) + 6px) 4vw calc(env(safe-area-inset-bottom,0px) + 6px)} #JX69PopupHost .v12-popup-group{width:92vw;max-height:min(var(--jx69-vv-height,100dvh),100dvh);overflow:auto;align-items:center} #JX69PopupHost .v12-popup-group.dual{display:grid;grid-auto-flow:column;grid-auto-columns:92vw;overflow:auto;scroll-snap-type:x mandatory;justify-content:start} #JX69PopupHost .v12-popup-group.dual>.v9-window{scroll-snap-align:center} .v12-upgrade-grid{grid-template-columns:1fr}.v12-upgrade-grid button{min-height:56px} } #JX69PopupHost>.jx8-overlay{pointer-events:auto!important;position:absolute!important;inset:0!important;display:none!important;align-items:center!important;justify-content:center!important;padding:8px!important} #JX69PopupHost>.jx8-overlay.on{display:flex!important} #JX69PopupHost>.jx8-overlay .jx8-shell{max-height:min(82dvh,var(--jx69-vv-height,100dvh));overflow:hidden} #JX69PopupHost>.jx8-overlay .jx8-body{max-height:calc(min(82dvh,var(--jx69-vv-height,100dvh)) - 70px);overflow:auto} /* ========================================================================== */ /* JX69 V13 — MASTER UI / HUD / HUB / PLAYER LAYOUT REBUILD */ /* Visual master: classic wuxia MMORPG references A/B/C. */ /* ONE mounted JX69ClassicUIRoot; no added overlay runtime owner. */ /* ========================================================================== */ :root{ --jx69-v13-bronze:#817659; --jx69-v13-bronze-hi:#b9aa78; --jx69-v13-jade:#17231b; --jx69-v13-jade-2:#253329; --jx69-v13-ink:#060906; --jx69-v13-gold:#e1c75e; --jx69-v13-ivory:#e7dfbd; --jx69-v13-muted:#a99f78; } /* -------- ONE COMPACT GAMEPLAY COMPOSITION -------- */ /* Bottom: item belt / five real combat skills / menu. No duplicate skill cluster. */ .v13-auto-state{ height:32px;display:grid;place-items:center;border:1px solid #3d493f;background:#07100b;color:#66cbd4; font:700 8px Tahoma;white-space:nowrap;text-shadow:1px 1px #000; } .v13-auto-state.on{color:#f4dc68;border-color:#897542;box-shadow:inset 0 0 6px #a67c2e55} /* -------- POPUP HOST / SHARED CLASSIC SHELL -------- */ #JX69PopupHost{padding:clamp(10px,2vh,22px) clamp(8px,2vw,28px)} #JX69PopupHost .v12-popup-group{width:min(96vw,980px);gap:7px} #JX69PopupHost .v9-frame-title{ height:31px;color:#f0d86a;font:700 14px/1 Georgia,"Times New Roman",serif; background:linear-gradient(#898a70,#656b59 15%,#39443a 51%,#676d5a 86%,#929077); border-color:#252c25;text-shadow:1px 1px #14170f,-1px -1px #6d663c; } .v13-window-footer{height:30px;display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:3px 6px;border-top:1px solid #454a3c;background:#111712} .v13-window-footer button,.v13-settings-grid button,.v13-system-shortcuts button{ min-height:22px;border:1px solid #5b624f;background:linear-gradient(#283127,#101612);color:#dbd2a7;cursor:pointer;padding:3px 7px; } /* -------- GIANG HỒ / ACTIVITY BOARD — REFERENCE A -------- */ #JX69PopupHost .v13-giangho-win{width:min(510px,92vw);height:min(560px,78dvh);display:flex;flex-direction:column;overflow:hidden} .v13-gh-shortcuts{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:7px;border-bottom:1px solid #3f473b;background:#101710} .v13-gh-shortcuts button{height:48px;display:grid;grid-template-columns:30px 1fr;align-items:center;gap:5px;padding:3px;border:1px solid #465144;background:#0a100b;color:#d8d0a3;cursor:pointer} .v13-gh-shortcuts button span{display:grid;place-items:center;width:28px;height:28px;border:1px solid #56614e;background:#131b15;color:#e3ca62;font:700 9px Tahoma} .v13-gh-shortcuts button b{font-size:9px;text-align:left} .v13-gh-status{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:4px 8px;border-bottom:1px solid #343c32;background:#171f18;color:#aaa27d;font-size:9px} .v13-gh-status b{color:#e2d06a} .v13-gh-list{flex:1;min-height:0;overflow:auto;padding:6px;background:#0a100b} .v13-gh-row{width:100%;min-height:48px;display:grid;grid-template-columns:36px minmax(0,1fr) 18px;align-items:center;gap:7px;margin-bottom:4px;padding:4px 6px;border:1px solid #3b463c;background:linear-gradient(90deg,#1a251d,#0d130f);color:#dcd3aa;cursor:pointer;text-align:left} .v13-gh-row:hover,.v13-gh-row:focus-visible{border-color:#837447;background:linear-gradient(90deg,#253329,#111913)} .v13-gh-row>span:nth-child(2){display:grid;gap:2px;min-width:0}.v13-gh-row b{color:#e7d367;font-size:10px}.v13-gh-row small{color:#a8a17d;font-size:8px;white-space:normal}.v13-gh-row i{font-style:normal;color:#b8a75e;font-size:18px;text-align:right} .v13-gh-glyph{display:grid!important;place-items:center!important;width:34px;height:34px;border:1px solid #505a4b;background:#0c120e;color:#6dd7e7!important;font:700 8px Tahoma} /* -------- VÕ CÔNG — REFERENCE B: VERTICAL SCROLLABLE LIST -------- */ .v13-assign{margin-right:auto;display:flex;align-items:center;gap:2px;font-size:8px}.v13-assign button{width:25px} /* -------- SETTINGS / SYSTEM WINDOWS -------- */ #JX69PopupHost .v13-settings-win{width:min(390px,92vw);max-height:76dvh;display:flex;flex-direction:column;overflow:hidden} .v13-settings-grid,.v13-system-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:8px;overflow:auto} .v13-system-shortcuts button{min-height:58px;text-align:left;display:grid;gap:3px}.v13-system-shortcuts b{color:#e3d069}.v13-system-shortcuts small{color:#aaa27e;font-size:8px} #JX69PopupHost .v13-settings-win .v9-aura-grid{padding:8px;max-height:56dvh;overflow:auto} /* Character remains dense and uses the same shell language; never leave dead space. */ /* Hide obsolete V12 skill card visuals because V13 owns the skill list. */ /* -------- DESKTOP CLASSIC PROFILE -------- */ /* -------- MOBILE CLASSIC PROFILE — REAL REFLOW, NOT SCALE -------- */ @media (max-width:700px),(pointer:coarse) and (max-width:900px){ #JX69PopupHost{padding:calc(env(safe-area-inset-top,0px) + 6px) 4vw calc(env(safe-area-inset-bottom,0px) + 6px)} #JX69PopupHost .v12-popup-group{width:92vw;max-height:min(var(--jx69-vv-height,100dvh),100dvh)} .v13-gh-shortcuts{grid-template-columns:repeat(4,1fr);gap:2px;padding:5px}.v13-gh-shortcuts button{height:42px;display:block;text-align:center}.v13-gh-shortcuts button span{margin:0 auto 2px;width:22px;height:20px}.v13-gh-shortcuts button b{font-size:7px;text-align:center} .v13-gh-status{gap:6px;font-size:8px;padding:3px 6px} .v13-gh-row{min-height:44px;grid-template-columns:32px minmax(0,1fr) 14px;gap:5px}.v13-gh-glyph{width:30px;height:30px} .v13-assign{width:100%;margin-right:0} } @media (max-width:420px){ .v13-auto-state{font-size:7px} } /* -------- LEGACY FEATURE WINDOWS: VISUAL CONSOLIDATION INTO V13 LANGUAGE -------- These remain feature runtimes, but their visible shells inherit the same classic rectangular material language and centered placement. No extra UI owner is added. */ @media (max-width:700px){ } #JX69RuntimePopupLayer,#JX69LegacyPopupLayer{position:absolute;inset:0;pointer-events:none} #JX69RuntimePopupLayer{display:grid;place-items:center;padding:inherit} #JX69RuntimePopupLayer>.v12-popup-group{pointer-events:auto} /* ========================================================================== */ /* JX69 V15 — USER-PROVIDED UI ASSET MASTER LOCK */ /* The PNG art is authoritative. Runtime logic is aligned above the art using */ /* one native coordinate system and normalized hotspots. */ /* ========================================================================== */ :root{ --jx69-z-world:0;--jx69-z-actors:10;--jx69-z-world-label:20;--jx69-z-world-fx:30; --jx69-z-joystick:50;--jx69-z-chat:60;--jx69-z-hud:100;--jx69-z-tooltip:200; --jx69-z-backdrop:290;--jx69-z-window:300;--jx69-z-modal:400; --sab:env(safe-area-inset-bottom,0px); } /* -------------------------------------------------------------------------- */ /* TOP STATUS — direct user art */ /* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */ /* TOP SIDE HUDS retain runtime ownership; no duplicate HUD roots. */ /* -------------------------------------------------------------------------- */ .v14-player-summary{display:grid;grid-template-columns:1fr auto;grid-template-rows:15px 14px;gap:1px 4px;align-items:center;overflow:hidden;padding:1px 3px;border:1px solid #303a31;background:#090f0b;color:#cfc79e} .v14-player-summary b{color:#ead36b;font-size:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.v14-player-summary span{font-size:8px;color:#e2ddbf;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.v14-player-summary small{grid-column:1/-1;font-size:7px;color:#8dc7aa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .v14-utility-row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:3px!important;min-height:0!important} .v14-utility-row button.on{border-color:#9c8847!important;color:#f3dd6a!important} /* -------------------------------------------------------------------------- */ /* CHAT */ /* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */ /* BOTTOM HUD — one art composition + normalized transparent interaction layer */ /* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */ /* POPUP FRAME — supplied panel.png as 9-slice / border-image family. */ /* -------------------------------------------------------------------------- */ #JX69PopupHost{z-index:var(--jx69-z-window)!important;display:grid!important;place-items:center!important;pointer-events:none!important} #JX69RuntimePopupLayer,#JX69LegacyPopupLayer{position:absolute!important;inset:0!important;pointer-events:none!important} #JX69RuntimePopupLayer{display:grid!important;place-items:center!important;padding:inherit!important} #JX69RuntimePopupLayer>.v12-popup-group{pointer-events:auto!important} /* Use one centered host, reserve the art HUD's visible region on portrait. */ /* Input/layer contract. */ body.jx69-popup-open #JX69PopupHost{pointer-events:auto!important} #TooltipLayer{z-index:var(--jx69-z-tooltip)!important} #ConfirmModalHost{z-index:var(--jx69-z-modal)!important} /* Small portrait keeps the full supplied composition; no independent menu/skill/item layout. */ @media (max-width:599px) and (orientation:portrait){ } /* ========================================================================== */ /* JX69 V17 FINAL HUD/HUB/PLAYER LAYOUT ROOTSYNC */ /* Reference D/F/G/H/I/J authority. Two active skills only: T/P. */ /* ========================================================================== */ /* Top: one aligned panel; LC is a tiny line directly under Cấp only. */ /* Notification: larger 5–7 line field, lower-left, outside the bottom HUD. */ /* Bottom master: interaction overlays only, all geometry derives from native 2048×682 art. */ /* Character: Reference F is the geometry master (~427×376). */ /* Portrait keeps the same classic hierarchy, only reflowing to safe viewport. */ /* Võ Công: one continuous progression, T/P assignment only. */ /* V17 functional popup families. */ #JX69PopupHost .v17-travel-win,#JX69PopupHost .v17-instance-win,#JX69PopupHost .v17-enhance-win{width:min(430px,92vw)!important;max-height:76dvh!important;display:flex!important;flex-direction:column!important;overflow:hidden!important} .v17-travel-list,.v17-instance-list,.v17-enhance-list{flex:1;min-height:0;overflow:auto;display:grid;gap:4px;padding:5px;background:#080d09} .v17-travel-list button,.v17-instance-list button,.v17-enhance-list button{min-height:42px;border:1px solid #455346;background:#111912;color:#e7dfb7;text-align:left;padding:5px 7px;display:grid;grid-template-columns:1fr;gap:2px;cursor:pointer} .v17-travel-list button.current{border-color:#c9af55}.v17-travel-list button:disabled{opacity:.45;cursor:not-allowed} .v17-travel-list small,.v17-instance-list small,.v17-enhance-list small{font-size:8px;color:#9eaa94} .v17-enhance-wallet{padding:5px 7px;font-size:9px;border-bottom:1px solid #394238;background:#0c120e}.v17-enhance-wallet b{color:#e9d465} .v17-enhance-list button{grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:8px;row-gap:2px;align-items:center;overflow:hidden}.v17-enhance-list button>span{grid-column:1;grid-row:1/4;width:38px;height:38px;display:grid;place-items:center;overflow:hidden}.v17-enhance-list button>b,.v17-enhance-list button>small,.v17-enhance-list button>em{grid-column:2;min-width:0;white-space:normal;overflow-wrap:anywhere}.v17-enhance-list button>b{grid-row:1;font-size:12px;line-height:1.15}.v17-enhance-list button>small{grid-row:2;font-size:9px;line-height:1.25;color:#aeb6a9}.v17-enhance-list button>em{grid-row:3;font-size:9px;line-height:1.2;color:#d5bc70;font-style:normal}.v17-enhance-list img{width:100%;height:100%;object-fit:contain} /* Popups remain centered in usable visualViewport. */ /* The final HUD has no top-left duplicated utility block or right 2×2 quick grid. */ /* V17 paper-doll actor and canonical Lâm An popup. */ #JX69PopupHost .v17-laman-win{width:min(430px,92vw)!important;max-height:76dvh!important;display:flex!important;flex-direction:column!important;overflow:hidden!important} .v17-laman-wallet{padding:5px 7px;font-size:9px;border-bottom:1px solid #394238;background:#0c120e;color:#c8c4a6}.v17-laman-wallet b{color:#e9d465} .v17-laman-list{flex:1;min-height:0;overflow:auto;display:grid;gap:4px;padding:5px;background:#080d09} .v17-laman-list button{min-height:46px;border:1px solid #455346;background:#111912;color:#e7dfb7;text-align:left;padding:5px 7px;display:grid;grid-template-columns:38px 1fr;gap:6px;cursor:pointer} .v17-laman-list button img{width:36px;height:36px;object-fit:contain;align-self:center}.v17-laman-list button span{display:grid;gap:1px;align-content:center}.v17-laman-list button small{font-size:8px;color:#9eaa94}.v17-laman-list button em{font-style:normal;font-size:8px;color:#e9d465} /* ========================================================================== */ /* V18/V19 CANONICAL ROOTSYNC — authoritative final rules in this stylesheet. */ /* ========================================================================== */ #JX69CombatPowerDisplay{position:absolute!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;color:#f0d36a!important;background:transparent!important;border:0!important;overflow:visible!important;white-space:nowrap!important} #JX69CombatPowerDisplay .v19-power-fallback{font:700 10px/1 Georgia,"Times New Roman",serif!important;text-shadow:1px 1px #000!important} /* Bảo Vật hotspot opens the unified Bảo Vật owner. */ /* Inventory V18: readable grid, centered by PopupHost, renderer continues. */ /* Character V18: classic 427×376 desktop master, no clipped slots/title. */ #JX69PopupHost .v18-rebirth-status{position:absolute!important;left:6px!important;bottom:28px!important;color:#cbbd83!important;font-size:7px!important;pointer-events:none!important} /* Realm / Rebirth windows. */ #JX69PopupHost .v18-realm-win,#JX69PopupHost .v18-rebirth-win{width:min(360px,92vw)!important;max-height:74dvh!important;overflow:hidden!important} .v18-realm-body,.v18-rebirth-body{padding:10px!important;display:grid!important;gap:6px!important;background:#09100b!important;font-size:10px!important}.v18-realm-body>div,.v18-rebirth-body>div{display:flex!important;justify-content:space-between!important;gap:12px!important}.v18-realm-body h3{color:#efd56a!important;text-align:center!important;margin:4px!important} .v18-manual-placeholder{width:36px;height:36px;display:grid;place-items:center;border:1px solid #5c684e;background:#171c14;color:#e7d268;font:bold 20px Georgia,serif} /* Scroll owner surfaces. */ /* V18 Ải list is player-facing names only. */ .v17-instance-list button{min-height:36px!important;display:flex!important;align-items:center!important}.v17-instance-list button small{display:none!important} @media (max-width:760px) and (orientation:portrait){ #JX69CombatPowerDisplay .v19-power-fallback{font-size:8px!important} } /* ========================================================================== */ /* JX69 MASTER ROOTSYNC V19 — ALL 11 REQUIREMENTS */ /* ========================================================================== */ /* Req 1: Level sits immediately beside centered HP/MP/EXP; EXP is % at runtime. */ #JX69CombatPowerDisplay .v19-power-fallback{font-size:9px!important;line-height:1.05!important} /* Req 3: larger real minimap; tap/click opens the full real-map panel. */ #JX69PopupHost .v19-map-win{display:flex!important;flex-direction:column!important;overflow:hidden!important} .v19-map-large{position:relative;flex:1;min-height:320px;background-position:center;background-repeat:no-repeat;background-size:contain;background-color:#07100a;border:1px solid #53614c;overflow:hidden} .v19-map-player{position:absolute;width:12px;height:12px;border-radius:50%;background:#e7d552;border:2px solid #221;box-shadow:0 0 0 2px rgba(238,210,67,.3);transform:translate(-50%,-50%)} .v19-map-info{display:flex;justify-content:space-between;gap:8px;padding:6px 8px;font-size:9px;background:#0b120d;border-top:1px solid #394339} .v19-map-info b{color:#e9d36a} /* Req 5: per-window popup size profiles. Runtime variables are set by PopupSizeRegistry. */ #JX69LegacyPopupLayer .jx8-shell[data-popup-profile]{ width:min(var(--jx69-popup-pref-w),calc(100vw - 24px))!important; max-width:min(var(--jx69-popup-max-w),calc(100vw - 24px))!important; height:min(var(--jx69-popup-pref-h),84dvh)!important; max-height:min(var(--jx69-popup-max-h),88dvh)!important; display:flex!important;flex-direction:column!important;overflow:hidden!important; } #JX69LegacyPopupLayer .jx8-shell[data-popup-profile]>.jx8-body{flex:1!important;min-height:0!important;overflow:auto!important;overscroll-behavior:contain!important;touch-action:pan-y!important} #JX69PopupHost .v9-close{right:4px!important;top:3px!important;z-index:4!important} /* Req 5: Character/Inventory content must not clip or freeze the renderer. */ /* Req 6: user-supplied real Rebirth Manual icon. */ .v19-rebirth-manual-icon{width:29px!important;height:27px!important;object-fit:contain!important;image-rendering:auto!important;align-self:center!important;background:transparent!important} .v18-rebirth-manual{grid-template-columns:38px 1fr!important} .v18-manual-placeholder{display:none!important} #TooltipLayer{position:absolute!important;inset:0!important;z-index:300!important;pointer-events:none!important;display:grid!important;place-items:center!important} #TooltipLayer:not(:empty){pointer-events:auto!important;background:rgba(0,0,0,.12)!important} /* Req 9: keep scroll owners stable and touch-safe. */ /* Req 11: realm readable, centralized requirement rows and failure reason. */ #JX69PopupHost .v18-realm-win[data-popup-profile="realm"]{display:flex!important;flex-direction:column!important;overflow:hidden!important} #JX69PopupHost .v18-realm-body{flex:1!important;min-height:0!important;overflow:auto!important} .v19-realm-reason{margin:4px 0 0;padding:5px 7px;border:1px solid #6b423a;background:#20110d;color:#ffb09c;text-align:center} /* Survival Hoàng Kim reward. */ .v19-hk-reward{margin-top:7px;padding:6px;border:1px solid #9b7b27;background:#16150b;display:grid;grid-template-columns:44px 1fr;gap:7px;align-items:center}.v19-hk-reward img{width:42px;height:42px;object-fit:contain}.v19-hk-reward span{display:grid;gap:2px}.v19-hk-reward b{color:#f4d84f}.v19-hk-reward small{color:#c6b98a} @media (max-width:760px) and (orientation:portrait){ #JX69CombatPowerDisplay .v19-power-fallback{font-size:7px!important} .v19-map-large{min-height:55vh} } /* ========================================================================== */ /* JX69 V21 — RESPONSIVE CLASSIC + VÒNG SÁNG + DANH HIỆU FINAL OWNER */ /* ========================================================================== */ :root{ --jx21-safe-top:env(safe-area-inset-top,0px); --jx21-safe-right:env(safe-area-inset-right,0px); --jx21-safe-bottom:env(safe-area-inset-bottom,0px); --jx21-safe-left:env(safe-area-inset-left,0px); } /* Inventory column count is runtime-derived from usable width; CSS never hardcodes desktop count on phone. */ /* Responsive Character: desktop/tablet use bounded two-column paper doll; phone reflows vertically. */ /* Vòng Sáng uses the source frames as preview art; no legacy effect UI. */ .v21-vongsang-win{display:flex!important;flex-direction:column!important;overflow:hidden!important} .v21-vongsang-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:6px;overflow-y:auto!important;overflow-x:hidden!important;min-height:0;padding:6px!important;overscroll-behavior:contain;touch-action:pan-y} .v21-vongsang-grid>button{min-height:112px;display:grid;grid-template-rows:78px auto;place-items:center;gap:3px;padding:4px;border:1px solid #445043;background:#09110c;color:#d8d0a1;overflow:hidden} .v21-vongsang-grid>button:first-child{min-height:36px;grid-template-rows:auto;grid-column:1/-1} .v21-vongsang-grid>button.on{border-color:#d8bd5f;box-shadow:inset 0 0 0 1px #75652d} .v21-vongsang-grid>button.locked{opacity:.45} .v21-vongsang-grid img{width:76px;height:76px;object-fit:contain;display:block} .v21-vongsang-grid span{font-size:9px;line-height:1.15;text-align:center} /* Danh Hiệu lives inside Thành Tựu & Danh Hiệu; one responsive source-driven list. */ .v21-title-grid{display:grid;gap:5px;margin-top:4px} .v21-title-row{display:grid;grid-template-columns:112px minmax(0,1fr) auto;align-items:center;gap:7px;padding:5px;border:1px solid #3f493d;background:#0b120d} .v21-title-row.on{border-color:#ad9147;background:#15170d} .v21-title-preview{height:48px;display:grid;place-items:center;overflow:hidden} .v21-title-preview img{max-width:110px;max-height:48px;object-fit:contain} .v21-title-copy{min-width:0;display:grid;gap:2px}.v21-title-copy b{color:#ead66d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v21-title-copy small{color:#a9b09c} @media (max-width:560px){ .v21-title-row{grid-template-columns:86px minmax(0,1fr) auto;gap:4px}.v21-title-preview{height:42px}.v21-title-preview img{max-width:84px;max-height:42px} .v21-vongsang-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.v21-vongsang-grid>button{min-height:104px} } /* JX69 V30 HUD INPUT CORE CLEAN REBUILD — visual layer only, no interactive DOM. */ .v30-quick-visual,.v30-skill-visual,.v30-auto-visual{position:absolute!important;pointer-events:none!important;background:transparent!important;border:0!important;overflow:hidden!important} .v30-quick-visual img{position:absolute!important;left:18%!important;top:14%!important;width:64%!important;height:64%!important;object-fit:contain!important;pointer-events:none!important} .v30-quick-visual>b{position:absolute!important;right:5%!important;bottom:6%!important;color:#f0e9c8!important;font:700 9px/1 Tahoma,Arial,sans-serif!important;text-shadow:1px 1px #000,-1px -1px #000!important} .v30-skill-visual .v17-cast-icon{position:absolute!important;left:10%!important;top:8%!important;width:80%!important;height:80%!important;object-fit:contain!important;pointer-events:none!important} .v30-skill-visual .cd{position:absolute!important;inset:10%!important;display:grid!important;place-items:center!important;background:rgba(0,0,0,.62)!important;color:#fff!important;font:700 12px/1 Tahoma,Arial,sans-serif!important;text-shadow:1px 1px #000!important;pointer-events:none!important;opacity:0} .v30-auto-visual.on::before{content:"";position:absolute;right:4%;top:8%;width:7px;height:7px;border-radius:50%;background:#d8c65c;box-shadow:0 0 4px #e7d96a} .v30-auto-visual:not(.on)::before{content:"";position:absolute;right:4%;top:8%;width:7px;height:7px;border-radius:50%;background:#435348} [data-jx69-action="equipment.equip"],[data-jx69-action="map.open"]{touch-action:manipulation} #JX69InputDebugOverlay{pointer-events:none!important} /* JX69 V33.6 — Survival Floor Roguelite depth UI. */ #SurvivalHUD{display:none;position:fixed;top:86px;left:50%;transform:translateX(-50%);width:min(720px,calc(100vw - 24px));padding:8px 10px;border:1px solid #8b743d;background:linear-gradient(180deg,rgba(8,17,14,.96),rgba(3,8,7,.94));box-shadow:0 8px 26px rgba(0,0,0,.5),inset 0 0 0 1px rgba(215,184,96,.12);pointer-events:none;color:#e8e0bc;font:11px/1.25 Tahoma,sans-serif} #SurvivalHUD.on{display:block} .v33-survival-title{display:flex;justify-content:space-between;align-items:center;gap:10px}.v33-survival-title>b{color:#f1d778;font-size:13px;letter-spacing:.04em}.v33-survival-title>strong{color:#ffdf69;font-size:15px;text-shadow:0 0 8px rgba(255,213,72,.28)} .v33-survival-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}.v33-survival-meta>span{padding:2px 6px;border:1px solid #55482c;background:#0b100d;color:#cfc49a;border-radius:3px}.v33-survival-meta>span:first-child{color:#fff0a0;border-color:#8b743d} .v33-survival-level{display:grid;grid-template-columns:auto minmax(80px,1fr) auto;align-items:center;gap:7px;margin-top:6px}.v33-survival-level>span{color:#9ee3bd;font-weight:700}.v33-survival-level>small{color:#bdb18a}.v33-survival-level .v12-surv-exp{height:8px} .v33-survival-skill-strip{display:flex;gap:5px;align-items:center;overflow-x:auto;overscroll-behavior:contain;margin-top:7px;padding:2px 1px 3px;pointer-events:auto;scrollbar-width:thin}.v33-survival-skill-card{position:relative;flex:0 0 52px;width:52px;height:58px;padding:2px;border:1px solid #8f793d;background:linear-gradient(#18231d,#080d0a);box-shadow:inset 0 0 0 1px #111;overflow:hidden}.v33-survival-skill-card img{display:block;width:46px;height:46px;object-fit:cover;border:1px solid #3d493d}.v33-survival-skill-card>em{position:absolute;top:2px;left:3px;min-width:14px;padding:0 2px;background:#000c;color:#e7d69b;font-style:normal;font-size:8px;text-align:center}.v33-survival-skill-card .v33-survival-stars{position:absolute;left:2px;right:2px;bottom:1px;justify-content:center;padding:1px 0;background:linear-gradient(transparent,#000e)} .v33-survival-skill-empty{margin-top:6px;padding:5px 7px;border:1px dashed #4b503f;color:#8f967f;text-align:center} .v33-survival-stars{display:flex;gap:0;white-space:nowrap;line-height:1}.v33-survival-stars i{font-style:normal;font-size:9px;color:#40391f;text-shadow:none}.v33-survival-stars i.on{color:#ffd94f;text-shadow:0 0 4px rgba(255,202,41,.55)} .v33-survival-kills{display:block;margin-top:4px;color:#948d72} .v12-upgrade-win{width:min(690px,94vw)!important}.v12-upgrade-win>p b{color:#f1d778}.v12-upgrade-win>.v33-survival-skill-strip{margin:0 10px 4px;padding:5px;border:1px solid #3b493b;background:#07100b} .v33-survival-upgrade{display:grid!important;grid-template-columns:58px minmax(0,1fr)!important;align-items:center!important;gap:8px!important;text-align:left!important;min-width:0}.v33-survival-upgrade>img{width:54px;height:54px;object-fit:cover;border:1px solid #84733e;background:#050805}.v33-survival-upgrade>span:not(.v33-survival-stat-glyph){min-width:0}.v33-survival-upgrade b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v33-survival-upgrade em{display:block;margin-top:2px;color:#9eb69f;font-style:normal;font-size:9px}.v33-survival-upgrade .v33-survival-stars{margin-top:5px}.v33-survival-upgrade.stat{grid-template-columns:42px minmax(0,1fr)!important}.v33-survival-stat-glyph{display:grid;place-items:center;width:40px;height:40px;border:1px solid #7a6430;border-radius:50%;background:#161207;color:#f1d778;font-size:22px} @media(max-width:767px){#SurvivalHUD{top:max(60px,calc(env(safe-area-inset-top,0px) + 52px));width:calc(100vw - 12px);padding:6px 7px;font-size:9px}.v33-survival-title>b{font-size:11px}.v33-survival-title>strong{font-size:13px}.v33-survival-meta{gap:3px}.v33-survival-meta>span{padding:2px 4px}.v33-survival-level{grid-template-columns:auto 1fr auto;gap:4px}.v33-survival-skill-card{flex-basis:46px;width:46px;height:52px}.v33-survival-skill-card img{width:40px;height:40px}.v33-survival-stars i{font-size:8px}.v12-upgrade-grid{grid-template-columns:1fr!important}.v33-survival-upgrade{min-height:72px!important;grid-template-columns:52px minmax(0,1fr)!important}.v33-survival-upgrade>img{width:48px;height:48px}} /* V34.3 mobile notice readability rootfix — modest increase only. */ @media (max-width:900px){ } @media (max-width:520px){ } /* V35.5 persistent system popup layer: Storage/Dismantle are not owned by RuntimePopupLayer. */ #JX69SystemPopupLayer{position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;pointer-events:none!important;padding:inherit!important;z-index:6!important;box-sizing:border-box!important} #JX69SystemPopupLayer>.jx33-system-overlay.on{pointer-events:auto!important;position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;z-index:1!important} body.jx69-popup-open #JX69SystemPopupLayer{pointer-events:none!important} body.jx69-popup-open #JX69SystemPopupLayer>.jx33-system-overlay.on{pointer-events:auto!important} /* V35.9 enhancement mobile containment */ @media(max-width:480px){#JX69PopupHost .v17-enhance-win{width:min(96vw,430px)!important;max-height:82dvh!important}.v17-enhance-list{padding:5px 6px}.v17-enhance-list button{min-height:62px;padding:6px;grid-template-columns:40px minmax(0,1fr)}.v17-enhance-list button>b{font-size:11px}.v17-enhance-list button>small,.v17-enhance-list button>em{font-size:8.5px}} /* === assets/jx69-v30-player-ui.css === */ /* JX69 V3.0 / V30 clean Player UI root — no legacy target-window patches. */ :root{--jx30-top:100;--jx30-minimap:110;--jx30-bottom:120;--jx30-notify:130;--jx30-tooltip:200;--jx30-backdrop:300;--jx30-popup:310;--jx30-confirm:400;--jx30-dev:900} #JX69PlayerUIRoot{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden;font-family:"Nunito","Segoe UI",sans-serif;color:#e8ddb1} #JX69PlayerUIRoot.active{display:block} #JX69HudLayoutRoot{position:absolute;inset:0;pointer-events:none} #TopStatusHUD{position:absolute;z-index:var(--jx30-top);pointer-events:none} #BottomHudArtLayer,.jx30-frame-art{pointer-events:none;user-select:none;-webkit-user-drag:none} #MinimapHUD{position:absolute;z-index:var(--jx30-minimap);pointer-events:auto;touch-action:manipulation} #BottomHUD{position:absolute;inset:0;z-index:var(--jx30-bottom);pointer-events:none} #BottomHudArtLayer,#BottomHudDynamicArtLayer,#JX69HudInputSurface{position:absolute;pointer-events:none} #ChatOverlay,#GameStatusOverlay,#SurvivalHUD{z-index:var(--jx30-notify)} #JX69PopupHost{position:fixed;inset:0;pointer-events:none} #TooltipLayer{position:fixed;inset:0;z-index:var(--jx30-tooltip);pointer-events:none} #JX69LegacyPopupLayer,#JX69RuntimePopupLayer{position:fixed;inset:0;z-index:var(--jx30-popup);pointer-events:none;display:grid;place-items:center;padding:12px;box-sizing:border-box} #JX69RuntimePopupLayer>* ,#TooltipLayer>* ,#JX69LegacyPopupLayer>.on{pointer-events:auto} #ConfirmModalHost{position:fixed;inset:0;z-index:var(--jx30-confirm);pointer-events:none} .jx69-popup-open #WorldCanvas,.jx69-popup-open #BottomHUD,.jx69-popup-open #MinimapHUD{pointer-events:none} #JX69InputDebugOverlay{z-index:var(--jx30-dev)} /* === assets/jx69-v33-popup-system.css === */ /* Canonical popup skins; old Character V33/V35.9 geometry removed. */ :root{ --jx30-frame-text:#eadfb5;--jx30-frame-gold:#e7ce6e;--jx30-frame-dim:#a9a17d; --jx30-frame-bg:#07100b;--jx30-frame-line:#59604e;--jx30-frame-cell:#0d1711; } .v12-popup-group{display:grid;place-items:center;gap:12px;max-width:100%;max-height:100%;pointer-events:none} .v12-popup-group>*{pointer-events:auto} .jx30-frame{position:relative;box-sizing:border-box;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;color:var(--jx30-frame-text);text-shadow:1px 1px #000;background:#07100b;isolation:isolate} .jx30-frame::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,#283028 0,#0b120d 15%,#070b08 85%,#252a22 100%)} .jx30-frame::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.92;background:radial-gradient(circle at 50% 38%,rgba(81,93,72,.18),transparent 55%)} .jx30-frame-portrait{width:clamp(min(var(--jx69-popup-min-w,620px),94vw),min(var(--jx69-popup-pref-w,760px),94vw),min(var(--jx69-popup-max-w,840px),96vw));height:clamp(min(var(--jx69-popup-min-h,540px),88dvh),min(var(--jx69-popup-pref-h,650px),90dvh),min(var(--jx69-popup-max-h,760px),92dvh));border:30px solid transparent;border-image-source:url("./ui-frame-v3/portrait_frame_cropped.png");border-image-slice:118 74 115 74 fill;border-image-width:30px;border-image-repeat:stretch} .jx30-frame-wide{width:clamp(min(var(--jx69-popup-min-w,560px),94vw),min(var(--jx69-popup-pref-w,680px),95vw),min(var(--jx69-popup-max-w,760px),96vw));height:clamp(min(var(--jx69-popup-min-h,340px),78dvh),min(var(--jx69-popup-pref-h,470px),82dvh),min(var(--jx69-popup-max-h,620px),88dvh));border:24px solid transparent;border-image-source:url("./ui-frame-v3/wide_frame_cropped.png");border-image-slice:104 105 104 105 fill;border-image-width:24px;border-image-repeat:stretch} .jx30-frame-art{display:none} .jx30-frame-header{height:44px;display:flex;align-items:center;justify-content:center;position:relative;padding:0 48px;border-bottom:1px solid rgba(179,158,90,.62);background:linear-gradient(180deg,rgba(142,135,105,.62),rgba(68,70,56,.52));box-sizing:border-box;min-width:0} .jx30-frame-header h2{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ffe27b;font:700 21px/1 Georgia,"Times New Roman",serif;letter-spacing:.4px;text-shadow:1px 1px #000,-1px -1px #4c3a11} .jx30-close{position:absolute;right:5px;top:5px;width:32px;height:32px;padding:0;border:1px solid #958257;background:linear-gradient(#313c32,#121a14);color:#ffe88b;font:700 18px/28px Tahoma;cursor:pointer;touch-action:manipulation;box-sizing:border-box} .jx30-close:active{transform:translateY(1px)} .jx30-frame-content{min-width:0;min-height:0;overflow:auto;padding:10px 12px;box-sizing:border-box;overscroll-behavior:contain;touch-action:pan-y} .jx30-frame-footer{min-height:42px;display:flex;align-items:center;justify-content:center;gap:7px;padding:5px 10px;border-top:1px solid rgba(179,158,90,.62);background:linear-gradient(180deg,rgba(68,70,56,.52),rgba(142,135,105,.62));box-sizing:border-box;flex-wrap:nowrap} .jx30-frame button:not(.jx30-close){min-height:29px;border:1px solid #77745f;background:linear-gradient(180deg,#26362d,#0a1711);color:#ede0ae;font:700 11px Tahoma,Arial;box-shadow:inset 0 0 0 1px #0a0f0c;cursor:pointer;touch-action:manipulation;text-shadow:1px 1px #000} .jx30-frame button:not(.jx30-close):hover:not(:disabled),.jx30-frame button.on{border-color:#d5bc64;color:#fff0a0;background:linear-gradient(180deg,#405846,#13261b)} .jx30-frame button:disabled{opacity:.42;cursor:default} .jx30-frame-footer>button{min-width:86px;padding:0 10px} .jx30-bag-grid{display:grid;grid-template-columns:repeat(var(--jx30-bag-cols,7),minmax(42px,1fr));grid-auto-rows:minmax(48px,1fr);gap:4px;overflow-y:auto;height:calc(100% - 34px);padding:3px} .jx30-bag-cell{position:relative;min-width:0;min-height:48px;padding:2px} .jx30-bag-cell img{width:88%;height:88%;object-fit:contain} .jx30-bag-cell strong,.jx30-bag-cell em{position:absolute;right:2px;font-size:8px} .jx30-bag-cell .jx30-item-qty{right:3px;bottom:3px;z-index:12;display:block;max-width:calc(100% - 6px);padding:1px 4px;border-radius:3px;background:rgba(0,0,0,.78);color:#f8f0cd;font:800 10px/14px Tahoma,Arial,sans-serif;letter-spacing:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:clip;text-shadow:1px 1px #000;box-sizing:border-box;pointer-events:none} .jx30-bag-cell em{top:1px;color:#ffe36b;font-style:normal} .jx30-wallet{height:30px;display:flex;justify-content:space-between;align-items:center;padding:0 6px;color:#d8c77e;font-size:10px} .jx30-skill-v3 .jx30-frame-content{display:grid;grid-template-rows:34px minmax(0,1fr);overflow:hidden;padding:8px 9px} .jx30-skill-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px} .jx30-skill-tabs span{display:grid;place-items:center;border:1px solid #686451;background:#121911;font:700 14px Georgia;color:#90886b} .jx30-skill-tabs span.on{color:#f1df9c;background:#33382c} .jx30-skill-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:minmax(88px,1fr);gap:5px;padding-top:6px;min-height:0;overflow-y:auto;align-content:start;overscroll-behavior:contain;touch-action:pan-y} .jx30-skill-cell{position:relative;min-width:0;display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:24px 20px minmax(28px,1fr);gap:2px 5px;padding:5px;border:1px solid #4c5345;background:linear-gradient(145deg,#111b15,#07100b);box-sizing:border-box;overflow:hidden} .jx30-skill-cell.locked{opacity:.5} .jx30-skill-icon{grid-row:1/4;grid-column:1;position:relative;width:46px;height:46px;align-self:start;justify-self:center;border:1px solid #6e755f;background:#040805;overflow:hidden} .jx30-skill-icon img{width:100%;height:100%;object-fit:cover} .jx30-skill-icon span{position:absolute;right:1px;bottom:0;min-width:13px;text-align:center;padding:1px;background:#000c;color:#64d8ff;font:700 8px Tahoma} .jx30-skill-name{grid-column:2;grid-row:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 10px/22px Tahoma;color:#e1cf75} .jx30-skill-meta{grid-column:2;grid-row:2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#989176;font-size:8px;line-height:18px} .jx30-skill-actions{grid-column:1/3;grid-row:3;display:flex;align-items:end;justify-content:flex-end;gap:3px;min-height:28px} .jx30-skill-actions button{min-width:28px;width:auto;min-height:25px;height:25px;padding:0 6px;font-size:9px} .jx30-skill-actions button.on{color:#7eeaff;border-color:#6fd2e1} .jx30-skill-points{margin-left:auto;display:flex;gap:4px;align-items:center;white-space:nowrap;color:#27291f;text-shadow:none;font-size:11px} .jx30-skill-points b{color:#503c00} .jx30-detail-v3 .jx30-frame-content{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto minmax(0,1fr);gap:7px;overflow:hidden} .jx30-detail-head{grid-column:1;display:grid;grid-template-columns:76px minmax(0,1fr);gap:8px;min-width:0} .jx30-detail-head>img{width:72px;height:72px;object-fit:contain;border:1px solid #646756;background:#07100b} .jx30-detail-head h3{margin:0 0 4px;color:#f2d469;font:700 14px Georgia} .jx30-detail-head b,.jx30-detail-head small{display:block;font-size:9px;margin-top:3px} .jx30-detail-meta{grid-column:2;display:grid;grid-template-columns:1fr 1fr;gap:5px} .jx30-detail-meta span{display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid #3e493b;font-size:8px;color:#a8a07e} .jx30-detail-meta b{font-size:9px;color:#e4d9a9;margin-top:2px} .jx30-detail-section{min-width:0;min-height:0;overflow:auto;border-top:1px solid #535747;padding-top:4px} .jx30-detail-section h4{margin:0 0 5px;color:#d8c36a;font-size:10px} .jx30-detail-base{display:grid;grid-template-columns:1fr;gap:3px} .jx30-detail-base>div{display:flex;justify-content:space-between;gap:8px;font-size:9px} .jx30-detail-options{list-style:none;margin:0;padding:0;display:grid;gap:3px} .jx30-detail-options li{display:flex;justify-content:space-between;gap:8px;font-size:9px} .jx30-detail-options li span{min-width:0} .jx30-detail-options li{color:#67d88a} .jx30-detail-options li span{color:#67d88a} .jx30-detail-options b{color:#9af5b2;white-space:nowrap;text-shadow:0 0 4px rgba(92,214,126,.18)} .jx30-detail-set{grid-column:1/3;color:#7ee87e;font-size:9px} .jx30-equip-error{grid-column:1/3;min-height:16px;color:#ff8f71;font-size:9px} #JX69CombatPowerDisplay{display:grid;place-items:center;color:#efd86d;font-size:8px;white-space:nowrap;overflow:visible} @media(max-width:767px){ #JX69RuntimePopupLayer{padding:5px} .jx30-frame-portrait,.jx30-frame-wide{width:min(96vw,var(--jx69-popup-max-w,96vw));height:min(90dvh,var(--jx69-popup-max-h,90dvh));border-width:18px;border-image-width:18px} .jx30-frame-header{height:40px;padding:0 42px} .jx30-frame-header h2{font-size:17px} .jx30-close{width:32px;height:32px;top:3px;right:3px} .jx30-frame-content{padding:7px} .jx30-frame-footer{min-height:44px;padding:4px 6px;gap:4px;overflow-x:auto;justify-content:flex-start} .jx30-frame-footer>button{min-width:70px;min-height:34px} .jx30-skill-v3 .jx30-frame-content{grid-template-rows:38px minmax(0,1fr)} .jx30-skill-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:104px} .jx30-skill-cell{grid-template-columns:44px minmax(0,1fr);grid-template-rows:24px 20px 38px;padding:4px} .jx30-skill-icon{width:42px;height:42px} .jx30-skill-name{font-size:9px} .jx30-skill-actions button{min-height:32px;min-width:32px} .jx30-skill-points{font-size:9px} .jx30-detail-v3 .jx30-frame-content{display:block;overflow-y:auto} .jx30-detail-head,.jx30-detail-meta,.jx30-detail-section,.jx30-detail-set,.jx30-equip-error{margin-bottom:8px} .jx30-detail-meta{display:grid} .jx30-detail-head>img{width:64px;height:64px} } @media(min-width:768px) and (max-width:1024px){ .jx30-frame-portrait{width:min(92vw,var(--jx69-popup-max-w,820px));height:min(86dvh,var(--jx69-popup-max-h,780px))} .jx30-skill-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:96px} } @media(max-height:500px) and (orientation:landscape){ .jx30-frame-portrait,.jx30-frame-wide{width:min(92vw,var(--jx69-popup-max-w,900px));height:88dvh;border-width:16px;border-image-width:16px} .jx30-frame-header{height:34px} .jx30-frame-header h2{font-size:15px} .jx30-frame-footer{min-height:36px} .jx30-frame-content{padding:5px 7px} .jx30-skill-grid{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:86px} } #JX69RuntimePopupLayer>.jx30-detail-v3{grid-area:1/1;z-index:3;align-self:center;justify-self:center} #JX69RuntimePopupLayer>.v12-popup-group{grid-area:1/1;z-index:1} @media(max-width:767px){ .jx30-frame button:not(.jx30-close){min-height:36px} .jx30-close{width:38px;height:38px;line-height:34px} .jx30-frame-footer{min-height:48px} .jx30-frame-footer>button{min-height:40px} .jx30-skill-grid{grid-auto-rows:112px} .jx30-skill-cell{grid-template-rows:24px 20px 42px} .jx30-skill-actions button{min-height:36px;min-width:32px} } @media(max-width:390px) and (orientation:portrait){ .jx30-skill-grid{grid-auto-rows:116px} } #JX69PopupHost{--jx33-popup-gap:8px} #JX69RuntimePopupLayer>.v12-popup-group{width:100%;height:100%;display:grid;place-items:center;pointer-events:none} #JX69RuntimePopupLayer>.v12-popup-group>*{pointer-events:auto} .jx33-inventory-window .jx30-frame-content{display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden!important} .jx33-inventory-grid-zone{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr)} .jx33-inventory-capacity{font:700 9px/1.2 Tahoma;color:#bfb48c;padding:0 4px 4px;text-align:right} .jx33-inventory-capacity b{color:#69ded4} .jx33-item-fit{position:absolute;inset:3px;display:grid;place-items:center;overflow:hidden;pointer-events:none} .jx33-item-fit img{max-width:100%;max-height:100%;width:auto!important;height:auto!important;object-fit:contain!important} .jx33-skill-window .jx30-frame-content{display:grid!important;grid-template-rows:auto auto minmax(0,1fr) auto!important;gap:6px;overflow:hidden!important} .jx33-skill-head{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:4px 6px;border:1px solid #4c5345;background:#09120d;font:9px Tahoma;color:#a99f7e} .jx33-skill-head b{color:#e9d277} .jx30-skill-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px} .jx30-skill-tabs button{min-height:30px;border:1px solid #686451;background:#121911;color:#90886b;font:700 12px Georgia} .jx30-skill-tabs button.on{color:#f1df9c;background:#33382c;border-color:#968357} .jx30-skill-cell{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr) auto!important;padding:4px!important} .jx33-skill-select{display:grid!important;grid-template-columns:46px minmax(0,1fr)!important;grid-template-rows:24px 20px!important;gap:2px 5px!important;align-items:center!important;text-align:left!important;border:0!important;background:transparent!important;padding:0!important;min-height:0!important;color:inherit!important} .jx33-skill-select .jx30-skill-icon{grid-row:1/3;grid-column:1} .jx33-skill-select .jx30-skill-name{grid-column:2;grid-row:1} .jx33-skill-select .jx30-skill-meta{grid-column:2;grid-row:2} .jx30-skill-cell.selected{border-color:#d7ba55;box-shadow:inset 0 0 0 1px #7d6424} .jx30-skill-actions{grid-column:1!important;grid-row:2!important} .jx33-skill-detail{min-height:34px;max-height:64px;overflow:auto;border:1px solid #4a5143;background:#08110c;padding:5px 7px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;font:9px Tahoma} .jx33-skill-detail>b{color:#e7cf72} .jx33-skill-detail>span{min-width:0;color:#b8ad89} .jx33-skill-detail>small{color:#6edbd0;white-space:nowrap} .jx33-skill-detail.empty{display:block;color:#8f896e} .jx33-skill-page{min-width:40px;text-align:center;color:#3a3524;text-shadow:none} .jx30-detail-v3{height:auto!important;min-height:min(var(--jx69-popup-min-h,360px),calc(var(--jx69-vv-height,100dvh) - 18px))!important;max-height:min(var(--jx69-popup-max-h,620px),calc(var(--jx69-vv-height,100dvh) - 18px))!important} .jx30-detail-v3 .jx30-frame-content{overflow:auto!important} .jx33-detail-art{width:72px;height:72px;display:grid;place-items:center;overflow:hidden;border:1px solid #646756;background:#07100b} .jx33-detail-art img{max-width:100%;max-height:100%;width:auto!important;height:auto!important;object-fit:contain!important} .jx30-detail-head>img{display:none!important} .jx30-detail-options li span{overflow-wrap:anywhere} .jx30-detail-options b{flex:0 0 auto} #JX69RuntimePopupLayer .jx33-system-overlay{position:relative!important;inset:auto!important;width:auto!important;height:auto!important;padding:0!important;background:transparent!important} @media (min-width:1025px){ .jx30-skill-grid{grid-template-columns:repeat(5,minmax(0,1fr))}} @media (min-width:768px) and (max-width:1024px){ .jx30-skill-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (max-width:767px) and (orientation:portrait){ .jx30-skill-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important} .jx33-skill-detail{grid-template-columns:1fr;max-height:78px} .jx33-skill-head{font-size:8px} .jx30-detail-v3{width:calc(var(--jx69-vv-width,100vw) - 12px)!important;max-width:calc(var(--jx69-vv-width,100vw) - 12px)!important} .jx33-detail-art{width:64px;height:64px} .jx30-frame-footer{scrollbar-width:none} .jx30-frame-footer::-webkit-scrollbar{display:none}} @media (max-height:500px) and (orientation:landscape){ .jx30-skill-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important} .jx33-skill-detail{max-height:52px} .jx30-detail-v3{max-height:calc(var(--jx69-vv-height,100dvh) - 10px)!important}} #JX69PopupHost #JX69LegacyPopupLayer>.jx33-canonical-popup{position:relative!important;inset:auto!important;width:auto!important;height:auto!important;padding:0!important;background:transparent!important;backdrop-filter:none!important;place-self:center!important;align-items:center!important;justify-content:center!important} #JX69PopupHost #JX69LegacyPopupLayer>.jx33-canonical-popup:not(.on){display:none!important} #JX69PopupHost #JX69LegacyPopupLayer>.jx33-canonical-popup.on{display:grid!important} #JX69PopupHost #JX69LegacyPopupLayer .jx33-canonical-window{box-sizing:border-box!important;display:flex!important;flex-direction:column!important;width:min(var(--jx69-popup-pref-w,680px),calc(var(--jx69-vv-width,100vw) - 20px))!important;max-width:min(var(--jx69-popup-max-w,820px),calc(var(--jx69-vv-width,100vw) - 12px))!important;min-height:min(var(--jx69-popup-min-h,420px),calc(var(--jx69-vv-height,100dvh) - 20px))!important;height:min(var(--jx69-popup-pref-h,620px),calc(var(--jx69-vv-height,100dvh) - 16px))!important;max-height:min(var(--jx69-popup-max-h,800px),calc(var(--jx69-vv-height,100dvh) - 12px))!important;overflow:hidden!important;border:24px solid transparent!important;border-image-source:url("./ui-frame-v3/wide_frame_cropped.png")!important;border-image-slice:104 105 104 105 fill!important;border-image-width:24px!important;border-image-repeat:stretch!important;border-radius:0!important;background:#07100b!important;box-shadow:0 22px 58px #000c!important;color:var(--jx30-frame-text)!important;text-shadow:1px 1px #000!important;transform:none!important} #JX69PopupHost #JX69LegacyPopupLayer .jx33-canonical-window>.jx8-head,#JX69PopupHost #JX69LegacyPopupLayer .jx33-canonical-window>header,#JX69PopupHost #JX69LegacyPopupLayer .jx33-canonical-window>.j11-head{flex:0 0 auto!important;min-height:42px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:6px 10px!important;border:0!important;border-bottom:1px solid rgba(179,158,90,.62)!important;background:linear-gradient(180deg,rgba(142,135,105,.62),rgba(68,70,56,.52))!important;box-sizing:border-box!important} #JX69PopupHost #JX69LegacyPopupLayer .jx33-canonical-window>.jx8-head h2,#JX69PopupHost #JX69LegacyPopupLayer .jx33-canonical-window>header h2,#JX69PopupHost #JX69LegacyPopupLayer .jx33-canonical-window>.j11-head h2{margin:0!important;color:#ffe27b!important;font:700 18px/1 Georgia,"Times New Roman",serif!important;text-shadow:1px 1px #000,-1px -1px #4c3a11!important} #JX69PopupHost #JX69LegacyPopupLayer .jx33-canonical-window>.jx8-head small,#JX69PopupHost #JX69LegacyPopupLayer .jx33-canonical-window>header small{color:#c7bd96!important;font:700 8px/1.2 Tahoma,Arial!important} #JX69PopupHost #JX69LegacyPopupLayer .jx33-canonical-window>.jx8-head button,#JX69PopupHost #JX69LegacyPopupLayer .jx33-canonical-window>header button,#JX69PopupHost #JX69LegacyPopupLayer .jx33-canonical-window>.j11-head button{width:34px!important;height:32px!important;min-height:32px!important;padding:0!important;border:1px solid #958257!important;border-radius:0!important;background:linear-gradient(#313c32,#121a14)!important;color:#ffe88b!important;font:700 18px/28px Tahoma!important} #JX69PopupHost #JX69LegacyPopupLayer .jx33-canonical-window>.jx8-body,#JX69PopupHost #JX69LegacyPopupLayer .jx33-canonical-window>main,#JX69PopupHost #JX69LegacyPopupLayer .jx33-canonical-window>.j11-body{flex:1 1 auto!important;min-height:0!important;overflow:auto!important;overscroll-behavior:contain!important;background:#07100b!important;padding:8px 10px 12px!important;box-sizing:border-box!important} #JX69PopupHost #JX69LegacyPopupLayer .jx33-canonical-window>.jx9-tabs{flex:0 0 auto!important;background:#0a120d!important;border-bottom:1px solid rgba(179,158,90,.34)!important;padding:7px 9px!important} #JX69PopupHost #JX69LegacyPopupLayer .jx33-canonical-window button{touch-action:manipulation} @media(max-width:767px){ #JX69PopupHost #JX69LegacyPopupLayer .jx33-canonical-window{width:calc(var(--jx69-vv-width,100vw) - 12px)!important;max-width:calc(var(--jx69-vv-width,100vw) - 12px)!important;height:min(90dvh,var(--jx69-popup-max-h,90dvh))!important;min-height:0!important;border-width:18px!important;border-image-width:18px!important} #JX69PopupHost #JX69LegacyPopupLayer .jx33-canonical-window>.jx8-head,#JX69PopupHost #JX69LegacyPopupLayer .jx33-canonical-window>header,#JX69PopupHost #JX69LegacyPopupLayer .jx33-canonical-window>.j11-head{min-height:38px!important;padding:4px 7px!important} #JX69PopupHost #JX69LegacyPopupLayer .jx33-canonical-window>.jx8-head h2,#JX69PopupHost #JX69LegacyPopupLayer .jx33-canonical-window>header h2,#JX69PopupHost #JX69LegacyPopupLayer .jx33-canonical-window>.j11-head h2{font-size:15px!important}} .jx30-bag-cell.r-HOANG_KIM{border-color:#d5af48!important;box-shadow:inset 0 0 0 1px rgba(83,56,8,.95),0 0 8px rgba(212,177,90,.38)!important;overflow:hidden} .jx30-bag-cell.r-HOANG_KIM::after{content:'';position:absolute;inset:1px;border-radius:4px;padding:1px;background:conic-gradient(from var(--jx69-led-angle,0deg),rgba(120,80,8,.25) 0deg,rgba(255,236,170,.98) 55deg,rgba(222,182,74,.95) 95deg,rgba(120,80,8,.22) 150deg,rgba(120,80,8,.22) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:jx69HoangKimBorderSweep 1.35s linear infinite} .jx30-bag-cell.r-HOANG_KIM>*{position:relative;z-index:1} @keyframes jx69HoangKimBorderSweep{0%{--jx69-led-angle:0deg;filter:drop-shadow(0 0 3px rgba(255,228,132,.55))}100%{--jx69-led-angle:360deg;filter:drop-shadow(0 0 7px rgba(255,215,106,.9))}} @property --jx69-led-angle{syntax:"";inherits:false;initial-value:0deg} .jx30-bag-cell.r-TINHLUYEN,.jx30-bag-cell.r-HOANG_KIM,.jx30-bag-cell.r-NGUSAC,.jx30-bag-cell.r-THATSAC,.jx30-bag-cell.r-CUUSACTHAN{ --jx69-led-main:#f0d36c;--jx69-led-hot:#fff7c9;--jx69-led-dim:rgba(102,74,12,.22); position:relative!important;overflow:hidden!important; } .jx30-bag-cell.r-TINHLUYEN{--jx69-led-main:#e7edf3;--jx69-led-hot:#fff7c9;--jx69-led-dim:rgba(160,174,188,.18)} .jx30-bag-cell.r-HOANG_KIM{--jx69-led-main:#e2b94e;--jx69-led-hot:#fff4b0;--jx69-led-dim:rgba(102,74,12,.22)} .jx30-bag-cell.r-NGUSAC{--jx69-led-main:#b56cff;--jx69-led-hot:#f5dcff;--jx69-led-dim:rgba(88,38,130,.20)} .jx30-bag-cell.r-THATSAC{--jx69-led-main:#55e58a;--jx69-led-hot:#d9ffe7;--jx69-led-dim:rgba(24,112,62,.20)} .jx30-bag-cell.r-CUUSACTHAN{--jx69-led-main:#ff5548;--jx69-led-hot:#ffe1a8;--jx69-led-dim:rgba(135,27,18,.20)} .jx30-bag-cell.r-TINHLUYEN::after,.jx30-bag-cell.r-HOANG_KIM::after,.jx30-bag-cell.r-NGUSAC::after,.jx30-bag-cell.r-THATSAC::after,.jx30-bag-cell.r-CUUSACTHAN::after{ content:'';position:absolute;inset:1px;border-radius:4px;padding:1.5px;pointer-events:none;z-index:3; background:conic-gradient(from var(--jx69-led-angle,0deg), var(--jx69-led-dim) 0deg 22deg,var(--jx69-led-main) 28deg,var(--jx69-led-hot) 45deg,var(--jx69-led-main) 62deg,var(--jx69-led-dim) 72deg 178deg, var(--jx69-led-main) 188deg,var(--jx69-led-hot) 205deg,var(--jx69-led-main) 222deg,var(--jx69-led-dim) 232deg 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude; animation:jx69SpecialLedParallel 1.45s linear infinite;filter:drop-shadow(0 0 4px var(--jx69-led-main)); } .jx30-bag-cell.r-TINHLUYEN>*,.jx30-bag-cell.r-HOANG_KIM>*,.jx30-bag-cell.r-NGUSAC>*,.jx30-bag-cell.r-THATSAC>*,.jx30-bag-cell.r-CUUSACTHAN>*{position:relative;z-index:1} @keyframes jx69SpecialLedParallel{from{--jx69-led-angle:0deg}to{--jx69-led-angle:360deg}} .jx30-bag-cell.r-BLUE,.jx33-storage-item.r-BLUE,.jx33-dis-item.r-BLUE{ --jx69-blue-main:#43a9ff;--jx69-blue-hot:#d9f4ff;--jx69-blue-dim:rgba(20,77,140,.20); position:relative!important;overflow:hidden!important;border-color:#3f93d8!important; box-shadow:inset 0 0 0 1px rgba(8,38,72,.92),0 0 7px rgba(54,161,245,.38)!important; } .jx30-bag-cell.r-BLUE::after,.jx33-storage-item.r-BLUE::after,.jx33-dis-item.r-BLUE::after{ content:'';position:absolute;inset:1px;border-radius:4px;padding:1.5px;pointer-events:none;z-index:3; background:conic-gradient(from var(--jx69-led-angle,0deg),var(--jx69-blue-dim) 0deg 22deg,var(--jx69-blue-main) 28deg,var(--jx69-blue-hot) 45deg,var(--jx69-blue-main) 62deg,var(--jx69-blue-dim) 72deg 178deg,var(--jx69-blue-main) 188deg,var(--jx69-blue-hot) 205deg,var(--jx69-blue-main) 222deg,var(--jx69-blue-dim) 232deg 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude; animation:jx69SpecialLedParallel 1.35s linear infinite;filter:drop-shadow(0 0 4px var(--jx69-blue-main)); } .jx30-bag-cell.r-BLUE>*,.jx33-storage-item.r-BLUE>*,.jx33-dis-item.r-BLUE>*{position:relative;z-index:1} .jx35-equipped-item{position:relative!important} .jx35-equipped-badge{position:absolute!important;left:2px;top:2px;z-index:8!important;max-width:80%;padding:1px 3px;border:1px solid rgba(113,231,208,.72);border-radius:3px;background:rgba(4,24,20,.88);color:#9ff4df!important;font:800 7px/1.2 Nunito,sans-serif!important;white-space:nowrap;pointer-events:none;text-shadow:0 1px #000} .jx33-storage-item.jx35-equipped-item:disabled{opacity:1!important;cursor:default!important} .v35-realm-depth-win .v35-realm-current{margin:6px 0 10px;padding:10px;border:1px solid var(--realm-color);background:linear-gradient(135deg,rgba(5,14,10,.95),rgba(22,19,10,.92));text-align:center;box-shadow:0 0 14px color-mix(in srgb,var(--realm-color) 35%,transparent)} .v35-realm-depth-win .v35-realm-current h3{margin:0;color:var(--realm-color);font:900 18px/1.3 Nunito,sans-serif;text-shadow:0 0 8px var(--realm-color)} .v35-realm-depth-win .v35-realm-current p{margin:4px 0 0;color:#d9cfaa;font-size:10px} .v35-realm-major-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-bottom:9px} .v35-realm-major-grid span{padding:5px 3px;border:1px solid #4e5143;background:#0b130e;color:#8f8b78;font-size:8px;text-align:center} .v35-realm-major-grid span.on{border-color:#d7bd64;color:#ffe38b;box-shadow:0 0 8px rgba(224,190,88,.3)} @media(max-width:480px){ .jx35-equipped-badge{font-size:6px} .v35-realm-major-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} .jx30-bag-grid{scroll-snap-type:y proximity;scroll-padding-top:0} .jx30-bag-cell{scroll-snap-align:start;overflow:hidden!important} .jx33-item-fit.jx35-item-artbox{position:absolute!important;inset:7%!important;display:grid!important;place-items:center!important;overflow:visible!important;box-sizing:border-box!important;pointer-events:none!important} .jx33-item-fit.jx35-item-artbox img{position:static!important;display:block!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center center!important;transform:none!important;margin:auto!important} #JX69RuntimePopupLayer>.jx33-system-overlay.on{ grid-area:1/1!important; align-self:center!important; justify-self:center!important; z-index:30!important; position:relative!important; pointer-events:auto!important; } #JX69RuntimePopupLayer>.jx33-system-overlay.on .jx33-system-window{position:relative!important;z-index:31!important} .jx33-inventory-window .jx30-frame-footer{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:5px!important;overflow:visible!important} .jx33-inventory-window .jx30-frame-footer>button{min-width:0!important;width:100%!important;padding:0 5px!important} @media(max-width:767px){ .jx33-inventory-window .jx30-frame-footer{grid-template-columns:repeat(5,minmax(62px,1fr))!important;overflow-x:auto!important} .jx33-inventory-window .jx30-frame-footer>button{font-size:10px!important} } .jx35-auto-pro .v13-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important} .jx35-auto-status{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:6px 0} .jx35-auto-status span{border:1px solid #5b5b49;background:#111912;padding:5px;font-size:10px;color:#bfb88f} .jx35-auto-status b{color:#f0d87b} .jx35-auto-note{font-size:9px;color:#a9a181;padding:6px;border-top:1px solid #44483a;margin-top:6px} @media(max-width:767px){ .jx35-auto-pro .v13-settings-grid{grid-template-columns:1fr 1fr!important} .jx35-auto-status{grid-template-columns:1fr 1fr} .jx35-auto-pro button{font-size:10px!important}} .jx35-gold-source{border-color:rgba(218,174,70,.55)!important;background:linear-gradient(180deg,rgba(76,57,13,.18),rgba(8,14,10,.15))} .jx35-gold-source h4{color:#f3cf68!important;text-shadow:0 0 6px rgba(245,201,82,.24)} .jx35-gold-source .jx30-detail-options li{color:#f0d57d} .jx35-set-extra{border-color:rgba(177,114,232,.42)!important;background:linear-gradient(180deg,rgba(54,25,78,.16),rgba(8,14,10,.12))} .jx35-set-extra h4{color:#d4a2ff!important} .jx35-set-extra .jx30-detail-options li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px} .jx35-set-extra .jx30-detail-options li.active span{color:#8cf3b6} .jx35-set-extra .jx30-detail-options li.active b{color:#f3d675} .jx35-set-extra .jx30-detail-options li.locked{opacity:.58} .jx35-set-extra .jx30-detail-options li.locked b{color:#c7a77d} .jx35-unresolved{opacity:.72!important;font-style:italic} .jx35-unresolved span{color:#d5b58b!important} .v35-realm-depth-win [data-realm-advance].realm-locked{opacity:.72;filter:saturate(.75);border-color:#7e6d42!important} .v35-realm-depth-win [data-realm-advance].realm-locked::after{content:' · kiểm tra điều kiện';font-size:.72em;opacity:.75} /* ========================================================================== */ /* V35.9 HUD / EVENT POPUP GEOMETRY ROOTFIX */ /* Activity & Event must size to real content instead of inheriting the */ /* canonical 90dvh mobile window. Other popup profiles keep their contracts. */ /* ========================================================================== */ #JX69PopupHost #JX69LegacyPopupLayer #jx69-activity-v8.jx33-canonical-popup .jx33-canonical-window{ height:auto!important; min-height:0!important; max-height:min(680px,calc(var(--jx69-vv-height,100dvh) - var(--jx69-safe-top,0px) - var(--jx69-safe-bottom,0px) - 20px))!important; align-self:center!important; } #JX69PopupHost #JX69LegacyPopupLayer #jx69-activity-v8 .jx8-body{ flex:0 1 auto!important; min-height:0!important; overflow:auto!important; padding-bottom:10px!important; } #JX69PopupHost #JX69LegacyPopupLayer #jx69-activity-v8 .jx8-tabs{ padding-top:7px!important; } #JX69PopupHost #JX69LegacyPopupLayer #jx69-activity-v8 [data-page]{ min-height:0!important; } @media(max-width:767px){ #JX69PopupHost #JX69LegacyPopupLayer #jx69-activity-v8.jx33-canonical-popup .jx33-canonical-window{ height:auto!important; min-height:0!important; max-height:min(74dvh,620px,calc(var(--jx69-vv-height,100dvh) - var(--jx69-safe-top,0px) - var(--jx69-safe-bottom,0px) - 14px))!important; } #JX69PopupHost #JX69LegacyPopupLayer #jx69-activity-v8 .jx8-row{padding:7px 9px!important;margin:5px 0!important} #JX69PopupHost #JX69LegacyPopupLayer #jx69-activity-v8 .jx8-card{padding:9px!important;margin:6px 0!important} } /* ========================================================================== */ /* V35.9 VÕ CÔNG / KỸ NĂNG POPUP COMPACTION ROOTFIX */ /* The Skill window must not inherit the generic near-full 90dvh mobile */ /* portrait rule. Keep the skill grid internally scrollable and compact the */ /* shell itself so no dead vertical area is reserved around the real content. */ /* ========================================================================== */ #JX69RuntimePopupLayer .jx33-skill-window{ height:min(var(--jx69-popup-pref-h,560px),calc(var(--jx69-vv-height,100dvh) - 24px))!important; min-height:min(var(--jx69-popup-min-h,430px),calc(var(--jx69-vv-height,100dvh) - 24px))!important; max-height:min(var(--jx69-popup-max-h,640px),calc(var(--jx69-vv-height,100dvh) - 18px))!important; align-self:center!important; } #JX69RuntimePopupLayer .jx33-skill-window .jx30-frame-content{ min-height:0!important; overflow:hidden!important; } #JX69RuntimePopupLayer .jx33-skill-window .jx30-skill-grid{ min-height:0!important; overflow-y:auto!important; align-content:start!important; } @media(max-width:767px) and (orientation:portrait){ #JX69RuntimePopupLayer .jx33-skill-window{ height:min(70dvh,var(--jx69-popup-pref-h,560px),calc(var(--jx69-vv-height,100dvh) - 14px))!important; min-height:min(52dvh,var(--jx69-popup-min-h,430px))!important; max-height:min(72dvh,var(--jx69-popup-max-h,640px),calc(var(--jx69-vv-height,100dvh) - 12px))!important; } #JX69RuntimePopupLayer .jx33-skill-window .jx30-frame-header{height:36px!important} #JX69RuntimePopupLayer .jx33-skill-window .jx30-frame-header h2{font-size:16px!important} #JX69RuntimePopupLayer .jx33-skill-window .jx30-frame-content{padding:5px 6px!important;gap:4px!important} #JX69RuntimePopupLayer .jx33-skill-window .jx33-skill-head{padding:3px 5px!important} #JX69RuntimePopupLayer .jx33-skill-window .jx30-skill-tabs{gap:4px!important} #JX69RuntimePopupLayer .jx33-skill-window .jx30-skill-tabs button{min-height:32px!important} #JX69RuntimePopupLayer .jx33-skill-window .jx30-skill-grid{grid-auto-rows:100px!important;gap:4px!important;padding-top:3px!important} #JX69RuntimePopupLayer .jx33-skill-window .jx30-frame-footer{min-height:42px!important;padding:3px 5px!important} #JX69RuntimePopupLayer .jx33-skill-window .jx30-frame-footer>button{min-height:36px!important} } @media(max-width:390px) and (orientation:portrait){ #JX69RuntimePopupLayer .jx33-skill-window{height:min(68dvh,var(--jx69-popup-pref-h,560px))!important;max-height:70dvh!important} #JX69RuntimePopupLayer .jx33-skill-window .jx30-skill-grid{grid-auto-rows:98px!important} } @media(max-height:500px) and (orientation:landscape){ #JX69RuntimePopupLayer .jx33-skill-window{ height:min(82dvh,var(--jx69-popup-max-h,640px))!important; min-height:0!important; max-height:86dvh!important; } } /* V35.10 premium tier source-sync visuals */ .jx30-bag-cell.jx69-legacy-r-THIEN_TU-disabled{border-color:#b998dc!important;box-shadow:inset 0 0 0 1px rgba(65,36,96,.9),0 0 7px rgba(186,140,255,.28)!important} .jx30-bag-cell.jx69-legacy-r-BACH_KIM-disabled{border-color:#d8e3ee!important;box-shadow:inset 0 0 0 1px rgba(74,91,108,.9),0 0 7px rgba(220,235,247,.30)!important} /* === assets/jx69-v30-responsive-root.css === */ /* JX69 V33 FULL UI SYSTEM ROOT REBUILD — sole responsive geometry owner is JS runtime. */ :root{--jx69-vv-width:100vw;--jx69-vv-height:100dvh;--jx69-safe-top:0px;--jx69-safe-right:0px;--jx69-safe-bottom:0px;--jx69-safe-left:0px;--jx69-bottom-h:0px;--jx69-world-left:0px;--jx69-world-top:0px;--jx69-world-width:100vw;--jx69-world-height:100dvh;--jx69-joystick-left:10px;--jx69-joystick-top:calc(100dvh - 280px);--jx69-joystick-size:96px} #JX69PlayerUIRoot{display:none}#JX69PlayerUIRoot.active{display:block!important} #JX69PlayerUIRoot,#JX69HudLayoutRoot{width:var(--jx69-vv-width)!important;height:var(--jx69-vv-height)!important;max-width:none!important;max-height:none!important;transform:none!important;background:transparent!important} #TopStatusHUD,#BottomHUD,#MinimapHUD,#ChatOverlay,#GameStatusOverlay{transform:none!important} #BottomHudArtLayer{object-fit:contain!important;max-width:none!important;max-height:none!important;display:block!important;line-height:0!important;background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;filter:none!important} #BottomHudArtLayer,#BottomHudDynamicArtLayer,#JX69HudInputSurface{pointer-events:none!important} #BottomHUD,#BottomHudDynamicArtLayer,#JX69HudInputSurface{background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important} #BottomHUD{line-height:0!important;overflow:visible!important;contain:layout style} #MinimapHUD{box-sizing:border-box;overflow:hidden;padding:0!important;transform:none!important} #MinimapHUD .v12-minimap-title{font-size:clamp(8px,1.8vw,11px)!important;padding:1px 4px!important;line-height:14px!important;height:15px!important} #MinimapHUD .v12-minimap-map{top:15px!important;bottom:15px!important} #MinimapHUD .v12-minimap-coords{height:15px!important;line-height:13px!important;font-size:8px!important;padding:1px 4px!important} .jx69-world-canvas{position:absolute!important;left:0!important;top:0!important;width:var(--jx69-vv-width)!important;height:var(--jx69-vv-height)!important;max-width:none!important;max-height:none!important;transform:none!important} .jx-joystick{left:var(--jx69-joystick-left)!important;top:var(--jx69-joystick-top)!important;bottom:auto!important;width:var(--jx69-joystick-size)!important;height:var(--jx69-joystick-size)!important;touch-action:none!important} #JX69PlayerUIRoot.mobile-layout #BottomHudDynamicArtLayer .v30-quick-visual,#JX69PlayerUIRoot.mobile-layout #BottomHudDynamicArtLayer .v30-skill-visual,#JX69PlayerUIRoot.mobile-layout #BottomHudDynamicArtLayer .v30-auto-visual{box-sizing:border-box} #JX69PlayerUIRoot.mobile-layout.portrait-layout #MinimapHUD{box-shadow:0 1px 5px #0009!important} #JX69PopupHost{position:fixed!important;inset:0!important;z-index:300!important;pointer-events:none!important;display:grid!important;place-items:center!important;padding:max(6px,var(--jx69-safe-top)) max(6px,var(--jx69-safe-right)) max(6px,var(--jx69-safe-bottom)) max(6px,var(--jx69-safe-left))!important;max-width:var(--jx69-vv-width)!important;max-height:var(--jx69-vv-height)!important;box-sizing:border-box!important} #JX69RuntimePopupLayer,#JX69LegacyPopupLayer{position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;pointer-events:none!important;padding:max(6px,var(--jx69-safe-top)) max(6px,var(--jx69-safe-right)) max(6px,var(--jx69-safe-bottom)) max(6px,var(--jx69-safe-left))!important;box-sizing:border-box!important} #JX69RuntimePopupLayer>* ,#JX69LegacyPopupLayer>.on,#JX69LegacyPopupLayer>[open]{pointer-events:auto!important} #JX69LegacyPopupLayer .jx8-shell,#JX69LegacyPopupLayer .jx9-shell,#JX69LegacyPopupLayer .jx11-shell,#JX69LegacyPopupLayer .j11-shell,#JX69LegacyPopupLayer .jx12-s,#JX69LegacyPopupLayer .j12-s,#JX69LegacyPopupLayer .v9-window{box-sizing:border-box!important;width:min(var(--jx69-popup-pref-w,680px),calc(var(--jx69-vv-width) - var(--jx69-safe-left) - var(--jx69-safe-right) - 20px))!important;max-width:min(var(--jx69-popup-max-w,820px),calc(var(--jx69-vv-width) - var(--jx69-safe-left) - var(--jx69-safe-right) - 12px))!important;max-height:min(var(--jx69-popup-max-h,800px),calc(var(--jx69-vv-height) - var(--jx69-safe-top) - var(--jx69-safe-bottom) - 12px))!important;overflow:auto!important;overscroll-behavior:contain!important} /* === assets/jx69-v33-full-ui.css === */ /* JX69 V33 Full UI System Root Rebuild — production owners only. */ #JX69PlayerUIRoot,#JX69HudLayoutRoot,#BottomHUD,#TopStatusHUD{background:transparent!important} #TopStatusHUD{position:absolute;z-index:100;pointer-events:none;overflow:visible;background:transparent!important;line-height:0} #TopStatusHUD .jx33-top-cell{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;height:var(--top-status-height,28px);border:1px solid rgba(89,126,111,.86);background:linear-gradient(180deg,rgba(9,45,39,.91),rgba(3,19,16,.88));box-shadow:inset 0 0 0 1px rgba(0,0,0,.52),0 1px 3px rgba(0,0,0,.38);border-radius:4px;color:#f0e5b6;text-shadow:1px 1px 1px #000;font:700 var(--top-status-font-size,10px)/1 Tahoma,Arial,sans-serif} #TopStatusHUD .jx33-level,#TopStatusHUD .jx33-rank{gap:3px;padding:0 4px;white-space:nowrap} #TopStatusHUD .jx33-level small,#TopStatusHUD .jx33-rank small{color:#75e9df;font-size:8px;text-transform:none;line-height:1} #TopStatusHUD .jx33-level b,#TopStatusHUD .jx33-rank b{color:#fff4c2;font-size:var(--top-status-value-font-size,11px);line-height:1} #TopStatusHUD .jx33-power{gap:5px;padding:0 8px;white-space:nowrap;border-color:rgba(188,146,62,.95);background:linear-gradient(180deg,rgba(44,47,29,.95),rgba(14,31,26,.94));box-shadow:inset 0 0 0 1px rgba(214,179,92,.22),0 1px 4px rgba(0,0,0,.42);border-radius:5px} #TopStatusHUD .jx33-power small{color:#e0b95f;font-size:9px;font-weight:800;text-transform:none;line-height:1;letter-spacing:.1px} #TopStatusHUD .jx33-power b{color:#fff0a4;font-size:12px;line-height:1;text-shadow:0 0 3px rgba(255,210,86,.34),1px 1px 1px #000} #TopStatusHUD .jx33-statusbar{justify-content:flex-start;isolation:isolate} #TopStatusHUD .jx33-statusbar i{position:absolute;inset:0 auto 0 0;width:0;z-index:-1;transition:width .12s linear} #TopStatusHUD .jx33-statusbar.hp i{background:linear-gradient(180deg,#ff6767,#c90d25)} #TopStatusHUD .jx33-statusbar.mp i{background:linear-gradient(180deg,#66bfff,#235cc8)} #TopStatusHUD .jx33-statusbar.xp i{background:linear-gradient(180deg,#e8d55e,#7f7426)} #TopStatusHUD .jx33-statusbar span{width:100%;text-align:center;color:#fff;font-size:9px;line-height:1;white-space:nowrap;text-shadow:1px 1px 1px #000} #JX69ModalBackdrop{position:absolute;inset:0;display:none;background:rgba(0,0,0,.50);pointer-events:auto;z-index:0} body.jx69-popup-open #JX69ModalBackdrop{display:block} #JX69RuntimePopupLayer,#JX69LegacyPopupLayer,#TooltipLayer{z-index:1} #JX69LegacyPopupLayer>.jx8-overlay,#JX69LegacyPopupLayer>.jx9-overlay,#JX69LegacyPopupLayer>.jx11-overlay,#JX69LegacyPopupLayer>.j11-overlay,#JX69LegacyPopupLayer>.jx12-o,#JX69LegacyPopupLayer>.jx33-system-overlay{background:transparent!important;inset:auto!important;position:relative!important;width:auto!important;height:auto!important;padding:0!important} .jx33-system-overlay{display:none!important;place-items:center!important;pointer-events:none!important}.jx33-system-overlay.on{display:grid!important;pointer-events:auto!important} .jx33-system-window{width:min(920px,94vw);max-height:min(86dvh,820px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border:2px solid #6d755c;background:linear-gradient(160deg,#102119,#07110c);box-shadow:0 12px 34px #000b,inset 0 0 0 1px #142e23;color:#eee0ad;font-family:Tahoma,Arial,sans-serif;border-radius:7px} .jx33-system-window>header{display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:7px 10px;border-bottom:1px solid #5f654e;background:linear-gradient(#193329,#0a1712)} .jx33-system-window>header h2{font:800 15px/1.1 Tahoma,Arial;color:#f1d67a;letter-spacing:.5px}.jx33-system-window>header button{width:32px;height:28px;border:1px solid #7d7655;background:#14261c;color:#e9d89a;font-weight:800} .jx33-system-content{min-height:0;overflow:auto;padding:10px;overscroll-behavior:contain}.jx33-system-window>footer{display:flex;justify-content:flex-end;gap:7px;padding:8px 10px;border-top:1px solid #5f654e;background:#09150f} .jx33-system-window button{min-height:30px;border:1px solid #64705a;background:linear-gradient(#1d382b,#0d1d15);color:#eee0ad;padding:5px 9px;font:700 10px Tahoma;touch-action:manipulation}.jx33-system-window button:hover{border-color:#72d6cc}.jx33-system-window button:disabled{opacity:.4;cursor:not-allowed} .jx33-storage-summary,.jx33-dis-summary{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.jx33-storage-summary span,.jx33-dis-summary span{border:1px solid #495745;background:#0a1510;padding:5px 8px;font-size:10px}.jx33-storage-summary b,.jx33-dis-summary b{color:#69e4d8} .jx33-storage-columns{display:grid;grid-template-columns:1fr 1fr;gap:10px}.jx33-storage-columns section{min-width:0}.jx33-storage-columns h3{font:800 11px Tahoma;color:#e7ce78;margin-bottom:5px}.jx33-storage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;max-height:56dvh;overflow:auto} .jx33-storage-item,.jx33-dis-item{display:grid!important;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:6px;text-align:left!important;min-width:0}.jx33-storage-item img,.jx33-dis-item img{width:38px;height:38px;object-fit:contain;background:#040907;border:1px solid #495547}.jx33-storage-item span,.jx33-dis-item span{min-width:0;display:grid;gap:2px}.jx33-storage-item b,.jx33-dis-item b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jx33-storage-item small,.jx33-dis-item small{color:#a8a38d;font-size:8px}.jx33-storage-item em,.jx33-dis-item em{font-style:normal;color:#6fe0d6;white-space:nowrap;font-size:9px} .jx33-dis-actions{display:flex;gap:6px;margin-bottom:7px}.jx33-dismantle-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.jx33-dis-item.selected{border-color:#f1cf68!important;box-shadow:inset 0 0 0 1px #8b6b1f}.jx33-confirm-card{max-width:460px;margin:8vh auto;padding:16px;border:1px solid #6d755c;background:#0b1812;display:grid;gap:8px}.jx33-confirm-card h3{color:#f1d67a;font-size:14px}.jx33-confirm-card b{color:#75e8dc}.jx33-empty{grid-column:1/-1;padding:18px;text-align:center;color:#99947e;border:1px dashed #485244} @media(max-width:700px){#TopStatusHUD .jx33-top-cell{font-size:9px}#TopStatusHUD .jx33-statusbar span{font-size:9px}#TopStatusHUD .jx33-power small{font-size:8px}#TopStatusHUD .jx33-power b{font-size:11px}.jx33-system-window{width:min(96vw,640px);max-height:90dvh}.jx33-storage-columns{grid-template-columns:1fr}.jx33-storage-grid{grid-template-columns:1fr;max-height:28dvh}.jx33-dismantle-list{grid-template-columns:1fr}.jx33-system-content{padding:7px}.jx33-system-window>footer{flex-wrap:wrap}} /* V34.3 special rarity LED continuity in Storage / Dismantle. */ .jx33-storage-item.r-TINHLUYEN,.jx33-dis-item.r-TINHLUYEN, .jx33-storage-item.r-HOANG_KIM,.jx33-dis-item.r-HOANG_KIM, .jx33-storage-item.r-NGUSAC,.jx33-dis-item.r-NGUSAC, .jx33-storage-item.r-THATSAC,.jx33-dis-item.r-THATSAC, .jx33-storage-item.r-CUUSACTHAN,.jx33-dis-item.r-CUUSACTHAN{position:relative!important;overflow:hidden!important;--jx69-card-led:#e2b94e;--jx69-card-hot:#fff4b0;--jx69-card-dim:rgba(102,74,12,.18)} .jx33-storage-item.r-TINHLUYEN,.jx33-dis-item.r-TINHLUYEN{--jx69-card-led:#e7edf3;--jx69-card-hot:#fff7c9;--jx69-card-dim:rgba(160,174,188,.16)} .jx33-storage-item.r-NGUSAC,.jx33-dis-item.r-NGUSAC{--jx69-card-led:#b56cff;--jx69-card-hot:#f5dcff;--jx69-card-dim:rgba(88,38,130,.18)} .jx33-storage-item.r-THATSAC,.jx33-dis-item.r-THATSAC{--jx69-card-led:#55e58a;--jx69-card-hot:#d9ffe7;--jx69-card-dim:rgba(24,112,62,.18)} .jx33-storage-item.r-CUUSACTHAN,.jx33-dis-item.r-CUUSACTHAN{--jx69-card-led:#ff5548;--jx69-card-hot:#ffe1a8;--jx69-card-dim:rgba(135,27,18,.18)} .jx33-storage-item.r-TINHLUYEN::after,.jx33-dis-item.r-TINHLUYEN::after, .jx33-storage-item.r-HOANG_KIM::after,.jx33-dis-item.r-HOANG_KIM::after, .jx33-storage-item.r-NGUSAC::after,.jx33-dis-item.r-NGUSAC::after, .jx33-storage-item.r-THATSAC::after,.jx33-dis-item.r-THATSAC::after, .jx33-storage-item.r-CUUSACTHAN::after,.jx33-dis-item.r-CUUSACTHAN::after{content:'';position:absolute;inset:1px;border-radius:3px;padding:1px;pointer-events:none;z-index:4;background:conic-gradient(from var(--jx69-led-angle,0deg),var(--jx69-card-dim) 0deg 22deg,var(--jx69-card-led) 28deg,var(--jx69-card-hot) 45deg,var(--jx69-card-led) 62deg,var(--jx69-card-dim) 72deg 178deg,var(--jx69-card-led) 188deg,var(--jx69-card-hot) 205deg,var(--jx69-card-led) 222deg,var(--jx69-card-dim) 232deg 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:jx69SpecialLedParallel 1.45s linear infinite;filter:drop-shadow(0 0 3px var(--jx69-card-led))} /* V35.1 equipped visibility + realm depth */ .jx35-equipped-item{position:relative!important} .jx35-equipped-badge{position:absolute!important;left:2px;top:2px;z-index:8!important;max-width:80%;padding:1px 3px;border:1px solid rgba(113,231,208,.72);border-radius:3px;background:rgba(4,24,20,.88);color:#9ff4df!important;font:800 7px/1.2 Nunito,sans-serif!important;white-space:nowrap;pointer-events:none;text-shadow:0 1px #000} .jx33-storage-item.jx35-equipped-item:disabled{opacity:1!important;cursor:default!important} .v35-realm-depth-win .v35-realm-current{margin:6px 0 10px;padding:10px;border:1px solid var(--realm-color);background:linear-gradient(135deg,rgba(5,14,10,.95),rgba(22,19,10,.92));text-align:center;box-shadow:0 0 14px color-mix(in srgb,var(--realm-color) 35%,transparent)} .v35-realm-depth-win .v35-realm-current h3{margin:0;color:var(--realm-color);font:900 18px/1.3 Nunito,sans-serif;text-shadow:0 0 8px var(--realm-color)} .v35-realm-depth-win .v35-realm-current p{margin:4px 0 0;color:#d9cfaa;font-size:10px} .v35-realm-major-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-bottom:9px}.v35-realm-major-grid span{padding:5px 3px;border:1px solid #4e5143;background:#0b130e;color:#8f8b78;font-size:8px;text-align:center}.v35-realm-major-grid span.on{border-color:#d7bd64;color:#ffe38b;box-shadow:0 0 8px rgba(224,190,88,.3)} @media(max-width:480px){.jx35-equipped-badge{font-size:6px}.v35-realm-major-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} /* V35.2 — storage/dismantle art safe box. */ .jx35-storage-artbox{width:42px;height:42px;display:grid;place-items:center;overflow:hidden;background:#040907;border:1px solid #495547;box-sizing:border-box;padding:3px} .jx33-storage-item .jx35-storage-artbox img,.jx33-dis-item .jx35-storage-artbox img{display:block;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center center!important;border:0!important;background:transparent!important} /* V35.7 realm breakthrough remains clickable to expose exact unmet requirement. */ .v35-realm-depth-win [data-realm-advance].realm-locked{opacity:.72;filter:saturate(.75);border-color:#7e6d42!important}.v35-realm-depth-win [data-realm-advance].realm-locked::after{content:' · kiểm tra điều kiện';font-size:.72em;opacity:.75} /* === assets/jx69-character-v35-9.css === */ /* The old character styles have been removed; this is the only character skin. */ .jx39-character-panel{position:relative;flex:0 0 auto;box-sizing:border-box;width:min(96vw,650px,calc(92dvh * 1076 / 1462));max-width:96vw;max-height:94dvh;pointer-events:auto;isolation:isolate;color:#eee9dc;font-family:Georgia,"Times New Roman",serif;container-type:inline-size} .jx39-character-master{position:relative;aspect-ratio:1076/1462;background:#24291e url('./ui-character-v35-9/character-background.png') center/100% 100% no-repeat;overflow:hidden} .jx39-character-panel button{box-sizing:border-box;min-width:0;min-height:0;cursor:pointer;touch-action:manipulation;font:inherit;color:inherit;pointer-events:auto} .jx39-character-panel button:focus-visible{outline:2px solid #8ae2ba;outline-offset:-3px} .jx39-character-panel button:disabled{cursor:default;opacity:.45} .jx39-title{position:absolute;inset:.8% 8% auto;height:5.8%;display:grid;place-items:center;margin:0;color:#06100c;text-shadow:0 0 4px #9aecdd,0 0 8px #adf8d9;font-size:clamp(21px,5cqw,38px);font-weight:900;line-height:1} .jx39-tabs{position:absolute;inset:7.7% 0 auto;height:4.5%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))} .jx39-tabs>button{padding:0 2px;border:1px solid #050705;border-radius:0;background:rgba(6,12,8,.5);font-size:clamp(12px,4cqw,25px);font-weight:900;line-height:1;white-space:nowrap;text-shadow:1px 1px 1px #000,-1px -1px 1px #000} .jx39-tabs>button[aria-selected=true]{background:rgba(199,204,170,.2);color:#fff9e9;box-shadow:inset 0 -2px #aac7a3} .jx39-tabs>button:hover{color:#aaf5c5} .jx39-identity{position:absolute;left:4.4%;right:4.4%;top:15.1%;height:3.5%;display:grid;grid-template-columns:7% minmax(0,1fr) 11% 16%;gap:1%;align-items:center;font-size:clamp(11px,3.5cqw,22px);font-weight:700;text-shadow:1px 1px #000} .jx39-identity>b{height:100%;min-width:0;display:flex;align-items:center;padding:0 6px;border:1px solid #040504;background:rgba(4,11,8,.85);font-size:clamp(10px,3cqw,19px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .jx39-identity .jx39-pk-label{text-align:center}.jx39-identity .jx39-pk{justify-content:center;color:#82dcb1} .jx39-equipment-stage{position:absolute;inset:0;pointer-events:none} /* The stage owns slot geometry. Inline !important coordinates are the final guard against old rarity skins that used to turn occupied slots into relative flow. */ #JX69RuntimePopupLayer .jx39-character-panel .jx39-equipment-stage>.jx39-slot{position:absolute!important;inset:auto!important;left:calc(var(--slot-x) * 100%)!important;top:calc(var(--slot-y) * 100%)!important;right:auto!important;bottom:auto!important;width:calc(var(--slot-w) * 100%)!important;height:calc(var(--slot-h) * 100%)!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;margin:0!important;transform:none!important;flex:none!important;contain:layout paint;isolation:isolate} .jx39-slot{padding:clamp(2px,1cqw,7px)!important;display:grid;place-items:center;overflow:hidden!important;box-sizing:border-box;border:2px solid #030503!important;border-radius:0!important;background:linear-gradient(140deg,rgba(4,10,7,.94),rgba(1,5,3,.93))!important;box-shadow:inset 0 0 0 1px #34362a!important;pointer-events:auto} .jx39-slot.selected{outline:2px solid #9ce4ba;outline-offset:-3px} .jx39-slot:hover{box-shadow:inset 0 0 0 1px #94b393!important} .jx39-slot-art{position:relative;z-index:1;display:block;width:100%;height:100%;min-width:0;min-height:0;pointer-events:none} .jx39-slot-art>img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;pointer-events:none} .jx39-slot-empty{position:relative;z-index:1;font-family:Tahoma,Arial,sans-serif;font-size:clamp(7px,2.3cqw,12px);line-height:1.25;color:#969c84;text-align:center;overflow-wrap:normal;pointer-events:none} .jx39-slot>.jx39-enhance-badge,.jx30-bag-cell>.jx39-enhance-badge{position:absolute!important;inset:3px 3px auto auto!important;left:auto!important;bottom:auto!important;display:flex!important;align-items:center;justify-content:center;min-width:20px;height:16px;box-sizing:border-box;padding:0 3px;border:1px solid #d3ba70;border-radius:3px;background:#181b0de8;color:#ffe895;font:800 10px/1 Tahoma,Arial,sans-serif;white-space:nowrap;text-shadow:0 1px #000;z-index:5!important;pointer-events:none} .jx39-slot.r-TINHLUYEN{--jx39-led-main:#e7edf3;--jx39-led-hot:#fff7c9;--jx39-led-dim:rgba(160,174,188,.18);border-color:#d8dfea!important} .jx39-slot.r-HOANG_KIM{--jx39-led-main:#e2b94e;--jx39-led-hot:#fff4b0;--jx39-led-dim:rgba(102,74,12,.22);border-color:#d5af48!important} .jx39-slot.r-NGUSAC{--jx39-led-main:#b56cff;--jx39-led-hot:#f5dcff;--jx39-led-dim:rgba(88,38,130,.20);border-color:#b56cff!important} .jx39-slot.r-THATSAC{--jx39-led-main:#55e58a;--jx39-led-hot:#d9ffe7;--jx39-led-dim:rgba(24,112,62,.20);border-color:#55e58a!important} .jx39-slot.r-CUUSACTHAN{--jx39-led-main:#ff5548;--jx39-led-hot:#ffe1a8;--jx39-led-dim:rgba(135,27,18,.20);border-color:#ff5548!important} .jx39-slot.r-BLUE{--jx39-led-main:#43a9ff;--jx39-led-hot:#d9f4ff;--jx39-led-dim:rgba(20,77,140,.20);border-color:#3f93d8!important}.jx39-slot.r-GREEN{border-color:#74a974!important}.jx39-slot.jx69-legacy-r-THIEN_TU-disabled{--jx39-led-main:#ba8cff;--jx39-led-hot:#f0e4ff;--jx39-led-dim:rgba(88,48,138,.20);border-color:#ba9bdd!important}.jx39-slot.jx69-legacy-r-BACH_KIM-disabled{--jx39-led-main:#d9e7f5;--jx39-led-hot:#ffffff;--jx39-led-dim:rgba(105,128,150,.20);border-color:#d8e3ee!important} .jx39-slot:is(.r-TINHLUYEN,.r-HOANG_KIM,.jx69-legacy-r-THIEN_TU-disabled,.jx69-legacy-r-BACH_KIM-disabled,.r-NGUSAC,.r-THATSAC,.r-CUUSACTHAN,.r-BLUE)::after{content:'';position:absolute;inset:1px;border-radius:0;padding:1.5px;pointer-events:none;z-index:3;background:conic-gradient(from var(--jx69-led-angle,0deg),var(--jx39-led-dim) 0deg 22deg,var(--jx39-led-main) 28deg,var(--jx39-led-hot) 45deg,var(--jx39-led-main) 62deg,var(--jx39-led-dim) 72deg 178deg,var(--jx39-led-main) 188deg,var(--jx39-led-hot) 205deg,var(--jx39-led-main) 222deg,var(--jx39-led-dim) 232deg 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:jx69SpecialLedParallel 1.4s linear infinite;filter:drop-shadow(0 0 4px var(--jx39-led-main))} .jx39-auxiliary{position:absolute;left:25%;right:21.5%;top:89.3%;height:4.15%;display:grid;grid-template-columns:18% minmax(0,1fr);gap:2%;align-items:center;font-size:clamp(12px,3.4cqw,23px);color:#89e9a0;font-weight:700;text-shadow:1px 1px #000} .jx39-auxiliary>b{height:100%;min-width:0;display:grid;place-items:center;padding:0 4px;background:#080d09;border:1px solid #8c9084;color:#8cee9f;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(10px,3cqw,21px)} .jx39-close{position:absolute;left:1%;bottom:.1%;width:98%;height:4.3%;padding:0;border:0;border-radius:0;background:transparent;color:#06150d!important;font-size:clamp(18px,4.5cqw,31px)!important;font-weight:900!important;text-shadow:0 0 3px #99dbbd} .jx39-close:hover{background:rgba(134,200,150,.1)} .jx39-tab-pane{position:absolute;left:4.5%;right:4.5%;top:21%;bottom:7.8%;min-height:0;overflow:auto;overflow-x:hidden;scrollbar-width:thin;overscroll-behavior:contain;padding:2%;background:rgba(12,20,12,.85);border:1px solid #60664f} .jx39-info-grid,.jx39-primary-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 12px;margin-bottom:10px} .jx39-field{min-width:0;display:grid;grid-template-columns:minmax(76px,1fr) minmax(48px,.8fr);gap:6px;align-items:center;min-height:29px;font-family:Tahoma,Arial,sans-serif;font-size:clamp(11px,2.6cqw,15px)} .jx39-field>span{white-space:nowrap;color:#e5e7cc}.jx39-field>b{min-width:0;padding:5px;border:1px solid #5b6349;background:#060d08;text-align:right;font-size:inherit;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .jx39-stat-pairs{display:grid;gap:7px;margin:12px 0}.jx39-stat-pair-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.jx39-stat-pair-cell{min-width:0} .jx39-attr-row{grid-template-columns:minmax(76px,1fr) minmax(30px,.8fr) 28px} .jx39-attr-plus{width:28px;height:28px;border:1px solid #748e5e;background:#163c20;color:#d3f2b4;font-family:Tahoma,Arial,sans-serif!important;font-size:19px!important;line-height:1} .jx39-section-title{margin:10px 0 7px;color:#b4dfa9;font-size:clamp(14px,3.4cqw,22px);border-bottom:1px solid #5b6349;padding-bottom:5px} .jx39-exp-field{display:grid;grid-template-columns:82px minmax(0,1fr) 56px;gap:6px;align-items:center;font:12px Tahoma,Arial,sans-serif}.jx39-exp-track{height:16px;border:1px solid #5b6349;background:#050b07;overflow:hidden}.jx39-exp-track>i{display:block;height:100%;background:#678d40}.jx39-exp-field>b{text-align:right;color:#c2d899} .jx39-review-power{text-align:center;padding:16px 0;border-bottom:1px solid #627050}.jx39-review-power>span{display:block;font-size:clamp(16px,4cqw,24px);color:#a7dba4}.jx39-review-power>b{display:block;font:bold clamp(26px,7cqw,46px)/1.3 Georgia,serif;color:#e5d791}.jx39-review-list{display:grid;gap:9px;margin:15px 0}.jx39-review-list .jx39-field{grid-template-columns:1fr 1fr}.jx39-review-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.jx39-review-actions>button,.jx39-attributes-actions>button{flex:1;padding:8px 10px;border:1px solid #768d60;background:#17301c;color:#dbeacd;font:700 12px Tahoma,Arial,sans-serif} .jx39-bag-target{padding:8px;color:#bbe9af;background:#15231a;text-align:center;font:700 12px Tahoma,Arial,sans-serif}.jx30-bag-cell.jx39-incompatible{opacity:.32} @media(max-width:600px){.jx39-info-grid,.jx39-primary-stats{grid-template-columns:1fr;gap:5px;margin-bottom:8px}.jx39-stat-pair-row{grid-template-columns:1fr;gap:7px}.jx39-stat-pair-cell:empty{display:none}.jx39-field{grid-template-columns:minmax(110px,1fr) minmax(60px,1fr)}.jx39-attr-row{grid-template-columns:minmax(110px,1fr) minmax(50px,1fr) 28px}.jx39-tab-pane{padding:3%}.jx39-slot>.jx39-enhance-badge,.jx30-bag-cell>.jx39-enhance-badge{inset:2px 2px auto auto!important;height:14px;min-width:18px;font-size:9px}} @media(orientation:landscape) and (max-height:520px){.jx39-character-panel{width:min(450px,94vw);max-height:90dvh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.jx39-character-master{min-height:0}.jx39-close{position:sticky;bottom:0;margin-top:129.8%;height:6cqw;min-height:28px;background:#777969 url('./ui-character-v35-9/character-background.png') center bottom/100% auto no-repeat}.jx39-tab-pane{bottom:8.8%}} /* === assets/jx69-premium-led-v35-21k.css === */ /* V35.21K single premium LED authority — reconstructed. */ :root{--jx69-premium-led-speed:1.45s} .r-THIEN_TU,.r-BACH_KIM{position:relative;border-radius:0!important;box-shadow:none!important;filter:none!important} .r-THIEN_TU{--jx69-tier:#ba8cff} .r-BACH_KIM{--jx69-tier:#9ad9ff} .r-THIEN_TU::before,.r-BACH_KIM::before{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid color-mix(in srgb,var(--jx69-tier) 78%,#d6c38a 22%);border-radius:0;box-shadow:none;z-index:3} .r-THIEN_TU::after,.r-BACH_KIM::after{content:"";position:absolute;inset:3px;pointer-events:none;border-radius:5px;padding:1px;background:conic-gradient(from var(--jx69-led-angle,0deg),transparent 0 14%,var(--jx69-tier) 18% 28%,#fff 31% 34%,transparent 38% 64%,var(--jx69-tier) 69% 80%,transparent 85%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:jx69PremiumLedParallelV35_21K var(--jx69-premium-led-speed) linear infinite;z-index:4} @property --jx69-led-angle{syntax:"";inherits:false;initial-value:0deg} @keyframes jx69PremiumLedParallelV35_21K{to{--jx69-led-angle:360deg}} @media (prefers-reduced-motion:reduce){.r-THIEN_TU::after,.r-BACH_KIM::after{animation-duration:4s}} /* V35.21CI Jxweb3 skill support slots */ /* Support tab has five body rows; the active tab keeps its four-row layout. */ .jx33-skill-window.jx69-support-window .jx30-frame-content{grid-template-rows:auto auto auto minmax(0,1fr) auto!important} /* The floating game launcher must respect the canonical popup input lock. */ body.jx69-popup-open #JX69BauCuaRoot:not(.open) .bcg-launcher{visibility:hidden;pointer-events:none} .jx69-support-loadout{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));align-items:center;gap:6px;min-width:0;margin:0;padding:5px 6px;border:1px solid rgba(174,145,76,.38);background:rgba(5,13,11,.62);font-size:11px} .jx69-support-loadout>b{white-space:nowrap} .jx69-support-slot{box-sizing:border-box;display:inline-flex;align-items:center;gap:3px;min-width:0;max-width:none;height:28px;padding:2px 5px;border:1px solid rgba(127,216,169,.35);border-radius:4px;overflow:hidden} .jx69-support-slot img{width:22px;height:22px;object-fit:cover;flex:0 0 auto} .jx69-support-slot small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:700px){.jx69-support-loadout{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px 5px;font-size:10px}.jx69-support-loadout>b{grid-column:1/-1;font-size:10px;line-height:12px}} .jx69-passive-auto{font-size:9px;color:#9fd2ae;border:1px solid rgba(120,200,150,.3);padding:2px 4px;border-radius:3px}.jx30-skill-actions button[data-support-assign]{font-size:9px;min-width:27px;padding:2px}.jx30-skill-actions button[data-support-assign].on{box-shadow:0 0 7px rgba(105,242,145,.65);border-color:#75dd92;color:#aaf0ba} /* ========================================================================== */ /* JXWEB3 PC V24.10 CHAT/STATUS — sole owner (replaces legacy v9 chat) */ /* ========================================================================== */ #ChatOverlay.jxweb3-chat{ display:flex!important;flex-direction:column!important;box-sizing:border-box!important; overflow:visible!important;background:transparent!important;filter:drop-shadow(0 1px 2px #000b); color:#c3cbb1;font:11px/1.4 Tahoma,Arial,sans-serif;pointer-events:auto!important; } #ChatOverlay.jxweb3-chat .pc250-chat-lines{ order:1;flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#927d57 #04130c; background:linear-gradient(90deg,#04140be8,#071a0ed4 84%,rgba(4,20,11,.35)); border:1px solid #766f4e;padding:3px 4px;box-sizing:border-box; } #ChatOverlay.jxweb3-chat .pc250-chat-row{margin:1px 0;line-height:1.4;overflow-wrap:anywhere;min-height:14px} #ChatOverlay.jxweb3-chat .pc250-chat-system{color:#c3cbb1} #ChatOverlay.jxweb3-chat .pc250-chat-local{color:#f4e4ad} #ChatOverlay.jxweb3-chat .pc250-chan-name{color:#63e3a1;font-weight:700} #ChatOverlay.jxweb3-chat .pc250-offline-tag{color:#99aaa0;font-size:9px} #ChatOverlay.jxweb3-chat .pc250-empty-chat{color:#99aa93;font-style:italic;padding:4px} #ChatOverlay.jxweb3-chat .chat-channels{ order:2;flex:0 0 19px;height:19px;min-height:19px;display:flex;align-items:center;gap:0; background:#080e09c7;border:0;white-space:nowrap;overflow:hidden; } #ChatOverlay.jxweb3-chat .chat-channel{ flex:0 0 auto;border:0;border-bottom:1px solid transparent;background:transparent;color:#babca6; font:10px/17px Tahoma,Arial,sans-serif;padding:1px 4px;white-space:nowrap;cursor:pointer;pointer-events:auto; } #ChatOverlay.jxweb3-chat .chat-channel.active{color:#36e9ed;border-bottom-color:#20c1c3;text-shadow:0 0 2px #112} #ChatOverlay.jxweb3-chat .chat-entry{ order:3;flex:0 0 26px;position:relative;height:26px;min-height:26px;border:0;padding:0;margin:0; background:transparent url('./jxweb3-ui/pc-chat-entry-strip.png') top left/100% 26px no-repeat;display:block; } #ChatOverlay.jxweb3-chat .chat-entry input{ position:absolute;left:12.25%;top:7px;width:71.25%;height:16px;padding:1px 0;border:0;outline:0; background:transparent!important;color:#eee4ab;font:11px/13px Tahoma,Arial,sans-serif;box-sizing:border-box;pointer-events:auto; } #ChatOverlay.jxweb3-chat .chat-entry input::placeholder{color:#9eaa8b} #ChatOverlay.jxweb3-chat .chat-entry button{ position:absolute;top:6px;display:block;height:19px;padding:0;background:transparent;border:0;color:transparent; font-size:0;box-shadow:none;cursor:pointer;pointer-events:auto; } #ChatOverlay.jxweb3-chat .chat-entry .pc248-emote-toggle{left:83.8%;width:7.1%} #ChatOverlay.jxweb3-chat .chat-entry button[type='submit']{left:90.5%;width:8.3%} #ChatOverlay.jxweb3-chat .chat-entry button:hover{background:#95cba844} #ChatOverlay.jxweb3-chat .pc250-emote-inline{display:inline-block;width:25px;height:25px;vertical-align:middle;background:url('./jxweb3-ui/pc-emotes-9x8.png') no-repeat 0 0/225px 200px} #ChatOverlay.jxweb3-chat .jxweb3-emote-popup{ position:absolute;left:0;bottom:46px;width:225px;height:200px;z-index:90;display:grid; grid-template-columns:repeat(9,25px);grid-template-rows:repeat(8,25px);background:#030603;border:1px solid #73765e; box-shadow:0 4px 18px #000d;overflow:hidden;pointer-events:auto; } #ChatOverlay.jxweb3-chat .jxweb3-emote-popup[hidden]{display:none!important} #ChatOverlay.jxweb3-chat .jxweb3-emote-hit{width:25px;height:25px;min-width:0;min-height:0;padding:0;border:1px solid transparent;background-color:transparent;background-image:url('./jxweb3-ui/pc-emotes-9x8.png');background-repeat:no-repeat;background-size:225px 200px;cursor:pointer} #ChatOverlay.jxweb3-chat .jxweb3-emote-hit:hover{background-color:#ffe26c44;border-color:#ffeb6f} #JX69PlayerUIRoot.mobile-layout #ChatOverlay.jxweb3-chat{overflow:visible!important;font-size:9.5px} #JX69PlayerUIRoot.mobile-layout #ChatOverlay.jxweb3-chat .chat-channel{font-size:8.5px;padding-inline:3px} #JX69PlayerUIRoot.mobile-layout #ChatOverlay.jxweb3-chat .chat-entry input{font-size:10px} /* V35.21CV — world chat separated from game status notifications. */ #GameStatusOverlay{ position:absolute;z-index:calc(var(--jx30-notify) - 1);display:none;box-sizing:border-box;pointer-events:none; flex-direction:column;justify-content:flex-end;gap:1px;overflow:hidden;padding:3px 5px; color:#d7dfc7;font:10px/1.28 Tahoma,Arial,sans-serif;text-shadow:0 1px 1px #000; background:linear-gradient(90deg,rgba(3,14,9,.78),rgba(3,14,9,.46) 82%,transparent); border-left:2px solid rgba(190,158,72,.55);filter:drop-shadow(0 1px 2px #0008); } #GameStatusOverlay .jx69-game-status-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:12px} #GameStatusOverlay .status-exp{color:#a7d8ff}#GameStatusOverlay .status-loot{color:#ffe38a}#GameStatusOverlay .status-sys{color:#cbd8c0} #ChatOverlay.jxweb3-chat .pc250-chat-simcity{color:#e9f1cf} #ChatOverlay.jxweb3-chat .pc250-chat-simcity .pc250-chan-name{color:#72e4bb} #ChatOverlay.jxweb3-chat .pc250-chat-lines{contain:content;will-change:scroll-position} #JX69PlayerUIRoot.mobile-layout #GameStatusOverlay{font-size:9px;line-height:1.22;padding:2px 4px} /* CV mobile compositor budget: retain crisp text, remove expensive HUD filters. */ #ChatOverlay.jxweb3-chat,#GameStatusOverlay{contain:layout paint style} #JX69PlayerUIRoot.mobile-layout #ChatOverlay.jxweb3-chat,#JX69PlayerUIRoot.mobile-layout #GameStatusOverlay{filter:none!important}