:root {
				--bg: #0d0a07;
				--bg2: #171209;
				--bg3: #1f1710;
				--bg4: #2a2016;
				--bg5: #342a1e;
				--gold: #c9a84c;
				--gold2: #e8c96a;
				--gold3: #f5dfa0;
				--gold-dim: #caa036;
				--red: #8b2a2a;
				--red2: #c44040;
				--green: #2a5a3a;
				--green2: #4a9a60;
				--text: #f4e2b9;
				--text2: #dcbf90;
				--text3: #cac0ab;
				--border: #3d3020;
				--border2: #7f6449;
				--accent: #c9a84c;
				--shadow: 0 4px 24px rgba(0, 0, 0, 0.8);
				--radius: 4px;
			}
			* {
				box-sizing: border-box;
				margin: 0;
				padding: 0;
			}
			body {
				font-family: "Noto Serif SC", serif;
				background: var(--bg);
				color: var(--text);
				min-height: 100vh;
				overflow-x: hidden;
			}

			/* ─── BACKGROUND TEXTURE ─── */
			body::before {
				content: "";
				position: fixed;
				inset: 0;
				background-image: radial-gradient(ellipse at 20% 30%, rgba(201, 168, 76, 0.04) 0%, transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(139, 42, 42, 0.05) 0%, transparent 60%);
				pointer-events: none;
				z-index: 0;
			}

			/* ─── SCREEN SYSTEM ─── */
			.screen {
				display: none;
				position: relative;
				z-index: 1;
			}
			.screen.active {
				display: flex;
			}

			/* ══════════════════════════════════
   TITLE SCREEN
══════════════════════════════════ */
			#screen-title {
				flex-direction: column;
				align-items: center;
				justify-content: center;
				min-height: 100vh;
				padding: 2rem;
				text-align: center;
			}
			.title-deco {
				width: 360px;
				max-width: 90vw;
				border-top: 1px solid var(--gold-dim);
				border-bottom: 1px solid var(--gold-dim);
				padding: 2rem 0;
				margin-bottom: 1rem;
				position: relative;
			}
			.title-deco::before,
			.title-deco::after {
				content: "◆";
				color: var(--gold);
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				font-size: 12px;
			}
			.title-deco::before {
				left: -8px;
			}
			.title-deco::after {
				right: -8px;
			}
			.game-title-cn {
				font-family: "Noto Serif SC", serif;
				font-weight: 700;
				font-size: clamp(2rem, 6vw, 3.2rem);
				color: var(--gold2);
				letter-spacing: 0.3em;
				text-shadow: 0 0 40px rgba(201, 168, 76, 0.4);
				line-height: 1.2;
			}
			.game-title-en {
				font-family: "Cinzel", serif;
				font-size: clamp(0.9rem, 2.5vw, 1.1rem);
				color: var(--text2);
				letter-spacing: 0.5em;
				text-transform: uppercase;
				margin-top: 0.5rem;
			}
			.title-ornament {
				font-size: 1.4rem;
				color: var(--gold-dim);
				letter-spacing: 0.2em;
				margin: 1rem 0 2.5rem;
			}
			.menu-list {
				display: flex;
				flex-direction: column;
				gap: 0.6rem;
				width: 260px;
			}
			.menu-btn {
				background: transparent;
				border: 1px solid var(--border2);
				color: var(--text);
				padding: 0.75rem 1.5rem;
				font-family: "Noto Serif SC", serif;
				font-size: 0.95rem;
				cursor: pointer;
				transition: all 0.2s;
				letter-spacing: 0.1em;
				position: relative;
				overflow: hidden;
			}
			.menu-btn::before {
				content: "";
				position: absolute;
				inset: 0;
				background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.06), transparent);
				transform: translateX(-100%);
				transition: transform 0.3s;
			}
			.menu-btn:hover {
				border-color: var(--gold);
				color: var(--gold3);
			}
			.menu-btn:hover::before {
				transform: translateX(100%);
			}
			.menu-btn:active {
				transform: scale(0.98);
			}
			.version-tag {
				margin-top: 3rem;
				font-size: 0.7rem;
				color: var(--text3);
				letter-spacing: 0.2em;
			}

			/* ─── INLINE LANG SELECTOR ─── */
			.lang-inline-row {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 0.5rem;
				margin-top: 0.4rem;
			}
			.lang-inline-btn {
				background: none;
				border: none;
				color: var(--text3);
				font-family: "Noto Serif SC", serif;
				font-size: 0.75rem;
				cursor: pointer;
				padding: 0.2rem 0.4rem;
				letter-spacing: 0.08em;
				transition: color 0.2s;
			}
			.lang-inline-btn:hover {
				color: var(--text2);
			}
			.lang-inline-btn.active {
				color: var(--gold);
			}
			.lang-divider {
				color: var(--text3);
				font-size: 0.7rem;
			}

			/* ─── LANG SELECT SCREEN (legacy) ─── */
			#screen-lang {
				flex-direction: column;
				align-items: center;
				justify-content: center;
				min-height: 100vh;
				gap: 2.5rem;
			}
			.lang-select-title {
				font-family: "Cinzel", serif;
				font-size: 0.85rem;
				color: var(--text2);
				letter-spacing: 0.4em;
				text-transform: uppercase;
			}
			.lang-select-grid {
				display: flex;
				gap: 1.2rem;
			}
			.lang-select-btn {
				background: var(--bg3);
				border: 1px solid var(--border2);
				color: var(--text);
				padding: 1.4rem 2.4rem;
				font-family: "Noto Serif SC", serif;
				font-size: 1.1rem;
				cursor: pointer;
				transition: all 0.2s;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 0.5rem;
				letter-spacing: 0.15em;
				min-width: 130px;
			}
			.lang-select-btn:hover {
				border-color: var(--gold);
				color: var(--gold3);
				background: var(--bg4);
			}
			.lang-select-btn .lang-flag {
				font-size: 2rem;
			}

			/* ─── LANG PANEL (legacy - unused) ─── */
			.lang-btn {
				background: var(--bg3);
				border: 1px solid var(--border);
				color: var(--text2);
				padding: 0.5rem 1rem;
				font-family: "Noto Serif SC", serif;
				font-size: 0.85rem;
				cursor: pointer;
				transition: all 0.2s;
			}
			.lang-btn:hover,
			.lang-btn.active {
				border-color: var(--gold);
				color: var(--gold2);
			}

			/* ══════════════════════════════════
   NEW GAME SCREEN
══════════════════════════════════ */
			#screen-newgame {
				flex-direction: column;
				align-items: center;
				justify-content: center;
				min-height: 100vh;
				padding: 2rem;
			}
			.panel {
				background: var(--bg2);
				border: 1px solid var(--border2);
				padding: 2rem 2.5rem;
				width: 440px;
				max-width: 95vw;
				position: relative;
			}
			.panel::before {
				content: "";
				position: absolute;
				top: -1px;
				left: 20px;
				right: 20px;
				height: 1px;
				background: linear-gradient(90deg, transparent, var(--gold), transparent);
			}
			.panel-title {
				font-family: "Cinzel", serif;
				font-size: 1rem;
				color: var(--gold);
				letter-spacing: 0.3em;
				text-align: center;
				margin-bottom: 1.5rem;
				text-transform: uppercase;
			}
			.field-label {
				font-size: 0.78rem;
				color: var(--text2);
				letter-spacing: 0.15em;
				margin-bottom: 0.4rem;
				display: block;
			}
			.field-group {
				margin-bottom: 1.2rem;
			}
			.game-input {
				width: 100%;
				background: var(--bg4);
				border: 1px solid var(--border);
				color: var(--text);
				padding: 0.6rem 0.8rem;
				font-family: "Noto Serif SC", serif;
				font-size: 0.9rem;
				outline: none;
				transition: border-color 0.2s;
			}
			.game-input:focus {
				border-color: var(--gold);
			}
			.country-grid {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 0.5rem;
			}
			.country-card {
				background: var(--bg4);
				border: 1px solid var(--border);
				padding: 0.6rem;
				cursor: pointer;
				text-align: center;
				transition: all 0.2s;
				font-size: 0.78rem;
				color: var(--text2);
			}
			.country-card:hover {
				border-color: var(--gold-dim);
				color: var(--text);
			}
			.country-card.selected {
				border-color: var(--gold);
				color: var(--gold2);
				background: var(--bg5);
			}

			.btn-primary {
				width: 100%;
				background: transparent;
				border: 1px solid var(--gold);
				color: var(--gold2);
				padding: 0.75rem;
				font-family: "Cinzel", serif;
				font-size: 0.85rem;
				letter-spacing: 0.2em;
				cursor: pointer;
				margin-top: 1rem;
				transition: all 0.2s;
			}
			.btn-primary:hover {
				background: rgba(201, 168, 76, 0.1);
				color: var(--gold3);
			}
			.btn-back {
				background: none;
				border: none;
				color: var(--text3);
				font-size: 0.75rem;
				cursor: pointer;
				margin-bottom: 1rem;
				font-family: "Noto Serif SC", serif;
				letter-spacing: 0.1em;
				transition: color 0.2s;
			}
			.btn-back:hover {
				color: var(--text2);
			}

			/* ══════════════════════════════════
   GAME SCREEN
══════════════════════════════════ */
			#screen-game {
				flex-direction: column;
				min-height: 100vh;
			}

			/* ─── TOP BAR ─── */
			.topbar {
				background: var(--bg2);
				border-bottom: 1px solid var(--border);
				padding: 0.6rem 1.2rem;
				display: flex;
				align-items: center;
				gap: 1.5rem;
				flex-wrap: wrap;
				position: sticky;
				top: 0;
				z-index: 100;
			}
			.topbar-city {
				font-family: "Cinzel", serif;
				font-size: 1rem;
				color: var(--gold2);
				letter-spacing: 0.15em;
			}
			.topbar-stats {
				display: flex;
				gap: 1.2rem;
				flex-wrap: wrap;
				font-size: 0.78rem;
				color: var(--text2);
			}
			.stat-item {
				display: flex;
				align-items: center;
				gap: 0.3rem;
			}
			.stat-val {
				color: var(--text);
				font-weight: 500;
			}
			.stat-val.gold {
				color: var(--gold2);
			}
			.stat-val.green {
				color: var(--green2);
			}
			.stat-val.red {
				color: var(--red2);
			}
			.topbar-right {
				margin-left: auto;
				display: flex;
				gap: 0.5rem;
			}
			.btn-sm {
				background: var(--bg4);
				border: 1px solid var(--border);
				color: var(--text2);
				padding: 0.3rem 0.7rem;
				font-size: 0.72rem;
				font-family: "Noto Serif SC", serif;
				cursor: pointer;
				transition: all 0.2s;
				letter-spacing: 0.05em;
			}
			.btn-sm:hover {
				border-color: var(--gold-dim);
				color: var(--gold);
			}

			/* ─── TABS ─── */
			.tabs {
				background: var(--bg2);
				border-bottom: 1px solid var(--border);
				display: flex;
				padding: 0 1rem;
				gap: 0;
				overflow-x: auto;
			}
			.tab {
				background: none;
				border: none;
				border-bottom: 2px solid transparent;
				color: var(--text3);
				padding: 0.7rem 1.1rem;
				font-family: "Noto Serif SC", serif;
				font-size: 0.82rem;
				cursor: pointer;
				transition: all 0.2s;
				white-space: nowrap;
				letter-spacing: 0.08em;
			}
			.tab:hover {
				color: var(--text2);
			}
			.tab.active {
				border-bottom-color: var(--gold);
				color: var(--gold2);
			}

			/* ─── TAB CONTENT ─── */
			.tab-content {
				display: none;
				padding: 1.2rem;
				flex: 1;
			}
			.tab-content.active {
				display: block;
			}

			/* ─── TRADE TABLE (Buy / Inventory) ─── */
			.trade-table-wrap {
				overflow-x: auto;
			}
			.trade-table {
				width: 100%;
				border-collapse: collapse;
				font-size: 0.82rem;
			}
			.trade-table th {
				background: var(--bg3);
				color: var(--text2);
				font-weight: 400;
				letter-spacing: 0.1em;
				padding: 0.5rem 0.7rem;
				text-align: left;
				border-bottom: 1px solid var(--border);
				white-space: nowrap;
				font-size: 0.75rem;
			}
			.trade-table td {
				padding: 0.45rem 0.7rem;
				border-bottom: 1px solid var(--border);
				vertical-align: middle;
			}
			.trade-table tr:last-child td {
				border-bottom: none;
			}
			.trade-table tr:hover td {
				background: var(--bg3);
			}
			.item-name {
				color: var(--text);
			}
			.item-cat {
				font-size: 0.66rem;
				color: var(--text3);
				display: block;
				margin-top: 1px;
			}
			.price-buy {
				color: var(--red2);
			}
			.price-sell {
				color: var(--green2);
			}
			.qty-owned {
				color: var(--text2);
			}
			.qty-controls {
				display: flex;
				align-items: center;
				gap: 0.3rem;
			}
			.qty-input {
				width: 52px;
				background: var(--bg4);
				border: 1px solid var(--border);
				color: var(--text);
				padding: 0.25rem 0.4rem;
				font-size: 0.8rem;
				font-family: "Noto Serif SC", serif;
				text-align: center;
				outline: none;
			}
			.qty-input:focus {
				border-color: var(--gold-dim);
			}
			.qty-shortcut {
				background: var(--bg4);
				border: 1px solid var(--border);
				color: var(--text3);
				padding: 0.2rem 0.35rem;
				font-size: 0.65rem;
				cursor: pointer;
				transition: all 0.15s;
				white-space: nowrap;
			}
			.qty-shortcut:hover {
				border-color: var(--gold-dim);
				color: var(--gold);
			}
			.price-tag {
				font-size: 0.75rem;
				color: var(--text3);
			}
			.table-footer {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0.8rem 0.7rem;
				background: var(--bg3);
				border: 1px solid var(--border);
				border-top: 1px solid var(--gold-dim);
				margin-top: 0;
				flex-wrap: wrap;
				gap: 0.5rem;
			}
			.total-price {
				font-size: 0.85rem;
			}
			.total-price span {
				color: var(--gold2);
				font-weight: 500;
			}
			.btn-trade {
				background: transparent;
				border: 1px solid var(--gold);
				color: var(--gold2);
				padding: 0.4rem 1.2rem;
				font-family: "Noto Serif SC", serif;
				font-size: 0.8rem;
				cursor: pointer;
				letter-spacing: 0.1em;
				transition: all 0.2s;
			}
			.btn-trade:hover {
				background: rgba(201, 168, 76, 0.12);
			}
			.btn-trade.sell {
				border-color: var(--green2);
				color: var(--green2);
			}
			.btn-trade.sell:hover {
				background: rgba(74, 154, 96, 0.12);
			}

			/* ─── EQUIPMENT TAB ─── */
			.equip-layout {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 1rem;
			}
			@media (max-width: 640px) {
				.equip-layout {
					grid-template-columns: 1fr;
				}
			}
			.equip-section-title {
				font-size: 0.75rem;
				color: var(--gold);
				letter-spacing: 0.2em;
				text-transform: uppercase;
				margin-bottom: 0.8rem;
				padding-bottom: 0.4rem;
				border-bottom: 1px solid var(--border);
			}
			.member-equip-card {
				background: var(--bg3);
				border: 1px solid var(--border);
				padding: 0.8rem;
				margin-bottom: 0.6rem;
			}
			.member-equip-name {
				font-size: 0.82rem;
				color: var(--text);
				margin-bottom: 0.5rem;
				display: flex;
				align-items: center;
				gap: 0.5rem;
			}
			.member-role-badge {
				font-size: 0.62rem;
				background: var(--bg5);
				border: 1px solid var(--border2);
				color: var(--text3);
				padding: 1px 5px;
			}
			.equip-slots {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 0.4rem;
			}
			.equip-slot {
				background: var(--bg4);
				border: 1px dashed var(--border);
				padding: 0.4rem 0.6rem;
				font-size: 0.72rem;
				color: var(--text3);
				min-height: 32px;
				display: flex;
				align-items: center;
				cursor: pointer;
				transition: border-color 0.2s;
			}
			.equip-slot.filled {
				border-style: solid;
				border-color: var(--border2);
				color: var(--text2);
			}
			.equip-slot:hover {
				border-color: var(--gold-dim);
			}
			.equip-slot-label {
				font-size: 0.6rem;
				color: var(--text3);
				display: block;
				margin-bottom: 1px;
			}
			.shop-items-grid {
				display: flex;
				flex-direction: column;
				gap: 0.4rem;
			}
			.shop-item-row {
				background: var(--bg3);
				border: 1px solid var(--border);
				padding: 0.5rem 0.7rem;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 0.78rem;
				cursor: pointer;
				transition: border-color 0.2s;
			}
			.shop-item-row:hover {
				border-color: var(--gold-dim);
			}
			.shop-item-name {
				color: var(--text);
			}
			.shop-item-stats {
				font-size: 0.68rem;
				color: var(--green2);
			}
			.shop-item-price {
				color: var(--red2);
			}
			.btn-buy-equip {
				background: var(--bg4);
				border: 1px solid var(--border);
				color: var(--text2);
				padding: 0.2rem 0.5rem;
				font-size: 0.68rem;
				cursor: pointer;
				transition: all 0.15s;
				margin-left: 0.5rem;
				white-space: nowrap;
			}
			.btn-buy-equip:hover {
				border-color: var(--gold);
				color: var(--gold);
			}

			/* ─── INVENTORY SECTION ─── */
			.inv-grid {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
				gap: 0.4rem;
				margin-top: 0.5rem;
			}
			.inv-item {
				background: var(--bg3);
				border: 1px solid var(--border);
				padding: 0.5rem;
				font-size: 0.7rem;
				text-align: center;
				cursor: grab;
				position: relative;
				transition: border-color 0.2s;
				user-select: none;
			}
			.inv-item:hover {
				border-color: var(--gold-dim);
			}
			.inv-item-icon {
				font-size: 1.4rem;
				display: block;
				margin-bottom: 3px;
			}
			.inv-item-name {
				color: var(--text2);
				font-size: 0.66rem;
			}
			.inv-item-qty {
				position: absolute;
				top: 2px;
				right: 4px;
				font-size: 0.6rem;
				color: var(--gold);
			}
			.inv-item-sell {
				display: block;
				margin-top: 3px;
				font-size: 0.6rem;
				color: var(--text3);
				cursor: pointer;
			}
			.inv-item-sell:hover {
				color: var(--green2);
			}

			/* ─── TEAM TAB ─── */
			.team-grid {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
				gap: 0.8rem;
			}
			.team-card {
				background: var(--bg3);
				border: 1px solid var(--border);
				padding: 1rem;
			}
			.team-member-header {
				display: flex;
				align-items: center;
				gap: 0.7rem;
				margin-bottom: 0.8rem;
			}
			.team-avatar {
				width: 36px;
				height: 36px;
				background: var(--bg5);
				border: 1px solid var(--border2);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 1.2rem;
			}
			.team-name {
				font-size: 0.88rem;
				color: var(--text);
			}
			.team-role {
				font-size: 0.66rem;
				color: var(--text3);
				margin-top: 1px;
			}
			.stat-bars {
				display: flex;
				flex-direction: column;
				gap: 0.35rem;
			}
			.stat-row {
				display: flex;
				align-items: center;
				gap: 0.5rem;
				font-size: 0.72rem;
			}
			.stat-row-label {
				color: var(--text3);
				width: 40px;
				flex-shrink: 0;
			}
			.stat-bar-bg {
				flex: 1;
				height: 4px;
				background: var(--bg5);
				position: relative;
			}
			.stat-bar-fill {
				height: 100%;
				background: var(--gold);
				position: absolute;
				left: 0;
				top: 0;
			}
			.stat-bar-fill.str {
				background: #c44040;
			}
			.stat-bar-fill.agi {
				background: #4a9a60;
			}
			.stat-bar-fill.int {
				background: #4a7ac4;
			}
			.stat-bar-fill.end {
				background: #c4924a;
			}
			.stat-num {
				color: var(--text2);
				font-size: 0.68rem;
				width: 22px;
				text-align: right;
			}
			.team-footer {
				margin-top: 0.8rem;
				padding-top: 0.6rem;
				border-top: 1px solid var(--border);
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 0.72rem;
			}
			.wage-label {
				color: var(--text3);
			}
			.wage-val {
				color: var(--red2);
			}

			/* ─── QUEST TAB ─── */
			.quest-list {
				display: flex;
				flex-direction: column;
				gap: 0.6rem;
			}
			.quest-card {
				background: var(--bg3);
				border: 1px solid var(--border);
				border-left: 3px solid var(--border);
				padding: 0.8rem 1rem;
				transition: border-color 0.2s;
			}
			.quest-card.active-quest {
				border-left-color: var(--gold);
			}
			.quest-card.urgent {
				border-left-color: var(--red2);
			}
			.quest-title {
				font-size: 0.88rem;
				color: var(--text);
				margin-bottom: 0.3rem;
			}
			.quest-desc {
				font-size: 0.73rem;
				color: var(--text2);
				line-height: 1.5;
				margin-bottom: 0.5rem;
			}
			.quest-reward {
				display: flex;
				gap: 1rem;
				font-size: 0.72rem;
			}
			.reward-item {
				color: var(--gold2);
			}
			.quest-deadline {
				color: var(--red2);
			}
			.btn-accept {
				background: transparent;
				border: 1px solid var(--border2);
				color: var(--text2);
				padding: 0.25rem 0.7rem;
				font-size: 0.7rem;
				cursor: pointer;
				font-family: "Noto Serif SC", serif;
				transition: all 0.2s;
				margin-top: 0.4rem;
			}
			.btn-accept:hover {
				border-color: var(--gold);
				color: var(--gold);
			}
			.btn-accept.accepted {
				border-color: var(--gold);
				color: var(--gold);
				cursor: default;
			}

			/* ─── TRANSPORT TAB ─── */
			.transport-grid {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
				gap: 0.7rem;
			}
			.transport-card {
				background: var(--bg3);
				border: 1px solid var(--border);
				padding: 0.9rem;
				text-align: center;
				cursor: pointer;
				transition: border-color 0.2s;
				position: relative;
			}
			.transport-card.owned {
				border-color: var(--gold);
			}
			.transport-card:hover:not(.owned) {
				border-color: var(--border2);
			}
			.transport-icon {
				font-size: 2rem;
				display: block;
				margin-bottom: 0.4rem;
			}
			.transport-name {
				font-size: 0.82rem;
				color: var(--text);
				margin-bottom: 0.2rem;
			}
			.transport-stats {
				font-size: 0.68rem;
				color: var(--text2);
				margin-bottom: 0.5rem;
			}
			.transport-price {
				font-size: 0.78rem;
				color: var(--red2);
			}
			.owned-badge {
				position: absolute;
				top: 5px;
				right: 5px;
				font-size: 0.6rem;
				background: var(--gold);
				color: var(--bg);
				padding: 1px 5px;
			}

			/* ─── TOAST ─── */
			.toast {
				position: fixed;
				bottom: 1.5rem;
				left: 50%;
				transform: translateX(-50%);
				background: var(--bg3);
				border: 1px solid var(--border2);
				color: var(--text);
				padding: 0.5rem 1.2rem;
				font-size: 0.8rem;
				z-index: 9999;
				letter-spacing: 0.05em;
				animation: toast-in 0.3s ease;
				pointer-events: none;
			}
			@keyframes toast-in {
				from {
					opacity: 0;
					transform: translateX(-50%) translateY(10px);
				}
				to {
					opacity: 1;
					transform: translateX(-50%) translateY(0);
				}
			}
			.toast.gold {
				border-color: var(--gold);
				color: var(--gold2);
			}
			.toast.red {
				border-color: var(--red2);
				color: var(--red2);
			}

			/* ─── SECTION LABELS ─── */
			.section-label {
				font-size: 0.7rem;
				color: var(--gold);
				letter-spacing: 0.25em;
				text-transform: uppercase;
				margin-bottom: 0.7rem;
				display: flex;
				align-items: center;
				gap: 0.5rem;
			}
			.section-label::after {
				content: "";
				flex: 1;
				height: 1px;
				background: var(--border);
			}

			/* ─── TRAVEL MODAL ─── */
			.modal-overlay {
				display: none;
				position: fixed;
				inset: 0;
				background: rgba(0, 0, 0, 0.85);
				z-index: 200;
				align-items: center;
				justify-content: center;
			}
			.modal-overlay.open {
				display: flex;
			}
			.modal-box {
				background: var(--bg2);
				border: 1px solid var(--border2);
				padding: 1.5rem 2rem;
				width: 360px;
				max-width: 95vw;
				position: relative;
			}
			.modal-title {
				font-family: "Cinzel", serif;
				font-size: 0.9rem;
				color: var(--gold);
				letter-spacing: 0.2em;
				margin-bottom: 1rem;
				text-transform: uppercase;
			}
			.city-choose-grid {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 0.5rem;
				margin-bottom: 1rem;
			}
			.city-btn {
				background: var(--bg4);
				border: 1px solid var(--border);
				color: var(--text2);
				padding: 0.5rem 0.6rem;
				font-size: 0.78rem;
				cursor: pointer;
				font-family: "Noto Serif SC", serif;
				transition: all 0.2s;
				text-align: left;
			}
			.city-btn:hover {
				border-color: var(--gold-dim);
				color: var(--text);
			}
			.city-btn .travel-cost {
				font-size: 0.65rem;
				color: var(--red2);
				float: right;
			}
			.disabled-city {
				opacity: 0.4;
				cursor: not-allowed !important;
			}
			.btn-close-modal {
				position: absolute;
				top: 0.7rem;
				right: 0.8rem;
				background: none;
				border: none;
				color: var(--text3);
				cursor: pointer;
				font-size: 1rem;
			}

			/* ─── PRICE LEVEL INDICATORS ─── */
			.price-bar-wrap {
				height: 3px;
				background: var(--bg5);
				border-radius: 2px;
				margin: 3px 0 2px;
				width: 80px;
				position: relative;
				overflow: hidden;
			}
			.price-bar-fill {
				height: 100%;
				border-radius: 2px;
				background: linear-gradient(90deg, var(--green2) 0%, var(--gold) 50%, var(--red2) 100%);
				position: absolute;
				left: 0;
				top: 0;
			}
			.price-lvl {
				font-size: 0.62rem;
				padding: 1px 5px;
				border-radius: 2px;
				font-weight: 500;
				letter-spacing: 0.05em;
			}
			.lvl-low {
				background: rgba(74, 154, 96, 0.15);
				color: var(--green2);
			}
			.lvl-mid {
				background: rgba(201, 168, 76, 0.12);
				color: var(--gold);
			}
			.lvl-high {
				background: rgba(196, 64, 64, 0.15);
				color: var(--red2);
			}
			.lvl-peak {
				background: rgba(196, 64, 64, 0.3);
				color: #ff6060;
				animation: pulse-red 1.2s infinite;
			}
			@keyframes pulse-red {
				0%,
				100% {
					opacity: 1;
				}
				50% {
					opacity: 0.6;
				}
			}

			/* SCROLLBAR */
			::-webkit-scrollbar {
				width: 4px;
				height: 4px;
			}
			::-webkit-scrollbar-track {
				background: var(--bg);
			}
			::-webkit-scrollbar-thumb {
				background: var(--border2);
			}

			/* File input hidden */
			#save-file-input {
				display: none;
			}
.combat-container {
				display: grid;
				grid-template-rows: auto 1fr auto;
				height: 100%;
				gap: 1rem;
				color: var(--text);
			}
			.combat-header {
				text-align: center;
				border-bottom: 1px double var(--border);
				padding-bottom: 0.5rem;
			}
			.combat-arena {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 1rem;
				align-items: start;
			}
			.combat-side {
				background: var(--bg3);
				border: 1px solid var(--border2);
				padding: 0.8rem;
				border-radius: 4px;
			}
			.combat-side-title {
				font-family: 'Cinzel', 'Noto Serif SC', serif;
				font-size: 0.9rem;
				color: var(--gold);
				margin-bottom: 0.6rem;
				border-bottom: 1px solid var(--border3);
				padding-bottom: 0.3rem;
			}
			.combat-unit-row {
				padding: 0.5rem;
				border-bottom: 1px dashed var(--border3);
				cursor: pointer;
				transition: background 0.2s;
			}
			.combat-unit-row.selected {
				background: rgba(201, 168, 76, 0.15);
				border: 1px solid var(--gold);
			}
			.combat-unit-row.dead {
				opacity: 0.4;
				cursor: not-allowed;
				background: none !important;
			}
			.combat-hp-bar-bg {
				width: 100%;
				height: 6px;
				background: rgba(0,0,0,0.5);
				border-radius: 3px;
				margin-top: 0.3rem;
				overflow: hidden;
			}
			.combat-hp-bar-fill {
				height: 100%;
				background: #6ab0f5;
				transition: width 0.3s ease;
			}
			.combat-hp-bar-fill.enemy-hp {
				background: var(--red2);
			}
			.combat-log-wrapper {
				background: #0d0d0d;
				border: 1px solid var(--border2);
				height: 160px;
				overflow-y: auto;
				padding: 0.6rem;
				font-family: monospace, serif;
				font-size: 0.75rem;
				line-height: 1.5;
				border-radius: 4px;
				box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
			}
			.combat-log-line {
				margin-bottom: 0.3rem;
				border-bottom: 1px dashed #1a1a1a;
				padding-bottom: 0.2rem;
				animation: fadeIn 0.3s ease;
			}
			.combat-actions-grid {
				display: grid;
				grid-template-columns: repeat(5, 1fr);
				gap: 0.5rem;
				margin-top: 0.5rem;
			}
			.combat-btn {
				background: var(--bg4);
				border: 1px solid var(--border2);
				color: var(--text2);
				padding: 0.6rem 0.2rem;
				font-family: inherit;
				font-size: 0.78rem;
				cursor: pointer;
				transition: all 0.2s;
				border-radius: 2px;
			}
			.combat-btn:hover:not(:disabled) {
				border-color: var(--gold);
				color: var(--gold2);
				background: var(--bg5);
			}
			.combat-btn:disabled {
				opacity: 0.3;
				cursor: not-allowed;
			}
			.combat-btn.active-auto {
				background: var(--red);
				color: #fff;
				border-color: var(--red2);
				animation: pulse 1.5s infinite;
			}
			.tier-badge {
				font-size: 0.65rem;
				padding: 1px 4px;
				border-radius: 2px;
				margin-left: 0.3rem;
				font-weight: bold;
			}
			.tier-S { background: #621919; color: #ff5555; border: 1px solid #ff0000; }
			.tier-A { background: #523910; color: #ffb834; border: 1px solid #ffb834; }
			.tier-B { background: #3c1e54; color: #cc66ff; border: 1px solid #cc66ff; }
			.tier-C { background: #153554; color: #3399ff; border: 1px solid #3399ff; }
			.tier-D { background: #1b4726; color: #33cc66; border: 1px solid #33cc66; }
			.tier-E { background: #333333; color: #cccccc; border: 1px solid #cccccc; }
			@keyframes pulse {
				0% { opacity: 1; }
				50% { opacity: 0.6; }
				100% { opacity: 1; }
			}
/* ══════════════════════════════════
   高分辨率屏幕适配
══════════════════════════════════ */
@media (min-width: 1440px) {
    html { font-size: 17px; }
}
@media (min-width: 1920px) {
    html { font-size: 18px; }
}
@media (min-width: 2560px) {
    html { font-size: 20px; }
}

/* ══════════════════════════════════
   手机端适配（≤ 640px）
══════════════════════════════════ */
@media (max-width: 640px) {

    /* ─── 全局字号微调 ─── */
    html { font-size: 15px; }

    /* ─── 标题屏 ─── */
    #screen-title {
        padding: 1.5rem 1rem;
        justify-content: center;
    }
    .title-deco {
        width: 92vw;
        padding: 1.4rem 0;
    }
    .game-title-cn {
        font-size: clamp(1.8rem, 10vw, 2.4rem);
        letter-spacing: 0.2em;
    }
    .game-title-en {
        font-size: clamp(0.72rem, 3.5vw, 0.9rem);
        letter-spacing: 0.3em;
    }
    .title-ornament {
        font-size: 0.85rem;
        letter-spacing: 0.1em;
        margin: 0.8rem 0 1.8rem;
    }
    .menu-list {
        width: 88vw;
        max-width: 320px;
    }
    .menu-btn {
        padding: 0.85rem 1.2rem;
        font-size: 0.95rem;
    }

    /* ─── 新游戏屏 ─── */
    #screen-newgame {
        padding: 1rem;
        justify-content: flex-start;
        padding-top: 2rem;
    }
    .panel {
        width: 100%;
        padding: 1.4rem 1.2rem;
    }
    .country-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .country-card {
        font-size: 0.82rem;
        padding: 0.55rem 0.3rem;
    }
    .btn-back {
        font-size: 0.85rem;
        padding: 0.4rem 0;
    }

    /* ─── 顶栏 ─── */
    .topbar {
        padding: 0.5rem 0.8rem;
        gap: 0.4rem;
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }
    .topbar-city {
        font-size: 0.88rem;
        flex: 0 0 auto;
    }
    .topbar-stats {
        flex: 1 1 100%;
        order: 3;
        gap: 0.8rem;
        font-size: 0.78rem;
        justify-content: flex-start;
    }
    .topbar-right {
        margin-left: auto;
        flex: 0 0 auto;
        gap: 0.4rem;
    }
    .btn-sm {
        font-size: 0.75rem;
        padding: 0.35rem 0.6rem;
    }

    /* ─── 标签页 ─── */
    .tabs {
        padding: 0 0.3rem;
        /* 隐藏滚动条但保留功能 */
        scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab {
        padding: 0.65rem 0.75rem;
        font-size: 0.8rem;
        letter-spacing: 0.04em;
    }

    /* ─── 标签内容区 ─── */
    .tab-content {
        padding: 0.9rem 0.8rem;
    }

    /* ─── 交易表格 ─── */
    .trade-table {
        font-size: 0.78rem;
        min-width: 480px; /* 保证横向滚动而非挤压 */
    }
    .trade-table th {
        font-size: 0.72rem;
        padding: 0.45rem 0.5rem;
    }
    .trade-table td {
        padding: 0.4rem 0.5rem;
    }
    .qty-input {
        width: 44px;
        font-size: 0.78rem;
    }
    .qty-shortcut {
        padding: 0.2rem 0.3rem;
        font-size: 0.65rem;
    }
    .table-footer {
        padding: 0.65rem 0.6rem;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .total-price { font-size: 0.82rem; }
    .btn-trade {
        padding: 0.4rem 1rem;
        font-size: 0.8rem;
    }

    /* ─── 装备标签（已有 1 栏响应，补细节） ─── */
    .equip-layout { gap: 0.8rem; }
    .shop-item-row { font-size: 0.8rem; }
    .btn-buy-equip { font-size: 0.72rem; padding: 0.25rem 0.5rem; }
    .member-equip-card { padding: 0.7rem; }
    .equip-slots { grid-template-columns: 1fr 1fr; gap: 0.3rem; }
    .equip-slot { font-size: 0.74rem; min-height: 36px; }

    /* ─── 团队标签 ─── */
    .team-grid { grid-template-columns: 1fr; gap: 0.7rem; }
    .team-card { padding: 0.85rem; }

    /* ─── 交通标签 ─── */
    .transport-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }
    .transport-card { padding: 0.75rem; }
    .transport-icon { font-size: 1.6rem; }

    /* ─── 任务标签 ─── */
    .quest-card { padding: 0.75rem 0.85rem; }
    .quest-title { font-size: 0.88rem; }
    .quest-desc { font-size: 0.76rem; }

    /* ─── 旅行弹窗 ─── */
    .modal-box {
        padding: 1.2rem 1rem;
        width: 94vw;
        max-width: 94vw;
    }
    .modal-title { font-size: 0.88rem; }
    .city-choose-grid { grid-template-columns: 1fr 1fr !important; gap: 0.4rem; }
    .city-btn { font-size: 0.82rem; padding: 0.55rem 0.5rem; }

    /* ─── 战斗弹窗 ─── */
    #combat-modal .modal-box {
        width: 96vw !important;
        max-width: 96vw !important;
        height: 90vh !important;
        padding: 0.9rem !important;
    }
    .combat-arena {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .combat-side { padding: 0.6rem; }
    .combat-side-title { font-size: 0.8rem; }
    .combat-actions-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.4rem;
    }
    /* 末两个按钮（逃跑/投降）单独一行居中 */
    .combat-btn:nth-child(4),
    .combat-btn:nth-child(5) {
        grid-column: span 1;
    }
    .combat-btn { font-size: 0.78rem; padding: 0.55rem 0.1rem; }
    .combat-log-wrapper { height: 110px; font-size: 0.72rem; }
    #combat-modal .modal-title { font-size: 1rem !important; }

    /* ─── Toast 提示 ─── */
    .toast { font-size: 0.82rem; width: 88vw; text-align: center; }

    /* ─── Section 标签 ─── */
    .section-label { font-size: 0.75rem; }

    /* ─── 小字号下限统一提升 ─── */
    .version-tag      { font-size: 0.72rem; }
    .price-lvl        { font-size: 0.68rem; }
    .owned-badge      { font-size: 0.65rem; }
    .item-cat         { font-size: 0.68rem; }
    .stat-row         { font-size: 0.74rem; }
    .team-footer      { font-size: 0.74rem; }
    .equip-slot-label { font-size: 0.62rem; }
}

/* ══════════════════════════════════
   超小屏（≤ 380px，如 iPhone SE）
══════════════════════════════════ */
@media (max-width: 380px) {
    html { font-size: 14px; }
    .tab { padding: 0.6rem 0.6rem; font-size: 0.78rem; }
    .combat-actions-grid { grid-template-columns: repeat(2, 1fr); }
    .country-grid { grid-template-columns: repeat(2, 1fr); }
    .transport-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════
   教学系统
══════════════════════════════════ */
.tutorial-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 5000;
    align-items: center;
    justify-content: center;
}
.tutorial-overlay.open {
    display: flex;
}

/* PC端：左立绘 + 右对话，整体居中 */
.tutorial-container {
    display: flex;
    align-items: flex-end;
    gap: 0;
    width: 90vw;
    max-width: 720px;
    position: relative;
}

/* 立绘：用 vh 控制高度，保证大小屏都合理 */
.tutorial-portrait {
    flex-shrink: 0;
    height: clamp(240px, 50vh, 420px);
    width: auto;
    image-rendering: auto;
    filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.5));
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: bottom center;
}

/* 说话弹跳 */
.tutorial-portrait.bounce {
    animation: tut-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tut-bounce {
    0%   { transform: translateY(0) scale(1); }
    35%  { transform: translateY(-8px) scale(1.02, 0.98); }
    60%  { transform: translateY(2px) scale(0.99, 1.01); }
    100% { transform: translateY(0) scale(1); }
}

/* 对话框 */
.tutorial-dialogue-box {
    flex: 1;
    background: var(--bg2);
    border: 1px solid var(--gold);
    border-radius: 4px;
    padding: 1.2rem 1.4rem;
    margin-bottom: 2.5rem;
    position: relative;
    min-height: 110px;
    box-shadow: 0 0 30px rgba(201, 168, 76, 0.08);
    min-width: 0;
}
.tutorial-dialogue-box::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.tutorial-speaker {
    font-size: 0.72rem;
    color: var(--gold);
    letter-spacing: 0.15em;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.tutorial-text {
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.8;
    min-height: 2.5em;
}
.tutorial-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.8rem;
    align-items: center;
}
.tutorial-btn {
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold2);
    padding: 0.4rem 1.2rem;
    font-family: "Noto Serif SC", serif;
    font-size: 0.78rem;
    cursor: pointer;
    letter-spacing: 0.1em;
    transition: all 0.2s;
}
.tutorial-btn:hover {
    background: rgba(201, 168, 76, 0.12);
    color: var(--gold3);
}
.tutorial-btn.skip {
    border-color: var(--border2);
    color: var(--text3);
    font-size: 0.7rem;
}
.tutorial-btn.skip:hover {
    border-color: var(--text3);
    color: var(--text2);
}
.tutorial-step-dots {
    display: flex;
    gap: 6px;
    margin-right: auto;
}
.tutorial-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border2);
    transition: background 0.3s;
}
.tutorial-dot.active {
    background: var(--gold);
}
.tutorial-dot.done {
    background: var(--gold-dim);
}

/* 问号按钮 */
.btn-tutorial-help {
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold);
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-family: "Cinzel", serif;
    border-radius: 50%;
    line-height: 1;
}
.btn-tutorial-help:hover {
    background: rgba(201, 168, 76, 0.15);
    color: var(--gold3);
}

/* 打字机光标 */
.tutorial-text .cursor-blink {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--gold);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: cursor-blink 0.8s step-end infinite;
}
@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ── 手机端：立绘在上、对话在下 ── */
@media (max-width: 640px) {
    .tutorial-overlay {
        align-items: flex-end;
    }
    .tutorial-container {
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 100%;
        padding: 0 0.8rem;
    }
    .tutorial-portrait {
        height: clamp(160px, 32vh, 260px);
        margin-bottom: -0.5rem;
        z-index: 1;
    }
    .tutorial-dialogue-box {
        margin-bottom: 1.2rem;
        padding: 1rem;
        width: 100%;
        min-height: 100px;
    }
    .tutorial-text {
        font-size: 0.82rem;
    }
}

/* ── 超小屏 ── */
@media (max-width: 380px) {
    .tutorial-portrait { height: clamp(130px, 28vh, 200px); }
    .tutorial-dialogue-box { padding: 0.8rem; }
    .tutorial-text { font-size: 0.78rem; }
}

/* ── 大屏幕 ── */
@media (min-width: 1440px) {
    .tutorial-container { max-width: 800px; }
    .tutorial-portrait { height: clamp(320px, 45vh, 480px); }
    .tutorial-text { font-size: 0.95rem; }
}
@media (min-width: 1920px) {
    .tutorial-container { max-width: 880px; }
    .tutorial-portrait { height: clamp(360px, 42vh, 520px); }
    .tutorial-text { font-size: 1rem; }
}
@media (min-width: 2560px) {
    .tutorial-container { max-width: 960px; }
    .tutorial-portrait { height: clamp(400px, 40vh, 580px); }
    .tutorial-dialogue-box { padding: 1.5rem 1.8rem; min-height: 140px; }
    .tutorial-text { font-size: 1.05rem; }
}