/* Midgard debug client: dark, high contrast, readable on a desktop and on a phone. */
:root {
	--bg: #101317;
	--panel: rgba(22, 27, 34, 0.94);
	--panel-solid: #161b22;
	--line: #3a4554;
	--head: #232b35;
	--text: #e9eef4;
	--muted: #9aa7b6;
	--accent: #3d8ef0;
	--accent-2: #2a6dc4;
	--danger: #e5534b;
	--ok: #46c35b;
	--warn: #e6b422;
	--btn: #2d3743;
	--btn-hover: #3a4757;
	--font: "Kanit", system-ui, "Noto Sans Thai", "Leelawadee UI", Tahoma, Loma, sans-serif;
	--mono: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
	--bottom-h: 0px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 14px/1.45 var(--font); overflow: hidden; }
body { -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
button {
	background: var(--btn); border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; cursor: pointer; min-height: 30px;
	touch-action: manipulation; white-space: nowrap;
}
button:hover:not(:disabled) { background: var(--btn-hover); }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent-2); color: #fff; font-weight: 600; }
button.primary:hover:not(:disabled) { background: var(--accent-2); }
button.danger { background: #6e2622; border-color: #9b3a33; }
button.ghost { background: transparent; }
button.small { min-height: 24px; padding: 1px 7px; font-size: 13px; }
input, select, textarea { background: #0e1216; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; min-height: 32px; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input[type=checkbox] { min-height: 0; width: 18px; height: 18px; vertical-align: middle; }
code { font-family: var(--mono); background: #0b0e12; padding: 1px 4px; border-radius: 4px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { color: #ff8a80; min-height: 1.2em; margin: 6px 0 0; white-space: pre-line; }
.hidden { display: none !important; }
.card { background: var(--panel-solid); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }

/* ---- screens ---- */
.screen { display: none; position: fixed; inset: 0; }
.screen.active { display: block; }
#screen-login.active, #screen-chars.active { display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 24px 12px; }
.login-card { width: 100%; max-width: 420px; margin-top: 6vh; }
.login-card h1 { margin: 0 0 4px; font-size: 26px; }
.login-card h1 small { font-size: 14px; color: var(--muted); font-weight: 400; }
.login-card form { display: grid; gap: 10px; margin-top: 14px; }
.login-card label { display: grid; gap: 4px; font-weight: 600; }
.login-card label.check { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.login-card input:not([type=checkbox]) { width: 100%; min-height: 40px; font-size: 16px; }
.login-card button.primary { min-height: 42px; font-size: 16px; }
.hint { background: #1d2a1f; border: 1px solid #2f4a33; border-radius: 6px; padding: 8px 10px; margin: 12px 0 0; font-size: 13px; }

.chars-wrap { width: 100%; max-width: 980px; }
.chars-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.chars-head h2 { margin: 0; }
.chars-head button { margin-left: auto; }
.chars-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.char-card { background: var(--panel-solid); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.char-card h3 { margin: 0; font-size: 18px; }
.char-card .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.char-card.empty { border-style: dashed; color: var(--muted); }
.char-card .stats { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.char-card .del-info { color: var(--warn); font-size: 13px; }
.char-card .del-row { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; }
.char-card .del-row input { grid-column: 1 / -1; width: 100%; }
.char-card form { display: grid; gap: 8px; }
.char-card form label { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 8px; }
.char-card form input, .char-card form select { width: 100%; min-width: 0; }

/* ---- game ---- */
#map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; cursor: crosshair; }
.hud { position: absolute; padding: 8px 10px; z-index: 5; }
#hud-char { left: 8px; top: 8px; width: 270px; }
/* status points: the "up" button beside the basic info window (ui.js renderHud), every theme (theme-ro.css: the RO
   window's place and the client's lv_up picture); a base level up makes it bounce (ui.js levelUp) */
#hud-char .ro-lvup { position: absolute; left: calc(100% + 6px); top: 0; width: 40px; height: 40px; min-height: 40px; padding: 0; border: 0; border-radius: 6px;
	background: linear-gradient(#3f6ad6, #1c3a99); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); cursor: pointer; }
#hud-char .ro-lvup::after { content: 'up'; color: #fff; font: 700 14px/40px sans-serif; }
html.ro-skin #hud-char .ro-lvup { border-radius: 0; background: var(--ro-lv-up-off) center / 100% 100% no-repeat; box-shadow: none; }
html.ro-skin #hud-char .ro-lvup::after { content: none; }
#hud-char .ro-lvup.hidden { display: none; }
#hud-char .ro-lvup.fresh, .theme-ro #hud-char .ro-lvup.fresh, html.mhud .mh-lvup.fresh { animation: lvup-bounce 0.6s ease-out 3; }
@keyframes lvup-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px) scale(1.08); } }
.hud-name { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { position: relative; height: 16px; background: #0a0d10; border: 1px solid #000; border-radius: 4px; margin-top: 4px; overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; }
.bar span { position: relative; display: block; text-align: center; font-size: 11.5px; line-height: 14px; font-weight: 600; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.bar.hp i { background: linear-gradient(#5be36c, #2f9e40); }
.bar.sp i { background: linear-gradient(#6aa8ff, #2f5fc4); }
.bar.exp i { background: linear-gradient(#ffd75a, #b38b14); }
.bar.jexp i { background: linear-gradient(#ff9f6a, #b85a24); }
.hud-small { font-size: 12px; color: var(--muted); margin-top: 4px; }
.efst-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.efst-list:empty { display: none; }
.efst { background: #2b2140; border: 1px solid #5c4a8a; border-radius: 4px; padding: 0 5px; font-size: 11.5px; line-height: 18px; }
#hud-map { right: 8px; top: 8px; width: 180px; }
.hud-mapname { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#minimap { width: 100%; height: 156px; display: block; margin-top: 4px; background: #000; border-radius: 4px; cursor: pointer; }
.zoom { display: flex; gap: 4px; margin-top: 5px; }
.zoom button { flex: 1; min-height: 30px; padding: 2px; font-size: 16px; }
.banner { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 20; background: #173b63; border: 1px solid #3d8ef0;
	padding: 6px 10px; border-radius: 8px; font-weight: 600; display: flex; gap: 10px; align-items: center; max-width: calc(100% - 20px); }
.announce { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); z-index: 6; pointer-events: none; text-align: center;
	font-weight: 700; font-size: 15px; text-shadow: 0 0 3px #000, 0 0 3px #000; max-width: 80%; }

#bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; pointer-events: none; }
#bottom > * { pointer-events: auto; }
#chat { position: absolute; left: 8px; bottom: 96px; width: 470px; display: flex; flex-direction: column; }
.chat-tabs { display: flex; gap: 2px; padding: 4px 4px 0; flex-wrap: wrap; }
.chat-tabs button { min-height: 24px; padding: 0 8px; font-size: 12.5px; border-radius: 5px 5px 0 0; }
.chat-tabs button.on { background: var(--accent); color: #fff; border-color: var(--accent-2); }
.chat-log { height: 150px; overflow-y: auto; padding: 4px 8px; font-size: 13.5px; overflow-wrap: anywhere; }
#chat.expanded .chat-log { height: min(420px, 50vh); }
.chat-log div { padding: 1px 0; }
.chat-form { display: flex; gap: 4px; padding: 4px; border-top: 1px solid var(--line); }
.chat-to { width: 100px; flex: none; }
.chat-input { flex: 1; min-width: 0; }
.ch-public { color: #f2f4f7; } .ch-whisper { color: #ffd94d; } .ch-party { color: #9bf09b; } .ch-guild { color: #8fd1ff; }
.ch-system { color: #c9c9ff; } .ch-broadcast { color: #ffff63; } .ch-error { color: #ff8a80; } .ch-npc { color: #b8f0c8; }
.ch-exp { color: #ffe9a8; } .ch-item { color: #a8ffe0; } .ch-gm { color: #ffb36b; } .ch-battle { color: #dfe3ee; }
.chat-rotabs { display: none; }

.hotbar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 50px; display: flex; gap: 4px; }
.hotbar .hk { width: 66px; height: 40px; padding: 2px 3px; display: flex; flex-direction: column; align-items: stretch; justify-content: center;
	font-size: 11px; line-height: 1.15; overflow: hidden; position: relative; }
.hotbar .hk b { font-size: 10.5px; color: var(--muted); text-align: left; }
.hotbar .hk span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hotbar .hk.assign { outline: 2px dashed var(--warn); }
.menubar { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; display: flex; gap: 4px; padding: 6px 8px; background: rgba(12, 15, 19, 0.96);
	border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
.menubar button { flex: none; min-height: 34px; }
.menubar button.on { background: var(--accent); border-color: var(--accent-2); color: #fff; }
.menubar button kbd { font: 11px var(--mono); color: var(--muted); margin-left: 4px; }
.menubar button.on kbd { color: #dce9ff; }

/* ---- windows ---- */
#windows { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.win { position: absolute; pointer-events: auto; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 8px;
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55); display: flex; flex-direction: column; max-height: var(--maxh, calc(100% - 120px)); min-width: 260px; }
.win-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; background: var(--head); border-bottom: 1px solid var(--line);
	border-radius: 8px 8px 0 0; cursor: move; user-select: none; touch-action: none; }
.win-head h3 { margin: 0; font-size: 15px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-head .x { min-height: 28px; width: 32px; padding: 0; font-size: 16px; }
.win-body { padding: 10px 12px; overflow: auto; }
.win-foot { padding: 8px 12px; border-top: 1px solid var(--line); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tabs { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.tabs button.on { background: var(--accent); border-color: var(--accent-2); color: #fff; }
table.grid { width: 100%; border-collapse: collapse; }
table.grid td, table.grid th { padding: 4px 6px; border-bottom: 1px solid #262e38; text-align: left; vertical-align: middle; }
table.grid th { color: var(--muted); font-weight: 600; font-size: 12.5px; }
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
.stat-grid { display: grid; grid-template-columns: auto 1fr auto auto; gap: 4px 10px; align-items: center; }
.stat-grid .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.stat-grid .cost { color: var(--muted); font-size: 12px; }
.kv { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 3px 10px; margin-top: 10px; font-size: 13.5px; }
.kv b { font-variant-numeric: tabular-nums; }
.item-row { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid #262e38; cursor: pointer; }
.item-row:hover, .item-row.sel { background: #1f2833; }
/* item icon: the client's icon (img) when the renderer has the game data, else a coloured letter box */
.ic { width: 26px; height: 26px; border-radius: 5px; flex: none; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: #111;
	background: var(--ic, #ccc); vertical-align: middle; overflow: hidden; }
.ic i { font-style: normal; }
.ic img { width: 24px; height: 24px; display: block; image-rendering: pixelated; }
.ic.img { background: none; }
.ic.img i { display: none; }
.ic.sm { margin-right: 6px; }
.sic { width: 24px; height: 24px; display: block; }
.sic img { width: 24px; height: 24px; display: block; image-rendering: pixelated; }
.skill-row.has-ic { grid-template-columns: 24px 1fr auto auto; }
.slots .row { gap: 6px; flex-wrap: nowrap; }
.hotbar .hk .ic, .hotbar .hk .sic { position: absolute; right: 2px; top: 2px; width: 18px; height: 18px; font-size: 9px; border-radius: 3px; }
.hotbar .hk .ic img, .hotbar .hk .sic img { width: 18px; height: 18px; }
.hotbar .hk em { display: none; }
.ro-only { display: none !important; }
.login-bar { display: contents; }
.load-bar { display: none; }
.item-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-row .ct { font-variant-numeric: tabular-nums; color: var(--muted); }
.item-row .eq { color: var(--ok); font-size: 12px; }
.desc { white-space: pre-wrap; background: #0e1216; border: 1px solid var(--line); border-radius: 6px; padding: 8px; font-size: 13px; margin-top: 8px; overflow-wrap: anywhere; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.slots { display: grid; grid-template-columns: 110px 1fr auto; gap: 4px 8px; align-items: center; }
.slots .lab { color: var(--muted); font-size: 13px; }
.skill-row { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; padding: 5px 2px; border-bottom: 1px solid #262e38; }
.skill-row .meta { color: var(--muted); font-size: 12px; }
.skill-row .btns { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.lvsel { display: inline-flex; align-items: center; gap: 2px; }
.lvsel span { min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
.npc-text { min-height: 90px; white-space: pre-wrap; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.npc-cutin { margin-top: 8px; padding: 6px 8px; border: 1px dashed #5c6b7d; border-radius: 6px; color: #c8d6e5; font-size: 13px; }
.npc-menu { display: grid; gap: 6px; margin-top: 10px; }
.npc-menu button { text-align: left; white-space: normal; min-height: 36px; }
.party-member { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 6px 2px; border-bottom: 1px solid #262e38; }
.party-member .bar { grid-column: 1 / -1; height: 12px; margin-top: 2px; }
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trade-cols h4 { margin: 0 0 6px; }
.trade-box { min-height: 90px; border: 1px solid var(--line); border-radius: 6px; padding: 6px; font-size: 13px; }
.trade-box.locked { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.debug-log { font: 12px/1.35 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.debug-log .in { color: #b5e0ff; } .debug-log .out { color: #ffd59a; } .debug-log .sys { color: #9aa7b6; }
.debug-log div { border-bottom: 1px solid #1d242c; padding: 2px 0; cursor: pointer; }
.debug-tools { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.debug-tools input { flex: 1; min-width: 120px; }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.total { font-weight: 700; }
.bad { color: #ff8a80; } .good { color: #8be39a; }
.qty { width: 72px; }

/* ---- overlays / popups ---- */
.overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 50; }
#loading { z-index: 60; }
#loading .card { display: flex; gap: 12px; align-items: center; font-size: 16px; }
.spinner { width: 22px; height: 22px; border: 3px solid #3a4554; border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.death-card { display: grid; gap: 10px; width: 300px; text-align: center; }
.death-card h2 { margin: 0 0 4px; color: #ff8a80; }
.death-card button { min-height: 42px; font-size: 16px; }
#popups { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.popup { position: absolute; pointer-events: auto; background: var(--panel-solid); border: 1px solid var(--accent); border-radius: 8px; padding: 12px 14px;
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6); max-width: calc(100% - 16px); }
.popup.center { left: 50%; top: 30%; transform: translate(-50%, -50%); width: 320px; }
.popup h4 { margin: 0 0 8px; }
.popup .actions { justify-content: flex-end; }
.popup.menu { padding: 6px; display: grid; gap: 4px; min-width: 170px; }
.popup.menu button { text-align: left; }
.popup.menu .title { padding: 2px 6px 4px; font-weight: 700; border-bottom: 1px solid var(--line); }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.pinpad button { min-height: 44px; font-size: 18px; }
.pin-dots { font: 26px var(--mono); letter-spacing: 8px; text-align: center; min-height: 36px; }
#toasts { position: fixed; right: 12px; top: 12px; z-index: 70; display: grid; gap: 6px; pointer-events: none; max-width: calc(100% - 24px); }
body.ingame #toasts { right: auto; left: 50%; top: 70px; transform: translateX(-50%); }
.toast { background: #1e3a24; border: 1px solid var(--ok); padding: 6px 14px; border-radius: 8px; font-weight: 600; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); }
.toast.err { background: #3d1c1a; border-color: var(--danger); }

/* ---- phone ---- */
@media (max-width: 700px) {
	html, body { font-size: 15px; }
	#hud-char { left: 4px; top: 4px; width: calc(100% - 128px); max-width: 260px; padding: 5px 7px; }
	.hud-name { font-size: 14px; }
	.bar { height: 14px; margin-top: 3px; }
	.bar span { font-size: 10.5px; line-height: 12px; }
	.bar.jexp, .bar.exp { height: 10px; }
	.bar.jexp span, .bar.exp span { font-size: 9px; line-height: 8px; }
	.hud-small { font-size: 11px; }
	#hud-map { right: 4px; top: 4px; width: 116px; padding: 4px 5px; }
	.hud-mapname { font-size: 11.5px; }
	#minimap { height: 96px; }
	.zoom button { min-height: 32px; }
	#chat { left: 0; right: 0; width: auto; bottom: 120px; border-radius: 0; border-left: 0; border-right: 0; background: rgba(16, 20, 25, 0.86); }
	.chat-tabs { display: none; }
	#chat.expanded .chat-tabs { display: flex; }
	.chat-log { height: 64px; font-size: 13px; padding: 2px 6px; }
	#chat.expanded .chat-log { height: 38vh; }
	.chat-to { width: 74px; }
	.chat-form input { min-height: 34px; font-size: 16px; padding: 4px 6px; }
	.chat-form button { min-height: 34px; }
	.hotbar { left: 0; right: 0; transform: none; bottom: 78px; justify-content: space-between; padding: 0 3px; gap: 2px; }
	.hotbar .hk { width: auto; flex: 1; min-width: 0; height: 40px; font-size: 10px; padding: 1px 2px; }
	.hotbar .hk b { font-size: 9.5px; }
	/* every menu button visible: two rows of six */
	.menubar { height: 78px; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 32px; padding: 5px 4px; gap: 4px; overflow: hidden; }
	.menubar button { min-height: 0; padding: 0 2px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
	.menubar button kbd { display: none; }
	.win { left: 0 !important; right: 0 !important; top: auto !important; bottom: 78px !important; width: auto !important; max-height: 62vh;
		border-radius: 10px 10px 0 0; min-width: 0; }
	.win.tall { max-height: calc(100% - 150px); }
	.win-head { cursor: default; }
	.kv { grid-template-columns: auto 1fr; }
	.trade-cols { grid-template-columns: 1fr; }
	.popup.center { width: calc(100% - 24px); }
	.announce { top: 128px; font-size: 13px; }
	.banner { top: 130px; font-size: 13px; }
	#toasts { top: 132px; }
}
/* cart / vending / guild / mail windows */
.menubar button.notify { border-color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
.menubar button.notify::after { content: '●'; color: var(--warn); margin-left: 4px; }
.win textarea { width: 100%; resize: vertical; margin: 6px 0; }
.win input.price { width: 110px; }
.mail-row { cursor: pointer; }
.mail-row.unread .nm { font-weight: 600; }
.char-card canvas.char-prev { display: block; margin: 0 auto 4px; width: 120px; height: 150px; image-rendering: pixelated; background: radial-gradient(ellipse at 50% 85%, rgba(255,255,255,0.08), transparent 60%); }
.char-card canvas.char-prev.hidden { display: none; }
.esc-menu { display: grid; gap: 6px; }
.esc-menu button { width: 100%; }
.esc-menu .esc-offline { border-color: #2e7d32; }
/* the login screen's note (not an error): AUTO plays offline */
.error.info { color: #a5d6a7; }
.emo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 3px; }
.emo-grid .emo { height: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; }
.emo-grid .emo img { width: 40px; height: 40px; image-rendering: pixelated; }
.emo-grid .emo span { font-size: 11px; }

/* ---- AUTO (server-side player AI): chip by the F-bar, the AI window ---- */
.login-status { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.login-status:empty { display: none; }
.ai-chip { position: absolute; right: 8px; bottom: 50px; display: flex; gap: 2px; pointer-events: auto; }
.ai-chip button { min-height: 32px; padding: 0 10px; font-weight: 700; letter-spacing: 0.5px; }
.ai-chip [data-c=win] { width: 30px; padding: 0; }
.ai-chip [data-c=win]::before { content: '⚙'; font-weight: normal; }
.ai-chip.on [data-c=toggle] { background: #1e8a3c; border-color: #2fbf57; color: #fff; }
.ai-chip.on [data-c=toggle]::before { content: '● '; color: #b8ffcb; }
.menubar button.on#mb-ai { color: #2fbf57; }
.ai-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 6px; }
.ai-tabs button { min-height: 28px; padding: 0 8px; }
.ai-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; flex-wrap: wrap; }
.ai-row.ai-sub { margin-left: 22px; }
.ai-num { width: 56px; text-align: center; }
.ai-h { margin: 10px 0 4px; font-weight: 700; }
.ai-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 3px; max-height: 232px; overflow-y: auto; margin: 4px 0; }
.ai-cell { display: grid; justify-items: center; align-content: start; gap: 1px; height: 74px; min-height: 74px; padding: 2px; opacity: 0.55; }
.ai-cell.on { opacity: 1; outline: 2px solid var(--accent); outline-offset: -2px; }
.ai-cell img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.ai-cell > i { width: 40px; height: 40px; display: grid; place-items: center; font-style: normal; font-size: 11px; border-radius: 50%; background: rgba(127, 127, 127, 0.25); }
/* the name: up to two lines (long names such as "Sticky Mucus" are not cut), the full name in the cell's tooltip */
.ai-cell .nm { font-size: 10px; line-height: 12px; max-width: 100%; text-align: center; overflow: hidden; white-space: normal; overflow-wrap: anywhere;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.ai-grid.items .ai-cell .ic { width: 24px; height: 24px; margin: 6px 0 4px; }
/* skill rows: name on the left (cut with ... when too long), level / SP on the right, on one line for every skill */
.ai-skill { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 6px; min-height: 30px; padding: 3px 0; border-bottom: 1px solid rgba(127, 127, 127, 0.2); }
.ai-skill label { display: flex; align-items: center; gap: 5px; min-width: 0; }
.ai-skill label b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-skill .sic { width: 24px; height: 24px; flex: none; }
.ai-skill input[type=checkbox] { flex: none; }
.ai-ctl { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.ai-skill:not(.on) { opacity: 0.75; }
/* the skill delay: its own line under the level / SP */
.ai-skill .ai-delay { grid-column: 1 / -1; justify-self: end; margin-top: 2px; }
/* "มอนที่จะตี ใน <map>" + the "ตีทุกตัว" button of the map */
.ai-mobs-h { display: flex; align-items: center; gap: 6px; }
.ai-mobs-h > span { flex: 1; min-width: 0; }
.ai-mobs-h .ai-all { flex: none; min-height: 24px; padding: 0 8px; font-weight: 400; }
.ai-pairs { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 8px; margin: 6px 0; }
.ai-pairs select { justify-self: start; max-width: 100%; }
.ai-h.ai-top { margin-top: 2px; }
.win-ai .nowrap { white-space: nowrap; }
.ai-kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin-bottom: 6px; }
.win-ai .win-foot .ai-status { font-size: 12px; }
/* AUTO running with offline allowed: the status on its own row, "leave (AUTO plays on)" + stop under it */
.win-ai .win-foot:has([data-a=offline]) .ai-status { flex: 1 0 100%; }
@media (max-width: 700px) { .ai-chip { display: none; } }
.ai-grid.all .ai-cell { opacity: 1; }
/* Collection window: summary + bonus list, group tabs, one row per slot (item, needs, bonus, state) */
.col-sum { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.col-sum > span { flex: 1; min-width: 0; }
.col-sum button { min-height: 26px; padding: 0 10px; }
.col-bonus { list-style: none; margin: 0 0 8px; padding: 6px 8px; display: grid; gap: 3px; max-height: 160px; overflow-y: auto; border-radius: 6px; background: rgba(127, 127, 127, 0.12); }
.col-bonus li { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.col-bonus li .ic { width: 20px; height: 20px; flex: none; }
.col-bonus li.col-set b { color: #e0a800; }
.col-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 6px; }
.col-tabs button { min-height: 28px; padding: 0 8px; }
.col-tabs small { opacity: 0.7; }
.col-list { display: grid; gap: 3px; max-height: 360px; overflow-y: auto; }
.col-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 48px; padding: 4px 8px; text-align: left; white-space: normal; }
.col-row .ic { width: 32px; height: 32px; }
.col-mid { display: grid; gap: 1px; min-width: 0; }
.col-mid b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-mid i { font-style: normal; font-size: 11px; color: #e0a040; }
.col-mid em { font-style: normal; font-size: 11px; opacity: 0.85; }
.col-st { font-size: 11px; white-space: nowrap; padding: 2px 6px; border-radius: 10px; background: rgba(127, 127, 127, 0.2); }
.col-row.in .col-st { background: #1e8a3c; color: #fff; }
.col-row.can .col-st { background: #2f6fd6; color: #fff; }
.col-row.no { opacity: 0.6; }
.col-row.sel { outline: 2px solid var(--accent); outline-offset: -2px; opacity: 1; }
.col-setrow { display: grid; gap: 1px; padding: 5px 8px; border-radius: 6px; border: 1px dashed rgba(224, 168, 0, 0.6); font-size: 12px; }
.col-setrow.done { border-style: solid; background: rgba(224, 168, 0, 0.15); }
.col-foot { font-size: 12px; }
.col-sum .col-w { color: #1d9a5a; }
.col-bonus li .col-x { width: 20px; text-align: center; color: #e0a800; flex: none; }
.col-bonus li small { opacity: 0.75; }
.col-tabs .col-soon { opacity: 0.5; cursor: default; }
.col-tabs .col-soon small { font-size: 10px; }
.col-tools { display: flex; gap: 6px; align-items: center; margin-bottom: 5px; }
.col-tools .col-search { flex: 1; min-width: 0; min-height: 28px; padding: 0 8px; }
.col-tools .col-all { min-height: 28px; padding: 0 10px; white-space: nowrap; }
.col-filt { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 5px; }
.col-filt button { min-height: 24px; padding: 0 8px; font-size: 12px; border-radius: 12px; }
.col-filt button.on { background: var(--accent, #2f6fd6); color: #fff; }
.col-filt small { opacity: 0.75; }
.col-pager { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 6px 0 2px; font-size: 12px; }
.col-pager button { min-height: 26px; min-width: 36px; padding: 0 8px; }
.ai-chip .col-btn { margin-right: 4px; }
/* potions of the AI window: order number (①), heal amount and count, set aside (🚫), not in the bag */
.ai-pot-h { gap: 6px; }
.ai-pot-h select { max-width: 100%; }
.ai-grid.ai-pots .ai-cell { position: relative; height: auto; min-height: 74px; }
.ai-cell .ai-ord { position: absolute; top: 2px; left: 2px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--accent); color: #fff; font: 700 10px/16px var(--font, sans-serif); text-align: center; }
.ai-cell .ai-pv { font-size: 10px; line-height: 12px; opacity: 0.85; white-space: nowrap; }
.ai-cell .ai-pv em { font-style: normal; color: #2fbf57; font-weight: 700; }
.ai-cell.skip { opacity: 0.35; }
.ai-cell.skip::after { content: '🚫'; position: absolute; top: 1px; right: 2px; font-size: 12px; }
.ai-cell.none .ic { filter: grayscale(1); }
/* "Jellopy - ได้รับ 1" (ui.pickupNotice): top centre of the game screen */
#pickup-notice { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none; }
#pickup-notice .pn { display: flex; align-items: center; gap: 6px; padding: 3px 12px 3px 6px; min-width: 150px; border-radius: 6px; background: rgba(20, 24, 32, 0.88); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-size: 13px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); animation: pn-in 0.18s ease-out; transition: opacity 0.5s; }
#pickup-notice .pn.out { opacity: 0; }
#pickup-notice .pn .ic { width: 24px; height: 24px; flex: none; }
@keyframes pn-in { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
.hotbar .hk-grip { flex: none; width: 14px; cursor: move; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.hotbar .hk-grip em { font-size: 9px; font-style: normal; color: var(--muted); }
@media (max-width: 700px) { .hotbar .hk-grip { display: none !important; } }
.hotbar.moved { z-index: 9; }


/* back into the game after a server restart (app.js startResume): over everything, also on the phone */
.resume-box { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px;
	background: rgba(8, 12, 28, 0.55); font-family: var(--font, sans-serif); }
.resume-box .rb-card { width: min(360px, 100%); padding: 20px 18px 16px; border-radius: 16px; text-align: center; color: #1d2540;
	background: linear-gradient(#ffffff, #eef2fb); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.resume-box b { font: 600 15px/1.45 var(--font, sans-serif); }
.resume-box small { font: 13px/1.4 var(--font, sans-serif); color: #5b6585; }
.resume-box .rb-spin { width: 34px; height: 34px; border-radius: 50%; border: 4px solid #d5dcef; border-top-color: #3b5fc2; animation: rb-spin 0.9s linear infinite; }
.resume-box .rb-spin.off { animation: none; border-top-color: #d5dcef; }
.resume-box button { margin-top: 4px; height: 32px; min-height: 32px; padding: 0 16px; border-radius: 10px; border: 1px solid #c4cce2;
	background: #fff; color: #2c3a66; font: 13px var(--font, sans-serif); cursor: pointer; }
@keyframes rb-spin { to { transform: rotate(360deg); } }

/* NPC dialogs: links and item icons of the servers' own scripts (<URL>, ^i[id]: ui.js colorize) */
.npc-text a.mes-url { color: #2a5bd7; text-decoration: underline; }
.npc-text .ic.mes { display: inline-flex; width: 24px; height: 24px; vertical-align: middle; margin: 0 2px; }
/* systems.js: the select list the server opens (cards / identify / warp / eggs / crafting), pet / homunculus /
   mercenary info, chat room, friends, quests */
.pk-list { display: grid; gap: 2px; max-height: 340px; overflow-y: auto; }
.pk-row { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 3px 8px; text-align: left; white-space: normal; font-weight: 400; }
.pk-row .ic, .pk-row .sic { width: 28px; height: 28px; flex: none; }
.pk-row.sel { outline: 2px solid var(--accent); outline-offset: -2px; }
.pk-t { flex: 1; min-width: 0; }
.pk-n { font-size: 11px; opacity: 0.8; }
.pk-extra { margin-top: 8px; }
.sys-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.sys-head button.small { min-height: 22px; padding: 0 8px; font-size: 11px; }
.sys-kv { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 3px 10px; margin: 8px 0; font-size: 12.5px; }
.sys-kv > span { opacity: 0.75; }
.sys-skill { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.sys-skill .sic { width: 24px; height: 24px; flex: none; }
.sys-skill button { min-height: 24px; padding: 0 8px; }
.sys-form { display: grid; gap: 6px; }
.sys-form label { display: grid; gap: 2px; }
.sys-form label.row { display: flex; }
.cr-cols { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 6px; }
.cr-log { height: 200px; overflow-y: auto; padding: 4px 6px; border-radius: 6px; background: rgba(127, 127, 127, 0.12); font-size: 12.5px; word-break: break-word; }
.cr-mems { max-height: 200px; overflow-y: auto; font-size: 12px; }
.cr-mem { display: flex; align-items: center; gap: 3px; padding: 2px 0; }
.cr-mem button { min-height: 20px; padding: 0 4px; font-size: 10.5px; }
.fr-row { display: flex; align-items: center; gap: 6px; padding: 4px 2px; border-bottom: 1px solid rgba(127, 127, 127, 0.2); }
.fr-row > i { width: 8px; height: 8px; border-radius: 50%; background: #777; flex: none; }
.fr-row.on > i { background: #2fbf57; }
.fr-row:not(.on) .grow { opacity: 0.6; }
.fr-row button { min-height: 22px; padding: 0 6px; font-size: 11px; }
.qs-list { display: grid; gap: 4px; }
.qs-row { padding: 5px 6px; border-radius: 6px; background: rgba(127, 127, 127, 0.12); }
.qs-h { display: flex; align-items: center; gap: 6px; }
.qs-h button { min-height: 22px; padding: 0 8px; font-size: 11px; }
.qs-obj { font-size: 12px; padding-left: 10px; }
@media (max-width: 700px) { .cr-cols { grid-template-columns: 1fr; } .cr-mems { max-height: 90px; } .sys-kv { grid-template-columns: auto 1fr; } }
/* guild window: emblem + name, positions table */
.g-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.g-emblem { width: 24px; height: 24px; flex: none; background: rgba(127, 127, 127, 0.15); }
.g-emblem img { width: 24px; height: 24px; image-rendering: pixelated; display: block; }
.g-emb-up { margin-left: auto; cursor: pointer; text-decoration: underline; }
.g-emb-up input { display: none; }
.g-pos input:not([type]) { width: 100%; min-width: 0; }
.g-pos .qty { width: 54px; }
.party-member .pm-btns { grid-column: 1 / -1; display: flex; gap: 4px; justify-content: flex-end; }
.party-member .pm-btns button { min-height: 22px; padding: 0 8px; font-size: 11px; }
/* the menu bar (pastel / dark themes, computer): scrolls sideways when the buttons do not fit, the shortcut hints
   are left out on smaller screens */
@media (min-width: 701px) {
	.menubar { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
	.menubar button { flex: none; }
}
@media (min-width: 701px) and (max-width: 1800px) { .menubar button kbd { display: none; } }

/* the server stops soon (ZC_SERVER_RESTART, ui.serverRestart): a banner at the top of the game screen */
.restart-banner { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 40; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px;
	padding: 6px 16px; border-radius: 12px; background: rgba(120, 20, 20, 0.86); border: 1px solid rgba(255, 210, 120, 0.8); color: #fff; text-align: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); font-family: var(--font, sans-serif); max-width: calc(100% - 24px); }
.restart-banner b { font-size: 15px; font-weight: 600; }
.restart-banner em { font-style: normal; color: #ffd36b; font-size: 18px; }
.restart-banner small { font-size: 12px; opacity: 0.9; }
.restart-banner.soon { animation: restart-blink 0.8s ease-in-out infinite; }
@keyframes restart-blink { 50% { background: rgba(170, 30, 30, 0.95); } }
html.mhud .restart-banner { top: calc(max(8px, env(safe-area-inset-top)) + 84px); }
html.mhud.mh-land .restart-banner { top: 8px; max-width: 46%; }

/* Cash Shop / Item Collection picture buttons beside the minimap (ui.js buildMapButtons) */
.map-btns { position: absolute; right: calc(100% + 6px); top: 0; display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }
#map-btns .map-btn { width: 40px !important; min-width: 40px; height: 40px !important; min-height: 40px !important; padding: 0 !important; border: 0 !important; background: none !important;
	border-radius: 8px !important; box-shadow: none !important; cursor: pointer; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); flex: none; }
.map-btn img { width: 40px; height: 40px; display: block; }
.map-btn:hover { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)) brightness(1.12); }
.map-btn:active { transform: translateY(1px); }
html.mhud .map-btns { display: none; }
/* the Cash Shop window */
.cash-pts { margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.cash-pts .grow { flex: 1; }
.cash-pts .cash-topup { padding: 3px 10px; min-height: 26px; border-radius: 13px; border: 1px solid #d08a10 !important; font-weight: 700; font-size: 12px; color: #4a2a00 !important;
	background: linear-gradient(#ffe08a, #f0ae2a) !important; box-shadow: 0 1px 4px rgba(200, 120, 0, 0.45); cursor: pointer; }
.cash-pts b { color: #c88a00; }
.cash-tabs { flex-wrap: wrap; }
.cash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px; max-height: 38vh; overflow-y: auto; margin: 6px 0; }
.cash-item { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; text-align: left; min-height: 44px; padding: 4px 6px;
	border: 1px solid var(--line, #c9d5ee); border-radius: 6px; cursor: pointer; user-select: none; }
.cash-item:hover { filter: brightness(1.08); }
.cash-item:active { transform: translateY(1px); }
.cash-item .ic { grid-row: span 2; }
.cash-item .nm { font-size: 12px; line-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cash-item .pr, .cash-row .pr { font-size: 12px; color: #c88a00; font-weight: 600; }
.cash-h { font-weight: 600; margin-top: 4px; }
.cash-cart { display: grid; gap: 3px; max-height: 22vh; overflow-y: auto; }
.cash-row { display: flex; align-items: center; gap: 6px; }
.cash-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cash-row button { min-height: 24px; width: 26px; padding: 0; }
.cash-row .q { min-width: 22px; text-align: center; }
.cash-kafra { margin-top: 6px; gap: 6px; align-items: center; }

/* ---- navigation: the walk to a map of the world map (navi.js / worldmap.js) ---- */
.navi-banner { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 19; display: flex; align-items: center; gap: 8px;
	padding: 4px 6px 4px 12px; border-radius: 18px; background: rgba(16, 34, 66, 0.88); border: 1px solid rgba(120, 190, 255, 0.6); color: #eaf3ff;
	font: 13px/18px Kanit, Tahoma, sans-serif; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); pointer-events: auto; max-width: calc(100vw - 24px); }
.navi-banner.hidden { display: none; }
.navi-banner .tx { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navi-banner small { color: #a9c4ec; margin-left: 4px; }
.navi-banner button { min-height: 0 !important; height: 26px; padding: 0 12px !important; border-radius: 13px !important; border: 1px solid #ffb3b3 !important;
	background: linear-gradient(#ff7a7a, #d63b3b) !important; color: #fff !important; font: 600 12px Kanit, Tahoma, sans-serif !important; }
.win-worldmap .wm-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.win-worldmap .wm-search { flex: 1; min-width: 0; }
.win-worldmap .wm-here { white-space: nowrap; font-size: 12px; }
.win-worldmap .wm-res, .win-worldmap .wm-subl { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; }
.win-worldmap .wm-res button, .win-worldmap .wm-subl button { padding: 1px 8px; min-height: 22px; font-size: 12px; }
.win-worldmap .wm-res button.on, .win-worldmap .wm-subl button.on { outline: 2px solid #4fd8ff; }
.win-worldmap .wm-subl { max-height: 120px; overflow-y: auto; }
.win-worldmap .wm-main { display: flex; gap: 10px; align-items: flex-start; }
.win-worldmap .wm-map-slot { flex: 1; min-width: 0; }
.win-worldmap .wm-scroll { height: min(470px, calc(var(--maxh, 600px) - 120px)); min-height: 240px; overflow: auto; border-radius: 6px; background: #0f1a2e; touch-action: pan-x pan-y; cursor: grab; }
.win-worldmap .wm-cv { display: block; }
.win-worldmap .wm-side { width: 220px; flex: none; display: flex; flex-direction: column; gap: 6px; }
.win-worldmap .wm-title b { font-size: 15px; }
.win-worldmap .wm-prev { display: block; width: 210px; height: 210px; border-radius: 6px; cursor: crosshair; image-rendering: pixelated; }
.win-worldmap .wm-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.win-worldmap .wm-acts button { padding: 4px 10px; }
.win-worldmap .wm-navi { margin: 2px 0 6px; padding: 4px 8px; border-radius: 6px; background: rgba(255, 214, 80, 0.16); font-size: 12px; }
.win-worldmap .wm-navi button { margin-left: 6px; padding: 0 8px; min-height: 20px; font-size: 12px; }
.win-worldmap .wm-help { margin: 6px 0 0; }
.win-worldmap .wm-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; }
.win-worldmap .wm-key.town { border: 2px solid #f3c74e; background: #d6c496; }
.win-worldmap .wm-key.here { border: 2px solid #ff4f4f; }
.win-worldmap .wm-key.way { border: 2px solid #ffd650; }
.win-worldmap button.link { border: 0 !important; background: none !important; color: #3d7fd8 !important; padding: 0 4px !important; min-height: 0 !important; text-decoration: underline; }

/* ---- the sell window: a tap on a row sells all of it (ui.js WINDOWS.shop / sellAct) ---- */
.win-shop .sell-tabs { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.win-shop .sell-tabs button { padding: 2px 10px; min-height: 26px; }
.win-shop .sell-tabs button.on { outline: 2px solid #4f8ff0; font-weight: 600; }
.win-shop .sell-tabs small { opacity: 0.7; }
.win-shop .sell-quick { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.win-shop .sell-quick button { padding: 2px 8px; min-height: 26px; font-size: 12px; }
.win-shop .sell-quick .sort { margin-left: auto; }
.win-shop .sell-list { display: flex; flex-direction: column; gap: 3px; max-height: min(52vh, calc(var(--maxh, 600px) - 170px)); overflow-y: auto; }
.win-shop .sell-row { display: grid; grid-template-columns: 18px auto 1fr auto auto; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; cursor: pointer;
	border: 1px solid rgba(127, 140, 170, 0.35); background: rgba(127, 140, 170, 0.08); user-select: none; -webkit-tap-highlight-color: transparent; }
.win-shop .sell-row:hover { background: rgba(79, 143, 240, 0.12); }
.win-shop .sell-row.on { background: rgba(79, 143, 240, 0.22); border-color: #4f8ff0; }
.win-shop .sell-row .ck { width: 18px; height: 18px; border-radius: 4px; border: 2px solid #8fa4cc; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; line-height: 1; }
.win-shop .sell-row.on .ck { background: #3d7fe0; border-color: #3d7fe0; }
.win-shop .sell-row .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.win-shop .sell-row .nm em { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 8px; font-style: normal; font-size: 10.5px; line-height: 16px; }
.win-shop .sell-row .sw { background: #ffe1b3; color: #7a4300; }
.win-shop .sell-row .shk { background: #dfe8ff; color: #2a4a8a; }
.win-shop .sell-row .pr { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.win-shop .sell-row .pr small { display: block; font-size: 10.5px; color: #3d7fe0; }
.win-shop .sell-row .sq { display: flex; align-items: center; gap: 3px; }
.win-shop .sell-row .sq button { width: 26px; height: 26px; min-height: 26px; padding: 0; border-radius: 6px; font-size: 15px; line-height: 1; }
.win-shop .sell-row .sq b { min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; cursor: text; text-decoration: underline dotted; }
.win-shop .win-foot .total b { font-size: 15px; color: #c88a00; }
/* the storage window: a tap on a row moves all of it; quick buttons */
.win-storage .sto-row { cursor: pointer; }
.win-storage .sto-row:hover { background: rgba(79, 143, 240, 0.12); }
.win-storage .sto-row .ct { white-space: nowrap; }
.win-storage .sto-row button { flex-shrink: 0; white-space: nowrap; }
.win-storage .sto-quick { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }
.win-storage .sto-quick button { padding: 2px 10px; min-height: 26px; font-size: 12px; }
.win-storage .win-foot .sto-q { padding: 0 8px; min-height: 20px; font-size: 11px; }
/* the AUTO window's farm map row */
.win-ai .ai-farm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.win-ai .ai-farm .ai-map { width: 130px; }
.win-ai .ai-farm button { padding: 1px 8px; min-height: 24px; font-size: 12px; }

/* ---- the version tag (app.js verPlace): a corner of the login screen, under the minimap in game; orange = new version ---- */
#ver-tag { position: fixed; right: 8px; bottom: 6px; z-index: 50; width: auto; height: auto; min-height: 0; margin: 0; padding: 1px 7px; border: 0; border-radius: 8px;
	background: rgba(0, 0, 0, 0.35); color: rgba(255, 255, 255, 0.85); font: 600 10px/14px 'Kanit', Tahoma, sans-serif; letter-spacing: 0.2px;
	box-shadow: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); cursor: pointer; white-space: nowrap; }
#ver-tag.in-map { position: absolute; right: 0; top: 100%; bottom: auto; margin-top: 3px; z-index: 1; }
html.mhud #ver-tag.in-map { top: auto; bottom: 6px; right: 8px; margin: 0; padding: 0 4px; font-size: 9px; line-height: 12px; background: rgba(0, 0, 0, 0.45); border-radius: 6px; }
#ver-tag.stale { position: fixed; left: 50%; right: auto; top: max(8px, env(safe-area-inset-top)); bottom: auto; transform: translateX(-50%); z-index: 900;
	max-width: calc(100vw - 24px); padding: 6px 14px; border-radius: 14px; white-space: normal; text-align: center;
	background: #e67e22; color: #fff; font-size: 13px; line-height: 18px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); }
#ver-tag.stale:hover { background: #f08c2e; }


/* ---- top-up (topup.js): the gold TOP UP button glows, the window, the "done" card ---- */
/* the TOP UP button (PC beside the minimap, phone in the right column, mobilehud.js topupFace): bigger than the buttons
   next to it, a gold glow that breathes, a light sweeping over it every few seconds, three sparkles, a little hop now and
   then. Only opacity / transform move (cheap for the GPU); low graphics (html.gfx-low) or "reduce motion" = the glow, still */
.tu-btn { position: relative; z-index: 0; overflow: visible !important; animation: tu-hop 6.5s ease-in-out infinite; }
.tu-btn::before { content: ''; position: absolute; inset: 3px; z-index: -1; border-radius: 8px; pointer-events: none;
	box-shadow: 0 0 12px 7px rgba(255, 196, 40, 0.95), 0 0 24px 11px rgba(255, 140, 20, 0.5); opacity: 0.3; animation: tu-breathe 2.4s ease-in-out infinite; }
.tu-btn .tu-face { position: relative; display: block; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; }
.tu-btn .tu-face img { width: 100% !important; height: 100% !important; display: block; }
.tu-btn .tu-shine { position: absolute; top: -25%; bottom: -25%; left: -60%; width: 45%; pointer-events: none;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 100%);
	transform: translateX(0) skewX(-18deg); opacity: 0; animation: tu-shine 4.6s ease-in-out infinite; }
.tu-btn .tu-spark { position: absolute; z-index: 1; font-style: normal; font-size: 12px; line-height: 1; color: #fff7c2; pointer-events: none;
	text-shadow: 0 0 4px #ffcc33, 0 0 9px #ff9d00; opacity: 0; animation: tu-twinkle 2.7s ease-in-out infinite; }
.tu-btn .tu-spark.a { left: -6px; top: -7px; }
.tu-btn .tu-spark.b { right: -7px; top: 28%; font-size: 10px; animation-delay: 0.9s; }
.tu-btn .tu-spark.c { left: 22%; bottom: -8px; font-size: 11px; animation-delay: 1.8s; }
@keyframes tu-breathe { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes tu-shine { 0%, 60% { transform: translateX(0) skewX(-18deg); opacity: 0; } 63% { opacity: 1; } 85% { transform: translateX(380%) skewX(-18deg); opacity: 1; } 86%, 100% { transform: translateX(380%) skewX(-18deg); opacity: 0; } }
@keyframes tu-twinkle { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); } 20% { opacity: 1; transform: scale(1.15) rotate(45deg); } 42% { opacity: 0; transform: scale(0.5) rotate(90deg); } }
@keyframes tu-hop { 0%, 88%, 100% { transform: translateY(0) scale(1); } 91% { transform: translateY(-5px) scale(1.06); } 94% { transform: translateY(0) scale(0.97); } 97% { transform: translateY(-2px) scale(1.02); } }
html.gfx-low .tu-btn, html.gfx-low .tu-btn::before { animation: none; }
html.gfx-low .tu-btn::before { opacity: 0.75; }
html.gfx-low .tu-btn .tu-shine, html.gfx-low .tu-btn .tu-spark { display: none; }
@media (prefers-reduced-motion: reduce) {
	.tu-btn, .tu-btn::before { animation: none; }
	.tu-btn::before { opacity: 0.75; }
	.tu-btn .tu-shine, .tu-btn .tu-spark { display: none; }
}
#map-btns { align-items: flex-end; }
#map-btns .map-btn.map-topup { width: 50px !important; min-width: 50px; height: 50px !important; min-height: 50px !important; border-radius: 10px !important; }
#map-btns .map-btn.map-topup:hover { filter: brightness(1.1); }
.win-topup .win-body { font-size: 13px; }
.win-topup .tu-bal { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding: 7px 12px; border-radius: 10px; color: #fff;
	background: linear-gradient(90deg, #2c3d7a, #4b2f78); border: 1px solid rgba(255, 214, 102, 0.55); }
.win-topup .tu-bal b { color: #8fe6ff; font-size: 15px; }
.win-topup .tu-bal b.pt { color: #ffd966; }
.win-topup .tu-bal .tot { margin-left: auto; font-size: 11.5px; opacity: 0.85; }
.win-topup .tu-off { margin: 14px 4px; padding: 10px 12px; border-radius: 8px; background: rgba(230, 126, 34, 0.14); color: #b35a00; }
.win-topup .tu-h2 { margin: 12px 0 6px; font-weight: 700; }
.win-topup .tu-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.win-topup .tu-pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; height: auto; min-height: 0; margin: 0; padding: 12px 4px 9px;
	border-radius: 12px; border: 1px solid #c9d4ef !important; background: linear-gradient(#ffffff, #eef3ff) !important; color: #23305a !important; cursor: pointer;
	font: inherit; box-shadow: 0 1px 3px rgba(20, 40, 90, 0.15); transition: transform 0.08s, box-shadow 0.15s; }
.win-topup .tu-pack:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(40, 80, 200, 0.25); border-color: #6f8fe8 !important; }
.win-topup .tu-pack:disabled { opacity: 0.55; cursor: default; }
.win-topup .tu-pack .tu-pay { font-size: 21px; font-weight: 800; line-height: 1.15; color: #2a50c8; }
.win-topup .tu-pack .tu-pay small { font-size: 13px; }
.win-topup .tu-pack .tu-val { min-height: 15px; font-size: 11px; color: #8a5a00; }
.win-topup .tu-pack .tu-cash { font-size: 15px; font-weight: 700; color: #1d8a5a; }
.win-topup .tu-pack .tu-cash small { font-size: 11px; font-weight: 600; }
.win-topup .tu-pack .tu-pts { font-size: 11.5px; color: #a0620a; }
.win-topup .tu-pack .tu-tag { position: absolute; top: -8px; right: -3px; padding: 1px 7px; border-radius: 9px; font-style: normal; font-size: 10.5px; font-weight: 800; color: #fff;
	background: #6a5be0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.win-topup .tu-pack.tg-good .tu-tag { background: #c246c9; }
.win-topup .tu-pack.tg-great .tu-tag { background: #e8487e; }
.win-topup .tu-pack.tg-best .tu-tag { background: linear-gradient(#ffcf4a, #f08a00); color: #3a2000; }
.win-topup .tu-pack.tg-best { border-color: #f0a91e !important; background: linear-gradient(#fffaf0, #ffefc8) !important; }
.win-topup .tu-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px; text-align: center; }
.win-topup .tu-qh { font-size: 15px; }
.win-topup .tu-qh b { color: #2a50c8; font-size: 19px; }
.win-topup .tu-img { width: min(260px, 70vw); height: auto; image-rendering: pixelated; background: #fff; padding: 8px; border-radius: 10px; border: 1px solid #c9d4ef; }
.win-topup .tu-get b { color: #1d8a5a; }
.win-topup .tu-get b.pt { color: #a0620a; }
.win-topup .tu-wait { display: flex; align-items: center; justify-content: center; gap: 8px; color: #2a50c8; font-weight: 600; }
.win-topup .tu-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(42, 80, 200, 0.25); border-top-color: #2a50c8; animation: tu-spin 0.9s linear infinite; }
@keyframes tu-spin { to { transform: rotate(360deg); } }
.win-topup .tu-meta { font-size: 12px; color: #55607a; }
.win-topup .tu-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 2px; }
.win-topup .tu-save { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 6px; border: 1px solid #c9d4ef; text-decoration: none; color: #2a50c8; font-size: 12.5px; }
.win-topup .tu-note { margin: 10px 0 0; padding: 7px 10px; border-radius: 8px; background: rgba(42, 80, 200, 0.08); font-size: 12.5px; }
.win-topup .tu-note.bad { background: rgba(230, 70, 70, 0.1); color: #b02020; }
.win-topup .tu-hist { margin-top: 12px; }
.win-topup .tu-hist summary { cursor: pointer; color: #55607a; font-size: 12.5px; }
.win-topup .tu-list { display: grid; gap: 2px; margin-top: 6px; font-size: 12px; }
.win-topup .tu-row { display: grid; grid-template-columns: 82px 62px 1fr auto; gap: 6px; padding: 3px 6px; border-radius: 5px; background: rgba(127, 127, 127, 0.08); }
.win-topup .tu-row .st { font-weight: 600; }
.win-topup .tu-row.st-paid .st, .win-topup .tu-row.st-manual .st { color: #1d8a5a; }
.win-topup .tu-row.st-review .st { color: #b02020; }
.win-topup .tu-row.st-pending .st { color: #2a50c8; }
#topup-pop { position: fixed; left: 50%; top: 22%; z-index: 70; width: min(320px, calc(100vw - 24px)); transform: translateX(-50%); padding: 14px 16px 10px; text-align: center;
	border-radius: 16px; color: #fff; font: 14px/1.4 'Kanit', Tahoma, sans-serif; cursor: pointer;
	background: radial-gradient(circle at 50% 0, rgba(255, 214, 102, 0.35), transparent 60%), linear-gradient(160deg, rgba(36, 48, 98, 0.96), rgba(22, 30, 64, 0.96));
	border: 1px solid rgba(255, 214, 102, 0.85); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 26px rgba(255, 200, 60, 0.35); }
#topup-pop.hidden { display: none; }
@keyframes lv-in { from { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(0.92); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
#topup-pop.tu-in { animation: lv-in 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }
#topup-pop .tu-h { font-size: 20px; font-weight: 800; color: #ffe066; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
#topup-pop .tu-pay { font-size: 13px; opacity: 0.8; }
#topup-pop .tu-got { display: flex; justify-content: center; gap: 14px; margin: 8px 0 4px; font-size: 13px; }
#topup-pop .tu-got b { display: block; font-size: 22px; color: #8ff0a4; line-height: 1.15; }
#topup-pop .tu-got span + span b { color: #ffd966; }
#topup-pop .tu-tot { font-size: 12px; opacity: 0.85; }
#topup-pop .tu-x { margin-top: 6px; font-size: 11px; opacity: 0.55; }

/* ---- the box beside a status icon under the mouse (PC, ui.js efstTip): name, the skill that gives it, time left ---- */
.efst-tip { position: fixed; z-index: 1000; max-width: 230px; padding: 5px 9px 6px; pointer-events: none; border-radius: 4px;
	background: rgba(255, 255, 255, 0.97); border: 1px solid #8d9cc2; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); color: #1d2340; font-size: 12px; line-height: 17px; }
.efst-tip.hidden { display: none; }
.efst-tip .et-name { font-weight: 700; color: #1d3a8a; }
.efst-tip .et-from { color: #5a6380; font-size: 11px; }
.efst-tip .et-time b { font-variant-numeric: tabular-nums; }
.efst-tip .et-time b.soon { color: #d8321f; }
.efst-list .efst b.soon { color: #ff6b5a; }

/* ---- the RO arrow over the whole page (renderer.js cursors(): the client's cursor sprite) instead of the system one;
   text fields keep the caret; the game view sets its own (talk / attack / warp / pick up) ---- */
html.ro-cursor, html.ro-cursor body, html.ro-cursor *:not([data-own-cursor]) { cursor: var(--ro-cursor) !important; }
html.ro-cursor input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=submit]):not([type=color]), html.ro-cursor textarea,
html.ro-cursor [contenteditable=true] { cursor: text !important; }

/* ---- /mobile (client/mobile.html, ?phone=1): the mouse is a finger - a round touch spot instead of the arrow ---- */
html.phone-emu, html.phone-emu *:not([data-phone-x]) {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='11' fill='rgba(120,130,150,0.38)' stroke='rgba(255,255,255,0.95)' stroke-width='2'/%3E%3C/svg%3E") 14 14, pointer !important; }

/* ---- the character in the equipment windows (ui.js eqPreview): the picture and two arrows that turn it ---- */
.eq-prev-row { display: flex; justify-content: center; margin: 0 0 6px; }
.eq-char-box { display: inline-flex; flex-direction: column; align-items: center; }
.eq-prev-row .eq-char { width: 56px; height: 120px; image-rendering: pixelated; }
.eq-rot { display: flex; gap: 18px; }
.eq-rot button { width: 18px; height: 16px; min-height: 16px; padding: 0; font-size: 9px; line-height: 14px; border-radius: 3px; opacity: 0.75; }
.eq-rot button:hover { opacity: 1; }

/* ---- Member (member.js): the MEMBER button (its level in a gold coin), the box of the levels, "เกิดตรงนี้" ---- */
#map-btns .map-btn.map-member { position: relative; }
#map-btns .map-btn .mb-lv { position: absolute; right: -6px; top: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; box-sizing: border-box;
	font: 800 11px/18px system-ui, sans-serif; color: #3a2400; text-align: center; background: linear-gradient(#ffe27a, #f2a50c); border: 1px solid #8a5a00;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); pointer-events: none; }
.win-member .win-body { font-size: 13px; }
.win-member .mb-head { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; color: #fff;
	background: linear-gradient(100deg, #26346e, #55308a 60%, #7a3a7e); border: 1px solid rgba(255, 214, 102, 0.6); }
.win-member .mb-badge { position: relative; flex: none; width: 58px; height: 58px; display: grid; place-items: center; }
.win-member .mb-badge span { position: absolute; inset: 0; font-size: 58px; line-height: 58px; text-align: center; color: #ffd24a;
	text-shadow: 0 0 10px rgba(255, 200, 60, 0.7), 0 2px 0 #8a5a00; }
.win-member .mb-badge b { position: relative; top: 3px; font: 900 18px/1 system-ui, sans-serif; color: #5a3200; }
.win-member .mb-badge.off span { color: #9aa3bd; text-shadow: none; }
.win-member .mb-badge.off b { color: #3c4560; }
.win-member .mb-sum { flex: 1; min-width: 0; }
.win-member .mb-title { font-size: 17px; font-weight: 800; color: #ffe08a; }
.win-member .mb-pts b { color: #ffd966; font-size: 14px; }
.win-member .mb-bar { position: relative; height: 16px; margin: 5px 0 2px; border-radius: 8px; background: rgba(0, 0, 0, 0.35); overflow: hidden; }
.win-member .mb-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: linear-gradient(90deg, #f7b500, #ffe27a); }
.win-member .mb-bar span { position: relative; display: block; text-align: center; font-size: 11px; line-height: 16px; font-weight: 700; color: #fff; text-shadow: 0 1px 1px #000; }
.win-member .mb-next { color: #e6e0ff !important; }
.win-member .mb-now { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.win-member .mb-now span { padding: 3px 9px; border-radius: 12px; background: rgba(60, 110, 230, 0.12); border: 1px solid rgba(60, 110, 230, 0.3); }
.win-member .mb-now b { color: #1d8a5a; }
.win-member .mb-hint { margin: 8px 2px; padding: 8px 10px; border-radius: 8px; background: rgba(240, 170, 30, 0.14); color: #8a5200; }
.win-member .mb-h2 { margin: 10px 0 5px; font-weight: 700; }
.win-member .mb-list { display: flex; flex-direction: column; gap: 4px; }
.win-member .mb-row { position: relative; display: flex; gap: 8px; align-items: flex-start; padding: 6px 30px 6px 8px; border-radius: 9px;
	border: 1px solid rgba(120, 130, 170, 0.35); background: rgba(255, 255, 255, 0.55); color: #2a3150; }
.win-member .mb-row .mb-l { flex: none; width: 52px; display: flex; flex-direction: column; align-items: center; }
.win-member .mb-row .mb-l b { font-size: 14px; color: #2a50c8; }
.win-member .mb-row .mb-l small { font-size: 10.5px; color: #a0620a; }
.win-member .mb-row ul { margin: 0; padding: 0 0 0 14px; font-size: 12px; line-height: 1.45; }
.win-member .mb-row i { position: absolute; right: 8px; top: 6px; font-style: normal; font-size: 13px; }
.win-member .mb-row .mb-ok { color: #1d9a5a; font-weight: 900; }
.win-member .mb-row.got { background: rgba(80, 200, 130, 0.1); border-color: rgba(40, 160, 90, 0.35); }
.win-member .mb-row.cur { background: linear-gradient(90deg, rgba(255, 214, 102, 0.35), rgba(255, 236, 170, 0.2)); border: 2px solid #f0a91e; }
.win-member .mb-row.cur .mb-l b { color: #b36b00; }
.win-member .mb-row.lock { opacity: 0.62; }
#death .mb-revive { background: linear-gradient(#ffe27a, #f2a50c) !important; color: #3a2400 !important; border: 1px solid #8a5a00 !important; font-weight: 800; }
#death .mb-revive small { font-weight: 600; font-size: 0.78em; }
html.ro-pics .theme-ro #death .mb-revive { width: 221px; min-width: 221px; height: 22px; min-height: 22px; padding: 0; font-size: 12px; border-radius: 3px; }