html {
	height: 100%;
	background: #070806;
}

body {
	margin: 0;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
	box-sizing: border-box;
	min-height: 100dvh;
	color: #d8d4c8;
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: 0.3px;
	background: #070806;
	font-family: Arial, "Microsoft YaHei", sans-serif;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}	


body.game-active {
	background: 
		repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 20px),
		linear-gradient(180deg, #090b0c 0%, #070604 100%);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(196,154,79,0.45); border-radius: 8px; transition: background 0.3s ease; }
::-webkit-scrollbar-thumb:hover { background: rgba(196,154,79,0.7); }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.15); border-radius: 8px; }

/* Game shell */
div#chat {
	box-sizing: border-box;
	padding: 8px 8px 4px 8px;
	width: 100%;
	height: 40px;
	overflow: auto;
	background: rgba(22,14,5,0.88);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(196,154,79,0.38);
	color: #d9d2bd;
}

div#long {
	box-sizing: border-box;
	width: 100%;
	padding: 8px;
	border-bottom: 1px solid rgba(196,154,79,0.24);
	background: rgba(17,20,23,0.85);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	overflow: auto;
}

div#tbar {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 54px;
	padding: 7px 8px;
	border-bottom: 1px solid rgba(196,154,79,0.42);
	background: rgba(23,17,10,0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	overflow: hidden;
}

div#here {
	float: none;
	font-size: 24px;
	font-weight: 700;
	color: #f0dfad;
	padding-top: 0;
	min-width: 0;
	letter-spacing: 1px;
	text-shadow: 0 0 14px rgba(240,223,173,0.4), 0 0 28px rgba(240,223,173,0.15);
}

div#tmenu {
	float: none;
	display: flex;
	gap: 6px;
}

div#mleft {
	float: left;
	width: 15%;
	box-sizing: border-box;
	background: rgba(13,15,16,0.82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-right: 1px solid rgba(196,154,79,0.38);
}

div#mright {
	float: left;
	width: 85%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: rgba(9,11,13,0.95);
}

div#hps {
	float: left;
	line-height: 100%;
	width: 100%;
	background-color: rgba(18,22,21,0.88);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-top: 1px solid rgba(196,154,79,0.28);
}

div#menu {
	float: left;
	box-sizing: border-box;
	width: 100%;
	height: calc(86px + env(safe-area-inset-bottom));
	padding: 4px 4px calc(4px + env(safe-area-inset-bottom)) 4px;
	background: rgba(16,12,7,0.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-top: 1px solid rgba(196,154,79,0.42);
}

div#obj,
div#acts {
	float: left;
	box-sizing: border-box;
	width: 100%;
	padding: 4px;
	overflow: auto;
}

div#hudong {
	width: 80%;
	overflow: auto;
}

div#map {
	font-size: 8px;
	line-height: 140%;
	width: 80%;
	overflow: auto;
}

div#exits {
	float: left;
	box-sizing: border-box;
	width: 100%;
	height: 104px;
	flex: 0 0 104px;
	margin-top: 0;
	padding: 4px;
	border-top: 2px solid rgba(196,154,79,0.72);
	background: rgba(16,18,20,0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	overflow: auto;
}

.exit-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, 30px); gap: 6px 10px; height: 100%; max-width: 560px; margin: 0 auto; align-content: center; font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Arial Black", Arial, sans-serif; }
.exit-slot { display: flex; align-items: center; justify-content: center; min-width: 0; }
.exit-btn { width: 100% !important; max-width: 168px; height: 28px !important; min-height: 28px !important; margin: 0 !important; padding: 2px 8px !important; color: #b9aa78 !important; background: linear-gradient(180deg, rgba(35,29,18,0.94), rgba(15,13,9,0.94)) !important; border: 1px solid rgba(143,118,66,0.34) !important; border-radius: 5px !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-shadow: 0 1px 0 #000 !important; box-shadow: inset 0 1px 0 rgba(255,230,160,0.04), 0 0 4px rgba(120,82,32,0.05) !important; }
.exit-center-label { width: 100%; max-width: 180px; height: 30px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 8px; color: #bdb293; border: 1px solid rgba(150,132,85,0.24); border-radius: 5px; background: radial-gradient(circle at 50% 0, rgba(143,118,66,0.09), rgba(16,14,11,0.72)); font-size: 14px; font-weight: 760; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 #000; }
.side-exit-btn { width: 95% !important; min-height: 34px !important; height: 34px !important; margin: 3px auto !important; padding: 3px 6px !important; display: block !important; color: #c7b275 !important; background: rgba(28,23,14,0.9) !important; border: 1px solid rgba(154,124,64,0.34) !important; border-radius: 5px !important; font-size: 12px !important; line-height: 1.15 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

div#out {
	box-sizing: border-box;
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 8px;
	overflow: auto;
	display: block;
	position: relative;
	z-index: 1;
	border-bottom: 1px solid rgba(196,154,79,0.42);
	background: 
		repeating-linear-gradient(0deg, rgba(255,255,255,0.008) 0, rgba(255,255,255,0.008) 1px, transparent 1px, transparent 20px),
		linear-gradient(180deg, rgba(11,13,15,0.95), rgba(8,10,12,0.98));
	background-size: 100% 100%;
}

div#mycmds {
	position: absolute;
	height: min(118px, 32dvh);
	max-height: 42dvh;
	left: 15%;
	bottom: 86px;
	width: 85%;
	box-sizing: border-box;
	margin: 0;
	padding: 4px;
	z-index: 8;
	font-size: 18px;
	background-color: rgba(17,16,12,0.88);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top: 1px solid rgba(196,154,79,0.38);
	border-left: 1px solid rgba(196,154,79,0.24);
	overflow: auto;
}

/* Base controls */
input,
button {
	-webkit-appearance: none;
	box-sizing: border-box;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

input {
	border: 1px solid #888;
	height: 35px;
	color: #ddd;
	width: 99%;
	background-color: rgba(200,200,200,0.1);
	border-radius: 3px;
	letter-spacing: 0.3px;
}

button {
	border: 1px solid rgba(178,154,104,0.36);
	color: #e4dcc6;
	vertical-align: middle;
	font-size: 12px;
	margin: 1px;
	padding: 4px;
	width: 99%;
	background-color: rgba(38,39,38,0.92);
	border-radius: 5px;
	cursor: pointer;
	letter-spacing: 0.3px;
}

button:hover,
input:hover { background-color: rgba(60,56,50,0.95); border-color: rgba(196,154,79,0.6); box-shadow: 0 0 8px rgba(196,154,79,0.15); }
button:active,
input:active { background-color: #5a4726; transform: scale(0.98); }

hr { height: 1px; border: none; border-top: 1px dashed #756b54; }

input.newbt {
	white-space: pre;
	word-wrap: break-word;
	font-size: 11px;
	height: 28px;
	vertical-align: middle;
	width: 86%;
	padding: 1px;
	margin: 1px;
	background-color: rgba(200,200,200,0.1);
	border-radius: 3px;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

input.newbt:hover { background-color: rgba(200,200,200,0.18); }
input.newbt:active { background-color: #5a4726; }

input.hpbt {
	border: 0;
	white-space: pre;
	word-wrap: break-word;
	color: #fff;
	font-size: 10px;
	vertical-align: middle;
	padding: 0;
	margin: 0;
	line-height: 100%;
	border-radius: 0;
	background-color: transparent;
}

div.hpbt { border: 0; opacity: 0.86; background-color: #2d3230; }

input.menubt,
button.menubt {
	border: 1px solid rgba(196,154,79,0.36);
	color: #f2e8c6;
	height: 100%;
	width: 100%;
	background: rgba(33,25,13,0.96);
	border-radius: 5px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.5px;
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.12s ease, box-shadow 0.25s ease;
}

input.menubt:hover,
button.menubt:hover {
	background: rgba(55,42,22,0.98);
	border-color: rgba(196,154,79,0.7);
	box-shadow: 0 0 16px rgba(196,154,79,0.25), inset 0 0 8px rgba(196,154,79,0.08);
}

input.ucmds {
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0 2px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #9b8fe6;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

input.ucmds:hover { color: #b7aef5; background: transparent; }
.mud-cmd-link { color: #9b8fe6 !important; text-decoration-color: rgba(155,143,230,0.8) !important; word-break: keep-all; }
.mud-cmd-link:hover { color: #b7aef5 !important; }

.game-menu-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 4px;
	height: 100%;
}

.game-menu-grid .menubt {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 4px;
	white-space: normal;
	letter-spacing: 0.5px;
}

.menu-skill { color: #dfe887 !important; }
.menu-fight { color: #e88972 !important; }
.menu-quest { color: #e38ee6 !important; }
.menu-chat { color: #83d7d0 !important; }
.menu-system { color: #c8c2b0 !important; }

input#loginok {
	height: 40px;
	width: 100%;
	font-size: 20px;
	color: #fff;
	background-color: #448EF3;
	border: 0;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

input#loginok:hover { background-color: #5a9ff5; }
input#loginok:active { transform: scale(0.98); }

span.long { white-space: pre-wrap; word-wrap: break-all; height: auto; font-size: 12px; letter-spacing: 0.2px; }
span.out { white-space: pre-wrap; word-wrap: break-all; font-size: 13px; line-height: 1.55; letter-spacing: 0.2px; }
.room-long-panel { color: #d8d4c8; font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; padding: 2px 0 8px 0; border-bottom: 1px solid rgba(196,154,79,0.18); margin-bottom: 6px; }
.room-long-panel:empty { display: none; }
.room-title-panel { color: #f1d074; font-size: 18px; font-weight: 700; line-height: 1.35; padding: 2px 0 8px 0; margin-bottom: 6px; border-bottom: 1px solid rgba(196,154,79,0.22); text-shadow: 0 0 10px rgba(241,208,116,0.16); }
span.map { white-space: nowrap; font-size: 9px; letter-spacing: 0.5px; }
span.chat { white-space: normal; font-size: 13px; line-height: 1.45; letter-spacing: 0.2px; }
.mud-link { color: #7fe7df !important; text-decoration: underline !important; text-underline-offset: 2px; word-break: break-all; cursor: pointer; transition: color 0.2s ease; }
.mud-link:hover { color: #a0f0e8 !important; }
.mud-link:active { color: #f1d074 !important; }

/* Entry shell: login / server */
.entry-shell {
	width: min(100vw, 520px);
	min-height: min(86vh, 720px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	box-sizing: border-box;
	background: linear-gradient(180deg, rgba(16,18,22,0.35), rgba(4,5,7,0.82)), repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 18px), #101216;
}

.entry-panel {
	width: 100%;
	max-width: 430px;
	padding: 24px;
	box-sizing: border-box;
	background: rgba(28,29,34,0.92);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(205,175,111,0.38);
	border-radius: 8px;
	box-shadow: 0 18px 50px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 24px rgba(205,175,111,0.08);
	touch-action: manipulation;
}

.entry-brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
	width: 54px;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #2b1e16;
	border: 1px solid rgba(218,177,92,0.55);
	border-radius: 8px;
	color: #f3d58b;
	font-size: 28px;
	font-weight: 800;
	box-shadow: inset 0 0 18px rgba(219,153,48,0.14);
	text-shadow: 0 0 10px rgba(243,213,139,0.4);
}
.entry-brand h1 { margin: 0 0 5px 0; color: #f4efe2; font-size: 28px; line-height: 1.15; letter-spacing: 0.5px; text-shadow: 0 0 16px rgba(244,239,226,0.2); }
.entry-brand p { margin: 0; color: #aebfc4; font-size: 13px; }
.entry-divider { height: 1px; margin: 20px 0; background: linear-gradient(90deg, rgba(205,175,111,0), rgba(205,175,111,0.55), rgba(205,175,111,0)); }
.entry-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.entry-field { display: block; }
.entry-field span { display: block; margin-bottom: 7px; color: #d9c99d; font-size: 13px; }
.entry-field input {
	width: 100%;
	height: 46px;
	padding: 0 13px;
	box-sizing: border-box;
	background: rgba(8,10,12,0.58);
	border: 1px solid rgba(178,163,128,0.34);
	border-radius: 6px;
	color: #f5f0e6;
	font-size: 16px;
	outline: none;
	letter-spacing: 0.3px;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.entry-field input:focus { border-color: #d4aa58; box-shadow: 0 0 0 3px rgba(212,170,88,0.2), 0 0 16px rgba(212,170,88,0.12); transition: border-color 0.2s ease, box-shadow 0.3s ease; }
.entry-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.entry-check { display: flex; align-items: center; gap: 8px; color: #bfc5bd; font-size: 13px; }
.entry-check input { width: 16px; height: 16px; accent-color: #c49a4f; }
.entry-link { width: auto; height: auto; padding: 0; border: 0; background: transparent; color: #7fd2c4; font-size: 13px; cursor: pointer; transition: color 0.2s ease; }
.entry-link:hover { color: #a8f0e8; }
.entry-primary,
.entry-secondary { width: 100%; height: 48px; margin: 4px 0 0 0; border-radius: 6px; font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.25s ease; }
.entry-primary { border: 1px solid rgba(237,199,109,0.68); background: linear-gradient(180deg, #d6ae62, #90632e); color: #17130d; box-shadow: 0 8px 22px rgba(151,101,38,0.28); }
.entry-primary:hover { box-shadow: 0 8px 30px rgba(151,101,38,0.45); filter: brightness(1.08); }
.entry-primary:active { transform: scale(0.97); box-shadow: 0 4px 12px rgba(151,101,38,0.35); }
.entry-secondary { border: 1px solid rgba(151,169,157,0.35); background: rgba(13,17,18,0.62); color: #d4ded8; }
.entry-secondary:hover { background: rgba(30,35,38,0.75); border-color: rgba(151,169,157,0.55); }
.entry-secondary:active { transform: scale(0.97); }
.entry-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; color: #7f8d8a; font-size: 11px; }
.server-list { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.server-card { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 58px; padding: 0 14px; box-sizing: border-box; background: rgba(13,18,20,0.72); border: 1px solid rgba(196,154,79,0.34); border-radius: 6px; color: #f4efe2; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.12s ease; }
.server-card:hover { background: rgba(30,38,42,0.82); border-color: rgba(196,154,79,0.6); box-shadow: 0 0 12px rgba(196,154,79,0.15); }
.server-card:active { background: rgba(60,48,31,0.86); transform: scale(0.98); }
.server-card:disabled { opacity: 0.72; cursor: wait; transform: none; }
.server-card.loading { border-color: rgba(119,214,189,0.58); box-shadow: 0 0 12px rgba(119,214,189,0.12); }
.server-name { font-size: 16px; font-weight: 700; letter-spacing: 0.5px; text-shadow: 0 0 8px rgba(244,239,226,0.15); }
.server-status { color: #77d6bd; font-size: 12px; }

/* Skill dialog */
.skill-dialog-content { overflow: hidden !important; }
.skill-dialog-content > .out { display: block; font-size: 13px; line-height: 1.45; padding: 0 2px; }
.skill-dialog-content > br { display: none; }
.skill-layout { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; height: min(60vh, 520px); min-height: 300px; margin-top: 8px; overflow: hidden; }
.skill-category-panel { display: flex; flex-direction: column; gap: 7px; padding-right: 6px; overflow-y: auto; overflow-x: hidden; border-right: 1px solid rgba(190,176,140,0.32); -webkit-overflow-scrolling: touch; }
.skill-grid-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(54px, auto); gap: 7px; overflow-y: auto; overflow-x: hidden; padding: 0 3px 10px 0; align-content: start; -webkit-overflow-scrolling: touch; }
.skill-category-btn,
.skill-card-btn { width: 100% !important; height: auto !important; min-height: 62px; margin: 0 !important; padding: 8px 6px !important; background: rgba(48,48,56,0.94) !important; border: 1px solid rgba(168,157,132,0.42) !important; border-radius: 5px !important; color: #e6e2d8 !important; font-size: 13px !important; line-height: 1.3 !important; letter-spacing: 0.3px !important; text-align: center !important; white-space: normal !important; word-break: break-word !important; box-sizing: border-box !important; transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease !important; }
.skill-category-btn { min-height: 54px; color: #f1ead0 !important; background: rgba(43,39,31,0.96) !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: normal !important; }
.skill-card-btn { text-align: left !important; padding-left: 10px !important; overflow: hidden !important; }
.side-dialog-inventory .skill-card-btn { min-height: 48px !important; background: rgba(34,42,40,0.96) !important; border-color: rgba(126,156,142,0.42) !important; color: #dbe7df !important; }
.side-dialog-inventory .skill-category-btn { background: rgba(31,42,35,0.96) !important; border-color: rgba(126,156,142,0.4) !important; color: #e1eadf !important; }
.side-dialog-inventory .page-card-btn { background: rgba(40,49,41,0.98) !important; color: #d8d4aa !important; }
.page-card-btn { grid-column: 1 / -1; min-height: 42px !important; text-align: center !important; color: #f1d074 !important; background: rgba(57,47,29,0.96) !important; text-shadow: 0 0 8px rgba(241,208,116,0.2); }
.skill-category-btn:active,
.skill-card-btn:active { background: rgba(92,84,64,0.95) !important; transform: scale(0.97) !important; }

.skill-card-btn:hover { background: rgba(62,58,50,0.96) !important; border-color: rgba(168,157,132,0.65) !important; box-shadow: 0 0 8px rgba(168,157,132,0.12) !important; }
.skill-category-btn:hover { background: rgba(58,52,40,0.97) !important; border-color: rgba(196,154,79,0.6) !important; box-shadow: 0 0 10px rgba(196,154,79,0.12) !important; }

/* NPC / object action dialog */
.object-action-dialog-content { display: flex !important; flex-direction: column; gap: 4px; overflow: hidden !important; max-height: calc(100dvh - 120px) !important; }
.object-action-desc .out, .object-action-dialog-content > .out { display: inline; font-size: 12px; line-height: 1.02; padding: 0; white-space: pre-wrap; word-break: normal; overflow-wrap: anywhere; }
.object-action-dialog-content > br { display: none; }
.object-action-desc { flex: 0 1 auto; max-height: min(28vh, 180px); padding: 0 2px 3px 2px; overflow-y: auto; overflow-x: hidden; color: #d8d4c8; font-size: 12px; line-height: 1.02; white-space: pre-wrap; word-break: normal; overflow-wrap: anywhere; border-bottom: 1px solid rgba(190,176,140,0.18); -webkit-overflow-scrolling: touch; }
.object-action-desc br { display: block; height: 0; line-height: 0; margin: 0; padding: 0; }
.object-action-desc hr { margin: 2px 0; }
.mail-dialog-title { display: block; width: 100%; text-align: center; }
.object-action-layout { clear: both; flex: 0 1 auto; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 7px; min-height: 0; max-height: min(48vh, 430px); margin-top: 1px; overflow: hidden; align-items: start; }
.object-action-left { display: flex; flex-direction: column; gap: 5px; min-height: 0; max-height: min(44vh, 360px); padding-right: 6px; overflow-y: auto; overflow-x: hidden; border-right: 1px solid rgba(190,176,140,0.32); -webkit-overflow-scrolling: touch; }
.object-action-layout.object-action-no-left { grid-template-columns: minmax(0, 1fr); }
.object-action-layout.object-action-no-left .object-action-left { display: none; }
.object-action-right { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(34px, auto); gap: 5px; align-content: start; min-height: 0; max-height: min(44vh, 360px); overflow-y: auto; overflow-x: hidden; padding-right: 2px; -webkit-overflow-scrolling: touch; }
.object-action-left-btn,
.object-action-right-btn { width: 100% !important; height: auto !important; min-height: 34px; margin: 0 !important; padding: 4px 4px !important; box-sizing: border-box !important; border: 1px solid rgba(168,157,132,0.42) !important; border-radius: 5px !important; background: rgba(48,48,56,0.94) !important; color: #e6e2d8 !important; font-size: 11px !important; line-height: 1.15 !important; text-align: center !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: normal !important; transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease !important; }
.object-action-left-btn { min-height: 34px; background: rgba(43,39,31,0.96) !important; color: #f1ead0 !important; }
.object-action-right-btn { background: rgba(39,43,50,0.96) !important; }
.object-action-left-btn:hover,
.object-action-right-btn:hover { background: rgba(58,52,40,0.97) !important; border-color: rgba(196,154,79,0.6) !important; box-shadow: 0 0 8px rgba(196,154,79,0.12) !important; }
.object-action-left-btn:active,
.object-action-right-btn:active { transform: scale(0.97) !important; }

/* Generic command menus */
.generic-menu-dialog { overflow: hidden !important; }
.generic-menu-dialog > .out { display: block; font-size: 12px; line-height: 1.35; padding: 0 2px 6px 2px; white-space: normal; word-break: break-word; }
.generic-menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(38px, auto); gap: 6px; max-height: min(48vh, 430px); overflow-y: auto; overflow-x: hidden; padding: 2px 2px 8px 0; -webkit-overflow-scrolling: touch; }
.generic-menu-btn { width: 100% !important; height: auto !important; min-height: 38px !important; margin: 0 !important; padding: 5px 4px !important; border: 1px solid rgba(168,157,132,0.42) !important; border-radius: 5px !important; background: rgba(40,43,48,0.96) !important; color: #e6e2d8 !important; font-size: 11px !important; line-height: 1.15 !important; text-align: center !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: normal !important; box-sizing: border-box !important; }
.side-dialog-bank .generic-menu-btn { background: rgba(42,38,29,0.96) !important; border-color: rgba(190,156,92,0.44) !important; color: #eadfc2 !important; }
.side-dialog-shop .generic-menu-btn { background: rgba(33,43,43,0.96) !important; border-color: rgba(112,166,150,0.42) !important; color: #dcebe6 !important; }
.side-dialog-help .generic-menu-btn { background: rgba(38,39,50,0.96) !important; border-color: rgba(139,146,196,0.42) !important; color: #e2e3f0 !important; }
.side-dialog-fish .generic-menu-btn { background: rgba(29,43,45,0.96) !important; border-color: rgba(95,160,172,0.42) !important; color: #d7edf0 !important; }
.side-dialog-chat .generic-menu-btn { background: rgba(42,34,48,0.96) !important; border-color: rgba(170,126,190,0.42) !important; color: #eadcf0 !important; }

/* Input protocol dialog */
.input-dialog-content { overflow: hidden !important; }
.input-dialog-prompt { color: #e4dcc6; font-size: 13px; line-height: 1.35; margin-bottom: 8px; white-space: normal; word-break: break-word; }
.input-dialog-textarea { width: 100%; min-height: 72px; max-height: 160px; box-sizing: border-box; padding: 8px; resize: vertical; border: 1px solid rgba(168,157,132,0.44); border-radius: 5px; background: rgba(10,12,14,0.82); color: #f1eadc; font-size: 14px; line-height: 1.35; outline: none; }
.input-dialog-textarea:focus { border-color: rgba(196,154,79,0.72); box-shadow: 0 0 0 2px rgba(196,154,79,0.12); }
.input-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.input-dialog-submit, .input-dialog-cancel { width: 100% !important; height: 36px !important; margin: 0 !important; border-radius: 5px !important; font-size: 13px !important; }
.input-dialog-submit { background: rgba(89,67,32,0.98) !important; border: 1px solid rgba(196,154,79,0.58) !important; color: #f4e8c8 !important; }
.input-dialog-cancel { background: rgba(36,38,42,0.98) !important; border: 1px solid rgba(142,142,150,0.38) !important; color: #d7d6d2 !important; }

/* Legacy register styles still used by register page */
.login-container { padding: 30px 25px; background: rgba(26,26,46,0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.1), 0 0 20px rgba(26,26,46,0.3); touch-action: manipulation; }
.login-header { text-align: center; margin-bottom: 30px; }
.login-logo { font-size: 48px; margin-bottom: 15px; }
.login-title { font-size: 26px; font-weight: 700; color: #fff; margin: 0 0 8px 0; letter-spacing: 1px; text-shadow: 0 0 12px rgba(255,255,255,0.1); }
.login-subtitle { font-size: 14px; color: rgba(255,255,255,0.6); margin: 0; }
.login-form { margin-bottom: 20px; }
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 14px; color: rgba(255,255,255,0.8); margin-bottom: 8px; font-weight: 500; letter-spacing: 0.3px; }
.form-label .required { color: #ff6b6b; margin-left: 2px; }
.form-input { width: 100%; padding: 12px 16px; font-size: 16px; color: #fff; background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.1); border-radius: 8px; box-sizing: border-box; outline: none; letter-spacing: 0.3px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.form-input:focus { background: rgba(255,255,255,0.12); border-color: #d4aa58; box-shadow: 0 0 0 4px rgba(212,170,88,0.18), 0 0 18px rgba(212,170,88,0.1); }
.form-hint { display: block; font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 6px; }
.form-options { margin-bottom: 20px; }
.remember-me { display: flex; align-items: center; cursor: pointer; font-size: 14px; color: rgba(255,255,255,0.7); user-select: none; }
.remember-me input[type="checkbox"] { width: auto; margin-right: 8px; cursor: pointer; accent-color: #d4aa58; }
.form-actions { display: flex; flex-direction: column; gap: 12px; }
.btn { width: 100%; padding: 14px 20px; font-size: 16px; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.25s ease; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: linear-gradient(180deg, #d6ae62, #90632e); color: #17130d; box-shadow: 0 4px 15px rgba(151,101,38,0.32); }
.btn-primary:hover { box-shadow: 0 6px 20px rgba(151,101,38,0.45); filter: brightness(1.06); }
.btn-secondary { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); border: 2px solid rgba(255,255,255,0.15); }
.btn-secondary:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.25); }
.login-footer { text-align: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); }
.footer-text { font-size: 13px; color: rgba(255,255,255,0.5); margin: 0; }
.footer-link { color: #7fd2c4; text-decoration: none; transition: color 0.2s ease; }
.footer-link:hover { color: #a8f0e8; }
.login-error { background: rgba(255,107,107,0.15); border: 1px solid rgba(255,107,107,0.4); color: #ff6b6b; padding: 12px 16px; border-radius: 8px; margin-bottom: 15px; font-size: 14px; }
.login-success { background: rgba(81,207,102,0.15); border: 1px solid rgba(81,207,102,0.4); color: #51cf66; padding: 12px 16px; border-radius: 8px; margin-bottom: 15px; font-size: 14px; }

/* 角色创建 */
body.character-create-active {
	overflow: hidden;
}

body.character-create-active #hudong {
	display: block !important;
	position: fixed !important;
	inset: 0 !important;
	z-index: 10000 !important;
	width: 100vw !important;
	height: 100vh !important;
	height: 100dvh !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #070806 !important;
	border: 0 !important;
	box-shadow: none !important;
	overflow: hidden !important;
}

.character-create-screen {
	min-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
	box-sizing: border-box;
	background:
		radial-gradient(circle at 50% 20%, rgba(196,154,79,0.16), transparent 34%),
		linear-gradient(180deg, #0a0c08 0%, #050504 100%);
}

.character-create-card {
	width: min(92vw, 440px);
	padding: 28px 24px 24px;
	box-sizing: border-box;
	background: rgba(18,16,12,0.88);
	border: 1px solid rgba(196,154,79,0.32);
	border-radius: 12px;
	box-shadow: 0 24px 80px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.04);
}

.character-create-emblem {
	width: 58px;
	height: 58px;
	margin: 0 auto 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: linear-gradient(135deg, #2b1e16 0%, #1a120c 100%);
	border: 1px solid rgba(218,177,92,0.5);
	color: #f3d58b;
	font-size: 28px;
	font-weight: 800;
	text-shadow: 0 0 12px rgba(243,213,139,0.5);
}

.character-create-card h1 {
	margin: 0 0 22px;
	color: #f4efe2;
	font-size: 24px;
	line-height: 1.2;
	text-align: center;
}

.character-name-field, .character-gender-field {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-bottom: 18px;
}

.character-name-field label, .character-gender-field > label {
	color: #c4aa7a;
	font-size: 13px;
	font-weight: 600;
}

#nicheng {
	width: 100%;
	height: 50px;
	padding: 0 14px;
	box-sizing: border-box;
	background: rgba(6,8,10,0.68);
	border: 1px solid rgba(140,130,110,0.36);
	border-radius: 8px;
	color: #f0ebe0;
	font-size: 17px;
	outline: none;
}

#nicheng:focus {
	border-color: rgba(196,154,79,0.72);
	box-shadow: 0 0 0 3px rgba(196,154,79,0.12);
}

.character-gender-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.gender-option {
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid rgba(140,130,110,0.34);
	border-radius: 8px;
	background: rgba(8,11,12,0.7);
	color: #d8d0bf;
	font-size: 16px;
	font-weight: 700;
}

.gender-option.selected {
	border-color: rgba(196,154,79,0.78);
	background: linear-gradient(180deg, rgba(196,154,79,0.2), rgba(75,55,26,0.22));
	color: #f4e2ac;
	box-shadow: 0 0 0 3px rgba(196,154,79,0.1);
}

.gender-mark {
	font-size: 20px;
	line-height: 1;
}

.character-create-submit {
	width: 100%;
	height: 52px;
	margin-top: 4px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(135deg, #c49a4f 0%, #8a6230 50%, #c49a4f 100%);
	color: #1a1408;
	font-size: 17px;
	font-weight: 800;
}

.character-create-submit:disabled {
	opacity: 0.7;
}

.character-create-error {
	display: none;
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: 6px;
	background: rgba(220,60,60,0.12);
	border: 1px solid rgba(220,60,60,0.35);
	color: #e86060;
	font-size: 13px;
	text-align: center;
}

/* jQuery UI Dialog */
.ui-dialog { background: rgba(22,22,34,0.94) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; border: 1px solid rgba(255,255,255,0.12) !important; box-shadow: 0 18px 50px rgba(0,0,0,0.6), 0 0 20px rgba(0,0,0,0.3) !important; border-radius: 8px !important; overflow: hidden !important; touch-action: manipulation; }
.ui-widget-overlay { background: rgba(0,0,0,0.5) !important; touch-action: none !important; pointer-events: none !important; }
.ui-dialog-titlebar { background: #26324d !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; border-radius: 8px 8px 0 0 !important; padding: 14px 54px 14px 18px !important; min-height: 38px !important; }
.ui-dialog-title { color: #fff !important; font-size: 20px !important; font-weight: bold !important; text-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 0 14px rgba(255,255,255,0.08) !important; letter-spacing: 0.5px !important; }
.ui-dialog-content { background: transparent !important; padding: 10px !important; }
.custom-close-btn { position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; min-width: 38px !important; padding: 0 !important; margin: 0 !important; border: none !important; border-radius: 50% !important; background: #f45f66 !important; color: #fff !important; font-size: 26px !important; font-weight: 700 !important; line-height: 1 !important; cursor: pointer !important; z-index: 3 !important; transition: all 0.3s ease !important; box-shadow: 0 2px 8px rgba(255,107,107,0.4) !important; }
.custom-close-btn:hover { background: #ff5252 !important; transform: translateY(-50%) scale(1.1) !important; box-shadow: 0 4px 12px rgba(255,107,107,0.6) !important; }
.ui-dialog-buttonpane { background: rgba(0,0,0,0.2) !important; border-top: 1px solid rgba(255,255,255,0.1) !important; border-radius: 0 0 8px 8px !important; padding: 10px !important; }
.ui-dialog-buttonpane:empty { display: none !important; }
.ui-widget-overlay { touch-action: none; pointer-events: none; }
.ui-button { background: linear-gradient(180deg, #d6ae62, #90632e) !important; color: #17130d !important; border: none !important; border-radius: 8px !important; padding: 8px 20px !important; font-size: 14px !important; cursor: pointer !important; transition: all 0.2s ease !important; }
.ui-button:hover { filter: brightness(1.1) !important; box-shadow: 0 4px 12px rgba(151,101,38,0.3) !important; }
.ui-button:active { transform: scale(0.96) !important; }

/* 全屏登录页 */
#login-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
	box-sizing: border-box;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #070806;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.login-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(ellipse at 50% 30%, rgba(60,40,15,0.25) 0%, transparent 60%),
		radial-gradient(ellipse at 20% 80%, rgba(40,25,10,0.15) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 70%, rgba(50,30,12,0.12) 0%, transparent 50%),
		linear-gradient(180deg, #0a0c08 0%, #060504 100%);
}

.login-particles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	touch-action: none;
}

.login-content {
	position: relative;
	z-index: 2;
	width: min(92vw, 420px);
	padding: 32px 28px;
	box-sizing: border-box;
	background: rgba(18,16,12,0.85);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(196,154,79,0.3);
	border-radius: 12px;
	box-shadow:
		0 24px 80px rgba(0,0,0,0.7),
		0 0 0 1px rgba(196,154,79,0.08),
		inset 0 1px 0 rgba(255,255,255,0.04);
	animation: loginPanelIn 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	touch-action: manipulation;
}

@keyframes loginPanelIn {
	0% { opacity: 0; transform: translateY(30px) scale(0.95); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

.login-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 28px;
}

.login-brand-icon {
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #2b1e16 0%, #1a120c 100%);
	border: 1px solid rgba(218,177,92,0.5);
	border-radius: 12px;
	color: #f3d58b;
	font-size: 32px;
	font-weight: 800;
	text-shadow: 0 0 12px rgba(243,213,139,0.5);
	box-shadow:
		inset 0 0 20px rgba(219,153,48,0.15),
		0 4px 16px rgba(0,0,0,0.4);
	animation: iconPulse 3s ease-in-out infinite;
}

@keyframes iconPulse {
	0%, 100% { box-shadow: inset 0 0 20px rgba(219,153,48,0.15), 0 4px 16px rgba(0,0,0,0.4), 0 0 0 0 rgba(196,154,79,0); }
	50% { box-shadow: inset 0 0 28px rgba(219,153,48,0.25), 0 4px 20px rgba(0,0,0,0.5), 0 0 30px rgba(196,154,79,0.12); }
}

.login-brand-text h1 {
	margin: 0;
	color: #f4efe2;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 1px;
	text-shadow: 0 0 20px rgba(244,239,226,0.2);
}

.login-brand-text p {
	margin: 4px 0 0 0;
	color: #8a918c;
	font-size: 12px;
	letter-spacing: 0.5px;
}

.login-divider {
	height: 1px;
	margin: 0 0 24px 0;
	background: linear-gradient(90deg, transparent, rgba(196,154,79,0.5), transparent);
	position: relative;
	overflow: hidden;
}

.login-divider::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
	animation: dividerShine 4s ease-in-out infinite;
}

@keyframes dividerShine {
	0% { left: -50%; }
	50%, 100% { left: 150%; }
}

.login-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.login-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.login-field label {
	color: #c4aa7a;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.3px;
}

.login-field input {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	box-sizing: border-box;
	background: rgba(6,8,10,0.6);
	border: 1px solid rgba(140,130,110,0.3);
	border-radius: 8px;
	color: #f0ebe0;
	font-size: 16px;
	outline: none;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
}

.login-field input::placeholder {
	color: rgba(180,170,150,0.4);
}

.login-field input:focus {
	border-color: rgba(196,154,79,0.7);
	background: rgba(10,12,14,0.7);
	box-shadow: 0 0 0 3px rgba(196,154,79,0.12), 0 0 20px rgba(196,154,79,0.08);
}

.login-options {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: -4px;
}

.login-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #8a918c;
	font-size: 13px;
	cursor: pointer;
	user-select: none;
}

.login-remember input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: #c49a4f;
	cursor: pointer;
}

.login-register-btn {
	background: none;
	border: none;
	color: #6fbfb0;
	font-size: 13px;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 4px;
	transition: color 0.2s ease, background 0.2s ease;
}

.login-register-btn:hover {
	color: #8fd8ca;
	background: rgba(111,191,176,0.08);
}

.login-submit {
	position: relative;
	width: 100%;
	height: 50px;
	margin-top: 8px;
	border: none;
	border-radius: 8px;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
	overflow: hidden;
	transition: all 0.3s ease;
	background: linear-gradient(135deg, #c49a4f 0%, #8a6230 50%, #c49a4f 100%);
	background-size: 200% 100%;
	color: #1a1408;
	letter-spacing: 1px;
	box-shadow: 0 6px 24px rgba(150,100,40,0.3);
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.login-submit:hover {
	background-position: 100% 0;
	box-shadow: 0 8px 32px rgba(150,100,40,0.45);
	transform: translateY(-1px);
}

.login-submit:active {
	transform: translateY(1px) scale(0.98);
	box-shadow: 0 4px 16px rgba(150,100,40,0.35);
}

.login-submit .btn-text {
	display: inline;
}

.login-submit .btn-loading {
	display: none;
}

.login-submit.loading .btn-text {
	display: none;
}

.login-submit.loading .btn-loading {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.login-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(26,20,8,0.3);
	border-top-color: #1a1408;
	border-radius: 50%;
	animation: spin 0.7s linear infinite;
}

.login-error {
	padding: 10px 14px;
	background: rgba(220,60,60,0.12);
	border: 1px solid rgba(220,60,60,0.35);
	border-radius: 6px;
	color: #e86060;
	font-size: 13px;
	text-align: center;
	animation: errorShake 0.4s ease-out;
}

.login-notice {
	max-height: 56px;
	margin-bottom: 2px;
	overflow-y: auto;
	line-height: 1.3;
	word-break: break-word;
}

@keyframes errorShake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-6px); }
	40% { transform: translateX(6px); }
	60% { transform: translateX(-4px); }
	80% { transform: translateX(4px); }
}

.login-footer {
	display: flex;
	justify-content: space-between;
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid rgba(196,154,79,0.12);
	color: #5a6058;
	font-size: 11px;
}

/* 水墨装饰线条 */
.login-deco {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	opacity: 0.15;
}

.login-deco-top {
	top: 8%;
	left: 50%;
	transform: translateX(-50%);
	width: 200px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(196,154,79,0.6), transparent);
}

.login-deco-bottom {
	bottom: 12%;
	left: 50%;
	transform: translateX(-50%);
	width: 160px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(196,154,79,0.4), transparent);
}

@keyframes panelFloat {
	0% { opacity: 0; transform: translateY(20px) scale(0.97); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

.brand-pulse {
	animation: brandPulse 3s ease-in-out infinite;
}

@keyframes brandPulse {
	0%, 100% { box-shadow: inset 0 0 18px rgba(219,153,48,0.14), 0 0 8px rgba(212,170,88,0.15); }
	50% { box-shadow: inset 0 0 28px rgba(219,153,48,0.25), 0 0 20px rgba(212,170,88,0.3); }
}

.divider-glow {
	position: relative;
	overflow: hidden;
}

.divider-glow::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(196,154,79,0.6), transparent);
	animation: dividerSweep 4s ease-in-out infinite;
}

@keyframes dividerSweep {
	0% { left: -60%; }
	50% { left: 100%; }
	100% { left: 100%; }
}

.login-panel-fx::before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	border-radius: 10px;
	background: linear-gradient(0deg, rgba(196,154,79,0.5), transparent 30%, transparent 70%, rgba(196,154,79,0.5));
	z-index: -1;
	animation: borderRotate 5s linear infinite;
	opacity: 0.6;
}

@keyframes borderRotate {
	0% { background: linear-gradient(0deg, rgba(196,154,79,0.5), transparent 30%, transparent 70%, rgba(196,154,79,0.5)); }
	25% { background: linear-gradient(90deg, rgba(196,154,79,0.5), transparent 30%, transparent 70%, rgba(196,154,79,0.5)); }
	50% { background: linear-gradient(180deg, rgba(196,154,79,0.5), transparent 30%, transparent 70%, rgba(196,154,79,0.5)); }
	75% { background: linear-gradient(270deg, rgba(196,154,79,0.5), transparent 30%, transparent 70%, rgba(196,154,79,0.5)); }
	100% { background: linear-gradient(360deg, rgba(196,154,79,0.5), transparent 30%, transparent 70%, rgba(196,154,79,0.5)); }
}

/* Compact login polish */
#login-screen .login-deco,
#login-screen .login-divider { display: none !important; }
#login-screen .login-content { padding: 28px 24px 28px 24px; }
#login-screen .login-brand { margin-bottom: 22px; }
#login-screen .login-brand-text { display: none !important; }
#login-screen .login-brand-icon { width: 58px; height: 58px; font-size: 30px; }
#login-screen .login-form { gap: 13px; }
#login-screen .login-options { min-height: 26px; margin-top: -2px; padding: 0 2px; }
#login-screen .login-remember { color: #aeb5aa; font-size: 12px; gap: 6px; }
#login-screen .login-remember input[type="checkbox"] { width: 14px; height: 14px; }
#login-screen .login-register-btn { padding: 3px 0; color: #8fd8ca; font-size: 12px; background: transparent !important; }
#login-screen .login-footer { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 4; display: block; margin: 0; padding: 0; border: 0; color: rgba(170,176,166,0.62); font-size: 10px; line-height: 1; pointer-events: none; }
#login-screen .login-footer span:first-child { display: none; }

.btn-ripple {
	position: relative;
	overflow: hidden;
}

.btn-ripple .ripple-wave {
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,0.35);
	transform: scale(0);
	animation: rippleExpand 0.6s ease-out forwards;
	pointer-events: none;
}

@keyframes rippleExpand {
	to { transform: scale(4); opacity: 0; }
}

/* 服务器卡片入场动画 */
.server-card-animate {
	opacity: 0;
	transform: translateY(12px);
	animation: serverCardIn 0.4s ease-out forwards;
}

@keyframes serverCardIn {
	to { opacity: 1; transform: translateY(0); }
}

/* 重连状态条 */
.reconnect-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 32px;
	background: rgba(204,102,0,0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #fff;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	z-index: 9999;
	animation: slideDown 0.3s ease-out;
	letter-spacing: 0.3px;
}

.reconnect-bar.reconnected {
	background: rgba(60,160,80,0.92);
	animation: slideDown 0.3s ease-out, fadeOut 0.5s 2s ease-out forwards;
}

.reconnect-bar .reconnect-spinner {
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255,255,255,0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes slideDown {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}

@keyframes fadeOut {
	to { opacity: 0; transform: translateY(-100%); }
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* 游戏内按钮波纹 */
.game-btn-ripple {
	position: relative;
	overflow: hidden;
}

.game-btn-ripple .ripple-wave {
	position: absolute;
	border-radius: 50%;
	background: rgba(196,154,79,0.35);
	transform: scale(0);
	animation: rippleExpand 0.5s ease-out forwards;
	pointer-events: none;
}

/* 注册页复用登录页样式 */
.register-shell .entry-panel {
	max-width: 430px;
}

@media (max-width: 520px) {
	div#mleft {
		width: 18%;
	}

	div#mright {
		width: 82%;
	}

	div#mycmds {
		left: 18%;
		width: 82%;
	}

	div#obj button,
	div#acts button {
		min-height: 34px;
		font-size: 10px !important;
		line-height: 1.1 !important;
		white-space: nowrap !important;
		overflow: hidden;
		text-overflow: clip;
		padding: 2px !important;
		letter-spacing: 0 !important;
	}

	div#menu {
		height: calc(58px + env(safe-area-inset-bottom));
		padding-bottom: calc(4px + env(safe-area-inset-bottom));
		overflow: hidden;
	}
	div#here { font-size: 22px; }
	.game-menu-grid {
		grid-template-columns: repeat(8, minmax(0, 1fr));
		width: 100%;
	}
	.game-menu-grid .menubt {
		font-size: 12px;
		line-height: 1.1;
		padding: 2px;
	}
	.entry-shell { width: 100vw; min-height: 88vh; padding: 12px; }
	.entry-panel { padding: 20px; }
	.entry-brand h1 { font-size: 25px; }
	.ui-dialog { width: 94vw !important; max-width: 94vw !important; }
	.ui-dialog-titlebar { padding: 8px 42px 8px 12px !important; min-height: 28px !important; }
	.ui-dialog-title { font-size: 16px !important; line-height: 1.18 !important; }
	.ui-dialog-content { padding: 6px !important; }
	.custom-close-btn { right: 8px !important; width: 30px !important; height: 30px !important; min-width: 30px !important; font-size: 22px !important; }
	.skill-dialog-content > .out { font-size: 10px; line-height: 1.25; }
	.skill-layout { grid-template-columns: 56px minmax(0, 1fr); gap: 5px; height: 58vh; max-height: calc(100dvh - 190px); min-height: 0; margin-top: 5px; }
	.skill-category-panel { gap: 4px; padding-right: 4px; }
	.skill-grid-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(36px, auto); gap: 4px; padding: 0 2px 18px 0; overscroll-behavior: contain; }
	.skill-category-btn,
	.skill-card-btn { font-size: 9px !important; min-height: 36px !important; padding: 3px 2px !important; line-height: 1.08 !important; border-radius: 4px !important; word-break: keep-all !important; overflow-wrap: normal !important; }
	.skill-category-btn { min-height: 40px !important; }
	.skill-card-btn { padding-left: 4px !important; text-align: center !important; }
	.side-dialog-inventory .skill-card-btn { min-height: 34px !important; }
	.page-card-btn { min-height: 34px !important; position: sticky; bottom: 0; z-index: 2; }
	.object-action-dialog-content { gap: 3px; max-height: calc(100dvh - 84px) !important; }
	.object-action-desc { max-height: min(24vh, 118px); font-size: 10px; line-height: 1.0; padding-bottom: 2px; }
	.object-action-desc .out, .object-action-dialog-content > .out { font-size: 10px; line-height: 1.0; white-space: pre-wrap; overflow-wrap: anywhere; }
	.object-action-layout { grid-template-columns: 58px minmax(0, 1fr); gap: 4px; max-height: min(52vh, 360px); min-height: 0; margin-top: 1px; }
	.object-action-left { gap: 3px; max-height: min(52vh, 360px); padding-right: 3px; overscroll-behavior: contain; }
	.object-action-right { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(29px, auto); gap: 3px; max-height: min(52vh, 360px); padding-right: 1px; overscroll-behavior: contain; }
	.object-action-left-btn,
	.object-action-right-btn { min-height: 29px !important; padding: 2px 2px !important; font-size: 9px !important; line-height: 1.05 !important; border-radius: 4px !important; }
	.object-action-left-btn { min-height: 30px !important; }
	.generic-menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(30px, auto); gap: 3px; max-height: 42vh; padding-bottom: 6px; }
	.generic-menu-btn { min-height: 30px !important; padding: 2px !important; font-size: 9px !important; line-height: 1.05 !important; border-radius: 4px !important; }
	.input-dialog-prompt { font-size: 11px; line-height: 1.25; margin-bottom: 6px; }
	.input-dialog-textarea { min-height: 58px; font-size: 13px; padding: 7px; }
	.input-dialog-actions { gap: 6px; margin-top: 8px; }
	.input-dialog-submit, .input-dialog-cancel { height: 32px !important; font-size: 12px !important; }

	.login-content { padding: 24px 20px; }
	.login-brand-icon { width: 50px; height: 50px; font-size: 26px; }
	.login-brand-text h1 { font-size: 22px; }
	.login-brand-text p { font-size: 11px; }
	.login-field input { height: 44px; font-size: 15px; }
	.login-submit { height: 46px; font-size: 15px; }
	#login-screen .login-content { width: min(88vw, 360px); padding: 24px 18px 24px 18px; }
	#login-screen .login-brand { margin-bottom: 18px; }
	#login-screen .login-brand-icon { width: 48px; height: 48px; font-size: 24px; border-radius: 10px; }
	#login-screen .login-content { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 12px 36px rgba(0,0,0,0.56), inset 0 1px 0 rgba(255,255,255,0.04); }
	#login-screen .login-brand-icon { animation-duration: 4.5s; box-shadow: inset 0 0 14px rgba(219,153,48,0.12), 0 3px 12px rgba(0,0,0,0.32); }
	#login-screen .login-field label { font-size: 12px; }
	#login-screen .login-options { margin-top: -4px; }
	#login-screen .login-submit { margin-top: 4px; }
	#login-screen .login-footer { right: max(12px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); font-size: 9px; }
}

@media (orientation: landscape) and (max-height: 620px) {
	#login-screen .login-content { backdrop-filter: none; -webkit-backdrop-filter: none; }
	div#mleft { width: 12%; }
	div#mright { width: 88%; }
	div#mycmds { left: 12%; width: 88%; max-height: calc(100dvh - 150px); }
	div#menu { height: calc(54px + env(safe-area-inset-bottom)); padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
	div#exits { height: 92px; flex-basis: 92px; }
	.ui-dialog { width: 98vw !important; max-width: 98vw !important; left: 1vw !important; }
	.ui-dialog-content { max-height: calc(100dvh - 66px) !important; }
	.skill-layout { grid-template-columns: 74px minmax(0, 1fr); height: calc(100dvh - 116px); max-height: calc(100dvh - 116px); min-height: 0; }
	.skill-grid-panel { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(34px, auto); gap: 4px; }
	.skill-category-btn, .skill-card-btn { min-height: 34px !important; font-size: 9px !important; padding: 3px 2px !important; line-height: 1.05 !important; }
	.object-action-layout { grid-template-columns: 72px minmax(0, 1fr); max-height: calc(100dvh - 132px); }
	.object-action-left, .object-action-right { max-height: calc(100dvh - 132px); }
	.object-action-right { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(28px, auto); gap: 3px; }
	.object-action-left-btn, .object-action-right-btn { min-height: 28px !important; font-size: 9px !important; padding: 2px !important; line-height: 1.05 !important; }
	.generic-menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-height: calc(100dvh - 124px); }
	.input-dialog-content { max-width: 98vw !important; }
	.input-dialog-textarea { min-height: 52px; max-height: 100px; }
}
html {
	height: 100%;
	background: #070806;
}