#WinLogin :is(div,span,label,form,button,input){all:revert;box-sizing:content-box} #WinLogin button,#WinLogin input{font-family:inherit} #WinLogin{font-family:Inter,"Segoe UI",Arial,sans-serif}
:where(#WinLogin,#CharSelectV4) button{min-height:0;margin:0;font-family:inherit} :where(#WinLogin) input{margin:0;box-sizing:border-box} #WinLogin .login-form{display:block} #WinLogin .login-card{min-height:0}
#login-dialog:not(.selecting) {
	top: 50%;
	left: 50%;
	width: 394px;
	height: 366px;
	font-family: Inter, "Segoe UI", Arial, sans-serif;
}

#WinLogin {
	position: absolute;
	width: 394px;
	height: 366px;
	color: #203b5b;
}

#WinLogin .login-card {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 22px;
	border: 1px solid rgba(104, 177, 236, 0.58);
	border-radius: 18px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(229, 244, 255, 0.9)),
		rgba(244, 250, 255, 0.92);
	box-shadow: 0 18px 48px rgba(28, 78, 132, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(12px);
}

#WinLogin .login-copy {
	padding-right: 38px;
	margin-bottom: 16px;
}

#WinLogin .login-kicker {
	color: #2b83ca;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0;
	text-transform: uppercase;
}

#WinLogin .login-title {
	margin-top: 2px;
	color: #1f4568;
	font-size: 30px;
	font-weight: 950;
	line-height: 1;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

#WinLogin .server-title {
	position: static;
	width: auto;
	height: auto;
	margin-top: 7px;
	color: #5a7893;
	font-size: 12px;
	font-weight: 750;
	line-height: 1.2;
	text-align: left;
	text-shadow: none;
}

#WinLogin .login-form {
	display: grid;
	gap: 10px;
}

#WinLogin .field-row {
	display: grid;
	gap: 5px;
	color: #476986;
	font-size: 10px;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
}

#WinLogin input {
	box-sizing: border-box;
	position: static;
	width: 100%;
	height: 39px;
	padding: 0 13px;
	border: 1px solid rgba(92, 160, 225, 0.42);
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.78);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
	color: #183a59;
	font-size: 14px;
	font-weight: 800;
	outline: none;
	text-align: left;
}

#WinLogin input:focus {
	border-color: rgba(47, 141, 226, 0.92);
	box-shadow: 0 0 0 3px rgba(74, 159, 238, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

#WinLogin .save {
	position: static;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	height: 22px;
	padding: 0;
	border: 0;
	background: none !important;
	color: #4e6f8c;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
}

#WinLogin .save-check {
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	border-radius: 5px;
	border: 1px solid rgba(81, 151, 218, 0.55);
	background: rgba(255, 255, 255, 0.76);
}

#WinLogin .save.is-on .save-check::before {
	width: 8px;
	height: 4px;
	border-left: 2px solid #1d83d0;
	border-bottom: 2px solid #1d83d0;
	content: "";
	transform: rotate(-45deg);
}

#WinLogin .btn,
#WinLogin .social-login {
	box-sizing: border-box;
	border-radius: 11px;
	font-family: inherit;
	font-weight: 900;
	cursor: pointer;
	transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

#WinLogin .btn.connect {
	position: static;
	width: 100%;
	height: 42px;
	border: 1px solid rgba(50, 129, 205, 0.6);
	background: linear-gradient(180deg, #83c8ff, #4d94e7) !important;
	color: #ffffff;
	font-size: 16px;
	text-shadow: 0 1px 3px rgba(25, 73, 130, 0.36);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 8px 17px rgba(62, 132, 211, 0.22);
}

#WinLogin .social-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

#WinLogin .social-login {
	height: 34px;
	border: 1px solid rgba(89, 154, 216, 0.38);
	background: rgba(255, 255, 255, 0.76);
	color: #2c587b;
	font-size: 12px;
}

#WinLogin .social-login.google {
	color: #265b9a;
}

#WinLogin .social-login.facebook {
	color: #2750a5;
}

#WinLogin .social-login.guest {
	color: #27745e;
}

#WinLogin .btn.signup {
	position: static;
	width: 100%;
	height: 34px;
	border: 1px solid rgba(89, 154, 216, 0.38);
	background: linear-gradient(180deg, #ffffff, #e4f2ff) !important;
	color: #286da6;
	font-size: 12px;
}

#WinLogin .btn.exit {
	position: absolute;
	top: 13px;
	right: 13px;
	width: 30px;
	height: 30px;
	border: 1px solid rgba(89, 154, 216, 0.35);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.68) !important;
	color: #2b5e85;
	font-size: 18px;
	line-height: 26px;
}

#WinLogin .btn:hover,
#WinLogin .social-login:hover,
#WinLogin .save:hover {
	filter: brightness(1.04);
	transform: translateY(-1px);
}

#WinLogin .btn:active,
#WinLogin .social-login:active,
#WinLogin .save:active {
	transform: translateY(1px);
}

#WinLogin input:-webkit-autofill,
#WinLogin input:-webkit-autofill:hover,
#WinLogin input:-webkit-autofill:focus,
#WinLogin input:-webkit-autofill:active,
#WinLogin input:-internal-autofill-selected,
#WinLogin input:-internal-autofill-previewed {
	-webkit-background-clip: text;
	transition: background-color 5000s ease-in-out 0s;
	box-shadow: inset 0 0 20px 20px rgba(255, 255, 255, 0);
}

html.rb-mobile-client #WinLogin {
	width: min(360px, calc(var(--rb-game-w, 100vw) - 36px));
	height: 342px;
}

html.rb-mobile-client #WinLogin .login-card {
	padding: 18px;
	border-radius: 16px;
}

html.rb-mobile-client #WinLogin .login-title {
	font-size: 25px;
}

html.rb-mobile-client #WinLogin input {
	height: 36px;
}

html.rb-mobile-client #WinLogin .btn.connect {
	height: 40px;
}

/* Codex login polish: lighter glass, cleaner type, aligned account actions. */
#login-dialog:not(.selecting) {
	width: 408px !important;
	height: 358px !important;
}

#WinLogin {
	width: 408px !important;
	height: 358px !important;
}

#WinLogin .login-card {
	padding: 21px 22px !important;
	border-radius: 16px !important;
	border-color: rgba(143, 202, 244, 0.52) !important;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(231, 246, 255, 0.62)), rgba(240, 249, 255, 0.48) !important;
	box-shadow: 0 18px 42px rgba(28, 78, 132, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
	backdrop-filter: blur(14px) saturate(1.08) !important;
}

#WinLogin .login-kicker,
#WinLogin .field-row {
	font-weight: 700 !important;
}

#WinLogin .login-title {
	font-size: 28px !important;
	font-weight: 760 !important;
}

#WinLogin .server-title,
#WinLogin input,
#WinLogin .save {
	font-weight: 620 !important;
}

#WinLogin input {
	background: rgba(255, 255, 255, 0.5) !important;
}

#WinLogin .btn,
#WinLogin .social-login {
	font-weight: 700 !important;
}

#WinLogin .account-actions {
	display: grid !important;
	grid-template-columns: 1fr 106px !important;
	gap: 8px !important;
}

#WinLogin .social-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#WinLogin .social-login,
#WinLogin .btn.signup {
	background: rgba(255, 255, 255, 0.56) !important;
}

#WinLogin .btn.exit {
	border-color: rgba(89, 154, 216, 0.28) !important;
	background: rgba(255, 255, 255, 0.42) !important;
	font-size: 0 !important;
	line-height: 1 !important;
}

#WinLogin .btn.exit::before,
#WinLogin .btn.exit::after {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 13px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	content: "";
	transform-origin: center;
}

#WinLogin .btn.exit::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

#WinLogin .btn.exit::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

html.rb-mobile-client #WinLogin {
	width: min(360px, calc(var(--rb-game-w, 100vw) - 36px)) !important;
	height: 342px !important;
}

html.rb-mobile-client #WinLogin .account-actions {
	grid-template-columns: 1fr 92px !important;
}

/* Final login-only redesign: compact Ragnarok glass panel with underline fields. */
#login-dialog:not(.selecting) {
	top: 50% !important;
	left: 50% !important;
	width: 386px !important;
	height: 344px !important;
	font-family: Inter, "Segoe UI", Arial, sans-serif !important;
}

#WinLogin {
	width: 386px !important;
	height: 344px !important;
	color: #173a59 !important;
}

#WinLogin .login-card {
	padding: 20px 22px 18px !important;
	border: 1px solid rgba(132, 196, 239, 0.5) !important;
	border-radius: 18px !important;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(225, 243, 255, 0.66)),
		rgba(240, 249, 255, 0.62) !important;
	box-shadow:
		0 16px 38px rgba(28, 86, 139, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.66) !important;
	backdrop-filter: blur(13px) saturate(1.08) !important;
}

#WinLogin .login-copy {
	margin-bottom: 15px !important;
	padding-right: 38px !important;
}

#WinLogin .login-kicker {
	color: #287ec5 !important;
	font-size: 10px !important;
	font-weight: 750 !important;
	letter-spacing: 0 !important;
}

#WinLogin .login-title {
	margin-top: 3px !important;
	color: #173f63 !important;
	font-size: 28px !important;
	font-weight: 780 !important;
	letter-spacing: 0 !important;
	line-height: 1.02 !important;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

#WinLogin .server-title {
	margin-top: 6px !important;
	color: rgba(55, 94, 126, 0.75) !important;
	font-size: 11px !important;
	font-weight: 650 !important;
}

#WinLogin .login-form {
	gap: 9px !important;
}

#WinLogin .field-row {
	position: relative !important;
	display: block !important;
	padding: 0 28px 0 26px !important;
	border-bottom: 1px solid rgba(74, 143, 204, 0.45) !important;
	color: rgba(48, 89, 123, 0.82) !important;
	font-size: 9px !important;
	font-weight: 780 !important;
	letter-spacing: 0 !important;
	line-height: 1 !important;
	text-transform: uppercase !important;
	transition: border-color 140ms ease, box-shadow 140ms ease !important;
}

#WinLogin .field-row:focus-within {
	border-bottom-color: rgba(40, 149, 232, 0.95) !important;
	box-shadow: 0 1px 0 rgba(91, 186, 248, 0.28) !important;
}

#WinLogin .field-row::before,
#WinLogin .field-pass::after {
	position: absolute !important;
	content: "" !important;
	pointer-events: none !important;
}

#WinLogin .field-row::before {
	left: 2px !important;
	bottom: 9px !important;
	width: 15px !important;
	height: 15px !important;
	opacity: 0.74 !important;
}

#WinLogin .field-user::before {
	border-radius: 50% 50% 45% 45% !important;
	background:
		radial-gradient(circle at 50% 32%, transparent 0 3px, #2a6f9f 3.5px 5.5px, transparent 6px),
		radial-gradient(ellipse at 50% 92%, #2a6f9f 0 7px, transparent 7.5px) !important;
}

#WinLogin .field-pass::before {
	bottom: 8px !important;
	border: 2px solid #2a6f9f !important;
	border-top-width: 6px !important;
	border-radius: 3px !important;
	background: transparent !important;
	clip-path: inset(4px 1px 0 1px) !important;
}

#WinLogin .field-pass::after {
	right: 4px !important;
	bottom: 11px !important;
	width: 17px !important;
	height: 10px !important;
	border: 1.5px solid rgba(42, 111, 159, 0.72) !important;
	border-radius: 50% !important;
	background: radial-gradient(circle at 50% 50%, rgba(42, 111, 159, 0.8) 0 2px, transparent 2.5px) !important;
}

#WinLogin .field-row > span {
	display: block !important;
	margin-bottom: 1px !important;
}

#WinLogin input {
	position: static !important;
	width: 100% !important;
	height: 27px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #153856 !important;
	font-size: 14px !important;
	font-weight: 680 !important;
	line-height: 27px !important;
	outline: none !important;
}

#WinLogin input:focus {
	border-color: transparent !important;
	box-shadow: none !important;
}

#WinLogin .save {
	height: 20px !important;
	gap: 7px !important;
	color: rgba(50, 87, 119, 0.82) !important;
	font-size: 11px !important;
	font-weight: 690 !important;
}

#WinLogin .save-check {
	width: 15px !important;
	height: 15px !important;
	border-radius: 4px !important;
	background: rgba(255, 255, 255, 0.44) !important;
}

#WinLogin .btn.connect {
	height: 40px !important;
	border: 1px solid rgba(45, 129, 207, 0.55) !important;
	border-radius: 12px !important;
	background: linear-gradient(180deg, #72bef7, #408fdc) !important;
	color: #ffffff !important;
	font-size: 15px !important;
	font-weight: 760 !important;
	box-shadow:
		0 8px 18px rgba(48, 133, 214, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
	text-shadow: 0 1px 2px rgba(24, 72, 124, 0.34) !important;
}

#WinLogin .social-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 7px !important;
}

#WinLogin .social-login {
	height: 28px !important;
	border: 1px solid rgba(107, 166, 218, 0.32) !important;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, 0.42) !important;
	box-shadow: none !important;
	color: rgba(38, 82, 118, 0.84) !important;
	font-size: 11px !important;
	font-weight: 680 !important;
}

#WinLogin .social-login.google,
#WinLogin .social-login.facebook,
#WinLogin .social-login.guest {
	color: rgba(38, 82, 118, 0.84) !important;
}

#WinLogin .account-actions {
	display: flex !important;
	gap: 18px !important;
	justify-content: center !important;
	margin: -1px 0 0 !important;
}

#WinLogin .btn.signup,
#WinLogin .btn.repair {
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #246fa8 !important;
	font-size: 11px !important;
	font-weight: 720 !important;
	text-decoration: none !important;
}

#WinLogin .btn.repair {
	color: rgba(38, 92, 128, 0.78) !important;
}

#WinLogin .btn.signup:hover,
#WinLogin .btn.repair:hover {
	text-decoration: underline !important;
}

#WinLogin .btn.exit {
	top: 13px !important;
	right: 13px !important;
	width: 28px !important;
	height: 28px !important;
	border: 1px solid rgba(83, 153, 216, 0.34) !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.36) !important;
	box-shadow: none !important;
	color: #2f6f9e !important;
	font-size: 0 !important;
	line-height: 1 !important;
}

#WinLogin .btn.exit::before,
#WinLogin .btn.exit::after {
	width: 12px !important;
	height: 2px !important;
}

#WinLogin .btn:hover,
#WinLogin .social-login:hover,
#WinLogin .save:hover {
	filter: brightness(1.03) !important;
	transform: translateY(-1px) !important;
}

html.rb-mobile-client #WinLogin {
	width: min(354px, calc(var(--rb-game-w, 100vw) - 36px)) !important;
	height: 332px !important;
}

html.rb-mobile-client #WinLogin .login-card {
	padding: 18px 20px 16px !important;
}

html.rb-mobile-client #WinLogin .login-title {
	font-size: 25px !important;
}

html.rb-mobile-client #WinLogin input {
	height: 25px !important;
	line-height: 25px !important;
}

/* Final translucent login pass: centered panel, clean inline icons, underline fields. */
#login-dialog:not(.selecting) {
	left: var(--login-left, 50%) !important;
	top: var(--login-top, 50%) !important;
	transform: var(--login-transform, translate(-50%, -50%)) !important;
}

#WinLogin .field-row::before,
#WinLogin .field-pass::after {
	display: none !important;
	content: none !important;
}

#WinLogin .field-row {
	padding: 0 25px 0 24px !important;
}

#WinLogin .field-row > span:not(.login-field-icon):not(.login-eye-icon):not(.brand-icon) {
	display: block !important;
	margin-bottom: 2px !important;
}

#WinLogin .login-field-icon,
#WinLogin .login-eye-icon {
	position: absolute !important;
	display: grid !important;
	place-items: center !important;
	bottom: 6px !important;
	width: 17px !important;
	height: 17px !important;
	margin: 0 !important;
	color: rgba(45, 119, 169, 0.82) !important;
	opacity: 0.9 !important;
	pointer-events: none !important;
}

#WinLogin .login-field-icon {
	left: 0 !important;
}

#WinLogin .login-eye-icon {
	right: 0 !important;
	pointer-events: auto !important;
	cursor: pointer !important;
}

#WinLogin .login-field-icon svg,
#WinLogin .login-eye-icon svg {
	width: 100% !important;
	height: 100% !important;
	fill: currentColor !important;
}

#WinLogin .field-row:focus-within .login-field-icon,
#WinLogin .field-row:focus-within .login-eye-icon {
	color: #1f8ee6 !important;
	opacity: 1 !important;
}

#WinLogin .social-login {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
}

#WinLogin .brand-icon {
	display: inline-grid !important;
	place-items: center !important;
	width: 14px !important;
	height: 14px !important;
	margin: 0 !important;
}

#WinLogin .brand-icon svg {
	display: block !important;
	width: 14px !important;
	height: 14px !important;
}

#CharSelectV4 {
	position: absolute;
	min-width: 100%;
	min-height: 100%;
	z-index: 100;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

#CharSelectV4 .char_select_container {
	position: absolute;
	display: flex;
	flex-direction: row;
	background-color: rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	padding-top: 20px;
	padding-left: 5px;
}

/** Box **/
#CharSelectV4 .char_list {
	flex: 1;
	max-width: 800px;
	min-width: 157px;
	height: 595px;
	max-height: 80vh;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	overflow-y: auto;
}

#CharSelectV4 .box_select {
	position: absolute;
	width: 157px;
	height: 159px;
	top: 40px;
	margin-left: -5px;
}
#CharSelectV4 .char_canvas {
	width: 157px;
	height: 195px;
	position: relative;
	z-index: 10;
}
#CharSelectV4 .char_canvas .name {
	position: absolute;
	bottom: 17px;
	width: 100%;
	text-align: center;
	font-weight: bold;
	color: #15154a;
}

#CharSelectV4 .char_canvas .job_icon {
	position: absolute;
	top: 15px;
	right: 12px;
	width: 25px;
	height: 25px;
}

/** Slot info **/
#CharSelectV4 .slotinfo {
	position: absolute;
	top: 195px;
	right: 10px;
	height: 20px;
	display: block;
	border: 1px solid #c6cee7;
	border-radius: 4px;
	padding-left: 10px;
	padding-right: 10px;
}
#CharSelectV4 .slotinfo .number {
	color: #58709e;
	font-weight: bold;
	margin-right: 10px;
}
#CharSelectV4 .slotinfo .content {
	color: #555;
	top: 6px;
	right: 8px;
}

/** Page info **/
#CharSelectV4 .pageinfo {
	position: absolute;
	left: 275px;
	top: 185px;
	font-weight: bold;
	color: #646464;
}
#CharSelectV4 .pageinfo .current {
	color: #fe3b7d;
}

/** Characters infos **/
#CharSelectV4 .charinfo {
	height: 585px;
	max-height: 80vh;
	width: 185px;
	background-repeat: no-repeat;
	margin-top: 10px;
	margin-left: 10px;
	position: relative;
}
#CharSelectV4 .charinfo div {
	position: absolute;
	width: 90px;
	height: 13px;
}
#CharSelectV4 .charinfo .name {
	left: 52px;
	top: 2px;
	white-space: nowrap;
}
#CharSelectV4 .charinfo .job {
	left: 60px;
	top: 105px;
}
#CharSelectV4 .charinfo .lvl {
	left: 60px;
	top: 123px;
}
#CharSelectV4 .charinfo .exp {
	left: 60px;
	top: 140px;
}
#CharSelectV4 .charinfo .hp {
	left: 60px;
	top: 157px;
}
#CharSelectV4 .charinfo .sp {
	left: 60px;
	top: 174px;
}
#CharSelectV4 .charinfo .map {
	left: 60px;
	top: 89px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#CharSelectV4 .charinfo .str {
	left: 60px;
	top: 191px;
}
#CharSelectV4 .charinfo .agi {
	left: 60px;
	top: 208px;
}
#CharSelectV4 .charinfo .vit {
	left: 60px;
	top: 225px;
}
#CharSelectV4 .charinfo .int {
	left: 60px;
	top: 242px;
}
#CharSelectV4 .charinfo .dex {
	left: 60px;
	top: 259px;
}
#CharSelectV4 .charinfo .luk {
	left: 60px;
	top: 276px;
}

/** Buttons **/
#CharSelectV4 .btn.delete {
	position: absolute;
	border: 0;
	width: 131px;
	height: 24px;
	background-repeat: no-repeat;
	background-color: transparent;
}

#CharSelectV4 .btn.canceldelete {
	position: absolute;
	border: 0;
	width: 131px;
	height: 24px;
	background-repeat: no-repeat;
	background-color: transparent;
}

#CharSelectV4 .btn.finaldelete {
	position: absolute;
	border: 0;
	width: 131px;
	height: 24px;
	background-repeat: no-repeat;
	background-color: transparent;
}

#CharSelectV4 .btn.ok {
	position: absolute;
	border: 0;
	width: 165px;
	height: 110px;
	background-repeat: no-repeat;
	background-color: transparent;
	color: white;
	padding-top: 20px;
}
#CharSelectV4 .btn.ok:hover {
	text-shadow: #000 1px 1px;
}

#CharSelectV4 .ok,
#CharSelectV4 .make {
	right: 15px;
	top: 380px;
}
#CharSelectV4 .cancel {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 17px;
	height: 18px;
	border: none;
	background-repeat: no-repeat;
	background-color: transparent;
}
#CharSelectV4 .delete {
	right: 33px;
	top: 300px;
}

#CharSelectV4 .canceldelete {
	right: 33px;
	top: 300px;
}

#CharSelectV4 .finaldelete {
	right: 33px;
	top: 330px;
}

#CharSelectV4 .timedelete {
	position: relative;
	height: 20px;
	width: 100px;
	top: -150px;
	left: 55px;
}

#CharSelectV4 .hidden {
	display: none;
}

/* Modern responsive character select layer. Keeps the original slot IDs and JS behavior intact. */
#CharSelectV4 {
	box-sizing: border-box;
	width: var(--rb-game-w, 100vw);
	height: var(--rb-game-h, 100vh);
	min-width: 0;
	min-height: 0;
	padding: clamp(14px, 2vw, 28px);
	background:
		linear-gradient(180deg, rgba(42, 92, 139, 0.42), rgba(8, 11, 14, 0.72) 52%, rgba(5, 8, 10, 0.92)),
		linear-gradient(120deg, rgba(35, 105, 83, 0.34), rgba(21, 26, 33, 0.1) 44%, rgba(119, 89, 45, 0.22));
	color: #eef6f2;
	font-family: Arial, Helvetica, sans-serif;
}

#CharSelectV4 .char_select_container {
	position: relative;
	box-sizing: border-box;
	width: min(1120px, calc(var(--rb-game-w, 100vw) - 48px));
	height: min(640px, calc(var(--rb-game-h, 100vh) - 36px));
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: 14px;
	padding: 52px 16px 16px;
	background: rgba(7, 11, 12, 0.84) !important;
	background-image: none !important;
	border: 1px solid rgba(232, 213, 139, 0.56);
	border-radius: 10px;
	box-shadow:
		0 18px 42px rgba(0, 0, 0, 0.48),
		inset 0 1px 0 rgba(255, 255, 255, 0.07);
	overflow: hidden;
}

#CharSelectV4 .char_select_container::before {
	position: absolute;
	top: 16px;
	left: 18px;
	color: #fff4bd;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0;
	text-shadow: 0 2px 3px rgba(0, 0, 0, 0.72);
	content: 'Select Character';
}

#CharSelectV4 .char_select_container::after {
	position: absolute;
	top: 45px;
	left: 16px;
	right: 16px;
	height: 1px;
	background: rgba(232, 213, 139, 0.24);
	content: '';
}

#CharSelectV4 .char_list {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	grid-auto-rows: 160px;
	gap: 10px;
	width: 100%;
	max-width: none;
	min-width: 0;
	height: 100%;
	max-height: none;
	padding: 2px 4px 4px 2px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(232, 213, 139, 0.58) rgba(255, 255, 255, 0.08);
}

#CharSelectV4 .box_select {
	display: none;
}

#CharSelectV4 .char_canvas {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 160px;
	padding: 8px;
	border: 1px solid rgba(232, 213, 139, 0.28);
	border-radius: 8px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
		rgba(10, 16, 17, 0.7) !important;
	background-image: none !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
	overflow: hidden;
	transition:
		border-color 120ms ease,
		background 120ms ease,
		transform 120ms ease;
}

#CharSelectV4 .char_canvas:hover,
#CharSelectV4 .char_canvas:active {
	border-color: rgba(255, 242, 166, 0.76);
	background:
		linear-gradient(180deg, rgba(255, 244, 188, 0.15), rgba(255, 255, 255, 0.03)),
		rgba(12, 20, 21, 0.82) !important;
}

#CharSelectV4 .char_canvas:active {
	transform: translateY(1px);
}

#CharSelectV4 .char_canvas canvas {
	position: absolute;
	left: 50%;
	bottom: 18px;
	width: 128px !important;
	height: 158px !important;
	transform: translateX(-50%);
	background-image: none !important;
}

#CharSelectV4 .char_canvas .name {
	left: 8px;
	right: 8px;
	bottom: 8px;
	width: auto;
	color: #f8f2cf;
	font-size: 12px;
	text-shadow:
		0 1px 2px #000,
		0 0 4px rgba(0, 0, 0, 0.7);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#CharSelectV4 .char_canvas .job_icon {
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	border-radius: 5px;
	background-color: rgba(0, 0, 0, 0.38);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

#CharSelectV4 .charinfo {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 54px 14px 86px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
		rgba(9, 14, 16, 0.82) !important;
	background-image: none !important;
	border: 1px solid rgba(232, 213, 139, 0.32);
	border-radius: 8px;
	color: #edf7f5;
	overflow: hidden;
}

#CharSelectV4 .charinfo::before {
	position: absolute;
	top: 16px;
	left: 14px;
	color: #fff4bd;
	font-size: 14px;
	font-weight: 800;
	content: 'Character Info';
}

#CharSelectV4 .charinfo div {
	position: static;
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: auto;
	min-height: 19px;
	margin: 0 0 5px;
	padding: 3px 0 3px 86px;
	color: #ffffff;
	font-size: 12px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#CharSelectV4 .charinfo div::before {
	float: left;
	width: 80px;
	margin-left: -86px;
	color: rgba(228, 236, 232, 0.72);
	font-weight: 700;
}

#CharSelectV4 .charinfo .job::before {
	content: 'Job';
}
#CharSelectV4 .charinfo .lvl::before {
	content: 'Level';
}
#CharSelectV4 .charinfo .exp::before {
	content: 'EXP';
}
#CharSelectV4 .charinfo .hp::before {
	content: 'HP';
}
#CharSelectV4 .charinfo .sp::before {
	content: 'SP';
}
#CharSelectV4 .charinfo .map::before {
	content: 'Map';
}
#CharSelectV4 .charinfo .str::before {
	content: 'STR';
}
#CharSelectV4 .charinfo .agi::before {
	content: 'AGI';
}
#CharSelectV4 .charinfo .vit::before {
	content: 'VIT';
}
#CharSelectV4 .charinfo .int::before {
	content: 'INT';
}
#CharSelectV4 .charinfo .dex::before {
	content: 'DEX';
}
#CharSelectV4 .charinfo .luk::before {
	content: 'LUK';
}

#CharSelectV4 .pageinfo {
	left: auto;
	right: 16px;
	top: 18px;
	color: rgba(238, 247, 243, 0.78);
	font-size: 12px;
}

#CharSelectV4 .pageinfo .current {
	color: #fff4bd;
}

#CharSelectV4 .btn {
	box-sizing: border-box;
	border: 1px solid rgba(234, 239, 238, 0.42) !important;
	border-radius: 7px;
	background: linear-gradient(180deg, rgba(46, 56, 57, 0.94), rgba(14, 18, 19, 0.94)) !important;
	background-image: none !important;
	color: #f8f8f0;
	font: 800 12px/1 Arial, Helvetica, sans-serif;
	text-shadow: none;
	box-shadow:
		0 6px 14px rgba(0, 0, 0, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

#CharSelectV4 .btn:hover {
	border-color: rgba(255, 244, 188, 0.8) !important;
}

#CharSelectV4 .btn:active {
	transform: translateY(1px);
}

#CharSelectV4 .btn.cancel {
	top: 14px;
	right: 14px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	font-size: 0;
}

#CharSelectV4 .btn.cancel::before {
	font-size: 18px;
	content: 'x';
}

#CharSelectV4 .btn.ok,
#CharSelectV4 .btn.delete,
#CharSelectV4 .btn.canceldelete,
#CharSelectV4 .btn.finaldelete {
	left: 14px;
	right: 14px;
	width: auto;
	height: 34px;
	padding: 0;
}

#CharSelectV4 .btn.ok,
#CharSelectV4 .btn.delete,
#CharSelectV4 .btn.canceldelete {
	top: auto;
	bottom: 14px;
}

#CharSelectV4 .btn.finaldelete {
	top: auto;
	bottom: 52px;
}

#CharSelectV4 .slotinfo,
#CharSelectV4 .timedelete {
	display: none !important;
}

html.rb-mobile-client #CharSelectV4 {
	padding: 10px;
}

html.rb-mobile-client #CharSelectV4 .char_select_container {
	width: calc(var(--rb-game-w, 100vw) - 20px);
	height: calc(var(--rb-game-h, 100vh) - 20px);
	grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
	gap: 10px;
	padding: 44px 12px 12px;
	border-radius: 8px;
}

html.rb-mobile-client #CharSelectV4 .char_select_container::before {
	top: 13px;
	left: 14px;
	font-size: 16px;
}

html.rb-mobile-client #CharSelectV4 .char_list {
	grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
	grid-auto-rows: 134px;
	gap: 8px;
	overflow-y: auto;
}

html.rb-mobile-client #CharSelectV4 .char_canvas {
	height: 134px;
}

html.rb-mobile-client #CharSelectV4 .char_canvas canvas {
	bottom: 14px;
	width: 108px !important;
	height: 134px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo {
	padding: 46px 12px 68px;
}

html.rb-mobile-client #CharSelectV4 .charinfo div {
	min-height: 17px;
	margin-bottom: 3px;
	font-size: 11px;
}

html.rb-mobile-client #CharSelectV4 .btn.ok,
html.rb-mobile-client #CharSelectV4 .btn.delete,
html.rb-mobile-client #CharSelectV4 .btn.canceldelete,
html.rb-mobile-client #CharSelectV4 .btn.finaldelete {
	height: 30px;
}

/* Character-first redesign: shared for desktop and mobile, no empty-slot grid. */
#CharSelectV4 {
	padding: 0;
	background:
		radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.16), transparent 22%),
		linear-gradient(180deg, rgba(98, 176, 225, 0.7), rgba(86, 181, 151, 0.48) 45%, rgba(13, 22, 24, 0.92)),
		linear-gradient(120deg, #76c4f3, #9adf99 62%, #2c3a32);
	overflow: hidden;
}

#CharSelectV4::before {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 18% 76%, rgba(35, 120, 61, 0.3), transparent 24%),
		radial-gradient(circle at 78% 28%, rgba(255, 255, 255, 0.18), transparent 18%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 46%);
	content: '';
	pointer-events: none;
}

#CharSelectV4 .char_select_container {
	position: relative;
	display: block;
	width: var(--rb-game-w, 100vw);
	height: var(--rb-game-h, 100vh);
	max-width: none;
	max-height: none;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none;
	overflow: hidden;
}

#CharSelectV4 .char_select_container::before {
	top: clamp(18px, 3.4vh, 38px);
	left: clamp(22px, 4vw, 72px);
	color: #ffffff;
	font-size: clamp(19px, 2vw, 30px);
	text-shadow: 0 3px 8px rgba(0, 0, 0, 0.42);
	content: 'Select Character';
}

#CharSelectV4 .char_select_container::after {
	display: none;
}

#CharSelectV4 .char_list {
	position: absolute;
	left: clamp(22px, 4vw, 72px);
	top: clamp(76px, 14vh, 132px);
	bottom: clamp(80px, 12vh, 130px);
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: clamp(188px, 20vw, 260px);
	height: auto;
	padding: 0;
	overflow: visible;
}

#CharSelectV4 .char_canvas {
	display: none;
}

#CharSelectV4 .char_canvas.has-character,
#CharSelectV4 .char_canvas.create-slot {
	position: relative;
	display: block;
	width: 100%;
	height: 72px;
	padding: 8px 12px 8px 72px;
	border: 0;
	border-radius: 999px;
	background: rgba(8, 13, 16, 0.28) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(3px);
	overflow: visible;
}

#CharSelectV4 .char_canvas.has-character:hover,
#CharSelectV4 .char_canvas.create-slot:hover {
	background: rgba(255, 255, 255, 0.18) !important;
}

#CharSelectV4 .char_canvas.hidden-slot {
	display: none !important;
}

#CharSelectV4 .char_canvas.has-character canvas {
	left: 10px;
	bottom: 7px;
	width: 52px !important;
	height: 64px !important;
	transform: none;
}

#CharSelectV4 .char_canvas .name {
	left: 72px;
	right: 12px;
	bottom: auto;
	top: 16px;
	width: auto;
	text-align: left;
	color: #ffffff;
	font-size: 16px;
	font-weight: 900;
	line-height: 19px;
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.62);
}

#CharSelectV4 .char_canvas .job_icon {
	left: 42px;
	top: 42px;
	right: auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: rgba(84, 130, 218, 0.86);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}

#CharSelectV4 .char_canvas.create-slot {
	width: 74px;
	height: 74px;
	padding: 0;
	border-radius: 50%;
}

#CharSelectV4 .char_canvas.create-slot::before,
#CharSelectV4 .char_canvas.create-slot::after {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 34px;
	height: 6px;
	margin-left: -17px;
	margin-top: -3px;
	border-radius: 4px;
	background: #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.38);
	content: '';
}

#CharSelectV4 .char_canvas.create-slot::after {
	transform: rotate(90deg);
}

#CharSelectV4 .char_canvas.create-slot canvas,
#CharSelectV4 .char_canvas.create-slot .job_icon,
#CharSelectV4 .char_canvas.create-slot .name {
	display: none;
}

#CharSelectV4 .char_canvas.selected {
	position: absolute;
	left: calc((var(--rb-game-w, 100vw) - clamp(230px, 27vw, 330px)) / 2);
	top: clamp(108px, 20vh, 170px);
	z-index: 3;
	display: block;
	width: clamp(230px, 27vw, 330px);
	height: clamp(280px, 50vh, 430px);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none;
	backdrop-filter: none;
	pointer-events: auto;
}

#CharSelectV4 .char_canvas.selected canvas {
	left: 50%;
	bottom: 32px;
	width: clamp(210px, 24vw, 300px) !important;
	height: clamp(260px, 46vh, 390px) !important;
	transform: translateX(-50%);
}

#CharSelectV4 .char_canvas.selected .name {
	left: 0;
	right: 0;
	top: auto;
	bottom: 0;
	text-align: center;
	font-size: clamp(18px, 2.2vw, 28px);
	line-height: 1.1;
}

#CharSelectV4 .char_canvas.selected .job_icon {
	display: none;
}

#CharSelectV4 .charinfo {
	position: absolute;
	right: clamp(22px, 5vw, 80px);
	top: clamp(112px, 18vh, 170px);
	z-index: 5;
	width: clamp(210px, 22vw, 292px);
	height: auto;
	min-height: 280px;
	max-height: calc(var(--rb-game-h, 100vh) - 210px);
	padding: 52px 16px 98px;
	border: 0;
	border-radius: 18px;
	background: rgba(7, 13, 17, 0.32) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(6px);
}

#CharSelectV4 .charinfo::before {
	top: 18px;
	left: 16px;
	color: #ffffff;
	font-size: 16px;
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.48);
}

#CharSelectV4 .charinfo div {
	min-height: 22px;
	margin: 0;
	padding: 4px 0 4px 80px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.11);
	color: #ffffff;
	font-size: 12px;
}

#CharSelectV4 .charinfo div::before {
	width: 74px;
	margin-left: -80px;
	color: rgba(255, 255, 255, 0.68);
}

#CharSelectV4 .pageinfo {
	display: none;
}

#CharSelectV4 .btn.cancel {
	top: clamp(18px, 3vh, 32px);
	right: clamp(20px, 3vw, 42px);
	width: 42px;
	height: 42px;
	border: 0 !important;
	background: rgba(0, 0, 0, 0.34) !important;
	color: #ffffff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

#CharSelectV4 .btn.cancel::before {
	font-size: 24px;
	line-height: 40px;
	content: 'x';
}

#CharSelectV4 .btn.ok,
#CharSelectV4 .btn.delete,
#CharSelectV4 .btn.canceldelete,
#CharSelectV4 .btn.finaldelete {
	border: 0 !important;
	border-radius: 999px;
	box-shadow:
		0 8px 18px rgba(0, 0, 0, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

#CharSelectV4 .btn.ok {
	left: auto;
	right: clamp(26px, 5vw, 82px);
	bottom: clamp(26px, 6vh, 70px);
	width: clamp(210px, 20vw, 282px);
	height: 58px;
	padding: 0 26px;
	background: linear-gradient(180deg, rgba(124, 142, 239, 0.96), rgba(84, 96, 211, 0.96)) !important;
	color: #ffffff;
	font-size: clamp(16px, 1.8vw, 24px);
	line-height: 1.05;
	white-space: normal;
}

#CharSelectV4 .btn.delete,
#CharSelectV4 .btn.canceldelete,
#CharSelectV4 .btn.finaldelete {
	left: clamp(26px, 5vw, 76px);
	right: auto;
	bottom: clamp(24px, 5vh, 62px);
	width: 54px;
	height: 54px;
	padding: 0;
	background: rgba(0, 0, 0, 0.28) !important;
	font-size: 0;
}

#CharSelectV4 .btn.delete::before,
#CharSelectV4 .btn.finaldelete::before {
	position: absolute;
	left: 16px;
	top: 20px;
	width: 22px;
	height: 24px;
	border: 4px solid #ffffff;
	border-top: 0;
	border-radius: 0 0 4px 4px;
	content: '';
}

#CharSelectV4 .btn.delete::after,
#CharSelectV4 .btn.finaldelete::after {
	position: absolute;
	left: 13px;
	top: 14px;
	width: 28px;
	height: 5px;
	border-radius: 5px;
	background: #ffffff;
	content: '';
}

#CharSelectV4 .btn.canceldelete::before {
	font-size: 15px;
	line-height: 52px;
	content: 'Cancel';
}

#CharSelectV4 .btn.finaldelete {
	left: clamp(88px, 9vw, 142px);
	bottom: clamp(24px, 5vh, 62px);
	background: rgba(160, 45, 55, 0.72) !important;
}

html.rb-mobile-client #CharSelectV4 .char_select_container {
	width: var(--rb-game-w, 100vw);
	height: var(--rb-game-h, 100vh);
	padding: 0;
}

html.rb-mobile-client #CharSelectV4 .char_select_container::before {
	left: 22px;
	top: 14px;
	font-size: 18px;
}

html.rb-mobile-client #CharSelectV4 .char_list {
	left: 18px;
	top: 56px;
	bottom: 58px;
	width: 156px;
	gap: 8px;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character {
	height: 52px;
	padding: 6px 8px 6px 52px;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character canvas {
	left: 7px;
	bottom: 5px;
	width: 40px !important;
	height: 50px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas .name {
	left: 52px;
	top: 10px;
	font-size: 12px;
	line-height: 15px;
}

html.rb-mobile-client #CharSelectV4 .char_canvas .job_icon {
	left: 31px;
	top: 31px;
	width: 17px;
	height: 17px;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.create-slot {
	width: 50px;
	height: 50px;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.create-slot::before,
html.rb-mobile-client #CharSelectV4 .char_canvas.create-slot::after {
	width: 24px;
	height: 5px;
	margin-left: -12px;
	margin-top: -2px;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.selected {
	left: calc((var(--rb-game-w, 100vw) - 194px) / 2);
	top: 62px;
	width: 194px;
	height: calc(var(--rb-game-h, 100vh) - 122px);
}

html.rb-mobile-client #CharSelectV4 .char_canvas.selected canvas {
	bottom: 18px;
	width: 178px !important;
	height: min(280px, calc(var(--rb-game-h, 100vh) - 130px)) !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.selected .name {
	font-size: 17px;
}

html.rb-mobile-client #CharSelectV4 .charinfo {
	right: 16px;
	top: 58px;
	width: 188px;
	min-height: 0;
	max-height: calc(var(--rb-game-h, 100vh) - 130px);
	padding: 36px 10px 58px;
	border-radius: 14px;
}

html.rb-mobile-client #CharSelectV4 .charinfo::before {
	top: 12px;
	left: 10px;
	font-size: 13px;
}

html.rb-mobile-client #CharSelectV4 .charinfo div {
	min-height: 17px;
	padding: 2px 0 2px 58px;
	font-size: 10px;
	line-height: 13px;
}

html.rb-mobile-client #CharSelectV4 .charinfo div::before {
	width: 54px;
	margin-left: -58px;
}

html.rb-mobile-client #CharSelectV4 .btn.cancel {
	top: 10px;
	right: 12px;
	width: 32px;
	height: 32px;
}

html.rb-mobile-client #CharSelectV4 .btn.cancel::before {
	font-size: 19px;
	line-height: 30px;
}

html.rb-mobile-client #CharSelectV4 .btn.ok {
	right: 16px;
	bottom: 14px;
	width: 188px;
	height: 42px;
	font-size: 15px;
}

html.rb-mobile-client #CharSelectV4 .btn.delete,
html.rb-mobile-client #CharSelectV4 .btn.canceldelete,
html.rb-mobile-client #CharSelectV4 .btn.finaldelete {
	left: 18px;
	bottom: 12px;
	width: 42px;
	height: 42px;
}

html.rb-mobile-client #CharSelectV4 .btn.finaldelete {
	left: 68px;
}

html.rb-mobile-client #CharSelectV4 .btn.delete::before,
html.rb-mobile-client #CharSelectV4 .btn.finaldelete::before {
	left: 13px;
	top: 17px;
	width: 16px;
	height: 18px;
	border-width: 3px;
	border-top: 0;
}

html.rb-mobile-client #CharSelectV4 .btn.delete::after,
html.rb-mobile-client #CharSelectV4 .btn.finaldelete::after {
	left: 10px;
	top: 12px;
	width: 22px;
	height: 4px;
}

/* Final compact character-select pass: character rows, separate preview, no slot scrollbar. */
#CharSelectV4,
#CharSelectV4 .char_select_container,
#CharSelectV4 .char_list {
	overflow: hidden !important;
}

#CharSelectV4 .char_select_container {
	display: grid !important;
	grid-template-columns: clamp(210px, 22vw, 300px) minmax(220px, 1fr) clamp(230px, 23vw, 310px) !important;
	gap: clamp(14px, 2vw, 28px) !important;
	align-items: center;
}

#CharSelectV4 .char_list {
	position: absolute !important;
	left: clamp(26px, 4vw, 72px) !important;
	top: clamp(86px, 15vh, 130px) !important;
	bottom: clamp(82px, 12vh, 130px) !important;
	width: clamp(210px, 22vw, 300px) !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	padding: 0 !important;
}

#CharSelectV4 .char_canvas.has-character,
#CharSelectV4 .char_canvas.has-character.selected {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	display: block !important;
	width: 100% !important;
	height: 74px !important;
	min-height: 74px !important;
	padding: 10px 12px 10px 76px !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-radius: 18px !important;
	background: rgba(6, 14, 17, 0.3) !important;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.08),
		0 8px 18px rgba(0, 0, 0, 0.12) !important;
	backdrop-filter: blur(5px);
	transform: none !important;
}

#CharSelectV4 .char_canvas.has-character.selected {
	border-color: rgba(255, 255, 255, 0.62) !important;
	background: rgba(255, 255, 255, 0.18) !important;
	box-shadow:
		0 0 0 2px rgba(135, 195, 255, 0.22),
		0 10px 24px rgba(0, 0, 0, 0.18) !important;
}

#CharSelectV4 .char_canvas.hidden-slot {
	display: none !important;
}

#CharSelectV4.has-characters .char_canvas.create-slot {
	display: none !important;
}

#CharSelectV4:not(.has-characters) .char_canvas.create-slot {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	display: block !important;
	width: 100% !important;
	height: 74px !important;
	padding: 18px 16px 10px 64px !important;
	border-radius: 18px !important;
	background: rgba(6, 14, 17, 0.28) !important;
	color: #ffffff;
	font-size: 14px;
	font-weight: 800;
}

#CharSelectV4:not(.has-characters) .char_canvas.create-slot::before {
	left: 28px !important;
	top: 37px !important;
	width: 22px !important;
	height: 4px !important;
	margin: 0 !important;
}

#CharSelectV4:not(.has-characters) .char_canvas.create-slot::after {
	left: 28px !important;
	top: 37px !important;
	width: 22px !important;
	height: 4px !important;
	margin: 0 !important;
}

#CharSelectV4 .char_canvas.has-character canvas,
#CharSelectV4 .char_canvas.has-character.selected canvas {
	position: absolute !important;
	left: 12px !important;
	top: 8px !important;
	bottom: auto !important;
	width: 52px !important;
	height: 62px !important;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.36), rgba(69, 112, 123, 0.42) 58%, rgba(0, 0, 0, 0.18));
	box-shadow:
		inset 0 0 0 2px rgba(255, 255, 255, 0.52),
		0 4px 10px rgba(0, 0, 0, 0.2);
	transform: none !important;
}

#CharSelectV4 .char_canvas.has-character .name,
#CharSelectV4 .char_canvas.has-character.selected .name {
	position: static !important;
	display: block !important;
	width: auto !important;
	margin: 1px 0 4px !important;
	color: #ffffff !important;
	font-size: 15px !important;
	font-weight: 900 !important;
	line-height: 17px !important;
	text-align: left !important;
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.42) !important;
}

#CharSelectV4 .char_canvas .job_name,
#CharSelectV4 .char_canvas .char_level {
	position: static;
	display: block;
	width: auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.38);
}

#CharSelectV4 .char_canvas .job_name {
	color: rgba(255, 255, 255, 0.84);
	font-size: 11px;
	font-weight: 700;
	line-height: 13px;
}

#CharSelectV4 .char_canvas .char_level {
	color: rgba(225, 242, 255, 0.92);
	font-size: 11px;
	line-height: 13px;
}

#CharSelectV4 .char_canvas.has-character .job_icon {
	left: 46px !important;
	top: 48px !important;
	width: 18px !important;
	height: 18px !important;
}

#CharSelectV4 .character_stage {
	position: absolute;
	left: clamp(330px, 34vw, 620px);
	top: clamp(88px, 16vh, 150px);
	bottom: clamp(82px, 10vh, 120px);
	width: clamp(240px, 26vw, 360px);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	pointer-events: none;
}

#CharSelectV4 .selected_canvas {
	width: min(280px, 100%) !important;
	height: min(344px, calc(var(--rb-game-h, 100vh) - 170px)) !important;
	filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.28));
}

#CharSelectV4 .selected_name {
	max-width: 100%;
	margin-top: -6px;
	color: #ffffff;
	font-size: clamp(19px, 2vw, 29px);
	font-weight: 900;
	line-height: 1.08;
	text-align: center;
	text-shadow: 0 3px 8px rgba(0, 0, 0, 0.48);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#CharSelectV4 .selected_levels {
	margin-top: 5px;
	color: rgba(235, 248, 255, 0.9);
	font-size: clamp(12px, 1.2vw, 15px);
	font-weight: 800;
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}

#CharSelectV4 .charinfo {
	right: clamp(26px, 4vw, 72px) !important;
	top: clamp(94px, 15vh, 142px) !important;
	width: clamp(230px, 23vw, 310px) !important;
	max-height: calc(var(--rb-game-h, 100vh) - 190px) !important;
	padding-bottom: 76px !important;
}

#CharSelectV4 .btn.ok {
	right: clamp(30px, 4vw, 76px) !important;
}

html.rb-mobile-client #CharSelectV4 .char_select_container {
	grid-template-columns: 174px minmax(180px, 1fr) 190px !important;
}

html.rb-mobile-client #CharSelectV4 .char_list {
	left: 18px !important;
	top: 56px !important;
	bottom: 58px !important;
	width: 174px !important;
	gap: 7px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected,
html.rb-mobile-client #CharSelectV4:not(.has-characters) .char_canvas.create-slot {
	height: 56px !important;
	min-height: 56px !important;
	padding: 7px 8px 6px 58px !important;
	border-radius: 15px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character canvas,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected canvas {
	left: 8px !important;
	top: 6px !important;
	width: 42px !important;
	height: 50px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character .name,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected .name {
	margin-bottom: 2px !important;
	font-size: 12px !important;
	line-height: 14px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas .job_name,
html.rb-mobile-client #CharSelectV4 .char_canvas .char_level {
	font-size: 9px;
	line-height: 11px;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character .job_icon {
	left: 35px !important;
	top: 38px !important;
	width: 14px !important;
	height: 14px !important;
}

html.rb-mobile-client #CharSelectV4 .character_stage {
	left: calc(50% - 88px);
	top: 54px;
	bottom: 56px;
	width: 176px;
}

html.rb-mobile-client #CharSelectV4 .selected_canvas {
	width: 164px !important;
	height: min(210px, calc(var(--rb-game-h, 100vh) - 126px)) !important;
}

html.rb-mobile-client #CharSelectV4 .selected_name {
	font-size: 15px;
}

html.rb-mobile-client #CharSelectV4 .selected_levels {
	font-size: 10px;
}

html.rb-mobile-client #CharSelectV4 .charinfo {
	right: 14px !important;
	top: 58px !important;
	width: 190px !important;
	max-height: calc(var(--rb-game-h, 100vh) - 116px) !important;
	padding-bottom: 50px !important;
}

html.rb-mobile-client #CharSelectV4 .btn.ok {
	right: 16px !important;
	width: 188px !important;
}

/* Scenic polish pass. */
#CharSelectV4 {
	background: #101d20 !important;
}

#CharSelectV4::before {
	position: absolute;
	inset: -8px;
	z-index: 0;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.22) 48%, rgba(0, 0, 0, 0.68)),
		radial-gradient(circle at 50% 42%, rgba(74, 161, 173, 0.2), rgba(16, 29, 32, 0) 52%) !important;
	content: '';
	pointer-events: none;
}

#CharSelectV4::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(circle at 50% 54%, rgba(255, 255, 255, 0.08), transparent 25%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.06) 32%, rgba(0, 0, 0, 0.1) 68%, rgba(0, 0, 0, 0.44));
	content: '';
	pointer-events: none;
}

#CharSelectV4 .char_select_container {
	z-index: 2;
}

#CharSelectV4 .char_select_container::before {
	display: flex;
	align-items: center;
	height: 42px;
	padding-left: 54px;
	font-size: clamp(20px, 2vw, 30px) !important;
}

#CharSelectV4 .char_select_container::after {
	display: block !important;
	position: absolute;
	top: clamp(22px, 3.4vh, 38px);
	left: clamp(24px, 4vw, 70px);
	width: 34px;
	height: 34px;
	border: 4px solid #ffffff;
	border-right: 0;
	border-bottom: 0;
	background: transparent;
	transform: rotate(-45deg);
	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.42));
	content: '';
}

#CharSelectV4 .char_list {
	width: clamp(244px, 24vw, 330px) !important;
	top: clamp(96px, 15vh, 138px) !important;
}

#CharSelectV4 .char_canvas.has-character,
#CharSelectV4 .char_canvas.has-character.selected {
	height: 82px !important;
	min-height: 82px !important;
	padding: 12px 14px 10px 92px !important;
	border-radius: 999px !important;
	background: rgba(26, 74, 86, 0.32) !important;
	border: 1px solid rgba(235, 253, 255, 0.45) !important;
}

#CharSelectV4 .char_canvas.has-character.selected {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.33), rgba(255, 255, 255, 0.15)) !important;
	box-shadow:
		0 0 0 2px rgba(255, 255, 255, 0.28),
		0 14px 26px rgba(0, 0, 0, 0.22) !important;
}

#CharSelectV4 .char_canvas.has-character canvas,
#CharSelectV4 .char_canvas.has-character.selected canvas {
	left: 12px !important;
	top: 7px !important;
	width: 68px !important;
	height: 68px !important;
	border: 2px solid rgba(255, 255, 255, 0.76);
	object-fit: cover;
}

#CharSelectV4 .char_canvas.has-character .name,
#CharSelectV4 .char_canvas.has-character.selected .name {
	margin-top: 3px !important;
	margin-bottom: 5px !important;
	font-size: 17px !important;
	line-height: 19px !important;
}

#CharSelectV4 .char_canvas .char_level {
	font-size: 13px;
	line-height: 15px;
	color: rgba(255, 255, 255, 0.9);
}

#CharSelectV4 .char_canvas .job_name {
	font-size: 13px;
	line-height: 15px;
	color: #ffffff;
}

#CharSelectV4 .char_canvas.has-character .job_icon {
	display: none !important;
}

#CharSelectV4 .character_stage {
	left: calc(50% - clamp(170px, 16vw, 235px)) !important;
	top: clamp(78px, 12vh, 118px) !important;
	bottom: clamp(58px, 8vh, 92px) !important;
	width: clamp(340px, 32vw, 470px) !important;
	justify-content: flex-end;
}

#CharSelectV4 .character_stage::before {
	position: absolute;
	left: 50%;
	bottom: clamp(68px, 11vh, 96px);
	width: min(330px, 78%);
	height: 24px;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.32), transparent 72%);
	transform: translateX(-50%);
	content: '';
}

#CharSelectV4 .selected_canvas {
	position: relative;
	z-index: 1;
	width: min(390px, 100%) !important;
	height: min(482px, calc(var(--rb-game-h, 100vh) - 156px)) !important;
	filter: drop-shadow(0 22px 22px rgba(0, 0, 0, 0.34));
}

#CharSelectV4 .selected_name {
	position: relative;
	z-index: 2;
	margin-top: -18px;
}

#CharSelectV4 .selected_levels {
	position: relative;
	z-index: 2;
}

#CharSelectV4 .charinfo {
	top: clamp(96px, 14vh, 132px) !important;
	right: clamp(30px, 4vw, 72px) !important;
	width: clamp(250px, 23vw, 318px) !important;
	max-height: calc(var(--rb-game-h, 100vh) - 170px) !important;
	padding: 52px 18px 76px !important;
	background: rgba(9, 38, 40, 0.38) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-radius: 24px !important;
}

#CharSelectV4 .charinfo div {
	min-height: 20px;
	padding-right: 2px;
	font-size: 12px;
}

#CharSelectV4 .charinfo .vit,
#CharSelectV4 .charinfo .int,
#CharSelectV4 .charinfo .dex,
#CharSelectV4 .charinfo .luk {
	display: none;
}

#CharSelectV4 .charinfo .btn.ok {
	left: 18px !important;
	right: 18px !important;
	bottom: 16px !important;
	width: auto !important;
	height: 44px !important;
	padding: 0 18px !important;
	font-size: clamp(15px, 1.4vw, 20px) !important;
}

#CharSelectV4 .charinfo .btn.delete,
#CharSelectV4 .charinfo .btn.canceldelete,
#CharSelectV4 .charinfo .btn.finaldelete {
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
}

html.rb-mobile-client #CharSelectV4 .char_select_container::before {
	height: 30px;
	padding-left: 40px;
	font-size: 17px !important;
}

html.rb-mobile-client #CharSelectV4 .char_select_container::after {
	top: 14px;
	left: 18px;
	width: 24px;
	height: 24px;
	border-width: 3px;
}

html.rb-mobile-client #CharSelectV4 .char_list {
	left: 18px !important;
	top: 58px !important;
	bottom: 52px !important;
	width: 210px !important;
	gap: 8px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected {
	height: 58px !important;
	min-height: 58px !important;
	padding: 7px 8px 7px 64px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character canvas,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected canvas {
	left: 7px !important;
	top: 5px !important;
	width: 48px !important;
	height: 48px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character .name,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected .name {
	margin-top: 0 !important;
	margin-bottom: 1px !important;
	font-size: 12px !important;
	line-height: 14px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas .char_level,
html.rb-mobile-client #CharSelectV4 .char_canvas .job_name {
	font-size: 10px;
	line-height: 12px;
}

html.rb-mobile-client #CharSelectV4 .character_stage {
	left: calc(50% - 108px) !important;
	top: 44px !important;
	bottom: 46px !important;
	width: 216px !important;
}

html.rb-mobile-client #CharSelectV4 .selected_canvas {
	width: 214px !important;
	height: min(300px, calc(var(--rb-game-h, 100vh) - 100px)) !important;
}

html.rb-mobile-client #CharSelectV4 .selected_name {
	margin-top: -12px;
	font-size: 18px;
}

html.rb-mobile-client #CharSelectV4 .selected_levels {
	font-size: 11px;
}

html.rb-mobile-client #CharSelectV4 .charinfo {
	right: 14px !important;
	top: 58px !important;
	width: 198px !important;
	max-height: calc(var(--rb-game-h, 100vh) - 96px) !important;
	padding: 36px 10px 58px !important;
	border-radius: 18px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo div {
	min-height: 15px;
	font-size: 9px;
	line-height: 12px;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.ok {
	left: 10px !important;
	right: 10px !important;
	bottom: 10px !important;
	height: 36px !important;
	font-size: 14px !important;
}

/* Sprite scale correction: bigger center character, portrait-sized list avatar, visible create slot. */
#CharSelectV4 .char_list {
	bottom: auto !important;
	max-height: calc(var(--rb-game-h, 100vh) - 170px) !important;
	overflow: visible !important;
}

#CharSelectV4.has-characters .char_canvas.create-slot {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	display: flex !important;
	align-items: center;
	width: 74px !important;
	height: 74px !important;
	min-height: 74px !important;
	margin-left: 14px;
	padding: 0 !important;
	border: 1px solid rgba(235, 253, 255, 0.42) !important;
	border-radius: 50% !important;
	background: rgba(22, 63, 72, 0.34) !important;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.12),
		0 8px 18px rgba(0, 0, 0, 0.18) !important;
	backdrop-filter: blur(5px);
}

#CharSelectV4.has-characters .char_canvas.create-slot::before,
#CharSelectV4.has-characters .char_canvas.create-slot::after {
	left: 50% !important;
	top: 50% !important;
	width: 34px !important;
	height: 6px !important;
	margin-left: -17px !important;
	margin-top: -3px !important;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.38);
}

#CharSelectV4.has-characters .char_canvas.create-slot::after {
	transform: rotate(90deg);
}

#CharSelectV4 .char_canvas.has-character canvas,
#CharSelectV4 .char_canvas.has-character.selected canvas {
	width: 74px !important;
	height: 74px !important;
	left: 10px !important;
	top: 4px !important;
	border-radius: 50%;
}

#CharSelectV4 .char_canvas.has-character,
#CharSelectV4 .char_canvas.has-character.selected {
	min-height: 84px !important;
	padding-left: 96px !important;
}

#CharSelectV4 .character_stage {
	left: 50% !important;
	top: clamp(66px, 9vh, 98px) !important;
	bottom: clamp(46px, 5vh, 70px) !important;
	width: clamp(420px, 34vw, 560px) !important;
	transform: translateX(-50%);
}

#CharSelectV4 .selected_canvas {
	width: min(500px, 100%) !important;
	height: min(615px, calc(var(--rb-game-h, 100vh) - 126px)) !important;
	image-rendering: auto;
}

#CharSelectV4 .selected_name {
	margin-top: -22px !important;
	font-size: clamp(24px, 2.1vw, 36px) !important;
}

#CharSelectV4 .selected_levels {
	font-size: clamp(13px, 1.1vw, 17px) !important;
}

#CharSelectV4 .charinfo {
	width: clamp(260px, 21vw, 324px) !important;
	padding-bottom: 70px !important;
}

#CharSelectV4 .charinfo .btn.ok {
	height: 44px !important;
	font-size: clamp(16px, 1.25vw, 20px) !important;
}

html.rb-mobile-client #CharSelectV4.has-characters .char_canvas.create-slot {
	width: 50px !important;
	height: 50px !important;
	min-height: 50px !important;
	margin-left: 8px;
}

html.rb-mobile-client #CharSelectV4.has-characters .char_canvas.create-slot::before,
html.rb-mobile-client #CharSelectV4.has-characters .char_canvas.create-slot::after {
	width: 24px !important;
	height: 5px !important;
	margin-left: -12px !important;
	margin-top: -2px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected {
	min-height: 56px !important;
	padding-left: 58px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character canvas,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected canvas {
	left: 7px !important;
	top: 4px !important;
	width: 48px !important;
	height: 48px !important;
}

html.rb-mobile-client #CharSelectV4 .character_stage {
	left: 50% !important;
	top: 42px !important;
	bottom: 42px !important;
	width: min(260px, calc(var(--rb-game-w, 100vw) - 410px)) !important;
	min-width: 172px;
}

html.rb-mobile-client #CharSelectV4 .selected_canvas {
	width: min(250px, 100%) !important;
	height: min(330px, calc(var(--rb-game-h, 100vh) - 100px)) !important;
}

html.rb-mobile-client #CharSelectV4 .selected_name {
	margin-top: -14px !important;
	font-size: 17px !important;
}

/* Final character select correction: left rail owns scrolling, center stays open. */
#CharSelectV4 .char_select_container {
	display: block !important;
}

#CharSelectV4 .char_list {
	left: clamp(28px, 4vw, 72px) !important;
	top: clamp(94px, 14vh, 132px) !important;
	bottom: clamp(34px, 5vh, 58px) !important;
	width: clamp(312px, 28vw, 390px) !important;
	max-height: none !important;
	padding: 2px 8px 10px 0 !important;
	overflow-x: visible !important;
	overflow-y: auto !important;
	direction: rtl;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.78) rgba(0, 0, 0, 0.2);
}

#CharSelectV4 .char_list::-webkit-scrollbar {
	width: 6px;
}

#CharSelectV4 .char_list::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.18);
	border-radius: 999px;
}

#CharSelectV4 .char_list::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.82);
	border-radius: 999px;
}

#CharSelectV4 .char_canvas.has-character,
#CharSelectV4 .char_canvas.has-character.selected,
#CharSelectV4.has-characters .char_canvas.create-slot,
#CharSelectV4:not(.has-characters) .char_canvas.create-slot {
	direction: ltr;
}

#CharSelectV4 .char_canvas.has-character,
#CharSelectV4 .char_canvas.has-character.selected {
	width: calc(100% - 8px) !important;
	margin: 0 0 12px 8px !important;
}

#CharSelectV4.has-characters .char_canvas.create-slot {
	margin: 0 0 0 8px !important;
}

#CharSelectV4 .character_stage {
	left: calc(50% + 12px) !important;
	top: clamp(70px, 10vh, 104px) !important;
	bottom: clamp(48px, 6vh, 74px) !important;
	width: min(420px, calc(var(--rb-game-w, 100vw) - clamp(312px, 28vw, 390px) - clamp(250px, 22vw, 318px) - 170px)) !important;
	min-width: 250px;
	transform: translateX(-50%) !important;
}

#CharSelectV4 .charinfo {
	top: clamp(94px, 14vh, 132px) !important;
	right: clamp(28px, 4vw, 72px) !important;
	width: clamp(250px, 22vw, 318px) !important;
	max-height: calc(var(--rb-game-h, 100vh) - clamp(128px, 19vh, 190px)) !important;
	padding: 52px 18px 124px !important;
	overflow: hidden !important;
}

#CharSelectV4 .charinfo div {
	text-align: left !important;
}

#CharSelectV4 .charinfo .btn.ok,
#CharSelectV4 .charinfo .btn.delete,
#CharSelectV4 .charinfo .btn.canceldelete,
#CharSelectV4 .charinfo .btn.finaldelete {
	position: absolute !important;
	display: block;
	left: 18px !important;
	right: 18px !important;
	width: auto !important;
	border-radius: 999px !important;
	font-size: 13px !important;
	font-weight: 800 !important;
}

#CharSelectV4 .charinfo .btn.ok {
	bottom: 16px !important;
	height: 44px !important;
	background: linear-gradient(180deg, #7e92f5, #5666de) !important;
	color: #ffffff !important;
}

#CharSelectV4 .charinfo .btn.delete {
	bottom: 68px !important;
	height: 34px !important;
	padding: 0 14px !important;
	background: rgba(9, 20, 23, 0.46) !important;
	color: #ffffff !important;
}

#CharSelectV4 .charinfo .btn.delete::before,
#CharSelectV4 .charinfo .btn.delete::after {
	display: none !important;
}

#CharSelectV4 .charinfo .btn.canceldelete,
#CharSelectV4 .charinfo .btn.finaldelete {
	bottom: 68px !important;
	height: 34px !important;
}

#CharSelectV4 .charinfo .btn.canceldelete {
	right: calc(50% + 5px) !important;
}

#CharSelectV4 .charinfo .btn.finaldelete {
	left: calc(50% + 5px) !important;
	background: rgba(178, 65, 72, 0.86) !important;
}

#CharSelectV4 .charinfo .btn.canceldelete::before,
#CharSelectV4 .charinfo .btn.finaldelete::before,
#CharSelectV4 .charinfo .btn.finaldelete::after {
	display: none !important;
}

html.rb-mobile-client #CharSelectV4 .char_list {
	left: 14px !important;
	top: 54px !important;
	bottom: 12px !important;
	width: min(226px, 29vw) !important;
	padding-right: 6px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected {
	width: calc(100% - 6px) !important;
	height: 60px !important;
	min-height: 60px !important;
	margin: 0 0 8px 6px !important;
	padding: 0 10px 0 68px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character::before {
	left: 36px;
	height: 45px;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character::after {
	width: 58px;
	height: 58px;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character canvas,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected canvas {
	left: 5px !important;
	top: 5px !important;
	width: 50px !important;
	height: 50px !important;
}

html.rb-mobile-client #CharSelectV4 .character_stage {
	left: calc(50% + 8px) !important;
	top: 44px !important;
	bottom: 40px !important;
	width: min(232px, calc(var(--rb-game-w, 100vw) - min(226px, 29vw) - 212px - 64px)) !important;
	min-width: 150px;
}

html.rb-mobile-client #CharSelectV4 .selected_canvas {
	width: min(226px, 100%) !important;
	height: min(300px, calc(var(--rb-game-h, 100vh) - 104px)) !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo {
	right: 10px !important;
	top: 54px !important;
	width: 198px !important;
	max-height: calc(var(--rb-game-h, 100vh) - 64px) !important;
	padding: 34px 10px 88px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.ok {
	left: 10px !important;
	right: 10px !important;
	bottom: 10px !important;
	height: 34px !important;
	font-size: 13px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete {
	bottom: 50px !important;
	height: 27px !important;
	font-size: 10px !important;
}

/* Character row capsule: round portrait medallion attached to a clean game-ui pill. */
#CharSelectV4 .char_canvas.has-character,
#CharSelectV4 .char_canvas.has-character.selected {
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	height: 92px !important;
	min-height: 92px !important;
	padding: 0 18px 0 112px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	backdrop-filter: none;
}

#CharSelectV4 .char_canvas.has-character::before {
	position: absolute;
	left: 52px;
	right: 0;
	top: 50%;
	z-index: 0;
	height: 66px;
	border: 1px solid rgba(242, 255, 255, 0.58);
	border-left: 0;
	border-radius: 0 999px 999px 0;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.28), rgba(162, 231, 241, 0.19) 50%, rgba(255, 255, 255, 0.08)),
		rgba(31, 87, 98, 0.28);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.34),
		inset 0 -10px 24px rgba(0, 0, 0, 0.14),
		0 10px 22px rgba(0, 0, 0, 0.16);
	backdrop-filter: blur(6px) saturate(1.1);
	content: '';
	transform: translateY(-50%);
}

#CharSelectV4 .char_canvas.has-character::after {
	position: absolute;
	left: 0;
	top: 50%;
	z-index: 0;
	width: 90px;
	height: 90px;
	border: 2px solid rgba(249, 255, 255, 0.78);
	border-radius: 50%;
	background:
		radial-gradient(circle at 42% 34%, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.18) 34%, rgba(39, 83, 90, 0.35) 78%),
		rgba(10, 31, 36, 0.28);
	box-shadow:
		inset 0 0 0 4px rgba(255, 255, 255, 0.22),
		0 8px 18px rgba(0, 0, 0, 0.22);
	backdrop-filter: blur(5px) saturate(1.15);
	content: '';
	transform: translateY(-50%);
}

#CharSelectV4 .char_canvas.has-character.selected::before {
	border-color: rgba(255, 255, 255, 0.82);
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.38), rgba(174, 236, 246, 0.25) 52%, rgba(255, 255, 255, 0.12)),
		rgba(42, 108, 120, 0.34);
}

#CharSelectV4 .char_canvas.has-character.selected::after {
	border-color: rgba(255, 255, 255, 0.94);
	box-shadow:
		inset 0 0 0 4px rgba(255, 255, 255, 0.3),
		0 0 0 2px rgba(118, 205, 255, 0.22),
		0 10px 22px rgba(0, 0, 0, 0.24);
}

#CharSelectV4 .char_canvas.has-character canvas,
#CharSelectV4 .char_canvas.has-character.selected canvas {
	left: 9px !important;
	top: 9px !important;
	z-index: 1;
	width: 72px !important;
	height: 72px !important;
	border: 0 !important;
	border-radius: 50%;
	background: transparent !important;
	box-shadow: none !important;
}

#CharSelectV4 .char_canvas.has-character .name,
#CharSelectV4 .char_canvas.has-character.selected .name,
#CharSelectV4 .char_canvas.has-character .job_name,
#CharSelectV4 .char_canvas.has-character .char_level {
	position: relative !important;
	z-index: 1;
}

#CharSelectV4 .char_canvas.has-character .name,
#CharSelectV4 .char_canvas.has-character.selected .name {
	margin: 0 0 3px !important;
	font-size: 17px !important;
	line-height: 19px !important;
}

#CharSelectV4 .char_canvas .char_level,
#CharSelectV4 .char_canvas .job_name {
	font-size: 12px !important;
	line-height: 14px !important;
}

#CharSelectV4.has-characters .char_canvas.create-slot,
#CharSelectV4:not(.has-characters) .char_canvas.create-slot {
	display: block !important;
	width: 90px !important;
	height: 90px !important;
	min-height: 90px !important;
	margin-left: 0 !important;
	padding: 0 !important;
	border: 2px solid rgba(249, 255, 255, 0.76) !important;
	border-radius: 50% !important;
	background:
		radial-gradient(circle at 42% 34%, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.14) 36%, rgba(25, 75, 84, 0.34) 78%),
		rgba(8, 27, 32, 0.26) !important;
	box-shadow:
		inset 0 0 0 4px rgba(255, 255, 255, 0.18),
		0 8px 18px rgba(0, 0, 0, 0.22) !important;
	backdrop-filter: blur(5px) saturate(1.12);
}

#CharSelectV4.has-characters .char_canvas.create-slot::before,
#CharSelectV4.has-characters .char_canvas.create-slot::after,
#CharSelectV4:not(.has-characters) .char_canvas.create-slot::before,
#CharSelectV4:not(.has-characters) .char_canvas.create-slot::after {
	left: 50% !important;
	top: 50% !important;
	width: 38px !important;
	height: 7px !important;
	margin-left: -19px !important;
	margin-top: -3px !important;
	background: rgba(255, 255, 255, 0.96);
}

#CharSelectV4.has-characters .char_canvas.create-slot::after,
#CharSelectV4:not(.has-characters) .char_canvas.create-slot::after {
	transform: rotate(90deg);
}

#CharSelectV4 .char_canvas.create-slot canvas,
#CharSelectV4 .char_canvas.create-slot .name,
#CharSelectV4 .char_canvas.create-slot .job_name,
#CharSelectV4 .char_canvas.create-slot .char_level,
#CharSelectV4 .char_canvas.create-slot .job_icon {
	display: none !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected {
	height: 66px !important;
	min-height: 66px !important;
	padding-left: 78px !important;
	padding-right: 10px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character::before {
	left: 38px;
	height: 48px;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character::after,
html.rb-mobile-client #CharSelectV4.has-characters .char_canvas.create-slot,
html.rb-mobile-client #CharSelectV4:not(.has-characters) .char_canvas.create-slot {
	width: 64px !important;
	height: 64px !important;
	min-height: 64px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character canvas,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected canvas {
	left: 7px !important;
	top: 7px !important;
	width: 50px !important;
	height: 50px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character .name,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected .name {
	font-size: 12px !important;
	line-height: 14px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas .char_level,
html.rb-mobile-client #CharSelectV4 .char_canvas .job_name {
	font-size: 9px !important;
	line-height: 11px !important;
}

html.rb-mobile-client #CharSelectV4.has-characters .char_canvas.create-slot::before,
html.rb-mobile-client #CharSelectV4.has-characters .char_canvas.create-slot::after,
html.rb-mobile-client #CharSelectV4:not(.has-characters) .char_canvas.create-slot::before,
html.rb-mobile-client #CharSelectV4:not(.has-characters) .char_canvas.create-slot::after {
	width: 28px !important;
	height: 5px !important;
	margin-left: -14px !important;
	margin-top: -2px !important;
}

/* Character info stat graph pass */
#CharSelectV4 .charinfo {
	display: flex !important;
	flex-direction: column;
	gap: 0;
	box-sizing: border-box;
	width: clamp(286px, 22vw, 360px) !important;
	max-height: none !important;
	padding: 52px 18px 18px !important;
	overflow: visible !important;
}

#CharSelectV4 .charinfo::before {
	top: 18px !important;
	left: 18px !important;
}

#CharSelectV4 .charinfo div {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	display: grid !important;
	grid-template-columns: minmax(76px, 0.62fr) minmax(0, 1fr);
	align-items: center;
	justify-items: start !important;
	justify-content: stretch !important;
	width: auto !important;
	min-height: 24px !important;
	padding: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	color: #ffffff !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	text-align: left !important;
	text-align-last: left !important;
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.55) !important;
	white-space: nowrap;
}

#CharSelectV4 .charinfo div::before {
	position: static !important;
	left: auto !important;
	top: auto !important;
	display: block !important;
	width: auto !important;
	margin-right: 10px !important;
	color: rgba(255, 255, 255, 0.72) !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) !important;
}

#CharSelectV4 .charinfo .str,
#CharSelectV4 .charinfo .agi,
#CharSelectV4 .charinfo .vit,
#CharSelectV4 .charinfo .int,
#CharSelectV4 .charinfo .dex,
#CharSelectV4 .charinfo .luk,
#CharSelectV4 .charinfo .pageinfo {
	display: none !important;
}

#CharSelectV4 .char_stat_graph {
	display: block !important;
	order: 12;
	width: 100% !important;
	height: 158px !important;
	margin: 12px auto 10px !important;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 18px;
	background:
		radial-gradient(circle at 50% 44%, rgba(88, 172, 255, 0.16), transparent 45%),
		rgba(3, 16, 21, 0.2);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

#CharSelectV4 .charinfo .btn.ok,
#CharSelectV4 .charinfo .btn.delete,
#CharSelectV4 .charinfo .btn.canceldelete,
#CharSelectV4 .charinfo .btn.finaldelete {
	position: static !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	bottom: auto !important;
	display: block;
	box-sizing: border-box;
	width: 100% !important;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 16px !important;
	border: 1px solid rgba(255, 255, 255, 0.48) !important;
	border-radius: 999px !important;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07)),
		rgba(14, 39, 45, 0.42) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 16px rgba(0, 0, 0, 0.18) !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 900 !important;
	line-height: 42px !important;
	text-align: center !important;
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.55) !important;
}

#CharSelectV4 .charinfo .btn.ok {
	order: 20;
	margin-top: 0 !important;
	background:
		linear-gradient(180deg, #879bff, #5865dd),
		#6170e8 !important;
	font-size: clamp(16px, 1.25vw, 20px) !important;
}

#CharSelectV4 .charinfo .btn.delete,
#CharSelectV4 .charinfo .btn.canceldelete,
#CharSelectV4 .charinfo .btn.finaldelete {
	order: 21;
	height: 34px !important;
	margin-top: 8px !important;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)),
		rgba(22, 37, 40, 0.36) !important;
	font-size: 12px !important;
	line-height: 32px !important;
}

#CharSelectV4 .charinfo .btn.delete::before,
#CharSelectV4 .charinfo .btn.delete::after,
#CharSelectV4 .charinfo .btn.canceldelete::before,
#CharSelectV4 .charinfo .btn.canceldelete::after,
#CharSelectV4 .charinfo .btn.finaldelete::before,
#CharSelectV4 .charinfo .btn.finaldelete::after {
	display: none !important;
	content: none !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo {
	right: 12px !important;
	top: 54px !important;
	width: 216px !important;
	padding: 34px 10px 10px !important;
	border-radius: 18px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo::before {
	top: 13px !important;
	left: 12px !important;
	font-size: 13px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo div {
	grid-template-columns: 48px minmax(0, 1fr);
	min-height: 17px !important;
	font-size: 9px !important;
	line-height: 11px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo div::before {
	font-size: 9px !important;
}

html.rb-mobile-client #CharSelectV4 .char_stat_graph {
	height: 108px !important;
	margin: 7px auto 7px !important;
	border-radius: 13px;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.ok {
	height: 34px !important;
	font-size: 14px !important;
	line-height: 32px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete {
	height: 27px !important;
	margin-top: 6px !important;
	font-size: 10px !important;
	line-height: 25px !important;
}

/* Final character list alignment pass: keep every name/level/job in the pill text lane. */
#CharSelectV4 .char_canvas.has-character,
#CharSelectV4 .char_canvas.has-character.selected {
	align-items: flex-start !important;
	box-sizing: border-box !important;
	justify-content: center !important;
	overflow: visible !important;
	padding-left: 112px !important;
	padding-right: 18px !important;
	text-align: left !important;
}

#CharSelectV4 .char_canvas.has-character .name,
#CharSelectV4 .char_canvas.has-character.selected .name,
#CharSelectV4 .char_canvas.has-character .char_level,
#CharSelectV4 .char_canvas.has-character.selected .char_level,
#CharSelectV4 .char_canvas.has-character .job_name,
#CharSelectV4 .char_canvas.has-character.selected .job_name {
	box-sizing: border-box !important;
	display: block !important;
	flex: 0 0 auto !important;
	left: auto !important;
	right: auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
	position: static !important;
	text-align: left !important;
	transform: none !important;
	white-space: nowrap !important;
	width: 100% !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

#CharSelectV4 .char_canvas.has-character .name,
#CharSelectV4 .char_canvas.has-character.selected .name {
	margin: 0 0 3px !important;
	font-size: 17px !important;
	line-height: 19px !important;
}

#CharSelectV4 .char_canvas.has-character .char_level,
#CharSelectV4 .char_canvas.has-character.selected .char_level,
#CharSelectV4 .char_canvas.has-character .job_name,
#CharSelectV4 .char_canvas.has-character.selected .job_name {
	margin: 0 !important;
	font-size: 12px !important;
	line-height: 14px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected {
	padding-left: 78px !important;
	padding-right: 10px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character .name,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected .name {
	margin-bottom: 2px !important;
	font-size: 12px !important;
	line-height: 14px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character .char_level,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected .char_level,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character .job_name,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected .job_name {
	font-size: 9px !important;
	line-height: 11px !important;
}

/* Last-pass placement: one left character rail, scrollbar on the rail, open center stage. */
#CharSelectV4 .char_select_container {
	display: block !important;
}

#CharSelectV4 .char_list {
	position: absolute !important;
	left: clamp(28px, 4vw, 72px) !important;
	top: clamp(94px, 14vh, 132px) !important;
	bottom: clamp(34px, 5vh, 58px) !important;
	width: clamp(312px, 28vw, 390px) !important;
	max-height: none !important;
	padding: 2px 8px 12px 0 !important;
	overflow-x: visible !important;
	overflow-y: auto !important;
	direction: rtl !important;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.86) rgba(0, 0, 0, 0.18);
}

#CharSelectV4 .char_list::-webkit-scrollbar {
	width: 6px;
}

#CharSelectV4 .char_list::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.18);
	border-radius: 999px;
}

#CharSelectV4 .char_list::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.86);
	border-radius: 999px;
}

#CharSelectV4 .char_canvas.has-character,
#CharSelectV4 .char_canvas.has-character.selected {
	width: calc(100% - 8px) !important;
	margin: 0 0 12px 8px !important;
	direction: ltr !important;
}

#CharSelectV4.has-characters .char_canvas.create-slot,
#CharSelectV4:not(.has-characters) .char_canvas.create-slot {
	direction: ltr !important;
}

#CharSelectV4.has-characters .char_canvas.create-slot {
	margin: 0 0 0 8px !important;
}

#CharSelectV4 .character_stage {
	left: calc(50% + 12px) !important;
	top: clamp(70px, 10vh, 104px) !important;
	bottom: clamp(48px, 6vh, 74px) !important;
	width: min(420px, calc(var(--rb-game-w, 100vw) - clamp(312px, 28vw, 390px) - clamp(250px, 22vw, 318px) - 170px)) !important;
	min-width: 250px !important;
	transform: translateX(-50%) !important;
}

#CharSelectV4 .selected_canvas {
	width: min(430px, 100%) !important;
	height: min(530px, calc(var(--rb-game-h, 100vh) - 126px)) !important;
}

#CharSelectV4 .charinfo {
	right: clamp(28px, 4vw, 72px) !important;
	top: clamp(94px, 14vh, 132px) !important;
	width: clamp(250px, 22vw, 318px) !important;
	max-height: calc(var(--rb-game-h, 100vh) - clamp(128px, 19vh, 190px)) !important;
	overflow: hidden !important;
}

#CharSelectV4 .charinfo div {
	text-align: left !important;
}

html.rb-mobile-client #CharSelectV4 .char_list {
	left: 14px !important;
	top: 54px !important;
	bottom: 12px !important;
	width: min(226px, 29vw) !important;
	padding-right: 6px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected {
	width: calc(100% - 6px) !important;
	height: 60px !important;
	min-height: 60px !important;
	margin: 0 0 8px 6px !important;
	padding: 0 10px 0 78px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character::before {
	left: 36px !important;
	height: 45px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character::after {
	width: 58px !important;
	height: 58px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character canvas,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected canvas {
	left: 5px !important;
	top: 5px !important;
	width: 50px !important;
	height: 50px !important;
}

html.rb-mobile-client #CharSelectV4 .character_stage {
	left: calc(50% + 8px) !important;
	top: 44px !important;
	bottom: 40px !important;
	width: min(232px, calc(var(--rb-game-w, 100vw) - min(226px, 29vw) - 212px - 64px)) !important;
	min-width: 150px !important;
}

html.rb-mobile-client #CharSelectV4 .selected_canvas {
	width: min(226px, 100%) !important;
	height: min(300px, calc(var(--rb-game-h, 100vh) - 104px)) !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo {
	right: 10px !important;
	top: 54px !important;
	width: 198px !important;
	max-height: calc(var(--rb-game-h, 100vh) - 64px) !important;
}

/* Final card rail correction: create button aligns with circular portraits. */
#CharSelectV4.has-characters .char_canvas.create-slot,
#CharSelectV4:not(.has-characters) .char_canvas.create-slot {
	align-self: flex-end !important;
	width: 92px !important;
	height: 92px !important;
	min-height: 92px !important;
	margin: 0 auto 0 8px !important;
	padding: 0 !important;
	border-radius: 50% !important;
}

#CharSelectV4.has-characters .char_canvas.create-slot::before,
#CharSelectV4.has-characters .char_canvas.create-slot::after,
#CharSelectV4:not(.has-characters) .char_canvas.create-slot::before,
#CharSelectV4:not(.has-characters) .char_canvas.create-slot::after {
	left: 50% !important;
	top: 50% !important;
	width: 38px !important;
	height: 6px !important;
	margin-left: -19px !important;
	margin-top: -3px !important;
}

html.rb-mobile-client #CharSelectV4.has-characters .char_canvas.create-slot,
html.rb-mobile-client #CharSelectV4:not(.has-characters) .char_canvas.create-slot {
	align-self: flex-end !important;
	width: 60px !important;
	height: 60px !important;
	min-height: 60px !important;
	margin-left: 6px !important;
}

html.rb-mobile-client #CharSelectV4.has-characters .char_canvas.create-slot::before,
html.rb-mobile-client #CharSelectV4.has-characters .char_canvas.create-slot::after,
html.rb-mobile-client #CharSelectV4:not(.has-characters) .char_canvas.create-slot::before,
html.rb-mobile-client #CharSelectV4:not(.has-characters) .char_canvas.create-slot::after {
	width: 26px !important;
	height: 5px !important;
	margin-left: -13px !important;
	margin-top: -2px !important;
}

/* Mobile select fit pass: keep cards and the info panel out of each other's space. */
html.rb-mobile-client #CharSelectV4 .char_select_container::before {
	height: 30px !important;
	padding-left: 48px !important;
	font-size: clamp(16px, 4vh, 22px) !important;
	line-height: 30px !important;
}

html.rb-mobile-client #CharSelectV4 .char_select_container::after {
	top: 15px !important;
	left: 22px !important;
	width: 28px !important;
	height: 28px !important;
}

html.rb-mobile-client #CharSelectV4 .btn.cancel {
	top: 12px !important;
	right: 16px !important;
	width: 34px !important;
	height: 34px !important;
	font-size: 20px !important;
	line-height: 34px !important;
}

html.rb-mobile-client #CharSelectV4 .char_list {
	left: 12px !important;
	top: 50px !important;
	bottom: 10px !important;
	width: clamp(176px, 24vw, 208px) !important;
	padding-right: 5px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected {
	width: calc(100% - 5px) !important;
	height: 52px !important;
	min-height: 52px !important;
	margin: 0 0 6px 5px !important;
	padding: 0 7px 0 60px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character::before {
	left: 30px !important;
	height: 38px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character::after {
	width: 52px !important;
	height: 52px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character canvas,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected canvas {
	left: 6px !important;
	top: 6px !important;
	width: 40px !important;
	height: 40px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character .name,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected .name {
	margin-bottom: 1px !important;
	font-size: 10px !important;
	line-height: 12px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas .char_level,
html.rb-mobile-client #CharSelectV4 .char_canvas .job_name {
	font-size: 8px !important;
	line-height: 9px !important;
}

html.rb-mobile-client #CharSelectV4.has-characters .char_canvas.create-slot,
html.rb-mobile-client #CharSelectV4:not(.has-characters) .char_canvas.create-slot {
	width: 52px !important;
	height: 52px !important;
	min-height: 52px !important;
	margin-left: 5px !important;
}

html.rb-mobile-client #CharSelectV4.has-characters .char_canvas.create-slot::before,
html.rb-mobile-client #CharSelectV4.has-characters .char_canvas.create-slot::after,
html.rb-mobile-client #CharSelectV4:not(.has-characters) .char_canvas.create-slot::before,
html.rb-mobile-client #CharSelectV4:not(.has-characters) .char_canvas.create-slot::after {
	width: 22px !important;
	height: 4px !important;
	margin-left: -11px !important;
	margin-top: -2px !important;
}

html.rb-mobile-client #CharSelectV4 .character_stage {
	left: calc(50% - 2px) !important;
	top: 48px !important;
	bottom: 36px !important;
	width: min(230px, calc(var(--rb-game-w, 100vw) - clamp(176px, 24vw, 208px) - 188px - 56px)) !important;
	min-width: 148px !important;
}

html.rb-mobile-client #CharSelectV4 .selected_canvas {
	width: min(220px, 100%) !important;
	height: min(288px, calc(var(--rb-game-h, 100vh) - 92px)) !important;
}

html.rb-mobile-client #CharSelectV4 .selected_name {
	margin-top: -12px !important;
	font-size: 15px !important;
	line-height: 17px !important;
}

html.rb-mobile-client #CharSelectV4 .selected_levels {
	font-size: 9px !important;
	line-height: 11px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo {
	right: 8px !important;
	top: 50px !important;
	width: 176px !important;
	max-height: calc(var(--rb-game-h, 100vh) - 58px) !important;
	padding: 30px 8px 8px !important;
	border-radius: 14px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo::before {
	top: 11px !important;
	left: 10px !important;
	font-size: 11px !important;
	line-height: 13px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo div {
	grid-template-columns: 42px minmax(0, 1fr) !important;
	min-height: 13px !important;
	font-size: 8px !important;
	line-height: 10px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo div::before {
	font-size: 8px !important;
	line-height: 10px !important;
}

/* v1.5.427 EOF guard: keep the reference mobile char-select layout after legacy overrides. */
html.rb-mobile-client #CharSelectV4 .char_select_container::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_select_container::before {
	left: 62px !important;
	top: 24px !important;
	padding-left: 0 !important;
	content: 'Select Character' !important;
	font-size: 21px !important;
	line-height: 32px !important;
}

html.rb-mobile-client #CharSelectV4 .char_select_container::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_select_container::after {
	display: none !important;
	content: none !important;
}

html.rb-mobile-client #CharSelectV4 .char_list,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_list {
	left: 66px !important;
	top: 78px !important;
	bottom: auto !important;
	width: 244px !important;
	max-width: calc(44vw - 18px) !important;
	gap: 18px !important;
	overflow: visible !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.hidden-slot,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character:not(.selected),
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.hidden-slot,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character:not(.selected) {
	display: none !important;
	visibility: hidden !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected {
	display: block !important;
	width: 236px !important;
	height: 72px !important;
	min-height: 72px !important;
	padding: 7px 12px 7px 76px !important;
	background: linear-gradient(90deg, rgba(35, 43, 44, 0.62), rgba(35, 43, 44, 0.34) 72%, rgba(35, 43, 44, 0)) !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected::before {
	width: 70px !important;
	height: 70px !important;
	border: 4px solid rgba(255, 232, 207, 0.96) !important;
	border-radius: 50% !important;
	background: rgba(76, 112, 152, 0.72) !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected canvas,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected canvas {
	left: 5px !important;
	top: 5px !important;
	width: 60px !important;
	height: 60px !important;
	border-radius: 50% !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected .name,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected .name {
	left: auto !important;
	top: auto !important;
	width: 150px !important;
	height: 24px !important;
	margin: 5px 0 0 !important;
	font-size: 17px !important;
	line-height: 24px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected .char_level,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected .char_level {
	left: auto !important;
	top: auto !important;
	width: 150px !important;
	height: 20px !important;
	margin: 2px 0 0 !important;
	font-size: 15px !important;
	line-height: 20px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected .job_name,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected .job_name {
	display: none !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.create-slot,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.create-slot {
	display: block !important;
	width: 58px !important;
	height: 58px !important;
	min-height: 58px !important;
	margin: 4px 0 0 18px !important;
}

html.rb-mobile-client #CharSelectV4 .character_stage,
html.rb-mobile-live-layout-preview #CharSelectV4 .character_stage {
	left: 50% !important;
	top: 50% !important;
	bottom: auto !important;
	width: min(340px, 38vw) !important;
	min-width: 210px !important;
	height: calc(100% - 86px) !important;
	min-height: 260px !important;
	transform: translate(-50%, -46%) !important;
}

html.rb-mobile-client #CharSelectV4 .selected_name,
html.rb-mobile-client #CharSelectV4 .selected_levels,
html.rb-mobile-live-layout-preview #CharSelectV4 .selected_name,
html.rb-mobile-live-layout-preview #CharSelectV4 .selected_levels {
	display: none !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo {
	position: static !important;
	width: auto !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	pointer-events: none !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo::before,
html.rb-mobile-client #CharSelectV4 .charinfo div,
html.rb-mobile-client #CharSelectV4 .char_stat_graph,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo div,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_stat_graph {
	display: none !important;
	visibility: hidden !important;
}

html.rb-mobile-client #CharSelectV4 .btn.cancel,
html.rb-mobile-live-layout-preview #CharSelectV4 .btn.cancel {
	left: auto !important;
	right: 24px !important;
	top: 20px !important;
	width: 42px !important;
	height: 42px !important;
	border-radius: 50% !important;
	background: rgba(19, 48, 76, 0.34) !important;
	color: transparent !important;
	text-indent: -9999px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.ok,
html.rb-mobile-client #CharSelectV4 .btn.ok,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.ok,
html.rb-mobile-live-layout-preview #CharSelectV4 .btn.ok {
	right: 70px !important;
	bottom: 35px !important;
	width: 190px !important;
	height: 54px !important;
	border-radius: 22px !important;
	background: linear-gradient(180deg, #7781f0, #6573df) !important;
	font-size: 18px !important;
	line-height: 19px !important;
	white-space: normal !important;
	pointer-events: auto !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.delete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.canceldelete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.finaldelete {
	bottom: 36px !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	color: transparent !important;
	text-indent: -9999px !important;
	pointer-events: auto !important;
}

/* v1.5.431: EOF mobile-only character select rebuild. Keep this after legacy mobile overrides. */
html.rb-mobile-client #CharSelectV4 .char_list,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_list {
	display: flex !important;
	position: absolute !important;
	left: 64px !important;
	top: 82px !important;
	width: 258px !important;
	max-width: 258px !important;
	height: 190px !important;
	max-height: 190px !important;
	padding: 0 !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	gap: 8px !important;
	overflow: hidden !important;
	z-index: 7 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character {
	display: block !important;
	visibility: visible !important;
	position: relative !important;
	flex: 0 0 52px !important;
	box-sizing: border-box !important;
	width: 226px !important;
	height: 52px !important;
	min-height: 52px !important;
	margin: 0 !important;
	padding: 7px 10px 7px 58px !important;
	border: 1px solid rgba(255, 255, 255, 0.24) !important;
	border-radius: 14px !important;
	background: linear-gradient(90deg, rgba(28, 30, 28, 0.45), rgba(28, 30, 28, 0.18) 76%, rgba(28, 30, 28, 0)) !important;
	box-shadow: none !important;
	backdrop-filter: blur(4px) !important;
	opacity: 0.84 !important;
	overflow: visible !important;
	pointer-events: auto !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected {
	width: 242px !important;
	height: 58px !important;
	min-height: 58px !important;
	padding: 8px 10px 8px 66px !important;
	border: 1px solid rgba(255, 230, 205, 0.58) !important;
	border-radius: 16px !important;
	background: linear-gradient(90deg, rgba(30, 31, 28, 0.58), rgba(30, 31, 28, 0.28) 78%, rgba(30, 31, 28, 0)) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 5px 12px rgba(0, 0, 0, 0.12) !important;
	opacity: 1 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character::before {
	display: block !important;
	position: absolute !important;
	left: 7px !important;
	top: 7px !important;
	box-sizing: border-box !important;
	width: 38px !important;
	height: 38px !important;
	border: 2px solid rgba(255, 232, 207, 0.84) !important;
	border-radius: 50% !important;
	background: rgba(88, 124, 136, 0.5) !important;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.14) !important;
	content: '' !important;
	pointer-events: none !important;
	z-index: 1 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected::before {
	left: 6px !important;
	top: 5px !important;
	width: 48px !important;
	height: 48px !important;
	border-width: 3px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character::after {
	display: none !important;
	content: none !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character canvas,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character canvas {
	display: block !important;
	position: absolute !important;
	left: 9px !important;
	top: 9px !important;
	width: 34px !important;
	height: 34px !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	z-index: 2 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected canvas,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected canvas {
	left: 9px !important;
	top: 8px !important;
	width: 42px !important;
	height: 42px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character .name,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character .name {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	display: block !important;
	width: 150px !important;
	height: 18px !important;
	margin: 1px 0 0 !important;
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 900 !important;
	line-height: 18px !important;
	text-align: left !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.62) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected .name,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected .name {
	width: 166px !important;
	height: 20px !important;
	margin-top: 2px !important;
	font-size: 14px !important;
	line-height: 20px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character .char_level,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character .char_level {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	display: block !important;
	width: 150px !important;
	height: 14px !important;
	margin: 0 !important;
	color: rgba(255, 255, 255, 0.9) !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	line-height: 14px !important;
	text-align: left !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.54) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected .char_level,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected .char_level {
	width: 166px !important;
	height: 16px !important;
	font-size: 11px !important;
	line-height: 16px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character .job_icon,
html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character .job_name,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character .job_icon,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character .job_name {
	display: none !important;
	visibility: hidden !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.create-slot,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.create-slot {
	display: flex !important;
	visibility: visible !important;
	position: relative !important;
	flex: 0 0 46px !important;
	width: 46px !important;
	height: 46px !important;
	min-height: 46px !important;
	margin: 2px 0 0 20px !important;
	padding: 0 !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	pointer-events: auto !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::before,
html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::after {
	display: block !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: #ffffff !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
	content: '' !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::before {
	width: 34px !important;
	height: 6px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::after {
	position: absolute !important;
	left: 20px !important;
	top: 6px !important;
	width: 6px !important;
	height: 34px !important;
}

html.rb-mobile-client #CharSelectV4 .pageinfo,
html.rb-mobile-live-layout-preview #CharSelectV4 .pageinfo,
html.rb-mobile-client #CharSelectV4 .mobile-page,
html.rb-mobile-live-layout-preview #CharSelectV4 .mobile-page {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

html.rb-mobile-client #CharSelectV4.has-mobile-pages .pageinfo,
html.rb-mobile-live-layout-preview #CharSelectV4.has-mobile-pages .pageinfo {
	display: block !important;
	visibility: visible !important;
	position: absolute !important;
	left: 148px !important;
	top: 278px !important;
	width: 54px !important;
	height: 18px !important;
	color: rgba(255, 255, 255, 0.92) !important;
	font-size: 11px !important;
	font-weight: 850 !important;
	line-height: 18px !important;
	text-align: center !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.56) !important;
	z-index: 9 !important;
}

html.rb-mobile-client #CharSelectV4.has-mobile-pages .mobile-page,
html.rb-mobile-live-layout-preview #CharSelectV4.has-mobile-pages .mobile-page {
	display: block !important;
	visibility: visible !important;
	position: absolute !important;
	top: 270px !important;
	width: 34px !important;
	height: 34px !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.36) !important;
	border-radius: 50% !important;
	background: rgba(16, 28, 38, 0.42) !important;
	color: #ffffff !important;
	font-size: 24px !important;
	font-weight: 800 !important;
	line-height: 30px !important;
	text-align: center !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
	pointer-events: auto !important;
	z-index: 9 !important;
}

html.rb-mobile-client #CharSelectV4.has-mobile-pages .mobile-page.prev,
html.rb-mobile-live-layout-preview #CharSelectV4.has-mobile-pages .mobile-page.prev {
	left: 108px !important;
}

html.rb-mobile-client #CharSelectV4.has-mobile-pages .mobile-page.next,
html.rb-mobile-live-layout-preview #CharSelectV4.has-mobile-pages .mobile-page.next {
	left: 206px !important;
}

html.rb-mobile-client #CharSelectV4.has-mobile-pages .mobile-page:disabled,
html.rb-mobile-live-layout-preview #CharSelectV4.has-mobile-pages .mobile-page:disabled {
	opacity: 0.35 !important;
	pointer-events: none !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.delete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.canceldelete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.finaldelete {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

html.rb-mobile-client #CharSelectV4.has-selected-character:not(.delete-pending) .charinfo .btn.delete,
html.rb-mobile-live-layout-preview #CharSelectV4.has-selected-character:not(.delete-pending) .charinfo .btn.delete {
	display: block !important;
	visibility: visible !important;
	position: absolute !important;
	left: 78px !important;
	right: auto !important;
	top: auto !important;
	bottom: 34px !important;
	width: 40px !important;
	height: 40px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--rb-char-delete-icon) center / 32px 32px no-repeat !important;
	box-shadow: none !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	text-indent: -9999px !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	z-index: 12 !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete::before,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete::after,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete::before,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete::after,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete::before,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.delete::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.delete::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.canceldelete::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.canceldelete::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.finaldelete::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.finaldelete::after {
	display: none !important;
	content: none !important;
}

html.rb-mobile-client #CharSelectV4.delete-pending .charinfo .btn.canceldelete,
html.rb-mobile-client #CharSelectV4.delete-pending .charinfo .btn.finaldelete,
html.rb-mobile-live-layout-preview #CharSelectV4.delete-pending .charinfo .btn.canceldelete,
html.rb-mobile-live-layout-preview #CharSelectV4.delete-pending .charinfo .btn.finaldelete {
	display: block !important;
	visibility: visible !important;
	position: absolute !important;
	top: auto !important;
	bottom: 38px !important;
	height: 30px !important;
	border: 1px solid rgba(255, 255, 255, 0.34) !important;
	border-radius: 15px !important;
	background: rgba(22, 30, 38, 0.62) !important;
	color: #ffffff !important;
	font-size: 11px !important;
	font-weight: 850 !important;
	line-height: 28px !important;
	text-indent: 0 !important;
	text-align: center !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55) !important;
	pointer-events: auto !important;
	z-index: 12 !important;
}

html.rb-mobile-client #CharSelectV4.delete-pending .charinfo .btn.canceldelete,
html.rb-mobile-live-layout-preview #CharSelectV4.delete-pending .charinfo .btn.canceldelete {
	left: 72px !important;
	width: 90px !important;
}

html.rb-mobile-client #CharSelectV4.delete-pending .charinfo .btn.finaldelete,
html.rb-mobile-live-layout-preview #CharSelectV4.delete-pending .charinfo .btn.finaldelete {
	left: 168px !important;
	width: 92px !important;
}

/* v1.5.431: mobile character select final override. */
html.rb-mobile-client #CharSelectV4 .char_list,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_list {
	display: flex !important;
	position: absolute !important;
	left: 64px !important;
	top: 82px !important;
	width: 258px !important;
	max-width: 258px !important;
	height: 190px !important;
	max-height: 190px !important;
	padding: 0 !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	gap: 8px !important;
	overflow: hidden !important;
	z-index: 7 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character {
	display: block !important;
	visibility: visible !important;
	position: relative !important;
	flex: 0 0 52px !important;
	box-sizing: border-box !important;
	width: 226px !important;
	height: 52px !important;
	min-height: 52px !important;
	margin: 0 !important;
	padding: 7px 10px 7px 58px !important;
	border: 1px solid rgba(255, 255, 255, 0.24) !important;
	border-radius: 15px !important;
	background: linear-gradient(90deg, rgba(28, 30, 28, 0.45), rgba(28, 30, 28, 0.2) 76%, rgba(28, 30, 28, 0)) !important;
	box-shadow: none !important;
	backdrop-filter: blur(4px) !important;
	opacity: 0.82 !important;
	overflow: visible !important;
	pointer-events: auto !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected {
	width: 242px !important;
	height: 58px !important;
	min-height: 58px !important;
	padding: 8px 10px 8px 66px !important;
	border: 1px solid rgba(255, 230, 205, 0.58) !important;
	border-radius: 18px !important;
	background: linear-gradient(90deg, rgba(30, 31, 28, 0.58), rgba(30, 31, 28, 0.3) 78%, rgba(30, 31, 28, 0)) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 5px 12px rgba(0, 0, 0, 0.12) !important;
	opacity: 1 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character::before {
	display: block !important;
	position: absolute !important;
	left: 7px !important;
	top: 7px !important;
	box-sizing: border-box !important;
	width: 38px !important;
	height: 38px !important;
	border: 2px solid rgba(255, 232, 207, 0.84) !important;
	border-radius: 50% !important;
	background: rgba(88, 124, 136, 0.5) !important;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.14) !important;
	content: '' !important;
	pointer-events: none !important;
	z-index: 1 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected::before {
	left: 6px !important;
	top: 5px !important;
	width: 48px !important;
	height: 48px !important;
	border-width: 3px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character::after {
	display: none !important;
	content: none !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character canvas,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character canvas {
	display: block !important;
	position: absolute !important;
	left: 9px !important;
	top: 9px !important;
	width: 34px !important;
	height: 34px !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	z-index: 2 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected canvas,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected canvas {
	left: 9px !important;
	top: 8px !important;
	width: 42px !important;
	height: 42px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character .name,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character .name {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	display: block !important;
	width: 150px !important;
	height: 18px !important;
	margin: 1px 0 0 !important;
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 900 !important;
	line-height: 18px !important;
	text-align: left !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.62) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected .name,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected .name {
	width: 166px !important;
	height: 20px !important;
	margin-top: 2px !important;
	font-size: 14px !important;
	line-height: 20px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character .char_level,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character .char_level {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	display: block !important;
	width: 150px !important;
	height: 14px !important;
	margin: 0 !important;
	color: rgba(255, 255, 255, 0.9) !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	line-height: 14px !important;
	text-align: left !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.54) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected .char_level,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected .char_level {
	width: 166px !important;
	height: 16px !important;
	font-size: 11px !important;
	line-height: 16px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character .job_icon,
html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character .job_name,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character .job_icon,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character .job_name {
	display: none !important;
	visibility: hidden !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.create-slot,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.create-slot {
	display: flex !important;
	visibility: visible !important;
	position: relative !important;
	flex: 0 0 46px !important;
	width: 46px !important;
	height: 46px !important;
	min-height: 46px !important;
	margin: 2px 0 0 20px !important;
	padding: 0 !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	pointer-events: auto !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::before,
html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::after {
	display: block !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: #ffffff !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
	content: '' !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::before {
	width: 34px !important;
	height: 6px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::after {
	position: absolute !important;
	left: 20px !important;
	top: 6px !important;
	width: 6px !important;
	height: 34px !important;
}

html.rb-mobile-client #CharSelectV4 .pageinfo,
html.rb-mobile-live-layout-preview #CharSelectV4 .pageinfo,
html.rb-mobile-client #CharSelectV4 .mobile-page,
html.rb-mobile-live-layout-preview #CharSelectV4 .mobile-page {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

html.rb-mobile-client #CharSelectV4.has-mobile-pages .pageinfo,
html.rb-mobile-live-layout-preview #CharSelectV4.has-mobile-pages .pageinfo {
	display: block !important;
	visibility: visible !important;
	position: absolute !important;
	left: 148px !important;
	top: 278px !important;
	width: 54px !important;
	height: 18px !important;
	color: rgba(255, 255, 255, 0.92) !important;
	font-size: 11px !important;
	font-weight: 850 !important;
	line-height: 18px !important;
	text-align: center !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.56) !important;
	z-index: 9 !important;
}

html.rb-mobile-client #CharSelectV4.has-mobile-pages .mobile-page,
html.rb-mobile-live-layout-preview #CharSelectV4.has-mobile-pages .mobile-page {
	display: block !important;
	visibility: visible !important;
	position: absolute !important;
	top: 270px !important;
	width: 34px !important;
	height: 34px !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.36) !important;
	border-radius: 50% !important;
	background: rgba(16, 28, 38, 0.42) !important;
	color: #ffffff !important;
	font-size: 24px !important;
	font-weight: 800 !important;
	line-height: 30px !important;
	text-align: center !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
	pointer-events: auto !important;
	z-index: 9 !important;
}

html.rb-mobile-client #CharSelectV4.has-mobile-pages .mobile-page.prev,
html.rb-mobile-live-layout-preview #CharSelectV4.has-mobile-pages .mobile-page.prev {
	left: 108px !important;
}

html.rb-mobile-client #CharSelectV4.has-mobile-pages .mobile-page.next,
html.rb-mobile-live-layout-preview #CharSelectV4.has-mobile-pages .mobile-page.next {
	left: 206px !important;
}

html.rb-mobile-client #CharSelectV4.has-mobile-pages .mobile-page:disabled,
html.rb-mobile-live-layout-preview #CharSelectV4.has-mobile-pages .mobile-page:disabled {
	opacity: 0.35 !important;
	pointer-events: none !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.delete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.canceldelete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.finaldelete {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

html.rb-mobile-client #CharSelectV4.has-selected-character:not(.delete-pending) .charinfo .btn.delete,
html.rb-mobile-live-layout-preview #CharSelectV4.has-selected-character:not(.delete-pending) .charinfo .btn.delete {
	display: block !important;
	visibility: visible !important;
	position: absolute !important;
	left: 78px !important;
	right: auto !important;
	top: auto !important;
	bottom: 34px !important;
	width: 40px !important;
	height: 40px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--rb-char-delete-icon) center / 32px 32px no-repeat !important;
	box-shadow: none !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	text-indent: -9999px !important;
	opacity: 0.95 !important;
	pointer-events: auto !important;
}

html.rb-mobile-client #CharSelectV4.delete-pending .charinfo .btn.canceldelete,
html.rb-mobile-client #CharSelectV4.delete-pending .charinfo .btn.finaldelete,
html.rb-mobile-live-layout-preview #CharSelectV4.delete-pending .charinfo .btn.canceldelete,
html.rb-mobile-live-layout-preview #CharSelectV4.delete-pending .charinfo .btn.finaldelete {
	display: block !important;
	visibility: visible !important;
	position: absolute !important;
	top: auto !important;
	bottom: 38px !important;
	height: 30px !important;
	padding: 0 10px !important;
	border: 1px solid rgba(255, 255, 255, 0.36) !important;
	border-radius: 15px !important;
	color: #ffffff !important;
	font-size: 10px !important;
	font-weight: 900 !important;
	line-height: 28px !important;
	text-indent: 0 !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42) !important;
	pointer-events: auto !important;
}

html.rb-mobile-client #CharSelectV4.delete-pending .charinfo .btn.canceldelete,
html.rb-mobile-live-layout-preview #CharSelectV4.delete-pending .charinfo .btn.canceldelete {
	left: 72px !important;
	width: 90px !important;
	background: rgba(50, 62, 72, 0.74) !important;
}

html.rb-mobile-client #CharSelectV4.delete-pending .charinfo .btn.finaldelete,
html.rb-mobile-live-layout-preview #CharSelectV4.delete-pending .charinfo .btn.finaldelete {
	left: 168px !important;
	width: 92px !important;
	background: rgba(208, 65, 74, 0.84) !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete::before,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete::after,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete::before,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete::after,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete::before,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.delete::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.delete::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.canceldelete::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.canceldelete::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.finaldelete::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.finaldelete::after {
	display: none !important;
	content: none !important;
}

/* v1.5.431: final mobile-only character select rebuild. */
html.rb-mobile-client #CharSelectV4 .char_list,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_list {
	display: flex !important;
	position: absolute !important;
	left: 64px !important;
	top: 82px !important;
	bottom: auto !important;
	width: 258px !important;
	max-width: 258px !important;
	height: 190px !important;
	max-height: 190px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	gap: 8px !important;
	overflow: hidden !important;
	direction: ltr !important;
	z-index: 7 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas,
html.rb-mobile-client #CharSelectV4 .char_canvas.hidden-slot,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.hidden-slot,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character,
html.rb-mobile-client #CharSelectV4 .char_canvas.create-slot,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.create-slot {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character {
	display: block !important;
	visibility: visible !important;
	position: relative !important;
	flex: 0 0 52px !important;
	box-sizing: border-box !important;
	width: 226px !important;
	height: 52px !important;
	min-height: 52px !important;
	margin: 0 !important;
	padding: 7px 10px 7px 58px !important;
	border: 1px solid rgba(255, 255, 255, 0.24) !important;
	border-radius: 15px !important;
	background: linear-gradient(90deg, rgba(28, 30, 28, 0.45), rgba(28, 30, 28, 0.2) 76%, rgba(28, 30, 28, 0)) !important;
	box-shadow: none !important;
	backdrop-filter: blur(4px) !important;
	opacity: 0.82 !important;
	overflow: visible !important;
	pointer-events: auto !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected {
	width: 242px !important;
	height: 58px !important;
	min-height: 58px !important;
	padding: 8px 10px 8px 66px !important;
	border: 1px solid rgba(255, 230, 205, 0.58) !important;
	border-radius: 18px !important;
	background: linear-gradient(90deg, rgba(30, 31, 28, 0.58), rgba(30, 31, 28, 0.3) 78%, rgba(30, 31, 28, 0)) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 5px 12px rgba(0, 0, 0, 0.12) !important;
	opacity: 1 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character::before {
	display: block !important;
	position: absolute !important;
	left: 7px !important;
	top: 7px !important;
	box-sizing: border-box !important;
	width: 38px !important;
	height: 38px !important;
	border: 2px solid rgba(255, 232, 207, 0.84) !important;
	border-radius: 50% !important;
	background: rgba(88, 124, 136, 0.5) !important;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.14) !important;
	content: '' !important;
	pointer-events: none !important;
	z-index: 1 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected::before {
	left: 6px !important;
	top: 5px !important;
	width: 48px !important;
	height: 48px !important;
	border-width: 3px !important;
	background: rgba(77, 139, 139, 0.58) !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character::after {
	display: none !important;
	content: none !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character canvas,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character canvas {
	display: block !important;
	position: absolute !important;
	left: 9px !important;
	top: 9px !important;
	width: 34px !important;
	height: 34px !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	z-index: 2 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected canvas,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected canvas {
	left: 9px !important;
	top: 8px !important;
	width: 42px !important;
	height: 42px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character .name,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character .name {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	right: auto !important;
	display: block !important;
	width: 150px !important;
	height: 18px !important;
	margin: 1px 0 0 !important;
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 900 !important;
	line-height: 18px !important;
	letter-spacing: 0 !important;
	text-align: left !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.62) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected .name,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected .name {
	width: 166px !important;
	height: 20px !important;
	margin-top: 2px !important;
	font-size: 14px !important;
	line-height: 20px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character .char_level,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character .char_level {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	display: block !important;
	width: 150px !important;
	height: 14px !important;
	margin: 0 !important;
	color: rgba(255, 255, 255, 0.9) !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	line-height: 14px !important;
	letter-spacing: 0 !important;
	text-align: left !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.54) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected .char_level,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected .char_level {
	width: 166px !important;
	height: 16px !important;
	font-size: 11px !important;
	line-height: 16px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character .job_icon,
html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character .job_name,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character .job_icon,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character .job_name {
	display: none !important;
	visibility: hidden !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.create-slot,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.create-slot {
	display: flex !important;
	visibility: visible !important;
	position: relative !important;
	flex: 0 0 46px !important;
	width: 46px !important;
	height: 46px !important;
	min-height: 46px !important;
	margin: 2px 0 0 20px !important;
	padding: 0 !important;
	align-items: center !important;
	justify-content: center !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::before,
html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::after {
	display: block !important;
	background: #ffffff !important;
	border: 0 !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
	content: '' !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::before {
	width: 34px !important;
	height: 6px !important;
	border-radius: 6px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::after {
	position: absolute !important;
	left: 20px !important;
	top: 6px !important;
	width: 6px !important;
	height: 34px !important;
	border-radius: 6px !important;
}

html.rb-mobile-client #CharSelectV4 .pageinfo,
html.rb-mobile-live-layout-preview #CharSelectV4 .pageinfo {
	display: none !important;
	visibility: hidden !important;
}

html.rb-mobile-client #CharSelectV4.has-mobile-pages .pageinfo,
html.rb-mobile-live-layout-preview #CharSelectV4.has-mobile-pages .pageinfo {
	display: block !important;
	visibility: visible !important;
	position: absolute !important;
	left: 148px !important;
	top: 278px !important;
	width: 54px !important;
	height: 18px !important;
	color: rgba(255, 255, 255, 0.92) !important;
	font-size: 11px !important;
	font-weight: 850 !important;
	line-height: 18px !important;
	text-align: center !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.56) !important;
	z-index: 9 !important;
}

html.rb-mobile-client #CharSelectV4 .mobile-page,
html.rb-mobile-live-layout-preview #CharSelectV4 .mobile-page {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

html.rb-mobile-client #CharSelectV4.has-mobile-pages .mobile-page,
html.rb-mobile-live-layout-preview #CharSelectV4.has-mobile-pages .mobile-page {
	display: block !important;
	visibility: visible !important;
	position: absolute !important;
	top: 270px !important;
	box-sizing: border-box !important;
	width: 34px !important;
	height: 34px !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.36) !important;
	border-radius: 50% !important;
	background: rgba(16, 28, 38, 0.42) !important;
	color: #ffffff !important;
	font-size: 24px !important;
	font-weight: 800 !important;
	line-height: 30px !important;
	text-align: center !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 3px 8px rgba(0, 0, 0, 0.14) !important;
	pointer-events: auto !important;
	z-index: 9 !important;
}

html.rb-mobile-client #CharSelectV4.has-mobile-pages .mobile-page.prev,
html.rb-mobile-live-layout-preview #CharSelectV4.has-mobile-pages .mobile-page.prev {
	left: 108px !important;
}

html.rb-mobile-client #CharSelectV4.has-mobile-pages .mobile-page.next,
html.rb-mobile-live-layout-preview #CharSelectV4.has-mobile-pages .mobile-page.next {
	left: 206px !important;
}

html.rb-mobile-client #CharSelectV4.has-mobile-pages .mobile-page:disabled,
html.rb-mobile-live-layout-preview #CharSelectV4.has-mobile-pages .mobile-page:disabled {
	opacity: 0.35 !important;
	pointer-events: none !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.delete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.canceldelete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.finaldelete {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

html.rb-mobile-client #CharSelectV4.has-selected-character:not(.delete-pending) .charinfo .btn.delete,
html.rb-mobile-live-layout-preview #CharSelectV4.has-selected-character:not(.delete-pending) .charinfo .btn.delete {
	display: block !important;
	visibility: visible !important;
	position: absolute !important;
	left: 78px !important;
	right: auto !important;
	top: auto !important;
	bottom: 34px !important;
	box-sizing: border-box !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	min-height: 40px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--rb-char-delete-icon) center / 32px 32px no-repeat !important;
	box-shadow: none !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	text-indent: -9999px !important;
	opacity: 0.95 !important;
	pointer-events: auto !important;
}

html.rb-mobile-client #CharSelectV4.delete-pending .charinfo .btn.canceldelete,
html.rb-mobile-client #CharSelectV4.delete-pending .charinfo .btn.finaldelete,
html.rb-mobile-live-layout-preview #CharSelectV4.delete-pending .charinfo .btn.canceldelete,
html.rb-mobile-live-layout-preview #CharSelectV4.delete-pending .charinfo .btn.finaldelete {
	display: block !important;
	visibility: visible !important;
	position: absolute !important;
	top: auto !important;
	bottom: 38px !important;
	height: 30px !important;
	margin: 0 !important;
	padding: 0 10px !important;
	border: 1px solid rgba(255, 255, 255, 0.36) !important;
	border-radius: 15px !important;
	color: #ffffff !important;
	font-size: 10px !important;
	font-weight: 900 !important;
	line-height: 28px !important;
	letter-spacing: 0 !important;
	text-indent: 0 !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42) !important;
	pointer-events: auto !important;
}

html.rb-mobile-client #CharSelectV4.delete-pending .charinfo .btn.canceldelete,
html.rb-mobile-live-layout-preview #CharSelectV4.delete-pending .charinfo .btn.canceldelete {
	left: 72px !important;
	width: 90px !important;
	background: rgba(50, 62, 72, 0.74) !important;
}

html.rb-mobile-client #CharSelectV4.delete-pending .charinfo .btn.finaldelete,
html.rb-mobile-live-layout-preview #CharSelectV4.delete-pending .charinfo .btn.finaldelete {
	left: 168px !important;
	width: 92px !important;
	background: rgba(208, 65, 74, 0.84) !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete::before,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete::after,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete::before,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete::after,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete::before,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.delete::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.delete::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.canceldelete::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.canceldelete::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.finaldelete::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.finaldelete::after {
	display: none !important;
	content: none !important;
}

/* v1.5.430: mobile character select shows a vertical slot list and uses the provided delete icon. */
html.rb-mobile-client #CharSelectV4 .char_list,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_list {
	display: flex !important;
	position: absolute !important;
	left: 64px !important;
	top: 118px !important;
	bottom: 92px !important;
	width: 262px !important;
	max-width: min(35vw, 272px) !important;
	height: auto !important;
	max-height: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 8px 12px 0 !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	gap: 8px !important;
	direction: ltr !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
	z-index: 4 !important;
}

html.rb-mobile-client #CharSelectV4 .char_list::-webkit-scrollbar,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_list::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.hidden-slot,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.hidden-slot {
	display: none !important;
	visibility: hidden !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character:not(.selected),
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character:not(.selected) {
	display: block !important;
	visibility: visible !important;
	position: relative !important;
	flex: 0 0 auto !important;
	box-sizing: border-box !important;
	width: 218px !important;
	height: 52px !important;
	min-height: 52px !important;
	margin: 0 !important;
	padding: 6px 10px 6px 58px !important;
	border: 1px solid rgba(255, 255, 255, 0.28) !important;
	border-radius: 16px !important;
	background: linear-gradient(90deg, rgba(28, 34, 36, 0.45), rgba(28, 34, 36, 0.2) 76%, rgba(28, 34, 36, 0)) !important;
	box-shadow: none !important;
	backdrop-filter: blur(4px) !important;
	opacity: 0.72 !important;
	overflow: visible !important;
	pointer-events: auto !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected {
	width: 250px !important;
	height: 76px !important;
	min-height: 76px !important;
	padding: 8px 12px 8px 82px !important;
	border: 1px solid rgba(255, 255, 255, 0.5) !important;
	border-radius: 18px !important;
	background: linear-gradient(90deg, rgba(35, 43, 44, 0.68), rgba(35, 43, 44, 0.36) 76%, rgba(35, 43, 44, 0.02)) !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
	opacity: 1 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character::before {
	display: block !important;
	position: absolute !important;
	left: 6px !important;
	top: 6px !important;
	box-sizing: border-box !important;
	width: 40px !important;
	height: 40px !important;
	border: 2px solid rgba(255, 255, 255, 0.55) !important;
	border-radius: 50% !important;
	background: rgba(74, 139, 156, 0.56) !important;
	box-shadow: none !important;
	content: '' !important;
	pointer-events: none !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected::before {
	left: 6px !important;
	top: 6px !important;
	width: 64px !important;
	height: 64px !important;
	border: 4px solid rgba(255, 232, 207, 0.96) !important;
	background: rgba(69, 150, 146, 0.72) !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character::after {
	display: none !important;
	content: none !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character canvas,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character canvas {
	position: absolute !important;
	left: 8px !important;
	top: 8px !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	z-index: 2 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected canvas,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected canvas {
	left: 10px !important;
	top: 10px !important;
	width: 56px !important;
	height: 56px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character .name,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character .name {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	right: auto !important;
	display: block !important;
	width: 100% !important;
	height: 18px !important;
	margin: 1px 0 0 !important;
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 950 !important;
	line-height: 18px !important;
	text-align: left !important;
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.55) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected .name,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected .name {
	height: 24px !important;
	margin-top: 5px !important;
	font-size: 17px !important;
	line-height: 24px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character .char_level,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character .char_level {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	display: block !important;
	width: 100% !important;
	height: 14px !important;
	margin: 0 !important;
	color: rgba(255, 255, 255, 0.92) !important;
	font-size: 10px !important;
	font-weight: 850 !important;
	line-height: 14px !important;
	text-align: left !important;
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.48) !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected .char_level,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected .char_level {
	height: 20px !important;
	font-size: 15px !important;
	line-height: 20px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character .job_name,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character .job_name {
	display: none !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.create-slot,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.create-slot {
	display: block !important;
	visibility: visible !important;
	position: relative !important;
	flex: 0 0 auto !important;
	width: 54px !important;
	height: 54px !important;
	min-height: 54px !important;
	margin: 8px 0 0 12px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

html.rb-mobile-client #CharSelectV4 .character_stage,
html.rb-mobile-live-layout-preview #CharSelectV4 .character_stage {
	left: 52% !important;
	top: 50% !important;
	bottom: auto !important;
	width: min(320px, 34vw) !important;
	min-width: 208px !important;
	height: calc(100% - 92px) !important;
	min-height: 250px !important;
	transform: translate(-50%, -44%) !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.delete {
	display: block;
	position: absolute !important;
	left: 80px !important;
	right: auto !important;
	top: auto !important;
	bottom: 29px !important;
	box-sizing: border-box !important;
	width: 46px !important;
	height: 46px !important;
	min-width: 46px !important;
	min-height: 46px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.32) !important;
	border-radius: 50% !important;
	background: rgba(18, 32, 40, 0.42) var(--rb-char-delete-icon) center / 32px 32px no-repeat !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 5px 12px rgba(0, 0, 0, 0.18) !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	text-indent: -9999px !important;
	opacity: 0.82 !important;
	pointer-events: auto !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete::before,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.delete::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.delete::after {
	display: none !important;
	content: none !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.canceldelete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.finaldelete {
	position: absolute !important;
	top: auto !important;
	bottom: 34px !important;
	box-sizing: border-box !important;
	height: 34px !important;
	margin: 0 !important;
	padding: 0 10px !important;
	border: 1px solid rgba(255, 255, 255, 0.36) !important;
	border-radius: 17px !important;
	color: #ffffff !important;
	font-size: 10px !important;
	font-weight: 900 !important;
	line-height: 32px !important;
	letter-spacing: 0 !important;
	text-indent: 0 !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42) !important;
	pointer-events: auto !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.canceldelete {
	left: 72px !important;
	right: auto !important;
	width: 92px !important;
	background: rgba(52, 66, 78, 0.72) !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.finaldelete {
	left: 170px !important;
	right: auto !important;
	width: 98px !important;
	background: rgba(209, 68, 76, 0.82) !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete::before,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete::after,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete::before,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.canceldelete::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.canceldelete::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.finaldelete::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.finaldelete::after {
	display: none !important;
	content: none !important;
}

/* v1.5.427: mobile character select reference layout. */
html.rb-mobile-client #CharSelectV4,
html.rb-mobile-live-layout-preview #CharSelectV4 {
	position: fixed !important;
	inset: 0 !important;
	width: max(var(--rb-game-w, 100dvw), 100dvw) !important;
	height: max(var(--rb-game-h, 100dvh), 100dvh) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	background: transparent !important;
	color: #ffffff !important;
	font-family: Roboto, Arial, Helvetica, sans-serif !important;
}

html.rb-mobile-client #CharSelectV4 .char_select_container,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_select_container {
	position: absolute !important;
	inset: 0 !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

html.rb-mobile-client #CharSelectV4 .char_select_container::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_select_container::before {
	position: absolute !important;
	left: 62px !important;
	top: 24px !important;
	width: auto !important;
	height: 32px !important;
	padding: 0 !important;
	color: #ffffff !important;
	content: 'Select Character' !important;
	font-size: 21px !important;
	font-weight: 900 !important;
	line-height: 32px !important;
	letter-spacing: 0 !important;
	text-shadow: 0 2px 5px rgba(12, 37, 67, 0.6) !important;
	z-index: 4 !important;
}

html.rb-mobile-client #CharSelectV4 .char_select_container::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_select_container::after {
	display: none !important;
	content: none !important;
}

html.rb-mobile-client #CharSelectV4 .btn.cancel,
html.rb-mobile-live-layout-preview #CharSelectV4 .btn.cancel {
	display: block !important;
	visibility: visible !important;
	position: absolute !important;
	left: auto !important;
	right: 24px !important;
	top: 20px !important;
	box-sizing: border-box !important;
	width: 42px !important;
	height: 42px !important;
	min-width: 42px !important;
	min-height: 42px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.42) !important;
	border-radius: 50% !important;
	background: rgba(19, 48, 76, 0.34) !important;
	color: transparent !important;
	box-shadow: 0 2px 10px rgba(10, 28, 52, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
	text-indent: -9999px !important;
	overflow: hidden !important;
	z-index: 8 !important;
}

html.rb-mobile-client #CharSelectV4 .btn.cancel::before,
html.rb-mobile-client #CharSelectV4 .btn.cancel::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .btn.cancel::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .btn.cancel::after {
	display: block !important;
	position: absolute !important;
	left: 12px !important;
	top: 19px !important;
	width: 18px !important;
	height: 3px !important;
	border: 0 !important;
	border-radius: 2px !important;
	background: #ffffff !important;
	content: '' !important;
	transform-origin: center !important;
}

html.rb-mobile-client #CharSelectV4 .btn.cancel::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .btn.cancel::before {
	transform: rotate(45deg) !important;
}

html.rb-mobile-client #CharSelectV4 .btn.cancel::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .btn.cancel::after {
	transform: rotate(-45deg) !important;
}

html.rb-mobile-client #CharSelectV4 .char_list,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_list {
	display: flex !important;
	position: absolute !important;
	left: 66px !important;
	top: 78px !important;
	bottom: auto !important;
	box-sizing: border-box !important;
	width: 244px !important;
	max-width: calc(44vw - 18px) !important;
	height: auto !important;
	max-height: calc(100% - 150px) !important;
	margin: 0 !important;
	padding: 0 !important;
	flex-direction: column !important;
	gap: 18px !important;
	overflow: visible !important;
	z-index: 5 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.hidden-slot,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character:not(.selected),
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.hidden-slot,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character:not(.selected) {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected {
	display: block !important;
	visibility: visible !important;
	width: 236px !important;
	max-width: 100% !important;
	height: 72px !important;
	min-height: 72px !important;
	padding: 7px 12px 7px 76px !important;
	border-radius: 4px !important;
	background: linear-gradient(90deg, rgba(35, 43, 44, 0.62), rgba(35, 43, 44, 0.34) 72%, rgba(35, 43, 44, 0)) !important;
	box-shadow: none !important;
	pointer-events: auto !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected::before {
	display: block !important;
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	box-sizing: border-box !important;
	width: 70px !important;
	height: 70px !important;
	border: 4px solid rgba(255, 232, 207, 0.96) !important;
	border-radius: 50% !important;
	background: rgba(76, 112, 152, 0.72) !important;
	box-shadow: 0 0 0 2px rgba(130, 132, 230, 0.54), inset 0 1px 5px rgba(255, 255, 255, 0.3) !important;
	content: '' !important;
	z-index: 0 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected canvas,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected canvas {
	display: block !important;
	position: absolute !important;
	left: 5px !important;
	top: 5px !important;
	width: 60px !important;
	height: 60px !important;
	border-radius: 50% !important;
	background: transparent !important;
	object-fit: contain !important;
	overflow: hidden !important;
	z-index: 1 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas .name,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected .name,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas .name,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected .name {
	display: block !important;
	position: relative !important;
	left: auto !important;
	top: auto !important;
	box-sizing: border-box !important;
	width: 150px !important;
	max-width: calc(100% - 4px) !important;
	height: 24px !important;
	margin: 5px 0 0 !important;
	padding: 0 !important;
	color: #ffffff !important;
	font-size: 17px !important;
	font-weight: 950 !important;
	line-height: 24px !important;
	letter-spacing: 0 !important;
	text-align: left !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	z-index: 2 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas .char_level,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected .char_level,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas .char_level,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected .char_level {
	display: block !important;
	position: relative !important;
	left: auto !important;
	top: auto !important;
	width: 150px !important;
	max-width: calc(100% - 4px) !important;
	height: 20px !important;
	margin: 2px 0 0 !important;
	padding: 0 !important;
	color: #ffffff !important;
	font-size: 15px !important;
	font-weight: 900 !important;
	line-height: 20px !important;
	text-align: left !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.52) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	z-index: 2 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas .job_name,
html.rb-mobile-client #CharSelectV4 .char_canvas .job_icon,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas .job_name,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas .job_icon {
	display: none !important;
	visibility: hidden !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.create-slot,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.create-slot {
	display: block !important;
	visibility: visible !important;
	width: 58px !important;
	height: 58px !important;
	min-height: 58px !important;
	margin: 4px 0 0 18px !important;
	border-radius: 50% !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	pointer-events: auto !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.create-slot::before,
html.rb-mobile-client #CharSelectV4 .char_canvas.create-slot::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.create-slot::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.create-slot::after {
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	background: #ffffff !important;
	border-radius: 2px !important;
	content: '' !important;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.36)) !important;
	transform: translate(-50%, -50%) !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.create-slot::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.create-slot::before {
	width: 42px !important;
	height: 8px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.create-slot::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.create-slot::after {
	width: 8px !important;
	height: 42px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.create-slot canvas,
html.rb-mobile-client #CharSelectV4 .char_canvas.create-slot .name,
html.rb-mobile-client #CharSelectV4 .char_canvas.create-slot .char_level,
html.rb-mobile-client #CharSelectV4 .char_canvas.create-slot .timedelete,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.create-slot canvas,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.create-slot .name,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.create-slot .char_level,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.create-slot .timedelete {
	display: none !important;
}

html.rb-mobile-client #CharSelectV4 .character_stage,
html.rb-mobile-live-layout-preview #CharSelectV4 .character_stage {
	display: block !important;
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	right: auto !important;
	bottom: auto !important;
	box-sizing: border-box !important;
	width: min(340px, 38vw) !important;
	min-width: 210px !important;
	height: calc(100% - 86px) !important;
	min-height: 260px !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: translate(-50%, -46%) !important;
	pointer-events: none !important;
	z-index: 3 !important;
}

html.rb-mobile-client #CharSelectV4 .selected_canvas,
html.rb-mobile-live-layout-preview #CharSelectV4 .selected_canvas {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	filter: drop-shadow(0 18px 16px rgba(8, 29, 42, 0.32)) !important;
}

html.rb-mobile-client #CharSelectV4 .selected_name,
html.rb-mobile-client #CharSelectV4 .selected_levels,
html.rb-mobile-live-layout-preview #CharSelectV4 .selected_name,
html.rb-mobile-live-layout-preview #CharSelectV4 .selected_levels {
	display: none !important;
	visibility: hidden !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo {
	display: block !important;
	position: static !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	pointer-events: none !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo::before,
html.rb-mobile-client #CharSelectV4 .charinfo div,
html.rb-mobile-client #CharSelectV4 .char_stat_graph,
html.rb-mobile-client #CharSelectV4 .pageinfo,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo div,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_stat_graph,
html.rb-mobile-live-layout-preview #CharSelectV4 .pageinfo {
	display: none !important;
	visibility: hidden !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.ok,
html.rb-mobile-client #CharSelectV4 .btn.ok,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.ok,
html.rb-mobile-live-layout-preview #CharSelectV4 .btn.ok {
	display: block !important;
	visibility: visible !important;
	position: absolute !important;
	left: auto !important;
	right: 70px !important;
	top: auto !important;
	bottom: 35px !important;
	box-sizing: border-box !important;
	width: 190px !important;
	height: 54px !important;
	margin: 0 !important;
	padding: 0 20px !important;
	border: 0 !important;
	border-radius: 22px !important;
	background: linear-gradient(180deg, #7781f0, #6573df) !important;
	color: #ffffff !important;
	font-size: 18px !important;
	font-weight: 950 !important;
	line-height: 19px !important;
	letter-spacing: 0 !important;
	text-align: center !important;
	text-shadow: 0 1px 2px rgba(32, 40, 112, 0.34) !important;
	box-shadow: 0 7px 16px rgba(34, 52, 134, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
	pointer-events: auto !important;
	white-space: normal !important;
	z-index: 7 !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.delete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.canceldelete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.finaldelete {
	display: block !important;
	visibility: visible !important;
	position: absolute !important;
	top: auto !important;
	right: auto !important;
	bottom: 36px !important;
	box-sizing: border-box !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.38) !important;
	border-radius: 50% !important;
	background: rgba(24, 49, 55, 0.34) !important;
	color: transparent !important;
	text-indent: -9999px !important;
	box-shadow: 0 2px 8px rgba(5, 24, 30, 0.2) !important;
	pointer-events: auto !important;
	overflow: hidden !important;
	z-index: 7 !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.delete {
	left: 66px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.canceldelete {
	left: 118px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.finaldelete {
	left: 170px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete::before,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete::before,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.delete::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.canceldelete::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.finaldelete::before {
	display: block !important;
	position: absolute !important;
	left: 14px !important;
	top: 15px !important;
	width: 16px !important;
	height: 18px !important;
	border: 3px solid #ffffff !important;
	border-top: 0 !important;
	border-radius: 2px !important;
	background: transparent !important;
	content: '' !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete::after,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete::after,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.delete::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.canceldelete::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.finaldelete::after {
	display: block !important;
	position: absolute !important;
	left: 12px !important;
	top: 10px !important;
	width: 20px !important;
	height: 4px !important;
	border-radius: 2px !important;
	background: #ffffff !important;
	box-shadow: 5px -4px 0 -1px #ffffff !important;
	content: '' !important;
}

@media (max-width: 760px) {
	html.rb-mobile-client #CharSelectV4 .char_list,
	html.rb-mobile-live-layout-preview #CharSelectV4 .char_list {
		left: 28px !important;
		top: 68px !important;
		width: 214px !important;
		max-width: 40vw !important;
	}

	html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected,
	html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected {
		width: 208px !important;
		height: 64px !important;
		min-height: 64px !important;
		padding-left: 66px !important;
	}

	html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected::before,
	html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected::before {
		width: 62px !important;
		height: 62px !important;
	}

	html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected canvas,
	html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected canvas {
		width: 52px !important;
		height: 52px !important;
	}

	html.rb-mobile-client #CharSelectV4 .char_canvas .name,
	html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas .name {
		font-size: 14px !important;
		line-height: 20px !important;
		height: 20px !important;
	}

	html.rb-mobile-client #CharSelectV4 .char_canvas .char_level,
	html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas .char_level {
		font-size: 12px !important;
		line-height: 16px !important;
		height: 16px !important;
	}

	html.rb-mobile-client #CharSelectV4 .charinfo .btn.ok,
	html.rb-mobile-client #CharSelectV4 .btn.ok,
	html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.ok,
	html.rb-mobile-live-layout-preview #CharSelectV4 .btn.ok {
		right: 26px !important;
		bottom: 24px !important;
		width: 166px !important;
		height: 48px !important;
		font-size: 15px !important;
		line-height: 17px !important;
	}
}

/* Final character-select art direction: cleaner mobile RPG glass, stronger readable profiles. */
#CharSelectV4 .char_canvas.has-character,
#CharSelectV4 .char_canvas.has-character.selected {
	height: 76px !important;
	min-height: 76px !important;
	border-radius: 18px !important;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(231, 246, 255, 0.68) 54%, rgba(183, 224, 255, 0.48)),
		rgba(248, 252, 255, 0.55) !important;
	box-shadow:
		0 14px 32px rgba(16, 57, 104, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

#CharSelectV4 .char_canvas.has-character.selected {
	border-color: rgba(255, 255, 255, 0.92) !important;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(222, 242, 255, 0.78) 54%, rgba(143, 207, 255, 0.58)),
		rgba(250, 253, 255, 0.7) !important;
	box-shadow:
		0 0 0 2px rgba(122, 197, 255, 0.38),
		0 16px 36px rgba(16, 57, 104, 0.26),
		inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

#CharSelectV4 .char_canvas.has-character::after {
	position: absolute !important;
	right: 12px !important;
	top: 12px !important;
	width: 7px !important;
	height: 7px !important;
	border-radius: 50% !important;
	background: rgba(69, 189, 154, 0.9) !important;
	box-shadow: 0 0 0 4px rgba(69, 189, 154, 0.16) !important;
	content: "" !important;
}

#CharSelectV4 .char_canvas.has-character.selected::before {
	position: absolute !important;
	left: 0 !important;
	top: 16px !important;
	width: 4px !important;
	height: 44px !important;
	border-radius: 0 6px 6px 0 !important;
	background: linear-gradient(180deg, #ffffff, #65b8f3) !important;
	box-shadow: 0 0 12px rgba(83, 171, 239, 0.55) !important;
	content: "" !important;
}

#CharSelectV4 .char_canvas.has-character canvas,
#CharSelectV4 .char_canvas.has-character.selected canvas {
	background:
		radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.98), rgba(194, 232, 255, 0.72) 58%, rgba(86, 164, 231, 0.38)) !important;
	box-shadow:
		0 0 0 4px rgba(255, 255, 255, 0.72),
		0 8px 18px rgba(28, 83, 138, 0.24) !important;
}

#CharSelectV4 .char_canvas .name,
#CharSelectV4 .char_canvas.has-character.selected .name {
	color: #173f64 !important;
	font-size: 16px !important;
	letter-spacing: 0 !important;
}

#CharSelectV4 .char_canvas .char_level,
#CharSelectV4 .char_canvas .job_name {
	color: #315d7f !important;
	font-size: 10px !important;
	font-weight: 850 !important;
}

#CharSelectV4 .charinfo {
	border-radius: 20px !important;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(235, 247, 255, 0.72)),
		rgba(250, 253, 255, 0.64) !important;
	box-shadow:
		0 16px 40px rgba(14, 50, 90, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
	backdrop-filter: blur(14px) saturate(1.08) !important;
}

#CharSelectV4 .charinfo div {
	min-height: 24px !important;
	border-bottom: 1px solid rgba(81, 142, 199, 0.14) !important;
}

#CharSelectV4 .charinfo .charinfo-value {
	color: #173f64 !important;
	font-weight: 950 !important;
}

#CharSelectV4 .char_stat_graph {
	border-radius: 18px !important;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(214, 238, 255, 0.42)),
		rgba(255, 255, 255, 0.36) !important;
}

#CharSelectV4 .charinfo .btn.ok,
#CharSelectV4 .btn.ok {
	border-radius: 16px !important;
	background: linear-gradient(180deg, #8fd0ff, #4396e6) !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected {
	height: 60px !important;
	min-height: 60px !important;
	border-radius: 15px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character::after {
	right: 9px !important;
	top: 9px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected::before {
	top: 12px !important;
	height: 34px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo {
	border-radius: 16px !important;
}

html.rb-mobile-client #CharSelectV4 .char_stat_graph {
	height: 78px !important;
	margin: 5px auto 6px !important;
	border-radius: 11px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.ok {
	height: 30px !important;
	font-size: 12px !important;
	line-height: 28px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete {
	height: 22px !important;
	margin-top: 5px !important;
	font-size: 8px !important;
	line-height: 20px !important;
}

/* Mobile select readability pass: labels visible, panel/button fully inside screen. */
html.rb-mobile-client #CharSelectV4 .char_select_container::before {
	left: 0 !important;
	top: 18px !important;
	height: 24px !important;
	padding-left: 62px !important;
	font-size: clamp(14px, 3.6vh, 18px) !important;
	line-height: 24px !important;
}

html.rb-mobile-client #CharSelectV4 .char_select_container::after {
	top: 17px !important;
	left: 24px !important;
	width: 24px !important;
	height: 24px !important;
}

html.rb-mobile-client #CharSelectV4 .btn.cancel {
	top: 14px !important;
	right: 18px !important;
	width: 30px !important;
	height: 30px !important;
	font-size: 18px !important;
	line-height: 30px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo {
	right: 18px !important;
	top: 54px !important;
	box-sizing: border-box !important;
	width: 188px !important;
	max-height: calc(var(--rb-game-h, 100vh) - 64px) !important;
	padding: 28px 9px 8px !important;
	overflow: hidden !important;
	border-radius: 13px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo::before {
	top: 10px !important;
	left: 9px !important;
	font-size: 10px !important;
	line-height: 12px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo div {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	box-sizing: border-box !important;
	width: 100% !important;
	min-height: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important;
	color: #ffffff !important;
	font-size: 7px !important;
	font-weight: 800 !important;
	line-height: 9px !important;
	text-align: left !important;
	text-align-last: left !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo div::before {
	display: block !important;
	flex: 0 0 46px !important;
	width: 46px !important;
	margin: 0 4px 0 0 !important;
	color: rgba(235, 247, 247, 0.76) !important;
	font-size: 7px !important;
	font-weight: 800 !important;
	line-height: 9px !important;
	text-align: left !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.48) !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .job::before {
	content: 'Job' !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .lvl::before {
	content: 'Base Lv.' !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .exp::before {
	content: 'EXP' !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .hp::before {
	content: 'HP' !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .sp::before {
	content: 'SP' !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .map::before {
	content: 'Map' !important;
}

html.rb-mobile-client #CharSelectV4 .char_stat_graph {
	box-sizing: border-box !important;
	width: 100% !important;
	height: 66px !important;
	margin: 4px 0 5px !important;
	border-radius: 10px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.ok,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 0 8px !important;
	overflow: hidden !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.ok {
	height: 27px !important;
	font-size: 11px !important;
	line-height: 25px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete {
	height: 20px !important;
	margin-top: 4px !important;
	font-size: 7px !important;
	line-height: 18px !important;
}

/* Mobile select final fit: readable list spacing, visible selected name, labelled info values. */
#CharSelectV4 .charinfo .charinfo-value {
	display: block !important;
	min-width: 0 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

html.rb-mobile-client #CharSelectV4 .char_select_container::before {
	top: 20px !important;
	padding-left: 72px !important;
	font-size: clamp(13px, 3.2vh, 17px) !important;
}

html.rb-mobile-client #CharSelectV4 .char_select_container::after {
	top: 18px !important;
	left: 28px !important;
}

html.rb-mobile-client #CharSelectV4 .char_list {
	top: 68px !important;
	left: 18px !important;
	bottom: 10px !important;
	width: clamp(170px, 23vw, 198px) !important;
	padding: 4px 5px 10px 0 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected {
	height: 50px !important;
	min-height: 50px !important;
	margin: 0 0 12px 5px !important;
	padding-left: 58px !important;
	padding-right: 7px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character::before {
	left: 29px !important;
	height: 36px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character::after {
	width: 50px !important;
	height: 50px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character canvas,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected canvas {
	left: 6px !important;
	top: 6px !important;
	width: 38px !important;
	height: 38px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character .name,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected .name {
	font-size: 9px !important;
	line-height: 11px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas .char_level,
html.rb-mobile-client #CharSelectV4 .char_canvas .job_name {
	font-size: 7px !important;
	line-height: 8px !important;
}

html.rb-mobile-client #CharSelectV4.has-characters .char_canvas.create-slot,
html.rb-mobile-client #CharSelectV4:not(.has-characters) .char_canvas.create-slot {
	width: 50px !important;
	height: 50px !important;
	min-height: 50px !important;
	margin-left: 5px !important;
}

html.rb-mobile-client #CharSelectV4 .selected_name {
	margin-top: -8px !important;
	max-width: 220px !important;
	font-size: 13px !important;
	line-height: 15px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

html.rb-mobile-client #CharSelectV4 .selected_levels {
	margin-top: 2px !important;
	font-size: 8px !important;
	line-height: 10px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo {
	right: 18px !important;
	top: 58px !important;
	width: 184px !important;
	max-height: calc(var(--rb-game-h, 100vh) - 70px) !important;
	padding: 27px 9px 8px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo div {
	display: grid !important;
	grid-template-columns: 46px minmax(0, 1fr) !important;
	column-gap: 5px !important;
	align-items: center !important;
	justify-items: start !important;
	min-height: 11px !important;
	color: #ffffff !important;
	font-size: 7px !important;
	line-height: 9px !important;
	text-align: left !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo div::before {
	flex: none !important;
	width: auto !important;
	margin: 0 !important;
	font-size: 7px !important;
	line-height: 9px !important;
	text-align: left !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .charinfo-value {
	display: block !important;
	justify-self: start !important;
	max-width: 100% !important;
	color: #ffffff !important;
	text-align: left !important;
}

html.rb-mobile-client #CharSelectV4 .char_stat_graph {
	height: 58px !important;
	margin: 4px 0 5px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.ok {
	height: 25px !important;
	font-size: 10px !important;
	line-height: 23px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete {
	height: 18px !important;
	font-size: 7px !important;
	line-height: 16px !important;
}

/* Launch polish pass: bright blue-white mobile RPG shell. */
#CharSelectV4 {
	background:
		linear-gradient(90deg, rgba(12, 36, 68, 0.28), rgba(255, 255, 255, 0.02) 46%, rgba(12, 36, 68, 0.24)),
		linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(8, 22, 39, 0.54) 72%, rgba(4, 11, 18, 0.76)) !important;
	font-family: Inter, "Segoe UI", Arial, sans-serif !important;
}

#CharSelectV4 .char_select_container::before {
	left: clamp(34px, 4vw, 76px) !important;
	top: clamp(24px, 3.8vh, 40px) !important;
	padding-left: 58px !important;
	color: #ffffff !important;
	font-size: clamp(24px, 3.2vw, 42px) !important;
	font-weight: 950 !important;
	line-height: 42px !important;
	text-shadow: 0 4px 12px rgba(18, 54, 96, 0.58) !important;
}

#CharSelectV4 .char_select_container::after {
	display: block !important;
	position: absolute !important;
	left: clamp(22px, 3vw, 54px) !important;
	top: clamp(28px, 4vh, 42px) !important;
	width: 36px !important;
	height: 36px !important;
	border-left: 5px solid #ffffff !important;
	border-bottom: 5px solid #ffffff !important;
	background: transparent !important;
	border-radius: 3px !important;
	box-shadow: -3px 3px 8px rgba(18, 54, 96, 0.34) !important;
	transform: rotate(45deg) !important;
	content: "" !important;
}

#CharSelectV4 .char_list {
	left: clamp(28px, 4vw, 74px) !important;
	top: clamp(112px, 15vh, 150px) !important;
	bottom: clamp(44px, 7vh, 84px) !important;
	width: clamp(300px, 25vw, 380px) !important;
	padding: 4px 10px 14px 0 !important;
	direction: rtl !important;
	overflow-y: auto !important;
	overflow-x: visible !important;
	scrollbar-color: rgba(151, 205, 250, 0.9) rgba(255, 255, 255, 0.2) !important;
}

#CharSelectV4 .char_canvas.has-character,
#CharSelectV4 .char_canvas.has-character.selected {
	direction: ltr !important;
	width: calc(100% - 10px) !important;
	height: 72px !important;
	min-height: 72px !important;
	margin: 0 0 12px 10px !important;
	padding: 9px 16px 9px 82px !important;
	border: 1px solid rgba(255, 255, 255, 0.58) !important;
	border-radius: 999px !important;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(219, 241, 255, 0.46)),
		rgba(229, 246, 255, 0.42) !important;
	box-shadow: 0 8px 22px rgba(20, 66, 120, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
	backdrop-filter: blur(8px) !important;
}

#CharSelectV4 .char_canvas.has-character.selected {
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(184, 224, 255, 0.62)),
		rgba(231, 248, 255, 0.68) !important;
	box-shadow: 0 0 0 3px rgba(92, 172, 245, 0.28), 0 12px 28px rgba(20, 66, 120, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

#CharSelectV4 .char_canvas.has-character canvas,
#CharSelectV4 .char_canvas.has-character.selected canvas {
	left: 10px !important;
	top: 9px !important;
	width: 54px !important;
	height: 54px !important;
	border-radius: 50% !important;
	background: radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.9), rgba(123, 196, 245, 0.45)) !important;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.62), 0 6px 14px rgba(32, 94, 156, 0.26) !important;
}

#CharSelectV4 .char_canvas .name,
#CharSelectV4 .char_canvas.has-character.selected .name {
	left: 82px !important;
	top: 14px !important;
	right: 14px !important;
	color: #1e4569 !important;
	font-size: 17px !important;
	font-weight: 950 !important;
	line-height: 18px !important;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

#CharSelectV4 .char_canvas .char_level,
#CharSelectV4 .char_canvas .job_name {
	position: relative !important;
	left: auto !important;
	top: 33px !important;
	width: auto !important;
	height: auto !important;
	color: #466b86 !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	line-height: 13px !important;
	text-align: left !important;
	text-shadow: none !important;
}

#CharSelectV4 .character_stage {
	left: 50% !important;
	top: clamp(104px, 16vh, 148px) !important;
	bottom: clamp(80px, 10vh, 122px) !important;
	width: min(430px, 30vw) !important;
	min-width: 260px !important;
	transform: translateX(-50%) !important;
}

#CharSelectV4 .selected_canvas {
	filter: drop-shadow(0 26px 24px rgba(20, 54, 92, 0.3)) !important;
}

#CharSelectV4 .selected_name {
	color: #ffffff !important;
	font-size: clamp(28px, 3vw, 42px) !important;
	font-weight: 950 !important;
	text-shadow: 0 4px 12px rgba(18, 54, 96, 0.58) !important;
}

#CharSelectV4 .selected_levels {
	color: #eaf7ff !important;
	font-size: clamp(13px, 1.4vw, 18px) !important;
	font-weight: 900 !important;
	text-shadow: 0 3px 8px rgba(18, 54, 96, 0.5) !important;
}

#CharSelectV4 .charinfo {
	right: clamp(28px, 4vw, 74px) !important;
	top: clamp(112px, 15vh, 150px) !important;
	width: clamp(250px, 22vw, 318px) !important;
	min-height: 0 !important;
	padding: 48px 16px 16px !important;
	border: 1px solid rgba(255, 255, 255, 0.58) !important;
	border-radius: 18px !important;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(221, 243, 255, 0.46)),
		rgba(232, 247, 255, 0.5) !important;
	box-shadow: 0 12px 32px rgba(20, 66, 120, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
	backdrop-filter: blur(10px) !important;
	color: #1f4568 !important;
}

#CharSelectV4 .charinfo::before {
	color: #1f4568 !important;
	font-size: 16px !important;
	font-weight: 950 !important;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

#CharSelectV4 .charinfo div {
	display: grid !important;
	grid-template-columns: 72px minmax(0, 1fr) !important;
	column-gap: 8px !important;
	align-items: center !important;
	min-height: 22px !important;
	padding: 0 !important;
	border-bottom: 1px solid rgba(69, 130, 188, 0.16) !important;
	color: #1f4568 !important;
	font-size: 12px !important;
	font-weight: 900 !important;
	line-height: 14px !important;
	text-align: left !important;
	text-shadow: none !important;
}

#CharSelectV4 .charinfo div::before {
	width: auto !important;
	margin: 0 !important;
	color: #5d7d96 !important;
	font-size: 10px !important;
	font-weight: 950 !important;
	text-transform: uppercase !important;
}

#CharSelectV4 .charinfo .charinfo-value {
	color: #1f4568 !important;
}

#CharSelectV4 .char_stat_graph {
	border: 1px solid rgba(82, 151, 218, 0.24) !important;
	background: rgba(255, 255, 255, 0.42) !important;
}

#CharSelectV4 .charinfo .btn.ok,
#CharSelectV4 .btn.ok {
	background: linear-gradient(180deg, #86caff, #4b94e6) !important;
	color: #ffffff !important;
	border: 1px solid rgba(52, 132, 208, 0.62) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 10px 22px rgba(62, 132, 211, 0.26) !important;
	text-shadow: 0 1px 3px rgba(24, 74, 128, 0.38) !important;
}

#CharSelectV4 .charinfo .btn.delete,
#CharSelectV4 .charinfo .btn.canceldelete,
#CharSelectV4 .charinfo .btn.finaldelete {
	background: rgba(255, 255, 255, 0.54) !important;
	color: #315b7c !important;
	border: 1px solid rgba(82, 151, 218, 0.35) !important;
}

#CharSelectV4 .btn.cancel {
	background: rgba(255, 255, 255, 0.72) !important;
	color: #275f8d !important;
	border: 1px solid rgba(255, 255, 255, 0.62) !important;
	box-shadow: 0 8px 18px rgba(20, 66, 120, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

html.rb-mobile-client #CharSelectV4 .char_select_container::before {
	left: 0 !important;
	top: 16px !important;
	padding-left: 62px !important;
	font-size: clamp(18px, 4vh, 25px) !important;
	line-height: 30px !important;
}

html.rb-mobile-client #CharSelectV4 .char_select_container::after {
	left: 26px !important;
	top: 18px !important;
	width: 26px !important;
	height: 26px !important;
	border-width: 4px !important;
}

html.rb-mobile-client #CharSelectV4 .char_list {
	left: 14px !important;
	top: 60px !important;
	bottom: 10px !important;
	width: clamp(184px, 25vw, 226px) !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected {
	height: 58px !important;
	min-height: 58px !important;
	padding: 7px 8px 7px 66px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character canvas,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected canvas {
	left: 7px !important;
	top: 7px !important;
	width: 44px !important;
	height: 44px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas .name,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected .name {
	left: 66px !important;
	top: 10px !important;
	font-size: 12px !important;
	line-height: 14px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas .char_level,
html.rb-mobile-client #CharSelectV4 .char_canvas .job_name {
	top: 28px !important;
	font-size: 8px !important;
	line-height: 9px !important;
}

html.rb-mobile-client #CharSelectV4 .character_stage {
	left: calc(50% + 8px) !important;
	top: 58px !important;
	bottom: 42px !important;
	width: min(236px, calc(var(--rb-game-w, 100vw) - clamp(184px, 25vw, 226px) - 205px - 54px)) !important;
	min-width: 150px !important;
}

html.rb-mobile-client #CharSelectV4 .selected_name {
	font-size: 18px !important;
	line-height: 20px !important;
}

html.rb-mobile-client #CharSelectV4 .selected_levels {
	font-size: 10px !important;
	line-height: 12px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo {
	right: 10px !important;
	top: 60px !important;
	width: 190px !important;
	padding: 34px 10px 9px !important;
	border-radius: 14px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo::before {
	top: 11px !important;
	left: 10px !important;
	font-size: 12px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo div {
	grid-template-columns: 48px minmax(0, 1fr) !important;
	min-height: 13px !important;
	font-size: 8px !important;
	line-height: 10px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo div::before {
	font-size: 8px !important;
	line-height: 10px !important;
}

/* v1.5.427 final mobile guard: override the legacy block immediately above. */
html.rb-mobile-client #CharSelectV4 .char_select_container::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_select_container::before {
	left: 62px !important;
	top: 24px !important;
	padding-left: 0 !important;
	content: 'Select Character' !important;
	font-size: 21px !important;
	line-height: 32px !important;
}

html.rb-mobile-client #CharSelectV4 .char_select_container::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_select_container::after {
	display: none !important;
	content: none !important;
}

html.rb-mobile-client #CharSelectV4 .char_list,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_list {
	left: 66px !important;
	top: 78px !important;
	bottom: auto !important;
	width: 244px !important;
	max-width: calc(44vw - 18px) !important;
	gap: 18px !important;
	overflow: visible !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.hidden-slot,
html.rb-mobile-client #CharSelectV4 .char_canvas.has-character:not(.selected),
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.hidden-slot,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character:not(.selected) {
	display: none !important;
	visibility: hidden !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected {
	display: block !important;
	width: 236px !important;
	height: 72px !important;
	min-height: 72px !important;
	padding: 7px 12px 7px 76px !important;
	background: linear-gradient(90deg, rgba(35, 43, 44, 0.62), rgba(35, 43, 44, 0.34) 72%, rgba(35, 43, 44, 0)) !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected::before {
	width: 70px !important;
	height: 70px !important;
	border: 4px solid rgba(255, 232, 207, 0.96) !important;
	border-radius: 50% !important;
	background: rgba(76, 112, 152, 0.72) !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected canvas,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected canvas {
	left: 5px !important;
	top: 5px !important;
	width: 60px !important;
	height: 60px !important;
	border-radius: 50% !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected .name,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected .name {
	left: auto !important;
	top: auto !important;
	width: 150px !important;
	height: 24px !important;
	margin: 5px 0 0 !important;
	font-size: 17px !important;
	line-height: 24px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected .char_level,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected .char_level {
	left: auto !important;
	top: auto !important;
	width: 150px !important;
	height: 20px !important;
	margin: 2px 0 0 !important;
	font-size: 15px !important;
	line-height: 20px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.has-character.selected .job_name,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.has-character.selected .job_name {
	display: none !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.create-slot,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.create-slot {
	display: block !important;
	width: 58px !important;
	height: 58px !important;
	min-height: 58px !important;
	margin: 4px 0 0 18px !important;
}

html.rb-mobile-client #CharSelectV4 .character_stage,
html.rb-mobile-live-layout-preview #CharSelectV4 .character_stage {
	left: 50% !important;
	top: 50% !important;
	bottom: auto !important;
	width: min(340px, 38vw) !important;
	min-width: 210px !important;
	height: calc(100% - 86px) !important;
	min-height: 260px !important;
	transform: translate(-50%, -46%) !important;
}

html.rb-mobile-client #CharSelectV4 .selected_name,
html.rb-mobile-client #CharSelectV4 .selected_levels,
html.rb-mobile-live-layout-preview #CharSelectV4 .selected_name,
html.rb-mobile-live-layout-preview #CharSelectV4 .selected_levels {
	display: none !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo {
	position: static !important;
	width: auto !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	pointer-events: none !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo::before,
html.rb-mobile-client #CharSelectV4 .charinfo div,
html.rb-mobile-client #CharSelectV4 .char_stat_graph,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo div,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_stat_graph {
	display: none !important;
	visibility: hidden !important;
}

html.rb-mobile-client #CharSelectV4 .btn.cancel,
html.rb-mobile-live-layout-preview #CharSelectV4 .btn.cancel {
	left: auto !important;
	right: 24px !important;
	top: 20px !important;
	width: 42px !important;
	height: 42px !important;
	border-radius: 50% !important;
	background: rgba(19, 48, 76, 0.34) !important;
	color: transparent !important;
	text-indent: -9999px !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.ok,
html.rb-mobile-client #CharSelectV4 .btn.ok,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.ok,
html.rb-mobile-live-layout-preview #CharSelectV4 .btn.ok {
	right: 70px !important;
	bottom: 35px !important;
	width: 190px !important;
	height: 54px !important;
	border-radius: 22px !important;
	background: linear-gradient(180deg, #7781f0, #6573df) !important;
	font-size: 18px !important;
	line-height: 19px !important;
	white-space: normal !important;
	pointer-events: auto !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.delete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.canceldelete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.finaldelete {
	bottom: 36px !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	color: transparent !important;
	text-indent: -9999px !important;
	pointer-events: auto !important;
}

/* v1.5.431: true EOF mobile-only character select rebuild. Keep this after legacy mobile overrides. */
html.rb-mobile-client #CharSelectV4 .char_list,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_list {
	display: flex !important;
	position: absolute !important;
	left: 64px !important;
	top: 82px !important;
	width: 258px !important;
	max-width: 258px !important;
	height: 190px !important;
	max-height: 190px !important;
	padding: 0 !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	gap: 8px !important;
	overflow: hidden !important;
	z-index: 7 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character {
	display: block !important;
	visibility: visible !important;
	position: relative !important;
	flex: 0 0 52px !important;
	box-sizing: border-box !important;
	width: 226px !important;
	height: 52px !important;
	min-height: 52px !important;
	margin: 0 !important;
	padding: 7px 10px 7px 58px !important;
	border: 1px solid rgba(255, 255, 255, 0.24) !important;
	border-radius: 14px !important;
	background: linear-gradient(90deg, rgba(28, 30, 28, 0.45), rgba(28, 30, 28, 0.18) 76%, rgba(28, 30, 28, 0)) !important;
	box-shadow: none !important;
	backdrop-filter: blur(4px) !important;
	opacity: 0.84 !important;
	overflow: visible !important;
	pointer-events: auto !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected {
	width: 242px !important;
	height: 58px !important;
	min-height: 58px !important;
	padding: 8px 10px 8px 66px !important;
	border: 1px solid rgba(255, 230, 205, 0.58) !important;
	border-radius: 16px !important;
	background: linear-gradient(90deg, rgba(30, 31, 28, 0.58), rgba(30, 31, 28, 0.28) 78%, rgba(30, 31, 28, 0)) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 5px 12px rgba(0, 0, 0, 0.12) !important;
	opacity: 1 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character::before {
	display: block !important;
	position: absolute !important;
	left: 7px !important;
	top: 7px !important;
	box-sizing: border-box !important;
	width: 38px !important;
	height: 38px !important;
	border: 2px solid rgba(255, 232, 207, 0.84) !important;
	border-radius: 50% !important;
	background: rgba(88, 124, 136, 0.5) !important;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.14) !important;
	content: '' !important;
	pointer-events: none !important;
	z-index: 1 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected::before {
	left: 6px !important;
	top: 5px !important;
	width: 48px !important;
	height: 48px !important;
	border-width: 3px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character::after {
	display: none !important;
	content: none !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character canvas,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character canvas {
	display: block !important;
	position: absolute !important;
	left: 9px !important;
	top: 9px !important;
	width: 34px !important;
	height: 34px !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	z-index: 2 !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected canvas,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected canvas {
	left: 9px !important;
	top: 8px !important;
	width: 42px !important;
	height: 42px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character .name,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character .name {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	display: block !important;
	width: 150px !important;
	height: 18px !important;
	margin: 1px 0 0 !important;
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 900 !important;
	line-height: 18px !important;
	text-align: left !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.62) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected .name,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected .name {
	width: 166px !important;
	height: 20px !important;
	margin-top: 2px !important;
	font-size: 14px !important;
	line-height: 20px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character .char_level,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character .char_level {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	display: block !important;
	width: 150px !important;
	height: 14px !important;
	margin: 0 !important;
	color: rgba(255, 255, 255, 0.9) !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	line-height: 14px !important;
	text-align: left !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.54) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected .char_level,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character.selected .char_level {
	width: 166px !important;
	height: 16px !important;
	font-size: 11px !important;
	line-height: 16px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character .job_icon,
html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.has-character .job_name,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character .job_icon,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.has-character .job_name {
	display: none !important;
	visibility: hidden !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.create-slot,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.create-slot {
	display: flex !important;
	visibility: visible !important;
	position: relative !important;
	flex: 0 0 46px !important;
	width: 46px !important;
	height: 46px !important;
	min-height: 46px !important;
	margin: 2px 0 0 20px !important;
	padding: 0 !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	pointer-events: auto !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::before,
html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::after {
	display: block !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: #ffffff !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
	content: '' !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::before {
	width: 34px !important;
	height: 6px !important;
}

html.rb-mobile-client #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_canvas.mobile-page-visible.create-slot::after {
	position: absolute !important;
	left: 20px !important;
	top: 6px !important;
	width: 6px !important;
	height: 34px !important;
}

html.rb-mobile-client #CharSelectV4 .pageinfo,
html.rb-mobile-live-layout-preview #CharSelectV4 .pageinfo,
html.rb-mobile-client #CharSelectV4 .mobile-page,
html.rb-mobile-live-layout-preview #CharSelectV4 .mobile-page {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

html.rb-mobile-client #CharSelectV4.has-mobile-pages .pageinfo,
html.rb-mobile-live-layout-preview #CharSelectV4.has-mobile-pages .pageinfo {
	display: block !important;
	visibility: visible !important;
	position: absolute !important;
	left: 148px !important;
	top: 278px !important;
	width: 54px !important;
	height: 18px !important;
	color: rgba(255, 255, 255, 0.92) !important;
	font-size: 11px !important;
	font-weight: 850 !important;
	line-height: 18px !important;
	text-align: center !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.56) !important;
	z-index: 9 !important;
}

html.rb-mobile-client #CharSelectV4.has-mobile-pages .mobile-page,
html.rb-mobile-live-layout-preview #CharSelectV4.has-mobile-pages .mobile-page {
	display: block !important;
	visibility: visible !important;
	position: absolute !important;
	top: 270px !important;
	width: 34px !important;
	height: 34px !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.36) !important;
	border-radius: 50% !important;
	background: rgba(16, 28, 38, 0.42) !important;
	color: #ffffff !important;
	font-size: 24px !important;
	font-weight: 800 !important;
	line-height: 30px !important;
	text-align: center !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
	pointer-events: auto !important;
	z-index: 9 !important;
}

html.rb-mobile-client #CharSelectV4.has-mobile-pages .mobile-page.prev,
html.rb-mobile-live-layout-preview #CharSelectV4.has-mobile-pages .mobile-page.prev {
	left: 108px !important;
}

html.rb-mobile-client #CharSelectV4.has-mobile-pages .mobile-page.next,
html.rb-mobile-live-layout-preview #CharSelectV4.has-mobile-pages .mobile-page.next {
	left: 206px !important;
}

html.rb-mobile-client #CharSelectV4.has-mobile-pages .mobile-page:disabled,
html.rb-mobile-live-layout-preview #CharSelectV4.has-mobile-pages .mobile-page:disabled {
	opacity: 0.35 !important;
	pointer-events: none !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.delete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.canceldelete,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.finaldelete {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

html.rb-mobile-client #CharSelectV4.has-selected-character:not(.delete-pending) .charinfo .btn.delete,
html.rb-mobile-live-layout-preview #CharSelectV4.has-selected-character:not(.delete-pending) .charinfo .btn.delete {
	display: block !important;
	visibility: visible !important;
	position: absolute !important;
	left: 78px !important;
	right: auto !important;
	top: auto !important;
	bottom: 34px !important;
	width: 40px !important;
	height: 40px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--rb-char-delete-icon) center / 32px 32px no-repeat !important;
	box-shadow: none !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	text-indent: -9999px !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	z-index: 12 !important;
}

html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete::before,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.delete::after,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete::before,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.canceldelete::after,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete::before,
html.rb-mobile-client #CharSelectV4 .charinfo .btn.finaldelete::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.delete::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.delete::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.canceldelete::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.canceldelete::after,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.finaldelete::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .charinfo .btn.finaldelete::after {
	display: none !important;
	content: none !important;
}

html.rb-mobile-client #CharSelectV4.delete-pending .charinfo .btn.canceldelete,
html.rb-mobile-client #CharSelectV4.delete-pending .charinfo .btn.finaldelete,
html.rb-mobile-live-layout-preview #CharSelectV4.delete-pending .charinfo .btn.canceldelete,
html.rb-mobile-live-layout-preview #CharSelectV4.delete-pending .charinfo .btn.finaldelete {
	display: block !important;
	visibility: visible !important;
	position: absolute !important;
	top: auto !important;
	bottom: 38px !important;
	height: 30px !important;
	border: 1px solid rgba(255, 255, 255, 0.34) !important;
	border-radius: 15px !important;
	background: rgba(22, 30, 38, 0.62) !important;
	color: #ffffff !important;
	font-size: 11px !important;
	font-weight: 850 !important;
	line-height: 28px !important;
	text-indent: 0 !important;
	text-align: center !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55) !important;
	pointer-events: auto !important;
	z-index: 12 !important;
}

html.rb-mobile-client #CharSelectV4.delete-pending .charinfo .btn.canceldelete,
html.rb-mobile-live-layout-preview #CharSelectV4.delete-pending .charinfo .btn.canceldelete {
	left: 72px !important;
	width: 90px !important;
}

html.rb-mobile-client #CharSelectV4.delete-pending .charinfo .btn.finaldelete,
html.rb-mobile-live-layout-preview #CharSelectV4.delete-pending .charinfo .btn.finaldelete {
	left: 168px !important;
	width: 92px !important;
}

/* v1.5.432: make character-select title an editable mobile layout element. */
#CharSelectV4 .char_select_title {
	display: none;
}

html.rb-mobile-client #CharSelectV4 .char_select_container::before,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_select_container::before {
	display: none !important;
	content: none !important;
}

html.rb-mobile-client #CharSelectV4 .char_select_title,
html.rb-mobile-live-layout-preview #CharSelectV4 .char_select_title {
	display: block !important;
	position: absolute !important;
	left: 64px !important;
	top: 22px !important;
	width: 220px !important;
	height: 32px !important;
	color: #ffffff !important;
	font-size: 21px !important;
	font-weight: 900 !important;
	line-height: 32px !important;
	text-align: left !important;
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.68) !important;
	z-index: 8 !important;
	pointer-events: none !important;
}

.portrait-create { display:none; }
@media (orientation:portrait) {
 html.rb-mobile-client #CharSelectV4#CharSelectV4 { position:fixed!important; inset:0!important; width:100vw!important; height:100dvh!important; transform:none!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .char_select_container { width:100%!important; height:100%!important; transform:none!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .char_list { display:flex!important; flex-direction:row!important; align-items:stretch!important; gap:10px!important; padding:4px!important; border:0!important; background:none!important; box-shadow:none!important; overflow-x:auto!important; overflow-y:hidden!important; scrollbar-width:none!important; touch-action:pan-x!important; resize:none!important; box-sizing:border-box!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .char_list::-webkit-scrollbar { display:none; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .char_canvas.has-character { position:relative!important; display:block!important; flex:0 0 132px!important; width:132px!important; min-width:132px!important; height:100%!important; min-height:0!important; margin:0!important; padding:0!important; transform:none!important; box-sizing:border-box!important; border:1px solid #dce1f0!important; border-radius:14px!important; background:#faf9f7!important; box-shadow:none!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .char_canvas:not(.has-character) { display:none!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .char_canvas.selected { border:2px solid #7b8cff!important; background:#eef0ff!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .char_canvas::before, html.rb-mobile-client #CharSelectV4#CharSelectV4 .char_canvas::after { display:none!important; content:none!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .char_canvas canvas { position:absolute!important; left:8px!important; top:8px!important; width:36px!important; height:36px!important; min-width:0!important; min-height:0!important; transform:none!important; border-radius:50%!important; background:#e3e9f3!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .char_canvas :is(.name,.char_level,.job_name) { position:absolute!important; display:block!important; opacity:1!important; visibility:visible!important; height:18px!important; width:auto!important; min-width:0!important; left:8px!important; right:8px!important; margin:0!important; text-align:left!important; transform:none!important; color:#626e94!important; text-shadow:none!important; font:600 11px/18px 'Segoe UI',sans-serif!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .char_canvas .name { top:48px!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .char_canvas .char_level { top:9px!important; left:49px!important; font-size:10px!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .char_canvas .job_name { top:68px!important; font-weight:400!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .character_stage { display:block!important; visibility:visible!important; opacity:1!important; background:none!important; overflow:visible!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .selected_canvas { position:absolute!important; left:0!important; top:0!important; width:100%!important; height:78%!important; min-width:0!important; min-height:0!important; transform:none!important; object-fit:contain; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 :is(.selected_name,.selected_levels,.selected_job) { position:absolute!important; display:block!important; visibility:visible!important; opacity:1!important; left:0!important; width:100%!important; height:auto!important; margin:0!important; padding:0!important; transform:none!important; background:none!important; border:0!important; border-radius:0!important; color:white!important; text-shadow:0 2px 4px #172a43!important; text-align:center!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .selected_name { top:79%!important; font:700 22px/28px 'Segoe UI',sans-serif!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .selected_levels { top:89%!important; font:600 13px/20px 'Segoe UI',sans-serif!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .selected_job { top:97%!important; font:500 13px/20px 'Segoe UI',sans-serif!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .charinfo { position:static!important; background:none!important; border:0!important; box-shadow:none!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .charinfo > :not(button), html.rb-mobile-client #CharSelectV4#CharSelectV4 :is(.pageinfo,.mobile-page,.job_icon,.ro-custom-scrollbar) { display:none!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .btn.ok { background:#657ade!important; border:2px solid #8999ef!important; border-radius:24px!important; font:700 19px 'Segoe UI',sans-serif!important; color:white!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .portrait-create, html.rb-mobile-client #CharSelectV4#CharSelectV4 .charinfo .btn.delete { position:absolute!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:8px!important; padding:0!important; border:0!important; border-radius:12px!important; background:rgba(32,48,67,.6)!important; box-shadow:none!important; font:600 13px 'Segoe UI',sans-serif!important; text-indent:0!important; color:white!important; transform:none!important; pointer-events:auto!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .portrait-create { left:5%!important; top:79%!important; width:40%!important; height:7%!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .charinfo .btn.delete { font-size:0!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .charinfo .btn.delete::before { display:block!important; content:''!important; position:static!important; width:22px!important; height:22px!important; background:white!important; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M4 6h16M9 6V3h6v3M6 6l1 15h10l1-15M10 10v7M14 10v7'/%3E%3C/svg%3E") center/contain no-repeat; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .charinfo .btn.delete::after { display:block!important; content:'Delete'!important; position:static!important; width:auto!important; height:auto!important; background:none!important; font:600 13px 'Segoe UI',sans-serif!important; color:white!important; transform:none!important; }
}
@media (orientation:portrait) {
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .charinfo .btn.delete::after { border:0!important; box-shadow:none!important; padding:0!important; margin:0!important; clip-path:none!important; text-decoration:none!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .charinfo .btn.delete::before { border:0!important; box-shadow:none!important; padding:0!important; margin:0!important; transform:none!important; }
}
@media (orientation:portrait) {
 html.rb-mobile-client #CharSelectV4#CharSelectV4 :is(.selected_name,.selected_levels,.selected_job) { max-width:none!important; min-width:0!important; right:auto!important; bottom:auto!important; box-sizing:border-box!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 :is(.selected_levels,.selected_job) { font:600 16px/22px 'Segoe UI',sans-serif!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .character_stage::before { display:none!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .selected_canvas { filter:none!important; }
}
@media (orientation:portrait) {
 /* Match creation: a tight alpha shadow follows the sprite, not a detached floor ellipse. */
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .selected_canvas { filter:drop-shadow(0 2px 3px rgba(0,0,0,.32))!important; }
}
html body #CharSelectV4#CharSelectV4 .btn.cancel { background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; min-width:44px!important; min-height:44px!important; font-size:0!important; touch-action:manipulation; }
html body #CharSelectV4#CharSelectV4 .btn.cancel::before, html body #CharSelectV4#CharSelectV4 .btn.cancel::after { content:''!important; display:block!important; position:absolute!important; left:50%!important; top:50%!important; width:25px!important; height:3px!important; border:0!important; border-radius:2px!important; background:white!important; transform-origin:center!important; }
html body #CharSelectV4#CharSelectV4 .btn.cancel::before { transform:translate(-50%,-50%) rotate(45deg)!important; }
html body #CharSelectV4#CharSelectV4 .btn.cancel::after { transform:translate(-50%,-50%) rotate(-45deg)!important; }
@media (orientation:portrait) {
 html.rb-mobile-client #CharSelectV4#CharSelectV4.delete-pending .btn.ok,
 html.rb-mobile-client #CharSelectV4#CharSelectV4.delete-pending .portrait-create { display:none!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4.delete-pending .charinfo :is(.btn.canceldelete,.btn.finaldelete) { position:absolute!important; top:88%!important; bottom:auto!important; width:43%!important; height:8%!important; min-height:44px!important; padding:0 8px!important; box-sizing:border-box!important; border:1px solid #9ba9ef!important; border-radius:20px!important; background:#657ade!important; color:white!important; font:600 14px/1.3 'Segoe UI',sans-serif!important; text-indent:0!important; transform:none!important; white-space:normal!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4.delete-pending .charinfo .btn.canceldelete { left:5%!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4.delete-pending .charinfo .btn.finaldelete { left:52%!important; }
}
@media (orientation:landscape) {
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .char_list { display:flex!important; flex-direction:column!important; gap:8px!important; padding:4px!important; background:none!important; border:0!important; overflow-y:auto!important; overflow-x:hidden!important; scrollbar-width:none!important; touch-action:pan-y; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .char_canvas.has-character { position:relative!important; display:block!important; width:100%!important; height:68px!important; min-height:68px!important; flex:0 0 68px!important; margin:0!important; padding:0!important; box-sizing:border-box!important; background:#faf9f7!important; border:1px solid #dce1f0!important; border-radius:12px!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .char_canvas.selected { background:#eef0ff!important; border:2px solid #8999ef!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .char_canvas:not(.has-character), html.rb-mobile-client #CharSelectV4#CharSelectV4 :is(.pageinfo,.mobile-page,.job_icon,.ro-custom-scrollbar) { display:none!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .char_canvas::before, html.rb-mobile-client #CharSelectV4#CharSelectV4 .char_canvas::after { display:none!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .char_canvas canvas { position:absolute!important; left:8px!important; top:12px!important; width:42px!important; height:42px!important; transform:none!important; background:#e3e9f3!important; border-radius:50%!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .char_canvas :is(.name,.char_level,.job_name) { display:block!important; position:absolute!important; left:60px!important; right:5px!important; width:auto!important; height:18px!important; margin:0!important; transform:none!important; color:#626e94!important; text-shadow:none!important; font:600 12px/18px 'Segoe UI',sans-serif!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .char_canvas .name { top:6px!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .char_canvas .char_level { top:25px!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .char_canvas .job_name { top:44px!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .character_stage::before { display:none!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .selected_canvas { position:absolute!important; inset:0!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; transform:none!important; object-fit:contain; filter:none!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 :is(.selected_name,.selected_levels,.selected_job) { position:fixed!important; left:69vw!important; width:27vw!important; max-width:none!important; bottom:auto!important; display:block!important; margin:0!important; padding:0!important; transform:none!important; text-align:center!important; color:white!important; background:none!important; text-shadow:0 2px 3px #234!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .selected_name { top:25vh!important; font:700 22px/28px 'Segoe UI',sans-serif!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .selected_levels { top:34vh!important; font:600 16px/22px 'Segoe UI',sans-serif!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .selected_job { top:42vh!important; font:600 16px/22px 'Segoe UI',sans-serif!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .portrait-create { display:block!important; position:absolute!important; left:69%!important; top:53%!important; width:13%!important; height:13%!important; background:#26394c99!important; border:0!important; border-radius:12px!important; color:white!important; font:600 14px 'Segoe UI',sans-serif!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4.delete-pending :is(.btn.ok,.portrait-create) { display:none!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4.delete-pending .charinfo :is(.canceldelete,.finaldelete) { top:72vh!important; bottom:auto!important; width:13vw!important; height:13vh!important; font-size:12px!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4.delete-pending .charinfo .canceldelete { left:69vw!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4.delete-pending .charinfo .finaldelete { left:83vw!important; }
}
@media (orientation:landscape) {
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .character_stage { display:block!important; visibility:visible!important; opacity:1!important; overflow:visible!important; background:none!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 :is(.selected_name,.selected_levels,.selected_job,.char_canvas .job_name) { opacity:1!important; visibility:visible!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 :is(.selected_name,.selected_levels,.selected_job) { height:auto!important; right:auto!important; border:0!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .btn.delete { display:block!important; opacity:1!important; visibility:visible!important; background:transparent!important; border:0!important; }

}


@media (orientation:landscape) {
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .charinfo { position:static!important; background:none!important; border:0!important; box-shadow:none!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .charinfo .btn.delete { font-size:0!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .charinfo .btn.delete::before { display:block!important; content:''!important; position:static!important; width:22px!important; height:22px!important; background:white!important; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M4 6h16M9 6V3h6v3M6 6l1 15h10l1-15M10 10v7M14 10v7'/%3E%3C/svg%3E") center/contain no-repeat; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .charinfo .btn.delete::after { display:block!important; content:'Delete'!important; position:static!important; width:auto!important; height:auto!important; background:none!important; font:600 13px 'Segoe UI',sans-serif!important; color:white!important; transform:none!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .charinfo .btn.delete::after { border:0!important; box-shadow:none!important; padding:0!important; margin:0!important; clip-path:none!important; text-decoration:none!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .charinfo .btn.delete::before { border:0!important; box-shadow:none!important; padding:0!important; margin:0!important; transform:none!important; }
}
@media (orientation:landscape) {
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .charinfo .btn.delete { display:flex!important; align-items:center!important; justify-content:center!important; gap:8px!important; padding:0!important; text-indent:0!important; box-shadow:none!important; }
 html.rb-mobile-client #CharSelectV4#CharSelectV4 .charinfo .btn.delete::after { content:'Delete'!important; display:block!important; }
}

/* Daylight courtyard and desktop character workspace. */

@media(min-width:900px){
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .char_select_container::before,
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .char_select_container::after {display:none!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .char_select_title {display:block!important;position:fixed!important;left:4vw!important;top:26px!important;margin:0!important;font:700 clamp(28px,3vw,42px)/1.2 'Segoe UI',sans-serif!important;color:white!important;text-shadow:0 2px 4px #234!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .btn.cancel {position:fixed!important;left:auto!important;right:24px!important;top:24px!important;}
}
html body #CharSelectV4#CharSelectV4 {background:url('./assets/daylight-courtyard.webp') center/cover no-repeat!important;}
html body #CharSelectV4#CharSelectV4::before,html body #CharSelectV4#CharSelectV4::after,html body #CharSelectV4#CharSelectV4 .char_select_container::after {background:none!important;}
@media(min-width:900px){
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .char_select_container {position:absolute!important;inset:110px 4vw 30px!important;width:auto!important;height:auto!important;max-width:none!important;display:grid!important;grid-template-columns:minmax(250px,1fr) minmax(330px,1.5fr) minmax(280px,1fr)!important;gap:28px!important;align-items:center!important;transform:none!important;background:none!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 :is(.char_list,.character_stage,.charinfo){position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;min-width:0!important;max-width:none!important;margin:0!important;transform:none!important;box-sizing:border-box!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .char_list{grid-column:1!important;grid-row:1!important;height:100%!important;max-height:none!important;padding:18px 8px!important;overflow-y:auto!important;scrollbar-width:none!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .char_canvas{width:100%!important;max-width:100%!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .character_stage{grid-column:2!important;grid-row:1!important;height:100%!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;background:none!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .character_stage::before{display:none!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .selected_canvas{position:static!important;inset:auto!important;left:auto!important;top:auto!important;margin:0!important;width:360px!important;height:443px!important;max-width:100%!important;max-height:62vh!important;min-height:0!important;min-width:0!important;transform:none!important;object-fit:contain!important;filter:drop-shadow(0 5px 4px #26394b55)!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 :is(.selected_name,.selected_levels,.selected_job){position:static!important;inset:auto!important;transform:none!important;width:100%!important;margin:5px 0 0!important;text-align:center!important;color:#213c50!important;text-shadow:0 1px 2px white!important;-webkit-text-stroke:0!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .charinfo{grid-column:3!important;grid-row:1!important;height:auto!important;min-height:0!important;max-height:100%!important;background:#f7fbf5ed!important;color:#24435b!important;}
}

/* Desktop character cards and readable details. */
@media(min-width:900px){
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .char_select_container{grid-template-columns:minmax(190px,1fr) minmax(220px,1.5fr) minmax(240px,1fr)!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .char_list{display:flex!important;flex-direction:column!important;gap:12px!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .char_canvas.has-character{position:relative!important;height:88px!important;min-height:88px!important;flex:0 0 88px!important;border-radius:14px!important;border:1px solid #cddae3!important;background:#f5f9f7ed!important;box-shadow:0 5px 18px #17334824!important;margin:0!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .char_canvas.has-character.selected{border:2px solid #568fa6!important;background:#e9f5f6!important;box-shadow:inset 4px 0 #398399,0 5px 18px #17334824!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .char_canvas.has-character::before,html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .char_canvas.has-character::after{display:none!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .char_canvas.has-character canvas{left:12px!important;top:14px!important;width:56px!important;height:56px!important;border-radius:12px!important;border:1px solid #c4d9e2!important;background:#dcebf0!important;box-shadow:none!important;transform:none!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .char_canvas.has-character :is(.name,.char_level,.job_name){position:absolute!important;left:82px!important;right:10px!important;width:auto!important;transform:none!important;margin:0!important;text-align:left!important;color:#284354!important;text-shadow:none!important;font-family:'Segoe UI',sans-serif!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .char_canvas.has-character .name{top:13px!important;font-size:16px!important;font-weight:700!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .char_canvas.has-character .char_level{top:36px!important;font-size:12px!important;font-weight:600!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .char_canvas.has-character .job_name{top:55px!important;font-size:12px!important;font-weight:400!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .charinfo{border:1px solid #d3dfe3!important;border-radius:18px!important;padding:64px 24px 24px!important;background:#f7faf8f5!important;box-shadow:0 12px 35px #1733482b!important;font-family:'Segoe UI',sans-serif!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .charinfo::before{font:700 20px/28px 'Segoe UI',sans-serif!important;color:#284354!important;text-shadow:none!important;margin-bottom:16px!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .charinfo > :is(.job,.lvl,.exp,.hp,.sp,.map){min-height:30px!important;font:600 14px/30px 'Segoe UI',sans-serif!important;color:#284354!important;text-shadow:none!important;border-bottom:1px solid #dce5e8!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .charinfo > :is(.job,.lvl,.exp,.hp,.sp,.map)::before{font:600 11px/30px 'Segoe UI',sans-serif!important;color:#6b808b!important;text-shadow:none!important;letter-spacing:.6px!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .char_stat_graph{background:#eaf1f1!important;border:0!important;border-radius:12px!important;margin:16px 0!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .charinfo .btn{border-radius:10px!important;box-shadow:none!important;font:600 14px 'Segoe UI',sans-serif!important;text-shadow:none!important;min-height:40px!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .charinfo .btn.ok{background:#367d92!important;border:1px solid #367d92!important;color:white!important;min-height:46px!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .charinfo .btn.delete{background:transparent!important;border:1px solid #d2dde2!important;color:#697b87!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .charinfo .mobile-page{position:absolute!important;top:20px!important;left:auto!important;bottom:auto!important;right:24px!important;display:inline-flex!important;width:30px!important;height:30px!important;align-items:center!important;justify-content:center!important;border:1px solid #cad9df!important;border-radius:8px!important;background:#edf3f4!important;color:#345469!important;font-size:22px!important;margin:0!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #CharSelectV4#CharSelectV4 .charinfo .mobile-page.prev{right:60px!important;}
}

.desktop-create,.desktop-stat-values {display:none;}
@media(min-width:900px){
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .char_list {
	flex-wrap:nowrap!important;
	align-items:stretch!important;
	align-content:flex-start!important;
	justify-content:flex-start!important;
	overflow-x:clip!important;
	touch-action:pan-y!important;
}
}
@media(min-width:900px) and (max-height:740px){
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .charinfo .character-radar {height:80px!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .charinfo .desktop-stat-values {padding:4px 10px!important;margin:4px 0!important;}
}
@media(min-width:900px){
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .char_select_container {grid-template-rows:minmax(0,1fr)!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .char_list {min-height:0!important;max-height:100%!important;overflow-x:hidden!important;overscroll-behavior:contain;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .charinfo .desktop-create {order:20!important;margin:8px 0 0!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .charinfo .btn.ok {order:19!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .charinfo :is(.btn.delete,.btn.canceldelete,.btn.finaldelete) {order:21!important;}
}
.selection-orbit {display:none;pointer-events:none;}
@keyframes character-border-trail {to {stroke-dashoffset:-100;}}
html body #CharSelectV4.desktop-character-screen .char_canvas.selected .selection-orbit {display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.selection-orbit rect {width:calc(100% - 4px);height:calc(100% - 4px);fill:none;stroke:#a0c8ff;stroke-width:2.5px;stroke-dasharray:12 38;animation:character-border-trail 4s linear infinite;}
.desktop-create:disabled {opacity:.45;cursor:default;}
.character-exp-track {display:none;}
@media(prefers-reduced-motion:reduce){.selection-orbit rect {animation:none;stroke-dasharray:none;}}
@media(min-width:900px) and (max-width:1100px){
 html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .char_select_container {grid-template-columns:240px minmax(190px,1fr) 280px!important;gap:20px!important;}
 html body #charcreate_v4#charcreate_v4#charcreate_v4.desktop-character-screen .modern-creator-layout {left:4vw!important;width:40vw!important;}
 html body #charcreate_v4#charcreate_v4#charcreate_v4.desktop-character-screen #style {left:50%!important;width:46vw!important;}
}
@media(min-width:900px){
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .char_select_container{inset:110px max(4vw,calc((100vw - 1340px)/2)) 40px!important;grid-template-columns:300px minmax(280px,1fr) 340px!important;gap:32px!important;overflow:visible!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .char_list{display:flex!important;flex-direction:column!important;gap:12px!important;padding:0!important;height:auto!important;align-self:center!important;overflow:auto!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .char_canvas:not(.has-character){display:none!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .char_canvas.has-character{height:88px!important;min-height:88px!important;flex:0 0 88px!important;width:100%!important;margin:0!important;border-radius:14px!important;background:#f6f8fced!important;border:1px solid #d4deee!important;box-shadow:0 4px 16px #18334b20!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .char_canvas.selected{background:#e9edff!important;border:2px solid #8193e6!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .char_canvas::before{display:none!important;content:none!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .char_canvas::after{display:none!important;content:none!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .char_canvas canvas{left:12px!important;top:14px!important;width:56px!important;height:56px!important;border-radius:12px!important;background:#e5eaf4!important;border:0!important;box-shadow:none!important;transform:none!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .char_canvas :is(.name,.char_level,.job_name){position:absolute!important;left:80px!important;right:10px!important;width:auto!important;transform:none!important;text-align:left!important;color:#33465f!important;text-shadow:none!important;font-family:Segoe UI,sans-serif!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .char_canvas .name{top:12px!important;font-size:16px!important;font-weight:700!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .char_canvas .char_level{top:36px!important;font-size:12px!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .char_canvas .job_name{top:55px!important;font-size:12px!important;font-weight:400!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .desktop-create{display:block!important;position:static!important;width:100%!important;height:44px!important;flex:0 0 44px!important;border:1px solid #8294e4!important;border-radius:12px!important;background:#657ade!important;color:white!important;font:600 15px Segoe UI,sans-serif!important;cursor:pointer!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .character_stage{justify-content:center!important;gap:0!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .selected_canvas{margin-bottom:-12px!important;height:auto!important;aspect-ratio:13/16!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .selected_name{font:700 30px/36px Segoe UI,sans-serif!important;margin-top:4px!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .selected_levels{font:600 14px/20px Segoe UI,sans-serif!important;margin-top:2px!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .selected_job{font:400 13px/18px Segoe UI,sans-serif!important;margin-top:2px!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .charinfo{padding:62px 22px 22px!important;border-radius:16px!important;background:#f7f9fbed!important;height:auto!important;max-height:100%!important;box-shadow:0 8px 24px #18334b20!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .charinfo .mobile-page{display:none!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .charinfo .pageinfo{display:none!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .char_stat_graph{display:none!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .charinfo > :is(.str,.agi,.vit,.int,.dex,.luk){display:none!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .desktop-stat-values{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important;margin:16px 0!important;order:8!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .desktop-stat-values > div{display:flex!important;justify-content:space-between!important;align-items:center!important;padding:12px 8px!important;background:#eaf0f8!important;border-radius:8px!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .desktop-stat-values span{font:600 11px Segoe UI,sans-serif!important;color:#66758b!important;text-shadow:none!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .desktop-stat-values strong{font:700 16px Segoe UI,sans-serif!important;color:#33465f!important;text-shadow:none!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .charinfo .btn.ok{background:#657ade!important;border:1px solid #8294e4!important;box-shadow:none!important;color:white!important;font:600 16px Segoe UI,sans-serif!important;border-radius:12px!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .charinfo .btn.delete{background:transparent!important;color:#68758c!important;border:1px solid #cfd9e8!important;box-shadow:none!important;border-radius:10px!important;}
html body #charcreate_v4#charcreate_v4#charcreate_v4.desktop-character-screen .modern-creator-layout{left:calc(50% - 490px)!important;top:50%!important;bottom:auto!important;width:420px!important;height:auto!important;transform:translateY(-45%)!important;display:block!important;}
html body #charcreate_v4#charcreate_v4#charcreate_v4.desktop-character-screen .modern-identity{padding:24px!important;min-height:0!important;height:auto!important;border-radius:16px!important;background:#f7f9fbed!important;box-shadow:0 8px 24px #18334b20!important;}
html body #charcreate_v4#charcreate_v4#charcreate_v4.desktop-character-screen #style{left:calc(50% + 20px)!important;top:50%!important;width:440px!important;height:470px!important;transform:translateY(-50%)!important;display:flex!important;flex-direction:column!important;align-items:center!important;}
html body #charcreate_v4#charcreate_v4#charcreate_v4.desktop-character-screen .model{position:relative!important;inset:auto!important;width:100%!important;height:400px!important;min-height:400px!important;transform:none!important;}
html body #charcreate_v4#charcreate_v4#charcreate_v4.desktop-character-screen .model canvas{position:absolute!important;left:50%!important;top:0!important;bottom:auto!important;width:320px!important;height:400px!important;max-height:none!important;transform:translateX(-50%)!important;}
html body #charcreate_v4#charcreate_v4#charcreate_v4.desktop-character-screen .modern-character-name{position:static!important;inset:auto!important;transform:none!important;margin:0!important;width:100%!important;font:700 30px/38px Segoe UI,sans-serif!important;color:#33465f!important;text-align:center!important;}
html body #charcreate_v4#charcreate_v4#charcreate_v4.desktop-character-screen .modern-character-subtitle{position:static!important;inset:auto!important;transform:none!important;margin:4px 0 0!important;width:100%!important;font:600 14px/20px Segoe UI,sans-serif!important;color:#33465f!important;text-align:center!important;}
html body #charcreate_v4#charcreate_v4#charcreate_v4.desktop-character-screen .btns{left:calc(50% + 20px)!important;right:auto!important;bottom:7%!important;width:440px!important;display:flex!important;justify-content:center!important;gap:12px!important;}
html body #charcreate_v4#charcreate_v4#charcreate_v4.desktop-character-screen .btns .btn{position:static!important;background:#657ade!important;border:1px solid #8294e4!important;border-radius:12px!important;color:white!important;box-shadow:none!important;font:600 15px Segoe UI,sans-serif!important;height:44px!important;}
html body #charcreate_v4#charcreate_v4#charcreate_v4.desktop-character-screen .modern-gender-option.selected{background:#657ade!important;border:1px solid #8294e4!important;color:white!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .desktop-stat-values {display:block!important;flex-shrink:0!important;height:auto!important;min-height:0!important;max-height:none!important;width:100%!important;box-sizing:border-box!important;overflow:visible!important;margin:10px 0!important;padding:10px!important;background:#edf2f8!important;border-radius:12px!important;border:1px solid #dce4ee!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .desktop-stat-values .stat-heading {display:block!important;padding:0!important;background:none!important;font:600 13px/20px Georgia,serif!important;color:#304b70!important;}
.character-radar {display:block;width:100%;height:170px;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .charinfo {max-height:none!important;padding-top:52px!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .charinfo > :is(.job,.lvl,.hp,.sp,.map) {min-height:26px!important;line-height:26px!important;}
html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .charinfo .exp {position:relative!important;min-height:50px!important;padding-bottom:18px!important;box-sizing:border-box!important;font-size:12px!important;}
html body #CharSelectV4.desktop-character-screen .character-exp-track {display:block;position:absolute;left:80px;right:34px;bottom:8px;height:4px;border-radius:3px;background:#d4dae2;overflow:hidden;}
.character-exp-track > span {display:block;height:100%;background:#73a8e2;border-radius:3px;}
.character-exp-percent {position:absolute;right:0;bottom:1px;font:10px/18px Segoe UI,sans-serif;color:#627592;}
}
@media(min-width:900px) and (max-width:1100px){
 html body #CharSelectV4#CharSelectV4#CharSelectV4.desktop-character-screen .char_select_container {grid-template-columns:240px minmax(190px,1fr) 280px!important;gap:20px!important;}
 html body #charcreate_v4#charcreate_v4#charcreate_v4.desktop-character-screen .modern-creator-layout {left:4vw!important;width:40vw!important;}
 html body #charcreate_v4#charcreate_v4#charcreate_v4.desktop-character-screen #style {left:50%!important;width:46vw!important;}
 html body #charcreate_v4#charcreate_v4#charcreate_v4.desktop-character-screen .btns {left:50%!important;width:46vw!important;}
}

#login-dialog:not(.selecting){position:fixed!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;overflow:visible!important;max-width:calc(100vw - 20px)!important;max-height:none!important;border-radius:0!important;box-shadow:none!important}
#login-dialog #WinLogin{position:relative!important}#login-dialog #login-status{position:absolute;top:100%;left:0;right:0;margin:8px 0;padding:8px;border-radius:8px;background:#eff7ffed;font:12px Segoe UI;color:#23466a}#login-status:empty{display:none}
#login-dialog.selecting{position:fixed!important;inset:0!important;margin:0!important;transform:none!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;padding:0!important;border:0!important;border-radius:0!important;overflow:hidden!important}
#login-dialog.selecting>#WinLogin{display:none!important}#login-dialog.selecting #login-status{z-index:50;top:auto;bottom:0;width:max-content;max-width:90vw;margin:auto}
#character-screen{position:static!important;padding:0!important;width:100%!important;height:100%!important;background:none!important}#CharSelectV4{position:fixed!important;inset:0!important;transform:none!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important}
#login-entrance{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;padding:0;background:transparent;overflow:hidden}#login-entrance::backdrop{background:url('/ui/courtyard.webp') center/cover}

#charcreate_v4 {
	position: absolute;
	width: 794px;
	height: 422px;
}

#charcreate_v4 .title {
	position: absolute;
	left: 45px;
	top: 15px;
	height: 20px;
	width: 200px;
}

#charcreate_v4 .human::before,
.doram::before,
.human::after,
.doram::after {
	content: '';
	display: table;
}
#charcreate_v4 .human::after,
.doram::after {
	clear: both;
}
#charcreate_v4 .race {
	display: none;
}

/** Name
#charcreate_v4 input { position:absolute; top:244px; left:62px; width: 97px; height:14px; padding-top:2px; padding-left:3px; background-color:transparent; border:0; }
**/

/** Human Race **/
#charcreate_v4 .human_label {
	position: absolute;
	width: 370px;
	height: 170px;
	top: 35px;
	left: 20px;
	outline: none;
	background-repeat: no-repeat;
}
#charcreate_v4 .human_title {
	position: absolute;
	color: white;
	top: 22px;
	left: 45px;
	height: 20px;
	width: 50px;
}
#charcreate_v4 .human_desc {
	position: relative;
	top: 22px;
	left: 110px;
	height: 60px;
	width: 220px;
}
/** Human Chargen **/
.human .chargen canvas {
	position: absolute;
	top: 40px;
	left: 25px;
}

/** Doram Race **/
#charcreate_v4 .doram_label {
	position: absolute;
	width: 370px;
	height: 170px;
	top: 210px;
	left: 20px;
	outline: none;
	background-repeat: no-repeat;
}
#charcreate_v4 .doram_title {
	position: absolute;
	color: white;
	top: 22px;
	left: 45px;
	height: 20px;
	width: 50px;
}
#charcreate_v4 .doram_desc {
	position: relative;
	top: 22px;
	left: 110px;
	height: 60px;
	width: 220px;
}
/** Doram Chargen **/
.doram .chargen_doram canvas {
	position: absolute;
	top: 40px;
	left: 25px;
}

/* Style */
#charcreate_v4 #style {
	position: relative;
	left: 395px;
	top: 30px;
	width: 200px;
	height: 270px;
}
#charcreate_v4 .gender_button {
	display: none;
}

#charcreate_v4 #style .gender {
	position: absolute;
	top: 25px;
	left: 40px;
	height: 26px;
	width: 130px;
}
#charcreate_v4 #male_container {
	position: relative;
	height: 25px;
	width: 62px;
	white-space: nowrap;
}
#charcreate_v4 #female_container {
	position: relative;
	left: 61px;
	top: -25px;
	height: 25px;
	width: 62px;
	white-space: nowrap;
}

#charcreate_v4 #style .male_button {
	position: absolute;
	height: 25px;
	width: 62px;
}
#charcreate_v4 #style .female_button {
	position: absolute;
	height: 25px;
	width: 62px;
}

/** Style Model **/
#charcreate_v4 .model {
	position: relative;
	top: 115px;
	left: 55px;
	width: 100px;
}
#charcreate_v4 .model canvas {
	position: relative;
	top: -5px;
	left: 17px;
}

/** Buttons **/
#charcreate_v4 #style .rot_left {
	position: relative;
	top: 40px;
	left: 30px;
	height: 23px;
	width: 22px;
	border-width: 0px;
}
#charcreate_v4 #style .rot_right {
	position: relative;
	top: 40px;
	left: 130px;
	height: 23px;
	width: 22px;
	border-width: 0px;
}

/** Char Name **/
#charcreate_v4 #char_name {
	position: relative;
	height: 20px;
	width: 140px;
	top: 115px;
	left: -20px;
	border-width: 0px;
}

/** Hair Settings **/
#charcreate_v4 #hair_setting {
	position: absolute;
	top: 35px;
	left: 600px;
	height: 380px;
	width: 185px;
}

#charcreate_v4 .hair_style_title {
	position: relative;
	height: 15px;
	width: 60px;
	top: 10px;
	left: 10px;
}

#charcreate_v4 .hairstyle_row {
	position: relative;
	display: flex;
	top: 10px;
	left: 10px;
}
#charcreate_v4 .styleCol {
	position: relative;
	width: 36px;
	height: 37px;
	white-space: nowrap;
}

#charcreate_v4 .hstyle {
	display: none;
}
#charcreate_v4 .hstyle_button {
	position: absolute;
	width: 36px;
	height: 37px;
}
#charcreate_v4 .hair-styles {
	position: relative; /* Make the container a positioning context */
	width: 100px; /* Adjust the width as needed */
	height: 100px; /* Adjust the height as needed */
}
#charcreate_v4 .hair-style {
	position: absolute;
	height: 225px;
	top: 12px;
	left: -2px;
	display: none;
}

#charcreate_v4 .hair_color_title {
	position: relative;
	height: 20px;
	width: 60px;
	top: 230px;
	left: 10px;
}

#charcreate_v4 .hair_colors {
	position: absolute;
	top: 265px;
	left: 15px;
}
#charcreate_v4 .haircolor_row {
	position: relative;
	display: flex;
}
#charcreate_v4 .colorCol {
	position: relative;
	width: 22px;
	height: 22px;
	white-space: nowrap;
	margin: 2px 2px;
}
#charcreate_v4 .hcolor {
	display: none;
}
#charcreate_v4 .hcolor_button {
	position: absolute;
	width: 22px;
	height: 22px;
}

#charcreate_v4 .btns {
	position: absolute;
	bottom: 4px;
	width: 100%;
	height: 20px;
}
#charcreate_v4 .btn {
	position: absolute;
	border: 0;
	width: 42px;
	height: 20px;
	background-repeat: no-repeat;
	background-color: transparent;
}
#charcreate_v4 .make {
	right: 25px;
	top: -20px;
	height: 27px;
	width: 152px;
}
#charcreate_v4 .cancel {
	right: -15px;
	top: -389px;
}
#charcreate_v4 .return {
	width: 152px;
	height: 27px;
	top: -20px;
	left: 25px;
}

/* Modern character creation pass */
#charcreate_v4 {
	position: fixed !important;
	inset: 0 !important;
	left: 0 !important;
	top: 0 !important;
	width: var(--rb-game-w, 100vw) !important;
	height: var(--rb-game-h, 100vh) !important;
	overflow: hidden;
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	background:
		linear-gradient(180deg, rgba(6, 23, 38, 0.22), rgba(5, 15, 16, 0.62)),
		url("./assets/loading-scene.jpg") center / cover no-repeat !important;
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.72);
	z-index: 90;
}

#charcreate_v4::after {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 58%, rgba(255, 255, 255, 0.16), transparent 22%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.34), transparent 32%, transparent 68%, rgba(0, 0, 0, 0.38)),
		linear-gradient(0deg, rgba(0, 0, 0, 0.56), transparent 35%);
	content: '';
	pointer-events: none;
}

#charcreate_v4 .title {
	position: absolute !important;
	left: clamp(68px, 5.8vw, 112px) !important;
	top: clamp(24px, 4.2vh, 50px) !important;
	z-index: 2;
	width: auto !important;
	height: auto !important;
	color: #ffffff;
	font-size: clamp(26px, 3.1vw, 42px);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1;
}

#charcreate_v4 .modern-back {
	position: absolute;
	left: clamp(28px, 3vw, 58px);
	top: clamp(18px, 3.2vh, 42px);
	z-index: 3;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	cursor: pointer;
}

#charcreate_v4 .modern-back::before,
#charcreate_v4 .modern-back::after {
	position: absolute;
	left: 11px;
	top: 20px;
	width: 31px;
	height: 5px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
	content: '';
	transform-origin: 3px 50%;
}

#charcreate_v4 .modern-back::before {
	transform: rotate(-45deg);
}

#charcreate_v4 .modern-back::after {
	transform: rotate(45deg);
}

#charcreate_v4 .human,
#charcreate_v4 .doram,
#charcreate_v4 #hair_setting,
#charcreate_v4 .info,
#charcreate_v4 .graph {
	display: none !important;
}

#charcreate_v4 #style {
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	z-index: 2;
	width: min(34vw, 520px) !important;
	height: min(68vh, 600px) !important;
	transform: translate(-50%, -38%);
	pointer-events: none;
}

#charcreate_v4 #style .gender,
#charcreate_v4 #style .rot_left,
#charcreate_v4 #style .rot_right {
	display: none !important;
}

#charcreate_v4 .model {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

#charcreate_v4 .model canvas {
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	width: min(26vw, 360px) !important;
	height: min(56vh, 460px) !important;
	transform: translate(-50%, -50%);
	image-rendering: auto;
}

#charcreate_v4 .modern-character-name {
	position: absolute;
	left: 50%;
	bottom: 6vh;
	width: 460px;
	max-width: 44vw;
	color: #ffffff;
	font-size: clamp(26px, 3vw, 42px);
	font-weight: 900;
	line-height: 1.05;
	text-align: center;
	transform: translateX(-50%);
}

#charcreate_v4 .modern-character-subtitle {
	position: absolute;
	left: 50%;
	bottom: 2.7vh;
	width: 460px;
	max-width: 44vw;
	color: rgba(255, 255, 255, 0.9);
	font-size: clamp(13px, 1.25vw, 17px);
	font-weight: 700;
	text-align: center;
	transform: translateX(-50%);
}

#charcreate_v4 .modern-creator-layout {
	position: absolute;
	inset: clamp(86px, 12vh, 128px) clamp(34px, 5vw, 92px) clamp(30px, 5vh, 58px);
	z-index: 3;
	display: grid;
	grid-template-columns: minmax(270px, 420px) minmax(270px, 370px);
	justify-content: space-between;
	align-items: start;
	pointer-events: none;
}

#charcreate_v4 .modern-panel {
	pointer-events: auto;
	border: 1px solid rgba(242, 255, 255, 0.34);
	border-radius: 26px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)),
		rgba(19, 50, 52, 0.36);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.25),
		0 18px 36px rgba(0, 0, 0, 0.24);
	backdrop-filter: blur(10px) saturate(1.1);
}

#charcreate_v4 .modern-identity {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
}

#charcreate_v4 .modern-section-title,
#charcreate_v4 .modern-field-label {
	color: rgba(255, 255, 255, 0.84);
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
}

#charcreate_v4 #char_name {
	position: static !important;
	box-sizing: border-box;
	width: 100% !important;
	height: 42px !important;
	border: 1px solid rgba(255, 255, 255, 0.36) !important;
	border-radius: 999px;
	padding: 0 16px;
	color: #ffffff;
	font-size: 17px;
	font-weight: 700;
	background: rgba(4, 17, 20, 0.42);
	outline: none;
	text-shadow: none;
}

#charcreate_v4 #char_name:focus {
	border-color: rgba(171, 222, 255, 0.82) !important;
	box-shadow: 0 0 0 3px rgba(91, 161, 255, 0.2);
}

#charcreate_v4 .modern-gender-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

#charcreate_v4 .modern-gender-option,
#charcreate_v4 .stat-step,
#charcreate_v4 .btn {
	border: 1px solid rgba(255, 255, 255, 0.38) !important;
	border-radius: 999px;
	color: #ffffff;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)),
		rgba(15, 37, 43, 0.42) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 5px 13px rgba(0, 0, 0, 0.17);
	font-weight: 800;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.54);
	cursor: pointer;
}

#charcreate_v4 .modern-gender-option {
	height: 38px;
	font-size: 14px;
}

#charcreate_v4 .modern-gender-option.selected {
	border-color: rgba(174, 226, 255, 0.88) !important;
	background:
		linear-gradient(180deg, rgba(119, 177, 255, 0.76), rgba(80, 108, 222, 0.72)),
		rgba(42, 88, 140, 0.5) !important;
}

#charcreate_v4 .modern-hair-mount,
#charcreate_v4 .modern-color-mount {
	position: relative;
	min-height: 118px;
	overflow: hidden;
}

#charcreate_v4 .modern-hair-mount .hair_styles,
#charcreate_v4 .modern-color-mount .hair_colors {
	position: static !important;
	width: 100% !important;
	height: auto !important;
}

#charcreate_v4 .modern-hair-mount .hair-style {
	position: static !important;
	height: auto !important;
	max-height: 126px;
	overflow: hidden;
}

#charcreate_v4 .hairstyle_row,
#charcreate_v4 .haircolor_row {
	position: static !important;
	display: flex !important;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 7px;
}

#charcreate_v4 .styleCol,
#charcreate_v4 .colorCol {
	width: 38px !important;
	height: 38px !important;
	margin: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 0.22);
	background-size: cover;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

#charcreate_v4 .colorCol {
	width: 28px !important;
	height: 28px !important;
	border-radius: 50%;
}

#charcreate_v4 .hstyle_button,
#charcreate_v4 .hcolor_button {
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background-size: cover;
	background-position: center;
	cursor: pointer;
}

#charcreate_v4 .modern-stats-panel {
	padding: 20px 22px;
}

#charcreate_v4 .modern-stat-graph {
	display: block;
	width: 220px;
	height: 220px;
	margin: 2px auto 10px;
}

#charcreate_v4 .modern-stat-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 10px;
}

#charcreate_v4 .modern-stat-row {
	display: grid;
	grid-template-columns: 42px 28px 30px 28px;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 8px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.24);
}

#charcreate_v4 .modern-stat-name {
	color: rgba(255, 255, 255, 0.72);
	font-size: 12px;
	font-weight: 900;
}

#charcreate_v4 .modern-stat-value {
	color: #ffffff;
	font-size: 15px;
	text-align: center;
}

#charcreate_v4 .stat-step {
	width: 28px;
	height: 24px;
	padding: 0;
	font-size: 17px;
	line-height: 20px;
}

#charcreate_v4 .btns {
	position: absolute !important;
	right: clamp(36px, 5vw, 94px) !important;
	bottom: clamp(24px, 4vh, 46px) !important;
	z-index: 4;
	display: flex;
	gap: 12px;
	width: auto !important;
	height: auto !important;
}

#charcreate_v4 .btn {
	position: static !important;
	width: auto !important;
	height: 48px !important;
	min-width: 128px;
	padding: 0 24px;
	font-size: 16px;
}

#charcreate_v4 .btn.make {
	min-width: 186px;
	border-color: rgba(181, 214, 255, 0.9) !important;
	background:
		linear-gradient(180deg, #8098ff, #5566dc),
		#6173df !important;
}

#charcreate_v4 .btn.cancel {
	display: none !important;
}

html.rb-mobile-client #charcreate_v4 .title {
	left: 56px !important;
	top: 22px !important;
	font-size: 24px;
}

html.rb-mobile-client #charcreate_v4 .modern-back {
	left: 14px;
	top: 11px;
}

html.rb-mobile-client #charcreate_v4 .modern-creator-layout {
	inset: 66px 18px 18px;
	grid-template-columns: minmax(210px, 0.9fr) minmax(230px, 0.78fr);
	gap: 18px;
}

html.rb-mobile-client #charcreate_v4 .modern-panel {
	border-radius: 18px;
}

html.rb-mobile-client #charcreate_v4 .modern-identity,
html.rb-mobile-client #charcreate_v4 .modern-stats-panel {
	padding: 12px;
	gap: 7px;
}

html.rb-mobile-client #charcreate_v4 #style {
	width: 30vw !important;
	height: 64vh !important;
	transform: translate(-48%, -34%);
}

html.rb-mobile-client #charcreate_v4 .model canvas {
	width: min(25vw, 230px) !important;
	height: min(58vh, 340px) !important;
}

html.rb-mobile-client #charcreate_v4 .modern-character-name {
	bottom: 5vh;
	font-size: 21px;
}

html.rb-mobile-client #charcreate_v4 .modern-character-subtitle {
	bottom: 2.1vh;
	font-size: 12px;
}

html.rb-mobile-client #charcreate_v4 #char_name {
	height: 34px !important;
	font-size: 14px;
}

html.rb-mobile-client #charcreate_v4 .modern-section-title,
html.rb-mobile-client #charcreate_v4 .modern-field-label {
	font-size: 10px;
}

html.rb-mobile-client #charcreate_v4 .modern-gender-option {
	height: 30px;
	font-size: 12px;
}

html.rb-mobile-client #charcreate_v4 .modern-hair-mount {
	min-height: 88px;
}

html.rb-mobile-client #charcreate_v4 .modern-color-mount {
	min-height: 56px;
}

html.rb-mobile-client #charcreate_v4 .modern-hair-mount .hair-style {
	max-height: 84px;
}

html.rb-mobile-client #charcreate_v4 .hairstyle_row,
html.rb-mobile-client #charcreate_v4 .haircolor_row {
	gap: 5px;
	margin-bottom: 5px;
}

html.rb-mobile-client #charcreate_v4 .styleCol {
	width: 27px !important;
	height: 27px !important;
	border-radius: 7px;
}

html.rb-mobile-client #charcreate_v4 .colorCol {
	width: 22px !important;
	height: 22px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-stat-graph {
	width: 132px;
	height: 132px;
	margin-bottom: 6px;
}

html.rb-mobile-client #charcreate_v4 .modern-stat-list {
	gap: 5px;
}

html.rb-mobile-client #charcreate_v4 .modern-stat-row {
	grid-template-columns: 34px 23px 24px 23px;
	gap: 4px;
	height: 28px;
	padding: 0 5px;
}

html.rb-mobile-client #charcreate_v4 .modern-stat-name {
	font-size: 10px;
}

html.rb-mobile-client #charcreate_v4 .modern-stat-value {
	font-size: 12px;
}

html.rb-mobile-client #charcreate_v4 .stat-step {
	width: 23px;
	height: 21px;
	font-size: 14px;
}

html.rb-mobile-client #charcreate_v4 .btns {
	right: 20px !important;
	bottom: 16px !important;
}

html.rb-mobile-client #charcreate_v4 .btn {
	height: 38px !important;
	min-width: 98px;
	padding: 0 16px;
	font-size: 13px;
}

html.rb-mobile-client #charcreate_v4 .btn.make {
	min-width: 146px;
}

/* Starting stat presets and cleaner creation controls */
#charcreate_v4 .modern-class-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

#charcreate_v4 .modern-class-option {
	display: flex;
	align-items: center;
	gap: 7px;
	height: 42px;
	padding: 0 9px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 10px;
	color: rgba(255, 255, 255, 0.9);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
		rgba(4, 19, 24, 0.34);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
	font-size: 12px;
	font-weight: 800;
	text-align: left;
	cursor: pointer;
}

#charcreate_v4 .modern-class-option.selected {
	border-color: rgba(200, 236, 255, 0.86);
	background:
		linear-gradient(180deg, rgba(106, 171, 255, 0.48), rgba(76, 103, 210, 0.42)),
		rgba(16, 52, 74, 0.48);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.26),
		0 0 0 2px rgba(115, 190, 255, 0.16);
}

#charcreate_v4 .modern-class-icon {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	font-size: 12px;
	font-weight: 900;
	flex: 0 0 auto;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: 20px 20px !important;
}

#charcreate_v4 .modern-stat-total {
	margin: -3px 0 10px;
	color: rgba(233, 248, 255, 0.86);
	font-size: 12px;
	font-weight: 800;
	text-align: center;
}

#charcreate_v4 .modern-stat-total.invalid {
	color: #ffb0b0;
}

#charcreate_v4 .modern-stat-row,
#charcreate_v4 .modern-gender-option,
#charcreate_v4 .stat-step {
	border-radius: 10px !important;
}

#charcreate_v4 .styleCol,
#charcreate_v4 .colorCol {
	border-radius: 8px !important;
	background-image: none !important;
	background-color: rgba(228, 244, 245, 0.16) !important;
	background-size: auto !important;
	overflow: hidden;
}

#charcreate_v4 .styleCol:hover,
#charcreate_v4 .colorCol:hover,
#charcreate_v4 .styleCol:active,
#charcreate_v4 .colorCol:active {
	background-image: none !important;
	background-color: rgba(22, 58, 70, 0.62) !important;
}

#charcreate_v4 .hstyle_button {
	background-color: transparent !important;
	background-blend-mode: normal !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: 112% auto !important;
	filter: saturate(1.12) contrast(1.04) brightness(1.18);
	mix-blend-mode: normal !important;
}

#charcreate_v4 .hcolor_button {
	background-size: cover !important;
	background-blend-mode: normal;
	mix-blend-mode: normal;
}

#charcreate_v4 .colorCol.cstyle00 {
	background-color: #d9dee1 !important;
}

#charcreate_v4 .colorCol.cstyle01 {
	background-color: #f2d08a !important;
}

#charcreate_v4 .colorCol.cstyle02 {
	background-color: #e8d6f2 !important;
}

#charcreate_v4 .colorCol.cstyle03 {
	background-color: #f0c9ad !important;
}

#charcreate_v4 .colorCol.cstyle04 {
	background-color: #c8e1ba !important;
}

#charcreate_v4 .colorCol.cstyle05 {
	background-color: #cfd6ef !important;
}

#charcreate_v4 .colorCol.cstyle06 {
	background-color: #f5f6ef !important;
}

#charcreate_v4 .colorCol.cstyle07 {
	background-color: #ebb0a3 !important;
}

#charcreate_v4 .colorCol.cstyle08 {
	background-color: #df7377 !important;
}

#charcreate_v4 .styleCol:has(.hstyle:checked),
#charcreate_v4 .colorCol:has(.hcolor:checked) {
	border-color: rgba(218, 246, 255, 0.92) !important;
	box-shadow:
		inset 0 0 0 2px rgba(255, 255, 255, 0.26),
		0 0 0 2px rgba(84, 166, 255, 0.18);
}

html.rb-mobile-client #charcreate_v4 .modern-class-grid {
	gap: 5px;
}

html.rb-mobile-client #charcreate_v4 .modern-class-option {
	height: 30px;
	gap: 4px;
	padding: 0 5px;
	border-radius: 8px;
	font-size: 9px;
}

html.rb-mobile-client #charcreate_v4 .modern-class-icon {
	width: 18px;
	height: 18px;
	font-size: 9px;
}

html.rb-mobile-client #charcreate_v4 .modern-stat-total {
	margin: -4px 0 5px;
	font-size: 10px;
}

/* Device-fit layout: the component adds these classes from measured viewport size. */
#charcreate_v4.is-compact-creation .title {
	left: 48px !important;
	top: 13px !important;
	font-size: 22px !important;
	line-height: 1 !important;
}

#charcreate_v4.is-compact-creation .modern-back {
	left: 12px !important;
	top: 6px !important;
	width: 34px !important;
	height: 34px !important;
}

#charcreate_v4.is-compact-creation .modern-back::before,
#charcreate_v4.is-compact-creation .modern-back::after {
	left: 9px;
	top: 15px;
	width: 24px;
	height: 4px;
}

#charcreate_v4.is-compact-creation .modern-creator-layout {
	inset: 46px 10px 52px !important;
	display: grid !important;
	grid-template-columns: minmax(270px, 37%) minmax(230px, 31%) !important;
	gap: 10px !important;
	justify-content: space-between !important;
	align-items: stretch !important;
}

#charcreate_v4.is-compact-creation .modern-panel {
	max-height: calc(var(--char-create-h, var(--rb-game-h, 100vh)) - 98px) !important;
	border-radius: 14px !important;
	overflow: hidden !important;
}

#charcreate_v4.is-compact-creation .modern-identity,
#charcreate_v4.is-compact-creation .modern-stats-panel {
	box-sizing: border-box;
	padding: 8px 10px !important;
	gap: 5px !important;
}

#charcreate_v4.is-compact-creation .modern-section-title,
#charcreate_v4.is-compact-creation .modern-field-label {
	font-size: 10px !important;
	line-height: 12px !important;
}

#charcreate_v4.is-compact-creation #char_name {
	height: 28px !important;
	padding: 0 11px !important;
	font-size: 12px !important;
}

#charcreate_v4.is-compact-creation .modern-gender-tabs {
	gap: 6px !important;
}

#charcreate_v4.is-compact-creation .modern-gender-option {
	height: 26px !important;
	border-radius: 8px !important;
	font-size: 11px !important;
}

#charcreate_v4.is-compact-creation .modern-class-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 4px !important;
}

#charcreate_v4.is-compact-creation .modern-class-option {
	height: 28px !important;
	gap: 4px !important;
	padding: 0 5px !important;
	border-radius: 8px !important;
	font-size: 9px !important;
	line-height: 10px !important;
}

#charcreate_v4.is-compact-creation .modern-class-icon {
	width: 18px !important;
	height: 18px !important;
	background-size: 15px 15px !important;
	font-size: 9px !important;
}

#charcreate_v4.is-compact-creation .modern-hair-mount {
	min-height: 58px !important;
	max-height: 58px !important;
}

#charcreate_v4.is-compact-creation .modern-color-mount {
	min-height: 26px !important;
	max-height: 26px !important;
}

#charcreate_v4.is-compact-creation .modern-hair-mount .hair-style {
	max-height: 58px !important;
}

#charcreate_v4.is-compact-creation .hairstyle_row,
#charcreate_v4.is-compact-creation .haircolor_row {
	gap: 4px !important;
	margin-bottom: 4px !important;
}

#charcreate_v4.is-compact-creation .hairstyle_row:nth-child(n+3) {
	display: none !important;
}

#charcreate_v4.is-compact-creation .styleCol {
	width: 25px !important;
	height: 25px !important;
	border-radius: 6px !important;
}

#charcreate_v4.is-compact-creation .colorCol {
	width: 21px !important;
	height: 21px !important;
	border-radius: 6px !important;
}

#charcreate_v4.is-compact-creation .modern-stat-graph {
	width: 118px !important;
	height: 118px !important;
	margin: -2px auto 0 !important;
}

#charcreate_v4.is-compact-creation .modern-stat-total {
	margin: -2px 0 4px !important;
	font-size: 9px !important;
	line-height: 10px !important;
}

#charcreate_v4.is-compact-creation .modern-stat-list {
	gap: 4px !important;
}

#charcreate_v4.is-compact-creation .modern-stat-row {
	grid-template-columns: 32px 22px 22px 22px !important;
	gap: 4px !important;
	height: 24px !important;
	padding: 0 5px !important;
	border-radius: 8px !important;
}

#charcreate_v4.is-compact-creation .modern-stat-name {
	font-size: 10px !important;
}

#charcreate_v4.is-compact-creation .modern-stat-value {
	font-size: 12px !important;
}

#charcreate_v4.is-compact-creation .stat-step {
	width: 22px !important;
	height: 20px !important;
	border-radius: 7px !important;
	font-size: 13px !important;
	line-height: 18px !important;
}

#charcreate_v4.is-compact-creation #style {
	width: 210px !important;
	height: 300px !important;
	transform: translate(-50%, -34%) !important;
}

#charcreate_v4.is-compact-creation .model canvas {
	width: 176px !important;
	height: 260px !important;
}

#charcreate_v4.is-compact-creation .modern-character-name {
	bottom: 44px !important;
	font-size: 20px !important;
}

#charcreate_v4.is-compact-creation .modern-character-subtitle {
	bottom: 25px !important;
	font-size: 11px !important;
}

#charcreate_v4.is-compact-creation .btns {
	right: 12px !important;
	bottom: 8px !important;
	gap: 8px !important;
}

#charcreate_v4.is-compact-creation .btn {
	height: 34px !important;
	min-width: 90px !important;
	padding: 0 14px !important;
	border-radius: 999px !important;
	font-size: 12px !important;
}

#charcreate_v4.is-compact-creation .btn.make {
	min-width: 150px !important;
}

#charcreate_v4.is-tiny-creation .title {
	left: 42px !important;
	top: 10px !important;
	font-size: 18px !important;
}

#charcreate_v4.is-tiny-creation .modern-creator-layout {
	inset: 38px 8px 44px !important;
	grid-template-columns: minmax(238px, 38%) minmax(216px, 32%) !important;
	gap: 8px !important;
}

#charcreate_v4.is-tiny-creation .modern-panel {
	max-height: calc(var(--char-create-h, var(--rb-game-h, 100vh)) - 82px) !important;
}

#charcreate_v4.is-tiny-creation .modern-identity,
#charcreate_v4.is-tiny-creation .modern-stats-panel {
	padding: 7px 8px !important;
	gap: 4px !important;
}

#charcreate_v4.is-tiny-creation .modern-hair-mount {
	min-height: 52px !important;
	max-height: 52px !important;
}

#charcreate_v4.is-tiny-creation .styleCol {
	width: 22px !important;
	height: 22px !important;
}

#charcreate_v4.is-tiny-creation .modern-stat-graph {
	width: 96px !important;
	height: 96px !important;
}

#charcreate_v4.is-tiny-creation .modern-stat-row {
	height: 21px !important;
	grid-template-columns: 28px 19px 19px 19px !important;
	gap: 3px !important;
}

#charcreate_v4.is-tiny-creation .modern-stat-name,
#charcreate_v4.is-tiny-creation .modern-stat-value {
	font-size: 9px !important;
}

#charcreate_v4.is-tiny-creation .stat-step {
	width: 19px !important;
	height: 18px !important;
	font-size: 12px !important;
	line-height: 16px !important;
}

#charcreate_v4.is-tiny-creation .model canvas {
	width: 150px !important;
	height: 224px !important;
}

#charcreate_v4.is-tiny-creation .btn {
	height: 30px !important;
	font-size: 11px !important;
}

/* Final mobile fit pass: smaller controls, no oversized panes on phone landscape. */
#charcreate_v4 .stat-step:disabled {
	opacity: 0.35;
	cursor: default;
}

#charcreate_v4.is-mobile-creation .title {
	left: 42px !important;
	top: 10px !important;
	font-size: clamp(18px, 4.8vh, 24px) !important;
}

#charcreate_v4.is-mobile-creation .modern-back {
	left: 10px !important;
	top: 5px !important;
	width: 30px !important;
	height: 30px !important;
}

#charcreate_v4.is-mobile-creation .modern-creator-layout {
	inset: 44px 10px 44px !important;
	grid-template-columns: minmax(228px, 34%) minmax(230px, 34%) !important;
	gap: 8px !important;
	align-items: start !important;
}

#charcreate_v4.is-mobile-creation .modern-panel {
	border-radius: 14px !important;
	max-height: calc(var(--char-create-h, var(--rb-game-h, 100vh)) - 92px) !important;
	overflow: hidden !important;
}

#charcreate_v4.is-mobile-creation .modern-identity,
#charcreate_v4.is-mobile-creation .modern-stats-panel {
	padding: 8px !important;
	gap: 4px !important;
}

#charcreate_v4.is-mobile-creation .modern-section-title,
#charcreate_v4.is-mobile-creation .modern-field-label {
	font-size: 9px !important;
	line-height: 11px !important;
}

#charcreate_v4.is-mobile-creation #char_name {
	height: 26px !important;
	padding: 0 10px !important;
	font-size: 11px !important;
}

#charcreate_v4.is-mobile-creation .modern-gender-option {
	height: 24px !important;
	font-size: 10px !important;
}

#charcreate_v4.is-mobile-creation .modern-class-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 4px !important;
}

#charcreate_v4.is-mobile-creation .modern-class-option {
	height: 25px !important;
	padding: 0 4px !important;
	gap: 4px !important;
	border-radius: 7px !important;
	font-size: 8px !important;
	line-height: 9px !important;
}

#charcreate_v4.is-mobile-creation .modern-class-icon {
	width: 16px !important;
	height: 16px !important;
	background-size: 14px 14px !important;
}

#charcreate_v4.is-mobile-creation .modern-hair-mount {
	min-height: 50px !important;
	max-height: 50px !important;
}

#charcreate_v4.is-mobile-creation .modern-color-mount {
	min-height: 23px !important;
	max-height: 23px !important;
}

#charcreate_v4.is-mobile-creation .modern-hair-mount .hair-style {
	max-height: 50px !important;
}

#charcreate_v4.is-mobile-creation .hairstyle_row:nth-child(n+3) {
	display: none !important;
}

#charcreate_v4.is-mobile-creation .styleCol {
	width: 22px !important;
	height: 22px !important;
	border-radius: 6px !important;
}

#charcreate_v4.is-mobile-creation .colorCol {
	width: 18px !important;
	height: 18px !important;
	border-radius: 5px !important;
}

#charcreate_v4.is-mobile-creation .modern-stat-graph {
	width: 92px !important;
	height: 92px !important;
	margin: -2px auto 1px !important;
}

#charcreate_v4.is-mobile-creation .modern-stat-total {
	margin: 0 0 3px !important;
	font-size: 8px !important;
	line-height: 10px !important;
}

#charcreate_v4.is-mobile-creation .modern-stat-list {
	gap: 3px !important;
}

#charcreate_v4.is-mobile-creation .modern-stat-row {
	grid-template-columns: 27px 18px 19px 18px !important;
	gap: 3px !important;
	height: 20px !important;
	padding: 0 4px !important;
	border-radius: 7px !important;
}

#charcreate_v4.is-mobile-creation .modern-stat-name,
#charcreate_v4.is-mobile-creation .modern-stat-value {
	font-size: 9px !important;
}

#charcreate_v4.is-mobile-creation .stat-step {
	width: 18px !important;
	height: 17px !important;
	font-size: 11px !important;
	line-height: 15px !important;
}

#charcreate_v4.is-mobile-creation #style {
	width: 190px !important;
	height: 270px !important;
	transform: translate(-50%, -34%) !important;
}

#charcreate_v4.is-mobile-creation .model canvas {
	width: 154px !important;
	height: 232px !important;
}

#charcreate_v4.is-mobile-creation .modern-character-name {
	bottom: 36px !important;
	font-size: 18px !important;
}

#charcreate_v4.is-mobile-creation .modern-character-subtitle {
	bottom: 19px !important;
	font-size: 10px !important;
}

#charcreate_v4.is-mobile-creation .btns {
	right: 10px !important;
	bottom: 7px !important;
	gap: 7px !important;
}

#charcreate_v4.is-mobile-creation .btn {
	height: 28px !important;
	min-width: 78px !important;
	padding: 0 12px !important;
	font-size: 10px !important;
}

#charcreate_v4.is-mobile-creation .btn.make {
	min-width: 132px !important;
}

/* Final mobile creation fit: reserve button space and show all hair choices compactly. */
#charcreate_v4.is-mobile-creation .modern-creator-layout {
	inset: 38px 8px 64px !important;
	grid-template-columns: minmax(214px, 31%) minmax(214px, 30%) !important;
	gap: 6px !important;
	align-items: start !important;
}

#charcreate_v4.is-mobile-creation .modern-panel {
	max-height: calc(var(--char-create-h, var(--rb-game-h, 100vh)) - 108px) !important;
	border-radius: 12px !important;
}

#charcreate_v4.is-mobile-creation .modern-identity,
#charcreate_v4.is-mobile-creation .modern-stats-panel {
	padding: 6px !important;
	gap: 3px !important;
}

#charcreate_v4.is-mobile-creation .modern-section-title,
#charcreate_v4.is-mobile-creation .modern-field-label {
	font-size: 8px !important;
	line-height: 10px !important;
}

#charcreate_v4.is-mobile-creation #char_name {
	height: 23px !important;
	padding: 0 8px !important;
	font-size: 10px !important;
}

#charcreate_v4.is-mobile-creation .modern-gender-option {
	height: 22px !important;
	font-size: 9px !important;
}

#charcreate_v4.is-mobile-creation .modern-class-grid {
	gap: 3px !important;
}

#charcreate_v4.is-mobile-creation .modern-class-option {
	height: 22px !important;
	padding: 0 4px !important;
	gap: 3px !important;
	font-size: 8px !important;
	line-height: 8px !important;
}

#charcreate_v4.is-mobile-creation .modern-class-icon {
	width: 15px !important;
	height: 15px !important;
	background-size: 13px 13px !important;
}

#charcreate_v4.is-mobile-creation .modern-hair-mount {
	min-height: 66px !important;
	max-height: 66px !important;
	overflow: hidden !important;
}

#charcreate_v4.is-mobile-creation .modern-hair-mount .hair-style.active-hair-style {
	display: grid !important;
	grid-template-columns: repeat(8, 18px);
	gap: 3px;
	max-height: none !important;
	overflow: visible !important;
}

#charcreate_v4.is-mobile-creation .modern-hair-mount .hairstyle_row,
#charcreate_v4.is-mobile-creation .modern-hair-mount .hairstyle_row:nth-child(n) {
	display: contents !important;
}

#charcreate_v4.is-mobile-creation .styleCol {
	width: 18px !important;
	height: 18px !important;
	border-radius: 5px !important;
}

#charcreate_v4.is-mobile-creation .hstyle_button {
	background-size: 120% auto !important;
	filter: saturate(1.14) contrast(1.05) brightness(1.22) !important;
}

#charcreate_v4.is-mobile-creation .modern-color-mount {
	min-height: 19px !important;
	max-height: 19px !important;
	overflow: hidden !important;
}

#charcreate_v4.is-mobile-creation .modern-color-mount .hair_colors {
	display: grid !important;
	grid-template-columns: repeat(9, 15px);
	gap: 3px;
}

#charcreate_v4.is-mobile-creation .modern-color-mount .haircolor_row {
	display: contents !important;
}

#charcreate_v4.is-mobile-creation .colorCol {
	width: 15px !important;
	height: 15px !important;
	border-radius: 5px !important;
}

#charcreate_v4.is-mobile-creation .modern-stat-graph {
	width: 78px !important;
	height: 78px !important;
	margin: -3px auto 0 !important;
}

#charcreate_v4.is-mobile-creation .modern-stat-total {
	margin: -2px 0 2px !important;
	font-size: 8px !important;
	line-height: 9px !important;
}

#charcreate_v4.is-mobile-creation .modern-stat-list {
	gap: 2px !important;
}

#charcreate_v4.is-mobile-creation .modern-stat-row {
	grid-template-columns: 25px 17px 18px 17px !important;
	gap: 2px !important;
	height: 18px !important;
	padding: 0 4px !important;
}

#charcreate_v4.is-mobile-creation .modern-stat-name,
#charcreate_v4.is-mobile-creation .modern-stat-value {
	font-size: 8px !important;
}

#charcreate_v4.is-mobile-creation .stat-step {
	width: 17px !important;
	height: 16px !important;
	font-size: 10px !important;
	line-height: 14px !important;
}

#charcreate_v4.is-mobile-creation #style {
	width: 164px !important;
	height: 244px !important;
	transform: translate(-50%, -34%) !important;
}

#charcreate_v4.is-mobile-creation .model canvas {
	width: 138px !important;
	height: 210px !important;
}

#charcreate_v4.is-mobile-creation .modern-character-name {
	bottom: 30px !important;
	font-size: 16px !important;
}

#charcreate_v4.is-mobile-creation .modern-character-subtitle {
	bottom: 15px !important;
	font-size: 9px !important;
}

#charcreate_v4.is-mobile-creation .btns {
	right: 8px !important;
	bottom: 7px !important;
	gap: 6px !important;
}

#charcreate_v4.is-mobile-creation .btn {
	height: 27px !important;
	min-width: 72px !important;
	padding: 0 10px !important;
	font-size: 10px !important;
}

#charcreate_v4.is-mobile-creation .btn.make {
	min-width: 122px !important;
}

/* Final creation correction: readable white pickers and viewport-fit panels. */
#charcreate_v4 .modern-panel {
	color: #17252c !important;
	background: rgba(250, 253, 252, 0.9) !important;
	border: 1px solid rgba(255, 255, 255, 0.92) !important;
	box-shadow:
		0 16px 34px rgba(0, 0, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
	backdrop-filter: none !important;
	text-shadow: none !important;
}

#charcreate_v4 .modern-section-title,
#charcreate_v4 .modern-field-label,
#charcreate_v4 .modern-stat-name,
#charcreate_v4 .modern-stat-value,
#charcreate_v4 .modern-stat-total,
#charcreate_v4 .modern-class-option,
#charcreate_v4 #char_name {
	color: #17252c !important;
	text-shadow: none !important;
}

#charcreate_v4 .modern-section-title,
#charcreate_v4 .modern-field-label {
	font-weight: 700 !important;
}

#charcreate_v4 .modern-creator-layout {
	inset: clamp(76px, 10vh, 112px) clamp(28px, 4vw, 74px) clamp(74px, 8vh, 96px) !important;
	grid-template-columns: minmax(300px, 370px) minmax(270px, 340px) !important;
	gap: clamp(12px, 2vw, 28px) !important;
	align-items: stretch !important;
}

#charcreate_v4 .modern-identity,
#charcreate_v4 .modern-stats-panel {
	box-sizing: border-box;
	overflow-y: auto !important;
	scrollbar-width: thin;
	scrollbar-color: rgba(65, 86, 94, 0.55) rgba(255, 255, 255, 0.4);
}

#charcreate_v4 .modern-identity {
	max-height: calc(var(--char-create-h, var(--rb-game-h, 100vh)) - clamp(160px, 18vh, 208px)) !important;
}

#charcreate_v4 .modern-stats-panel {
	max-height: calc(var(--char-create-h, var(--rb-game-h, 100vh)) - clamp(170px, 20vh, 220px)) !important;
}

#charcreate_v4 #char_name {
	border-color: rgba(18, 36, 43, 0.22) !important;
	background: rgba(255, 255, 255, 0.84) !important;
	font-weight: 500 !important;
}

#charcreate_v4 .modern-gender-option,
#charcreate_v4 .modern-class-option,
#charcreate_v4 .modern-stat-row,
#charcreate_v4 .stat-step {
	color: #17252c !important;
	background: rgba(255, 255, 255, 0.74) !important;
	border-color: rgba(20, 38, 46, 0.18) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
	text-shadow: none !important;
	font-weight: 600 !important;
}

#charcreate_v4 .modern-gender-option.selected,
#charcreate_v4 .modern-class-option.selected {
	color: #ffffff !important;
	background: linear-gradient(180deg, #7ea4ff, #5268dc) !important;
	border-color: rgba(68, 100, 210, 0.56) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28) !important;
}

#charcreate_v4 .styleCol,
#charcreate_v4 .colorCol {
	border: 1px solid rgba(18, 36, 43, 0.22) !important;
	background-color: #ffffff !important;
	background-image: none !important;
	box-shadow: 0 1px 4px rgba(12, 24, 30, 0.16) !important;
}

#charcreate_v4 .styleCol:hover,
#charcreate_v4 .colorCol:hover,
#charcreate_v4 .styleCol:active,
#charcreate_v4 .colorCol:active {
	background-color: #ffffff !important;
}

#charcreate_v4 .hstyle_button {
	opacity: 1 !important;
	filter: saturate(1.18) contrast(1.06) brightness(1.42) !important;
	background-color: transparent !important;
	background-size: 122% auto !important;
}

#charcreate_v4 .hcolor_button {
	background-image: none !important;
}

#charcreate_v4 .styleCol:has(.hstyle:checked),
#charcreate_v4 .colorCol:has(.hcolor:checked) {
	border-color: #5f92ff !important;
	box-shadow:
		0 0 0 2px rgba(95, 146, 255, 0.38),
		0 2px 8px rgba(28, 70, 150, 0.22) !important;
}

#charcreate_v4 .modern-hair-mount,
#charcreate_v4 .modern-color-mount,
#charcreate_v4 .modern-hair-mount .hair-style.active-hair-style {
	max-height: none !important;
	overflow: visible !important;
}

#charcreate_v4 .modern-hair-mount .hair-style.active-hair-style {
	display: grid !important;
	grid-template-columns: repeat(8, 34px);
	gap: 7px;
}

#charcreate_v4 .modern-hair-mount .hairstyle_row,
#charcreate_v4 .modern-hair-mount .hairstyle_row:nth-child(n),
#charcreate_v4 .modern-color-mount .haircolor_row {
	display: contents !important;
}

#charcreate_v4 .modern-color-mount .hair_colors {
	display: grid !important;
	grid-template-columns: repeat(9, 26px);
	gap: 7px;
}

#charcreate_v4 .styleCol {
	width: 34px !important;
	height: 34px !important;
}

#charcreate_v4 .colorCol {
	width: 26px !important;
	height: 26px !important;
	border-radius: 7px !important;
}

#charcreate_v4 .btn.make:disabled {
	opacity: 0.48;
	cursor: default;
}

html.rb-mobile-client #charcreate_v4 .modern-creator-layout,
#charcreate_v4.is-mobile-creation .modern-creator-layout {
	inset: 36px 8px 52px !important;
	grid-template-columns: minmax(250px, 31vw) minmax(224px, 28vw) !important;
	gap: 6px !important;
	align-items: stretch !important;
}

html.rb-mobile-client #charcreate_v4 .modern-panel,
#charcreate_v4.is-mobile-creation .modern-panel {
	border-radius: 10px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-identity,
#charcreate_v4.is-mobile-creation .modern-identity {
	max-height: calc(var(--char-create-h, var(--rb-game-h, 100vh)) - 94px) !important;
	padding: 6px 7px !important;
	gap: 3px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-stats-panel,
#charcreate_v4.is-mobile-creation .modern-stats-panel {
	max-height: calc(var(--char-create-h, var(--rb-game-h, 100vh)) - 112px) !important;
	padding: 6px 7px !important;
	gap: 3px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-section-title,
html.rb-mobile-client #charcreate_v4 .modern-field-label,
#charcreate_v4.is-mobile-creation .modern-section-title,
#charcreate_v4.is-mobile-creation .modern-field-label {
	font-size: 8px !important;
	line-height: 9px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-hair-mount .hair-style.active-hair-style,
#charcreate_v4.is-mobile-creation .modern-hair-mount .hair-style.active-hair-style {
	grid-template-columns: repeat(8, 22px) !important;
	gap: 4px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-color-mount .hair_colors,
#charcreate_v4.is-mobile-creation .modern-color-mount .hair_colors {
	grid-template-columns: repeat(9, 17px) !important;
	gap: 4px !important;
}

html.rb-mobile-client #charcreate_v4 .styleCol,
#charcreate_v4.is-mobile-creation .styleCol {
	width: 22px !important;
	height: 22px !important;
	border-radius: 5px !important;
}

html.rb-mobile-client #charcreate_v4 .colorCol,
#charcreate_v4.is-mobile-creation .colorCol {
	width: 17px !important;
	height: 17px !important;
	border-radius: 5px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-stat-graph,
#charcreate_v4.is-mobile-creation .modern-stat-graph {
	width: 86px !important;
	height: 86px !important;
	margin: -2px auto 0 !important;
}

html.rb-mobile-client #charcreate_v4 .btns,
#charcreate_v4.is-mobile-creation .btns {
	right: 8px !important;
	bottom: 6px !important;
}

html.rb-mobile-client #charcreate_v4 .btn,
#charcreate_v4.is-mobile-creation .btn {
	height: 29px !important;
	min-width: 78px !important;
	padding: 0 12px !important;
	font-size: 10px !important;
}

html.rb-mobile-client #charcreate_v4 .btn.make,
#charcreate_v4.is-mobile-creation .btn.make {
	min-width: 134px !important;
}

/* Last-pass creation polish: less glare, readable stats, full picker access. */
#charcreate_v4 .modern-panel {
	background:
		linear-gradient(180deg, rgba(246, 251, 249, 0.82), rgba(226, 237, 232, 0.74)) !important;
	border-color: rgba(255, 255, 255, 0.72) !important;
	color: #14232a !important;
}

#charcreate_v4 .modern-stats-panel {
	background:
		linear-gradient(180deg, rgba(24, 42, 48, 0.72), rgba(13, 28, 34, 0.76)) !important;
	color: #f4fbff !important;
}

#charcreate_v4 .modern-stats-panel .modern-section-title,
#charcreate_v4 .modern-stats-panel .modern-stat-name,
#charcreate_v4 .modern-stats-panel .modern-stat-value,
#charcreate_v4 .modern-stats-panel .modern-stat-total {
	color: #f4fbff !important;
}

#charcreate_v4 .modern-stats-panel .modern-stat-row,
#charcreate_v4 .modern-stats-panel .stat-step {
	color: #f4fbff !important;
	background: rgba(255, 255, 255, 0.12) !important;
	border-color: rgba(255, 255, 255, 0.2) !important;
}

#charcreate_v4 .modern-creator-layout {
	inset: clamp(76px, 10vh, 110px) clamp(28px, 4vw, 74px) clamp(68px, 8vh, 92px) !important;
	grid-template-columns: minmax(330px, 390px) minmax(286px, 350px) !important;
}

#charcreate_v4 .modern-identity {
	max-height: calc(var(--char-create-h, var(--rb-game-h, 100vh)) - 156px) !important;
	overflow-y: auto !important;
}

#charcreate_v4 .modern-stats-panel {
	max-height: calc(var(--char-create-h, var(--rb-game-h, 100vh)) - 174px) !important;
	overflow-x: hidden !important;
	overflow-y: hidden !important;
}

#charcreate_v4 .modern-stat-list {
	grid-template-columns: 1fr 1fr !important;
	gap: 8px !important;
}

#charcreate_v4 .modern-stat-row {
	box-sizing: border-box !important;
	grid-template-columns: 38px 28px minmax(24px, 1fr) 28px !important;
	width: 100% !important;
	min-width: 0 !important;
	padding: 0 7px !important;
}

#charcreate_v4 .modern-stat-row > * {
	min-width: 0 !important;
}

#charcreate_v4 .modern-stat-graph {
	width: 176px !important;
	height: 176px !important;
	margin: 0 auto 6px !important;
}

#charcreate_v4 .styleCol,
#charcreate_v4 .colorCol {
	background-color: rgba(255, 255, 255, 0.82) !important;
}

#charcreate_v4 .hstyle_button {
	filter: saturate(1.08) contrast(1.02) brightness(1.04) !important;
	background-size: 112% auto !important;
}

html.rb-mobile-client #charcreate_v4 .modern-creator-layout,
#charcreate_v4.is-mobile-creation .modern-creator-layout {
	inset: 34px 7px 44px !important;
	grid-template-columns: minmax(270px, 35vw) minmax(236px, 30vw) !important;
	gap: 6px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-identity,
#charcreate_v4.is-mobile-creation .modern-identity {
	max-height: calc(var(--char-create-h, var(--rb-game-h, 100vh)) - 78px) !important;
	overflow-y: auto !important;
	padding: 6px 7px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-stats-panel,
#charcreate_v4.is-mobile-creation .modern-stats-panel {
	max-height: calc(var(--char-create-h, var(--rb-game-h, 100vh)) - 96px) !important;
	padding: 6px 7px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-hair-mount .hair-style.active-hair-style,
#charcreate_v4.is-mobile-creation .modern-hair-mount .hair-style.active-hair-style {
	grid-template-columns: repeat(8, 22px) !important;
	gap: 4px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-color-mount .hair_colors,
#charcreate_v4.is-mobile-creation .modern-color-mount .hair_colors {
	grid-template-columns: repeat(9, 17px) !important;
	gap: 4px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-hair-mount,
html.rb-mobile-client #charcreate_v4 .modern-color-mount,
#charcreate_v4.is-mobile-creation .modern-hair-mount,
#charcreate_v4.is-mobile-creation .modern-color-mount {
	max-height: none !important;
	overflow: visible !important;
}

html.rb-mobile-client #charcreate_v4 .modern-stat-list,
#charcreate_v4.is-mobile-creation .modern-stat-list {
	grid-template-columns: 1fr 1fr !important;
	gap: 4px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-stat-row,
#charcreate_v4.is-mobile-creation .modern-stat-row {
	grid-template-columns: 28px 18px minmax(18px, 1fr) 18px !important;
	height: 20px !important;
	gap: 3px !important;
	padding: 0 4px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-stat-graph,
#charcreate_v4.is-mobile-creation .modern-stat-graph {
	width: 78px !important;
	height: 78px !important;
}

/* Final compact stat panel and live-name presentation. */
#charcreate_v4 .modern-creator-layout {
	inset: clamp(74px, 10vh, 106px) clamp(28px, 4vw, 74px) 82px !important;
	grid-template-columns: minmax(330px, 390px) minmax(286px, 340px) !important;
	align-items: start !important;
}

#charcreate_v4 .modern-stats-panel {
	box-sizing: border-box !important;
	align-self: start !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	padding: 16px 18px !important;
	overflow: hidden !important;
	background:
		linear-gradient(180deg, rgba(21, 39, 46, 0.78), rgba(10, 24, 31, 0.82)) !important;
}

#charcreate_v4 .modern-stat-graph {
	width: 146px !important;
	height: 146px !important;
	margin: -2px auto 4px !important;
}

#charcreate_v4 .modern-preset-info {
	box-sizing: border-box;
	margin: 0 0 8px;
	padding: 8px 10px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 10px;
	color: rgba(238, 249, 255, 0.9);
	background: rgba(255, 255, 255, 0.08);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
	text-shadow: none;
}

#charcreate_v4 .modern-stat-total {
	margin: 0 0 8px !important;
	color: rgba(238, 249, 255, 0.92) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
}

#charcreate_v4 .modern-stat-list {
	gap: 6px !important;
}

#charcreate_v4 .modern-stat-row {
	height: 30px !important;
	grid-template-columns: 34px 26px minmax(24px, 1fr) 26px !important;
	gap: 5px !important;
	padding: 0 6px !important;
}

#charcreate_v4 .stat-step {
	width: 24px !important;
	height: 22px !important;
	line-height: 18px !important;
}

#charcreate_v4 .btns {
	right: clamp(28px, 4vw, 74px) !important;
	bottom: 22px !important;
}

#charcreate_v4 #style {
	transform: translate(-50%, -36%) !important;
}

#charcreate_v4 .modern-character-name {
	bottom: 6.6vh !important;
	max-width: 42vw !important;
	font-size: clamp(24px, 2.8vw, 38px) !important;
}

#charcreate_v4 .modern-character-subtitle {
	bottom: 3.5vh !important;
	max-width: 42vw !important;
	color: rgba(255, 255, 255, 0.92) !important;
	font-size: clamp(12px, 1.1vw, 15px) !important;
	font-weight: 700 !important;
}

#charcreate_v4 .hstyle_button {
	filter: saturate(1.04) contrast(1.01) brightness(0.98) !important;
	background-size: 108% auto !important;
}

html.rb-mobile-client #charcreate_v4 .modern-creator-layout,
#charcreate_v4.is-mobile-creation .modern-creator-layout {
	inset: 34px 7px 42px !important;
	grid-template-columns: minmax(270px, 35vw) minmax(236px, 30vw) !important;
}

html.rb-mobile-client #charcreate_v4 .modern-stats-panel,
#charcreate_v4.is-mobile-creation .modern-stats-panel {
	height: auto !important;
	max-height: calc(var(--char-create-h, var(--rb-game-h, 100vh)) - 88px) !important;
	padding: 6px 7px !important;
	overflow: hidden !important;
}

html.rb-mobile-client #charcreate_v4 .modern-stat-graph,
#charcreate_v4.is-mobile-creation .modern-stat-graph {
	width: 74px !important;
	height: 74px !important;
	margin: -4px auto 0 !important;
}

html.rb-mobile-client #charcreate_v4 .modern-preset-info,
#charcreate_v4.is-mobile-creation .modern-preset-info {
	margin-bottom: 3px !important;
	padding: 4px 5px !important;
	border-radius: 7px !important;
	font-size: 7px !important;
	line-height: 1.18 !important;
}

html.rb-mobile-client #charcreate_v4 .modern-stat-total,
#charcreate_v4.is-mobile-creation .modern-stat-total {
	margin: 0 0 3px !important;
	font-size: 8px !important;
	line-height: 9px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-character-name,
#charcreate_v4.is-mobile-creation .modern-character-name {
	bottom: 29px !important;
	font-size: 16px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-character-subtitle,
#charcreate_v4.is-mobile-creation .modern-character-subtitle {
	bottom: 14px !important;
	font-size: 9px !important;
}

/* Character preview rotation controls. */
#charcreate_v4 #style .rot_left,
#charcreate_v4 #style .rot_right {
	position: absolute !important;
	top: 50% !important;
	z-index: 8 !important;
	display: grid !important;
	place-items: center !important;
	width: 44px !important;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.62) !important;
	border-radius: 50% !important;
	background:
		radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.12) 42%, rgba(18, 35, 43, 0.42) 100%) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 8px 18px rgba(0, 0, 0, 0.24) !important;
	transform: translateY(-50%) !important;
	cursor: pointer;
	pointer-events: auto !important;
	font-size: 0 !important;
}

#charcreate_v4 #style .rot_left {
	left: clamp(-48px, -4vw, -32px) !important;
}

#charcreate_v4 #style .rot_right {
	right: clamp(-48px, -4vw, -32px) !important;
}

#charcreate_v4 #style .rot_left::before,
#charcreate_v4 #style .rot_right::before {
	width: 14px;
	height: 14px;
	border: solid rgba(255, 255, 255, 0.96);
	border-width: 0 0 4px 4px;
	content: '';
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.32));
}

#charcreate_v4 #style .rot_left::before {
	margin-left: 5px;
	transform: rotate(45deg);
}

#charcreate_v4 #style .rot_right::before {
	margin-right: 5px;
	transform: rotate(225deg);
}

#charcreate_v4 #style .rot_left:hover,
#charcreate_v4 #style .rot_right:hover {
	background:
		radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.5), rgba(124, 164, 255, 0.24) 46%, rgba(18, 35, 43, 0.5) 100%) !important;
}

#charcreate_v4 #style .rot_left:active,
#charcreate_v4 #style .rot_right:active {
	transform: translateY(-50%) scale(0.94) !important;
}

html.rb-mobile-client #charcreate_v4 #style .rot_left,
html.rb-mobile-client #charcreate_v4 #style .rot_right,
#charcreate_v4.is-mobile-creation #style .rot_left,
#charcreate_v4.is-mobile-creation #style .rot_right {
	width: 34px !important;
	height: 34px !important;
}

html.rb-mobile-client #charcreate_v4 #style .rot_left,
#charcreate_v4.is-mobile-creation #style .rot_left {
	left: -34px !important;
}

html.rb-mobile-client #charcreate_v4 #style .rot_right,
#charcreate_v4.is-mobile-creation #style .rot_right {
	right: -34px !important;
}

html.rb-mobile-client #charcreate_v4 #style .rot_left::before,
html.rb-mobile-client #charcreate_v4 #style .rot_right::before,
#charcreate_v4.is-mobile-creation #style .rot_left::before,
#charcreate_v4.is-mobile-creation #style .rot_right::before {
	width: 10px;
	height: 10px;
	border-width: 0 0 3px 3px;
}

/* Mobile creation fit pass: tighter panels, readable title, no control overlap. */
html.rb-mobile-client #charcreate_v4 .title,
#charcreate_v4.is-mobile-creation .title {
	left: 58px !important;
	top: 14px !important;
	font-size: clamp(18px, 4.4vh, 24px) !important;
	line-height: 1 !important;
	white-space: nowrap !important;
}

html.rb-mobile-client #charcreate_v4 .modern-back,
#charcreate_v4.is-mobile-creation .modern-back {
	left: 20px !important;
	top: 10px !important;
	width: 34px !important;
	height: 34px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-back::before,
html.rb-mobile-client #charcreate_v4 .modern-back::after,
#charcreate_v4.is-mobile-creation .modern-back::before,
#charcreate_v4.is-mobile-creation .modern-back::after {
	left: 8px !important;
	top: 16px !important;
	width: 25px !important;
	height: 4px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-creator-layout,
#charcreate_v4.is-mobile-creation .modern-creator-layout {
	inset: 52px 7px 42px !important;
	grid-template-columns: minmax(210px, 30vw) minmax(198px, 28vw) !important;
	gap: 6px !important;
	align-items: start !important;
}

html.rb-mobile-client #charcreate_v4 .modern-panel,
#charcreate_v4.is-mobile-creation .modern-panel {
	max-height: calc(var(--char-create-h, var(--rb-game-h, 100vh)) - 98px) !important;
	border-radius: 12px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-identity,
html.rb-mobile-client #charcreate_v4 .modern-stats-panel,
#charcreate_v4.is-mobile-creation .modern-identity,
#charcreate_v4.is-mobile-creation .modern-stats-panel {
	padding: 5px 6px !important;
	gap: 2px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-section-title,
html.rb-mobile-client #charcreate_v4 .modern-field-label,
#charcreate_v4.is-mobile-creation .modern-section-title,
#charcreate_v4.is-mobile-creation .modern-field-label {
	font-size: 7px !important;
	line-height: 8px !important;
}

html.rb-mobile-client #charcreate_v4 #char_name,
#charcreate_v4.is-mobile-creation #char_name {
	height: 20px !important;
	padding: 0 7px !important;
	font-size: 9px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-gender-option,
html.rb-mobile-client #charcreate_v4 .modern-class-option,
#charcreate_v4.is-mobile-creation .modern-gender-option,
#charcreate_v4.is-mobile-creation .modern-class-option {
	height: 19px !important;
	font-size: 8px !important;
	line-height: 9px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-class-grid,
#charcreate_v4.is-mobile-creation .modern-class-grid {
	gap: 2px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-class-option,
#charcreate_v4.is-mobile-creation .modern-class-option {
	padding: 0 4px !important;
	gap: 3px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-class-icon,
#charcreate_v4.is-mobile-creation .modern-class-icon {
	width: 13px !important;
	height: 13px !important;
	background-size: 12px 12px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-hair-mount,
#charcreate_v4.is-mobile-creation .modern-hair-mount {
	min-height: 54px !important;
	max-height: 54px !important;
	overflow: hidden !important;
}

html.rb-mobile-client #charcreate_v4 .modern-hair-mount .hair-style.active-hair-style,
#charcreate_v4.is-mobile-creation .modern-hair-mount .hair-style.active-hair-style {
	grid-template-columns: repeat(8, 16px) !important;
	gap: 3px !important;
}

html.rb-mobile-client #charcreate_v4 .styleCol,
#charcreate_v4.is-mobile-creation .styleCol {
	width: 16px !important;
	height: 16px !important;
	border-radius: 4px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-color-mount,
#charcreate_v4.is-mobile-creation .modern-color-mount {
	min-height: 15px !important;
	max-height: 15px !important;
	overflow: hidden !important;
}

html.rb-mobile-client #charcreate_v4 .modern-color-mount .hair_colors,
#charcreate_v4.is-mobile-creation .modern-color-mount .hair_colors {
	grid-template-columns: repeat(9, 13px) !important;
	gap: 3px !important;
}

html.rb-mobile-client #charcreate_v4 .colorCol,
#charcreate_v4.is-mobile-creation .colorCol {
	width: 13px !important;
	height: 13px !important;
	border-radius: 4px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-stat-graph,
#charcreate_v4.is-mobile-creation .modern-stat-graph {
	width: 62px !important;
	height: 62px !important;
	margin: -4px auto 0 !important;
}

html.rb-mobile-client #charcreate_v4 .modern-preset-info,
#charcreate_v4.is-mobile-creation .modern-preset-info {
	margin: 0 0 2px !important;
	padding: 3px 4px !important;
	font-size: 6px !important;
	line-height: 1.12 !important;
}

html.rb-mobile-client #charcreate_v4 .modern-stat-total,
#charcreate_v4.is-mobile-creation .modern-stat-total {
	margin: -2px 0 2px !important;
	font-size: 7px !important;
	line-height: 8px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-stat-list,
#charcreate_v4.is-mobile-creation .modern-stat-list {
	gap: 2px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-stat-row,
#charcreate_v4.is-mobile-creation .modern-stat-row {
	grid-template-columns: 22px 15px 16px 15px !important;
	height: 16px !important;
	gap: 2px !important;
	padding: 0 3px !important;
	border-radius: 7px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-stat-name,
html.rb-mobile-client #charcreate_v4 .modern-stat-value,
#charcreate_v4.is-mobile-creation .modern-stat-name,
#charcreate_v4.is-mobile-creation .modern-stat-value {
	font-size: 7px !important;
	line-height: 8px !important;
}

html.rb-mobile-client #charcreate_v4 .stat-step,
#charcreate_v4.is-mobile-creation .stat-step {
	width: 15px !important;
	height: 14px !important;
	font-size: 9px !important;
	line-height: 12px !important;
}

html.rb-mobile-client #charcreate_v4 #style,
#charcreate_v4.is-mobile-creation #style {
	width: 150px !important;
	height: 220px !important;
	transform: translate(-50%, -31%) !important;
}

html.rb-mobile-client #charcreate_v4 .model canvas,
#charcreate_v4.is-mobile-creation .model canvas {
	width: 126px !important;
	height: 194px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-character-name,
#charcreate_v4.is-mobile-creation .modern-character-name {
	bottom: 27px !important;
	font-size: 14px !important;
	line-height: 16px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-character-subtitle,
#charcreate_v4.is-mobile-creation .modern-character-subtitle {
	bottom: 13px !important;
	font-size: 8px !important;
	line-height: 10px !important;
}

html.rb-mobile-client #charcreate_v4 .btns,
#charcreate_v4.is-mobile-creation .btns {
	right: 7px !important;
	bottom: 7px !important;
	gap: 6px !important;
}

html.rb-mobile-client #charcreate_v4 .btn,
#charcreate_v4.is-mobile-creation .btn {
	height: 24px !important;
	min-width: 64px !important;
	padding: 0 8px !important;
	font-size: 9px !important;
	line-height: 22px !important;
}

html.rb-mobile-client #charcreate_v4 .btn.make,
#charcreate_v4.is-mobile-creation .btn.make {
	min-width: 108px !important;
}

/* Mobile creation balance: safer left inset and taller identity picker. */
html.rb-mobile-client #charcreate_v4 .title,
#charcreate_v4.is-mobile-creation .title {
	left: max(72px, calc(env(safe-area-inset-left, 0px) + 58px)) !important;
	top: 15px !important;
	font-size: clamp(18px, 4vh, 23px) !important;
}

html.rb-mobile-client #charcreate_v4 .modern-back,
#charcreate_v4.is-mobile-creation .modern-back {
	left: max(30px, calc(env(safe-area-inset-left, 0px) + 16px)) !important;
	top: 10px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-creator-layout,
#charcreate_v4.is-mobile-creation .modern-creator-layout {
	inset:
		54px
		max(10px, env(safe-area-inset-right, 0px))
		30px
		max(26px, calc(env(safe-area-inset-left, 0px) + 18px)) !important;
	grid-template-columns: minmax(236px, 31vw) minmax(202px, 27vw) !important;
	gap: 8px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-identity,
#charcreate_v4.is-mobile-creation .modern-identity {
	height: calc(var(--char-create-h, var(--rb-game-h, 100vh)) - 88px) !important;
	max-height: calc(var(--char-create-h, var(--rb-game-h, 100vh)) - 88px) !important;
	padding: 7px 8px !important;
	gap: 3px !important;
	overflow: hidden !important;
}

html.rb-mobile-client #charcreate_v4 .modern-stats-panel,
#charcreate_v4.is-mobile-creation .modern-stats-panel {
	max-height: calc(var(--char-create-h, var(--rb-game-h, 100vh)) - 108px) !important;
	padding: 7px 8px !important;
	gap: 3px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-hair-mount,
#charcreate_v4.is-mobile-creation .modern-hair-mount {
	min-height: 61px !important;
	max-height: 61px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-hair-mount .hair-style.active-hair-style,
#charcreate_v4.is-mobile-creation .modern-hair-mount .hair-style.active-hair-style {
	grid-template-columns: repeat(8, 17px) !important;
	gap: 3px !important;
}

html.rb-mobile-client #charcreate_v4 .styleCol,
#charcreate_v4.is-mobile-creation .styleCol {
	width: 17px !important;
	height: 17px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-color-mount,
#charcreate_v4.is-mobile-creation .modern-color-mount {
	min-height: 17px !important;
	max-height: 17px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-color-mount .hair_colors,
#charcreate_v4.is-mobile-creation .modern-color-mount .hair_colors {
	grid-template-columns: repeat(9, 14px) !important;
	gap: 3px !important;
}

html.rb-mobile-client #charcreate_v4 .colorCol,
#charcreate_v4.is-mobile-creation .colorCol {
	width: 14px !important;
	height: 14px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-preset-info,
#charcreate_v4.is-mobile-creation .modern-preset-info {
	display: block !important;
	margin: 0 0 3px !important;
	padding: 4px 6px !important;
	border-radius: 8px !important;
	font-size: 7px !important;
	font-weight: 700 !important;
	line-height: 1.18 !important;
	white-space: normal !important;
}

html.rb-mobile-client #charcreate_v4 .modern-stat-graph,
#charcreate_v4.is-mobile-creation .modern-stat-graph {
	width: 66px !important;
	height: 66px !important;
	margin: -4px auto 0 !important;
}

html.rb-mobile-client #charcreate_v4 #style,
#charcreate_v4.is-mobile-creation #style {
	transform: translate(-46%, -31%) !important;
}

/* Mobile creation content order: explain the selected job after the actual stats. */
html.rb-mobile-client #charcreate_v4 .modern-stats-panel,
#charcreate_v4.is-mobile-creation .modern-stats-panel {
	display: flex !important;
	flex-direction: column !important;
	max-height: calc(var(--char-create-h, var(--rb-game-h, 100vh)) - 96px) !important;
}

html.rb-mobile-client #charcreate_v4 .modern-stats-panel > .modern-section-title,
#charcreate_v4.is-mobile-creation .modern-stats-panel > .modern-section-title {
	order: 1 !important;
}

html.rb-mobile-client #charcreate_v4 .modern-stat-graph,
#charcreate_v4.is-mobile-creation .modern-stat-graph {
	order: 2 !important;
	width: 64px !important;
	height: 64px !important;
	margin: -3px auto 1px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-stat-total,
#charcreate_v4.is-mobile-creation .modern-stat-total {
	order: 3 !important;
	margin: 0 0 3px !important;
	font-size: 7px !important;
	line-height: 9px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-stat-list,
#charcreate_v4.is-mobile-creation .modern-stat-list {
	order: 4 !important;
	gap: 3px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-stat-row,
#charcreate_v4.is-mobile-creation .modern-stat-row {
	height: 17px !important;
	grid-template-columns: 22px 15px 17px 15px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-preset-info,
#charcreate_v4.is-mobile-creation .modern-preset-info {
	order: 5 !important;
	margin: 5px 0 0 !important;
	padding: 4px 6px !important;
	font-size: 7px !important;
	line-height: 1.18 !important;
}

/* Desktop character preview rotation: keep arrows centered around the sprite body. */
#charcreate_v4:not(.is-mobile-creation) #style {
	width: clamp(360px, 28vw, 460px) !important;
	height: clamp(430px, 54vh, 560px) !important;
	transform: translate(-50%, -36%) !important;
}

#charcreate_v4:not(.is-mobile-creation) .model canvas {
	width: min(22vw, 330px) !important;
	height: min(52vh, 430px) !important;
}

#charcreate_v4:not(.is-mobile-creation) #style .rot_left,
#charcreate_v4:not(.is-mobile-creation) #style .rot_right {
	top: 49% !important;
	width: 42px !important;
	height: 42px !important;
}

#charcreate_v4:not(.is-mobile-creation) #style .rot_left {
	left: clamp(18px, 4vw, 44px) !important;
	right: auto !important;
}

#charcreate_v4:not(.is-mobile-creation) #style .rot_right {
	left: auto !important;
	right: clamp(18px, 4vw, 44px) !important;
}

/* Shared stats panel order: graph and stat controls first, class guidance last. */
#charcreate_v4 .modern-stats-panel {
	display: flex !important;
	flex-direction: column !important;
}

#charcreate_v4 .modern-stats-panel > .modern-section-title {
	order: 1 !important;
}

#charcreate_v4 .modern-stat-graph {
	order: 2 !important;
}

#charcreate_v4 .modern-stat-total {
	order: 3 !important;
}

#charcreate_v4 .modern-stat-list {
	order: 4 !important;
}

#charcreate_v4 .modern-preset-info {
	order: 5 !important;
	margin-top: 10px !important;
}

html.rb-mobile-client #charcreate_v4 .modern-preset-info,
#charcreate_v4.is-mobile-creation .modern-preset-info {
	margin-top: 5px !important;
}
/* Job selection is informational; stats are allocated after entering the game. */
#charcreate_v4 .modern-stat-graph, #charcreate_v4 .modern-stat-list { display:none!important; }
#charcreate_v4 .modern-stat-total { font-size:12px!important; line-height:1.5!important; }
@media (orientation:portrait) {
 html.rb-mobile-client #charcreate_v4#charcreate_v4 { position:fixed!important; inset:0!important; width:100vw!important; height:100dvh!important; min-width:0!important; transform:none!important; overflow:hidden!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-creator-layout { position:absolute!important; inset:9% 4% 12%!important; width:auto!important; height:auto!important; display:flex!important; flex-direction:column!important; gap:10px!important; overflow-y:auto!important; overflow-x:hidden!important; scrollbar-width:none!important; touch-action:pan-y; padding-bottom:12px!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-panel { position:relative!important; inset:auto!important; width:100%!important; min-width:0!important; height:auto!important; min-height:0!important; flex:none!important; padding:12px!important; box-sizing:border-box!important; border:1px solid #dce1f0!important; border-radius:16px!important; background:#faf9f7!important; color:#626e94!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-section-title, html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-field-label { font:600 11px/18px 'Segoe UI',sans-serif!important; color:#626e94!important; margin:4px 0!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-class-grid { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:5px!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 :is(.modern-class-option,.modern-gender-option) { min-width:0!important; height:36px!important; padding:3px!important; font-size:11px!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 #char_name { width:100%!important; height:38px!important; box-sizing:border-box!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-hair-mount { max-height:105px; overflow:auto; scrollbar-width:none; touch-action:pan-y; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-preset-info { position:static!important; width:auto!important; height:auto!important; margin:4px 0!important; padding:0!important; background:none!important; border:0!important; color:#626e94!important; font:500 12px/18px 'Segoe UI',sans-serif!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 #style { display:none!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .btns { position:absolute!important; left:4%!important; right:4%!important; bottom:2%!important; top:auto!important; width:92%!important; display:flex!important; justify-content:center!important; gap:8px!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .btns .btn { position:static!important; min-width:0!important; width:auto!important; flex:1; height:44px!important; font-size:14px!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-back { left:12px!important; top:12px!important; width:36px!important; height:36px!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4::before { left:56px!important; top:16px!important; font-size:21px!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 ::-webkit-scrollbar { display:none; }
}
@media (orientation:portrait) {
 html.rb-mobile-client #charcreate_v4#charcreate_v4 #style { display:block!important; position:relative!important; inset:auto!important; width:100%!important; height:240px!important; min-height:240px!important; flex:none!important; transform:none!important; order:3; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .model { position:absolute!important; left:0!important; top:0!important; width:100%!important; height:180px!important; transform:none!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .model canvas { width:150px!important; height:180px!important; object-fit:contain; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-character-name { top:185px!important; font-size:17px!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-character-subtitle { top:211px!important; font-size:11px!important; }
}
/* Portrait: persistent preview above an independently scrolling customization sheet. */
@media (orientation:portrait) {
 html.rb-mobile-client #charcreate_v4#charcreate_v4 #style { position:absolute!important; left:4%!important; right:4%!important; top:8%!important; bottom:auto!important; width:92%!important; height:27%!important; min-height:0!important; margin:0!important; transform:none!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-creator-layout { top:37%!important; bottom:12%!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .model { left:25%!important; top:0!important; width:50%!important; height:76%!important; display:flex!important; justify-content:center!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .model canvas { width:100%!important; height:100%!important; object-fit:contain!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-character-name { top:77%!important; left:0!important; width:100%!important; text-align:center!important; transform:none!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-character-subtitle { top:90%!important; left:0!important; width:100%!important; text-align:center!important; transform:none!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 #style :is(.rot_left,.rot_right) { position:absolute!important; top:30%!important; bottom:auto!important; width:44px!important; height:44px!important; transform:none!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 #style .rot_left { left:9%!important; right:auto!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 #style .rot_right { left:auto!important; right:9%!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 :is(.modern-hair-mount,.modern-color-mount) { min-height:0!important; max-height:none!important; overflow:visible!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-hair-mount .hair-style.active-hair-style { display:grid!important; grid-template-columns:repeat(auto-fit,minmax(44px,1fr))!important; gap:8px!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .hairstyle_row, html.rb-mobile-client #charcreate_v4#charcreate_v4 .haircolor_row { display:contents!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-color-mount .hair_colors { display:grid!important; grid-template-columns:repeat(auto-fit,minmax(44px,1fr))!important; gap:8px!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 :is(.styleCol,.colorCol) { position:relative!important; width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; margin:0!important; border-radius:9px!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 :is(.hstyle_button,.hcolor_button) { position:absolute!important; inset:0!important; width:100%!important; height:100%!important; margin:0!important; background-position:center!important; background-repeat:no-repeat!important; background-size:32px 32px!important; touch-action:manipulation; }
}
@media (orientation:portrait) {
 html.rb-mobile-client #charcreate_v4#charcreate_v4 :is(.modern-character-name,.modern-character-subtitle) { max-width:none!important; min-width:0!important; width:100%!important; right:auto!important; bottom:auto!important; margin:0!important; padding:0!important; box-sizing:border-box!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 :is(.modern-hair-mount,.modern-color-mount,.hair_styles,.hair_colors,.hair-style.active-hair-style) { position:relative!important; inset:auto!important; height:auto!important; min-height:0!important; max-height:none!important; width:100%!important; margin:0!important; transform:none!important; float:none!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-color-title { border-top:1px solid #dce1f0!important; padding-top:12px!important; margin-top:14px!important; clear:both!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-color-mount { padding-bottom:8px!important; }
}
html body #charcreate_v4#charcreate_v4 .modern-back { background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; min-width:44px!important; min-height:44px!important; font-size:0!important; touch-action:manipulation; }
html body #charcreate_v4#charcreate_v4 .modern-back::before, html body #charcreate_v4#charcreate_v4 .modern-back::after { content:''!important; display:block!important; position:absolute!important; left:50%!important; top:50%!important; width:25px!important; height:3px!important; border:0!important; border-radius:2px!important; background:white!important; transform-origin:center!important; }
html body #charcreate_v4#charcreate_v4 .modern-back::before { transform:translate(-50%,-50%) rotate(45deg)!important; }
html body #charcreate_v4#charcreate_v4 .modern-back::after { transform:translate(-50%,-50%) rotate(-45deg)!important; }
@media (orientation:landscape) {
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-creator-layout { position:absolute!important; left:42%!important; right:4%!important; top:16%!important; bottom:18%!important; width:auto!important; height:auto!important; display:block!important; overflow:auto!important; scrollbar-width:none!important; touch-action:pan-y; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-identity { position:relative!important; inset:auto!important; width:100%!important; height:auto!important; min-height:0!important; padding:14px!important; box-sizing:border-box!important; background:#faf9f7!important; border:1px solid #dce1f0!important; border-radius:16px!important; color:#626e94!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 #style { position:absolute!important; left:4%!important; top:16%!important; width:34%!important; height:65%!important; transform:none!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .model { position:absolute!important; left:15%!important; top:0!important; width:70%!important; height:75%!important; transform:none!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .model canvas { width:100%!important; height:100%!important; object-fit:contain; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 :is(.modern-character-name,.modern-character-subtitle) { left:0!important; width:100%!important; max-width:none!important; bottom:auto!important; margin:0!important; transform:none!important; text-align:center!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-character-name { top:78%!important; font-size:18px!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-character-subtitle { top:90%!important; font-size:12px!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 #style :is(.rot_left,.rot_right) { top:35%!important; width:44px!important; height:44px!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 #style .rot_left { left:0!important; right:auto!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 #style .rot_right { right:0!important; left:auto!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 :is(.modern-hair-mount,.modern-color-mount,.hair_styles,.hair_colors,.hair-style.active-hair-style) { position:relative!important; inset:auto!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 :is(.hair-style.active-hair-style,.hair_colors) { display:grid!important; grid-template-columns:repeat(auto-fit,minmax(44px,1fr))!important; gap:8px!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 :is(.hairstyle_row,.haircolor_row) { display:contents!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 :is(.styleCol,.colorCol,.hstyle_button,.hcolor_button) { width:44px!important; height:44px!important; background-size:32px 32px!important; background-position:center!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 :is(.modern-section-title,.modern-field-label) { font:600 12px/20px 'Segoe UI',sans-serif!important; margin:8px 0!important; color:#626e94!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-color-title { border-top:1px solid #dce1f0!important; padding-top:10px!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 #char_name { height:40px!important; font-size:16px!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-gender-option { height:40px!important; font-size:14px!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .btns { left:42%!important; right:4%!important; bottom:3%!important; width:54%!important; }
}
@media (orientation:landscape) { html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-character-subtitle { font-size:14px!important; } }
@media (orientation:landscape) {
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-creator-layout { bottom:21%!important; overflow-x:hidden!important; overflow-y:auto!important; touch-action:pan-y!important; overscroll-behavior:contain; border-radius:16px; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-identity { max-height:none!important; overflow:visible!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 :is(.hair_styles,.hair-style.active-hair-style,.modern-hair-mount,.modern-color-mount,.hair_colors) { float:none!important; margin:0!important; transform:none!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .modern-creator-layout * { touch-action:pan-y!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .btns { position:absolute!important; top:auto!important; left:42%!important; right:4%!important; bottom:3%!important; width:54%!important; height:48px!important; display:flex!important; justify-content:flex-end!important; gap:12px!important; transform:none!important; }
 html.rb-mobile-client #charcreate_v4#charcreate_v4 .btns .btn { position:static!important; width:auto!important; min-width:0!important; max-width:none!important; height:48px!important; min-height:48px!important; flex:1!important; font:600 16px/1.2 'Segoe UI',sans-serif!important; margin:0!important; padding:0 16px!important; }
}


html body #charcreate_v4#charcreate_v4 {background:url('./assets/daylight-courtyard.webp') center/cover no-repeat!important;}
html body #charcreate_v4#charcreate_v4::after {background:none!important;}
@media(min-width:900px){
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #charcreate_v4#charcreate_v4:not(.is-mobile-creation) .modern-creator-layout{position:absolute!important;left:5%!important;top:16%!important;bottom:14%!important;width:36%!important;right:auto!important;display:block!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #charcreate_v4#charcreate_v4:not(.is-mobile-creation) .modern-identity{height:auto!important;min-height:0!important;max-height:100%!important;overflow-y:auto!important;scrollbar-width:none!important;background:#f7fbf5ed!important;padding:24px!important;box-sizing:border-box!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #charcreate_v4#charcreate_v4:not(.is-mobile-creation) #style{position:absolute!important;left:44%!important;top:15%!important;width:50%!important;height:68%!important;transform:none!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #charcreate_v4#charcreate_v4:not(.is-mobile-creation) .model canvas{width:360px!important;height:450px!important;max-height:80%!important;object-fit:contain!important;left:50%!important;top:43%!important;transform:translate(-50%,-50%)!important;}
html:not(.rb-mobile-client):not(.rb-mobile-live-layout-preview) #charcreate_v4#charcreate_v4:not(.is-mobile-creation) :is(.modern-character-name,.modern-character-subtitle){left:50%!important;width:95%!important;max-width:95%!important;color:#213c50!important;text-shadow:0 1px 2px white!important;}
}

#charcreate_v4{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;transform:none!important} #WinLogin .login-form{margin:0} 
/* Separate generated scenes; static artwork avoids runtime full-screen filters. */
#login-entrance::backdrop{background:#83a9cf url('/ui/scenery/welcome-1600.webp') center/cover!important}
#login-dialog:not(.selecting)::backdrop{background:#263352 url('/ui/scenery/login-1600.webp') center/cover!important}
html body #CharSelectV4#CharSelectV4,#login-dialog.selecting{background:#e1d9d1 url('/ui/scenery/select-1600.webp') center/cover no-repeat!important}
@media(max-width:800px){
 #login-entrance::backdrop{background-image:url('/ui/scenery/welcome-960.webp')!important}
 #login-dialog:not(.selecting)::backdrop{background-image:url('/ui/scenery/login-960.webp')!important}
 html body #CharSelectV4#CharSelectV4,#login-dialog.selecting{background-image:url('/ui/scenery/select-960.webp')!important}
}