/* =================================================================================================================
   RO theme (body.theme-ro, the default): the windows of the original client. The skin textures of the client data
   (texture/유저인터페이스/basic_interface) arrive as CSS variables --ro-<texture name> set by
   client/js/render3d/uiskin.js, which also marks <html class="ro-skin"> once they load. Every rule below first draws a
   close look-alike in plain CSS (no data folder / before the textures arrive); the html.ro-skin rules put the textures
   on top. Sizes are the original ones: Basic Info 280x120, Status 280x103, Equipment 280x130, hotkey bar 280x34,
   inventory cells 32x32, 12px text.
   ================================================================================================================= */

body.theme-ro {
	--ro-font: "Kanit Thai", Tahoma, "Leelawadee UI", "Noto Sans Thai", Verdana, Arial, sans-serif; /* Thai: Kanit (no loops), English: Tahoma like the original client */
	--ro-edge: #9aa3b8;          /* window frame */
	--ro-navy: #273a74;          /* labels of the original windows (Str, Atk, head ...) */
	--ro-sel: #c7d6f6;           /* selected row / cell */
	--ro-hover: #e4ecfb;
	--text: #000; --muted: #666; --accent: #5876c4; --accent-2: #3f5ca8; --panel-solid: #fff; --line: #c3c8d4; --head: #c9d6f1;
	--danger: #c0392b; --ok: #1e8a3c; --warn: #b7860b; --btn: #f3f5f9; --btn-hover: #e6ecf8;
	font: 12px/1.4 var(--ro-font);
}
.theme-ro .ro-only { display: block !important; }
.theme-ro .muted { color: var(--muted); }
.theme-ro .good { color: #1e8a3c; }
.theme-ro .bad, .theme-ro .error { color: #c62828; }
.theme-ro code { background: #eef1f7; color: #000; }

/* ---- buttons: the 3-part button of the client (btn_out / btn_over / btn_press / btn_disable, 6 + n + 6 x 20) ---- */
.theme-ro button {
	height: 20px; min-height: 20px; padding: 0 9px; border: 1px solid #a3abbd; border-radius: 4px; color: #000;
	font: 12px/18px var(--ro-font); background: linear-gradient(#ffffff, #e8ebf1 60%, #d9dee8); box-shadow: none; text-shadow: none;
}
.theme-ro button:hover:not(:disabled) { background: linear-gradient(#ffffff, #dde7fa 60%, #c5d5f4); }
.theme-ro button:active:not(:disabled) { background: linear-gradient(#c5d5f4, #dde7fa); }
.theme-ro button:disabled { opacity: 1; color: #9a9a9a; background: linear-gradient(#f4f4f4, #e2e2e2); }
.theme-ro button.primary { font-weight: bold; color: #000; }
.theme-ro button.danger { color: #9b1c1c; }
.theme-ro button.small { height: 18px; min-height: 18px; padding: 0 6px; font-size: 11px; line-height: 16px; }
html.ro-skin .theme-ro button {
	border: 0; border-radius: 0; line-height: 20px;
	background: var(--ro-btn-out-left) left top / 6px 100% no-repeat, var(--ro-btn-out-right) right top / 6px 100% no-repeat,
		var(--ro-btn-out-mid) 6px 0 / calc(100% - 12px) 100% no-repeat;
}
html.ro-skin .theme-ro button:hover:not(:disabled) {
	background: var(--ro-btn-over-left) left top / 6px 100% no-repeat, var(--ro-btn-over-right) right top / 6px 100% no-repeat,
		var(--ro-btn-over-mid) 6px 0 / calc(100% - 12px) 100% no-repeat;
}
html.ro-skin .theme-ro button:active:not(:disabled) {
	background: var(--ro-btn-press-left) left top / 6px 100% no-repeat, var(--ro-btn-press-right) right top / 6px 100% no-repeat,
		var(--ro-btn-press-mid) 6px 0 / calc(100% - 12px) 100% no-repeat;
}
html.ro-skin .theme-ro button:disabled {
	background: var(--ro-btn-disable-left) left top / 6px 100% no-repeat, var(--ro-btn-disable-right) right top / 6px 100% no-repeat,
		var(--ro-btn-disable-mid) 6px 0 / calc(100% - 12px) 100% no-repeat;
}
html.ro-skin .theme-ro button.small { line-height: 18px; }

/* ---- inputs: white boxes with a grey edge (txtbox) ---- */
.theme-ro input, .theme-ro select, .theme-ro textarea {
	background: #fff; color: #000; border: 1px solid #a7a7a7; border-radius: 0; min-height: 20px; padding: 1px 4px; font: 12px var(--ro-font);
	box-shadow: inset 1px 1px 0 #e2e2e2;
}
.theme-ro input:not([type=checkbox]):not([type=range]) { height: 20px; }
.theme-ro select { height: 20px; padding: 0 2px; }
.theme-ro input:focus, .theme-ro select:focus, .theme-ro textarea:focus, .theme-ro button:focus-visible { outline: 1px solid #5876c4; outline-offset: 0; }
.theme-ro input[type=checkbox] { width: 13px; height: 13px; accent-color: #5876c4; }
.theme-ro input[type=range] { accent-color: #5876c4; min-height: 0; border: 0; box-shadow: none; background: none; }

/* ---- windows: title bar (titlebar_left/mid/right 12+n+12 x 17), white body, button bar (btnbar 21) ---- */
.theme-ro .win {
	background: transparent; border: 0; border-radius: 0; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); min-width: 0; overflow: visible;
	font: 12px/1.4 var(--ro-font); color: #000;
}
.theme-ro .win-head {
	height: 17px; padding: 0 4px 0 14px; gap: 4px; border: 0; border-radius: 6px 6px 0 0;
	background: linear-gradient(#e2eafa 0%, #b9cbf0 45%, #9fb6e6 55%, #c9d9f6 100%); box-shadow: inset 0 -1px 0 #000;
}
html.ro-skin .theme-ro .win-head {
	border-radius: 0; box-shadow: none;
	background: var(--ro-titlebar-left) left top / 12px 17px no-repeat, var(--ro-titlebar-right) right top / 12px 17px no-repeat,
		var(--ro-titlebar-mid) 12px 0 / calc(100% - 24px) 17px no-repeat;
}
.theme-ro .win-head h3 { font: 12px/17px var(--ro-font); color: #000; font-weight: normal; letter-spacing: 0; }
.theme-ro .win-head .x {
	width: 11px; height: 11px; min-height: 11px; padding: 0; border: 0; border-radius: 50%; font-size: 0; flex: none;
	background: radial-gradient(circle at 40% 35%, #e9f0ff, #6d8fd6 70%, #3a5aa8);
}
html.ro-skin .theme-ro .win-head .x { border-radius: 0; background: var(--ro-sys-close-off) center / 11px 11px no-repeat; }
html.ro-skin .theme-ro .win-head .x:hover { background: var(--ro-sys-close-on) center / 11px 11px no-repeat; }
.theme-ro .win-body {
	background: #fff; border: 1px solid var(--ro-edge); border-top: 0; padding: 6px 7px; color: #000;
	scrollbar-width: thin; scrollbar-color: #9fb3dd #eef2f9;
}
.theme-ro .win:has(> .win-foot:not(.hidden)) .win-body { border-bottom: 0; }
.theme-ro .win-foot {
	min-height: 21px; padding: 0 7px; gap: 4px; border: 1px solid var(--ro-edge); border-top: 1px solid #dfe3ea; border-radius: 0 0 5px 5px;
	background: repeating-linear-gradient(#ffffff 0 2px, #f1f1f1 2px 4px);
}
html.ro-skin .theme-ro .win-foot {
	border: 0; border-radius: 0;
	background: var(--ro-btnbar-left) left top / 21px 100% no-repeat, var(--ro-btnbar-right) right top / 21px 100% no-repeat,
		var(--ro-btnbar-mid) 21px 0 / calc(100% - 42px) 100% no-repeat;
}
.theme-ro .win-foot > * { margin: 1px 0; }
.theme-ro .win h4 { margin: 8px 0 4px; font-size: 12px; color: var(--ro-navy); }
.theme-ro .win p { margin: 4px 0; }
.theme-ro .desc { background: #fff; border: 1px solid #c8ccd6; border-radius: 0; padding: 6px; font-size: 12px; color: #000; }
.theme-ro .desc .ic.big { float: left; margin: 0 6px 2px 0; }
.theme-ro .actions { gap: 4px; margin-top: 6px; }
.theme-ro .row { gap: 4px; }
.theme-ro table.grid td, .theme-ro table.grid th { padding: 2px 4px; border-bottom: 1px solid #e3e6ec; font-size: 12px; }
.theme-ro table.grid th { color: var(--ro-navy); font-weight: bold; font-size: 11px; }
.theme-ro .qty { width: 64px; }
.theme-ro .kv { font-size: 12px; gap: 2px 8px; }
.theme-ro .kv .muted { color: var(--ro-navy); }

/* rows of items / members / skills */
.theme-ro .item-row { padding: 2px 3px; gap: 6px; border-bottom: 1px solid #edf0f5; border-radius: 0; }
.theme-ro .item-row:hover { background: var(--ro-hover); }
.theme-ro .item-row.sel { background: var(--ro-sel); }
.theme-ro .item-row .ct { color: #333; }
.theme-ro .ic { width: 24px; height: 24px; border-radius: 3px; font-size: 10px; }
.theme-ro .party-member { border-bottom-color: #edf0f5; padding: 4px 2px; }
.theme-ro .skill-row { padding: 3px 2px; gap: 6px; border-bottom: 1px solid #edf0f5; }
.theme-ro .skill-row:hover { background: var(--ro-hover); }
.theme-ro .skill-row b { font-weight: bold; color: #000; }
.theme-ro .skill-row .meta { color: #666; font-size: 11px; }
.theme-ro .sic { background: #eef1f7; border-radius: 3px; }
.theme-ro .sic.img { background: none; }
html.ro-skin .theme-ro .sic:not(.img) { background: var(--ro-no-skill) center / 24px no-repeat; }

/* tabs (tab_l/m/r, the active one tab_a_*) */
.theme-ro .tabs { gap: 1px; margin-bottom: 4px; border-bottom: 1px solid #b9c2d6; }
.theme-ro .tabs button, .theme-ro .chat-tabs button {
	height: 19px; min-height: 19px; padding: 0 8px; border: 1px solid #b9c2d6; border-bottom: 0; border-radius: 4px 4px 0 0;
	background: linear-gradient(#f7f8fb, #e1e5ee); font-size: 11px; line-height: 18px; color: #333;
}
.theme-ro .tabs button.on, .theme-ro .chat-tabs button.on { background: linear-gradient(#ffffff, #dfe8fb); color: #000; font-weight: bold; border-color: #8ea3d3; }
html.ro-skin .theme-ro .tabs button, html.ro-skin .theme-ro .chat-tabs button {
	border: 0; border-radius: 0;
	background: var(--ro-tab-l) left top / 4px 100% no-repeat, var(--ro-tab-r) right top / 4px 100% no-repeat, var(--ro-tab-m) 4px 0 / calc(100% - 8px) 100% no-repeat, #fff;
}
html.ro-skin .theme-ro .tabs button.on, html.ro-skin .theme-ro .chat-tabs button.on {
	background: var(--ro-tab-a-l) left top / 4px 100% no-repeat, var(--ro-tab-a-r) right top / 4px 100% no-repeat, var(--ro-tab-a-m) 4px 0 / calc(100% - 8px) 100% no-repeat, #fff;
}

/* ---- Basic Info (basewin_bg 280x120): name, job, HP / SP gauges, Base / Job level and EXP, weight, zeny, menu ---- */
.theme-ro #hud-char {
	left: 6px; top: 6px; width: 280px; height: 120px; padding: 0; border: 1px solid var(--ro-edge); border-radius: 6px 6px 4px 4px;
	background:
		linear-gradient(#e2eafa 0%, #b9cbf0 45%, #9fb6e6 55%, #c9d9f6 100%) 0 0 / 100% 17px no-repeat,
		linear-gradient(#e5e7ea, #e5e7ea) 6px 72px / 191px 25px no-repeat,
		linear-gradient(#c0c0c0, #c0c0c0) 0 99px / 200px 1px no-repeat,
		linear-gradient(90deg, transparent 199px, #c0c0c0 199px 200px, transparent 200px),
		repeating-linear-gradient(#ffffff 0 2px, #f2f2f2 2px 4px) 200px 17px / 80px 103px no-repeat,
		repeating-linear-gradient(#ffffff 0 2px, #f2f2f2 2px 4px) 0 100px / 200px 20px no-repeat,
		#fff;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); color: #000; backdrop-filter: none; font: 12px/1.3 var(--ro-font);
}
html.ro-skin .theme-ro #hud-char { border: 0; border-radius: 0; background: var(--ro-basewin-bg) 0 0 / 280px 120px no-repeat; }
.theme-ro #hud-char .ro-title { position: absolute; left: 0; top: 0; width: 100%; height: 17px; padding: 0 0 0 14px; font: 12px/17px var(--ro-font); color: #000; cursor: default; }
.theme-ro #hud-char .ro-mini {
	position: absolute; right: 4px; top: 3px; width: 11px; height: 11px; min-height: 11px; padding: 0; border: 0; border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, #e9f0ff, #6d8fd6 70%, #3a5aa8);
}
html.ro-skin .theme-ro #hud-char .ro-mini { border-radius: 0; background: var(--ro-sys-mini-off) center / 11px 11px no-repeat; }
.theme-ro #hud-char .hud-name { position: absolute; left: 9px; top: 21px; width: 96px; display: flex; flex-direction: column; gap: 3px; font-size: 12px; line-height: 15px; }
.theme-ro #hud-char .hud-name b { font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-ro #hud-char .hud-name .muted { color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* gauges: frame drawn by the window (x 110-194, y 22 / 43); fill = gzeblue (gzered when HP < 25%) */
.theme-ro #hud-char .bar { position: absolute; margin: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.theme-ro #hud-char .bar.hp, .theme-ro #hud-char .bar.sp { left: 110px; width: 85px; height: 9px; }
.theme-ro #hud-char .bar.hp { top: 22px; }
.theme-ro #hud-char .bar.sp { top: 43px; }
.theme-ro #hud-char .bar.hp::before, .theme-ro #hud-char .bar.sp::before {
	position: absolute; right: calc(100% + 4px); top: -3px; font: bold 12px/15px var(--ro-font); color: #000;
}
.theme-ro #hud-char .bar.hp::before { content: 'HP'; }
.theme-ro #hud-char .bar.sp::before { content: 'SP'; }
html:not(.ro-skin) .theme-ro #hud-char .bar.hp, html:not(.ro-skin) .theme-ro #hud-char .bar.sp,
html:not(.ro-skin) .theme-ro #hud-char .bar.exp, html:not(.ro-skin) .theme-ro #hud-char .bar.jexp { box-shadow: inset 0 0 0 1px #5e5f61; background: linear-gradient(#a2a6aa, #f4f5f6); border-radius: 4px; }
.theme-ro #hud-char .bar i { top: 0; bottom: auto; height: 8px; border-radius: 4px; background: linear-gradient(#456ab9, #8aa9e6 40%, #6f93dc); }
.theme-ro #hud-char .bar.hp.low i { background: linear-gradient(#a1243a, #f07a8c 40%, #d9485f); }
html.ro-skin .theme-ro #hud-char .bar i {
	border-radius: 0;
	background: var(--ro-gzeblue-left) left top / 4px 8px no-repeat, var(--ro-gzeblue-right) right top / 4px 8px no-repeat, var(--ro-gzeblue-mid) 4px 0 / calc(100% - 8px) 8px no-repeat;
}
html.ro-skin .theme-ro #hud-char .bar.hp.low i {
	background: var(--ro-gzered-left) left top / 4px 8px no-repeat, var(--ro-gzered-right) right top / 4px 8px no-repeat, var(--ro-gzered-mid) 4px 0 / calc(100% - 8px) 8px no-repeat;
}
.theme-ro #hud-char .bar span { position: absolute; left: 0; right: 0; top: 9px; font: 11px/12px var(--ro-font); color: #000; text-shadow: none; font-weight: normal; text-align: center; }
/* Base / Job level and EXP in the grey box (x 6-196, y 72-96) */
.theme-ro #hud-char .bar.exp, .theme-ro #hud-char .bar.jexp { left: 72px; width: 120px; height: 9px; }
.theme-ro #hud-char .bar.exp { top: 75px; }
.theme-ro #hud-char .bar.jexp { top: 86px; }
html.ro-skin .theme-ro #hud-char .bar.exp, html.ro-skin .theme-ro #hud-char .bar.jexp { background: var(--ro-gze-bg1) 0 0 / 100% 9px no-repeat; }
.theme-ro #hud-char .bar.exp span, .theme-ro #hud-char .bar.jexp span { left: auto; right: calc(100% + 4px); top: -2px; width: 64px; text-align: left; white-space: nowrap; font-size: 11px; }
.theme-ro #hud-char .bar.exp i, .theme-ro #hud-char .bar.jexp i { height: 8px; }
html.ro-skin .theme-ro #hud-char .bar.exp i { background: linear-gradient(#6a8fd8, #b9cdf3 45%, #90afe9); }
html.ro-skin .theme-ro #hud-char .bar.jexp i { background: linear-gradient(#5aa06a, #b6e3bf 45%, #84c693); }
html:not(.ro-skin) .theme-ro #hud-char .bar.jexp i { background: linear-gradient(#5aa06a, #b6e3bf 45%, #84c693); }
/* bottom strip (y 100-119): weight, zeny */
.theme-ro #hud-char .hud-small { position: absolute; left: 8px; top: 102px; width: 186px; height: 15px; margin: 0; font-size: 0; color: #000; }
.theme-ro #hud-char .hud-small span { position: absolute; top: 0; font: 11px/15px var(--ro-font); white-space: nowrap; }
.theme-ro #hud-char #txt-weight { left: 0; }
.theme-ro #hud-char #txt-weight.bad { color: #c62828; font-weight: bold; }
.theme-ro #hud-char #txt-zeny { right: 0; }
/* menu buttons of the right column (btn_<name>_off / _on, 30x20) */
.theme-ro #hud-char .ro-btns { position: absolute; left: 204px; top: 21px; width: 70px; display: grid !important; grid-template-columns: 30px 30px; gap: 3px 7px; }
.theme-ro #hud-char .ro-btns .rb {
	width: 30px; height: 20px; min-height: 20px; padding: 0; border: 1px solid #a3abbd; border-radius: 4px; font: 9px/18px var(--ro-font); color: #222;
	background: linear-gradient(#fff, #dfe3ea);
}
.theme-ro #hud-char .ro-btns .rb:hover { background: linear-gradient(#fff, #c8d7f5); }
html:not(.ro-skin) .theme-ro .rb-status::after { content: 'status' !important; } html:not(.ro-skin) .theme-ro .rb-option::after { content: 'option' !important; }
html:not(.ro-skin) .theme-ro .rb-items::after { content: 'items' !important; } html:not(.ro-skin) .theme-ro .rb-equip::after { content: 'equip' !important; }
html:not(.ro-skin) .theme-ro .rb-skill::after { content: 'skill' !important; } html:not(.ro-skin) .theme-ro .rb-map::after { content: 'map' !important; }
html:not(.ro-skin) .theme-ro .rb-comm::after { content: 'party' !important; } html:not(.ro-skin) .theme-ro .rb-friend::after { content: 'guild' !important; }
html.ro-skin .theme-ro #hud-char .ro-btns .rb { border: 0; border-radius: 0; }
html.ro-skin .theme-ro .rb-status { background: var(--ro-btn-status-off) !important; } html.ro-skin .theme-ro .rb-status:hover, html.ro-skin .theme-ro .rb-status.on { background: var(--ro-btn-status-on) !important; }
html.ro-skin .theme-ro .rb-option { background: var(--ro-btn-option-off) !important; } html.ro-skin .theme-ro .rb-option:hover, html.ro-skin .theme-ro .rb-option.on { background: var(--ro-btn-option-on) !important; }
html.ro-skin .theme-ro .rb-items { background: var(--ro-btn-items-off) !important; } html.ro-skin .theme-ro .rb-items:hover, html.ro-skin .theme-ro .rb-items.on { background: var(--ro-btn-items-on) !important; }
html.ro-skin .theme-ro .rb-equip { background: var(--ro-btn-equip-off) !important; } html.ro-skin .theme-ro .rb-equip:hover, html.ro-skin .theme-ro .rb-equip.on { background: var(--ro-btn-equip-on) !important; }
html.ro-skin .theme-ro .rb-skill { background: var(--ro-btn-skill-off) !important; } html.ro-skin .theme-ro .rb-skill:hover, html.ro-skin .theme-ro .rb-skill.on { background: var(--ro-btn-skill-on) !important; }
html.ro-skin .theme-ro .rb-map { background: var(--ro-btn-map-off) !important; } html.ro-skin .theme-ro .rb-map:hover, html.ro-skin .theme-ro .rb-map.on { background: var(--ro-btn-map-on) !important; }
html.ro-skin .theme-ro .rb-comm { background: var(--ro-btn-comm-off) !important; } html.ro-skin .theme-ro .rb-comm:hover, html.ro-skin .theme-ro .rb-comm.on { background: var(--ro-btn-comm-on) !important; }
html.ro-skin .theme-ro .rb-friend { background: var(--ro-btn-friend-off) !important; } html.ro-skin .theme-ro .rb-friend:hover, html.ro-skin .theme-ro .rb-friend.on { background: var(--ro-btn-friend-on) !important; }
/* status point reminder (lv_up), states */
.theme-ro #hud-char .ro-lvup { position: absolute; left: 286px; top: 2px; width: 43px; height: 43px; min-height: 43px; padding: 0; border: 0; border-radius: 6px;
	background: linear-gradient(#3f6ad6, #1c3a99); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); animation: ro-pulse 1.2s ease-in-out infinite alternate; }
.theme-ro #hud-char .ro-lvup::after { content: 'up'; color: #fff; font: bold 13px var(--ro-font); }
html.ro-skin .theme-ro #hud-char .ro-lvup { border-radius: 0; background: var(--ro-lv-up-off) center / 43px no-repeat; box-shadow: none; }
html.ro-skin .theme-ro #hud-char .ro-lvup::after { content: none; }
@keyframes ro-pulse { from { opacity: 0.75; } to { opacity: 1; } }
.ro-lvup.hidden { display: none !important; }
.theme-ro #hud-char .efst-list { position: absolute; left: 0; top: 124px; width: 280px; margin: 0; }
.theme-ro .efst { background: rgba(255, 255, 255, 0.92); border: 1px solid var(--ro-edge); border-radius: 3px; color: #000; font-size: 11px; line-height: 16px; }
/* minimised: basewin_mini 280x34 (title + HP / SP) */
.theme-ro #hud-char.mini { height: 34px; background: linear-gradient(#e2eafa 0%, #b9cbf0 45%, #9fb6e6 55%, #c9d9f6 100%) 0 0 / 100% 17px no-repeat, repeating-linear-gradient(#ffffff 0 2px, #f2f2f2 2px 4px); }
html.ro-skin .theme-ro #hud-char.mini { background: var(--ro-basewin-mini) 0 0 / 280px 34px no-repeat; }
.theme-ro #hud-char.mini .hud-name, .theme-ro #hud-char.mini .bar.exp, .theme-ro #hud-char.mini .bar.jexp, .theme-ro #hud-char.mini .hud-small,
.theme-ro #hud-char.mini .ro-btns, .theme-ro #hud-char.mini .bar span { display: none !important; }
.theme-ro #hud-char.mini .bar.hp { top: 21px; left: 30px; }
.theme-ro #hud-char.mini .bar.sp { top: 21px; left: 160px; }
.theme-ro #hud-char.mini .efst-list { top: 38px; }
.theme-ro #hud-char.mini .ro-lvup { width: 30px; height: 30px; min-height: 30px; background-size: 30px; }

/* ---- minimap: a small window with the map name in its title bar ---- */
.theme-ro #hud-map { right: 6px; top: 6px; width: 150px; padding: 0; border: 1px solid var(--ro-edge); border-radius: 6px 6px 3px 3px; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); backdrop-filter: none; }
.theme-ro .hud-mapname { height: 17px; padding: 0 8px 0 12px; font: 12px/17px var(--ro-font); color: #000; border-radius: 6px 6px 0 0;
	background: linear-gradient(#e2eafa 0%, #b9cbf0 45%, #9fb6e6 55%, #c9d9f6 100%); }
html.ro-skin .theme-ro #hud-map { border-radius: 0; border-top: 0; }
html.ro-skin .theme-ro .hud-mapname { border-radius: 0; margin: 0 -1px;
	background: var(--ro-titlebar-left) left top / 12px 17px no-repeat, var(--ro-titlebar-right) right top / 12px 17px no-repeat, var(--ro-titlebar-mid) 12px 0 / calc(100% - 24px) 17px no-repeat; }
.theme-ro .hud-mapname b { font-weight: normal; }
.theme-ro .hud-mapname #hud-xy { color: #333; }
.theme-ro #minimap { width: 140px; height: 140px; margin: 4px; border-radius: 0; background: #000; }
.theme-ro .zoom { margin: 0 4px 4px; gap: 3px; }
.theme-ro .zoom button { min-height: 18px; height: 18px; font-size: 12px; line-height: 16px; padding: 0; }
.theme-ro #hud-map.closed #minimap, .theme-ro #hud-map.closed .zoom { display: none; }

/* ---- inventory: vertical tabs + the 8 x n grid of 32x32 cells (itemwin_mid), count at the bottom right ---- */
.theme-ro .win-inv .win-body { padding: 4px 4px 6px; }
.theme-ro .inv-ro { display: flex; align-items: flex-start; }
.theme-ro .inv-ro .cells {
	display: grid; grid-template-columns: repeat(8, 32px); grid-auto-rows: 32px; border: 1px solid #b9c2d6; background: #fff;
	max-height: calc(32px * 6 + 2px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #9fb3dd #eef2f9;
}
.theme-ro .item-cell { position: relative; width: 32px; height: 32px; cursor: pointer; background: radial-gradient(ellipse 13px 6px at 50% 72%, #c8d2ea, transparent); }
html.ro-skin .theme-ro .item-cell { background: var(--ro-itemwin-mid) 0 0 / 32px 32px no-repeat; }
.theme-ro .item-cell.empty { cursor: default; }
.theme-ro .item-cell:hover:not(.empty) { background-color: var(--ro-hover); }
.theme-ro .item-cell.sel { background: radial-gradient(ellipse 14px 7px at 50% 70%, #7f9ff2, #b8c9f6 70%, transparent 72%); }
html.ro-skin .theme-ro .item-cell.sel { background: var(--ro-item-invert) 2px 15px / 28px 15px no-repeat, var(--ro-itemwin-mid) 0 0 / 32px 32px no-repeat; }
.theme-ro .item-cell .ic { position: absolute; left: 4px; top: 3px; }
.theme-ro .item-cell b { position: absolute; right: 1px; bottom: 0; font: 10px/11px var(--ro-font); color: #000;
	text-shadow: -1px 0 #fff, 1px 0 #fff, 0 -1px #fff, 0 1px #fff; pointer-events: none; }
.theme-ro .item-cell.worn::after { content: 'E'; position: absolute; left: 1px; top: 0; font: bold 9px/10px var(--ro-font); color: #1e8a3c; text-shadow: 0 0 2px #fff; }
.theme-ro .win-inv .desc { margin-top: 5px; }
.theme-ro .win-inv .win-foot { font-size: 11px; }

/* ---- status: the newer official window - Str..Luk (value + bonus on a gauge, up arrow, cost) | Atk..Aspd, Status Point,
   Guild; the "สถานะตัวละคร" button opens the details under ---- */
.theme-ro .win-equip .win-body, .theme-ro .win-viewequip .win-body { padding: 0; overflow: hidden; }
.theme-ro .win-status .win-body { padding: 5px 6px 6px; overflow: hidden; }
.theme-ro .ro-stat2 { display: grid; grid-template-columns: 148px minmax(0, 1fr); column-gap: 8px; align-items: start; font: 12px/16px var(--ro-font); color: #000; }
.theme-ro .ro-stat2 .st-left { display: grid; row-gap: 2px; align-content: start; padding-right: 7px; border-right: 1px solid #dfe4ee; }
.theme-ro .st-row { display: grid; grid-template-columns: 26px 78px 14px 16px; align-items: center; column-gap: 3px; height: 18px; }
.theme-ro .st-l, .theme-ro .st-k { color: var(--ro-navy); font-weight: bold; }
.theme-ro .st-v { position: relative; height: 16px; border: 1px solid #b9c3d8; border-radius: 2px; background: #f6f8fc; overflow: hidden;
	display: flex; align-items: center; justify-content: center; gap: 1px; }
.theme-ro .st-v > i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#d9e5fb, #b3c8f0); border-right: 1px solid #9db4e4; }
.theme-ro .st-v > b, .theme-ro .st-v > em { position: relative; font-style: normal; }
.theme-ro .st-v > b { font-weight: bold; }
.theme-ro .st-v > em { color: #1c7c3a; font-weight: bold; }
.theme-ro .st-up { width: 14px; height: 14px; min-height: 14px; padding: 0; border: 0; border-radius: 2px; background: none; cursor: pointer; }
.theme-ro .st-up::after { content: ''; display: block; margin: 3px auto 0; width: 0; height: 0; border: 5px solid transparent; border-bottom: 7px solid #3f66cc; border-top: 0; }
.theme-ro .st-up:disabled { cursor: default; }
.theme-ro .st-up:disabled::after { border-bottom-color: #c9cfdc; }
.theme-ro .st-up:hover:not(:disabled) { background: var(--ro-hover); }
html.ro-skin .theme-ro .st-up::after { width: 11px; height: 11px; border: 0; margin: 1px auto 0; background: var(--ro-arw-up) center / 11px 11px no-repeat; }
html.ro-skin .theme-ro .st-up:disabled::after { opacity: 0.25; }
.theme-ro .st-c { font-size: 11px; color: #555; text-align: center; }
.theme-ro .ro-stat2 .st-right { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 6px; row-gap: 2px; align-content: start; }
.theme-ro .ro-stat2 .st-right .st-k.c2 { padding-left: 8px; border-left: 1px solid #eef1f6; }
.theme-ro .st-more { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; row-gap: 2px; align-content: start; }
.theme-ro .st-right .st-k, .theme-ro .st-right .st-n, .theme-ro .st-more .st-k, .theme-ro .st-more .st-n { line-height: 18px; height: 18px; white-space: nowrap; }
.theme-ro .st-right .st-k.st-wide { grid-column: 1 / 3; }
.theme-ro .st-right .st-n.st-wide { grid-column: 3 / 5; }
.theme-ro .st-n { text-align: right; overflow: hidden; text-overflow: ellipsis; }
.theme-ro .st-right .st-pt { margin-top: 2px; padding-top: 0; border-top: 1px solid #dfe4ee; height: 18px; }
.theme-ro .st-n.st-pt { font-weight: bold; color: #b0262b; }
.theme-ro .st-more { margin-top: 6px; padding: 5px 6px; border: 1px solid #dfe4ee; border-radius: 3px; background: #f7f9fd; font: 12px/16px var(--ro-font); }
.theme-ro .st-more small { color: #666; font-size: 10px; }
.theme-ro .win-status .win-foot { justify-content: center; }
.theme-ro .st-more-btn { height: 18px; min-height: 18px; padding: 0 10px; font: 11px var(--ro-font); }
.theme-ro .st-more-btn.on { background: var(--ro-sel); }

/* ---- equipment: equipwin_bg 280x130, five slots on each side, the character in the middle column ---- */
.theme-ro .ro-equip { position: relative; width: 280px; height: 130px; background: #fff; }
html:not(.ro-skin) .theme-ro .ro-equip { background: linear-gradient(90deg, transparent 112px, #c3c3c3 112px 113px, #f6f6f6 113px 169px, #c3c3c3 169px 170px, transparent 170px), #fff; }
html.ro-skin .theme-ro .ro-equip { background: var(--ro-equipwin-bg) 0 0 / 280px 130px no-repeat; }
.theme-ro .eslot { position: absolute; width: 101px; height: 24px; cursor: pointer; }
.theme-ro .eslot.empty { cursor: default; }
.theme-ro .eslot.l { left: 5px; }
.theme-ro .eslot.r { right: 6px; }
.theme-ro .eslot .ic { position: absolute; top: 0; }
.theme-ro .eslot.l .ic { left: 0; }
.theme-ro .eslot.r .ic { right: 0; }
.theme-ro .eslot .enm { position: absolute; top: 6px; width: 72px; font: 11px/14px var(--ro-font); color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-ro .eslot.l .enm { left: 27px; }
.theme-ro .eslot.r .enm { right: 27px; text-align: right; }
.theme-ro .eslot:not(.empty) .enm { background: rgba(255, 255, 255, 0.9); }
.theme-ro .eslot:hover:not(.empty) .enm { color: #2a4aa0; text-decoration: underline; }
.theme-ro .eslot .enm.lbl { color: #b9c0d0; font-weight: bold; }
html.ro-skin .theme-ro .eslot .enm.lbl { visibility: hidden; }
html:not(.ro-skin) .theme-ro .eslot.empty::before { content: ''; position: absolute; top: 6px; width: 24px; height: 12px; border-radius: 50%; background: #b8c4e2; opacity: 0.7; }
html:not(.ro-skin) .theme-ro .eslot.l.empty::before { left: 0; }
html:not(.ro-skin) .theme-ro .eslot.r.empty::before { right: 0; }
.theme-ro .ro-equip .eq-char { position: absolute; left: 113px; top: 4px; width: 56px; height: 120px; image-rendering: pixelated; pointer-events: none; }
.theme-ro .ro-equip .eq-rot { position: absolute; left: 113px; top: 110px; width: 56px; display: flex; justify-content: space-between; pointer-events: auto; }
.theme-ro .eq-extra { padding: 3px 5px; border-top: 1px solid #dfe3ea; background: #fff; }

/* ---- skill tree: icon rows ---- */
.theme-ro .win-skills .win-body { padding: 3px 5px; }
.theme-ro .skill-row .btns button { min-width: 0; }

/* ---- hotkey bar: shortitem_bg 280x34, nine 24x24 slots every 29px from x 5 ---- */
.theme-ro .hotbar { width: 280px; height: 34px; display: block; gap: 0; bottom: 34px; border: 1px solid var(--ro-edge); border-radius: 4px;
	background: repeating-linear-gradient(#ffffff 0 2px, #f2f2f2 2px 4px); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); }
html.ro-skin .theme-ro .hotbar { border: 0; border-radius: 0; background: var(--ro-shortitem-bg) 0 0 / 280px 34px no-repeat; }
.theme-ro .hotbar .hk {
	position: absolute; left: calc(4px + 29px * var(--i, 0)); top: 4px; width: 26px; height: 26px; min-height: 26px; padding: 0; border: 1px solid #b9b9b9;
	border-radius: 0; background: #f4f4f4; display: block; overflow: visible;
}
html.ro-skin .theme-ro .hotbar .hk { border-color: transparent; background: none; }
.theme-ro .hotbar .hk:hover:not(:disabled) { background: rgba(88, 118, 196, 0.18); }
html.ro-skin .theme-ro .hotbar .hk:hover:not(:disabled) { background: rgba(88, 118, 196, 0.18); }
.theme-ro .hotbar .hk b { position: absolute; left: 1px; top: 0; font: 9px/10px var(--ro-font); color: #8a8a8a; z-index: 1; }
.theme-ro .hotbar .hk:not(.empty) b { display: none; }
.theme-ro .hotbar .hk .tx { display: none; }
.theme-ro .hotbar .hk .ic, .theme-ro .hotbar .hk .sic { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 0; font-size: 10px; }
.theme-ro .hotbar .hk .ic img, .theme-ro .hotbar .hk .sic img { width: 24px; height: 24px; }
.theme-ro .hotbar .hk em { display: block; position: absolute; right: 0; bottom: -1px; font: 10px/11px var(--ro-font); font-style: normal; color: #000;
	text-shadow: -1px 0 #fff, 1px 0 #fff, 0 -1px #fff, 0 1px #fff; pointer-events: none; }
.theme-ro .hotbar .hk.assign { outline: 1px dashed #c08a00; outline-offset: -1px; }

/* ---- chat: translucent dark log, input bar like the client's (dialog_bg: name box + message box) ---- */
.theme-ro #chat.panel { bottom: 76px; width: 480px; background: rgba(0, 0, 0, 0.42); border: 0; border-radius: 0; backdrop-filter: none; color: #fff; }
.theme-ro .chat-tabs { padding: 0; gap: 1px; background: none; }
.theme-ro .chat-log { font: 12px/16px var(--ro-font); padding: 3px 6px; height: 128px; scrollbar-width: thin; scrollbar-color: #8b9bc4 transparent; }
.theme-ro .chat-log div { padding: 0; }
.theme-ro .chat-form { padding: 2px 3px; gap: 3px; border: 1px solid #a8b0c2; border-radius: 3px; background: linear-gradient(#ffffff, #eceef2); }
.theme-ro .chat-form input { background: #f1f1f1; border: 1px solid #c4c4c4; box-shadow: inset 1px 1px 0 #dadada; min-height: 18px; height: 18px; color: #000; }
.theme-ro .chat-form button { height: 18px; min-height: 18px; line-height: 16px; }
html.ro-skin .theme-ro .chat-form button { line-height: 18px; }
.theme-ro .chat-to { width: 90px; }
.theme-ro .ch-public { color: #ffffff; } .theme-ro .ch-whisper { color: #ffff00; } .theme-ro .ch-party { color: #ffc8c8; } .theme-ro .ch-guild { color: #b4ffb4; }
.theme-ro .ch-system { color: #ffff63; } .theme-ro .ch-broadcast { color: #ffff63; } .theme-ro .ch-error { color: #ff7b7b; } .theme-ro .ch-npc { color: #c8ffc8; }
.theme-ro .ch-exp { color: #ffe9a8; } .theme-ro .ch-item { color: #a8ffe0; } .theme-ro .ch-gm { color: #ffb36b; }

/* ---- menu bar (extra shortcuts: cart, mail, sit, debug ...) ---- */
.theme-ro .menubar { height: 28px; padding: 3px 6px; gap: 3px; background: linear-gradient(#f4f6fb, #d4dcef); border-top: 1px solid #8fa1cb; }
.theme-ro .menubar button { min-height: 20px; height: 20px; }
.theme-ro .menubar button.on { font-weight: bold; color: #1d3a8a; }
.theme-ro .menubar button kbd { font: 10px var(--ro-font); color: #777; }
.theme-ro .menubar button.on kbd { color: #4a5f99; }
.theme-ro .menubar button.notify::after { color: #d35400; }

/* ---- popups, banners, toasts, NPC ---- */
.theme-ro .popup { background: #fff; border: 1px solid var(--ro-edge); border-radius: 0; padding: 0 8px 8px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45); color: #000; font: 12px/1.4 var(--ro-font); }
.theme-ro .popup h4 { margin: 0 -8px 8px; height: 17px; padding: 0 12px; font: 12px/17px var(--ro-font); font-weight: normal;
	background: linear-gradient(#e2eafa 0%, #b9cbf0 45%, #9fb6e6 55%, #c9d9f6 100%); }
html.ro-skin .theme-ro .popup h4 { background: var(--ro-titlebar-left) left top / 12px 17px no-repeat, var(--ro-titlebar-right) right top / 12px 17px no-repeat, var(--ro-titlebar-mid) 12px 0 / calc(100% - 24px) 17px no-repeat; }
.theme-ro .popup.menu { padding: 0 0 3px; gap: 0; min-width: 150px; }
.theme-ro .popup.menu .title { height: 17px; padding: 0 12px; font: 12px/17px var(--ro-font); border: 0; margin-bottom: 2px;
	background: linear-gradient(#e2eafa 0%, #b9cbf0 45%, #9fb6e6 55%, #c9d9f6 100%); }
html.ro-skin .theme-ro .popup.menu .title { background: var(--ro-titlebar-left) left top / 12px 17px no-repeat, var(--ro-titlebar-right) right top / 12px 17px no-repeat, var(--ro-titlebar-mid) 12px 0 / calc(100% - 24px) 17px no-repeat; }
.theme-ro .popup.menu button, html.ro-skin .theme-ro .popup.menu button { height: 20px; border: 0; border-radius: 0; background: none; text-align: left; padding: 0 12px; }
.theme-ro .popup.menu button:hover, html.ro-skin .theme-ro .popup.menu button:hover:not(:disabled) { background: var(--ro-sel); }
.theme-ro .popup .actions { margin-top: 8px; }
.theme-ro .banner { background: #fff; border: 1px solid var(--ro-edge); border-radius: 0; color: #000; font: bold 12px var(--ro-font); padding: 3px 8px; }
.theme-ro .toast { background: rgba(255, 255, 255, 0.95); border: 1px solid var(--ro-edge); border-radius: 0; color: #000; font: 12px var(--ro-font); padding: 4px 12px; }
.theme-ro .toast.err { border-color: #c0392b; color: #9b1c1c; }
.theme-ro .npc-text { font: 12px/1.6 var(--ro-font); min-height: 80px; }
.theme-ro .npc-menu { gap: 2px; }
.theme-ro .npc-menu button, html.ro-skin .theme-ro .npc-menu button { height: auto; min-height: 20px; border: 0; border-radius: 0; background: none; padding: 1px 6px; text-align: left; line-height: 18px; }
.theme-ro .npc-menu button:hover, html.ro-skin .theme-ro .npc-menu button:hover:not(:disabled) { background: var(--ro-sel); }
.theme-ro .npc-cutin { border-color: #c3c8d4; color: #555; font-size: 11px; }
.theme-ro .trade-box { border-color: #c3c8d4; border-radius: 0; background: #fff; }
.theme-ro .debug-log { color: #222; }
.theme-ro .debug-log .in { color: #1d4f91; } .theme-ro .debug-log .out { color: #8a4b00; } .theme-ro .debug-log .sys { color: #666; }
.theme-ro .overlay { background: rgba(0, 0, 0, 0.45); }
.theme-ro .spinner { border-color: #c3c8d4; border-top-color: #5876c4; }

/* ---- login: the client's login background (bgi_temp, stretched over the screen like the client draws it) and the
   login window win_login 280x120 with its ID / password boxes, the save checkbox (chk_save), Connect / Exit (btn_connect,
   btn_exit); a refused login shows in win_msgbox like the client's message box. Without the data: a drawn look-alike. ---- */
/* Midgard's own picture and logo (client/img, tools/art/midgard-art.js) behind the login and character windows, not the
   game data's login picture */
.theme-ro #screen-login, .theme-ro #screen-chars { background: #142456 url('../img/midgard-bg.jpg') 50% 50% / cover no-repeat; }
.theme-ro #screen-login::before, .theme-ro #screen-chars::before { content: ''; position: absolute; left: 50%; top: 3.5vh; transform: translateX(-50%);
	width: min(460px, 86vw); aspect-ratio: 980 / 300; background: url('../img/midgard-logo.png') 50% 50% / contain no-repeat; pointer-events: none; }
.theme-ro #screen-chars::before { width: min(400px, 70vw); top: 1.5vh; }
@media (max-height: 640px) { .theme-ro #screen-chars::before { display: none; } }
.theme-ro #screen-login.active { align-items: center; }
.theme-ro .card { background: #fff; border: 1px solid var(--ro-edge); border-radius: 0; color: #000; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55); }
.theme-ro .login-card { width: 280px; max-width: 280px; padding: 0; margin-top: 22vh; font-size: 12px; }
.theme-ro .login-card h1 { margin: 0; height: 17px; padding: 0 14px; font: 12px/17px var(--ro-font); font-weight: normal; color: #000;
	background: linear-gradient(#e2eafa 0%, #b9cbf0 45%, #9fb6e6 55%, #c9d9f6 100%); }
.theme-ro .login-card h1::before { content: 'Login'; }
.theme-ro .login-card h1 { font-size: 0; }
.theme-ro .login-card h1::before { font-size: 12px; }
.theme-ro .login-card form { margin: 0; padding: 14px 16px 0; gap: 8px; }
.theme-ro .login-card form label:not(.check) { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 6px; font: bold 12px var(--ro-font); color: var(--ro-navy); text-align: right; }
.theme-ro .login-card input:not([type=checkbox]) { min-height: 18px; height: 18px; font-size: 12px; background: #f1f1f1; border: 1px solid #c4c4c4; box-shadow: inset 1px 1px 0 #dadada; }
.theme-ro .login-card label.check { margin-left: 80px; font-size: 11px; color: #333; }
.theme-ro .login-card .login-bar { display: flex; justify-content: flex-end; gap: 4px; margin: 6px -16px 0; padding: 0 8px; height: 24px; align-items: center;
	background: repeating-linear-gradient(#ffffff 0 2px, #f1f1f1 2px 4px); border-top: 1px solid #dfe3ea; }
.theme-ro .login-card button.primary { min-height: 20px; height: 20px; font-size: 12px; min-width: 64px; }
.theme-ro .login-card > p { margin: 0; padding: 4px 12px; font-size: 11px; }
.theme-ro .login-card .hint { margin: 0; border: 0; border-top: 1px solid #e3e6ec; background: #f7f9fd; padding: 6px 12px; font-size: 11px; }
.theme-ro .login-card #login-error:empty { display: none; }
.theme-ro .login-card #login-error { color: #c62828; }
.theme-ro .login-card #login-error.info { color: #1f4e9a; }
.theme-ro .login-card > p.muted.small { color: #777; font-size: 10px; padding-bottom: 6px; }
.theme-ro .login-card a { color: #2a4aa0; }
/* with the client data: the window is the texture itself, the fields sit in its boxes (ID x 91-217 y 29-46, password
   y 61-78), the save checkbox right of the ID box, the two buttons in the bottom strip (y 92-119) */
html.ro-login-win .theme-ro .login-card { position: relative; display: block; height: 120px; margin: 24vh 0 0; border: 0; box-shadow: none; background: var(--ro-win-login) 0 0 / 280px 120px no-repeat; }
html.ro-login-win .theme-ro .login-card > h1, html.ro-login-win .theme-ro .login-card > .brand, html.ro-login-win .theme-ro .login-card > p.muted, html.ro-login-win .theme-ro .login-card > .hint { display: none; }
html.ro-login-win .theme-ro .login-card form { position: absolute; inset: 0; display: block; margin: 0; padding: 0; }
html.ro-login-win .theme-ro .login-card form label { display: block; font-size: 0; }
html.ro-login-win .theme-ro .login-card input:not([type=checkbox]) { position: absolute; left: 93px; width: 123px; height: 16px; min-height: 16px; padding: 0 2px; border: 0; box-shadow: none;
	background: transparent; font: 12px/16px var(--ro-font); color: #000; outline: 0; }
html.ro-login-win .theme-ro #login-user { top: 30px; }
html.ro-login-win .theme-ro #login-pass { top: 62px; }
html.ro-login-win .theme-ro #login-remember { position: absolute; left: 225px; top: 33px; width: 34px; height: 10px; min-height: 0; margin: 0; padding: 0; border: 0; box-shadow: none;
	appearance: none; -webkit-appearance: none; cursor: pointer; background: var(--ro-chk-save-off) 0 0 / 34px 10px no-repeat; }
html.ro-login-win .theme-ro #login-remember:checked { background-image: var(--ro-chk-save-on); }
/* the Thai picture of the check box (uiskin.js thaiCheck): 44x16 */
html.ro-thai.ro-login-win .theme-ro #login-remember { top: 30px; width: 44px; height: 16px; background-size: 44px 16px; }
html.ro-login-win .theme-ro #login-remember:focus-visible { outline: 1px dotted #5876c4; }
html.ro-login-win .theme-ro .login-card .login-bar { position: absolute; left: 0; right: 0; top: 92px; height: 28px; margin: 0; padding: 0 5px 0 0; border: 0; background: none;
	display: flex; justify-content: flex-end; align-items: center; gap: 2px; }
html.ro-login-win .theme-ro .login-card #login-error:not(:empty) { position: absolute; left: 0; top: 0; z-index: 3; width: 280px; height: 120px; margin: 0;
	padding: 24px 16px 30px; display: flex; align-items: center; justify-content: center; text-align: center; color: #000; font: 12px/1.5 var(--ro-font); cursor: pointer;
	background: var(--ro-win-msgbox) 0 0 / 280px 120px no-repeat; }
html.ro-login-win .theme-ro .login-card #login-error:not(:empty)::after { content: ''; position: absolute; left: 233px; top: 96px; width: 42px; height: 20px; background: var(--ro-b-ok) 0 0 / 42px 20px no-repeat; }
html.ro-login-win .theme-ro .login-card #login-error:not(:empty):hover::after { background-image: var(--ro-b-ok-h, var(--ro-b-ok)); }

/* ---- picture buttons (.rob): the client's own button pictures, 42x20 btn_<name> (_a hover, _b pressed) and the 221x20
   esc_NN buttons; the text of the button stays for screen readers and for the drawn look without the data ---- */
html.ro-pics .theme-ro button.rob { width: 42px; min-width: 42px; height: 20px; min-height: 20px; padding: 0; border: 0; border-radius: 0; flex: none;
	font-size: 0; line-height: 0; color: transparent; overflow: hidden; background: var(--rob) 0 0 / 100% 100% no-repeat; }
html.ro-pics .theme-ro button.rob:hover:not(:disabled) { background: var(--rob-h, var(--rob)) 0 0 / 100% 100% no-repeat; }
html.ro-pics .theme-ro button.rob:active:not(:disabled) { background: var(--rob-p, var(--rob-h, var(--rob))) 0 0 / 100% 100% no-repeat; }
html.ro-pics .theme-ro button.rob:disabled { background: var(--rob) 0 0 / 100% 100% no-repeat; filter: grayscale(1); opacity: 0.5; }
html.ro-pics .theme-ro button.rob.wide { width: 221px; min-width: 221px; }
.theme-ro .rob.b-ok { --rob: var(--ro-b-ok); --rob-h: var(--ro-b-ok-h); --rob-p: var(--ro-b-ok-p); }
.theme-ro .rob.b-cancel { --rob: var(--ro-b-cancel); --rob-h: var(--ro-b-cancel-h); --rob-p: var(--ro-b-cancel-p); }
.theme-ro .rob.b-next { --rob: var(--ro-b-next); --rob-h: var(--ro-b-next-h); --rob-p: var(--ro-b-next-p); }
.theme-ro .rob.b-close { --rob: var(--ro-b-close); --rob-h: var(--ro-b-close-h); --rob-p: var(--ro-b-close-p); }
.theme-ro .rob.b-make { --rob: var(--ro-b-make); --rob-h: var(--ro-b-make-h); --rob-p: var(--ro-b-make-p); }
.theme-ro .rob.b-del { --rob: var(--ro-b-del); --rob-h: var(--ro-b-del-h); --rob-p: var(--ro-b-del-p); }
.theme-ro .rob.b-use { --rob: var(--ro-b-use); --rob-h: var(--ro-b-use-h); --rob-p: var(--ro-b-use-p); }
.theme-ro .rob.b-buy { --rob: var(--ro-b-buy); --rob-h: var(--ro-b-buy-h); --rob-p: var(--ro-b-buy-p); }
.theme-ro .rob.b-sell { --rob: var(--ro-b-sell); --rob-h: var(--ro-b-sell-h); --rob-p: var(--ro-b-sell-p); }
.theme-ro .rob.b-send { --rob: var(--ro-b-send); --rob-h: var(--ro-b-send-h); --rob-p: var(--ro-b-send-p); }
.theme-ro .rob.b-get { --rob: var(--ro-b-get); --rob-h: var(--ro-b-get-h); --rob-p: var(--ro-b-get-p); }
.theme-ro .rob.b-exchange { --rob: var(--ro-b-exchange); --rob-h: var(--ro-b-exchange-h); --rob-p: var(--ro-b-exchange-p); }
.theme-ro .rob.b-restart { --rob: var(--ro-b-restart); --rob-h: var(--ro-b-restart-h); --rob-p: var(--ro-b-restart-p); }
.theme-ro .rob.b-connect { --rob: var(--ro-b-connect); --rob-h: var(--ro-b-connect-h); --rob-p: var(--ro-b-connect-p); }
.theme-ro .rob.b-exit { --rob: var(--ro-b-exit); --rob-h: var(--ro-b-exit-h); --rob-p: var(--ro-b-exit-p); }
.theme-ro .rob.b-esc01 { --rob: var(--ro-b-esc01); --rob-h: var(--ro-b-esc01-h); --rob-p: var(--ro-b-esc01-p); }
.theme-ro .rob.b-esc02 { --rob: var(--ro-b-esc02); --rob-h: var(--ro-b-esc02-h); --rob-p: var(--ro-b-esc02-p); }
.theme-ro .rob.b-esc03 { --rob: var(--ro-b-esc03); --rob-h: var(--ro-b-esc03-h); --rob-p: var(--ro-b-esc03-p); }
.theme-ro .rob.b-esc04 { --rob: var(--ro-b-esc04); --rob-h: var(--ro-b-esc04-h); --rob-p: var(--ro-b-esc04-p); }
.theme-ro .rob.b-esc05 { --rob: var(--ro-b-esc05); --rob-h: var(--ro-b-esc05-h); --rob-p: var(--ro-b-esc05-p); }
.theme-ro .rob.b-esc06 { --rob: var(--ro-b-esc06); --rob-h: var(--ro-b-esc06-h); --rob-p: var(--ro-b-esc06-p); }
.theme-ro .rob.b-esc07 { --rob: var(--ro-b-esc07); --rob-h: var(--ro-b-esc07-h); --rob-p: var(--ro-b-esc07-p); }
.theme-ro .rob.b-esc08 { --rob: var(--ro-b-esc08); --rob-h: var(--ro-b-esc08-h); --rob-p: var(--ro-b-esc08-p); }
.theme-ro .rob.b-esc09 { --rob: var(--ro-b-esc09); --rob-h: var(--ro-b-esc09-h); --rob-p: var(--ro-b-esc09-p); }
.theme-ro .rob.b-esc10 { --rob: var(--ro-b-esc10); --rob-h: var(--ro-b-esc10-h); --rob-p: var(--ro-b-esc10-p); }
/* the esc_NN pictures without a hover picture light up a little instead */
html.ro-pics .theme-ro button.rob.wide:hover:not(:disabled) { filter: brightness(1.06); }

/* ---- character select / make (charsro.js): win_select / win_make 576x342 drawn as they are (their titles included), the
   characters standing in the three boxes, the picture buttons in the bottom bar (y 314-341) ---- */
.theme-ro.ro-chars #screen-chars.active { align-items: center; }
.theme-ro.ro-chars .chars-wrap { width: auto; max-width: none; }
.theme-ro.ro-chars .chars-head { display: none; }
.theme-ro.ro-chars #chars-list { display: block; }
.theme-ro.ro-chars #chars-error { text-align: center; color: #ffd1d1; text-shadow: 0 1px 2px #000; font-weight: bold; }
/* ---- character select (charsro.js): the newer client's window - 15 slots (5 x 3) with the characters, the page
   "รายการตัวละคร 1/N", the selected character on the right, "เริ่มลบตัวละคร" and the big "เริ่มเกม" button ---- */
.theme-ro .cs-win { --cs-w: 92px; --cs-h: 130px; position: relative; width: max-content; max-width: 100%; color: #000; font: 12px/1.35 var(--ro-font);
	background: #fff; border: 1px solid #8796bd; border-radius: 6px; box-shadow: 0 8px 30px rgba(6, 14, 40, 0.55); overflow: hidden; margin-top: 4vh; }
.theme-ro .cs-title { height: 22px; padding: 0 10px; display: flex; align-items: center; gap: 6px; font: bold 12px/22px var(--ro-font); color: #1b2a5c;
	background: linear-gradient(#e6edfb 0%, #c2d2f2 48%, #a9bfec 52%, #d3e0f8 100%); border-bottom: 1px solid #8796bd; }
html.ro-skin .theme-ro .cs-title { background: var(--ro-titlebar-mid) 0 0 / 100% 100%; font-weight: normal; color: #000; }
.theme-ro .cs-title > i { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #6f8fd6 60%, #3a57a6); }
.theme-ro .cs-title .cs-count { margin-left: auto; font-weight: normal; color: #42507a; font-size: 11px; }
.theme-ro .cs-main { display: flex; gap: 12px; padding: 12px; background: linear-gradient(#f7f9fe, #ffffff 40%); }
.theme-ro .cs-grid { display: grid; grid-template-columns: repeat(5, var(--cs-w)); grid-auto-rows: var(--cs-h); gap: 6px; }
.theme-ro .cs-slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 2px 5px; cursor: pointer;
	border: 1px solid #c8d2e8; border-radius: 5px; background: radial-gradient(ellipse 22px 6px at 50% 82px, rgba(70, 80, 110, 0.35), transparent 100%), linear-gradient(#fbfcff, #eef2fa);
	transition: border-color 0.12s, box-shadow 0.12s; }
.theme-ro .cs-slot:hover { border-color: #8ea5dc; }
.theme-ro .cs-slot.sel { border: 2px solid #4e6fc6; padding: 0 1px 4px; box-shadow: 0 0 0 3px rgba(108, 140, 220, 0.25), inset 0 0 14px rgba(108, 140, 220, 0.18);
	background: radial-gradient(ellipse 22px 6px at 50% 82px, rgba(70, 80, 110, 0.35), transparent 100%), linear-gradient(#f2f6ff, #dfe8fb); }
.theme-ro .cs-slot.closed { cursor: default; opacity: 0.35; background: repeating-linear-gradient(45deg, #f2f3f6 0 6px, #e8eaef 6px 12px); }
.theme-ro .cs-slot canvas { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 88px; height: 96px; image-rendering: pixelated; pointer-events: none; }
.theme-ro .cs-slot.deleting canvas { opacity: 0.4; filter: grayscale(1); }
.theme-ro .cs-slot .cs-nm { position: relative; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; font-size: 11px; color: #18244a; }
.theme-ro .cs-slot .cs-lv { position: relative; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: #5a6585; }
.theme-ro .cs-slot.empty { border-style: dashed; background: linear-gradient(#fdfdff, #f3f5fa); justify-content: center; gap: 2px; }
.theme-ro .cs-slot.empty.sel { border-style: solid; }
.theme-ro .cs-slot.empty .cs-plus { font: 300 30px/30px var(--ro-font); color: #a9b6d6; }
.theme-ro .cs-slot.empty .cs-nm { color: #9aa4bd; font-weight: normal; }
.theme-ro .cs-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; font-size: 12px; color: #2c3b6b; }
html .theme-ro .cs-win button.cs-pg { width: 22px; height: 22px; min-height: 22px; padding: 0; border: 1px solid #b7c3df; border-radius: 50%; background: linear-gradient(#fff, #e7ecf7); cursor: pointer; }
html .theme-ro .cs-win button.cs-pg::after { content: ''; display: block; margin: 0 auto; width: 0; height: 0; border: 5px solid transparent; }
html .theme-ro .cs-win button.cs-pg.l::after { border-left: 0; border-right: 7px solid #4e6fc6; margin-left: 6px; }
html .theme-ro .cs-win button.cs-pg.r::after { border-right: 0; border-left: 7px solid #4e6fc6; margin-left: 8px; }
html .theme-ro .cs-win button.cs-pg:disabled { opacity: 0.35; cursor: default; }
.theme-ro .cs-info { width: 236px; flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid #d3dbec; border-radius: 6px; background: linear-gradient(#ffffff, #f4f7fd); }
.theme-ro .cs-who { display: flex; flex-direction: column; align-items: center; padding-bottom: 6px; border-bottom: 1px solid #e1e6f1;
	background: radial-gradient(ellipse 30px 8px at 50% 112px, rgba(70, 80, 110, 0.3), transparent 100%); }
.theme-ro .cs-who canvas.big { width: 106px; height: 132px; image-rendering: pixelated; }
.theme-ro .cs-who .cs-name { font-size: 14px; color: #18244a; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-ro .cs-who.empty { padding: 30px 0 20px; text-align: center; color: #5a6585; background: none; }
.theme-ro .cs-who.empty p { margin: 6px 0 0; font-size: 12px; }
.theme-ro .cs-kv, .theme-ro .cs-stats { display: grid; gap: 2px 8px; font-size: 12px; }
.theme-ro .cs-kv { grid-template-columns: 38px minmax(0, 1fr); }
.theme-ro .cs-stats { grid-template-columns: 30px 1fr 30px 1fr 30px 1fr; padding-top: 6px; border-top: 1px solid #e1e6f1; }
.theme-ro .cs-kv .k, .theme-ro .cs-stats .k { font: bold 11px/17px var(--ro-font); color: var(--ro-navy); }
.theme-ro .cs-kv .v { line-height: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 5px; background: #eef2fa; border-radius: 2px; }
.theme-ro .cs-stats .v { line-height: 17px; text-align: center; background: #eef2fa; border-radius: 2px; }
.theme-ro .cs-note { font-size: 11px; color: #555; }
.theme-ro .cs-note.del-info { color: #b06d00; font-weight: bold; }
.theme-ro .cs-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid #d5dced; background: repeating-linear-gradient(#ffffff 0 2px, #f2f4f8 2px 4px); }
.theme-ro .cs-bar .cs-del, .theme-ro .cs-bar .cs-out { display: flex; gap: 6px; }
.theme-ro .cs-bar .cs-out { margin-left: auto; }
html .theme-ro .cs-win button.cs-btn, .theme-ro .cs-bar #chars-logout { height: 26px; min-height: 26px; padding: 0 12px; font: 12px var(--ro-font); border: 1px solid #a9b4cc; border-radius: 4px; background: linear-gradient(#ffffff, #e6eaf3); color: #1f2a48; }
html .theme-ro .cs-win button.cs-btn:hover:not(:disabled), .theme-ro .cs-bar #chars-logout:hover { background: linear-gradient(#f4f8ff, #d9e3f7); }
html .theme-ro .cs-win button.cs-btn.danger { color: #a02424; }
html .theme-ro .cs-win button.cs-btn:disabled { opacity: 0.5; }
/* the big start button: a rounded pink pill with the Poring of the game data jumping on it */
html .theme-ro .cs-win button.cs-start { position: relative; display: flex; align-items: center; gap: 8px; height: 46px; min-height: 46px; padding: 0 22px 0 12px; border: 2px solid #c74f7c; border-radius: 26px;
	font: bold 17px var(--ro-font); color: #fff; text-shadow: 0 1px 2px rgba(110, 20, 50, 0.6); cursor: pointer;
	background: radial-gradient(ellipse at 35% 25%, #ffd0e0, transparent 55%), linear-gradient(#ff8fb4, #e8577f 60%, #d24671); box-shadow: 0 3px 0 #a8355a, 0 6px 16px rgba(200, 60, 100, 0.35); }
html .theme-ro .cs-win button.cs-start:hover:not(:disabled) { filter: brightness(1.07); }
html .theme-ro .cs-win button.cs-start:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #a8355a, 0 3px 8px rgba(200, 60, 100, 0.35); }
html .theme-ro .cs-win button.cs-start img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; margin: -10px -2px -4px; animation: cs-hop 1.4s ease-in-out infinite; }
@keyframes cs-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 40% { transform: translateY(-6px) scale(0.96, 1.04); } 60% { transform: translateY(0) scale(1.06, 0.94); } }
html .theme-ro .cs-win button.cs-start .cs-play { width: 0; height: 0; border: 9px solid transparent; border-right: 0; border-left: 14px solid #fff; margin-left: 6px; }
html .theme-ro .cs-win button.cs-start.make { border-color: #4769c2; background: radial-gradient(ellipse at 35% 25%, #d6e3ff, transparent 55%), linear-gradient(#7ea2f2, #4f76d8 60%, #3f63c4); box-shadow: 0 3px 0 #2f4c9a, 0 6px 16px rgba(60, 90, 200, 0.3); font-size: 15px; }
html .theme-ro .cs-win button.cs-start .cs-plus-i { font-style: normal; font-size: 24px; line-height: 1; }
html .theme-ro .cs-win button.cs-start:disabled { filter: grayscale(0.7); opacity: 0.6; cursor: default; }
@media (max-width: 860px) {
	.theme-ro .cs-win { --cs-w: 64px; --cs-h: 104px; margin-top: 2vh; }
	.theme-ro .cs-main { flex-direction: column; padding: 8px; gap: 8px; }
	.theme-ro .cs-grid { gap: 4px; }
	.theme-ro .cs-slot canvas { width: 66px; height: 72px; }
	.theme-ro .cs-info { width: auto; }
	.theme-ro .cs-who { flex-direction: row; gap: 10px; }
	.theme-ro .cs-who canvas.big { width: 70px; height: 88px; }
	.theme-ro .cs-bar { flex-wrap: wrap; padding: 6px 8px; }
	html .theme-ro .cs-win button.cs-start { height: 40px; min-height: 40px; font-size: 15px; }
}

/* ---- character make (charsro.js): win_make 576x342 drawn as it is (title redrawn in Thai), the character, the arrows,
   the stat hexagon, the picture buttons in the bottom bar (y 314-341) ---- */
.theme-ro .ro-charwin { position: relative; width: 576px; height: 342px; color: #000; font: 12px/1.3 var(--ro-font); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
	background: linear-gradient(#e2eafa 0%, #b9cbf0 45%, #9fb6e6 55%, #c9d9f6 100%) 0 0 / 100% 17px no-repeat, linear-gradient(#ffffff, #ffffff) 0 17px / 100% 297px no-repeat,
		repeating-linear-gradient(#ffffff 0 2px, #f1f1f1 2px 4px); border: 1px solid var(--ro-edge); }
html.ro-skin .theme-ro .ro-charwin { box-shadow: none; }
html.ro-skin .theme-ro .ro-select { border: 0; background: var(--ro-win-select) 0 0 / 576px 342px no-repeat; }
html.ro-skin .theme-ro .ro-make { border: 0; background: var(--ro-win-make) 0 0 / 576px 342px no-repeat; }
.theme-ro .ro-charwin > *, .theme-ro .ro-charwin form > * { position: absolute; }
.theme-ro .ro-charwin form { position: static; }
.theme-ro .ro-slot { top: 44px; width: 131px; height: 137px; cursor: pointer; border: 1px solid #c9d3ea;
	background: radial-gradient(ellipse 22px 8px at 50% 128px, #9a9a9a, transparent 100%); }
html.ro-skin .theme-ro .ro-slot { border-color: transparent; background: none; }
.theme-ro .ro-slot.closed { cursor: default; opacity: 0.4; }
.theme-ro .ro-slot canvas { display: block; width: 131px; height: 137px; image-rendering: pixelated; pointer-events: none; }
.theme-ro .ro-slot .rs-name { display: none; }
.theme-ro .ro-slot.sel { outline: 2px solid #7c95cf; outline-offset: 2px; }
html.ro-skin .theme-ro .ro-slot.sel { outline: 0; }
html.ro-skin .theme-ro .ro-slot.sel::before { content: ''; position: absolute; left: -5px; top: -5px; width: 139px; height: 144px; background: var(--ro-box-select) 0 0 / 139px 144px no-repeat; pointer-events: none; }
.theme-ro .ro-slot.deleting canvas { opacity: 0.45; }
.theme-ro .rs-empty { position: absolute; left: 35px; top: 58px; width: 60px; height: 14px; font: bold 12px var(--ro-font); color: #c03030; text-align: center; }
.theme-ro .rs-empty::before { content: 'EMPTY'; }
html.ro-skin .theme-ro .rs-empty { background: var(--ro-etc-empty) 0 0 / 60px 14px no-repeat; }
html.ro-skin .theme-ro .rs-empty::before { content: none; }
.theme-ro .rs-lbl { font: bold 11px/15px var(--ro-font); color: var(--ro-navy); height: 15px; }
.theme-ro .rs-lbl.l { left: 18px; } .theme-ro .rs-lbl.r { left: 163px; } .theme-ro .rs-lbl.m { left: 413px; }
.theme-ro .rs-lbl.name { left: 22px; top: 243px; }
html.ro-skin .theme-ro .rs-lbl { visibility: hidden; }
.theme-ro .rs-v { height: 15px; font: 11px/15px var(--ro-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.theme-ro .rs-v.l { left: 65px; width: 94px; } .theme-ro .rs-v.r { left: 210px; width: 94px; } .theme-ro .rs-v.m { left: 459px; width: 92px; }
html:not(.ro-skin) .theme-ro .rs-v { background: #e9eef7; }
.theme-ro .rs-info { left: 318px; top: 205px; width: 244px; font-size: 11px; color: #333; }
.theme-ro .rs-info.del-info { color: #b7860b; font-weight: bold; }
.theme-ro .rs-bar { left: 0; right: 0; bottom: 0; height: 28px; padding: 0 5px; display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.theme-ro .rs-bar .rs-left, .theme-ro .rs-bar .rs-right { display: flex; gap: 2px; }
.theme-ro .rs-bar button { min-width: 52px; }
.theme-ro .rs-bar #chars-logout { margin: 0; }
/* page arrows beside the slot row (more than three slots) */
.theme-ro .ro-charwin .rs-page, .theme-ro .ro-charwin .rs-arw { width: 16px; min-width: 0; height: 22px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none !important; cursor: pointer; }
.theme-ro .ro-charwin .rs-page { top: 101px; }
.theme-ro .rs-page.l { left: 26px; } .theme-ro .rs-page.r { left: 534px; }
.theme-ro .rs-page::after, .theme-ro .rs-arw::after { content: ''; display: block; margin: 0 auto; width: 0; height: 0; border: 7px solid transparent; }
.theme-ro .rs-page.l::after, .theme-ro .rs-arw.l::after { border-left: 0; border-right: 9px solid #5876c4; }
.theme-ro .rs-page.r::after, .theme-ro .rs-arw.r::after { border-right: 0; border-left: 9px solid #5876c4; }
.theme-ro .rs-page:hover:not(:disabled)::after, .theme-ro .rs-arw:hover::after { filter: brightness(1.35); }
.theme-ro .rs-page:disabled::after { opacity: 0.25; }
.theme-ro .rs-page:disabled { cursor: default; }
/* make window: the character on its shadow, hair style arrows beside the head, hair colour arrows beside the feet,
   the stat hexagon (every stat starts at 1), the name in the Name box */
.theme-ro #make-preview { left: 31px; top: 73px; width: 131px; height: 150px; image-rendering: pixelated; pointer-events: none; }
.theme-ro .ro-charwin .rs-arw { top: 125px; }
.theme-ro .ro-charwin .rs-arw.c { top: 186px; }
.theme-ro .rs-arw.l { left: 46px; } .theme-ro .rs-arw.r { left: 131px; }
.theme-ro .rs-arw.c::after { border-top-width: 6px; border-bottom-width: 6px; }
.theme-ro .rs-arw.c.l::after { border-right-color: #b06a2a; } .theme-ro .rs-arw.c.r::after { border-left-color: #b06a2a; }
.theme-ro .ro-charwin .rs-hid { left: 0; top: 0; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.theme-ro .rs-hex { left: 0; top: 0; pointer-events: none; }
.theme-ro .rs-hex polygon { fill: rgba(88, 118, 196, 0.5); stroke: #3f5ca8; stroke-width: 1; }
.theme-ro .rs-namein { left: 62px; top: 243px; width: 99px; height: 16px !important; min-height: 16px !important; font-size: 12px !important; padding: 0 3px; }
html.ro-skin .theme-ro .rs-namein { border: 0; box-shadow: none; background: transparent; outline: 0; }
@media (max-width: 600px) { .theme-ro .ro-charwin { zoom: 0.64; } }
@media (max-width: 370px) { .theme-ro .ro-charwin { zoom: 0.58; } }

/* ---- loading screen: one of the client's loadingNN.jpg stretched over the screen like the client, the gauge at the bottom ---- */
.theme-ro #loading.ro-load { background: #000 var(--ro-loading) 0 0 / 100% 100% no-repeat; align-items: flex-end; }
@media (max-aspect-ratio: 1/1) { .theme-ro #loading.ro-load { background-size: contain; background-position: center; } }
.theme-ro #loading.ro-load .card { background: none; border: 0; box-shadow: none; color: #fff; margin-bottom: 4vh; width: min(360px, 70vw); padding: 0;
	display: grid; justify-items: center; gap: 4px; font-size: 12px; text-shadow: 0 1px 2px #000; }
.theme-ro #loading.ro-load .spinner, .theme-ro #loading.ro-load #loading-text { display: none; }
.theme-ro #loading.ro-load .load-bar { display: block; width: 100%; height: 9px; border: 1px solid #5e5f61; border-radius: 4px; background: linear-gradient(#a2a6aa, #f4f5f6); overflow: hidden; }
.theme-ro #loading.ro-load .load-bar b { display: block; height: 100%; width: var(--load-p, 0%); background: linear-gradient(#456ab9, #8aa9e6 40%, #6f93dc); transition: width 0.2s; }
html.ro-skin .theme-ro #loading.ro-load .load-bar b { background: var(--ro-gzeblue-left) left top / 4px 100% no-repeat, var(--ro-gzeblue-right) right top / 4px 100% no-repeat, var(--ro-gzeblue-mid) 4px 0 / calc(100% - 8px) 100% no-repeat; }

/* ---- death: a small window with the client's esc_10 (save point) / esc_01 (character select) buttons; the game stays
   usable around it (chat), no dark cover ---- */
.theme-ro #death { background: none; pointer-events: none; align-items: flex-start; padding-top: 24vh; }
.theme-ro #death .death-card { pointer-events: auto; width: auto; min-width: 229px; gap: 3px; padding: 4px; box-shadow: none; }
.theme-ro #death .death-card h2 { margin: 0; font: bold 12px var(--ro-font); color: #000; }
.theme-ro #death .death-card button { min-height: 20px; height: 20px; font-size: 12px; }
html.ro-pics .theme-ro #death .death-card { padding: 3px; gap: 2px; }
html.ro-pics .theme-ro #death .death-card h2, html.ro-pics .theme-ro #death #death-quit { display: none; }

/* ---- inventory tabs: three tabs on the left like the client's tab_itm picture, drawn here with the Thai words (turned a
   quarter, top to bottom); the open one white and joined to the grid ---- */
.theme-ro .inv-ro .vtabs { display: flex; flex-direction: column; gap: 2px; width: 22px; padding: 2px 0 0; background: none; flex: none; }
.theme-ro .inv-ro .vtabs button, .theme-ro .inv-ro .vtabs button.on {
	position: relative; width: 22px; min-width: 22px; height: 46px; min-height: 46px; padding: 0; margin: 0;
	writing-mode: vertical-rl; text-orientation: sideways; font: 11px/20px var(--ro-font); letter-spacing: 0; color: #4c556a;
	border: 1px solid #aab4c9; border-right: 0; border-radius: 6px 0 0 6px;
	background: repeating-linear-gradient(#eef1f6 0 1px, #e1e6ef 1px 2px) !important; box-shadow: none;
}
.theme-ro .inv-ro .vtabs button:hover { color: #000; background: repeating-linear-gradient(#f6f8fb 0 1px, #e9edf4 1px 2px) !important; }
.theme-ro .inv-ro .vtabs button.on { color: #000; font-weight: bold; background: #fff !important; margin-right: -1px; width: 23px; z-index: 1; }

/* ---- desktop: the in-game screen of the client ---- */
@media (min-width: 701px) {
	/* the client's windows have no drop shadow */
	html.ro-skin .theme-ro .win, html.ro-skin .theme-ro #hud-char, html.ro-skin .theme-ro #hud-map, html.ro-skin .theme-ro .hotbar, html.ro-skin .theme-ro .popup { box-shadow: none; }
	/* chat: bottom left, 600 wide: the log over the map and the dialog_bg input bar (whisper name box, message box); F10 changes the log height */
	.theme-ro #chat.panel { left: 0; bottom: 0; width: 600px; background: none; }
	.theme-ro .chat-tabs { display: none; }
	.theme-ro .chat-log { height: 96px; background: rgba(0, 0, 0, 0.42); }
	.theme-ro #chat.chat-s2 .chat-log { height: 192px; }
	.theme-ro #chat.chat-s3 .chat-log { height: 336px; }
	/* the official chat window's tabs over the log: ทั่วไป / ข้อมูลต่อสู้, the size button (F10) at the right */
	.theme-ro .chat-rotabs { display: flex; align-items: flex-end; gap: 1px; height: 19px; padding: 0 3px 0 4px; }
	.theme-ro .chat-rotabs button { height: 17px; min-height: 17px; padding: 0 10px; margin: 0; border: 1px solid rgba(160, 172, 205, 0.9); border-bottom: 0; border-radius: 4px 4px 0 0;
		font: 11px/16px var(--ro-font); color: #34406a; background: linear-gradient(#e7ecf7, #c7d1e8) !important; box-shadow: none; }
	.theme-ro .chat-rotabs button.on { height: 19px; min-height: 19px; color: #000; font-weight: bold; background: linear-gradient(#ffffff, #eef2fb) !important; }
	.theme-ro .chat-rotabs button:hover:not(.on) { background: linear-gradient(#f3f6fc, #d9e1f2) !important; }
	.theme-ro .chat-rotabs .grow { flex: 1; }
	.theme-ro .chat-rotabs button.rt-size { width: 17px; padding: 0; border-radius: 3px 3px 0 0; }
	.theme-ro .chat-rotabs button.rt-size::after { content: ''; display: block; margin: 0 auto; width: 0; height: 0; border: 4px solid transparent; border-top: 0; border-bottom: 6px solid #4e6fc6; }
	.theme-ro #chat.chat-s3 .chat-rotabs button.rt-size::after { border-bottom: 0; border-top: 6px solid #4e6fc6; }
	.theme-ro .ch-battle { color: #e4e8f2; }
	/* the client's scroll bar (scroll0up / scroll0down / scroll0mid, the bar scroll0bar_*) on the chat log */
	html.ro-skin .theme-ro .chat-log { scrollbar-width: auto; scrollbar-color: auto; }
	html.ro-skin .theme-ro .chat-log::-webkit-scrollbar { width: 13px; }
	html.ro-skin .theme-ro .chat-log::-webkit-scrollbar-track { background: var(--ro-scroll-mid) 0 0 / 13px 13px repeat-y; }
	html.ro-skin .theme-ro .chat-log::-webkit-scrollbar-thumb { min-height: 16px; background: var(--ro-scroll-bar-up) 0 0 / 13px 4px no-repeat, var(--ro-scroll-bar-down) 0 100% / 13px 4px no-repeat,
		var(--ro-scroll-bar-mid) 0 4px / 13px calc(100% - 8px) no-repeat; }
	html.ro-skin .theme-ro .chat-log::-webkit-scrollbar-button:single-button:vertical:decrement { display: block; height: 13px; background: var(--ro-scroll-up) 0 0 / 13px 13px no-repeat; }
	html.ro-skin .theme-ro .chat-log::-webkit-scrollbar-button:single-button:vertical:increment { display: block; height: 13px; background: var(--ro-scroll-down) 0 0 / 13px 13px no-repeat; }
	.theme-ro .chat-form input::placeholder { color: transparent; }
	.theme-ro .chat-form .chat-send { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); opacity: 0; }
	html.ro-skin .theme-ro .chat-form { position: relative; display: block; width: 600px; height: 24px; padding: 0; border: 0; border-radius: 0; background: var(--ro-dialog-bg) 0 0 / 600px 24px no-repeat; }
	html.ro-skin .theme-ro .chat-form input { position: absolute; top: 4px; height: 16px; min-height: 16px; padding: 0 3px; border: 0; box-shadow: none; background: transparent;
		font: 12px/16px var(--ro-font); color: #000; outline: 0; }
	html.ro-skin .theme-ro #chat-to { left: 4px; width: 90px; }
	html.ro-skin .theme-ro #chat-input { left: 108px; width: 461px; }
	/* the hotkey bar at the bottom right; no menu bar: windows open from Basic Info and the Alt keys like the client */
	.theme-ro .hotbar { left: auto; right: 4px; transform: none; bottom: 4px; }
	.theme-ro .menubar { display: none; }
	.theme-ro .hotbar .hk b, .theme-ro .hotbar .hk em.lv { display: none; }
	/* minimap: the zoom buttons appear small over its corner while the mouse is on it */
	.theme-ro #hud-map .zoom { position: absolute; right: 7px; bottom: 7px; margin: 0; opacity: 0; transition: opacity 0.15s; }
	.theme-ro #hud-map:hover .zoom, .theme-ro #hud-map .zoom:focus-within { opacity: 1; }
	.theme-ro #hud-map .zoom button { width: 16px; height: 16px; min-height: 16px; padding: 0; font-size: 11px; line-height: 14px; }
	/* status icons: the picture with the time left under it (name and time in a box under the mouse, ui.js efstTip);
	   states without a picture show nothing, like the client */
	.theme-ro .efst-list.ro-efst .efst:not(.has-icon) { display: none; }
}
@media (min-width: 701px) and (max-width: 900px) { .theme-ro .hotbar { bottom: 128px; } }

/* ---- phone: the original sizes are kept; Basic Info is scaled so the minimap still fits beside it ---- */
@media (max-width: 700px) {
	.theme-ro #hud-char { left: 3px; top: 3px; width: 280px; max-width: none; transform: scale(0.76); transform-origin: 0 0; }
	.theme-ro #hud-map { right: 3px; top: 3px; width: 112px; }
	.theme-ro #minimap { width: 102px; height: 96px; }
	.theme-ro .hud-mapname { font-size: 11px; padding: 0 4px 0 8px; }
	.theme-ro #chat.panel { left: 0; right: 0; width: auto; bottom: 128px; }
	.theme-ro .chat-log { height: 64px; }
	.theme-ro #chat.expanded .chat-log { height: 38vh; }
	.theme-ro .hotbar { left: 50%; right: auto; transform: translateX(-50%); bottom: 86px; padding: 0; }
	.theme-ro .menubar { height: 78px; padding: 5px 4px; gap: 4px; }
	.theme-ro .menubar button { height: 32px; min-height: 32px; font-size: 12px; padding: 0 2px; }
	.theme-ro .win { border-radius: 0; }
	.theme-ro .win-head { cursor: default; }
}
/* card layout (no WebGL2: the 2D renderer has no portraits) */
.theme-ro .char-card { background: #fff; border: 1px solid var(--ro-edge); border-radius: 0; color: #000; }
.theme-ro .chars-head h2 { color: #fff; font: bold 16px var(--ro-font); }

/* ---- skill tree: rows of 32px like the original list, the Lv UP button (skill_up_a / skill_up_b) ---- */
.theme-ro .win-skills .win-body { padding: 0; }
.theme-ro .skill-row { min-height: 32px; padding: 3px 6px; border-bottom: 1px solid #edf0f5; cursor: default; }
.theme-ro .skill-row.sel { background: var(--ro-sel); }
.theme-ro .skill-row[draggable="true"] { cursor: grab; }
.theme-ro .skill-row .lvsel button, .theme-ro .skill-row .btns button { height: 18px; min-height: 18px; }
.theme-ro .skill-row .lvup { width: 24px; height: 24px; min-height: 24px; padding: 0; border: 1px solid #6d86c9; border-radius: 3px;
	background: linear-gradient(#e8efff, #9fb4e6); }
.theme-ro .skill-row .lvup::after { content: 'UP'; font: bold 9px var(--ro-font); color: #1d3a8a; }
html.ro-skin .theme-ro .skill-row .lvup { border: 0; border-radius: 0; background: var(--ro-skill-up-a) center / 24px 24px no-repeat; }
html.ro-skin .theme-ro .skill-row .lvup:hover:not(:disabled) { background: var(--ro-skill-up-b) center / 24px 24px no-repeat; }
html.ro-skin .theme-ro .skill-row .lvup::after { content: none; }
.theme-ro .win-skills .win-foot .skp { font-weight: bold; }

/* ---- NPC: the dialog window, its menu box under it, the illustration (cutin) ---- */
.theme-ro .win-npc .win-body { min-height: 110px; padding: 8px 10px; overflow: visible; }
.theme-ro .win-npc .npc-text { font: 12px/1.6 var(--ro-font); min-height: 92px; max-height: min(42vh, 340px); overflow-y: auto; overflow-wrap: anywhere;
	scrollbar-width: thin; scrollbar-color: #9fb3dd #eef2f9; }
.theme-ro .win-npc .npc-menu { position: absolute; left: 0; right: 0; top: calc(100% + 3px); background: #fff; border: 1px solid var(--ro-edge);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); padding: 3px 0; gap: 0; max-height: 50vh; overflow-y: auto; z-index: 2; }
.theme-ro .win-npc .npc-menu button { padding: 1px 12px; }
.theme-ro .win-npc .win-foot { justify-content: flex-end; }
/* the client's select box (desktop): the answers in a list, the chosen one highlighted (arrow keys / click), OK / Cancel
   pictures in its button bar, double click = answer */
.theme-ro .win-npc .npc-menu.ro-menu { padding: 0; overflow: visible; max-height: none; }
.theme-ro .ro-menu .nm-list { max-height: 40vh; overflow-y: auto; padding: 3px 0; scrollbar-width: thin; scrollbar-color: #9fb3dd #eef2f9; }
.theme-ro .ro-menu .nm-opt { padding: 1px 12px; font: 12px/18px var(--ro-font); cursor: pointer; white-space: pre-wrap; overflow-wrap: anywhere; user-select: none; }
.theme-ro .ro-menu .nm-opt:hover { background: var(--ro-hover); }
.theme-ro .ro-menu .nm-opt.on { background: var(--ro-sel); }
.theme-ro .ro-menu .nm-bar { display: flex; justify-content: flex-end; align-items: center; gap: 2px; height: 24px; padding: 0 5px; border-top: 1px solid #dfe3ea;
	background: repeating-linear-gradient(#ffffff 0 2px, #f1f1f1 2px 4px); }
html.ro-skin .theme-ro .ro-menu .nm-bar { border: 0; background: var(--ro-btnbar-left) left top / 21px 100% no-repeat, var(--ro-btnbar-right) right top / 21px 100% no-repeat,
	var(--ro-btnbar-mid) 21px 0 / calc(100% - 42px) 100% no-repeat; }
.theme-ro .win-npc .win-foot .grow { flex: 1; }
/* system menu (Esc): the esc_NN picture buttons stacked like the client's */
.theme-ro .esc-menu.ro-esc { gap: 2px; justify-items: center; }
/* AUTO running: "leave, AUTO plays on" (Midgard): a text button the size of the esc_NN pictures */
.theme-ro .esc-menu.ro-esc .esc-offline { width: 221px; height: 20px; min-height: 20px; padding: 0 6px; font: 11px/18px var(--ro-font); color: #1b5e20; }
html.ro-skin .theme-ro .win-escmenu .win-body { padding: 4px; border-top: 1px solid var(--ro-edge); }
html.ro-skin .theme-ro .win-escmenu .win-head { display: none; }
/* skill list (desktop): name over "Lv : n   Sp : n" */
.theme-ro .skill-row.ro-sk .sk-main { min-width: 0; }
.theme-ro .skill-row.ro-sk .sk-main b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-ro .skill-row.ro-sk .meta { display: flex; align-items: center; gap: 16px; color: #000; font-size: 11px; line-height: 14px; }
.theme-ro .skill-row.ro-sk .lvsel { gap: 2px; }
.theme-ro .skill-row.ro-sk .lvsel span { min-width: 0; }
.theme-ro .skill-row.ro-sk .lvsel button { width: 13px; min-width: 0; height: 13px; min-height: 13px; padding: 0; font-size: 7px; line-height: 12px; }
html.ro-skin .theme-ro .skill-row.ro-sk .lvsel button { line-height: 13px; }
/* new mail: a letter beside Basic Info (the client shows one on the screen until the mail is read) */
.theme-ro #hud-char .ro-mail { position: absolute; left: 290px; top: 52px; width: 30px; height: 22px; min-height: 22px; padding: 0; border: 1px solid #8a6d2b; border-radius: 2px;
	background: linear-gradient(160deg, transparent 47%, #8a6d2b 48% 52%, transparent 53%), linear-gradient(20deg, transparent 47%, #8a6d2b 48% 52%, transparent 53%), linear-gradient(#fff8dc, #f1dfa8);
	background-size: 100% 60%, 100% 60%, 100% 100%; background-repeat: no-repeat; animation: ro-pulse 0.9s ease-in-out infinite alternate; }
html.ro-skin .theme-ro #hud-char .ro-mail:hover:not(:disabled) { filter: brightness(1.08); }
.ro-mail.hidden { display: none !important; }
#hud-char .ro-mail { display: none; }
.theme-ro #hud-char .ro-mail:not(.hidden) { display: block; }

.cutin { position: absolute; z-index: 9; pointer-events: none; }
.cutin.hidden { display: none; }
.cutin img { display: block; max-height: 62vh; max-width: 46vw; image-rendering: auto; }
.cutin.pos-0 { left: 2%; bottom: 72px; }
.cutin.pos-1 { left: 50%; bottom: 72px; transform: translateX(-50%); }
.cutin.pos-2 { right: 2%; bottom: 72px; }
.cutin.pos-3, .cutin.pos-4 { left: 50%; top: 50%; transform: translate(-50%, -50%); }
@media (max-width: 700px) { .cutin img { max-height: 34vh; max-width: 60vw; } .cutin.pos-0, .cutin.pos-1, .cutin.pos-2 { bottom: 170px; } }

/* ---- item info window (right click on an item) ---- */
.popup.iteminfo { width: 300px; max-width: calc(100% - 16px); }
.popup.iteminfo h4 { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.popup.iteminfo h4 .x { flex: none; width: 22px; min-height: 22px; padding: 0; }
.popup.iteminfo h4 .x::before { content: '✕'; }
.popup.iteminfo .ii-body { display: flex; gap: 8px; align-items: flex-start; }
.popup.iteminfo .ii-big { width: 75px; height: 100px; flex: none; image-rendering: pixelated; border: 1px solid #c8ccd6; background: #fff; }
.popup.iteminfo .ic.big { width: 75px; height: 100px; border-radius: 0; font-size: 22px; }
.popup.iteminfo .ic.big img { width: 48px; height: 48px; margin: auto; }
.popup.iteminfo .ii-desc { flex: 1; white-space: pre-wrap; font-size: 12px; max-height: 240px; overflow: auto; overflow-wrap: anywhere; }
.popup.iteminfo .ii-cards { display: flex; gap: 3px; margin-top: 6px; }
.popup.iteminfo .ii-cards .cs { width: 28px; height: 28px; border: 1px solid #b9c2d6; background: #f3f5f9; display: grid; place-items: center; }
.popup.iteminfo .ii-cards .cs.off { background: #d9dce3; }
.popup.iteminfo .ii-cards .cs .ic { margin: 0; width: 24px; height: 24px; }
.popup.iteminfo .ii-foot { margin-top: 6px; }
.theme-ro .popup.iteminfo h4 { margin-bottom: 6px; padding-right: 4px; }
.theme-ro .popup.iteminfo h4 .x { width: 11px; height: 11px; min-height: 11px; border: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #e9f0ff, #6d8fd6 70%, #3a5aa8); }
.theme-ro .popup.iteminfo h4 .x::before { content: none; }
html.ro-skin .theme-ro .popup.iteminfo h4 .x { border-radius: 0; background: var(--ro-sys-close-off) center / 11px 11px no-repeat; }

/* ---- drag and drop ---- */
body.dragging .win.drop-on, body.dragging .hk.drop-on { outline: 2px dashed #5876c4; outline-offset: -2px; }
.item-cell[draggable="true"], .item-row[draggable="true"], .eslot[draggable="true"] { -webkit-user-drag: element; }

/* ---- status icons: a column at the right edge of the screen, the time under each icon ---- */
.theme-ro .efst-list.ro-efst { position: absolute; right: 6px; top: 190px; z-index: 5; width: 30px; display: flex; flex-direction: column; gap: 3px; margin: 0; }
.theme-ro .efst-list.ro-efst .efst { width: 30px; padding: 0; border: 0; background: none; display: grid; justify-items: center; line-height: 1; }
.theme-ro .efst-list.ro-efst .efst img { width: 24px; height: 24px; image-rendering: pixelated; filter: drop-shadow(0 0 1px #000); }
.theme-ro .efst-list.ro-efst .efst.has-icon em { display: none; }
.theme-ro .efst-list.ro-efst .efst:not(.has-icon) { width: auto; min-width: 30px; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--ro-edge); border-radius: 3px; padding: 1px 3px; justify-self: end; }
.theme-ro .efst-list.ro-efst .efst:not(.has-icon) em { font: 10px var(--ro-font); font-style: normal; color: #000; }
.theme-ro .efst-list.ro-efst .efst b { font: 9px/10px var(--ro-font); color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; white-space: nowrap; margin-top: 1px; }
.theme-ro .efst-list.ro-efst .efst b.soon, .efst-list .efst b.soon { color: #ff6b5a !important; }
.theme-ro .efst-list.ro-efst .efst:not(.has-icon) b { color: #333; text-shadow: none; }
.theme-ro .efst-list.ro-efst .efst.ammo b { display: block; margin-top: -7px; font-size: 9px; } /* the arrows left under the arrow picture */
/* ammunition whose picture is not there (yet): an arrow badge, still shown (the RO theme hides other states without one) */
.efst.ammo:not(.has-icon), .theme-ro .efst-list.ro-efst .efst.ammo:not(.has-icon) { display: grid !important; place-items: center; width: 24px; min-width: 24px; height: 24px; padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 6px; background: radial-gradient(circle at 35% 30%, #f2c46a, #a0611c 75%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); position: relative; justify-self: end; }
.efst.ammo:not(.has-icon)::before { content: '➶'; color: #fff; font-size: 15px; line-height: 1; text-shadow: 0 0 2px #4a2a05; }
.efst.ammo:not(.has-icon) em { display: none; }
.efst.ammo:not(.has-icon) b, .theme-ro .efst-list.ro-efst .efst.ammo:not(.has-icon) b { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 1px; color: #fff !important; font: 9px/10px var(--ro-font, sans-serif);
	text-shadow: 0 0 2px #000, 0 0 2px #000 !important; white-space: nowrap; display: block !important; margin-top: 1px; }
.efst img { display: none; }
.efst.has-icon img { display: inline-block; width: 18px; height: 18px; vertical-align: middle; image-rendering: pixelated; }
.efst em { font-style: normal; }
@media (max-width: 700px) { .theme-ro .efst-list.ro-efst { top: 150px; right: 3px; } }
.theme-ro .login-card { display: flex; flex-direction: column; }
.theme-ro .login-card h1 small { display: none; }
.theme-ro .login-card h1 { order: 0; } .theme-ro .login-card form { order: 1; } .theme-ro .login-card #login-error { order: 2; padding: 4px 12px; }
.theme-ro .login-card .hint { order: 3; } .theme-ro .login-card > p.muted:not(.small) { order: 4; font-size: 10px; color: #777; } .theme-ro .login-card > p.muted.small { order: 5; }
.theme-ro .emo-grid .emo, html.ro-skin .theme-ro .emo-grid .emo { height: 44px; min-height: 44px; border: 1px solid #dfe3ea; border-radius: 0; background: #fff; }
.theme-ro .emo-grid .emo:hover, html.ro-skin .theme-ro .emo-grid .emo:hover:not(:disabled) { background: var(--ro-sel); }
.theme-ro .win-storage .win-body, .theme-ro .win-cart .win-body { padding: 4px 4px 6px; }

/* ---- AUTO: the chip left of the F-bar (button skin of the client), the AI window in the window skin ---- */
.theme-ro .ai-chip { right: 288px; bottom: 11px; }
.theme-ro .ai-chip button { height: 20px; min-height: 20px; padding: 0 8px; font: bold 11px/18px var(--ro-font); }
html.ro-skin .theme-ro .ai-chip button { line-height: 20px; }
.theme-ro .ai-chip [data-c=win] { width: 22px; min-width: 22px; padding: 0; }
.theme-ro .ai-chip.on [data-c=toggle], html.ro-skin .theme-ro .ai-chip.on [data-c=toggle] { background: linear-gradient(#5fd17b, #1e8a3c); color: #fff; border: 1px solid #1a6e31; border-radius: 3px; text-shadow: 0 1px 0 #145a27; }
@media (min-width: 701px) and (max-width: 900px) { .theme-ro .ai-chip { bottom: 166px; right: 4px; } }
.theme-ro .win-ai .win-body { padding: 4px 7px 6px; }
.theme-ro .ai-tabs { gap: 1px; border-bottom: 1px solid #b9c2d6; margin-bottom: 4px; }
.theme-ro .ai-tabs button { height: 19px; min-height: 19px; padding: 0 7px; }
.theme-ro .ai-row { margin: 3px 0; font-size: 12px; }
.theme-ro .ai-h { color: var(--ro-navy); font-size: 12px; margin: 8px 0 3px; }
.theme-ro .ai-num { width: 46px; height: 18px !important; min-height: 18px; padding: 0 2px; font-size: 11px; }
.theme-ro .ai-row select, .theme-ro .ai-skill select, .theme-ro .ai-pairs select { height: 18px; font-size: 11px; max-width: 170px; }
.theme-ro .ai-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); max-height: 200px; border: 1px solid #c8ccd6; background: #fff; padding: 2px; }
.theme-ro .ai-cell, html.ro-skin .theme-ro .ai-cell { height: 64px; min-height: 64px; border: 0; border-radius: 0; background: none; opacity: 0.45; }
.theme-ro .ai-cell:hover, html.ro-skin .theme-ro .ai-cell:hover:not(:disabled) { background: var(--ro-hover); opacity: 0.8; }
.theme-ro .ai-cell.on, html.ro-skin .theme-ro .ai-cell.on { opacity: 1; background: var(--ro-sel); outline: 0; }
/* a picked cell under the mouse stays picked-looking (the hover look made a just-clicked cell seem unpicked) */
.theme-ro .ai-cell.on:hover, html.ro-skin .theme-ro .ai-cell.on:hover:not(:disabled) { opacity: 1; background: var(--ro-sel); }
.theme-ro .ai-cell img, .theme-ro .ai-cell > i { width: 36px; height: 36px; }
.theme-ro .ai-cell .nm { font: 10px/11px var(--ro-font); color: #000; }
.theme-ro .ai-skill { border-bottom-color: #edf0f5; font-size: 12px; min-height: 28px; }
.theme-ro .ai-ctl { gap: 3px; }
.theme-ro .ai-skill .ai-delay { margin-top: 1px; }
.theme-ro .ai-mobs-h .ai-all { height: 18px; min-height: 18px; font-size: 11px; padding: 0 6px; }
.theme-ro .ai-pairs { font-size: 12px; gap: 3px 6px; margin: 4px 0; }
.theme-ro .ai-h.ai-top { margin-top: 2px; }
.theme-ro .win-ai .item-row { font-size: 11px; }
.theme-ro .login-status { color: #333; font-size: 11px; padding: 0 12px 6px; }
html.ro-login-win .theme-ro .login-card .login-status { position: absolute; left: -40px; right: -40px; top: 126px; margin: 0; padding: 0; color: #fff; text-align: center; font: bold 12px var(--ro-font); text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.theme-ro .ai-grid.all .ai-cell { opacity: 1; }
/* Collection: the client's window look (white list, navy labels) */
.theme-ro .col-sum { font-size: 12px; }
.theme-ro .col-sum button, .theme-ro .col-tabs button { height: 20px; min-height: 20px; font: 11px/18px var(--ro-font); padding: 0 6px; }
.theme-ro .col-bonus { background: #f3f5fa; border: 1px solid #d6dbe6; border-radius: 0; }
.theme-ro .col-bonus li { font: 11px/16px var(--ro-font); color: #222; }
.theme-ro .col-list { max-height: 300px; border: 1px solid #c8ccd6; background: #fff; padding: 2px; gap: 1px; }
.theme-ro .col-row, html.ro-skin .theme-ro .col-row { height: auto; min-height: 42px; border: 0; border-radius: 0; background: none; padding: 3px 6px; color: #111; }
.theme-ro .col-row:hover, html.ro-skin .theme-ro .col-row:hover:not(:disabled) { background: var(--ro-hover); }
.theme-ro .col-row.sel, html.ro-skin .theme-ro .col-row.sel { background: var(--ro-sel); outline: 0; }
.theme-ro .col-row .ic { width: 24px; height: 24px; }
.theme-ro .col-mid b { font: bold 12px/16px var(--ro-font); color: var(--ro-navy); }
.theme-ro .col-mid em, .theme-ro .col-mid i { font: 11px/14px var(--ro-font); }
.theme-ro .col-mid em { color: #333; }
.theme-ro .col-st { font: 10px/14px var(--ro-font); }
.theme-ro .col-setrow { font: 11px/15px var(--ro-font); color: #333; border-radius: 0; }
.theme-ro .col-tools .col-search { height: 20px; min-height: 20px; font: 12px var(--ro-font); padding: 0 4px; }
.theme-ro .col-tools .col-all, .theme-ro .col-filt button, .theme-ro .col-pager button { height: 20px; min-height: 20px; font: 11px/18px var(--ro-font); padding: 0 6px; border-radius: 0; }
.theme-ro .col-filt button.on { background: var(--ro-sel, #cfe0ff); color: #000; }
.theme-ro .col-pager { font: 11px var(--ro-font); }
.theme-ro .ai-grid.ai-pots .ai-cell { height: auto; min-height: 64px; }
.theme-ro .ai-cell .ai-ord { background: var(--ro-navy, #2b4a8b); font: bold 10px/16px var(--ro-font); }
.theme-ro .ai-cell .ai-pv { font: 10px/11px var(--ro-font); color: #333; }
.theme-ro .ai-cell .ai-pv em { color: #1e8a3c; }
.theme-ro .ai-cell.skip, html.ro-skin .theme-ro .ai-cell.skip { opacity: 0.3; }
.theme-ro .ai-pot-h b { color: var(--ro-navy); }
/* item pickup notice: the white box of the client */
.theme-ro #pickup-notice { top: 58px; }
.theme-ro #pickup-notice .pn { background: linear-gradient(#ffffff, #eef1f7); border: 1px solid #a3abbd; border-radius: 4px; color: #1a1a1a; font: 12px/18px var(--ro-font); padding: 2px 12px 2px 5px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
/* F-bar grip (drag to move, F12 / double click = next row): the striped end of shortitem_bg */
.theme-ro .hotbar .hk-grip { position: absolute; right: 0; top: 0; bottom: 0; width: 15px; cursor: move; display: flex; align-items: flex-end; justify-content: center; }
.theme-ro .hotbar .hk-grip em { font: bold 9px/10px var(--ro-font, sans-serif); font-style: normal; color: #6a78a0; margin-bottom: 2px; pointer-events: none; }
.hotbar.moved { z-index: 9; }

/* systems.js windows in the client's look: white lists, navy labels, blue selection */
.theme-ro .pk-list { border: 1px solid #c8ccd6; background: #fff; padding: 2px; gap: 1px; max-height: 300px; }
.theme-ro .pk-row, html.ro-skin .theme-ro .pk-row { height: auto; min-height: 30px; border: 0; border-radius: 0; background: none; padding: 2px 6px; color: #111; font: 12px/16px var(--ro-font); }
.theme-ro .pk-row:hover, html.ro-skin .theme-ro .pk-row:hover:not(:disabled) { background: var(--ro-hover); }
.theme-ro .pk-row.sel, html.ro-skin .theme-ro .pk-row.sel { background: var(--ro-sel); outline: 0; }
.theme-ro .pk-row .ic, .theme-ro .pk-row .sic { width: 24px; height: 24px; }
.theme-ro .sys-kv { font: 11px/16px var(--ro-font); }
.theme-ro .sys-kv > span { color: var(--ro-navy); opacity: 1; }
.theme-ro .sys-head b { color: var(--ro-navy); }
.theme-ro .cr-log { background: #fff; border: 1px solid #c8ccd6; border-radius: 0; font: 12px/16px var(--ro-font); color: #111; }
.theme-ro .cr-mems { border: 1px solid #c8ccd6; background: #f7f8fb; font: 11px/16px var(--ro-font); padding: 2px 4px; }
.theme-ro .fr-row { border-bottom-color: #edf0f5; font: 12px/16px var(--ro-font); }
.theme-ro .qs-row { background: #fff; border: 1px solid #d6dbe6; border-radius: 0; }
.theme-ro .qs-h b { color: var(--ro-navy); font: bold 12px/16px var(--ro-font); }
.theme-ro .qs-obj { font: 11px/15px var(--ro-font); color: #333; }
.theme-ro .sys-skill button, .theme-ro .qs-h button, .theme-ro .fr-row button, .theme-ro .cr-mem button, .theme-ro .sys-head button.small { height: 18px; min-height: 18px; font: 11px/16px var(--ro-font); padding: 0 6px; }

/* "ติดตั้งเป็นแอป" on the login screen (app.js setupAppInstall): low in the middle, over the background */
.app-install { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 5; padding: 9px 20px; border-radius: 22px;
	font: 600 15px var(--ro-font, sans-serif); color: #fff; border: 2px solid rgba(255, 255, 255, 0.85); background: linear-gradient(#4f7fe0, #2b4fb0); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); cursor: pointer; }
.app-install.hidden { display: none; }

/* the Cash Shop window in the RO look */
.theme-ro .win-cash .cash-item { background: linear-gradient(#ffffff, #eef3fd); border: 1px solid #c9d5ee; border-radius: 3px; }
.theme-ro .win-cash .cash-item:hover { background: var(--ro-hover, #e6eefc); }
.theme-ro .win-cash .cash-item .nm { font: 12px/15px var(--ro-font); color: #000; }
.theme-ro .win-cash .cash-row { font: 12px var(--ro-font); }
/* the sell window in the RO theme: white rows, the client's blue for the chosen ones */
.theme-ro .win-shop .sell-row { background: linear-gradient(#ffffff, #f2f5fc); border-color: #c9d5ee; color: #000; font: 12px/16px var(--ro-font); }
.theme-ro .win-shop .sell-row.on { background: linear-gradient(#e3edff, #cfe0ff); border-color: #6f97e0; }
.theme-ro .win-shop .sell-tabs button.on { outline: 2px solid #6f97e0; }